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

✨ Sync gateway visibility via custom event

Browse source
This commit is contained in:
Philipp Stracker 2024-07-30 13:55:24 +02:00
parent 490cd1958b
commit 0888c696ff
No known key found for this signature in database
2 changed files with 65 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

21
modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js
View file

@ -68,6 +68,7 @@ class CheckoutBootstap {
jQuery( document.body ).on( jQuery( document.body ).on(
'updated_checkout payment_method_selected', 'updated_checkout payment_method_selected',
() => { () => {
this.invalidatePaymentMethods();
this.updateUi(); this.updateUi();
} }
); );
@ -174,6 +175,14 @@ class CheckoutBootstap {
); );
} }
invalidatePaymentMethods() {
/**
* Custom JS event to notify other modules that the payment button on the checkout page
* has become irrelevant or invalid.
*/
document.body.dispatchEvent( new Event( 'ppcp_invalidate_methods' ) );
}
updateUi() { updateUi() {
const currentPaymentMethod = getCurrentPaymentMethod(); const currentPaymentMethod = getCurrentPaymentMethod();
const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL; const isPaypal = currentPaymentMethod === PaymentMethods.PAYPAL;
@ -232,9 +241,17 @@ class CheckoutBootstap {
} }
} }
setVisible( '#ppc-button-ppcp-googlepay', isGooglePayMethod ); /**
* Custom JS event that is observed by the relevant payment gateway.
*
* Dynamic part of the event name is the payment method ID, for example
* "ppcp-credit-card-gateway" or "ppcp-googlepay"
*/
document.body.dispatchEvent(
new Event( `ppcp_render_method-${ currentPaymentMethod }` )
);
jQuery( document.body ).trigger( 'ppcp_checkout_rendered' ); document.body.dispatchEvent( new Event( 'ppcp_checkout_rendered' ) );
} }
shouldShowMessages() { shouldShowMessages() {

69
modules/ppcp-googlepay/resources/js/GooglepayButton.js
View file

@ -6,7 +6,10 @@ import { setEnabled } from '../../../ppcp-button/resources/js/modules/Helper/But
import widgetBuilder from '../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder'; import widgetBuilder from '../../../ppcp-button/resources/js/modules/Renderer/WidgetBuilder';
import UpdatePaymentData from './Helper/UpdatePaymentData'; import UpdatePaymentData from './Helper/UpdatePaymentData';
import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons'; import { apmButtonsInit } from '../../../ppcp-button/resources/js/modules/Helper/ApmButtons';
import { PaymentContext as CONTEXT } from '../../../ppcp-button/resources/js/modules/Helper/CheckoutMethodState'; import {
PaymentMethods,
PaymentContext as CONTEXT,
} from '../../../ppcp-button/resources/js/modules/Helper/CheckoutMethodState';
/** /**
* Plugin-specific styling. * Plugin-specific styling.
@ -69,6 +72,10 @@ class GooglepayButton {
this.ppcpConfig = ppcpConfig; this.ppcpConfig = ppcpConfig;
this.contextHandler = contextHandler; this.contextHandler = contextHandler;
this.hide = this.hide.bind( this );
this.show = this.show.bind( this );
this.refresh = this.refresh.bind( this );
this.log( 'Create instance' ); this.log( 'Create instance' );
} }
@ -388,34 +395,50 @@ class GooglepayButton {
} }
initEventHandlers() { initEventHandlers() {
const ppcpButtonWrapper = `#${ this.ppcpButtonWrapperId }`; if ( CONTEXT.Gateways.includes( this.context ) ) {
const wrapper = `#${ this.wrapperId }`; document.body.addEventListener(
'ppcp_invalidate_methods',
if ( wrapper === ppcpButtonWrapper ) { this.hide
throw new Error(
`[GooglePayButton] "wrapper" and "ppcpButtonWrapper" values must differ to avoid infinite loop. Current value: "${ wrapper }"`
); );
}
const syncButtonVisibility = () => { document.body.addEventListener(
const $ppcpButtonWrapper = jQuery( ppcpButtonWrapper ); `ppcp_render_method-${ PaymentMethods.GOOGLEPAY }`,
setVisible( wrapper, $ppcpButtonWrapper.is( ':visible' ) ); this.refresh
setEnabled(
wrapper,
! $ppcpButtonWrapper.hasClass( 'ppcp-disabled' )
); );
}; } else {
/**
* Review: The following logic appears to be unnecessary. Is it still required?
*/
jQuery( document ).on( const ppcpButtonWrapper = `#${ this.ppcpButtonWrapperId }`;
'ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled', const wrapper = `#${ this.wrapperId }`;
( ev, data ) => {
if ( jQuery( data.selector ).is( ppcpButtonWrapper ) ) { if ( wrapper === ppcpButtonWrapper ) {
syncButtonVisibility(); throw new Error(
} `[GooglePayButton] "wrapper" and "ppcpButtonWrapper" values must differ to avoid infinite loop. Current value: "${ wrapper }"`
);
} }
);
syncButtonVisibility(); const syncButtonVisibility = () => {
const $ppcpButtonWrapper = jQuery( ppcpButtonWrapper );
setVisible( wrapper, $ppcpButtonWrapper.is( ':visible' ) );
setEnabled(
wrapper,
! $ppcpButtonWrapper.hasClass( 'ppcp-disabled' )
);
};
jQuery( document ).on(
'ppcp-shown ppcp-hidden ppcp-enabled ppcp-disabled',
( ev, data ) => {
if ( jQuery( data.selector ).is( ppcpButtonWrapper ) ) {
syncButtonVisibility();
}
}
);
syncButtonVisibility();
}
} }
buildReadyToPayRequest( allowedPaymentMethods, baseRequest ) { buildReadyToPayRequest( allowedPaymentMethods, baseRequest ) {