Only check for valid phone number in the deposit bank account flow by mountiny · Pull Request #97801 · Expensify/App

mountiny · 2026-08-04T15:09:12Z

Explanation of Change

The phone number step in the deposit bank account flow validated the number twice. It ran isValidPhoneNumber() on the number with the country code appended, and it also ran isValidNANPPhone() on the E.164 formatted number.

isValidNANPPhone() only accepted numbers that parse to a North American Numbering Plan region: US, PR, GU, VI, AS, MP, and CA. This is the international deposit account flow, so the account holder can live anywhere. A user with a valid number such as +44 20 7123 4567 saw Please enter a valid phone number and could not finish the step.

This PR keeps isValidPhoneNumber() as the only phone check in the step. It uses libphonenumber's possible check, so it accepts a valid number from any country and still rejects malformed input.

isValidNANPPhone() is removed from ValidationUtils because this step was its only caller. The genuinely US only callers, in the EnablePayments wallet flows and the USD ReimbursementAccount flow, use isValidUSPhone() and are unchanged.

Widening the step exposed a second bug in the update flow, which renders the same step. UpdatePersonalBankAccountPage normalized the phone with parsePhoneNumber().number.significant, which strips the calling code. That was harmless while the step guaranteed +1, because significant then yields exactly the 10 NANP digits. Once any country is accepted, +442071234567 becomes 2071234567 and the backend reads it as a NANP number. The add flow already sent E.164, so the two flows disagreed on the format of the same companyPhone field.

Both flows now send E.164 through the shared formatE164PhoneNumber() helper. The helper appends the country code first, which matters because the form draft holds whatever the user typed and that can have no calling code.

Changed files:

src/pages/AddPersonalBankAccountPage/substeps/PhoneNumberStep.tsx — drop the isValidNANPPhone() check and the E.164 formatting it needed.
src/pages/settings/Wallet/UpdatePersonalBankAccountPage.tsx — send E.164 instead of the national significant number, matching the add flow.
src/libs/ValidationUtils.ts — remove isValidNANPPhone() and its export.
tests/unit/ValidationUtilsTest.ts — replace the isValidNANPPhone describe block with an isValidPhoneNumber block covering US, CA, GB, and AU numbers plus malformed input.
tests/unit/LoginUtilsTest.ts — add a formatE164PhoneNumber describe block.

Fixed Issues

$ #97806
PROPOSAL:

Tests

Log in to any account.
Go to Account > Wallet.
Tap Add bank account > Make payments
Continue to the phone number step.
Enter a UK phone number, +44 20 7123 4567.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter a US phone number, +1 201 867 5309.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter a Canadian phone number, +1 416 555 1234.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter an invalid number, 123.
Verify that the field shows Please enter a valid phone number and the step does not continue.
Go back to the phone number step.
Enter letters, abcdefg.
Verify that the field shows Please enter a valid phone number and the step does not continue.
Complete the rest of the flow and verify that the bank account is added.
Reopen the flow and verify that the saved phone number is shown in E.164 format.
Go to Account > Wallet and tap a personal bank account that is missing information, to enter the update flow.
Continue to the phone number step.
Enter a UK phone number, +44 20 7123 4567, and finish the flow.
Open the network tab, find the UpdatePersonalBankAccountInfo request, and verify that companyPhone is +442071234567 and not 2071234567.
Repeat steps 21 to 23 with a US phone number, 201 867 5309, and verify that companyPhone is +12018675309.
Run npm run test -- tests/unit/ValidationUtilsTest.ts tests/unit/LoginUtilsTest.ts and verify that both suites pass.

Verify that no errors appear in the JS console

Offline tests

Turn off the network connection.
Go to Account > Wallet > Add bank account > Get reimbursed.
Continue to the phone number step.
Enter a UK phone number, +44 20 7123 4567.
Verify that no error appears and the step continues, because the validation runs on the client and needs no network call.
Enter an invalid number, 123.
Verify that the field still shows Please enter a valid phone number.
Turn the network connection back on.
Verify that the step keeps the value entered while offline and the flow continues.

QA Steps

Log in to any account.
Go to Account > Wallet.
Tap Add bank account > Make payments
Continue to the phone number step.
Enter a UK phone number, +44 20 7123 4567.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter an Australian phone number, +61 2 5550 1234.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter a US phone number, +1 201 867 5309.
Verify that no error appears and the step continues to the next page.
Go back to the phone number step.
Enter an invalid number, 123.
Verify that the field shows Please enter a valid phone number and the step does not continue.
Complete the flow with a valid phone number.
Verify that the bank account is added and the phone number is saved.
Go to Account > Wallet and tap a personal bank account that is missing information, to enter the update flow.
Continue to the phone number step.
Enter a UK phone number, +44 20 7123 4567, and finish the flow.
Verify that the bank account updates without an error and the saved phone number still starts with +44.
Repeat steps 18 to 20 with a US phone number, 201 867 5309.
Verify that the bank account updates without an error and the saved phone number starts with +1.

Verify that no errors appear in the JS console