From a3ee77a4bc78a1156d60c52f733e2d8f4848fc8f Mon Sep 17 00:00:00 2001 From: Pedro Silva Date: Thu, 7 Sep 2023 11:21:58 +0100 Subject: [PATCH] Add support for hiding/showing/enabling/disabling GooglePay buttons --- .../js/modules/Helper/ButtonDisabler.js | 29 ++++++++- .../resources/js/modules/Helper/Hiding.js | 24 +++++++ .../resources/js/GooglepayButton.js | 65 ++++++++++++++----- 3 files changed, 98 insertions(+), 20 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js index ae7f3665c..b05a4dc70 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js +++ b/modules/ppcp-button/resources/js/modules/Helper/ButtonDisabler.js @@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => { return selectorOrElement; } +const triggerEnabled = (selectorOrElement, element) => { + jQuery(document).trigger('ppcp-enabled', { + 'handler': 'ButtonsDisabler.setEnabled', + 'action': 'enable', + 'selector': selectorOrElement, + 'element': element + }); +} + +const triggerDisabled = (selectorOrElement, element) => { + jQuery(document).trigger('ppcp-disabled', { + 'handler': 'ButtonsDisabler.setEnabled', + 'action': 'disable', + 'selector': selectorOrElement, + 'element': element + }); +} + export const setEnabled = (selectorOrElement, enable, form = null) => { const element = getElement(selectorOrElement); @@ -17,7 +35,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => { } if (enable) { - jQuery(element).css({ + jQuery(element).removeClass('ppcp-disabled') + .css({ 'cursor': '', '-webkit-filter': '', 'filter': '', @@ -25,8 +44,12 @@ export const setEnabled = (selectorOrElement, enable, form = null) => { .off('mouseup') .find('> *') .css('pointer-events', ''); + + triggerEnabled(selectorOrElement, element); + } else { - jQuery(element).css({ + jQuery(element).addClass('ppcp-disabled') + .css({ 'cursor': 'not-allowed', '-webkit-filter': 'grayscale(100%)', 'filter': 'grayscale(100%)', @@ -44,6 +67,8 @@ export const setEnabled = (selectorOrElement, enable, form = null) => { }) .find('> *') .css('pointer-events', 'none'); + + triggerDisabled(selectorOrElement, element); } }; diff --git a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js index 96836de0c..9ffd5a031 100644 --- a/modules/ppcp-button/resources/js/modules/Helper/Hiding.js +++ b/modules/ppcp-button/resources/js/modules/Helper/Hiding.js @@ -9,6 +9,24 @@ const getElement = (selectorOrElement) => { return selectorOrElement; } +const triggerHidden = (handler, selectorOrElement, element) => { + jQuery(document).trigger('ppcp-hidden', { + 'handler': handler, + 'action': 'hide', + 'selector': selectorOrElement, + 'element': element + }); +} + +const triggerShown = (handler, selectorOrElement, element) => { + jQuery(document).trigger('ppcp-shown', { + 'handler': handler, + 'action': 'show', + 'selector': selectorOrElement, + 'element': element + }); +} + export const isVisible = (element) => { return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length); } @@ -27,14 +45,18 @@ export const setVisible = (selectorOrElement, show, important = false) => { } element.style.setProperty('display', 'none', important ? 'important' : ''); + triggerHidden('Hiding.setVisible', selectorOrElement, element); + } else { if (currentValue === 'none') { element.style.removeProperty('display'); + triggerShown('Hiding.setVisible', selectorOrElement, element); } // still not visible (if something else added display: none in CSS) if (!isVisible(element)) { element.style.setProperty('display', 'block'); + triggerShown('Hiding.setVisible', selectorOrElement, element); } } }; @@ -47,8 +69,10 @@ export const setVisibleByClass = (selectorOrElement, show, hiddenClass) => { if (show) { element.classList.remove(hiddenClass); + triggerShown('Hiding.setVisibleByClass', selectorOrElement, element); } else { element.classList.add(hiddenClass); + triggerHidden('Hiding.setVisibleByClass', selectorOrElement, element); } }; diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js index 95e599a1e..c708a42ad 100644 --- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js +++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js @@ -1,4 +1,6 @@ import ContextHandlerFactory from "./Context/ContextHandlerFactory"; +import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hiding'; +import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler'; class GooglepayButton { @@ -37,6 +39,7 @@ class GooglepayButton { this.baseCardPaymentMethod = this.allowedPaymentMethods[0]; this.initClient(); + this.initEventHandlers(); this.paymentsClient.isReadyToPay( this.buildReadyToPayRequest(this.allowedPaymentMethods, config) @@ -65,10 +68,25 @@ class GooglepayButton { return true; } - buildReadyToPayRequest(allowedPaymentMethods, baseRequest) { - return Object.assign({}, baseRequest, { - allowedPaymentMethods: allowedPaymentMethods, - }); + /** + * Returns configurations relative to this button context. + */ + contextConfig() { + if (this.context === 'mini-cart') { + return { + wrapper: this.buttonConfig.button.mini_cart_wrapper, + ppcpStyle: this.ppcpConfig.button.mini_cart_style, + buttonStyle: this.buttonConfig.button.mini_cart_style, + ppcpButtonWrapper: this.ppcpConfig.button.mini_cart_wrapper + } + } + + return { + wrapper: this.buttonConfig.button.wrapper, + ppcpStyle: this.ppcpConfig.button.style, + buttonStyle: this.buttonConfig.button.style, + ppcpButtonWrapper: this.ppcpConfig.button.wrapper + } } initClient() { @@ -82,26 +100,37 @@ class GooglepayButton { }); } + initEventHandlers() { + const { wrapper, ppcpButtonWrapper } = this.contextConfig(); + + const syncButtonVisibility = () => { + const $ppcpButtonWrapper = jQuery(ppcpButtonWrapper); + setVisible(wrapper, $ppcpButtonWrapper.is(':visible')); + setEnabled(wrapper, !$ppcpButtonWrapper.hasClass('ppcp-disabled')); + } + + jQuery(document).on('ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled', (ev, data) => { + if (jQuery(data.selector).is(ppcpButtonWrapper)) { + syncButtonVisibility(); + } + }); + + syncButtonVisibility(); + } + + buildReadyToPayRequest(allowedPaymentMethods, baseRequest) { + return Object.assign({}, baseRequest, { + allowedPaymentMethods: allowedPaymentMethods, + }); + } + /** * Add a Google Pay purchase button */ addButton(baseCardPaymentMethod) { console.log('[GooglePayButton] addButton', this.context); - const wrapper = - (this.context === 'mini-cart') - ? this.buttonConfig.button.mini_cart_wrapper - : this.buttonConfig.button.wrapper; - - const ppcpStyle = - (this.context === 'mini-cart') - ? this.ppcpConfig.button.mini_cart_style - : this.ppcpConfig.button.style; - - const buttonStyle = - (this.context === 'mini-cart') - ? this.buttonConfig.button.mini_cart_style - : this.buttonConfig.button.style; + const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig(); jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);