✨ Update prefill-value on phone number change

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

@@ -32,6 +32,17 @@ const getSanitizedPhoneNumber = ( select ) => {
 	return billingPhone || shippingPhone || '';
 };
 
+/**
+ * Updates the prefilled phone number in the Fastlane CardField component.
+ *
+ * @param {Object} paymentComponent - The CardField component from Fastlane
+ * @param {string} phoneNumber      - The new phone number to prefill.
+ */
+const updatePrefills = ( paymentComponent, phoneNumber ) => {
+	console.log( 'Update the phone prefill value', phoneNumber );
+	paymentComponent.updatePrefills( { phoneNumber } );
+};
+
 /**
  * Custom hook to synchronize the WooCommerce phone number with a React component state.
  *
@@ -44,29 +55,25 @@ export const usePhoneSyncHandler = ( paymentComponent, setWooPhone ) => {
 		getSanitizedPhoneNumber( select )
 	);
 
-	// Initialize debounced setter for Fastlane.
+	// Create a debounced function that updates the prefilled phone-number.
-	const debouncedSetWooPhoneRef = useRef();
+	const debouncedUpdatePhone = useRef(
-
+		debounce( ( number, component ) => {
-	if ( ! debouncedSetWooPhoneRef.current ) {
-		debouncedSetWooPhoneRef.current = debounce( ( number ) => {
 			setWooPhone( number );
-		}, PHONE_DEBOUNCE_DELAY );
+			updatePrefills( component, number );
-	}
+		}, PHONE_DEBOUNCE_DELAY )
+	).current;
 
-	// Invoke debounced setter when phone number changes.
+	// Invoke debounced function when paymentComponent or phoneNumber changes.
 	useEffect( () => {
-		if ( phoneNumber ) {
+		if ( paymentComponent && phoneNumber ) {
-			console.log( 'New phone number:', phoneNumber );
+			debouncedUpdatePhone( phoneNumber, paymentComponent );
-			debouncedSetWooPhoneRef.current( phoneNumber );
 		}
-	}, [ phoneNumber ] );
+	}, [ debouncedUpdatePhone, paymentComponent, phoneNumber ] );
 
 	// Cleanup on unmount, canceling any pending debounced calls.
 	useEffect( () => {
 		return () => {
-			if ( debouncedSetWooPhoneRef.current?.cancel ) {
+			debouncedUpdatePhone.cancel();
-				debouncedSetWooPhoneRef.current.cancel();
-			}
 		};
-	}, [] );
+	}, [ debouncedUpdatePhone ] );
 };