Merge pull request #2637 from woocommerce/axo-blocks-additional-minor-code-cleanup-refactor

Axo Blocks: Reduce prop drilling and move shipping address, card details and phone number state to the Redux store

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

@@ -1,5 +1,7 @@
 import { useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { Watermark } from '../Watermark';
+import { STORE_NAME } from '../../stores/axoStore';
 
 const cardIcons = {
 	VISA: 'visa-light.svg',
@@ -11,7 +13,14 @@ const cardIcons = {
 	UNIONPAY: 'unionpay-light.svg',
 };
 
-const Card = ( { card, fastlaneSdk, showWatermark = true } ) => {
+const Card = ( { fastlaneSdk, showWatermark = true } ) => {
+	const { card } = useSelect(
+		( select ) => ( {
+			card: select( STORE_NAME ).getCardDetails(),
+		} ),
+		[]
+	);
+
 	const { brand, lastDigits, expiry, name } = card?.paymentSource?.card ?? {};
 
 	const cardLogo = useMemo( () => {

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

@@ -83,8 +83,6 @@ export const setupEmailFunctionality = ( onEmailSubmit ) => {
 					handleSubmit: handleEmailSubmit,
 				} )
 			);
-		} else {
-			console.warn( 'Submit button root not found' );
 		}
 	};
 

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

@@ -4,15 +4,15 @@ import { __ } from '@wordpress/i18n';
 import { Card } from '../Card';
 import { STORE_NAME } from '../../stores/axoStore';
 
-export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
+export const Payment = ( { fastlaneSdk, onPaymentLoad } ) => {
 	const [ isCardElementReady, setIsCardElementReady ] = useState( false );
-
-	const isGuest = useSelect( ( select ) =>
-		select( STORE_NAME ).getIsGuest()
-	);
-
-	const isEmailLookupCompleted = useSelect( ( select ) =>
-		select( STORE_NAME ).getIsEmailLookupCompleted()
+	const { isGuest, isEmailLookupCompleted } = useSelect(
+		( select ) => ( {
+			isGuest: select( STORE_NAME ).getIsGuest(),
+			isEmailLookupCompleted:
+				select( STORE_NAME ).getIsEmailLookupCompleted(),
+		} ),
+		[]
 	);
 
 	const loadPaymentComponent = useCallback( async () => {
@@ -54,11 +54,5 @@ export const Payment = ( { fastlaneSdk, card, onPaymentLoad } ) => {
 			</div>
 		);
 	}
-	return (
-		<Card
-			card={ card }
-			fastlaneSdk={ fastlaneSdk }
-			showWatermark={ ! isGuest }
-		/>
-	);
+	return <Card fastlaneSdk={ fastlaneSdk } showWatermark={ ! isGuest } />;
 };

modules/ppcp-axo-block/resources/js/events/emailLookupManager.js

@@ -6,7 +6,7 @@ import { setIsGuest, setIsEmailLookupCompleted } from '../stores/axoStore';
 export const createEmailLookupHandler = (
 	fastlaneSdk,
 	setShippingAddress,
-	setCard,
+	setCardDetails,
 	snapshotFields,
 	wooShippingAddress,
 	wooBillingAddress,
@@ -68,7 +68,7 @@ export const createEmailLookupHandler = (
 					setShippingAddress( profileData.shippingAddress );
 				}
 				if ( profileData && profileData.card ) {
-					setCard( profileData.card );
+					setCardDetails( profileData.card );
 				}
 
 				console.log( 'Profile Data:', profileData );

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

@@ -5,23 +5,22 @@ import usePayPalScript from './usePayPalScript';
 import { setupWatermark } from '../components/Watermark';
 import { setupEmailFunctionality } from '../components/EmailButton';
 import { createEmailLookupHandler } from '../events/emailLookupManager';
-import { usePhoneSyncHandler } from './usePhoneSyncHandler';
+import usePhoneSyncHandler from './usePhoneSyncHandler';
 import { initializeClassToggles } from '../helpers/classnamesManager';
 import { snapshotFields } from '../helpers/fieldHelpers';
 import useCustomerData from './useCustomerData';
 import useShippingAddressChange from './useShippingAddressChange';
+import useCardChange from './useCardChange';
 
-const useAxoSetup = (
-	ppcpConfig,
-	fastlaneSdk,
-	paymentComponent,
-	onChangeCardButtonClick,
-	setShippingAddress,
-	setCard
-) => {
-	const { setIsAxoActive, setIsAxoScriptLoaded } = useDispatch( STORE_NAME );
+const useAxoSetup = ( ppcpConfig, fastlaneSdk, paymentComponent ) => {
+	const {
+		setIsAxoActive,
+		setIsAxoScriptLoaded,
+		setShippingAddress,
+		setCardDetails,
+	} = useDispatch( STORE_NAME );
 	const paypalLoaded = usePayPalScript( ppcpConfig );
-
+	const onChangeCardButtonClick = useCardChange( fastlaneSdk );
 	const onChangeShippingAddressClick = useShippingAddressChange(
 		fastlaneSdk,
 		setShippingAddress
@@ -53,7 +52,7 @@ const useAxoSetup = (
 			const emailLookupHandler = createEmailLookupHandler(
 				fastlaneSdk,
 				setShippingAddress,
-				setCard,
+				setCardDetails,
 				snapshotFields,
 				wooShippingAddress,
 				wooBillingAddress,
@@ -76,7 +75,7 @@ const useAxoSetup = (
 		onChangeShippingAddressClick,
 		onChangeCardButtonClick,
 		setShippingAddress,
-		setCard,
+		setCardDetails,
 		paymentComponent,
 	] );
 

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

@@ -1,53 +1,73 @@
 import { useCallback } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
 import { useAddressEditing } from './useAddressEditing';
 import useCustomerData from './useCustomerData';
+import { STORE_NAME } from '../stores/axoStore';
 
-export const useCardChange = ( fastlaneSdk, setCard ) => {
+export const useCardChange = ( fastlaneSdk ) => {
 	const { setBillingAddressEditing } = useAddressEditing();
 	const { setBillingAddress: setWooBillingAddress } = useCustomerData();
+	const { setCardDetails, setShippingAddress } = useDispatch( STORE_NAME );
 
 	return useCallback( async () => {
 		if ( fastlaneSdk ) {
 			const { selectionChanged, selectedCard } =
 				await fastlaneSdk.profile.showCardSelector();
-			if ( selectionChanged ) {
-				setCard( selectedCard );
-				console.log( 'Selected card changed:', selectedCard );
-				console.log( 'Setting new billing details:', selectedCard );
+
+			if ( selectionChanged && selectedCard?.paymentSource?.card ) {
+				// Use the fallback logic for cardholder's name.
 				const { name, billingAddress } =
 					selectedCard.paymentSource.card;
 
-				// Split the full name into first and last name
-				const nameParts = name.split( ' ' );
-				const firstName = nameParts[ 0 ];
-				const lastName = nameParts.slice( 1 ).join( ' ' );
+				// If name is missing, use billing details as a fallback for the name.
+				let firstName = '';
+				let lastName = '';
+
+				if ( name ) {
+					const nameParts = name.split( ' ' );
+					firstName = nameParts[ 0 ];
+					lastName = nameParts.slice( 1 ).join( ' ' );
+				}
 
 				const newBillingAddress = {
 					first_name: firstName,
 					last_name: lastName,
-					address_1: billingAddress.addressLine1,
-					address_2: billingAddress.addressLine2 || '',
-					city: billingAddress.adminArea2,
-					state: billingAddress.adminArea1,
-					postcode: billingAddress.postalCode,
-					country: billingAddress.countryCode,
+					address_1: billingAddress?.addressLine1 || '',
+					address_2: billingAddress?.addressLine2 || '',
+					city: billingAddress?.adminArea2 || '',
+					state: billingAddress?.adminArea1 || '',
+					postcode: billingAddress?.postalCode || '',
+					country: billingAddress?.countryCode || '',
 				};
 
-				await new Promise( ( resolve ) => {
-					setWooBillingAddress( newBillingAddress );
-					resolve();
-				} );
-
-				await new Promise( ( resolve ) => {
-					setBillingAddressEditing( false );
-					resolve();
-				} );
+				// Batch state updates.
+				await Promise.all( [
+					new Promise( ( resolve ) => {
+						setCardDetails( selectedCard );
+						resolve();
+					} ),
+					new Promise( ( resolve ) => {
+						setWooBillingAddress( newBillingAddress );
+						resolve();
+					} ),
+					new Promise( ( resolve ) => {
+						setShippingAddress( newBillingAddress );
+						resolve();
+					} ),
+					new Promise( ( resolve ) => {
+						setBillingAddressEditing( false );
+						resolve();
+					} ),
+				] );
+			} else {
+				console.error( 'Selected card or billing address is missing.' );
 			}
 		}
 	}, [
 		fastlaneSdk,
-		setCard,
+		setCardDetails,
 		setWooBillingAddress,
+		setShippingAddress,
 		setBillingAddressEditing,
 	] );
 };

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

@@ -1,14 +1,23 @@
 import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { STORE_NAME } from '../stores/axoStore';
 
 const useHandlePaymentSetup = (
 	emitResponse,
-	card,
 	paymentComponent,
 	tokenizedCustomerData
 ) => {
+	const { cardDetails } = useSelect(
+		( select ) => ( {
+			shippingAddress: select( STORE_NAME ).getShippingAddress(),
+			cardDetails: select( STORE_NAME ).getCardDetails(),
+		} ),
+		[]
+	);
+
 	return useCallback( async () => {
-		const isRyanFlow = !! card?.id;
-		let cardToken = card?.id;
+		const isRyanFlow = !! cardDetails?.id;
+		let cardToken = cardDetails?.id;
 
 		if ( ! cardToken && paymentComponent ) {
 			cardToken = await paymentComponent
@@ -38,7 +47,13 @@ const useHandlePaymentSetup = (
 				},
 			},
 		};
-	}, [ card, paymentComponent, tokenizedCustomerData ] );
+	}, [
+		cardDetails?.id,
+		emitResponse.responseTypes.ERROR,
+		emitResponse.responseTypes.SUCCESS,
+		paymentComponent,
+		tokenizedCustomerData,
+	] );
 };
 
 export default useHandlePaymentSetup;

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

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react';
-import { useSelect } from '@wordpress/data';
+import { useEffect, useRef, useCallback } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { debounce } from '../../../../ppcp-blocks/resources/js/Helper/debounce';
+import { STORE_NAME } from '../stores/axoStore';
+import useCustomerData from './useCustomerData';
 
-const WOO_STORE_NAME = 'wc/store/cart';
 const PHONE_DEBOUNCE_DELAY = 250;
 
 /**
@@ -15,23 +16,9 @@ const PHONE_DEBOUNCE_DELAY = 250;
 const sanitizePhoneNumber = ( phoneNumber = '' ) => {
 	const localNumber = phoneNumber.replace( /^\+?[01]+/, '' );
 	const cleanNumber = localNumber.replace( /[^0-9]/g, '' );
-
 	return cleanNumber.length === 10 ? cleanNumber : '';
 };
 
-/**
- * Retrieves and sanitizes the phone number from WooCommerce customer data.
- *
- * @param {Function} select - The select function from @wordpress/data.
- * @return {string} The sanitized phone number.
- */
-const getSanitizedPhoneNumber = ( select ) => {
-	const data = select( WOO_STORE_NAME ).getCustomerData() || {};
-	const billingPhone = sanitizePhoneNumber( data.billingAddress?.phone );
-	const shippingPhone = sanitizePhoneNumber( data.shippingAddress?.phone );
-	return billingPhone || shippingPhone || '';
-};
-
 /**
  * Updates the prefilled phone number in the Fastlane CardField component.
  *
@@ -48,17 +35,38 @@ const updatePrefills = ( paymentComponent, phoneNumber ) => {
  *
  * @param {Object} paymentComponent - The CardField component from Fastlane.
  */
-export const usePhoneSyncHandler = ( paymentComponent ) => {
-	// Fetch and sanitize phone number from WooCommerce.
-	const phoneNumber = useSelect( ( select ) =>
-		getSanitizedPhoneNumber( select )
-	);
+const usePhoneSyncHandler = ( paymentComponent ) => {
+	const { setPhoneNumber } = useDispatch( STORE_NAME );
+
+	const { phoneNumber } = useSelect( ( select ) => ( {
+		phoneNumber: select( STORE_NAME ).getPhoneNumber(),
+	} ) );
+
+	const { shippingAddress, billingAddress } = useCustomerData();
 
 	// Create a debounced function that updates the prefilled phone-number.
 	const debouncedUpdatePhone = useRef(
 		debounce( updatePrefills, PHONE_DEBOUNCE_DELAY )
 	).current;
 
+	// Fetch and update the phone number from the billing or shipping address.
+	const fetchAndUpdatePhoneNumber = useCallback( () => {
+		const billingPhone = billingAddress?.phone || '';
+		const shippingPhone = shippingAddress?.phone || '';
+		const sanitizedPhoneNumber = sanitizePhoneNumber(
+			billingPhone || shippingPhone
+		);
+
+		if ( sanitizedPhoneNumber && sanitizedPhoneNumber !== phoneNumber ) {
+			setPhoneNumber( sanitizedPhoneNumber );
+		}
+	}, [ billingAddress, shippingAddress, phoneNumber, setPhoneNumber ] );
+
+	// Fetch and update the phone number from the billing or shipping address.
+	useEffect( () => {
+		fetchAndUpdatePhoneNumber();
+	}, [ fetchAndUpdatePhoneNumber ] );
+
 	// Invoke debounced function when paymentComponent or phoneNumber changes.
 	useEffect( () => {
 		if ( paymentComponent && phoneNumber ) {
@@ -75,3 +83,5 @@ export const usePhoneSyncHandler = ( paymentComponent ) => {
 		};
 	}, [ debouncedUpdatePhone ] );
 };
+
+export default usePhoneSyncHandler;

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

@@ -5,14 +5,13 @@ import { registerPaymentMethod } from '@woocommerce/blocks-registry';
 // Hooks
 import useFastlaneSdk from './hooks/useFastlaneSdk';
 import useTokenizeCustomerData from './hooks/useTokenizeCustomerData';
-import useCardChange from './hooks/useCardChange';
 import useAxoSetup from './hooks/useAxoSetup';
 import useAxoCleanup from './hooks/useAxoCleanup';
 import useHandlePaymentSetup from './hooks/useHandlePaymentSetup';
+import usePaymentSetupEffect from './hooks/usePaymentSetupEffect';
 
 // Components
 import { Payment } from './components/Payment/Payment';
-import usePaymentSetupEffect from './hooks/usePaymentSetupEffect';
 
 const gatewayHandle = 'ppcp-axo-gateway';
 const ppcpConfig = wc.wcSettings.getSetting( `${ gatewayHandle }_data` );
@@ -26,28 +25,17 @@ const axoConfig = window.wc_ppcp_axo;
 const Axo = ( props ) => {
 	const { eventRegistration, emitResponse } = props;
 	const { onPaymentSetup } = eventRegistration;
-	const [ shippingAddress, setShippingAddress ] = useState( null );
-	const [ card, setCard ] = useState( null );
 	const [ paymentComponent, setPaymentComponent ] = useState( null );
 
 	const fastlaneSdk = useFastlaneSdk( axoConfig, ppcpConfig );
 	const tokenizedCustomerData = useTokenizeCustomerData();
-	const onChangeCardButtonClick = useCardChange( fastlaneSdk, setCard );
 	const handlePaymentSetup = useHandlePaymentSetup(
 		emitResponse,
-		card,
 		paymentComponent,
 		tokenizedCustomerData
 	);
 
-	useAxoSetup(
-		ppcpConfig,
-		fastlaneSdk,
-		paymentComponent,
-		onChangeCardButtonClick,
-		setShippingAddress,
-		setCard
-	);
+	useAxoSetup( ppcpConfig, fastlaneSdk, paymentComponent );
 
 	const { handlePaymentLoad } = usePaymentSetupEffect(
 		onPaymentSetup,
@@ -57,24 +45,10 @@ const Axo = ( props ) => {
 
 	useAxoCleanup();
 
-	const handleCardChange = ( selectedCard ) => {
-		console.log( 'Card selection changed', selectedCard );
-		setCard( selectedCard );
-	};
-
-	console.log( 'Rendering Axo component', {
-		fastlaneSdk,
-		card,
-		shippingAddress,
-	} );
-
 	return fastlaneSdk ? (
 		<Payment
 			fastlaneSdk={ fastlaneSdk }
-			card={ card }
-			onChange={ handleCardChange }
 			onPaymentLoad={ handlePaymentLoad }
-			onChangeButtonClick={ onChangeCardButtonClick }
 		/>
 	) : (
 		<>{ __( 'Loading Fastlane…', 'woocommerce-paypal-payments' ) }</>

modules/ppcp-axo-block/resources/js/stores/axoStore.js

@@ -1,5 +1,3 @@
-// File: axoStore.js
-
 import { createReduxStore, register, dispatch } from '@wordpress/data';
 
 export const STORE_NAME = 'woocommerce-paypal-payments/axo-block';
@@ -11,6 +9,9 @@ const DEFAULT_STATE = {
 	isAxoScriptLoaded: false,
 	isEmailSubmitted: false,
 	isEmailLookupCompleted: false,
+	shippingAddress: null,
+	cardDetails: null,
+	phoneNumber: '',
 };
 
 // Actions
@@ -35,6 +36,18 @@ const actions = {
 		type: 'SET_IS_EMAIL_LOOKUP_COMPLETED',
 		payload: isEmailLookupCompleted,
 	} ),
+	setShippingAddress: ( shippingAddress ) => ( {
+		type: 'SET_SHIPPING_ADDRESS',
+		payload: shippingAddress,
+	} ),
+	setCardDetails: ( cardDetails ) => ( {
+		type: 'SET_CARD_DETAILS',
+		payload: cardDetails,
+	} ),
+	setPhoneNumber: ( phoneNumber ) => ( {
+		type: 'SET_PHONE_NUMBER',
+		payload: phoneNumber,
+	} ),
 };
 
 // Reducer
@@ -50,6 +63,12 @@ const reducer = ( state = DEFAULT_STATE, action ) => {
 			return { ...state, isEmailSubmitted: action.payload };
 		case 'SET_IS_EMAIL_LOOKUP_COMPLETED':
 			return { ...state, isEmailLookupCompleted: action.payload };
+		case 'SET_SHIPPING_ADDRESS':
+			return { ...state, shippingAddress: action.payload };
+		case 'SET_CARD_DETAILS':
+			return { ...state, cardDetails: action.payload };
+		case 'SET_PHONE_NUMBER':
+			return { ...state, phoneNumber: action.payload };
 		default:
 			return state;
 	}
@@ -62,6 +81,9 @@ const selectors = {
 	getIsAxoScriptLoaded: ( state ) => state.isAxoScriptLoaded,
 	getIsEmailSubmitted: ( state ) => state.isEmailSubmitted,
 	getIsEmailLookupCompleted: ( state ) => state.isEmailLookupCompleted,
+	getShippingAddress: ( state ) => state.shippingAddress,
+	getCardDetails: ( state ) => state.cardDetails,
+	getPhoneNumber: ( state ) => state.phoneNumber,
 };
 
 // Create and register the store
@@ -73,20 +95,23 @@ const store = createReduxStore( STORE_NAME, {
 
 register( store );
 
+// Action dispatchers
 export const setIsGuest = ( isGuest ) => {
-	try {
-		dispatch( STORE_NAME ).setIsGuest( isGuest );
-	} catch ( error ) {
-		console.error( 'Error updating isGuest state:', error );
-	}
+	dispatch( STORE_NAME ).setIsGuest( isGuest );
 };
 
 export const setIsEmailLookupCompleted = ( isEmailLookupCompleted ) => {
-	try {
-		dispatch( STORE_NAME ).setIsEmailLookupCompleted(
-			isEmailLookupCompleted
-		);
-	} catch ( error ) {
-		console.error( 'Error updating isEmailLookupCompleted state:', error );
-	}
+	dispatch( STORE_NAME ).setIsEmailLookupCompleted( isEmailLookupCompleted );
+};
+
+export const setShippingAddress = ( shippingAddress ) => {
+	dispatch( STORE_NAME ).setShippingAddress( shippingAddress );
+};
+
+export const setCardDetails = ( cardDetails ) => {
+	dispatch( STORE_NAME ).setCardDetails( cardDetails );
+};
+
+export const setPhoneNumber = ( phoneNumber ) => {
+	dispatch( STORE_NAME ).setPhoneNumber( phoneNumber );
 };