woocommerce-paypal-payments/modules/ppcp-axo-block/resources/js/hooks/useCardChange.js

import { useCallback } from '@wordpress/element';
import { useDispatch } from '@wordpress/data';
import { log } from '../../../../ppcp-axo/resources/js/Helper/Debug';
import { useAddressEditing } from './useAddressEditing';
import useCustomerData from './useCustomerData';
import { STORE_NAME } from '../stores/axoStore';

/**
 * Custom hook to handle the 'Choose a different card' selection.
 *
 * @param {Object} fastlaneSdk - The Fastlane SDK instance.
 * @return {Function} Callback function to trigger card selection and update related data.
 */
export const useCardChange = ( fastlaneSdk ) => {
	const { setBillingAddressEditing } = useAddressEditing();
	const { setBillingAddress: setWooBillingAddress } = useCustomerData();
	const { setCardDetails } = useDispatch( STORE_NAME );

	return useCallback( async () => {
		if ( fastlaneSdk ) {
			// Show card selector and get the user's selection
			const { selectionChanged, selectedCard } =
				await fastlaneSdk.profile.showCardSelector();

			if ( selectionChanged && selectedCard?.paymentSource?.card ) {
				// Extract cardholder and billing information from the selected card
				const { name, billingAddress } =
					selectedCard.paymentSource.card;

				// Parse cardholder's name, using billing details as a fallback if missing
				let firstName = '';
				let lastName = '';

				if ( name ) {
					const nameParts = name.split( ' ' );
					firstName = nameParts[ 0 ];
					lastName = nameParts.slice( 1 ).join( ' ' );
				}

				// Transform the billing address into WooCommerce format
				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 || '',
				};

				// Batch update states
				await Promise.all( [
					// Update the selected card details in the custom store
					new Promise( ( resolve ) => {
						setCardDetails( selectedCard );
						resolve();
					} ),
					// Update the WooCommerce billing address in the WooCommerce store
					new Promise( ( resolve ) => {
						setWooBillingAddress( newBillingAddress );
						resolve();
					} ),
					// Trigger the Address Card view by setting the billing address editing state to false
					new Promise( ( resolve ) => {
						setBillingAddressEditing( false );
						resolve();
					} ),
				] );
			} else {
				log( 'Selected card or billing address is missing.', 'error' );
			}
		}
	}, [
		fastlaneSdk,
		setCardDetails,
		setWooBillingAddress,
		setBillingAddressEditing,
	] );
};

export default useCardChange;