From 4cde024320263150d9ff39626d42914b4062630d Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Mon, 15 Jul 2024 13:18:07 +0200 Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Consolidate=20the=20previe?= =?UTF-8?q?w=20button=E2=80=99s=20CSS=20classes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Class names are now generated by the base class. This allows to remove a method from all derived classes --- .../resources/js/Preview/ApplePayPreviewButton.js | 7 ------- .../js/Preview/ApplePayPreviewButtonManager.js | 1 + .../resources/js/modules/Preview/PreviewButton.js | 15 ++++++++++----- .../js/modules/Preview/PreviewButtonManager.js | 8 ++++++++ .../js/Preview/GooglePayPreviewButton.js | 7 ------- .../js/Preview/GooglePayPreviewButtonManager.js | 1 + 6 files changed, 20 insertions(+), 19 deletions(-) diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js index de4807f78..2ad3e23f5 100644 --- a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js +++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButton.js @@ -18,13 +18,6 @@ export default class ApplePayPreviewButton extends PreviewButton { }; } - createNewWrapper() { - const wrapper = super.createNewWrapper(); - wrapper.classList.add( 'ppcp-button-apm', 'ppcp-button-applepay' ); - - return wrapper; - } - createButton( buttonConfig ) { const button = new ApplepayButton( 'preview', diff --git a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js index 741b800db..be15166e6 100644 --- a/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js +++ b/modules/ppcp-applepay/resources/js/Preview/ApplePayPreviewButtonManager.js @@ -44,6 +44,7 @@ export default class ApplePayPreviewButtonManager extends PreviewButtonManager { return new ApplePayPreviewButton( { selector: wrapperId, apiConfig: this.apiConfig, + methodName: this.methodName, } ); } } diff --git a/modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js b/modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js index 72f8c07df..418bb57f5 100644 --- a/modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js +++ b/modules/ppcp-button/resources/js/modules/Preview/PreviewButton.js @@ -5,16 +5,21 @@ import merge from 'deepmerge'; */ class PreviewButton { /** - * @param {string} selector - CSS ID of the wrapper, including the `#` - * @param {Object} apiConfig - PayPal configuration object; retrieved via a - * widgetBuilder API method + * @param {string} selector - CSS ID of the wrapper, including the `#` + * @param {Object} apiConfig - PayPal configuration object; retrieved via a + * widgetBuilder API method + * @param {string} methodName - Name of the payment method, e.g. "Google Pay" */ - constructor( { selector, apiConfig } ) { + constructor( { selector, apiConfig, methodName = '' } ) { this.apiConfig = apiConfig; this.defaultAttributes = {}; this.buttonConfig = {}; this.ppcpConfig = {}; this.isDynamic = true; + this.methodName = methodName; + this.methodSlug = this.methodName + .toLowerCase() + .replace( /[^a-z]+/g, '' ); // The selector is usually overwritten in constructor of derived class. this.selector = selector; @@ -31,7 +36,7 @@ class PreviewButton { createNewWrapper() { const wrapper = document.createElement( 'div' ); const previewId = this.selector.replace( '#', '' ); - const previewClass = 'ppcp-preview-button'; + const previewClass = `ppcp-preview-button ppcp-button-apm ppcp-button-${ this.methodSlug }`; wrapper.setAttribute( 'id', previewId ); wrapper.setAttribute( 'class', previewClass ); diff --git a/modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js b/modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js index c2df2b839..186cf7c45 100644 --- a/modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js +++ b/modules/ppcp-button/resources/js/modules/Preview/PreviewButtonManager.js @@ -21,6 +21,13 @@ class PreviewButtonManager { */ #onInit; + /** + * Initialize the new PreviewButtonManager. + * + * @param {string} methodName - Name of the payment method, e.g. "Google Pay" + * @param {Object} buttonConfig + * @param {Object} defaultAttributes + */ constructor( { methodName, buttonConfig, defaultAttributes } ) { // Define the payment method name in the derived class. this.methodName = methodName; @@ -97,6 +104,7 @@ class PreviewButtonManager { return new DummyPreviewButton( { selector: wrapperId, label: this.apiError, + methodName: this.methodName, } ); } diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js index 97bb62ea4..e6b27ee55 100644 --- a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js +++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButton.js @@ -20,13 +20,6 @@ export default class GooglePayPreviewButton extends PreviewButton { }; } - createNewWrapper() { - const wrapper = super.createNewWrapper(); - wrapper.classList.add( 'ppcp-button-apm', 'ppcp-button-googlepay' ); - - return wrapper; - } - createButton( buttonConfig ) { const button = new GooglepayButton( 'preview', diff --git a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js index 0406c1cc4..a3e9f66af 100644 --- a/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js +++ b/modules/ppcp-googlepay/resources/js/Preview/GooglePayPreviewButtonManager.js @@ -51,6 +51,7 @@ export default class GooglePayPreviewButtonManager extends PreviewButtonManager return new GooglePayPreviewButton( { selector: wrapperId, apiConfig: this.apiConfig, + methodName: this.methodName, } ); } }