🐛 Render preview when enabling the button

Before this, the “is enabled” checkbox was not observed; enabling it did not cause a preview button to render, and required changing any other form field that was linked to the button

Also start to extract some logic to a new helper file.

modules/ppcp-applepay/extensions.php

@@ -174,7 +174,7 @@ return array(
 					'gateway'           => 'dcc',
 					'requirements'      => array(),
 					'custom_attributes' => array(
-						'data-ppcp-display' => wp_json_encode(
+						'data-ppcp-display'    => wp_json_encode(
 							array(
 								$display_manager
 									->rule()
@@ -191,6 +191,8 @@ return array(
 									->to_array(),
 							)
 						),
+						'data-ppcp-apm-name'   => $apm_name,
+						'data-ppcp-field-name' => 'is_enabled',
 					),
 					'classes'           => array( 'ppcp-valign-label-middle', 'ppcp-align-label-center' ),
 				),

modules/ppcp-googlepay/extensions.php

@@ -136,7 +136,7 @@ return array(
 					'gateway'           => 'dcc',
 					'requirements'      => array(),
 					'custom_attributes' => array(
-						'data-ppcp-display' => wp_json_encode(
+						'data-ppcp-display'    => wp_json_encode(
 							array(
 								$display_manager
 									->rule()
@@ -150,6 +150,8 @@ return array(
 									->to_array(),
 							)
 						),
+						'data-ppcp-apm-name'   => $apm_name,
+						'data-ppcp-field-name' => 'is_enabled',
 					),
 					'classes'           => array( 'ppcp-valign-label-middle', 'ppcp-align-label-center' ),
 				),

modules/ppcp-wc-gateway/resources/js/gateway-settings.js

@@ -1,5 +1,6 @@
 import { loadScript } from "@paypal/paypal-js";
 import {debounce} from "./helper/debounce";
+import { buttonRefreshTriggerFactory, buttonSettingsGetterFactory } from './helper/preview-button';
 import Renderer from '../../../ppcp-button/resources/js/modules/Renderer/Renderer'
 import MessageRenderer from "../../../ppcp-button/resources/js/modules/Renderer/MessageRenderer";
 import {setVisibleByClass, isVisible} from "../../../ppcp-button/resources/js/modules/Helper/Hiding";
@@ -349,26 +350,9 @@ document.addEventListener(
                  * Example: See the ppcp-google-pay "extensions.php" file.
                  */
                 document.querySelectorAll('[data-ppcp-apm-preview]').forEach(item => {
-                    const buttonType = item.dataset.ppcpApmPreview;
-                    const fields = document.querySelectorAll(`[data-ppcp-apm-name="${buttonType}"]`)
-
-                    const getSettings = () => {
-                        const buttonConfig = {
-                            wrapper: `#ppcp${buttonType}ButtonPreview`,
-                            style: {},
-                        };
-
-                        fields.forEach(input => {
-                            const field = input.dataset.ppcpFieldName;
-                            buttonConfig.style[field] = input.value;
-                        });
-
-                        return { button: buttonConfig };
-                    };
-
-                    const renderButtonPreview = (settings) => {
-                        jQuery(document).trigger(`ppcp_paypal_render_preview_${buttonType}`, settings);
-                    };
+                    const apmName = item.dataset.ppcpApmPreview;
+                    const getSettings = buttonSettingsGetterFactory(apmName)
+                    const renderButtonPreview = buttonRefreshTriggerFactory(apmName);
 
                     renderPreview(getSettings, renderButtonPreview)
                 });

modules/ppcp-wc-gateway/resources/js/helper/preview-button.js

@@ -0,0 +1,68 @@
+/**
+ * Returns a Map with all input fields that are relevant to render the preview of the
+ * given payment button.
+ *
+ * @param {string} apmName - Value of the custom attribute `data-ppcp-apm-name`.
+ * @return {Map<string, {val:Function, el:HTMLInputElement}>}
+ */
+export function getButtonFormFields(apmName) {
+    const inputFields = document.querySelectorAll(`[data-ppcp-apm-name="${apmName}"]`);
+
+    return [...inputFields].reduce((fieldMap, el) => {
+        const key = el.dataset.ppcpFieldName;
+        let getter = () => el.value;
+
+        if ('LABEL' === el.tagName) {
+            el = el.querySelector('input[type="checkbox"]');
+            getter = () => el.checked;
+        }
+
+        return fieldMap.set(key, {
+            val: getter,
+            el,
+        });
+    }, new Map());
+}
+
+
+/**
+ * Returns a function that triggers an update of the specified preview button, when invoked.
+
+ * @param {string} apmName
+ * @return {((object) => void)}
+ */
+export function buttonRefreshTriggerFactory(apmName) {
+    const eventName = `ppcp_paypal_render_preview_${apmName}`;
+
+    return (settings) => {
+        jQuery(document).trigger(eventName, settings);
+    };
+}
+
+/**
+ * Returns a function that gets the current form values of the specified preview button.
+ *
+ * @param {string} apmName
+ * @return {() => {button: {wrapper:string, is_enabled:boolean, style:{}}}}
+ */
+export function buttonSettingsGetterFactory(apmName) {
+    const fields = getButtonFormFields(apmName);
+
+    return () => {
+        const buttonConfig = {
+            wrapper: `#ppcp${apmName}ButtonPreview`,
+            'is_enabled': true,
+            style: {},
+        };
+
+        fields.forEach((item, name) => {
+            if ('is_enabled' === name) {
+                buttonConfig[name] = item.val();
+            } else {
+                buttonConfig.style[name] = item.val();
+            }
+        });
+
+        return { button: buttonConfig };
+    };
+}