[HOLD for payment 2024-04-15] [$500] BA - On the phone number page, user can not enter data as the placeholder shows

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v1.4.47-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): applausetester+vd_web030424@applause.expensifail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause-Internal Team

Action Performed:

Pre-requisite: user must be logged in and have created a workspace.

1. Go to Workspace > Bank account.
2. Initiate the add BA flow with the testing credentials.
3. On Company information section, reach the Phone number page.
4. Verify the placeholder is displayed as "(xxx)xxx-xxxx".
5. Enter a random US number in that same format, like "(440)458-9784".
6. Click on "Next".
7. Verify an error appears.

Expected Result:

The user should be able to enter the phone number as the placeholder shows.

Actual Result:

The user can not enter the phone number as the placeholder shows.

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6402382_1709617407384.bandicam_2024-03-04_23-44-34-559.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f2cb151e80502fdb
• Upwork Job ID: 1765154798992896000
• Last Price Increase: 2024-03-05

Issue Owner

Current Issue Owner: @mallenexpensify

[melvin-bot]

Triggered auto assignment to @mallenexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[izarutskaya]

@mallenexpensify I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[tienifr]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The user can not enter the phone number as the placeholder shows.

What is the root cause of that problem?

We already have the logic to check the phone number is valid or not in here

but it's not really correct since it can cause some confused cases: #34766

so we added the additional logic to check phone number in

App/src/libs/ValidationUtils.ts

Line 287 in ffa731a

if (regionCode && !Str.isValidPhone(phone)) {

but isValidPhone just use the simple e164 regex

https://github.com/Expensify/expensify-common/blob/77d0b150ba6bfbe7a64b3c3e30b65592b2e58c4a/lib/CONST.jsx#L571-L572

and that doesn't cover other format like (440)458-9784

What changes do you think we should make in order to solve the problem?

• We shouldn't update isValidPhone logic since it's used in many places in the App, instead of that we should change its name to isValidE164Phone then replace it in all places

• Create other function isValidPhone to handle all possible phone number

Here's the possible format:

significant: 4404589784
international: +1 440-458-9784
e164: +14404589784
national: (440) 458-978
123.456.7890

so we can use the following regex:

const phoneNumberRegex = /(\+\d{1,2}\s?)?(\(\d{3}\)|\d{3})[\s.-]?\d{3}[\s.-]?\d{4}/;

What alternative solutions did you explore? (Optional)

NA

[dragnoir]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Phone number in the format (440)458-9784 is marked as invalid

What is the root cause of that problem?

Issue is within the function isValidUSPhone
https://github.com/Expensify/App/blob/578769197ddd4039f46b949d83a7e85ad2476abc/src/libs/ValidationUtils.ts#L281C10-L293

When the input is in phormat like: (440)458-9784
The condition below:

App/src/libs/ValidationUtils.ts

Lines 287 to 289 in 5787691

	if (regionCode && !Str.isValidPhone(phone)) {
	return false;
	}

will turn:
regionCode: US and !Str.isValidPhone(phone): true
Then the execution will exit without approving the phone number

What changes do you think we should make in order to solve the problem?

We need to fix this condition

App/src/libs/ValidationUtils.ts

Lines 285 to 289 in 5787691

	// When we pass regionCode as an option to parsePhoneNumber it wrongly assumes inputs like '=15123456789' as valid
	// so we need to check if it is a valid phone.
	if (regionCode && !Str.isValidPhone(phone)) {
	return false;
	}

It's built to fix an issue as mentioned in the comment:

// When we pass regionCode as an option to parsePhoneNumber it wrongly assumes inputs like '=15123456789' as valid

Currently we use Str.isValidPhone(phone) to check if the input is a valid phone number. isValidPhone is a function from expensify-common. We can replace it with another function we create to check all possible format and return a true for valid US phone numbers.

What alternative solutions did you explore? (Optional)

We can fix the function isValidPhone from expensify-common to consider the format (xxx)xxx-xxxx as a valid phone number
https://github.com/Expensify/expensify-common/blob/77d0b150ba6bfbe7a64b3c3e30b65592b2e58c4a/lib/str.js#L934-L936

[allgandalf]

I think this should be closed, as seen in the video, we don't enter space as specified in the placeholder and hence we face error as the regex doesn't match

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01f2cb151e80502fdb