Merge branch 'task/shared-apple-google' into feat/PCP-154-apple-pay-payment

modules/ppcp-blocks/resources/js/checkout-block.js

@@ -29,7 +29,15 @@ const PayPalComponent = ({
         if (!loaded) {
             loadPaypalScript(config.scriptData, () => {
                 setLoaded(true);
-                buttonModuleWatcher.registerContextBootstrap(config.scriptData.context, this);
+
+                buttonModuleWatcher.registerContextBootstrap(config.scriptData.context, {
+                    createOrder: () => {
+                        return createOrder();
+                    },
+                    onApprove: (data, actions) => {
+                        return handleApprove(data, actions);
+                    },
+                });
             });
         }
     }, [loaded]);

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-button/resources/js/modules/Helper/ScriptLoading.js

@@ -7,8 +7,7 @@ import {keysToCamelCase} from "./Utils";
 // This component may be used by multiple modules. This assures that options are shared between all instances.
 let options = window.ppcpWidgetBuilder = window.ppcpWidgetBuilder || {
     isLoading: false,
-    onLoadedCallbacks: [],
+    onLoadedCallbacks: []
-    loadingWaitTime: 5000 // 5 seconds
 };
 
 export const loadPaypalScript = (config, onLoaded) => {
@@ -27,13 +26,6 @@ export const loadPaypalScript = (config, onLoaded) => {
     }
     options.isLoading = true;
 
-    // Arm a timeout so the module isn't locked on isLoading state on failure.
-    let loadingTimeout = setTimeout(() => {
-        console.error('Failed to load PayPal script.');
-        options.isLoading = false;
-        options.onLoadedCallbacks = [];
-    }, options.loadingWaitTime);
-
     // Callback to be called once the PayPal script is loaded.
     const callback = (paypal) => {
         widgetBuilder.setPaypal(paypal);
@@ -44,7 +36,6 @@ export const loadPaypalScript = (config, onLoaded) => {
 
         options.isLoading = false;
         options.onLoadedCallbacks = [];
-        clearTimeout(loadingTimeout);
     }
 
     // Build the PayPal script options.

modules/ppcp-button/src/Assets/SmartButton.php

@@ -462,8 +462,7 @@ class SmartButton implements SmartButtonInterface {
 						return;
 					}
 
-					$this->button_renderer( PayPalGateway::ID );
+					$this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_single_product_button_render' );
-					do_action( 'woocommerce_paypal_payments_single_product_button_render' );
 				},
 				31
 			);
@@ -495,18 +494,16 @@ class SmartButton implements SmartButtonInterface {
 			add_action(
 				$this->pay_order_renderer_hook(),
 				function (): void {
-					$this->button_renderer( PayPalGateway::ID );
+					$this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_payorder_button_render' );
 					$this->button_renderer( CardButtonGateway::ID );
-					do_action( 'woocommerce_paypal_payments_payorder_button_render' );
 				},
 				20
 			);
 			add_action(
 				$this->checkout_button_renderer_hook(),
 				function (): void {
-					$this->button_renderer( PayPalGateway::ID );
+					$this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_checkout_button_render' );
 					$this->button_renderer( CardButtonGateway::ID );
-					do_action( 'woocommerce_paypal_payments_checkout_button_render' );
 				}
 			);
 
@@ -518,8 +515,7 @@ class SmartButton implements SmartButtonInterface {
 						return;
 					}
 
-					$this->button_renderer( PayPalGateway::ID );
+					$this->button_renderer( PayPalGateway::ID, 'woocommerce_paypal_payments_cart_button_render' );
-					do_action( 'woocommerce_paypal_payments_cart_button_render' );
 				},
 				20
 			);
@@ -623,8 +619,9 @@ class SmartButton implements SmartButtonInterface {
 	 * Renders the HTML for the buttons.
 	 *
 	 * @param string      $gateway_id The gateway ID, like 'ppcp-gateway'.
+	 * @param string|null $action_name The action name to be called.
 	 */
-	public function button_renderer( string $gateway_id ) {
+	public function button_renderer( string $gateway_id, string $action_name = null ) {
 
 		$available_gateways = WC()->payment_gateways->get_available_payment_gateways();
 
@@ -634,7 +631,14 @@ class SmartButton implements SmartButtonInterface {
 
 		// The wrapper is needed for the loading spinner,
 		// otherwise jQuery block() prevents buttons rendering.
-		echo '<div class="ppc-button-wrapper"><div id="ppc-button-' . esc_attr( $gateway_id ) . '"></div></div>';
+		echo '<div class="ppc-button-wrapper">';
+		echo '<div id="ppc-button-' . esc_attr( $gateway_id ) . '"></div>';
+
+		if ( null !== $action_name ) {
+			do_action( $action_name );
+		}
+
+		echo '</div>';
 	}
 
 	/**