[$75] Web - Expensify Card - Inconsistent behavior of phone number validation for shipping details

[IuliiaHerets]

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: 9.0.53-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): nathanmulugetatesting+1943@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

Pre-conditions:

• Workspace is connected with a bank account
• Workspace has a member invited
• Workspace has enabled Expensify card

1. Issue a physical card for the member
2. Sign in as the member
3. Go to the workspace chat and click on add shipping detail page
4. Go through the flow until phone number input page
5. Input this: 8005555555 phone number and click enter
6. Observe the behavior of the error when 1 is prepended
7. Go to settings > Wallet > click on the assigned card under the Assigned cards section
8. Go through the flow until you get to the phone number input page
9. Input 8005555555 and click enter
10. Observe the behavior of the error when you prepend 1
11. Prepend "+" again and observe the behavior of the error

Expected Result:

The phone number validation works the same on both pages

Actual Result:

The phone number validation works inconsistently, when going through the form from the workspace chat page prepending "1" only works fine but when going through the form from the wallet page user has to additionally prepend "+" before "1" in order for the phone number to be accepted.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6643815_1729722869946.bandicam_2024-10-24_01-24-08-489.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021850956027322769046
• Upwork Job ID: 1850956027322769046
• Last Price Increase: 2025-02-17
• Automatic offers:
• NJ-2020 | Contributor | 104756183

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot]

Triggered auto assignment to @garrettmknight (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-collect - Release 2

[IuliiaHerets]

@garrettmknight 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

[NJ-2020]

Proposal

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

Web - Expensify Card - Inconsistent behavior of phone number validation for shipping details

What is the root cause of that problem?

When we fill the phone number inside the shipping details, we check if the user adds country code then we'll return the current phone number else we will add from the IP

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

Lines 38 to 42 in 9508b17

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

But inside the wallet page we only check if the user have not yet add the country code, we will return an error

App/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx

Lines 44 to 45 in 9508b17

	if (!LoginUtils.validateNumber(phoneNumberToValidate)) {
	errors.phoneNumber = translate('common.error.phoneNumber');

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

We can do the same way like we do inside shipping details, we will check if the user has not yet add the country code then we will the country code form the IP else return the current phone number

const onValidate = (values: OnyxEntry<GetPhysicalCardForm>): OnValidateResult => {
    const {phoneNumber: phoneNumberToValidate = ''} = values ?? {};

    const errors: OnValidateResult = {};
    if (!ValidationUtils.isRequiredFulfilled(phoneNumberToValidate)) {
        errors.phoneNumber = translate('common.error.fieldRequired');
    }

    const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(phoneNumberToValidate);
    const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);

    if (!parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
        errors.phoneNumber = translate('bankAccount.error.phoneNumber');
    }

    return errors;
};

And we also need to fix the getCurrentRoute function inside GetPhysicalCardUtils, because it will redirect to the phone number page if it's invalid phone number

App/src/libs/GetPhysicalCardUtils.ts

Lines 18 to 20 in 9508b17

	if (!phoneNumber || !LoginUtils.validateNumber(phoneNumber)) {
	return ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_PHONE.getRoute(domain);
	}

to:

const phoneNumberWithCountryCode = LoginUtils.appendCountryCode(phoneNumber ?? '');
const parsedPhoneNumber = PhoneNumberUtils.parsePhoneNumber(phoneNumberWithCountryCode);

if (!phoneNumber || !parsedPhoneNumber.possible || !Str.isValidE164Phone(phoneNumberWithCountryCode.slice(0))) {
    return ROUTES.SETTINGS_WALLET_CARD_GET_PHYSICAL_PHONE.getRoute(domain);
}

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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