♻️ Move button event dispatcher to helper file

modules/ppcp-button/resources/js/modules/ContextBootstrap/CheckoutBootstap.js

@@ -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(
+		dispatchButtonEvent( {
-			new Event( `ppcp_render_method-${ currentPaymentMethod }` )
+			event: ButtonEvents.RENDER,
-		);
+			paymentMethod: currentPaymentMethod,
+		} );
 
 		document.body.dispatchEvent( new Event( 'ppcp_checkout_rendered' ) );
 	}

modules/ppcp-button/resources/js/modules/Helper/PaymentButtonHelpers.js

@@ -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 ) );
+}