woocommerce/woocommerce-paypal-payments
2
0
Fork 0
mirror of https://github.com/woocommerce/woocommerce-paypal-payments.git synced 2025-09-06 13:44:42 +08:00
Code Issues Projects Packages Wiki Activity Actions

🐛 Fix initial visibility of payment button

Browse source
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
1 changed files with 33 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

37
modules/ppcp-button/resources/js/modules/Renderer/PaymentButton.js
View file

@ -1,6 +1,9 @@
import ConsoleLogger from '../../../../../ppcp-wc-gateway/resources/js/helper/ConsoleLogger'; import ConsoleLogger from '../../../../../ppcp-wc-gateway/resources/js/helper/ConsoleLogger';
import { apmButtonsInit } from '../Helper/ApmButtons'; import { apmButtonsInit } from '../Helper/ApmButtons';
import { PaymentContext } from '../Helper/CheckoutMethodState'; import {
getCurrentPaymentMethod,
PaymentContext,
} from '../Helper/CheckoutMethodState';
import { import {
ButtonEvents, ButtonEvents,
dispatchButtonEvent, dispatchButtonEvent,
@ -361,7 +364,8 @@ export default class PaymentButton {
/** /**
* Access the button's context handler. * 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. * @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. * 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. * Used during initialization to decide if the button can be initialized or should be skipped.
@ -610,9 +634,7 @@ export default class PaymentButton {
} }
triggerRedraw() { triggerRedraw() {
if ( this.isEligible && this.isSeparateGateway ) {
this.showPaymentGateway(); this.showPaymentGateway();
}
dispatchButtonEvent( { dispatchButtonEvent( {
event: ButtonEvents.REDRAW, event: ButtonEvents.REDRAW,
@ -672,6 +694,10 @@ export default class PaymentButton {
* 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.isSeparateGateway || ! this.isEligible ) {
return;
}
const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`; const styleSelectors = `style[data-hide-gateway="${ this.methodId }"]`;
const styles = document.querySelectorAll( styleSelectors ); const styles = document.querySelectorAll( styleSelectors );
@ -682,6 +708,9 @@ export default class PaymentButton {
this.log( 'Show gateway' ); this.log( 'Show gateway' );
styles.forEach( ( el ) => el.remove() ); styles.forEach( ( el ) => el.remove() );
// This code runs only once, during button initialization, and fixes the initial visibility.
this.isVisible = this.isCurrentGateway;
} }
/** /**