♻️ Move button event dispatcher to helper file

This commit is contained in:
Philipp Stracker 2024-08-06 15:59:54 +02:00
parent 3c200e408a
commit b85a16abda
No known key found for this signature in database
2 changed files with 57 additions and 4 deletions

View file

@ -7,6 +7,10 @@ import {
PaymentMethods,
} from '../Helper/CheckoutMethodState';
import BootstrapHelper from '../Helper/BootstrapHelper';
import {
ButtonEvents,
dispatchButtonEvent,
} from '../Helper/PaymentButtonHelpers';
class CheckoutBootstap {
constructor( gateway, renderer, spinner, errorHandler ) {
@ -180,7 +184,7 @@ class CheckoutBootstap {
* 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' ) );
dispatchButtonEvent( { event: ButtonEvents.INVALIDATE } );
}
updateUi() {
@ -247,9 +251,10 @@ class CheckoutBootstap {
* 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 }` )
);
dispatchButtonEvent( {
event: ButtonEvents.RENDER,
paymentMethod: currentPaymentMethod,
} );
document.body.dispatchEvent( new Event( 'ppcp_checkout_rendered' ) );
}

View file

@ -0,0 +1,48 @@
/**
* Helper function used by PaymentButton instances.
*
* @file
*/
/**
* Collection of recognized event names for payment button events.
*
* @type {Object}
*/
export const ButtonEvents = Object.freeze( {
INVALIDATE: 'ppcp_invalidate_methods',
RENDER: 'ppcp_render_method',
REDRAW: 'ppcp_redraw_method',
} );
/**
* Verifies if the given event name is a valid Payment Button event.
*
* @param {string} event - The event name to verify.
* @return {boolean} True, if the event name is valid.
*/
export function isValidButtonEvent( event ) {
const buttonEventValues = Object.values( ButtonEvents );
return buttonEventValues.includes( event );
}
/**
* Dispatches a payment button event.
*
* @param {Object} options - The options for dispatching the event.
* @param {string} options.event - Event to dispatch.
* @param {string} [options.paymentMethod] - Optional. Name of payment method, to target a specific button only.
* @throws {Error} Throws an error if the event is invalid.
*/
export function dispatchButtonEvent( { event, paymentMethod = '' } ) {
if ( ! isValidButtonEvent( event ) ) {
throw new Error( `Invalid event: ${ event }` );
}
const fullEventName = paymentMethod
? `${ event }-${ paymentMethod }`
: event;
document.body.dispatchEvent( new Event( fullEventName ) );
}