Refactor the Change buttons and the Watermark

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from '@wordpress/element';
 import { useCustomerData } from './useCustomerData';
-import { ShippingChangeButton } from './ShippingChangeButton';
+import { ShippingChangeButton } from './shippingChangeButtonManager';
 import { loadPaypalScript } from '../utils/ScriptLoading';
 import Payment from './Payment';
 import useAxoBlockManager from './useAxoBlockManager';

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

@@ -1,41 +0,0 @@
-import { useEffect } from '@wordpress/element';
-
-// Inject the change button next to the Shipping title
-const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
-	const shippingTitle = document.querySelector(
-		'#shipping-fields h2.wc-block-components-title'
-	);
-
-	if (
-		shippingTitle &&
-		! shippingTitle.nextElementSibling?.classList?.contains(
-			'wc-block-checkout-axo-block-card__edit'
-		)
-	) {
-		const buttonElement = document.createElement( 'button' );
-		buttonElement.classList.add( 'wc-block-checkout-axo-block-card__edit' );
-		buttonElement.setAttribute( 'aria-label', 'Change shipping details' );
-		buttonElement.textContent = 'Change';
-		buttonElement.onclick = ( event ) => {
-			event.preventDefault();
-			onChangeShippingAddressClick();
-		};
-
-		// Ensure the button is inserted correctly after the shipping title
-		shippingTitle.parentNode.insertBefore(
-			buttonElement,
-			shippingTitle.nextSibling
-		);
-	}
-};
-
-// ShippingChangeButton component for injecting the button
-const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => {
-	useEffect( () => {
-		injectShippingChangeButton( onChangeShippingAddressClick );
-	}, [ onChangeShippingAddressClick ] );
-
-	return null;
-};
-
-export default ShippingChangeButton;

modules/ppcp-axo-block/resources/js/events/fastlaneEmailManager.js

@@ -1,6 +1,6 @@
-import { injectShippingChangeButton } from '../helpers/buttonHelpers';
 import { populateWooFields } from '../helpers/fieldHelpers';
-import { injectCardChangeButton } from '../helpers/gatewayRadioHelpers';
+import { injectShippingChangeButton } from '../helpers/shippingChangeButtonManager';
+import { injectCardChangeButton } from '../helpers/cardChangeButtonManager';
 
 export const onEmailSubmit = async (
 	email,
@@ -44,7 +44,6 @@ export const onEmailSubmit = async (
 
 			setIsGuest( false );
 			setShippingAddress( profileData.shippingAddress );
-			injectShippingChangeButton( onChangeShippingAddressClick );
 			setCard( profileData.card );
 			setShouldIncludeAdditionalInfo( false );
 
@@ -56,6 +55,7 @@ export const onEmailSubmit = async (
 				setWooBillingAddress
 			);
 
+			injectShippingChangeButton( onChangeShippingAddressClick );
 			injectCardChangeButton( onChangeButtonClick );
 		} else {
 			console.warn( 'Authentication failed or did not succeed' );

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

@@ -55,4 +55,13 @@ export const injectCardChangeButton = ( onChangeButtonClick ) => {
 	);
 };
 
+export const removeCardChangeButton = () => {
+	const button = document.querySelector(
+		'.wc-block-checkout-axo-block-card__edit'
+	);
+	if ( button && button.parentNode ) {
+		button.parentNode.remove();
+	}
+};
+
 export default CardChangeButtonManager;

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

@@ -0,0 +1,77 @@
+import { createElement, useEffect, createRoot } from '@wordpress/element';
+
+const ShippingChangeButton = ( { onChangeShippingAddressClick } ) =>
+	createElement(
+		'button',
+		{
+			className: 'wc-block-checkout-axo-block-card__edit',
+			'aria-label': 'Change shipping details',
+			type: 'button',
+			onClick: ( event ) => {
+				event.preventDefault();
+				onChangeShippingAddressClick();
+			},
+		},
+		'Change'
+	);
+
+const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => {
+	useEffect( () => {
+		const shippingTitle = document.querySelector(
+			'#shipping-fields h2.wc-block-components-title'
+		);
+
+		if ( shippingTitle ) {
+			if (
+				! shippingTitle.nextElementSibling?.classList?.contains(
+					'wc-block-checkout-axo-block-card__edit'
+				)
+			) {
+				const buttonContainer = document.createElement( 'span' );
+				shippingTitle.parentNode.insertBefore(
+					buttonContainer,
+					shippingTitle.nextSibling
+				);
+
+				const root = createRoot( buttonContainer );
+				root.render(
+					createElement( ShippingChangeButton, {
+						onChangeShippingAddressClick,
+					} )
+				);
+			}
+		}
+
+		return () => {
+			const button = document.querySelector(
+				'#shipping-fields .wc-block-checkout-axo-block-card__edit'
+			);
+			if ( button && button.parentNode ) {
+				button.parentNode.remove();
+			}
+		};
+	}, [ onChangeShippingAddressClick ] );
+
+	return null;
+};
+
+export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
+	const container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	createRoot( container ).render(
+		createElement( ShippingChangeButtonManager, {
+			onChangeShippingAddressClick,
+		} )
+	);
+};
+
+export const removeShippingChangeButton = () => {
+	const button = document.querySelector(
+		'#shipping-fields .wc-block-checkout-axo-block-card__edit'
+	);
+	if ( button && button.parentNode ) {
+		button.parentNode.remove();
+	}
+};
+
+export default ShippingChangeButtonManager;

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

@@ -1,7 +1,12 @@
-import ReactDOM from 'react-dom/client';
+import { createElement, useEffect, createRoot } from '@wordpress/element';
 import { FastlaneWatermark } from '../components/FastlaneWatermark';
 
-export const setupWatermark = ( fastlaneSdk, shouldIncludeAdditionalInfo ) => {
+const WatermarkManager = ( {
+	fastlaneSdk,
+	shouldIncludeAdditionalInfo,
+	onEmailSubmit,
+} ) => {
+	useEffect( () => {
 		const emailInput = document.getElementById( 'email' );
 		let watermarkRoot = null;
 		let watermarkContainer = null;
@@ -24,39 +29,68 @@ export const setupWatermark = ( fastlaneSdk, shouldIncludeAdditionalInfo ) => {
 				emailInput.parentNode.appendChild( watermarkContainer );
 			}
 
-		const watermarkElement = document.createElement( 'div' );
-		watermarkContainer.appendChild( watermarkElement );
-
-		watermarkRoot = ReactDOM.createRoot( watermarkElement );
+			watermarkRoot = createRoot( watermarkContainer );
 			watermarkRoot.render(
-			<FastlaneWatermark
-				fastlaneSdk={ fastlaneSdk }
-				name="fastlane-watermark-email"
-				includeAdditionalInfo={ shouldIncludeAdditionalInfo }
-			/>
+				createElement( FastlaneWatermark, {
+					fastlaneSdk,
+					name: 'fastlane-watermark-email',
+					includeAdditionalInfo: shouldIncludeAdditionalInfo,
+				} )
 			);
-	}
 
-	return { watermarkRoot, watermarkContainer, emailInput };
-};
-
-export const cleanupWatermark = ( {
-	watermarkRoot,
-	watermarkContainer,
-	emailInput,
-	onEmailSubmit,
-} ) => {
-	if ( watermarkRoot && watermarkContainer ) {
-		watermarkRoot.unmount();
-		watermarkContainer.parentNode.removeChild( watermarkContainer );
-		console.log( 'Fastlane watermark removed' );
-	}
-	if ( emailInput ) {
-		emailInput.removeEventListener( 'keyup', async ( event ) => {
+			const handleEmailInput = async ( event ) => {
 				const email = event.target.value;
 				if ( email ) {
 					await onEmailSubmit( email );
 				}
-		} );
+			};
+
+			emailInput.addEventListener( 'keyup', handleEmailInput );
+
+			// Cleanup function
+			return () => {
+				if ( watermarkRoot ) {
+					watermarkRoot.unmount();
+				}
+				if ( watermarkContainer && watermarkContainer.parentNode ) {
+					watermarkContainer.parentNode.removeChild(
+						watermarkContainer
+					);
+				}
+				if ( emailInput ) {
+					emailInput.removeEventListener( 'keyup', handleEmailInput );
+				}
+				console.log( 'Fastlane watermark removed' );
+			};
+		}
+	}, [ fastlaneSdk, shouldIncludeAdditionalInfo, onEmailSubmit ] );
+
+	return null;
+};
+
+export const setupWatermark = (
+	fastlaneSdk,
+	shouldIncludeAdditionalInfo,
+	onEmailSubmit
+) => {
+	const container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	createRoot( container ).render(
+		createElement( WatermarkManager, {
+			fastlaneSdk,
+			shouldIncludeAdditionalInfo,
+			onEmailSubmit,
+		} )
+	);
+};
+
+export const removeWatermark = () => {
+	const watermarkContainer = document.querySelector(
+		'.ppcp-axo-block-watermark-container'
+	);
+	if ( watermarkContainer && watermarkContainer.parentNode ) {
+		watermarkContainer.parentNode.removeChild( watermarkContainer );
 	}
 };
+
+export default WatermarkManager;

modules/ppcp-axo-block/resources/js/index.js

@@ -11,9 +11,10 @@ import { useCustomerData } from './hooks/useCustomerData';
 import { Payment } from './components/Payment';
 
 // Helpers
-import { removeShippingChangeButton } from './helpers/buttonHelpers';
 import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers';
-import { setupWatermark, cleanupWatermark } from './helpers/watermarkHelpers';
+import { setupWatermark, removeWatermark } from './helpers/watermarkHelpers';
+import { removeCardChangeButton } from './helpers/cardChangeButtonManager';
+import { removeShippingChangeButton } from './helpers/shippingChangeButtonManager';
 
 // Event handlers
 import { onEmailSubmit } from './events/fastlaneEmailManager';
@@ -43,11 +44,12 @@ const Axo = () => {
 		setBillingAddress: updateWooBillingAddress,
 	} = useCustomerData();
 
-	// Inject and cleanup logic for Change button
+	// Cleanup logic for Change buttons
 	useEffect( () => {
 		return () => {
-			// Remove the shipping Change button on unmount
 			removeShippingChangeButton();
+			removeCardChangeButton();
+			removeWatermark();
 
 			// Restore WooCommerce fields
 			restoreOriginalFields(
@@ -73,24 +75,12 @@ const Axo = () => {
 	}, [ paypalLoaded, ppcpConfig ] );
 
 	useEffect( () => {
-		let watermarkHandlers = {};
-		const radioLabelElement = document.getElementById(
-			'ppcp-axo-block-radio-label'
-		);
-
 		if ( paypalLoaded && fastlaneSdk ) {
 			console.log( 'Fastlane SDK and PayPal loaded' );
-
-			watermarkHandlers = setupWatermark(
+			setupWatermark(
 				fastlaneSdk,
-				shouldIncludeAdditionalInfo
-			);
-			const { emailInput } = watermarkHandlers;
-
-			if ( emailInput ) {
-				emailInput.addEventListener( 'keyup', async ( event ) => {
-					const email = event.target.value;
-					if ( email ) {
+				shouldIncludeAdditionalInfo,
+				async ( email ) => {
 					await onEmailSubmit(
 						email,
 						fastlaneSdk,
@@ -109,20 +99,11 @@ const Axo = () => {
 						setShouldIncludeAdditionalInfo
 					);
 				}
-				} );
-			}
+			);
 		}
 
 		return () => {
-			cleanupWatermark( watermarkHandlers );
-			if ( radioLabelElement ) {
-				const changeButton = radioLabelElement.querySelector(
-					'.wc-block-checkout-axo-block-card__edit'
-				);
-				if ( changeButton ) {
-					changeButton.remove();
-				}
-			}
+			removeWatermark();
 		};
 	}, [ paypalLoaded, fastlaneSdk, shouldIncludeAdditionalInfo ] );