}
+ */
+ async bootstrap() {
+ const MAX_WAIT_TIME = 10000; // Fail, if PayPal SDK is unavailable after 10 seconds.
+ const RESOLVE_INTERVAL = 200;
+
+ if (!this.buttonConfig || !widgetBuilder) {
+ this.error('Button could not be configured.');
+ return;
+ }
+
+ // This is a localization object of "gateway-settings.js". If it's missing, the script was
+ // not loaded.
+ if (!window.PayPalCommerceGatewaySettings) {
+ this.error(
+ 'PayPal settings are not fully loaded. Please clear the cache and reload the page.');
+ return;
+ }
+
+ // A helper function that clears the interval and resolves/rejects the promise.
+ const resolveOrReject = (resolve, reject, id, success = true) => {
+ clearInterval(id);
+ success ? resolve() : reject('Timeout while waiting for widgetBuilder.paypal');
+ };
+
+ // Wait for the PayPal SDK to be ready.
+ const paypalPromise = new Promise((resolve, reject) => {
+ let elapsedTime = 0;
+
+ const id = setInterval(() => {
+ if (widgetBuilder.paypal) {
+ resolveOrReject(resolve, reject, id);
+ } else if (elapsedTime >= MAX_WAIT_TIME) {
+ resolveOrReject(resolve, reject, id, false);
+ }
+ elapsedTime += RESOLVE_INTERVAL;
+ }, RESOLVE_INTERVAL);
+ });
+
+ // Load the custom SDK script.
+ const customScriptPromise = loadCustomScript({ url: this.buttonConfig.sdk_url });
+
+ // Wait for both promises to resolve before continuing.
+ await Promise
+ .all([customScriptPromise, paypalPromise])
+ .catch(err => {
+ console.log(`Failed to load ${this.methodName} dependencies:`, err);
+ });
+
+ /*
+ The fetchConfig method requires two objects to succeed:
+ (a) the SDK custom-script
+ (b) the `widgetBuilder.paypal` object
+ */
+ this.apiConfig = await this.fetchConfig(widgetBuilder.paypal);
+ await this.#onInitResolver();
+
+ this.#onInit = null;
+ }
+
+ /**
+ * Event handler, fires on `ppcp_paypal_render_preview`
+ *
+ * @param ev - Ignored
+ * @param ppcpConfig - The button settings for the preview.
+ */
+ renderPreview(ev, ppcpConfig) {
+ const id = ppcpConfig.button.wrapper;
+
+ if (!id) {
+ this.error('Button did not provide a wrapper ID', ppcpConfig);
+ return;
+ }
+
+ if (!this.buttons[id]) {
+ this._addButton(id, ppcpConfig);
+ } else {
+ // This is a debounced method, that fires after 100ms.
+ this._configureAllButtons(ppcpConfig);
+ }
+ }
+
+ /**
+ * Applies a new configuration to an existing preview button.
+ */
+ _configureButton(id, ppcpConfig) {
+ this.buttons[id]
+ .setDynamic(this.isDynamic())
+ .setPpcpConfig(ppcpConfig)
+ .render();
+ }
+
+ /**
+ * Apples the provided configuration to all existing preview buttons.
+ */
+ _configureAllButtons(ppcpConfig) {
+ Object.entries(this.buttons).forEach(([id, button]) => {
+ this._configureButton(id, {
+ ...ppcpConfig,
+ button: {
+ ...ppcpConfig.button,
+
+ // The ppcpConfig object might refer to a different wrapper.
+ // Fix the selector, to avoid unintentionally hidden preview buttons.
+ wrapper: button.wrapper,
+ },
+ });
+ });
+ }
+
+ /**
+ * Creates a new preview button, that is rendered once the bootstrapping Promise resolves.
+ */
+ _addButton(id, ppcpConfig) {
+ const createButton = () => {
+ if (!this.buttons[id]) {
+ this.buttons[id] = this.createButtonInstance(id).setButtonConfig(this.buttonConfig);
+ }
+
+ this._configureButton(id, ppcpConfig);
+ };
+
+ if (this.#onInit) {
+ this.#onInit.then(createButton);
+ } else {
+ createButton();
+ }
+ }
+
+ /**
+ * Refreshes all buttons using the latest buttonConfig.
+ *
+ * @return {this} Reference to self, for chaining.
+ */
+ renderButtons() {
+ if (this.isEnabled) {
+ Object.values(this.buttons).forEach(button => button.render());
+ } else {
+ Object.values(this.buttons).forEach(button => button.remove());
+ }
+
+ return this;
+ }
+
+ /**
+ * Enables this payment method, which re-creates or refreshes all buttons.
+ *
+ * @return {this} Reference to self, for chaining.
+ */
+ enable() {
+ if (!this.isEnabled) {
+ this.isEnabled = true;
+ this.renderButtons();
+ }
+
+ return this;
+ }
+
+ /**
+ * Disables this payment method, effectively removing all preview buttons.
+ *
+ * @return {this} Reference to self, for chaining.
+ */
+ disable() {
+ if (!this.isEnabled) {
+ this.isEnabled = false;
+ this.renderButtons();
+ }
+
+ return this;
+ }
+}
+
+export default PreviewButtonManager;
diff --git a/modules/ppcp-googlepay/extensions.php b/modules/ppcp-googlepay/extensions.php
index 31b65e6f1..92ff195b0 100644
--- a/modules/ppcp-googlepay/extensions.php
+++ b/modules/ppcp-googlepay/extensions.php
@@ -20,6 +20,9 @@ return array(
'wcgateway.settings.fields' => function ( ContainerInterface $container, array $fields ): array {
+ // Used in various places to mark fields for the preview button.
+ $apm_name = 'GooglePay';
+
// Eligibility check.
if ( ! $container->has( 'googlepay.eligible' ) || ! $container->get( 'googlepay.eligible' ) ) {
return $fields;
@@ -133,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()
@@ -142,64 +145,79 @@ return array(
->action_visible( 'googlepay_button_color' )
->action_visible( 'googlepay_button_language' )
->action_visible( 'googlepay_button_shipping_enabled' )
+ ->action_visible( 'googlepay_button_preview' )
->action_class( 'googlepay_button_enabled', 'active' )
->to_array(),
)
),
+ 'data-ppcp-apm-name' => $apm_name,
+ 'data-ppcp-field-name' => 'is_enabled',
),
'classes' => array( 'ppcp-valign-label-middle', 'ppcp-align-label-center' ),
),
'googlepay_button_type' => array(
- 'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
- 'type' => 'select',
- 'desc_tip' => true,
- 'description' => __(
+ 'title' => __( 'Button Label', 'woocommerce-paypal-payments' ),
+ 'type' => 'select',
+ 'desc_tip' => true,
+ 'description' => __(
'This controls the label of the Google Pay button.',
'woocommerce-paypal-payments'
),
- 'classes' => array( 'ppcp-field-indent' ),
- 'class' => array(),
- 'input_class' => array( 'wc-enhanced-select' ),
- 'default' => 'pay',
- 'options' => PropertiesDictionary::button_types(),
- 'screens' => array( State::STATE_ONBOARDED ),
- 'gateway' => 'dcc',
- 'requirements' => array(),
+ 'classes' => array( 'ppcp-field-indent' ),
+ 'class' => array(),
+ 'input_class' => array( 'wc-enhanced-select' ),
+ 'default' => 'pay',
+ 'options' => PropertiesDictionary::button_types(),
+ 'screens' => array( State::STATE_ONBOARDED ),
+ 'gateway' => 'dcc',
+ 'requirements' => array(),
+ 'custom_attributes' => array(
+ 'data-ppcp-apm-name' => $apm_name,
+ 'data-ppcp-field-name' => 'type',
+ ),
),
'googlepay_button_color' => array(
- 'title' => __( 'Button Color', 'woocommerce-paypal-payments' ),
- 'type' => 'select',
- 'desc_tip' => true,
- 'description' => __(
+ 'title' => __( 'Button Color', 'woocommerce-paypal-payments' ),
+ 'type' => 'select',
+ 'desc_tip' => true,
+ 'description' => __(
'Google Pay payment buttons exist in two styles: dark and light. To provide contrast, use dark buttons on light backgrounds and light buttons on dark or colorful backgrounds.',
'woocommerce-paypal-payments'
),
- 'label' => '',
- 'input_class' => array( 'wc-enhanced-select' ),
- 'classes' => array( 'ppcp-field-indent' ),
- 'class' => array(),
- 'default' => 'black',
- 'options' => PropertiesDictionary::button_colors(),
- 'screens' => array( State::STATE_ONBOARDED ),
- 'gateway' => 'dcc',
- 'requirements' => array(),
+ 'label' => '',
+ 'input_class' => array( 'wc-enhanced-select' ),
+ 'classes' => array( 'ppcp-field-indent' ),
+ 'class' => array(),
+ 'default' => 'black',
+ 'options' => PropertiesDictionary::button_colors(),
+ 'screens' => array( State::STATE_ONBOARDED ),
+ 'gateway' => 'dcc',
+ 'requirements' => array(),
+ 'custom_attributes' => array(
+ 'data-ppcp-apm-name' => $apm_name,
+ 'data-ppcp-field-name' => 'color',
+ ),
),
'googlepay_button_language' => array(
- 'title' => __( 'Button Language', 'woocommerce-paypal-payments' ),
- 'type' => 'select',
- 'desc_tip' => true,
- 'description' => __(
+ 'title' => __( 'Button Language', 'woocommerce-paypal-payments' ),
+ 'type' => 'select',
+ 'desc_tip' => true,
+ 'description' => __(
'The language and region used for the displayed Google Pay button. The default value is the current language and region setting in a browser.',
'woocommerce-paypal-payments'
),
- 'classes' => array( 'ppcp-field-indent' ),
- 'class' => array(),
- 'input_class' => array( 'wc-enhanced-select' ),
- 'default' => 'en',
- 'options' => PropertiesDictionary::button_languages(),
- 'screens' => array( State::STATE_ONBOARDED ),
- 'gateway' => 'dcc',
- 'requirements' => array(),
+ 'classes' => array( 'ppcp-field-indent' ),
+ 'class' => array(),
+ 'input_class' => array( 'wc-enhanced-select' ),
+ 'default' => 'en',
+ 'options' => PropertiesDictionary::button_languages(),
+ 'screens' => array( State::STATE_ONBOARDED ),
+ 'gateway' => 'dcc',
+ 'requirements' => array(),
+ 'custom_attributes' => array(
+ 'data-ppcp-apm-name' => $apm_name,
+ 'data-ppcp-field-name' => 'language',
+ ),
),
'googlepay_button_shipping_enabled' => array(
'title' => __( 'Shipping Callback', 'woocommerce-paypal-payments' ),
@@ -209,13 +227,29 @@ return array(
'Synchronizes your available shipping options with Google Pay. Enabling this may impact the buyer experience.',
'woocommerce-paypal-payments'
),
- 'classes' => array( 'ppcp-field-indent' ),
+ 'classes' => array( 'ppcp-field-indent ppcp' ),
'label' => __( 'Enable Google Pay shipping callback', 'woocommerce-paypal-payments' ),
'default' => 'no',
'screens' => array( State::STATE_ONBOARDED ),
'gateway' => 'dcc',
'requirements' => array(),
),
+ 'googlepay_button_preview' => array(
+ 'type' => 'ppcp-text',
+ 'text' => sprintf(
+ '
+',
+ $apm_name
+ ),
+ 'screens' => array(
+ State::STATE_ONBOARDED,
+ ),
+ 'requirements' => array(),
+ 'gateway' => 'dcc',
+ ),
)
);
},
diff --git a/modules/ppcp-googlepay/resources/js/GooglepayButton.js b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
index 00b8f7f7d..ea1387cea 100644
--- a/modules/ppcp-googlepay/resources/js/GooglepayButton.js
+++ b/modules/ppcp-googlepay/resources/js/GooglepayButton.js
@@ -139,6 +139,10 @@ class GooglepayButton {
initEventHandlers() {
const { wrapper, ppcpButtonWrapper } = this.contextConfig();
+ if (wrapper === ppcpButtonWrapper) {
+ throw new Error(`[GooglePayButton] "wrapper" and "ppcpButtonWrapper" values must differ to avoid infinite loop. Current value: "${wrapper}"`);
+ }
+
const syncButtonVisibility = () => {
const $ppcpButtonWrapper = jQuery(ppcpButtonWrapper);
setVisible(wrapper, $ppcpButtonWrapper.is(':visible'));
diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js
index 3b971986f..6010cec4c 100644
--- a/modules/ppcp-googlepay/resources/js/boot-admin.js
+++ b/modules/ppcp-googlepay/resources/js/boot-admin.js
@@ -1,146 +1,108 @@
-import {loadCustomScript} from "@paypal/paypal-js";
-import GooglepayButton from "./GooglepayButton";
-import widgetBuilder from "../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder";
+import GooglepayButton from './GooglepayButton';
+import PreviewButton from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButton';
+import PreviewButtonManager from '../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager';
-(function ({
- buttonConfig,
- jQuery
-}) {
-
- let googlePayConfig;
- 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 GooglePay config changes.
- jQuery([
- '#ppcp-googlepay_button_enabled',
- '#ppcp-googlepay_button_type',
- '#ppcp-googlepay_button_color',
- '#ppcp-googlepay_button_language',
- '#ppcp-googlepay_button_shipping_enabled'
- ].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.style = buttonConfig.button.style || {};
- buttonConfig.button.style.type = jQuery('#ppcp-googlepay_button_type').val();
- buttonConfig.button.style.color = jQuery('#ppcp-googlepay_button_color').val();
- buttonConfig.button.style.language = jQuery('#ppcp-googlepay_button_language').val();
+/**
+ * Accessor that creates and returns a single PreviewButtonManager instance.
+ */
+const buttonManager = () => {
+ if (!GooglePayPreviewButtonManager.instance) {
+ GooglePayPreviewButtonManager.instance = new GooglePayPreviewButtonManager();
}
- const createButton = function (ppcpConfig) {
- const selector = ppcpConfig.button.wrapper + 'GooglePay';
+ return GooglePayPreviewButtonManager.instance;
+};
- if (!jQuery('#ppcp-googlepay_button_enabled').is(':checked')) {
- jQuery(selector).remove();
- return;
- }
- buttonConfig = JSON.parse(JSON.stringify(buttonConfig));
- buttonConfig.button.wrapper = selector;
- applyConfigOptions(buttonConfig);
+/**
+ * Manages all GooglePay preview buttons on this page.
+ */
+class GooglePayPreviewButtonManager extends PreviewButtonManager {
+ constructor() {
+ const args = {
+ methodName: 'GooglePay',
+ buttonConfig: window.wc_ppcp_googlepay_admin,
+ };
- const wrapperElement = ``;
-
- if (!jQuery(selector).length) {
- jQuery(ppcpConfig.button.wrapper).after(wrapperElement);
- } else {
- jQuery(selector).replaceWith(wrapperElement);
- }
-
- const button = new GooglepayButton(
- 'preview',
- null,
- buttonConfig,
- ppcpConfig,
- );
-
- button.init(googlePayConfig);
-
- activeButtons[selector] = ppcpConfig;
+ super(args);
}
- const bootstrap = async function () {
- if (!widgetBuilder.paypal) {
- return;
+ /**
+ * Responsible for fetching and returning the PayPal configuration object for this payment
+ * method.
+ *
+ * @param {{}} payPal - The PayPal SDK object provided by WidgetBuilder.
+ * @return {Promise<{}>}
+ */
+ async fetchConfig(payPal) {
+ const apiMethod = payPal?.Googlepay()?.config;
+
+ if (!apiMethod) {
+ this.error('configuration object cannot be retrieved from PayPal');
+ return {};
}
- googlePayConfig = await widgetBuilder.paypal.Googlepay().config();
+ return await apiMethod();
+ }
- // We need to set bootstrapped here otherwise googlePayConfig may not be set.
- bootstrapped = true;
+ /**
+ * This method is responsible for creating a new PreviewButton instance and returning it.
+ *
+ * @param {string} wrapperId - CSS ID of the wrapper element.
+ * @return {GooglePayPreviewButton}
+ */
+ createButtonInstance(wrapperId) {
+ return new GooglePayPreviewButton({
+ selector: wrapperId,
+ apiConfig: this.apiConfig,
+ });
+ }
+}
- let options;
- while (options = buttonQueue.pop()) {
- createButton(options.ppcpConfig);
+
+/**
+ * A single GooglePay preview button instance.
+ */
+class GooglePayPreviewButton extends PreviewButton {
+ constructor(args) {
+ super(args);
+
+ this.selector = `${args.selector}GooglePay`;
+ this.defaultAttributes = {
+ button: {
+ style: {
+ type: 'pay',
+ color: 'black',
+ language: 'en',
+ },
+ },
+ };
+ }
+
+ createNewWrapper() {
+ const element = super.createNewWrapper();
+ element.addClass('ppcp-button-googlepay');
+
+ return element;
+ }
+
+ createButton(buttonConfig) {
+ const button = new GooglepayButton('preview', null, buttonConfig, this.ppcpConfig);
+
+ button.init(this.apiConfig);
+ }
+
+ /**
+ * Merge form details into the config object for preview.
+ * Mutates the previewConfig object; no return value.
+ */
+ dynamicPreviewConfig(buttonConfig, ppcpConfig) {
+ // Merge the current form-values into the preview-button configuration.
+ if (ppcpConfig.button && buttonConfig.button) {
+ Object.assign(buttonConfig.button.style, ppcpConfig.button.style);
}
- };
+ }
+}
- document.addEventListener(
- 'DOMContentLoaded',
- () => {
-
- if (typeof (buttonConfig) === 'undefined') {
- console.error('PayPal button could not be configured.');
- return;
- }
-
- let paypalLoaded = false;
- let googlePayLoaded = false;
-
- const tryToBoot = () => {
- if (!bootstrapped && paypalLoaded && googlePayLoaded) {
- bootstrap();
- }
- }
-
- // Load GooglePay SDK
- loadCustomScript({ url: buttonConfig.sdk_url }).then(() => {
- googlePayLoaded = 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_googlepay_admin,
- jQuery: window.jQuery
-});
+// Initialize the preview button manager.
+buttonManager();
diff --git a/modules/ppcp-googlepay/src/Assets/Button.php b/modules/ppcp-googlepay/src/Assets/Button.php
index 15f16e381..8ad4163ab 100644
--- a/modules/ppcp-googlepay/src/Assets/Button.php
+++ b/modules/ppcp-googlepay/src/Assets/Button.php
@@ -418,9 +418,12 @@ class Button implements ButtonInterface {
$shipping['countries'] = array_keys( $this->wc_countries()->get_shipping_countries() );
}
+ $is_enabled = $this->settings->has( 'googlepay_button_enabled' ) && $this->settings->get( 'googlepay_button_enabled' );
+
return array(
'environment' => $this->environment->current_environment_is( Environment::SANDBOX ) ? 'TEST' : 'PRODUCTION',
- 'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG ? true : false,
+ 'is_debug' => defined( 'WP_DEBUG' ) && WP_DEBUG,
+ 'is_enabled' => $is_enabled,
'sdk_url' => $this->sdk_url,
'button' => array(
'wrapper' => '#ppc-button-googlepay-container',
diff --git a/modules/ppcp-googlepay/src/GooglepayModule.php b/modules/ppcp-googlepay/src/GooglepayModule.php
index e478881ba..e2b0ea8c5 100644
--- a/modules/ppcp-googlepay/src/GooglepayModule.php
+++ b/modules/ppcp-googlepay/src/GooglepayModule.php
@@ -112,7 +112,7 @@ class GooglepayModule implements ModuleInterface {
add_action(
'admin_enqueue_scripts',
static function () use ( $c, $button ) {
- if ( ! is_admin() || ! $c->get( 'wcgateway.is-ppcp-settings-standard-payments-page' ) ) {
+ if ( ! is_admin() || ! $c->get( 'wcgateway.is-ppcp-settings-payment-methods-page' ) ) {
return;
}
diff --git a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
index 0a4dc45cc..e915905bd 100644
--- a/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
+++ b/modules/ppcp-wc-gateway/resources/css/gateway-settings.scss
@@ -2,10 +2,24 @@
width: 350px;
padding: 15px;
border: 1px solid lightgray;
+ background: #eeeeef;
border-radius: 15px;
box-shadow: 0 2px 10px 1px #ddd;
margin-right: -28px;
+ // Preview box showing a single button.
+ &[data-ppcp-apm-preview] {
+ height: 82px;
+
+ @media (min-width: 1200px) {
+ margin-top: -149px;
+ }
+
+ @media (min-width: 601px) and (max-width: 1399px) {
+ margin-right: 10px;
+ }
+ }
+
h4 {
margin-top: 0;
}
diff --git a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js b/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
index ed50902e6..5a81fca2f 100644
--- a/modules/ppcp-wc-gateway/resources/js/gateway-settings.js
+++ b/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";
@@ -312,6 +313,7 @@ document.addEventListener(
const payLaterMessagingLocations = ['product', 'cart', 'checkout', 'shop', 'home', 'general'];
const paypalButtonLocations = ['product', 'cart', 'checkout', 'mini-cart', 'cart-block', 'checkout-block-express', 'general'];
+ // Default preview buttons; on "Standard Payments" tab.
paypalButtonLocations.forEach((location) => {
const inputNamePrefix = location === 'checkout' ? '#ppcp-button' : '#ppcp-button_' + location;
const wrapperName = location.split('-').map(s => s.charAt(0).toUpperCase() + s.slice(1)).join('');
@@ -330,6 +332,31 @@ document.addEventListener(
createButtonPreview(() => getButtonSettings('#ppcp' + wrapperName + 'ButtonPreview', fields));
});
+ /**
+ * Inspect DOM to find APM button previews; on tabs like "Advanced Card Payments".
+ *
+ * How it works:
+ *
+ * 1. Add a to hold the preview button to the settings page:
+ * - `id="ppcp[NAME]ButtonPreview"`
+ * - `data-ppc-apm-preview="[NAME]"`
+ * 2. Mark all fields that are relevant for the preview button:
+ * - custom_attribute: `data-ppcp-apm-name="[NAME]"`
+ * - custom_attribute: `data-ppcp-field-name="[FIELD]"`
+ *
+ * This block will find all marked input fields and trigger a re-render of the
+ * preview button when one of those fields value changes.
+ *
+ * Example: See the ppcp-google-pay "extensions.php" file.
+ */
+ document.querySelectorAll('[data-ppcp-apm-preview]').forEach(item => {
+ const apmName = item.dataset.ppcpApmPreview;
+ const getSettings = buttonSettingsGetterFactory(apmName)
+ const renderButtonPreview = buttonRefreshTriggerFactory(apmName);
+
+ renderPreview(getSettings, renderButtonPreview)
+ });
+
payLaterMessagingLocations.forEach((location) => {
const inputNamePrefix = '#ppcp-pay_later_' + location + '_message';
const wrapperName = location.charAt(0).toUpperCase() + location.slice(1);
diff --git a/modules/ppcp-wc-gateway/resources/js/helper/preview-button.js b/modules/ppcp-wc-gateway/resources/js/helper/preview-button.js
new file mode 100644
index 000000000..50ff3b710
--- /dev/null
+++ b/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}
+ */
+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 };
+ };
+}
diff --git a/modules/ppcp-wc-gateway/services.php b/modules/ppcp-wc-gateway/services.php
index f2991d9ef..f8541e152 100644
--- a/modules/ppcp-wc-gateway/services.php
+++ b/modules/ppcp-wc-gateway/services.php
@@ -201,9 +201,23 @@ return array(
);
},
- 'wcgateway.is-ppcp-settings-standard-payments-page' => static function ( ContainerInterface $container ): bool {
- return $container->get( 'wcgateway.is-ppcp-settings-page' )
- && $container->get( 'wcgateway.current-ppcp-settings-page-id' ) === PayPalGateway::ID;
+ // Checks, if the current admin page contains settings for this plugin's payment methods.
+ 'wcgateway.is-ppcp-settings-payment-methods-page' => static function ( ContainerInterface $container ) : bool {
+ if ( ! $container->get( 'wcgateway.is-ppcp-settings-page' ) ) {
+ return false;
+ }
+
+ $active_tab = $container->get( 'wcgateway.current-ppcp-settings-page-id' );
+
+ return in_array(
+ $active_tab,
+ array(
+ PayPalGateway::ID,
+ CreditCardGateway::ID,
+ CardButtonGateway::ID,
+ ),
+ true
+ );
},
'wcgateway.current-ppcp-settings-page-id' => static function ( ContainerInterface $container ): string {
diff --git a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
index 50f453d9e..353d33827 100644
--- a/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
+++ b/modules/ppcp-wc-gateway/src/Assets/SettingsPageAssets.php
@@ -112,6 +112,13 @@ class SettingsPageAssets {
*/
private $billing_agreements_endpoint;
+ /**
+ * Whether we're on a settings page for our plugin's payment methods.
+ *
+ * @var bool
+ */
+ private $is_paypal_payment_method_page;
+
/**
* Assets constructor.
*
@@ -128,6 +135,7 @@ class SettingsPageAssets {
* @param bool $is_settings_page Whether it's a settings page of this plugin.
* @param bool $is_acdc_enabled Whether the ACDC gateway is enabled.
* @param BillingAgreementsEndpoint $billing_agreements_endpoint Billing Agreements endpoint.
+ * @param bool $is_paypal_payment_method_page Whether we're on a settings page for our plugin's payment methods.
*/
public function __construct(
string $module_url,
@@ -142,21 +150,23 @@ class SettingsPageAssets {
array $all_funding_sources,
bool $is_settings_page,
bool $is_acdc_enabled,
- BillingAgreementsEndpoint $billing_agreements_endpoint
+ BillingAgreementsEndpoint $billing_agreements_endpoint,
+ bool $is_paypal_payment_method_page
) {
- $this->module_url = $module_url;
- $this->version = $version;
- $this->subscription_helper = $subscription_helper;
- $this->client_id = $client_id;
- $this->currency = $currency;
- $this->country = $country;
- $this->environment = $environment;
- $this->is_pay_later_button_enabled = $is_pay_later_button_enabled;
- $this->disabled_sources = $disabled_sources;
- $this->all_funding_sources = $all_funding_sources;
- $this->is_settings_page = $is_settings_page;
- $this->is_acdc_enabled = $is_acdc_enabled;
- $this->billing_agreements_endpoint = $billing_agreements_endpoint;
+ $this->module_url = $module_url;
+ $this->version = $version;
+ $this->subscription_helper = $subscription_helper;
+ $this->client_id = $client_id;
+ $this->currency = $currency;
+ $this->country = $country;
+ $this->environment = $environment;
+ $this->is_pay_later_button_enabled = $is_pay_later_button_enabled;
+ $this->disabled_sources = $disabled_sources;
+ $this->all_funding_sources = $all_funding_sources;
+ $this->is_settings_page = $is_settings_page;
+ $this->is_acdc_enabled = $is_acdc_enabled;
+ $this->billing_agreements_endpoint = $billing_agreements_endpoint;
+ $this->is_paypal_payment_method_page = $is_paypal_payment_method_page;
}
/**
@@ -176,7 +186,7 @@ class SettingsPageAssets {
$this->register_admin_assets();
}
- if ( $this->is_paypal_payment_method_page() ) {
+ if ( $this->is_paypal_payment_method_page ) {
$this->register_paypal_admin_assets();
}
}
@@ -184,30 +194,6 @@ class SettingsPageAssets {
}
- /**
- * Check whether the current page is PayPal payment method settings.
- *
- * @return bool
- */
- private function is_paypal_payment_method_page(): bool {
-
- if ( ! function_exists( 'get_current_screen' ) ) {
- return false;
- }
-
- $screen = get_current_screen();
- if ( ! $screen || $screen->id !== 'woocommerce_page_wc-settings' ) {
- return false;
- }
-
- // phpcs:disable WordPress.Security.NonceVerification.Recommended
- $tab = wc_clean( wp_unslash( $_GET['tab'] ?? '' ) );
- $section = wc_clean( wp_unslash( $_GET['section'] ?? '' ) );
- // phpcs:enable WordPress.Security.NonceVerification.Recommended
-
- return 'checkout' === $tab && in_array( $section, array( PayPalGateway::ID, CardButtonGateway::ID ), true );
- }
-
/**
* Register assets for PayPal admin pages.
*/
diff --git a/modules/ppcp-wc-gateway/src/WCGatewayModule.php b/modules/ppcp-wc-gateway/src/WCGatewayModule.php
index 19f67ef53..76de0478c 100644
--- a/modules/ppcp-wc-gateway/src/WCGatewayModule.php
+++ b/modules/ppcp-wc-gateway/src/WCGatewayModule.php
@@ -183,7 +183,8 @@ class WCGatewayModule implements ModuleInterface {
$c->get( 'wcgateway.settings.funding-sources' ),
$c->get( 'wcgateway.is-ppcp-settings-page' ),
$settings->has( 'dcc_enabled' ) && $settings->get( 'dcc_enabled' ),
- $c->get( 'api.endpoint.billing-agreements' )
+ $c->get( 'api.endpoint.billing-agreements' ),
+ $c->get( 'wcgateway.is-ppcp-settings-payment-methods-page' )
);
$assets->register_assets();
}
diff --git a/tests/PHPUnit/WcGateway/Assets/SettingsPagesAssetsTest.php b/tests/PHPUnit/WcGateway/Assets/SettingsPagesAssetsTest.php
index 5569c4158..931c55fcf 100644
--- a/tests/PHPUnit/WcGateway/Assets/SettingsPagesAssetsTest.php
+++ b/tests/PHPUnit/WcGateway/Assets/SettingsPagesAssetsTest.php
@@ -33,7 +33,8 @@ class SettingsPagesAssetsTest extends TestCase
array(),
true,
false,
- $billingAgreementEndpoint
+ $billingAgreementEndpoint,
+ true
);
when('is_admin')