Optimize for prop drilling

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 ]

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' );

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();

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 ) {

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 = (
+export const useShippingAddressChange = ( fastlaneSdk, setShippingAddress ) => {
-	fastlaneSdk,
-	setShippingAddress,
-	setWooShippingAddress
-) => {
 	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;
 

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 onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard );
-	const {
-		shippingAddress: wooShippingAddress,
-		billingAddress: wooBillingAddress,
-		setShippingAddress: updateWooShippingAddress,
-		setBillingAddress: updateWooBillingAddress,
-	} = useCustomerData();
-
-	const onChangeShippingAddressClick = useShippingAddressChange(
-		fastlaneSdk,
-		setShippingAddress,
-		updateWooShippingAddress
-	);
-	const onChangeCardButtonClick = useCardChange(
-		fastlaneSdk,
-		setCard,
-		updateWooBillingAddress
-	);
 
 	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 );