From 534e41252476c65512992c162719c38353957c87 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Fri, 12 Jul 2024 17:32:59 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Extract=20preview=20classe?= =?UTF-8?q?s=20to=20own=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../js/Preview/ApplePayPreviewButton.js | 61 ++++++++++ .../Preview/ApplePayPreviewButtonManager.js | 49 ++++++++ .../ppcp-applepay/resources/js/boot-admin.js | 110 +----------------- .../js/modules/Renderer/PreviewButton.js | 2 +- .../modules/Renderer/PreviewButtonManager.js | 2 +- .../js/Preview/GooglePayPreviewButton.js | 53 +++++++++ .../Preview/GooglePayPreviewButtonManager.js | 56 +++++++++ .../ppcp-googlepay/resources/js/boot-admin.js | 109 +---------------- 8 files changed, 223 insertions(+), 219 deletions(-) create mode 100644 modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js create mode 100644 modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js create mode 100644 modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js create mode 100644 modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js new file mode 100644 index 000000000..6e3f721da --- /dev/null +++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js @@ -0,0 +1,61 @@ +import ApplepayButton from '../ApplepayButton'; +import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton'; + +/** + * A single Apple Pay preview button instance. + */ +export default class ApplePayPreviewButton extends PreviewButton { + constructor( args ) { + super( args ); + + this.selector = `${ args.selector }ApplePay`; + this.defaultAttributes = { + button: { + type: 'pay', + color: 'black', + lang: 'en', + }, + }; + } + + createNewWrapper() { + const element = super.createNewWrapper(); + element.addClass( 'ppcp-button-apm ppcp-button-applepay' ); + + return element; + } + + createButton( buttonConfig ) { + const button = new ApplepayButton( + '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. + * @param buttonConfig + * @param ppcpConfig + */ + dynamicPreviewConfig( buttonConfig, ppcpConfig ) { + // The Apple Pay button expects the "wrapper" to be an ID without `#` prefix! + buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace( + /^#/, + '' + ); + + // Merge the current form-values into the preview-button configuration. + 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; + } + } +} diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js new file mode 100644 index 000000000..43ecc37b8 --- /dev/null +++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js @@ -0,0 +1,49 @@ +import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager'; +import ApplePayPreviewButton from './ApplePayPreviewButton'; + +/** + * Manages all Apple Pay preview buttons on this page. + */ +export default class ApplePayPreviewButtonManager extends PreviewButtonManager { + constructor() { + const args = { + methodName: 'ApplePay', + buttonConfig: window.wc_ppcp_applepay_admin, + }; + + super( args ); + } + + /** + * 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?.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} + */ + createButtonInstance( wrapperId ) { + return new ApplePayPreviewButton( { + selector: wrapperId, + apiConfig: this.apiConfig, + } ); + } +} diff --git a/modules/ppcp-applepay/resources/js/boot-admin.js b/modules/ppcp-applepay/resources/js/boot-admin.js index 080d7c8aa..e92c03cdf 100644 --- a/modules/ppcp-applepay/resources/js/boot-admin.js +++ b/modules/ppcp-applepay/resources/js/boot-admin.js @@ -1,6 +1,4 @@ -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 ApplePayPreviewButtonManager from './Preview/ApplePayPreviewButtonManager'; /** * Accessor that creates and returns a single PreviewButtonManager instance. @@ -14,111 +12,5 @@ const buttonManager = () => { return ApplePayPreviewButtonManager.instance; }; -/** - * Manages all Apple Pay preview buttons on this page. - */ -class ApplePayPreviewButtonManager extends PreviewButtonManager { - constructor() { - const args = { - methodName: 'ApplePay', - buttonConfig: window.wc_ppcp_applepay_admin, - }; - - super( args ); - } - - /** - * 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?.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} - */ - createButtonInstance( wrapperId ) { - return new ApplePayPreviewButton( { - selector: wrapperId, - apiConfig: this.apiConfig, - } ); - } -} - -/** - * A single Apple Pay preview button instance. - */ -class ApplePayPreviewButton extends PreviewButton { - constructor( args ) { - super( args ); - - this.selector = `${ args.selector }ApplePay`; - this.defaultAttributes = { - button: { - type: 'pay', - color: 'black', - lang: 'en', - }, - }; - } - - createNewWrapper() { - const element = super.createNewWrapper(); - element.addClass( 'ppcp-button-applepay' ); - - return element; - } - - createButton( buttonConfig ) { - const button = new ApplepayButton( - '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. - * @param buttonConfig - * @param ppcpConfig - */ - dynamicPreviewConfig( buttonConfig, ppcpConfig ) { - // The Apple Pay button expects the "wrapper" to be an ID without `#` prefix! - buttonConfig.button.wrapper = buttonConfig.button.wrapper.replace( - /^#/, - '' - ); - - // Merge the current form-values into the preview-button configuration. - 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; - } - } -} - // Initialize the preview button manager. buttonManager(); diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js index cec951927..ac189e89e 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButton.js @@ -30,7 +30,7 @@ class PreviewButton { */ createNewWrapper() { const previewId = this.selector.replace( '#', '' ); - const previewClass = 'ppcp-button-apm'; + const previewClass = 'ppcp-preview-button'; return jQuery( `
` ); } diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js index 42e715904..9cb9fa81f 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PreviewButtonManager.js @@ -95,7 +95,7 @@ class PreviewButtonManager { */ createDummy( wrapperId ) { const elButton = document.createElement( 'div' ); - elButton.classList.add( 'ppcp-button-apm', 'ppcp-button-dummy' ); + elButton.classList.add( 'ppcp-preview-button', 'ppcp-button-dummy' ); elButton.innerHTML = `${ this.apiError ?? 'Not Available' }`; diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js new file mode 100644 index 000000000..7bd3ffa7f --- /dev/null +++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js @@ -0,0 +1,53 @@ +import GooglepayButton from '../GooglepayButton'; +import PreviewButton from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButton'; + +/** + * A single GooglePay preview button instance. + */ +export default 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-apm 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. + * @param buttonConfig + * @param ppcpConfig + */ + 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 ); + } + } +} diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js new file mode 100644 index 000000000..0aaef0396 --- /dev/null +++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js @@ -0,0 +1,56 @@ +import PreviewButtonManager from '../../../../ppcp-button/resources/js/modules/Renderer/PreviewButtonManager'; +import GooglePayPreviewButton from './GooglePayPreviewButton'; + +/** + * Manages all GooglePay preview buttons on this page. + */ +export default class GooglePayPreviewButtonManager extends PreviewButtonManager { + constructor() { + const args = { + methodName: 'GooglePay', + buttonConfig: window.wc_ppcp_googlepay_admin, + }; + + super( args ); + } + + /** + * 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 {}; + } + + try { + return await apiMethod(); + } catch ( error ) { + if ( error.message.includes( 'Not Eligible' ) ) { + this.apiError = 'Not Eligible'; + } + return null; + } + } + + /** + * 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, + } ); + } +} diff --git a/modules/ppcp-googlepay/resources/js/boot-admin.js b/modules/ppcp-googlepay/resources/js/boot-admin.js index 41cace0c0..953a6088e 100644 --- a/modules/ppcp-googlepay/resources/js/boot-admin.js +++ b/modules/ppcp-googlepay/resources/js/boot-admin.js @@ -1,6 +1,4 @@ -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 GooglePayPreviewButtonManager from './Preview/GooglePayPreviewButtonManager'; /** * Accessor that creates and returns a single PreviewButtonManager instance. @@ -14,110 +12,5 @@ const buttonManager = () => { return GooglePayPreviewButtonManager.instance; }; -/** - * Manages all GooglePay preview buttons on this page. - */ -class GooglePayPreviewButtonManager extends PreviewButtonManager { - constructor() { - const args = { - methodName: 'GooglePay', - buttonConfig: window.wc_ppcp_googlepay_admin, - }; - - super( args ); - } - - /** - * 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 {}; - } - - try { - return await apiMethod(); - } catch ( error ) { - if ( error.message.includes( 'Not Eligible' ) ) { - this.apiError = 'Not Eligible'; - } - return null; - } - } - - /** - * 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, - } ); - } -} - -/** - * 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. - * @param buttonConfig - * @param ppcpConfig - */ - 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 ); - } - } -} - // Initialize the preview button manager. buttonManager();