Add address card toggling

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

@@ -1,3 +1,5 @@
+import { dispatch } from '@wordpress/data';
+
 export const snapshotFields = ( shippingAddress, billingAddress ) => {
 	console.log( 'Attempting to snapshot fields' );
 	if ( ! shippingAddress || ! billingAddress ) {
@@ -74,11 +76,16 @@ export const populateWooFields = (
 	setWooShippingAddress,
 	setWooBillingAddress
 ) => {
+	const CHECKOUT_STORE_KEY = 'wc/store/checkout';
+
 	console.log(
 		'Populating WooCommerce fields with profile data:',
 		profileData
 	);
 
+	// Disable the 'Use same address for billing' checkbox
+	dispatch( CHECKOUT_STORE_KEY ).__internalSetUseShippingAsBilling( false );
+
 	// Save shipping address
 	const { address, name, phoneNumber } = profileData.shippingAddress;
 
@@ -113,4 +120,7 @@ export const populateWooFields = (
 
 	console.log( 'Setting WooCommerce billing address:', billingAddress );
 	setWooBillingAddress( billingAddress );
+
+	dispatch( CHECKOUT_STORE_KEY ).setEditingShippingAddress( false );
+	dispatch( CHECKOUT_STORE_KEY ).setEditingBillingAddress( false );
 };

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

@@ -0,0 +1,44 @@
+import { useCallback } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+const CHECKOUT_STORE_KEY = 'wc/store/checkout';
+
+export const useAddressEditing = () => {
+	const { isEditingShippingAddress, isEditingBillingAddress } = useSelect(
+		( select ) => {
+			const store = select( CHECKOUT_STORE_KEY );
+			return {
+				isEditingShippingAddress: store.getEditingShippingAddress(),
+				isEditingBillingAddress: store.getEditingBillingAddress(),
+			};
+		},
+		[]
+	);
+
+	const { setEditingShippingAddress, setEditingBillingAddress } =
+		useDispatch( CHECKOUT_STORE_KEY );
+
+	const setShippingAddressEditing = useCallback(
+		( isEditing ) => {
+			setEditingShippingAddress( isEditing );
+		},
+		[ setEditingShippingAddress ]
+	);
+
+	const setBillingAddressEditing = useCallback(
+		( isEditing ) => {
+			console.log( 'Setting billing address editing to:', isEditing );
+			setEditingBillingAddress( isEditing );
+		},
+		[ setEditingBillingAddress ]
+	);
+
+	return {
+		isEditingShippingAddress,
+		isEditingBillingAddress,
+		setShippingAddressEditing,
+		setBillingAddressEditing,
+	};
+};
+
+export default useAddressEditing;

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

@@ -1,6 +1,9 @@
 import { useCallback } from '@wordpress/element';
+import { useAddressEditing } from './useAddressEditing';
 
 export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
+	const { setBillingAddressEditing } = useAddressEditing();
+
 	return useCallback( async () => {
 		if ( fastlaneSdk ) {
 			const { selectionChanged, selectedCard } =
@@ -17,7 +20,7 @@ export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
 				const firstName = nameParts[ 0 ];
 				const lastName = nameParts.slice( 1 ).join( ' ' );
 
-				setWooBillingAddress( {
+				const newBillingAddress = {
 					first_name: firstName,
 					last_name: lastName,
 					address_1: billingAddress.addressLine1,
@@ -26,12 +29,25 @@ export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => {
 					state: billingAddress.adminArea1,
 					postcode: billingAddress.postalCode,
 					country: billingAddress.countryCode,
+				};
+
+				await new Promise( ( resolve ) => {
+					setWooBillingAddress( newBillingAddress );
+					resolve();
 				} );
 
-				console.log( 'Billing address updated:', billingAddress );
+				await new Promise( ( resolve ) => {
+					setBillingAddressEditing( false );
+					resolve();
+				} );
 			}
 		}
-	}, [ fastlaneSdk, setCard ] );
+	}, [
+		fastlaneSdk,
+		setCard,
+		setWooBillingAddress,
+		setBillingAddressEditing,
+	] );
 };
 
 export default useCardChange;

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

@@ -1,10 +1,13 @@
 import { useCallback } from '@wordpress/element';
+import { useAddressEditing } from './useAddressEditing';
 
 export const useShippingAddressChange = (
 	fastlaneSdk,
 	setShippingAddress,
 	setWooShippingAddress
 ) => {
+	const { setShippingAddressEditing } = useAddressEditing();
+
 	return useCallback( async () => {
 		if ( fastlaneSdk ) {
 			const { selectionChanged, selectedAddress } =
@@ -18,7 +21,7 @@ export const useShippingAddressChange = (
 
 				const { address, name, phoneNumber } = selectedAddress;
 
-				setWooShippingAddress( {
+				const newShippingAddress = {
 					first_name: name.firstName,
 					last_name: name.lastName,
 					address_1: address.addressLine1,
@@ -28,10 +31,25 @@ export const useShippingAddressChange = (
 					postcode: address.postalCode,
 					country: address.countryCode,
 					phone: phoneNumber.nationalNumber,
+				};
+
+				await new Promise( ( resolve ) => {
+					setWooShippingAddress( newShippingAddress );
+					resolve();
+				} );
+
+				await new Promise( ( resolve ) => {
+					setShippingAddressEditing( false );
+					resolve();
 				} );
 			}
 		}
-	}, [ fastlaneSdk, setShippingAddress, setWooShippingAddress ] );
+	}, [
+		fastlaneSdk,
+		setShippingAddress,
+		setWooShippingAddress,
+		setShippingAddressEditing,
+	] );
 };
 
 export default useShippingAddressChange;