From f77aae6b9088525d9316b367d874b19cfa0f3221 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 13 Sep 2024 22:30:04 +0200 Subject: [PATCH] Add address card toggling --- .../resources/js/helpers/fieldHelpers.js | 10 +++++ .../resources/js/hooks/useAddressEditing.js | 44 +++++++++++++++++++ .../resources/js/hooks/useCardChange.js | 22 ++++++++-- .../js/hooks/useShippingAddressChange.js | 22 +++++++++- 4 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js diff --git a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js b/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js index 04b2ce2a9..7ca9fa2cb 100644 --- a/modules/ppcp-axo-block/resources/js/helpers/fieldHelpers.js +++ b/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 ); }; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js b/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js new file mode 100644 index 000000000..3c3a15156 --- /dev/null +++ b/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; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js index f6c16f784..193bdcc3c 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js +++ b/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; diff --git a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js b/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js index 0f625da48..e66d25d84 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js +++ b/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;