[$250] Card - 10 digit phone number isn't accepted when the member adds shipping details

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.44-8
Reproducible in staging?: Y
Reproducible in production?: Y
Issue was found when executing this PR: #49452
Issue reported by: Applause Internal Team

Action Performed:

1. Admin: Navigate to https://staging.new.expensify.com/
2. Admin: Log in with a new Expensifail account
3. Admin: Create a workspace
4. Admin: Navigate to Workspace settings - More features
5. Admin: Enable "Expensify Card"
6. Admin: Navigate to Workspace settings - Members
7. Admin: Invite a Gmail address that doesn't have an account yet
8. Admin: Navigate to Workspace settings - Expensify Card
9. Admin: Click on the "Issue new card" button
10. Admin: Add bank account details and finish the BA flow with Plaid Regions bank
11. Admin: Click on the "Issue new card" button
12. Admin: Select the new member
13. Admin: Select "Physical card
14. Admin: Add the card with any limit type, limit and name
15. Admin: Navigate to the workspace chat with the member
16. Member: Log in as a member added in step 7
17. Member: Navigate to the workspace chat
18. Member: Click on the "Add shipping details" button
19. Member: Set any name and click on the "Next" button
20. Member: Set any DOB and click on the "Next" button
21. Member: Set any address and click on the "Next" button
22. Member: Input "8005555555" as the phone number and click on the "Next" buttons

Expected Result:

10 digit phone number should be accepted.

Actual Result:

10 digit phone number isn't accepted when the member adds shipping details. Only 8 digits are accepted.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6624081_1728026724870.b.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021843278716830129573
• Upwork Job ID: 1843278716830129573
• Last Price Increase: 2024-10-14

Issue Owner

Current Issue Owner: @rayane-djouah

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@lschurr FYI 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

[twilight2294]

Edited by proposal-police: This proposal was edited at 2024-10-06 19:06:35 UTC.

Proposal

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

10 digit phone number isn't accepted when the member adds shipping details.

What is the root cause of that problem?

The validation functions we use to check phone number is wrong, this gives us the error on the frontend

App/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx

Lines 39 to 41 in 99f280b

	const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
	if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumber.slice(0))) {
	errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');

The above validation will give errors for 10 digit numbers.

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

We should use the validation logic we have on the loginIn page:

App/src/pages/signin/LoginForm/BaseLoginForm.tsx

Lines 77 to 82 in 99f280b

	const phoneLogin = LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(loginTrim));
	const parsedPhoneNumber = parsePhoneNumber(phoneLogin);
	if (!Str.isValidEmail(loginTrim) && !parsedPhoneNumber.possible) {
	if (ValidationUtils.isNumericWithSpecialChars(loginTrim)) {
	setFormError('common.error.phoneNumber');

We should use the same logic for the add shipping details RHP too, this way we make sure that we are validating against the correct value and using the current functions to validate. If the same bug exists at other places we should fix them too

 
const phoneLogin = LoginUtils.appendCountryCode(LoginUtils.getPhoneNumberWithoutSpecialChars(values[INPUT_IDS.PHONE_NUMBER]));
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
if (!parsedPhoneNumber.possible) {

                   errors[INPUT_IDS.PHONE_NUMBER] = translate('bankAccount.error.phoneNumber');

NOTE:
@rayane-djouah the flow for shipping details will only be used when we have added a bank account so, the check is valid and correct for this use case

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rayane-djouah (External)

[twilight2294]

@rayane-djouah my proposal is here above

[mkzie2]

Proposal

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

10 digit phone number isn't accepted when the member adds shipping details. Only 8 digits are accepted.

What is the root cause of that problem?

On the sign-in page, countryCodeByIP is the US country code by default. Therefore, this phone number on the login page is valid.

App/src/libs/LoginUtils.ts

Lines 8 to 12 in 7947b8e

	Onyx.connect({
	key: ONYXKEYS.COUNTRY_CODE,
	callback: (val) => (countryCodeByIP = val ?? 1),
	});

After the user is logged in, if the user is not in USA, the countryCodeByIP isn't 1 which leads parsedPhoneNumber.possible is false because the phoneNumber appends the wrong country code

App/src/libs/LoginUtils.ts

Line 23 in 7947b8e

function appendCountryCode(phone: string): string {

App/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx

Lines 39 to 40 in 7947b8e

	const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
	if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumber.slice(0))) {

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

In the other place of phone number input in bank account flow, we use isValidUSPhone to check whether the phone number is valid or not like here, here. So I think we also can do this here

if (!values[INPUT_IDS.PHONE_NUMBER] || !ValidationUtils.isValidUSPhone(values[INPUT_IDS.PHONE_NUMBER], true)) {
    errors.phoneNumber = translate('bankAccount.error.phoneNumber');
}

App/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx

Lines 39 to 40 in 7947b8e

	const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumber);
	if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumber.slice(0))) {

OPTIONAL: We also can limit the US address in the address step by adding isLimitedToUSA prop here

What alternative solutions did you explore? (Optional)

[lschurr]

@rayane-djouah could you review the proposals here? Thanks!

[rayane-djouah]

Reviewing 👀

[rayane-djouah]

@lschurr @IuliiaHerets I don't believe this is a bug. The app automatically appends the country code to the phone number based on the user's IP address during validation. If the user is not in the USA, the corresponding country code for their location will be added to the number 8005555555 and then validated. For users in the USA, using 8005555555 does not give an error. To use a USA phone number from outside the US, the user needs to add +1 before the number; thus, +18005555555 should work without any errors.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[rayane-djouah]

@lschurr I think we can close this issue

[melvin-bot]

@lschurr, @rayane-djouah Whoops! This issue is 2 days overdue. Let's get this updated quick!