Sync phone changes with WooPay phone field

changelog/fix-sync-woopay-phone-field

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Sync phone changes with WooPay phone field.

client/components/woopay/save-user/checkout-page-save-user.js

@@ -13,6 +13,7 @@ import {
 import {
 	VALIDATION_STORE_KEY,
 	CHECKOUT_STORE_KEY,
+	CART_STORE_KEY,
 } from '@woocommerce/block-data'; // eslint-disable-line import/no-unresolved
 
 /**
@@ -47,6 +48,16 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		select( CHECKOUT_STORE_KEY ).isProcessing()
 	);
 
+	const { billingAddressPhone, isCustomerDataUpdating } = useSelect(
+		( select ) => {
+			const store = select( CART_STORE_KEY );
+			return {
+				billingAddressPhone: store.getCartData()?.billingAddress?.phone,
+				isCustomerDataUpdating: store.isCustomerDataUpdating(),
+			};
+		}
+	);
+
 	const isRegisteredUser = useWooPayUser();
 	const { isWCPayChosen, isNewPaymentTokenChosen } = useSelectedPaymentMethod(
 		isBlocksCheckout
@@ -86,21 +97,25 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		rememberMe.removeAttribute( 'disabled', 'disabled' );
 	}, [ checkoutIsProcessing, isBlocksCheckout ] );
 
-	const getPhoneFieldValue = useCallback( () => {
-		let phoneFieldValue = '';
+	const getPhoneField = useCallback( () => {
+		let phoneField = null;
 		if ( isBlocksCheckout ) {
-			phoneFieldValue =
-				document.getElementById( 'phone' )?.value ||
-				document.getElementById( 'shipping-phone' )?.value ||
+			phoneField =
+				document.getElementById( 'phone' ) ||
+				document.getElementById( 'shipping-phone' ) ||
 				// in case of virtual products, the shipping phone is not available. So we also need to check the billing phone.
-				document.getElementById( 'billing-phone' )?.value ||
-				'';
+				document.getElementById( 'billing-phone' );
 		} else {
 			// for classic checkout.
-			phoneFieldValue =
-				document.getElementById( 'billing_phone' )?.value || '';
+			phoneField = document.getElementById( 'billing_phone' );
 		}
 
+		return phoneField;
+	}, [ isBlocksCheckout ] );
+
+	const getPhoneFieldValue = useCallback( () => {
+		let phoneFieldValue = getPhoneField()?.value || '';
+
 		// Take out any non-digit characters, except +.
 		phoneFieldValue = phoneFieldValue.replace( /[^\d+]*/g, '' );
 
@@ -109,7 +124,7 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		}
 
 		return phoneFieldValue;
-	}, [ isBlocksCheckout ] );
+	}, [ getPhoneField ] );
 
 	const sendExtensionData = useCallback(
 		( shouldClearData = false ) => {
@@ -222,6 +237,20 @@ const CheckoutPageSaveUser = ( { isBlocksCheckout } ) => {
 		setPhoneNumber( getPhoneFieldValue() );
 	}, [ getPhoneFieldValue, isWCPayWithNewTokenChosen ] );
 
+	// Update the phone number when the billing phone is updated.
+	useEffect( () => {
+		if ( isCustomerDataUpdating ) {
+			setTimeout( () => {
+				setPhoneNumber( getPhoneFieldValue() );
+			}, 0 );
+		}
+	}, [
+		billingAddressPhone,
+		setPhoneNumber,
+		getPhoneFieldValue,
+		isCustomerDataUpdating,
+	] );
+
 	if (
 		! getConfig( 'forceNetworkSavedCards' ) ||
 		! isWCPayWithNewTokenChosen ||

client/settings/phone-input/index.tsx

@@ -99,6 +99,7 @@ const PhoneNumberInput = ( {
 				hiddenInput: 'full',
 				utilsScript: utils,
 				dropdownContainer: document.body,
+				formatOnDisplay: false,
 				...phoneCountries,
 			} );
 			setInputInstance( iti );
@@ -149,6 +150,7 @@ const PhoneNumberInput = ( {
 			inputRef.current &&
 			( focusLost || inputInstance.getNumber() )
 		) {
+			inputInstance.setNumber( value );
 			onValidationChange( inputInstance.isValidNumber() );
 		}
 	}, [ value, inputInstance, inputRef, onValidationChange, focusLost ] );