diff --git a/changelog/fix-sync-woopay-phone-field b/changelog/fix-sync-woopay-phone-field new file mode 100644 index 00000000000..db97da0c6b2 --- /dev/null +++ b/changelog/fix-sync-woopay-phone-field @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Sync phone changes with WooPay phone field. diff --git a/client/components/woopay/save-user/checkout-page-save-user.js b/client/components/woopay/save-user/checkout-page-save-user.js index 69cde030454..e753f5c67f3 100644 --- a/client/components/woopay/save-user/checkout-page-save-user.js +++ b/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 || diff --git a/client/settings/phone-input/index.tsx b/client/settings/phone-input/index.tsx index 048e0ac27e0..4697d3ece62 100644 --- a/client/settings/phone-input/index.tsx +++ b/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 ] );