Move EmailSubmitButton to a separate file

modules/ppcp-axo-block/resources/js/components/EmailSubmitButton.js

@@ -0,0 +1,48 @@
+import { STORE_NAME } from '../stores/axoStore';
+import { useSelect } from '@wordpress/data';
+
+export const EmailSubmitButton = ( { handleSubmit } ) => {
+	const { isGuest, isAxoActive, isEmailSubmitted } = useSelect(
+		( select ) => ( {
+			isGuest: select( STORE_NAME ).getIsGuest(),
+			isAxoActive: select( STORE_NAME ).getIsAxoActive(),
+			isEmailSubmitted: select( STORE_NAME ).isEmailSubmitted(),
+		} )
+	);
+
+	if ( ! isGuest || ! isAxoActive ) {
+		return null;
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={ handleSubmit }
+			className={ `wc-block-components-button wp-element-button ${
+				isEmailSubmitted ? 'is-loading' : ''
+			}` }
+			disabled={ isEmailSubmitted }
+		>
+			<span
+				className="wc-block-components-button__text"
+				style={ {
+					visibility: isEmailSubmitted ? 'hidden' : 'visible',
+				} }
+			>
+				Submit
+			</span>
+			{ isEmailSubmitted && (
+				<span
+					className="wc-block-components-spinner"
+					aria-hidden="true"
+					style={ {
+						position: 'absolute',
+						top: '50%',
+						left: '50%',
+						transform: 'translate(-50%, -50%)',
+					} }
+				/>
+			) }
+		</button>
+	);
+};

modules/ppcp-axo-block/resources/js/helpers/emailSubmissionManager.js

@@ -1,8 +1,6 @@
-// EmailSubmissionManager.js
-
 import { createElement, createRoot } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
 import { STORE_NAME } from '../stores/axoStore';
+import { EmailSubmitButton } from '../components/EmailSubmitButton';
 
 let emailInput = null;
 let submitButtonReference = {
@@ -10,7 +8,6 @@ let submitButtonReference = {
 	root: null,
 	unsubscribe: null,
 };
-let isLoading = false;
 let keydownHandler = null;
 
 const getEmailInput = () => {
@@ -20,47 +17,6 @@ const getEmailInput = () => {
 	return emailInput;
 };
 
-const EmailSubmitButton = ( { handleSubmit } ) => {
-	const { isGuest, isAxoActive } = useSelect( ( select ) => ( {
-		isGuest: select( STORE_NAME ).getIsGuest(),
-		isAxoActive: select( STORE_NAME ).getIsAxoActive(),
-	} ) );
-
-	if ( ! isGuest || ! isAxoActive ) {
-		return null;
-	}
-
-	return (
-		<button
-			type="button"
-			onClick={ handleSubmit }
-			className={ `wc-block-components-button wp-element-button ${
-				isLoading ? 'is-loading' : ''
-			}` }
-			disabled={ isLoading }
-		>
-			<span
-				className="wc-block-components-button__text"
-				style={ { visibility: isLoading ? 'hidden' : 'visible' } }
-			>
-				Submit
-			</span>
-			{ isLoading && (
-				<span
-					className="wc-block-components-spinner"
-					aria-hidden="true"
-					style={ {
-						position: 'absolute',
-						top: '50%',
-						left: '50%',
-						transform: 'translate(-50%, -50%)',
-					} }
-				/>
-			) }
-		</button>
-	);
-};
-
 export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	const input = getEmailInput();
 	if ( ! input ) {
@@ -71,12 +27,16 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	}
 
 	const handleEmailSubmit = async () => {
-		if ( isLoading || ! input.value ) {
+		const isEmailSubmitted = wp.data
+			.select( STORE_NAME )
+			.isEmailSubmitted();
+
+		if ( isEmailSubmitted || ! input.value ) {
 			return;
 		}
 
-		isLoading = true;
+		wp.data.dispatch( STORE_NAME ).setIsEmailSubmitted( true );
-		renderButton(); // Re-render button to show loading state
+		renderButton();
 
 		try {
 			await onEmailSubmit( input.value );
@@ -84,7 +44,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 			console.error( 'Error during email submission:', error );
 			// Here you might want to show an error message to the user
 		} finally {
-			isLoading = false;
+			wp.data.dispatch( STORE_NAME ).setIsEmailSubmitted( false );
 			renderButton(); // Re-render button to remove loading state
 		}
 	};

modules/ppcp-axo-block/resources/js/stores/axoStore.js

@@ -9,6 +9,7 @@ const DEFAULT_STATE = {
 	isGuest: true,
 	isAxoActive: false,
 	isAxoScriptLoaded: false,
+	isEmailSubmitted: false,
 };
 
 // Actions
@@ -25,6 +26,10 @@ const actions = {
 		type: 'SET_IS_AXO_SCRIPT_LOADED',
 		payload: isAxoScriptLoaded,
 	} ),
+	setIsEmailSubmitted: ( isEmailSubmitted ) => ( {
+		type: 'SET_IS_EMAIL_SUBMITTED',
+		payload: isEmailSubmitted,
+	} ),
 };
 
 // Reducer
@@ -36,6 +41,8 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 			return { ...state, isAxoActive: action.payload };
 		case 'SET_IS_AXO_SCRIPT_LOADED':
 			return { ...state, isAxoScriptLoaded: action.payload };
+		case 'SET_IS_EMAIL_SUBMITTED':
+			return { ...state, isEmailSubmitted: action.payload };
 		default:
 			return state;
 	}
@@ -46,6 +53,7 @@ const selectors = {
 	getIsGuest: ( state ) => state.isGuest,
 	getIsAxoActive: ( state ) => state.isAxoActive,
 	isAxoScriptLoaded: ( state ) => state.isAxoScriptLoaded,
+	isEmailSubmitted: ( state ) => state.isEmailSubmitted,
 };
 
 // Create and register the store