Refactor the change shipping address and change card buttons to a more modular structure

modules/ppcp-axo-block/resources/css/gateway.scss

@@ -116,8 +116,20 @@
 	margin-left: 5px;
 }
 
+//.wc-block-axo-is-loaded:not(.wc-block-axo-is-authenticated) {
+//	#shipping-fields,
+//	#shipping-option,
+//	#order-notes {
+//		display: none;
+//	}
+//}
+
 .wc-block-axo-is-loaded {
-	.wc-block-components-text-input {
+	&.wc-block-axo-is-authenticated .wc-block-components-text-input {
+		gap: 14px 0;
+	}
+
+	.wp-block-woocommerce-checkout-contact-information-block .wc-block-components-text-input {
 		display: grid;
 		grid-template-areas:
         "input button"
@@ -132,10 +144,6 @@
 		align-self: center;
 	}
 
-	&.wc-block-axo-is-authenticated .wc-block-components-text-input {
-		gap: 14px 0;
-	}
-
 	.wc-block-components-text-input input[type="email"] {
 		grid-area: input;
 		width: 100%;
@@ -186,7 +194,7 @@ a.wc-block-axo-change-link {
 	height: 25px;
 }
 
-.wp-block-woocommerce-checkout-contact-information-block:not( .wc-block-axo-is-loaded ) .wc-block-checkout-axo-block-watermark-container {
+.wp-block-woocommerce-checkout-fields-block:not( .wc-block-axo-is-loaded ) .wc-block-checkout-axo-block-watermark-container {
 	display: flex;
 	justify-content: left;
 	margin-left: 10px;
@@ -204,7 +212,7 @@ a.wc-block-axo-change-link {
 	}
 }
 
-.wp-block-woocommerce-checkout-contact-information-block.wc-block-axo-is-loaded {
+.wc-block-axo-is-loaded .wp-block-woocommerce-checkout-contact-information-block {
 	.wc-block-checkout-axo-block-watermark-container .wc-block-components-spinner {
 		display: none;
 		visibility: hidden;

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

@@ -1,5 +1,5 @@
 import { useMemo } from '@wordpress/element';
-import { Watermark } from '../watermark';
+import { Watermark } from '../Watermark';
 
 const cardIcons = {
 	VISA: 'visa-light.svg',
@@ -11,7 +11,7 @@ const cardIcons = {
 	UNIONPAY: 'unionpay-light.svg',
 };
 
-export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => {
+const Card = ( { card, fastlaneSdk, showWatermark = true } ) => {
 	const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {};
 
 	const cardLogo = useMemo( () => {
@@ -59,3 +59,5 @@ export const Card = ( { card, fastlaneSdk, showWatermark = true } ) => {
 		</div>
 	);
 };
+
+export default Card;

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

@@ -0,0 +1,18 @@
+import { createElement } from '@wordpress/element';
+
+const CardChangeButton = ( { onChangeButtonClick } ) =>
+	createElement(
+		'a',
+		{
+			className:
+				'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link',
+			role: 'button',
+			onClick: ( event ) => {
+				event.preventDefault();
+				onChangeButtonClick();
+			},
+		},
+		'Choose a different card'
+	);
+
+export default CardChangeButton;

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

@@ -1,19 +1,5 @@
-import { createElement, useEffect, createRoot } from '@wordpress/element';
+import { createElement, createRoot, useEffect } from '@wordpress/element';
-
+import CardChangeButton from './CardChangeButton';
-const CardChangeButton = ( { onChangeButtonClick } ) =>
-	createElement(
-		'a',
-		{
-			className:
-				'wc-block-checkout-axo-block-card__edit wc-block-axo-change-link',
-			role: 'button',
-			onClick: ( event ) => {
-				event.preventDefault();
-				onChangeButtonClick();
-			},
-		},
-		'Choose a different card'
-	);
 
 const CardChangeButtonManager = ( { onChangeButtonClick } ) => {
 	useEffect( () => {
@@ -50,21 +36,4 @@ const CardChangeButtonManager = ( { onChangeButtonClick } ) => {
 	return null;
 };
 
-export const injectCardChangeButton = ( onChangeButtonClick ) => {
-	const container = document.createElement( 'div' );
-	document.body.appendChild( container );
-	createRoot( container ).render(
-		createElement( CardChangeButtonManager, { 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/components/Card/index.js

@@ -0,0 +1,4 @@
+export { default as Card } from './Card';
+export { default as CardChangeButton } from './CardChangeButton';
+export { default as CardChangeButtonManager } from './CardChangeButtonManager';
+export { injectCardChangeButton, removeCardChangeButton } from './utils';

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

@@ -0,0 +1,19 @@
+import { createElement, createRoot } from '@wordpress/element';
+import CardChangeButtonManager from './CardChangeButtonManager';
+
+export const injectCardChangeButton = ( onChangeButtonClick ) => {
+	const container = document.createElement( 'div' );
+	document.body.appendChild( container );
+	createRoot( container ).render(
+		createElement( CardChangeButtonManager, { onChangeButtonClick } )
+	);
+};
+
+export const removeCardChangeButton = () => {
+	const button = document.querySelector(
+		'.wc-block-checkout-axo-block-card__edit'
+	);
+	if ( button && button.parentNode ) {
+		button.parentNode.remove();
+	}
+};

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

@@ -1,7 +1,7 @@
 import { STORE_NAME } from '../../stores/axoStore';
 import { useSelect } from '@wordpress/data';
 
-export const EmailButton = ( { handleSubmit } ) => {
+const EmailButton = ( { handleSubmit } ) => {
 	const { isGuest, isAxoActive, isEmailSubmitted } = useSelect(
 		( select ) => ( {
 			isGuest: select( STORE_NAME ).getIsGuest(),
@@ -46,3 +46,5 @@ export const EmailButton = ( { handleSubmit } ) => {
 		</button>
 	);
 };
+
+export default EmailButton;

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

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

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

@@ -1,6 +1,6 @@
 import { createElement, createRoot } from '@wordpress/element';
 import { STORE_NAME } from '../../stores/axoStore';
-import { EmailButton } from './EmailButton';
+import EmailButton from './EmailButton';
 
 let emailInput = null;
 let submitButtonReference = {
@@ -17,7 +17,7 @@ const getEmailInput = () => {
 	return emailInput;
 };
 
-const setupEmailFunctionality = ( onEmailSubmit ) => {
+export const setupEmailFunctionality = ( onEmailSubmit ) => {
 	const input = getEmailInput();
 	if ( ! input ) {
 		console.warn(
@@ -96,7 +96,7 @@ const setupEmailFunctionality = ( onEmailSubmit ) => {
 	} );
 };
 
-const removeEmailFunctionality = () => {
+export const removeEmailFunctionality = () => {
 	const input = getEmailInput();
 	if ( input && keydownHandler ) {
 		input.removeEventListener( 'keydown', keydownHandler );
@@ -120,12 +120,6 @@ const removeEmailFunctionality = () => {
 	keydownHandler = null;
 };
 
-const isEmailFunctionalitySetup = () => {
+export const isEmailFunctionalitySetup = () => {
 	return !! submitButtonReference.root;
 };
-
-export {
-	setupEmailFunctionality,
-	removeEmailFunctionality,
-	isEmailFunctionalitySetup,
-};

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

@@ -1,7 +1,7 @@
 import { useEffect, useCallback } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
-import { Card } from './card/Card';
+import { Card } from '../Card';
-import { STORE_NAME } from '../stores/axoStore';
+import { STORE_NAME } from '../../stores/axoStore';
 
 export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
 	const isGuest = useSelect( ( select ) =>

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

@@ -1,9 +1,6 @@
 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,32 @@
+import { createRoot } from '@wordpress/element';
+import ShippingChangeButtonManager from './ShippingChangeButtonManager';
+
+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/utils.js

@@ -1,5 +1,5 @@
 import { createElement, createRoot } from '@wordpress/element';
-import { Watermark, WatermarkManager } from '../watermark';
+import { Watermark, WatermarkManager } from '../Watermark';
 
 const watermarkReference = {
 	container: null,

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

@@ -1,15 +0,0 @@
-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/shipping/utils.js

@@ -1,149 +0,0 @@
-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/events/emailLookupManager.js

@@ -1,6 +1,6 @@
 import { populateWooFields } from '../helpers/fieldHelpers';
-import { injectShippingChangeButton } from '../components/shipping';
+import { injectShippingChangeButton } from '../components/Shipping';
-import { injectCardChangeButton } from '../helpers/cardChangeButtonManager';
+import { injectCardChangeButton } from '../components/Card';
 import { setIsGuest } from '../stores/axoStore';
 
 export const createEmailLookupHandler = (

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

@@ -42,8 +42,7 @@ export const setupAuthenticationClassToggle = () => {
  * @return {Function} Unsubscribe function for cleanup.
  */
 export const setupContactInfoClassToggles = () => {
-	const targetSelector =
+	const targetSelector = '.wp-block-woocommerce-checkout-fields-block';
-		'.wp-block-woocommerce-checkout-contact-information-block';
 	const axoLoadedClass = 'wc-block-axo-is-loaded';
 	const authClass = 'wc-block-axo-is-authenticated';
 

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

@@ -1,81 +0,0 @@
-import { useEffect, createRoot } from '@wordpress/element';
-
-const ShippingChangeButton = ( { onChangeShippingAddressClick } ) => (
-	<a
-		className="wc-block-axo-change-link"
-		role="button"
-		onClick={ ( event ) => {
-			event.preventDefault();
-			onChangeShippingAddressClick();
-		} }
-	>
-		Choose a different shipping address
-	</a>
-);
-
-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 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();
-	}
-};
-
-export default ShippingChangeButtonManager;

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

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

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

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

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

@@ -12,13 +12,13 @@ import useShippingAddressChange from './hooks/useShippingAddressChange';
 import useCardChange from './hooks/useCardChange';
 
 // Components
-import { Payment } from './components/Payment';
+import { Payment } from './components/Payment/Payment';
 
 // Helpers
 import { snapshotFields, restoreOriginalFields } from './helpers/fieldHelpers';
-import { removeWatermark, setupWatermark } from './components/watermark';
+import { removeWatermark, setupWatermark } from './components/Watermark';
-import { removeCardChangeButton } from './helpers/cardChangeButtonManager';
+import { removeCardChangeButton } from './components/Card';
-import { removeShippingChangeButton } from './components/shipping';
+import { removeShippingChangeButton } from './components/Shipping';
 import { initializeClassToggles } from './helpers/classnamesManager';
 
 // Stores
@@ -30,7 +30,7 @@ import {
 	setupEmailFunctionality,
 	removeEmailFunctionality,
 	isEmailFunctionalitySetup,
-} from './components/email-button';
+} from './components/EmailButton';
 
 const ppcpConfig = wc.wcSettings.getSetting( 'ppcp-credit-card-gateway_data' );