Merge branch 'trunk' into release/2.9.0-rc1

This commit is contained in:
Emili Castells Guasch 2024-08-28 13:59:56 +02:00
commit e8bbc43410
2 changed files with 38 additions and 14 deletions

View file

@ -339,6 +339,12 @@ class ApplePayButton {
this.#isInitialized = true; this.#isInitialized = true;
this.applePayConfig = config; this.applePayConfig = config;
if ( this.isSeparateGateway ) {
document
.querySelectorAll( '#ppc-button-applepay-container' )
.forEach( ( el ) => el.remove() );
}
if ( ! this.isEligible ) { if ( ! this.isEligible ) {
this.hide(); this.hide();
} else { } else {

View file

@ -113,6 +113,13 @@ export default class PaymentButton {
*/ */
#isInitialized = false; #isInitialized = false;
/**
* Whether the one-time initialization of the payment gateway is complete.
*
* @type {boolean}
*/
#gatewayInitialized = false;
/** /**
* The button's context. * The button's context.
* *
@ -461,16 +468,19 @@ export default class PaymentButton {
* @return {boolean} True means that this payment method is selected as current gateway. * @return {boolean} True means that this payment method is selected as current gateway.
*/ */
get isCurrentGateway() { get isCurrentGateway() {
if ( ! this.isSeparateGateway ) {
return false;
}
/* /*
* We need to rely on `getCurrentPaymentMethod()` here, as the `CheckoutBootstrap.js` * We need to rely on `getCurrentPaymentMethod()` here, as the `CheckoutBootstrap.js`
* module fires the "ButtonEvents.RENDER" event before any PaymentButton instances are * module fires the "ButtonEvents.RENDER" event before any PaymentButton instances are
* created. I.e. we cannot observe the initial gateway selection event. * 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 +713,7 @@ export default class PaymentButton {
this.applyWrapperStyles(); this.applyWrapperStyles();
if ( this.isEligible && this.isPresent && this.isVisible ) { if ( this.isEligible && this.isCurrentGateway && this.isVisible ) {
if ( ! this.isButtonAttached ) { if ( ! this.isButtonAttached ) {
this.log( 'refresh.addButton' ); this.log( 'refresh.addButton' );
this.addButton(); this.addButton();
@ -712,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` * Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true`
*/ */
showPaymentGateway() { showPaymentGateway() {
if ( this.#gatewayInitialized ) {
return;
}
this.#gatewayInitialized = true;
if ( ! this.isSeparateGateway || ! this.isEligible ) { if ( ! this.isSeparateGateway || ! this.isEligible ) {
return; 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' ); this.log( 'Show gateway' );
styles.forEach( ( el ) => el.remove() );
// This code runs only once, during button initialization, and fixes the initial visibility. // This code runs only once, during button initialization, and fixes the initial visibility.
this.isVisible = this.isCurrentGateway; this.isVisible = this.isCurrentGateway;
} }