Refactor the email button, shipping change button, and watermark code to a more modular structure

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

@@ -1,13 +1,9 @@
 import { useEffect, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { CreditCard } from './CreditCard';
+import { Card } from './card/Card';
 import { STORE_NAME } from '../stores/axoStore';
 
-export const Payment = ( {
-	fastlaneSdk,
-	card,
-	onPaymentLoad,
-} ) => {
+export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
 	const isGuest = useSelect( ( select ) =>
 		select( STORE_NAME ).getIsGuest()
 	);
@@ -30,7 +26,7 @@ export const Payment = ( {
 	return isGuest ? (
 		<div id="fastlane-card" key="fastlane-card" />
 	) : (
-		<CreditCard
+		<Card
 			card={ card }
 			fastlaneSdk={ fastlaneSdk }
 			showWatermark={ ! isGuest }

modules/ppcp-axo-block/resources/js/components/card/Card.js

@@ -1,5 +1,5 @@
 import { useMemo } from '@wordpress/element';
-import { FastlaneWatermark } from './FastlaneWatermark';
+import { Watermark } from '../watermark';
 
 const cardIcons = {
 	VISA: 'visa-light.svg',
@@ -11,7 +11,7 @@ const cardIcons = {
 	UNIONPAY: 'unionpay-light.svg',
 };
 
-export const CreditCard = ( { card, fastlaneSdk, showWatermark = true } ) => {
+export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => {
 	const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {};
 
 	const cardLogo = useMemo( () => {
@@ -48,7 +48,7 @@ export const CreditCard = ( { card, fastlaneSdk, showWatermark = true } ) => {
 				</div>
 				<div className="wc-block-checkout-axo-block-card__watermark">
 					{ showWatermark && (
-						<FastlaneWatermark
+						<Watermark
 							fastlaneSdk={ fastlaneSdk }
 							name="wc-block-checkout-axo-card-watermark"
 							includeAdditionalInfo={ false }

modules/ppcp-axo-block/resources/js/components/email-button/EmailButton.js

@@ -1,7 +1,7 @@
-import { STORE_NAME } from '../stores/axoStore';
+import { STORE_NAME } from '../../stores/axoStore';
 import { useSelect } from '@wordpress/data';
 
-export const EmailSubmitButton = ( { handleSubmit } ) => {
+export const EmailButton = ( { handleSubmit } ) => {
 	const { isGuest, isAxoActive, isEmailSubmitted } = useSelect(
 		( select ) => ( {
 			isGuest: select( STORE_NAME ).getIsGuest(),
@@ -29,7 +29,7 @@ export const EmailSubmitButton = ( { handleSubmit } ) => {
 					visibility: isEmailSubmitted ? 'hidden' : 'visible',
 				} }
 			>
-				Submit
+				Continue
 			</span>
 			{ isEmailSubmitted && (
 				<span

modules/ppcp-axo-block/resources/js/components/email-button/index.js

@@ -0,0 +1,15 @@
+import { EmailButton } from './EmailButton';
+import {
+	setupEmailFunctionality,
+	removeEmailFunctionality,
+	isEmailFunctionalitySetup,
+} from './utils';
+
+export {
+	EmailButton,
+	setupEmailFunctionality,
+	removeEmailFunctionality,
+	isEmailFunctionalitySetup,
+};
+
+export default EmailButton;

modules/ppcp-axo-block/resources/js/components/email-button/utils.js

@@ -1,6 +1,6 @@
 import { createElement, createRoot } from '@wordpress/element';
-import { STORE_NAME } from '../stores/axoStore';
-import { EmailSubmitButton } from '../components/EmailSubmitButton';
+import { STORE_NAME } from '../../stores/axoStore';
+import { EmailButton } from './EmailButton';
 
 let emailInput = null;
 let submitButtonReference = {
@@ -17,7 +17,7 @@ const getEmailInput = () => {
 	return emailInput;
 };
 
-export const setupEmailFunctionality = ( onEmailSubmit ) => {
+const setupEmailFunctionality = ( onEmailSubmit ) => {
 	const input = getEmailInput();
 	if ( ! input ) {
 		console.warn(
@@ -42,10 +42,9 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 			await onEmailSubmit( input.value );
 		} catch ( error ) {
 			console.error( 'Error during email submission:', error );
-			// Here you might want to show an error message to the user
 		} finally {
 			wp.data.dispatch( STORE_NAME ).setIsEmailSubmitted( false );
-			renderButton(); // Re-render button to remove loading state
+			renderButton();
 		}
 	};
 
@@ -80,7 +79,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	const renderButton = () => {
 		if ( submitButtonReference.root ) {
 			submitButtonReference.root.render(
-				createElement( EmailSubmitButton, {
+				createElement( EmailButton, {
 					handleSubmit: handleEmailSubmit,
 				} )
 			);
@@ -89,7 +88,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 		}
 	};
 
-	renderButton(); // Initial render
+	renderButton();
 
 	// Subscribe to state changes
 	submitButtonReference.unsubscribe = wp.data.subscribe( () => {
@@ -97,7 +96,7 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	} );
 };
 
-export const removeEmailFunctionality = () => {
+const removeEmailFunctionality = () => {
 	const input = getEmailInput();
 	if ( input && keydownHandler ) {
 		input.removeEventListener( 'keydown', keydownHandler );
@@ -121,8 +120,12 @@ export const removeEmailFunctionality = () => {
 	keydownHandler = null;
 };
 
-export const isEmailFunctionalitySetup = () => {
+const isEmailFunctionalitySetup = () => {
 	return !! submitButtonReference.root;
 };
 
-export default EmailSubmitButton;
+export {
+	setupEmailFunctionality,
+	removeEmailFunctionality,
+	isEmailFunctionalitySetup,
+};

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

@@ -0,0 +1,14 @@
+const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
+	<a
+		className="wc-block-axo-change-link"
+		role="button"
+		onClick={ ( event ) => {
+			event.preventDefault();
+			onChangeShippingAddressClick();
+		} }
+	>
+		Choose a different shipping address
+	</a>
+);
+
+export default ShippingChangeButton;

modules/ppcp-axo-block/resources/js/components/shipping/ShippingChangeButtonManager.js

@@ -0,0 +1,39 @@
+import { useEffect, createRoot } from '@wordpress/element';
+import ShippingChangeButton from './ShippingChangeButton';
+
+const ShippingChangeButtonManager = ( { onChangeShippingAddressClick } ) => {
+	useEffect( () => {
+		const shippingHeading = document.querySelector(
+			'#shipping-fields .wc-block-components-checkout-step__heading'
+		);
+
+		if (
+			shippingHeading &&
+			! shippingHeading.querySelector(
+				'.wc-block-checkout-axo-block-card__edit'
+			)
+		) {
+			const spanElement = document.createElement( 'span' );
+			spanElement.className = 'wc-block-checkout-axo-block-card__edit';
+			shippingHeading.appendChild( spanElement );
+
+			const root = createRoot( spanElement );
+			root.render(
+				<ShippingChangeButton
+					onChangeShippingAddressClick={
+						onChangeShippingAddressClick
+					}
+				/>
+			);
+
+			return () => {
+				root.unmount();
+				spanElement.remove();
+			};
+		}
+	}, [ onChangeShippingAddressClick ] );
+
+	return null;
+};
+
+export default ShippingChangeButtonManager;

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

@@ -0,0 +1,9 @@
+export { default as ShippingChangeButton } from './ShippingChangeButton';
+export { default as ShippingChangeButtonManager } from './ShippingChangeButtonManager';
+export {
+	snapshotFields,
+	restoreOriginalFields,
+	populateWooFields,
+	injectShippingChangeButton,
+	removeShippingChangeButton,
+} from './utils';

modules/ppcp-axo-block/resources/js/components/shipping/utils.js

@@ -0,0 +1,149 @@
+import { createRoot } from '@wordpress/element';
+import ShippingChangeButtonManager from './ShippingChangeButtonManager';
+
+export const snapshotFields = ( shippingAddress, billingAddress ) => {
+	console.log( 'Attempting to snapshot fields' );
+	if ( ! shippingAddress || ! billingAddress ) {
+		console.warn( 'Shipping or billing address is missing:', {
+			shippingAddress,
+			billingAddress,
+		} );
+	}
+
+	const originalData = { shippingAddress, billingAddress };
+	console.log( 'Snapshot data:', originalData );
+	try {
+		localStorage.setItem(
+			'axoOriginalCheckoutFields',
+			JSON.stringify( originalData )
+		);
+		console.log( 'Original fields saved to localStorage', originalData );
+	} catch ( error ) {
+		console.error( 'Error saving to localStorage:', error );
+	}
+};
+
+export const restoreOriginalFields = (
+	updateShippingAddress,
+	updateBillingAddress
+) => {
+	console.log( 'Attempting to restore original fields' );
+	let savedData;
+	try {
+		savedData = localStorage.getItem( 'axoOriginalCheckoutFields' );
+		console.log( 'Data retrieved from localStorage:', savedData );
+	} catch ( error ) {
+		console.error( 'Error retrieving from localStorage:', error );
+	}
+
+	if ( savedData ) {
+		try {
+			const parsedData = JSON.parse( savedData );
+			console.log( 'Parsed data:', parsedData );
+			if ( parsedData.shippingAddress ) {
+				console.log(
+					'Restoring shipping address:',
+					parsedData.shippingAddress
+				);
+				updateShippingAddress( parsedData.shippingAddress );
+			} else {
+				console.warn( 'No shipping address found in saved data' );
+			}
+			if ( parsedData.billingAddress ) {
+				console.log(
+					'Restoring billing address:',
+					parsedData.billingAddress
+				);
+				updateBillingAddress( parsedData.billingAddress );
+			} else {
+				console.warn( 'No billing address found in saved data' );
+			}
+			console.log(
+				'Original fields restored from localStorage',
+				parsedData
+			);
+		} catch ( error ) {
+			console.error( 'Error parsing saved data:', error );
+		}
+	} else {
+		console.warn(
+			'No data found in localStorage under axoOriginalCheckoutFields'
+		);
+	}
+};
+
+export const populateWooFields = (
+	profileData,
+	setWooShippingAddress,
+	setWooBillingAddress
+) => {
+	console.log(
+		'Populating WooCommerce fields with profile data:',
+		profileData
+	);
+
+	// Save shipping address
+	const { address, name, phoneNumber } = profileData.shippingAddress;
+
+	const shippingAddress = {
+		first_name: name.firstName,
+		last_name: name.lastName,
+		address_1: address.addressLine1,
+		address_2: address.addressLine2 || '',
+		city: address.adminArea2,
+		state: address.adminArea1,
+		postcode: address.postalCode,
+		country: address.countryCode,
+		phone: phoneNumber.nationalNumber,
+	};
+
+	console.log( 'Setting WooCommerce shipping address:', shippingAddress );
+	setWooShippingAddress( shippingAddress );
+
+	// Save billing address
+	const billingData = profileData.card.paymentSource.card.billingAddress;
+
+	const billingAddress = {
+		first_name: profileData.name.firstName,
+		last_name: profileData.name.lastName,
+		address_1: billingData.addressLine1,
+		address_2: billingData.addressLine2 || '',
+		city: billingData.adminArea2,
+		state: billingData.adminArea1,
+		postcode: billingData.postalCode,
+		country: billingData.countryCode,
+	};
+
+	console.log( 'Setting WooCommerce billing address:', billingAddress );
+	setWooBillingAddress( billingAddress );
+};
+
+export const injectShippingChangeButton = ( onChangeShippingAddressClick ) => {
+	const existingButton = document.querySelector(
+		'#shipping-fields .wc-block-checkout-axo-block-card__edit'
+	);
+
+	if ( ! existingButton ) {
+		const container = document.createElement( 'div' );
+		document.body.appendChild( container );
+		createRoot( container ).render(
+			<ShippingChangeButtonManager
+				onChangeShippingAddressClick={ onChangeShippingAddressClick }
+			/>
+		);
+	} else {
+		console.log(
+			'Shipping change button already exists. Skipping injection.'
+		);
+	}
+};
+
+export const removeShippingChangeButton = () => {
+	const span = document.querySelector(
+		'#shipping-fields .wc-block-checkout-axo-block-card__edit'
+	);
+	if ( span ) {
+		createRoot( span ).unmount();
+		span.remove();
+	}
+};

modules/ppcp-axo-block/resources/js/components/watermark/Watermark.js

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from '@wordpress/element';
 
-export const FastlaneWatermark = ( {
+const Watermark = ( {
 	fastlaneSdk,
 	name = 'fastlane-watermark-container',
 	includeAdditionalInfo = true,
@@ -42,3 +42,5 @@ export const FastlaneWatermark = ( {
 
 	return <div id={ name } ref={ containerRef } />;
 };
+
+export default Watermark;

modules/ppcp-axo-block/resources/js/components/watermark/WatermarkManager.js

@@ -0,0 +1,54 @@
+import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { STORE_NAME } from '../../stores/axoStore';
+import {
+	createWatermarkContainer,
+	removeWatermark,
+	updateWatermarkContent,
+} from './utils';
+
+console.log( 'WatermarkManager module loaded' );
+
+const WatermarkManager = ( { fastlaneSdk } ) => {
+	console.log( 'WatermarkManager rendering', { fastlaneSdk } );
+
+	const isGuest = useSelect( ( select ) =>
+		select( STORE_NAME ).getIsGuest()
+	);
+	const isAxoActive = useSelect( ( select ) =>
+		select( STORE_NAME ).getIsAxoActive()
+	);
+	const isAxoScriptLoaded = useSelect( ( select ) =>
+		select( STORE_NAME ).isAxoScriptLoaded()
+	);
+
+	console.log( 'WatermarkManager state', {
+		isGuest,
+		isAxoActive,
+		isAxoScriptLoaded,
+	} );
+
+	useEffect( () => {
+		console.log( 'WatermarkManager useEffect triggered' );
+
+		if ( isAxoActive || ( ! isAxoActive && ! isAxoScriptLoaded ) ) {
+			console.log( 'Conditions met, creating watermark' );
+			createWatermarkContainer();
+			updateWatermarkContent( {
+				isAxoActive,
+				isAxoScriptLoaded,
+				fastlaneSdk,
+				isGuest,
+			} );
+		} else {
+			console.log( 'Conditions not met, removing watermark' );
+			removeWatermark();
+		}
+
+		return removeWatermark;
+	}, [ fastlaneSdk, isGuest, isAxoActive, isAxoScriptLoaded ] );
+
+	return null;
+};
+
+export default WatermarkManager;

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

@@ -0,0 +1,3 @@
+export { default as Watermark } from './Watermark';
+export { default as WatermarkManager } from './WatermarkManager';
+export { setupWatermark, removeWatermark } from './utils';

modules/ppcp-axo-block/resources/js/components/watermark/utils.js

@@ -0,0 +1,115 @@
+import { createElement, createRoot } from '@wordpress/element';
+import { Watermark, WatermarkManager } from '../watermark';
+
+const watermarkReference = {
+	container: null,
+	root: null,
+};
+
+export const createWatermarkContainer = () => {
+	console.log( 'Creating watermark container' );
+	const textInputContainer = document.querySelector(
+		'.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input'
+	);
+
+	if ( textInputContainer && ! watermarkReference.container ) {
+		console.log(
+			'Text input container found, creating watermark container'
+		);
+		const emailInput =
+			textInputContainer.querySelector( 'input[id="email"]' );
+
+		if ( emailInput ) {
+			console.log( 'Email input found, setting up watermark' );
+			watermarkReference.container = document.createElement( 'div' );
+			watermarkReference.container.setAttribute(
+				'class',
+				'wc-block-checkout-axo-block-watermark-container'
+			);
+
+			emailInput.parentNode.insertBefore(
+				watermarkReference.container,
+				emailInput.nextSibling
+			);
+
+			watermarkReference.root = createRoot(
+				watermarkReference.container
+			);
+		}
+	}
+};
+
+export const setupWatermark = ( fastlaneSdk ) => {
+	console.log( 'Setting up watermark', { fastlaneSdk } );
+	const container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	const root = createRoot( container );
+	root.render( createElement( WatermarkManager, { fastlaneSdk } ) );
+
+	return () => {
+		console.log( 'Cleaning up watermark setup' );
+		root.unmount();
+		if ( container && container.parentNode ) {
+			container.parentNode.removeChild( container );
+		}
+	};
+};
+
+export const removeWatermark = () => {
+	console.log( 'Removing watermark' );
+	if ( watermarkReference.root ) {
+		watermarkReference.root.unmount();
+	}
+	if ( watermarkReference.container ) {
+		if ( watermarkReference.container.parentNode ) {
+			watermarkReference.container.parentNode.removeChild(
+				watermarkReference.container
+			);
+		} else {
+			const detachedContainer = document.querySelector(
+				'.wc-block-checkout-axo-block-watermark-container'
+			);
+			if ( detachedContainer ) {
+				detachedContainer.remove();
+			}
+		}
+	}
+	Object.assign( watermarkReference, { container: null, root: null } );
+	console.log( 'Watermark removed' );
+};
+
+export const renderWatermarkContent = ( content ) => {
+	if ( watermarkReference.root ) {
+		console.log( 'Rendering watermark content' );
+		watermarkReference.root.render( content );
+	}
+};
+
+export const updateWatermarkContent = ( {
+	isAxoActive,
+	isAxoScriptLoaded,
+	fastlaneSdk,
+	isGuest,
+} ) => {
+	if ( ! isAxoActive && ! isAxoScriptLoaded ) {
+		console.log( 'Rendering spinner' );
+		renderWatermarkContent(
+			createElement( 'span', {
+				className: 'wc-block-components-spinner',
+				'aria-hidden': 'true',
+			} )
+		);
+	} else if ( isAxoActive ) {
+		console.log( 'Rendering FastlaneWatermark' );
+		renderWatermarkContent(
+			createElement( Watermark, {
+				fastlaneSdk,
+				name: 'fastlane-watermark-email',
+				includeAdditionalInfo: isGuest,
+			} )
+		);
+	} else {
+		console.log( 'Rendering null content' );
+		renderWatermarkContent( null );
+	}
+};

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

@@ -1,5 +1,5 @@
 import { populateWooFields } from '../helpers/fieldHelpers';
-import { injectShippingChangeButton } from '../helpers/shippingChangeButtonManager';
+import { injectShippingChangeButton } from '../components/shipping';
 import { injectCardChangeButton } from '../helpers/cardChangeButtonManager';
 import { setIsGuest } from '../stores/axoStore';
 

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

@@ -1,33 +0,0 @@
-export 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();
-		};
-		shippingTitle.parentNode.insertBefore(
-			buttonElement,
-			shippingTitle.nextSibling
-		);
-	}
-};
-
-export const removeShippingChangeButton = () => {
-	const existingButton = document.querySelector(
-		'#shipping-fields .wc-block-checkout-axo-block-card__edit'
-	);
-	if ( existingButton ) {
-		existingButton.remove();
-	}
-};

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

@@ -34,7 +34,6 @@ export const setupAuthenticationClassToggle = () => {
 		updateAuthenticationClass();
 	} );
 
-	// Return the unsubscribe function for cleanup
 	return unsubscribe;
 };
 
@@ -79,7 +78,6 @@ export const setupContactInfoClassToggles = () => {
 		updateContactInfoClasses();
 	} );
 
-	// Return the unsubscribe function for cleanup
 	return unsubscribe;
 };
 

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

@@ -1,170 +0,0 @@
-import { createElement, useEffect, createRoot } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { FastlaneWatermark } from '../components/FastlaneWatermark';
-import { STORE_NAME } from '../stores/axoStore';
-
-let watermarkReference = {
-	container: null,
-	root: null,
-};
-
-console.log( 'WatermarkManager module loaded' );
-
-const WatermarkManager = ( { fastlaneSdk } ) => {
-	console.log( 'WatermarkManager rendering', { fastlaneSdk } );
-
-	const isGuest = useSelect( ( select ) =>
-		select( STORE_NAME ).getIsGuest()
-	);
-	const isAxoActive = useSelect( ( select ) =>
-		select( STORE_NAME ).getIsAxoActive()
-	);
-	const isAxoScriptLoaded = useSelect( ( select ) =>
-		select( STORE_NAME ).isAxoScriptLoaded()
-	);
-
-	console.log( 'WatermarkManager state', {
-		isGuest,
-		isAxoActive,
-		isAxoScriptLoaded,
-	} );
-
-	useEffect( () => {
-		console.log( 'WatermarkManager useEffect triggered' );
-
-		const createWatermark = () => {
-			console.log( 'Creating watermark' );
-			const textInputContainer = document.querySelector(
-				'.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input'
-			);
-
-			if ( textInputContainer && ! watermarkReference.container ) {
-				console.log(
-					'Text input container found, creating watermark container'
-				);
-				const emailInput =
-					textInputContainer.querySelector( 'input[id="email"]' );
-
-				if ( emailInput ) {
-					console.log( 'Email input found, setting up watermark' );
-					watermarkReference.container =
-						document.createElement( 'div' );
-					watermarkReference.container.setAttribute(
-						'class',
-						'wc-block-checkout-axo-block-watermark-container'
-					);
-
-					emailInput.parentNode.insertBefore(
-						watermarkReference.container,
-						emailInput.nextSibling
-					);
-
-					watermarkReference.root = createRoot(
-						watermarkReference.container
-					);
-				}
-			}
-
-			if ( watermarkReference.root ) {
-				console.log( 'Rendering watermark content' );
-				if ( ! isAxoActive && ! isAxoScriptLoaded ) {
-					console.log( 'Rendering spinner' );
-					watermarkReference.root.render(
-						createElement( 'span', {
-							className: 'wc-block-components-spinner',
-							'aria-hidden': 'true',
-						} )
-					);
-				} else if ( isAxoActive ) {
-					console.log( 'Rendering FastlaneWatermark' );
-					watermarkReference.root.render(
-						createElement( FastlaneWatermark, {
-							fastlaneSdk,
-							name: 'fastlane-watermark-email',
-							includeAdditionalInfo: isGuest,
-						} )
-					);
-				} else {
-					console.log( 'Rendering null content' );
-					watermarkReference.root.render( null );
-				}
-			}
-		};
-
-		const removeWatermark = () => {
-			console.log( 'Removing watermark' );
-			if ( watermarkReference.root ) {
-				watermarkReference.root.unmount();
-			}
-			if ( watermarkReference.container ) {
-				if ( watermarkReference.container.parentNode ) {
-					watermarkReference.container.parentNode.removeChild(
-						watermarkReference.container
-					);
-				} else {
-					const detachedContainer = document.querySelector(
-						'.wc-block-checkout-axo-block-watermark-container'
-					);
-					if ( detachedContainer ) {
-						detachedContainer.remove();
-					}
-				}
-			}
-			watermarkReference = { container: null, root: null };
-			console.log( 'Watermark removed' );
-		};
-
-		if ( isAxoActive || ( ! isAxoActive && ! isAxoScriptLoaded ) ) {
-			console.log( 'Conditions met, creating watermark' );
-			createWatermark();
-		} else {
-			console.log( 'Conditions not met, removing watermark' );
-			removeWatermark();
-		}
-
-		return removeWatermark;
-	}, [ fastlaneSdk, isGuest, isAxoActive, isAxoScriptLoaded ] );
-
-	return null;
-};
-
-export const setupWatermark = ( fastlaneSdk ) => {
-	console.log( 'Setting up watermark', { fastlaneSdk } );
-	const container = document.createElement( 'div' );
-	document.body.appendChild( container );
-	const root = createRoot( container );
-	root.render( createElement( WatermarkManager, { fastlaneSdk } ) );
-
-	return () => {
-		console.log( 'Cleaning up watermark setup' );
-		root.unmount();
-		if ( container && container.parentNode ) {
-			container.parentNode.removeChild( container );
-		}
-	};
-};
-
-export const removeWatermark = () => {
-	console.log( 'Removing watermark (external call)' );
-	if ( watermarkReference.root ) {
-		watermarkReference.root.unmount();
-	}
-	if ( watermarkReference.container ) {
-		if ( watermarkReference.container.parentNode ) {
-			watermarkReference.container.parentNode.removeChild(
-				watermarkReference.container
-			);
-		} else {
-			const detachedContainer = document.querySelector(
-				'.wc-block-checkout-axo-block-watermark-container'
-			);
-			if ( detachedContainer ) {
-				detachedContainer.remove();
-			}
-		}
-	}
-	watermarkReference = { container: null, root: null };
-	console.log( 'Watermark removed (external call)' );
-};
-
-export default WatermarkManager;

modules/ppcp-axo-block/resources/js/hooks/useCardChange.js

@@ -1,4 +1,5 @@
 import { useCallback } from '@wordpress/element';
+import useFastlaneSdk from "./useFastlaneSdk";
 
 export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
 	return useCallback( async () => {
@@ -33,3 +34,5 @@ export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
 		}
 	}, [ fastlaneSdk, setCard ] );
 };
+
+export default useCardChange;

modules/ppcp-axo-block/resources/js/hooks/useCustomerData.js

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
+import useFastlaneSdk from "./useFastlaneSdk";
 
 export const useCustomerData = () => {
 	const customerData = useSelect( ( select ) =>
@@ -40,3 +41,5 @@ export const useCustomerData = () => {
 		]
 	);
 };
+
+export default useCustomerData;

modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js

@@ -33,3 +33,5 @@ export const useShippingAddressChange = (
 		}
 	}, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] );
 };
+
+export default useShippingAddressChange;

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

@@ -7,18 +7,18 @@ import { loadPaypalScript } from '../../../ppcp-button/resources/js/modules/Help
 
 // Hooks
 import useFastlaneSdk from './hooks/useFastlaneSdk';
-import { useCustomerData } from './hooks/useCustomerData';
-import { useShippingAddressChange } from './hooks/useShippingAddressChange';
-import { useCardChange } from './hooks/useCardChange';
+import useCustomerData from './hooks/useCustomerData';
+import useShippingAddressChange from './hooks/useShippingAddressChange';
+import useCardChange from './hooks/useCardChange';
 
 // Components
 import { Payment } from './components/Payment';
 
 // Helpers
 import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers';
-import { removeWatermark, setupWatermark } from './helpers/watermarkHelpers';
+import { removeWatermark, setupWatermark } from './components/watermark';
 import { removeCardChangeButton } from './helpers/cardChangeButtonManager';
-import { removeShippingChangeButton } from './helpers/shippingChangeButtonManager';
+import { removeShippingChangeButton } from './components/shipping';
 import { initializeClassToggles } from './helpers/classnamesManager';
 
 // Stores
@@ -30,7 +30,7 @@ import {
 	setupEmailFunctionality,
 	removeEmailFunctionality,
 	isEmailFunctionalitySetup,
-} from './helpers/emailSubmissionManager';
+} from './components/email-button';
 
 const ppcpConfig = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );
 
@@ -221,7 +221,6 @@ registerPaymentMethod( {
 	edit: <h1>This is Axo Blocks in the editor</h1>,
 	ariaLabel: ppcpConfig.title,
 	canMakePayment: () => {
-		console.log( 'Checking if payment can be made' );
 		return true;
 	},
 	supports: {