diff --git a/modules/ppcp-applepay/resources/js/boot-admin.js b/modules/ppcp-applepay/resources/js/boot-admin.js index a44c922bb..dffd0429b 100644 --- a/modules/ppcp-applepay/resources/js/boot-admin.js +++ b/modules/ppcp-applepay/resources/js/boot-admin.js @@ -1,6 +1,6 @@ -import ApplepayButton from "./ApplepayButton"; -import PreviewButton from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButton"; -import PreviewButtonManager from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager"; +import ApplepayButton from './ApplepayButton'; +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. @@ -11,7 +11,7 @@ const buttonManager = () => { } return ApplePayPreviewButtonManager.instance; -} +}; /** @@ -21,7 +21,7 @@ class ApplePayPreviewButtonManager extends PreviewButtonManager { constructor() { const args = { methodName: 'ApplePay', - buttonConfig: window.wc_ppcp_applepay_admin + buttonConfig: window.wc_ppcp_applepay_admin, }; super(args); @@ -35,7 +35,7 @@ class ApplePayPreviewButtonManager extends PreviewButtonManager { * @return {Promise<{}>} */ async fetchConfig(payPal) { - const apiMethod = payPal?.Applepay()?.config + const apiMethod = payPal?.Applepay()?.config; if (!apiMethod) { this.error('configuration object cannot be retrieved from PayPal'); @@ -54,7 +54,7 @@ class ApplePayPreviewButtonManager extends PreviewButtonManager { createButtonInstance(wrapperId) { return new ApplePayPreviewButton({ selector: wrapperId, - apiConfig: this.apiConfig + apiConfig: this.apiConfig, }); } } @@ -67,13 +67,13 @@ class ApplePayPreviewButton extends PreviewButton { constructor(args) { super(args); - this.selector = `${args.selector}ApplePay` + this.selector = `${args.selector}ApplePay`; this.defaultAttributes = { button: { type: 'pay', color: 'black', - lang: 'en' - } + lang: 'en', + }, }; } @@ -85,12 +85,7 @@ class ApplePayPreviewButton extends PreviewButton { } createButton(buttonConfig) { - const button = new ApplepayButton( - 'preview', - null, - buttonConfig, - this.ppcpConfig, - ); + const button = new ApplepayButton('preview', null, buttonConfig, this.ppcpConfig); button.init(this.apiConfig); } @@ -107,7 +102,8 @@ class ApplePayPreviewButton extends PreviewButton { if (ppcpConfig.button) { buttonConfig.button.type = ppcpConfig.button.style.type; buttonConfig.button.color = ppcpConfig.button.style.color; - buttonConfig.button.lang = ppcpConfig.button.style?.lang || ppcpConfig.button.style.language; + buttonConfig.button.lang = + ppcpConfig.button.style?.lang || ppcpConfig.button.style.language; } } } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js index ae4c5ec55..5467c63d1 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js @@ -1,4 +1,4 @@ -import merge from "deepmerge"; +import merge from 'deepmerge'; /** * Base class for APM button previews, used on the plugin's settings page. @@ -9,7 +9,10 @@ class PreviewButton { * @param {object} apiConfig - PayPal configuration object; retrieved via a * widgetBuilder API method */ - constructor({selector, apiConfig}) { + constructor({ + selector, + apiConfig, + }) { this.apiConfig = apiConfig; this.defaultAttributes = {}; this.buttonConfig = {}; @@ -29,10 +32,10 @@ class PreviewButton { * @return {jQuery} Always a single jQuery element with the new DOM node. */ createNewWrapper() { - const previewId = this.selector.replace('#', '') + const previewId = this.selector.replace('#', ''); const previewClass = 'ppcp-button-apm'; - return jQuery(`
`) + return jQuery(`
`); } /** @@ -53,8 +56,8 @@ class PreviewButton { * @return {this} Reference to self, for chaining. */ setButtonConfig(config) { - this.buttonConfig = merge(this.defaultAttributes, config) - this.buttonConfig.button.wrapper = this.selector + this.buttonConfig = merge(this.defaultAttributes, config); + this.buttonConfig.button.wrapper = this.selector; return this; } @@ -97,7 +100,7 @@ class PreviewButton { return; } this.domWrapper = this.createNewWrapper(); - this.domWrapper.insertAfter(this.wrapper) + this.domWrapper.insertAfter(this.wrapper); } else { this.domWrapper.empty().show(); } @@ -113,14 +116,14 @@ class PreviewButton { * previewButtonConfig.button.wrapper must be different from this.ppcpConfig.button.wrapper! * If both selectors point to the same element, an infinite loop is triggered. */ - const buttonWrapper = previewButtonConfig.button.wrapper.replace(/^#/, '') - const ppcpWrapper = this.ppcpConfig.button.wrapper.replace(/^#/, '') + const buttonWrapper = previewButtonConfig.button.wrapper.replace(/^#/, ''); + const ppcpWrapper = this.ppcpConfig.button.wrapper.replace(/^#/, ''); if (buttonWrapper === ppcpWrapper) { throw new Error(`[APM Preview Button] Infinite loop detected. Provide different selectors for the button/ppcp wrapper elements! Selector: "#${buttonWrapper}"`); } - this.createButton(previewButtonConfig) + this.createButton(previewButtonConfig); } remove() { diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js index e0c71c914..fd4540d24 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js @@ -1,5 +1,5 @@ -import {loadCustomScript} from "@paypal/paypal-js"; -import widgetBuilder from "./WidgetBuilder"; +import { loadCustomScript } from '@paypal/paypal-js'; +import widgetBuilder from './WidgetBuilder'; /** * Manages all PreviewButton instances of a certain payment method on the page. @@ -19,14 +19,18 @@ class PreviewButtonManager { */ #onInit; - constructor({methodName, buttonConfig, defaultAttributes}) { + constructor({ + methodName, + buttonConfig, + defaultAttributes, + }) { // Define the payment method name in the derived class. this.methodName = methodName; this.buttonConfig = buttonConfig; this.defaultAttributes = defaultAttributes; - this.isEnabled = true + this.isEnabled = true; this.buttons = {}; this.apiConfig = null; @@ -77,7 +81,7 @@ class PreviewButtonManager { * Output an error message to the console, with a module-specific prefix. */ error(message, ...args) { - console.error(`${this.methodName} ${message}`, ...args) + console.error(`${this.methodName} ${message}`, ...args); } /** @@ -86,7 +90,7 @@ class PreviewButtonManager { * style settings that were provided from server-side. */ isDynamic() { - return !!document.querySelector(`[data-ppcp-apm-name="${this.methodName}"]`) + return !!document.querySelector(`[data-ppcp-apm-name="${this.methodName}"]`); } /** @@ -105,9 +109,11 @@ class PreviewButtonManager { return; } - // This is a localization object of "gateway-settings.js". If it's missing, the script was not loaded. + // 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.'); + this.error( + 'PayPal settings are not fully loaded. Please clear the cache and reload the page.'); return; } @@ -132,22 +138,22 @@ class PreviewButtonManager { }); // Load the custom SDK script. - const customScriptPromise = loadCustomScript({url: this.buttonConfig.sdk_url}); + 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) - }) + 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 + 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() + await this.#onInitResolver(); this.#onInit = null; } @@ -159,10 +165,10 @@ class PreviewButtonManager { * @param ppcpConfig - The button settings for the preview. */ renderPreview(ev, ppcpConfig) { - const id = ppcpConfig.button.wrapper + const id = ppcpConfig.button.wrapper; if (!id) { - this.error('Button did not provide a wrapper ID', ppcpConfig) + this.error('Button did not provide a wrapper ID', ppcpConfig); return; } @@ -180,7 +186,7 @@ class PreviewButtonManager { this.buttons[id] .setDynamic(this.isDynamic()) .setPpcpConfig(ppcpConfig) - .render() + .render(); } /** @@ -193,7 +199,7 @@ class PreviewButtonManager { } this.#configureButton(id, ppcpConfig); - } + }; if (this.#onInit) { this.#onInit.then(createButton); @@ -209,9 +215,9 @@ class PreviewButtonManager { */ renderButtons() { if (this.isEnabled) { - Object.values(this.buttons).forEach(button => button.render()) + Object.values(this.buttons).forEach(button => button.render()); } else { - Object.values(this.buttons).forEach(button => button.remove()) + Object.values(this.buttons).forEach(button => button.remove()); } return this; diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js index 8de33a224..6010cec4c 100644 --- a/modules/ppcp-googlepay/resources/js/boot-admin.js +++ b/modules/ppcp-googlepay/resources/js/boot-admin.js @@ -1,6 +1,6 @@ -import GooglepayButton from "./GooglepayButton"; -import PreviewButton from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButton"; -import PreviewButtonManager from "../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager"; +import GooglepayButton from './GooglepayButton'; +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. @@ -11,7 +11,7 @@ const buttonManager = () => { } return GooglePayPreviewButtonManager.instance; -} +}; /** @@ -21,7 +21,7 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager { constructor() { const args = { methodName: 'GooglePay', - buttonConfig: window.wc_ppcp_googlepay_admin + buttonConfig: window.wc_ppcp_googlepay_admin, }; super(args); @@ -35,7 +35,7 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager { * @return {Promise<{}>} */ async fetchConfig(payPal) { - const apiMethod = payPal?.Googlepay()?.config + const apiMethod = payPal?.Googlepay()?.config; if (!apiMethod) { this.error('configuration object cannot be retrieved from PayPal'); @@ -54,7 +54,7 @@ class GooglePayPreviewButtonManager extends PreviewButtonManager { createButtonInstance(wrapperId) { return new GooglePayPreviewButton({ selector: wrapperId, - apiConfig: this.apiConfig + apiConfig: this.apiConfig, }); } } @@ -67,15 +67,15 @@ class GooglePayPreviewButton extends PreviewButton { constructor(args) { super(args); - this.selector = `${args.selector}GooglePay` + this.selector = `${args.selector}GooglePay`; this.defaultAttributes = { button: { style: { type: 'pay', color: 'black', - language: 'en' - } - } + language: 'en', + }, + }, }; } @@ -87,12 +87,7 @@ class GooglePayPreviewButton extends PreviewButton { } createButton(buttonConfig) { - const button = new GooglepayButton( - 'preview', - null, - buttonConfig, - this.ppcpConfig, - ); + const button = new GooglepayButton('preview', null, buttonConfig, this.ppcpConfig); button.init(this.apiConfig); }