From 859fd3396b16f79531acdb514c95ada652f668c7 Mon Sep 17 00:00:00 2001 From: Daniel Dudzic Date: Fri, 13 Sep 2024 23:09:51 +0200 Subject: [PATCH] Optimize for prop drilling --- .../resources/js/hooks/useAddressEditing.js | 1 - .../resources/js/hooks/useAxoCleanup.js | 7 ++++- .../resources/js/hooks/useAxoSetup.js | 19 +++++++++---- .../resources/js/hooks/useCardChange.js | 4 ++- .../js/hooks/useShippingAddressChange.js | 12 ++------ modules/ppcp-axo-block/resources/js/index.js | 28 ++----------------- 6 files changed, 28 insertions(+), 43 deletions(-) diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js b/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js index 3c3a15156..b415dee6c 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useAddressEditing.js @@ -27,7 +27,6 @@ export const useAddressEditing = () => { const setBillingAddressEditing = useCallback( ( isEditing ) => { - console.log( 'Setting billing address editing to:', isEditing ); setEditingBillingAddress( isEditing ); }, [ setEditingBillingAddress ] diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js index 2001cc102..d884e1c67 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useAxoCleanup.js @@ -9,9 +9,14 @@ import { isEmailFunctionalitySetup, } from '../components/EmailButton'; import { restoreOriginalFields } from '../helpers/fieldHelpers'; +import useCustomerData from './useCustomerData'; -const useAxoCleanup = ( updateWooShippingAddress, updateWooBillingAddress ) => { +const useAxoCleanup = () => { const { setIsAxoActive, setIsGuest } = useDispatch( STORE_NAME ); + const { + setShippingAddress: updateWooShippingAddress, + setBillingAddress: updateWooBillingAddress, + } = useCustomerData(); useEffect( () => { console.log( 'Setting up cleanup for WooCommerce fields' ); diff --git a/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js b/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js index 1a37a4eb9..c4d049381 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useAxoSetup.js @@ -7,15 +7,12 @@ import { setupEmailFunctionality } from '../components/EmailButton'; import { createEmailLookupHandler } from '../events/emailLookupManager'; import { initializeClassToggles } from '../helpers/classnamesManager'; import { snapshotFields } from '../helpers/fieldHelpers'; +import useCustomerData from './useCustomerData'; +import useShippingAddressChange from './useShippingAddressChange'; const useAxoSetup = ( ppcpConfig, fastlaneSdk, - wooShippingAddress, - wooBillingAddress, - setWooShippingAddress, - setWooBillingAddress, - onChangeShippingAddressClick, onChangeCardButtonClick, setShippingAddress, setCard @@ -23,6 +20,18 @@ const useAxoSetup = ( const { setIsAxoActive, setIsAxoScriptLoaded } = useDispatch( STORE_NAME ); const paypalLoaded = usePayPalScript( ppcpConfig ); + const onChangeShippingAddressClick = useShippingAddressChange( + fastlaneSdk, + setShippingAddress + ); + + const { + shippingAddress: wooShippingAddress, + billingAddress: wooBillingAddress, + setShippingAddress: setWooShippingAddress, + setBillingAddress: setWooBillingAddress, + } = useCustomerData(); + useEffect( () => { console.log( 'Initializing class toggles' ); initializeClassToggles(); diff --git a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js index 193bdcc3c..3b4602dc7 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js @@ -1,8 +1,10 @@ import { useCallback } from '@wordpress/element'; import { useAddressEditing } from './useAddressEditing'; +import useCustomerData from './useCustomerData'; -export const useCardChange = ( fastlaneSdk, setCard, setWooBillingAddress ) => { +export const useCardChange = ( fastlaneSdk, setCard ) => { const { setBillingAddressEditing } = useAddressEditing(); + const { setBillingAddress: setWooBillingAddress } = useCustomerData(); return useCallback( async () => { if ( fastlaneSdk ) { diff --git a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js b/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js index e66d25d84..6d8e7b4a2 100644 --- a/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js +++ b/modules/ppcp-axo-block/resources/js/hooks/useShippingAddressChange.js @@ -1,12 +1,10 @@ import { useCallback } from '@wordpress/element'; import { useAddressEditing } from './useAddressEditing'; +import useCustomerData from './useCustomerData'; -export const useShippingAddressChange = ( - fastlaneSdk, - setShippingAddress, - setWooShippingAddress -) => { +export const useShippingAddressChange = ( fastlaneSdk, setShippingAddress ) => { const { setShippingAddressEditing } = useAddressEditing(); + const { setShippingAddress: setWooShippingAddress } = useCustomerData(); return useCallback( async () => { if ( fastlaneSdk ) { @@ -14,10 +12,6 @@ export const useShippingAddressChange = ( await fastlaneSdk.profile.showShippingAddressSelector(); if ( selectionChanged ) { setShippingAddress( selectedAddress ); - console.log( - 'Selected shipping address changed:', - selectedAddress - ); const { address, name, phoneNumber } = selectedAddress; diff --git a/modules/ppcp-axo-block/resources/js/index.js b/modules/ppcp-axo-block/resources/js/index.js index 7521bc53e..5abf56256 100644 --- a/modules/ppcp-axo-block/resources/js/index.js +++ b/modules/ppcp-axo-block/resources/js/index.js @@ -3,8 +3,6 @@ import { registerPaymentMethod } from '@woocommerce/blocks-registry'; // Hooks import useFastlaneSdk from './hooks/useFastlaneSdk'; -import useCustomerData from './hooks/useCustomerData'; -import useShippingAddressChange from './hooks/useShippingAddressChange'; import useCardChange from './hooks/useCardChange'; import useAxoSetup from './hooks/useAxoSetup'; import usePaymentSetup from './hooks/usePaymentSetup'; @@ -22,39 +20,17 @@ const Axo = ( props ) => { const [ shippingAddress, setShippingAddress ] = useState( null ); const [ card, setCard ] = useState( null ); const fastlaneSdk = useFastlaneSdk( axoConfig, ppcpConfig ); - - const { - shippingAddress: wooShippingAddress, - billingAddress: wooBillingAddress, - setShippingAddress: updateWooShippingAddress, - setBillingAddress: updateWooBillingAddress, - } = useCustomerData(); - - const onChangeShippingAddressClick = useShippingAddressChange( - fastlaneSdk, - setShippingAddress, - updateWooShippingAddress - ); - const onChangeCardButtonClick = useCardChange( - fastlaneSdk, - setCard, - updateWooBillingAddress - ); + const onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard ); useAxoSetup( ppcpConfig, fastlaneSdk, - wooShippingAddress, - wooBillingAddress, - updateWooShippingAddress, - updateWooBillingAddress, - onChangeShippingAddressClick, onChangeCardButtonClick, setShippingAddress, setCard ); usePaymentSetup( onPaymentSetup, emitResponse, card ); - useAxoCleanup( updateWooShippingAddress, updateWooBillingAddress ); + useAxoCleanup(); const handlePaymentLoad = useCallback( ( paymentComponent ) => { console.log( 'Payment component loaded', paymentComponent );