mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-04 08:47:23 +08:00
🐛 Fix initial visibility of payment button
This commit is contained in:
parent
4ca309768e
commit
934441fdeb
1 changed files with 33 additions and 4 deletions
|
@ -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;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue