Add Submit button

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

@@ -0,0 +1,102 @@
+import { createElement, createRoot } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { STORE_NAME } from '../stores/axoStore';
+
+const EmailSubmitButton = ( { onEmailSubmit } ) => {
+	const { isGuest, isAxoActive } = useSelect( ( select ) => ( {
+		isGuest: select( STORE_NAME ).getIsGuest(),
+		isAxoActive: select( STORE_NAME ).getIsAxoActive(),
+	} ) );
+
+	const handleSubmit = () => {
+		const emailInput = document.getElementById( 'email' );
+		if ( emailInput && emailInput.value ) {
+			onEmailSubmit( emailInput.value );
+		}
+	};
+
+	if ( ! isGuest || ! isAxoActive ) {
+		return null;
+	}
+
+	return (
+		<button
+			type="button"
+			onClick={ handleSubmit }
+			className="wc-block-components-button wp-element-button"
+		>
+			Submit
+		</button>
+	);
+};
+
+// Setup and removal functions
+let submitButtonReference = {
+	container: null,
+	root: null,
+};
+
+export const setupEmailSubmitButton = ( onEmailSubmit ) => {
+	const emailInput = document.getElementById( 'email' );
+
+	if ( emailInput ) {
+		if ( ! submitButtonReference.container ) {
+			submitButtonReference.container = document.createElement( 'div' );
+			submitButtonReference.container.setAttribute(
+				'class',
+				'wc-block-axo-email-submit-button-container'
+			);
+
+			emailInput.parentNode.insertBefore(
+				submitButtonReference.container,
+				emailInput.nextSibling
+			);
+
+			submitButtonReference.root = createRoot(
+				submitButtonReference.container
+			);
+		}
+
+		if ( submitButtonReference.root ) {
+			const renderButton = () => {
+				submitButtonReference.root.render(
+					createElement( EmailSubmitButton, { onEmailSubmit } )
+				);
+			};
+
+			renderButton(); // Initial render
+
+			// Subscribe to state changes
+			const unsubscribe = wp.data.subscribe( () => {
+				renderButton();
+			} );
+
+			// Store the unsubscribe function for cleanup
+			submitButtonReference.unsubscribe = unsubscribe;
+		} else {
+			console.warn( 'Submit button root not found' );
+		}
+	} else {
+		console.warn( 'Email input not found' );
+	}
+};
+
+export const removeEmailSubmitButton = () => {
+	if ( submitButtonReference.root ) {
+		submitButtonReference.root.unmount();
+	}
+	if ( submitButtonReference.unsubscribe ) {
+		submitButtonReference.unsubscribe();
+	}
+	if (
+		submitButtonReference.container &&
+		submitButtonReference.container.parentNode
+	) {
+		submitButtonReference.container.parentNode.removeChild(
+			submitButtonReference.container
+		);
+	}
+	submitButtonReference = { container: null, root: null, unsubscribe: null };
+};
+
+export default EmailSubmitButton;