Add support for hiding/showing/enabling/disabling GooglePay buttons

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);
     }
 };
 

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);
     }
 };
 

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, {
+     * Returns configurations relative to this button context.
-            allowedPaymentMethods: allowedPaymentMethods,
+     */
-        });
+    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 =
+        const { wrapper, ppcpStyle, buttonStyle } = this.contextConfig();
-            (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;
 
         jQuery(wrapper).addClass('ppcp-button-' + ppcpStyle.shape);