Merge branch 'trunk' into PCP-2158-apple-pay-use-checkout-form-data-to-update-shipping-and-billing

# Conflicts:
#	modules/ppcp-applepay/resources/js/ApplepayButton.js

modules/ppcp-applepay/resources/css/styles.scss

@@ -1,11 +1,11 @@
-#applepay-container {
+#applepay-container, .ppcp-button-applepay {
 	--apple-pay-button-height: 45px;
 	--apple-pay-button-min-height: 40px;
 	--apple-pay-button-width: 100%;
 	--apple-pay-button-max-width: 750px;
 	--apple-pay-button-border-radius: 4px;
 	--apple-pay-button-overflow: hidden;
-	--apple-pay-button-margin:7px 0;
+	margin:7px 0;
 	&.ppcp-button-pill {
 		--apple-pay-button-border-radius: 50px;
 	}
@@ -17,7 +17,7 @@
 }
 
 .woocommerce-checkout {
-	#applepay-container {
+	#applepay-container, .ppcp-button-applepay {
 		margin-top: 0.5em;
 		--apple-pay-button-border-radius: 4px;
 		--apple-pay-button-height: 45px;
@@ -30,7 +30,7 @@
 .ppcp-has-applepay-block {
 
 	.wp-block-woocommerce-checkout {
-		#applepay-container {
+		#applepay-container, .ppcp-button-applepay {
 			--apple-pay-button-margin: 0;
 			--apple-pay-button-height: 40px;
 			&.ppcp-button-pill {
@@ -40,7 +40,7 @@
 	}
 
 	.wp-block-woocommerce-cart {
-		#applepay-container {
+		#applepay-container, .ppcp-button-applepay {
 			--apple-pay-button-margin: 0;
 			--apple-pay-button-height: 40px;
 		}
@@ -52,5 +52,17 @@
 			}
 		}
 	}
-
+}
+
+.wp-admin {
+	.ppcp-button-applepay {
+		pointer-events: none;
+	}
+	&.ppcp-non-ios-device {
+		.ppcp-button-applepay {
+			apple-pay-button {
+				display: block;
+			}
+		}
+	}
 }

modules/ppcp-applepay/resources/js/ApplepayButton.js

@@ -4,6 +4,7 @@ import {setVisible} from '../../../ppcp-button/resources/js/modules/Helper/Hidin
 import {setEnabled} from '../../../ppcp-button/resources/js/modules/Helper/ButtonDisabler';
 import FormValidator from "../../../ppcp-button/resources/js/modules/Helper/FormValidator";
 import ErrorHandler from '../../../ppcp-button/resources/js/modules/ErrorHandler';
+import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
 
 class ApplepayButton {
 
@@ -48,7 +49,7 @@ class ApplepayButton {
         const isEligible = this.applePayConfig.isEligible;
         if (isEligible) {
             this.fetchTransactionInfo().then(() => {
-                const isSubscriptionProduct = this.ppcpConfig.data_client_id.has_subscriptions === true;
+                const isSubscriptionProduct = this.ppcpConfig?.data_client_id?.has_subscriptions === true;
                 if (isSubscriptionProduct) {
                     return;
                 }
@@ -140,13 +141,12 @@ class ApplepayButton {
         return session;
     }
 
-
-
-
     /**
      * Add a Apple Pay purchase button
      */
     addButton() {
+        this.log('addButton', this.context);
+
         const wrapper =
             (this.context === 'mini-cart')
                 ? this.buttonConfig.button.mini_cart_wrapper
@@ -155,7 +155,7 @@ class ApplepayButton {
             (this.context === 'mini-cart')
                 ? this.ppcpConfig.button.mini_cart_style.shape
                 : this.ppcpConfig.button.style.shape;
-        const appleContainer = this.context === 'mini-cart' ? document.getElementById("applepay-container-minicart") : document.getElementById("applepay-container");
+        const appleContainer = document.getElementById(wrapper);
         const type = this.buttonConfig.button.type;
         const language = this.buttonConfig.button.lang;
         const color = this.buttonConfig.button.color;
@@ -190,7 +190,7 @@ class ApplepayButton {
             try {
                 const formData = new FormData(document.querySelector(checkoutFormSelector));
                 this.form_saved = Object.fromEntries(formData.entries());
-                // This line should be reviewed, the paypal.Applepay().confirmOrder fails if we add it.
+                // This line should be reviewed, the widgetBuilder.paypal.Applepay().confirmOrder fails if we add it.
                 this.update_request_data_with_form(paymentDataRequest);
             } catch (error) {
                 console.error(error);
@@ -309,7 +309,7 @@ class ApplepayButton {
         return (applePayValidateMerchantEvent) => {
             this.log('onvalidatemerchant call');
 
-            paypal.Applepay().validateMerchant({
+            widgetBuilder.paypal.Applepay().validateMerchant({
                 validationUrl: applePayValidateMerchantEvent.validationURL
             })
                 .then(validateResult => {
@@ -536,7 +536,7 @@ class ApplepayButton {
             this.log('onpaymentauthorized paypal order ID', id, event.payment.token, event.payment.billingContact);
 
             try {
-                const confirmOrderResponse = await paypal.Applepay().confirmOrder({
+                const confirmOrderResponse = await widgetBuilder.paypal.Applepay().confirmOrder({
                     orderId: id,
                     token: event.payment.token,
                     billingContact: event.payment.billingContact,

modules/ppcp-applepay/resources/js/Context/ContextHandlerFactory.js

@@ -4,6 +4,7 @@ import CheckoutHandler from "./CheckoutHandler";
 import CartBlockHandler from "./CartBlockHandler";
 import CheckoutBlockHandler from "./CheckoutBlockHandler";
 import MiniCartHandler from "./MiniCartHandler";
+import PreviewHandler from "./PreviewHandler";
 import PayNowHandler from "./PayNowHandler";
 
 class ContextHandlerFactory {
@@ -24,6 +25,8 @@ class ContextHandlerFactory {
                 return new CartBlockHandler(buttonConfig, ppcpConfig);
             case 'checkout-block':
                 return new CheckoutBlockHandler(buttonConfig, ppcpConfig);
+            case 'preview':
+                return new PreviewHandler(buttonConfig, ppcpConfig);
         }
     }
 }

modules/ppcp-applepay/resources/js/Context/PreviewHandler.js

@@ -0,0 +1,37 @@
+import BaseHandler from "./BaseHandler";
+
+class PreviewHandler extends BaseHandler {
+
+    constructor(buttonConfig, ppcpConfig, externalHandler) {
+        super(buttonConfig, ppcpConfig, externalHandler);
+    }
+
+    transactionInfo() {
+        // We need to return something as ApplePay button initialization expects valid data.
+        return {
+            countryCode: "US",
+            currencyCode: "USD",
+            totalPrice: "10.00",
+            totalPriceStatus: "FINAL"
+        }
+    }
+
+    createOrder() {
+        throw new Error('Create order fail. This is just a preview.');
+    }
+
+    approveOrder(data, actions) {
+        throw new Error('Approve order fail. This is just a preview.');
+    }
+
+    actionHandler() {
+        throw new Error('Action handler fail. This is just a preview.');
+    }
+
+    errorHandler() {
+        throw new Error('Error handler fail. This is just a preview.');
+    }
+
+}
+
+export default PreviewHandler;

modules/ppcp-applepay/resources/js/boot-admin.js

@@ -0,0 +1,148 @@
+import {loadCustomScript} from "@paypal/paypal-js";
+import ApplepayButton from "./ApplepayButton";
+import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
+
+(function ({
+   buttonConfig,
+   jQuery
+}) {
+
+    let applePayConfig;
+    let buttonQueue = [];
+    let activeButtons = {};
+    let bootstrapped = false;
+
+    // React to PayPal config changes.
+    jQuery(document).on('ppcp_paypal_render_preview', (ev, ppcpConfig) => {
+        if (bootstrapped) {
+            createButton(ppcpConfig);
+        } else {
+            buttonQueue.push({
+                ppcpConfig: JSON.parse(JSON.stringify(ppcpConfig))
+            });
+        }
+    });
+
+    // React to ApplePay config changes.
+    jQuery([
+        '#ppcp-applepay_button_enabled',
+        '#ppcp-applepay_button_type',
+        '#ppcp-applepay_button_color',
+        '#ppcp-applepay_button_language'
+    ].join(',')).on('change', () => {
+        for (const [selector, ppcpConfig] of Object.entries(activeButtons)) {
+            createButton(ppcpConfig);
+        }
+    });
+
+    // Maybe we can find a more elegant reload method when transitioning from styling modes.
+    jQuery([
+        '#ppcp-smart_button_enable_styling_per_location'
+    ].join(',')).on('change', () => {
+        setTimeout(() => {
+            for (const [selector, ppcpConfig] of Object.entries(activeButtons)) {
+                createButton(ppcpConfig);
+            }
+        }, 100);
+    });
+
+    const applyConfigOptions = function (buttonConfig) {
+        buttonConfig.button = buttonConfig.button || {};
+        buttonConfig.button.type = jQuery('#ppcp-applepay_button_type').val();
+        buttonConfig.button.color = jQuery('#ppcp-applepay_button_color').val();
+        buttonConfig.button.lang = jQuery('#ppcp-applepay_button_language').val();
+    }
+
+    const createButton = function (ppcpConfig) {
+        const selector = ppcpConfig.button.wrapper + 'ApplePay';
+
+        if (!jQuery('#ppcp-applepay_button_enabled').is(':checked')) {
+            jQuery(selector).remove();
+            return;
+        }
+
+        buttonConfig = JSON.parse(JSON.stringify(buttonConfig));
+        buttonConfig.button.wrapper = selector.replace('#', '');
+        applyConfigOptions(buttonConfig);
+
+        const wrapperElement = `<div id="${selector.replace('#', '')}" class="ppcp-button-applepay"></div>`;
+
+        if (!jQuery(selector).length) {
+            jQuery(ppcpConfig.button.wrapper).after(wrapperElement);
+        } else {
+            jQuery(selector).replaceWith(wrapperElement);
+        }
+
+        const button = new ApplepayButton(
+            'preview',
+            null,
+            buttonConfig,
+            ppcpConfig,
+        );
+
+        button.init(applePayConfig);
+
+        activeButtons[selector] = ppcpConfig;
+    }
+
+    const bootstrap = async function () {
+        if (!widgetBuilder.paypal) {
+            return;
+        }
+
+        applePayConfig = await widgetBuilder.paypal.Applepay().config();
+
+        // We need to set bootstrapped here otherwise applePayConfig may not be set.
+        bootstrapped = true;
+
+        let options;
+        while (options = buttonQueue.pop()) {
+            createButton(options.ppcpConfig);
+        }
+
+        if (!window.ApplePaySession) {
+            jQuery('body').addClass('ppcp-non-ios-device')
+        }
+    };
+
+    document.addEventListener(
+        'DOMContentLoaded',
+        () => {
+
+            if (typeof (buttonConfig) === 'undefined') {
+                console.error('PayPal button could not be configured.');
+                return;
+            }
+
+            let paypalLoaded = false;
+            let applePayLoaded = false;
+
+            const tryToBoot = () => {
+                if (!bootstrapped && paypalLoaded && applePayLoaded) {
+                    bootstrap();
+                }
+            }
+
+            // Load ApplePay SDK
+            loadCustomScript({ url: buttonConfig.sdk_url }).then(() => {
+                applePayLoaded = true;
+                tryToBoot();
+            });
+
+            // Wait for PayPal to be loaded externally
+            if (typeof widgetBuilder.paypal !== 'undefined') {
+                paypalLoaded = true;
+                tryToBoot();
+            }
+
+            jQuery(document).on('ppcp-paypal-loaded', () => {
+                paypalLoaded = true;
+                tryToBoot();
+            });
+        },
+    );
+
+})({
+    buttonConfig: window.wc_ppcp_applepay_admin,
+    jQuery: window.jQuery
+});