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.applePayConfig = config;
if ( this.isSeparateGateway ) {
document
.querySelectorAll( '#ppc-button-applepay-container' )
.forEach( ( el ) => el.remove() );
}
if ( ! this.isEligible ) {
this.hide();
} else {

View file

@ -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.
*
@ -461,16 +468,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 +713,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();
@ -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`
*/
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;
}