✨ Add preview button for Apple Pay on ACDC

Note: `phpcbf` adjusted whitespace in extensions.php

modules/ppcp-applepay/extensions.php

@@ -20,6 +20,9 @@ use WooCommerce\PayPalCommerce\WcGateway\Settings\Settings;
 return array(
 	'wcgateway.settings.fields' => function ( ContainerInterface $container, array $fields ): array {
 
+		// Used in various places to mark fields for the preview button.
+		$apm_name = 'ApplePay';
+
 		// Eligibility check.
 		if ( ! $container->has( 'applepay.eligible' ) || ! $container->get( 'applepay.eligible' ) ) {
 			return $fields;
@@ -183,6 +186,7 @@ return array(
 									->action_visible( 'applepay_button_type' )
 									->action_visible( 'applepay_button_language' )
 									->action_visible( 'applepay_checkout_data_mode' )
+									->action_visible( 'applepay_button_preview' )
 									->action_class( 'applepay_button_enabled', 'active' )
 									->to_array(),
 							)
@@ -253,56 +257,68 @@ return array(
 					'requirements' => array(),
 				),
 				'applepay_button_type'                => array(
-					'title'        => __( 'Button Label', 'woocommerce-paypal-payments' ),
+					'title'             => __( 'Button Label', 'woocommerce-paypal-payments' ),
-					'type'         => 'select',
+					'type'              => 'select',
-					'desc_tip'     => true,
+					'desc_tip'          => true,
-					'description'  => __(
+					'description'       => __(
 						'This controls the label of the Apple Pay button.',
 						'woocommerce-paypal-payments'
 					),
-					'classes'      => array( 'ppcp-field-indent' ),
+					'classes'           => array( 'ppcp-field-indent' ),
-					'class'        => array(),
+					'class'             => array(),
-					'input_class'  => array( 'wc-enhanced-select' ),
+					'input_class'       => array( 'wc-enhanced-select' ),
-					'default'      => 'pay',
+					'default'           => 'pay',
-					'options'      => PropertiesDictionary::button_types(),
+					'options'           => PropertiesDictionary::button_types(),
-					'screens'      => array( State::STATE_ONBOARDED ),
+					'screens'           => array( State::STATE_ONBOARDED ),
-					'gateway'      => 'dcc',
+					'gateway'           => 'dcc',
-					'requirements' => array(),
+					'requirements'      => array(),
+					'custom_attributes' => array(
+						'data-ppcp-apm-name'   => $apm_name,
+						'data-ppcp-field-name' => 'type',
+					),
 				),
 				'applepay_button_color'               => array(
-					'title'        => __( 'Button Color', 'woocommerce-paypal-payments' ),
+					'title'             => __( 'Button Color', 'woocommerce-paypal-payments' ),
-					'type'         => 'select',
+					'type'              => 'select',
-					'desc_tip'     => true,
+					'desc_tip'          => true,
-					'description'  => __(
+					'description'       => __(
 						'The Apple Pay Button may appear as a black button with white lettering, white button with black lettering, or a white button with black lettering and a black outline.',
 						'woocommerce-paypal-payments'
 					),
-					'label'        => '',
+					'label'             => '',
-					'input_class'  => array( 'wc-enhanced-select' ),
+					'input_class'       => array( 'wc-enhanced-select' ),
-					'classes'      => array( 'ppcp-field-indent' ),
+					'classes'           => array( 'ppcp-field-indent' ),
-					'class'        => array(),
+					'class'             => array(),
-					'default'      => 'black',
+					'default'           => 'black',
-					'options'      => PropertiesDictionary::button_colors(),
+					'options'           => PropertiesDictionary::button_colors(),
-					'screens'      => array( State::STATE_ONBOARDED ),
+					'screens'           => array( State::STATE_ONBOARDED ),
-					'gateway'      => 'dcc',
+					'gateway'           => 'dcc',
-					'requirements' => array(),
+					'requirements'      => array(),
+					'custom_attributes' => array(
+						'data-ppcp-apm-name'   => $apm_name,
+						'data-ppcp-field-name' => 'color',
+					),
 				),
 				'applepay_button_language'            => array(
-					'title'        => __( 'Button Language', 'woocommerce-paypal-payments' ),
+					'title'             => __( 'Button Language', 'woocommerce-paypal-payments' ),
-					'type'         => 'select',
+					'type'              => 'select',
-					'desc_tip'     => true,
+					'desc_tip'          => true,
-					'description'  => __(
+					'description'       => __(
 						'The language and region used for the displayed Apple Pay button. The default value is the current language and region setting in a browser.',
 						'woocommerce-paypal-payments'
 					),
-					'classes'      => array( 'ppcp-field-indent' ),
+					'classes'           => array( 'ppcp-field-indent' ),
-					'class'        => array(),
+					'class'             => array(),
-					'input_class'  => array( 'wc-enhanced-select' ),
+					'input_class'       => array( 'wc-enhanced-select' ),
-					'default'      => 'en',
+					'default'           => 'en',
-					'options'      => PropertiesDictionary::button_languages(),
+					'options'           => PropertiesDictionary::button_languages(),
-					'screens'      => array( State::STATE_ONBOARDED ),
+					'screens'           => array( State::STATE_ONBOARDED ),
-					'gateway'      => 'dcc',
+					'gateway'           => 'dcc',
-					'requirements' => array(),
+					'requirements'      => array(),
+					'custom_attributes' => array(
+						'data-ppcp-apm-name'   => $apm_name,
+						'data-ppcp-field-name' => 'language',
+					),
 				),
 				'applepay_checkout_data_mode'         => array(
 					'title'        => __( 'Send checkout billing and shipping data to Apple Pay', 'woocommerce-paypal-payments' ),
@@ -318,6 +334,22 @@ return array(
 					'gateway'      => 'dcc',
 					'requirements' => array(),
 				),
+				'applepay_button_preview'             => array(
+					'type'         => 'ppcp-text',
+					'text'         => sprintf(
+						'
+<div class="ppcp-preview ppcp-button-preview" data-ppcp-apm-preview="%1$s">
+	<h4>' . __( 'Button Styling Preview', 'woocommerce-paypal-payments' ) . '</h4>
+	<div id="ppcp%1$sButtonPreview" class="ppcp-button-preview-inner"></div>
+</div>',
+						$apm_name
+					),
+					'screens'      => array(
+						State::STATE_ONBOARDED,
+					),
+					'requirements' => array(),
+					'gateway'      => 'dcc',
+				),
 			)
 		);
 	},

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

@@ -1,7 +1,107 @@
-import {loadCustomScript} from "@paypal/paypal-js";
 import ApplepayButton from "./ApplepayButton";
 import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
+import PreviewButton from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButton";
+import PreviewButtonManager from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager";
 
+/**
+ * Accessor that creates and returns a single PreviewButtonManager instance.
+ */
+const buttonManager = () => {
+    if (!ApplePayPreviewButtonManager.instance) {
+        ApplePayPreviewButtonManager.instance = new ApplePayPreviewButtonManager();
+    }
+
+    return ApplePayPreviewButtonManager.instance;
+}
+
+
+/**
+ * Manages all Apple Pay preview buttons on this page.
+ */
+class ApplePayPreviewButtonManager extends PreviewButtonManager {
+    constructor() {
+        const defaultButton = {
+            type: 'pay',
+            color: 'black',
+            lang: 'en'
+        };
+
+        const args = {
+            methodName: 'ApplePay',
+            buttonConfig: window.wc_ppcp_applepay_admin,
+            widgetBuilder,
+            defaultAttributes: {button: defaultButton}
+        };
+
+        super(args);
+    }
+
+    /**
+     * Responsible for fetching and returning the PayPal configuration object for this payment
+     * method.
+     *
+     * @return {Promise<{}>}
+     */
+    async fetchConfig() {
+        const apiMethod = this.widgetBuilder?.paypal?.Applepay()?.config
+
+        if (!apiMethod) {
+            this.error('configuration object cannot be retrieved from PayPal');
+            return {};
+        }
+
+        return await apiMethod();
+    }
+
+    /**
+     * This method is responsible for creating a new PreviewButton instance and returning it.
+     *
+     * @param {string} wrapperId - CSS ID of the wrapper element.
+     * @return {ApplePayPreviewButton}
+     */
+    createButtonInst(wrapperId) {
+        return new ApplePayPreviewButton({
+            selector: wrapperId,
+            configResponse: this.configResponse,
+            defaultAttributes: this.defaultAttributes
+        });
+    }
+}
+
+
+/**
+ * A single Apple Pay preview button instance.
+ */
+class ApplePayPreviewButton extends PreviewButton {
+    constructor(args) {
+        super(args);
+
+        this.selector = `${args.selector}ApplePay`
+    }
+
+    createNewWrapper() {
+        const element = super.createNewWrapper();
+        element.addClass('ppcp-button-applepay');
+
+        return element;
+    }
+
+    createButton() {
+        const button = new ApplepayButton(
+            'preview',
+            null,
+            this.buttonConfig,
+            this.ppcpConfig,
+        );
+
+        button.init(this.configResponse);
+    }
+}
+
+// Initialize the preview button manager.
+buttonManager();
+
+/*
 (function ({
    buttonConfig,
    jQuery
@@ -46,11 +146,6 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
         }, 100);
     });
 
-    /**
-     * Decides, whether to display the Apple Pay preview button.
-     *
-     * @return {boolean}
-     */
     const shouldDisplayPreviewButton = function () {
         // TODO - original condition, which is wrong.
         return jQuery('#ppcp-applepay_button_enabled').is(':checked');
@@ -156,3 +251,4 @@ import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/Wi
     buttonConfig: window.wc_ppcp_applepay_admin,
     jQuery: window.jQuery
 });
+*/