From b7d18f105eb855a574d52d9000f1b484515565b4 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 28 Aug 2024 12:56:07 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=90=9B=20Fix=20incorrect=20display=20?= =?UTF-8?q?of=20initial=20button?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Logic to hide the payment button when used as a smart-button (not as a separate gateway) had a bug, if the PayPal method was not the first payment gateway. The new logic ensures that the payment button’s visibility is correct, regardless on whether it’s a separate payment gateway or included in the PayPal smart-button block. --- .../js/modules/Renderer/PaymentButton.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js index 11fe31f79..59e511a43 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js @@ -461,16 +461,19 @@ export default class PaymentButton { * @return {boolean} True means that this payment method is selected as current gateway. */ get isCurrentGateway() { - if ( ! this.isSeparateGateway ) { - return false; - } - /* * We need to rely on `getCurrentPaymentMethod()` here, as the `CheckoutBootstrap.js` * module fires the "ButtonEvents.RENDER" event before any PaymentButton instances are * created. I.e. we cannot observe the initial gateway selection event. */ - return this.methodId === getCurrentPaymentMethod(); + const currentMethod = getCurrentPaymentMethod(); + + if ( this.isSeparateGateway ) { + return this.methodId === currentMethod; + } + + // Button is rendered inside the Smart Buttons block. + return PaymentMethods.PAYPAL === currentMethod; } /** @@ -703,7 +706,7 @@ export default class PaymentButton { this.applyWrapperStyles(); - if ( this.isEligible && this.isPresent && this.isVisible ) { + if ( this.isEligible && this.isCurrentGateway && this.isVisible ) { if ( ! this.isButtonAttached ) { this.log( 'refresh.addButton' ); this.addButton(); From f5d4faba79dff72440b8d34161111029bf3bfed6 Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 28 Aug 2024 13:21:02 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=90=9B=20Remove=20the=20empty=20Googl?= =?UTF-8?q?e=20Pay=20wrapper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit When using Google Pay in a separate payment gateway, there was a left-over div-tag with a fixed height beneath the PayPal payment button. This empty div was the initial wrapper for the payment button in the smart-button block, and is removed from DOM when a separate gateway is used. --- .../js/modules/Renderer/PaymentButton.js | 31 ++++++++++++++----- 1 file changed, 23 insertions(+), 8 deletions(-) diff --git a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js index 59e511a43..8b5dcd3e9 100644 --- a/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js +++ b/modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js @@ -113,6 +113,13 @@ export default class PaymentButton { */ #isInitialized = false; + /** + * Whether the one-time initialization of the payment gateway is complete. + * + * @type {boolean} + */ + #gatewayInitialized = false; + /** * The button's context. * @@ -715,26 +722,34 @@ export default class PaymentButton { } /** - * Makes the custom payment gateway visible by removing initial inline styles from the DOM. + * Makes the payment gateway visible by removing initial inline styles from the DOM. + * Also, removes the button-placeholder container from the smart button block. * * Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true` */ showPaymentGateway() { + if ( this.#gatewayInitialized ) { + return; + } + this.#gatewayInitialized = true; + if ( ! this.isSeparateGateway || ! this.isEligible ) { return; } - const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`; + const styleSelector = `style[data-hide-gateway="${ this.methodId }"]`; + const wrapperSelector = `#${ this.wrappers.Default }`; - const styles = document.querySelectorAll( styleSelectors ); + document + .querySelectorAll( styleSelector ) + .forEach( ( el ) => el.remove() ); + + document + .querySelectorAll( wrapperSelector ) + .forEach( ( el ) => el.remove() ); - if ( ! styles.length ) { - return; - } this.log( 'Show gateway' ); - styles.forEach( ( el ) => el.remove() ); - // This code runs only once, during button initialization, and fixes the initial visibility. this.isVisible = this.isCurrentGateway; } From 8577594033878699c4164504e95a81ce1171c53e Mon Sep 17 00:00:00 2001 From: Philipp Stracker Date: Wed, 28 Aug 2024 13:41:55 +0200 Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=90=9B=20Remove=20the=20empty=20Apple?= =?UTF-8?q?=20Pay=20wrapper?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- modules/ppcp-applepay/resources/js/ApplepayButton.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/modules/ppcp-applepay/resources/js/ApplepayButton.js b/modules/ppcp-applepay/resources/js/ApplepayButton.js index 83b0a95b5..1c77a5c45 100644 --- a/modules/ppcp-applepay/resources/js/ApplepayButton.js +++ b/modules/ppcp-applepay/resources/js/ApplepayButton.js @@ -339,6 +339,12 @@ class ApplePayButton { this.#isInitialized = true; this.applePayConfig = config; + if ( this.isSeparateGateway ) { + document + .querySelectorAll( '#ppc-button-applepay-container' ) + .forEach( ( el ) => el.remove() ); + } + if ( ! this.isEligible ) { this.hide(); } else {