🐛 Fix initial visibility of payment button

This commit is contained in:
Philipp Stracker 2024-08-08 14:41:09 +02:00
parent 4ca309768e
commit 934441fdeb
No known key found for this signature in database

View file

@ -1,6 +1,9 @@
import ConsoleLogger from '../../../../../ppcp-wc-gateway/resources/js/helper/ConsoleLogger';
import { apmButtonsInit } from '../Helper/ApmButtons';
import { PaymentContext } from '../Helper/CheckoutMethodState';
import {
getCurrentPaymentMethod,
PaymentContext,
} from '../Helper/CheckoutMethodState';
import {
ButtonEvents,
dispatchButtonEvent,
@ -361,7 +364,8 @@ export default class PaymentButton {
/**
* Access the button's context handler.
* When no context handler was provided (like for a preview button), an empty object is returned.
* When no context handler was provided (like for a preview button), an empty object is
* returned.
*
* @return {Object} The context handler instance, or an empty object.
*/
@ -442,6 +446,26 @@ export default class PaymentButton {
);
}
/**
* Whether the currently selected payment gateway is set to the payment method.
*
* Only relevant on checkout pages, when `this.isSeparateGateway` is true.
*
* @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();
}
/**
* Determines if the current button instance has valid and complete configuration details.
* Used during initialization to decide if the button can be initialized or should be skipped.
@ -610,9 +634,7 @@ export default class PaymentButton {
}
triggerRedraw() {
if ( this.isEligible && this.isSeparateGateway ) {
this.showPaymentGateway();
}
dispatchButtonEvent( {
event: ButtonEvents.REDRAW,
@ -672,6 +694,10 @@ export default class PaymentButton {
* Only relevant on the checkout page, i.e., when `this.isSeparateGateway` is `true`
*/
showPaymentGateway() {
if ( ! this.isSeparateGateway || ! this.isEligible ) {
return;
}
const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`;
const styles = document.querySelectorAll( styleSelectors );
@ -682,6 +708,9 @@ export default class PaymentButton {
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;
}
/**