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

IuliiaHerets commented 1 day ago

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

Issue a physical card for the member
Sign in as the member
Go to the workspace chat and click on add shipping detail page
Go through the flow until phone number input page
Input this: 8005555555 phone number and click enter
Observe the behavior of the error when 1 is prepended
Go to settings > Wallet > click on the assigned card under the Assigned cards section
Go through the flow until you get to the phone number input page
Input 8005555555 and click enter
Observe the behavior of the error when you prepend 1
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
[x] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/c567cbf0-0c41-4fd3-8c8d-74c3377424c6

View all open jobs on GitHub

melvin-bot[bot] commented 1 day ago

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 commented 1 day ago

We think that this bug might be related to #wave-collect - Release 2

IuliiaHerets commented 1 day ago

@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 commented 1 day ago

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 https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/pages/MissingPersonalDetails/substeps/PhoneNumber.tsx#L38-L42 But inside the wallet page we only check if the user have not yet add the country code, we will return an error https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/pages/settings/Wallet/Card/GetPhysicalCardPhone.tsx#L44-L45

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 https://github.com/Expensify/App/blob/9508b1740083716708c3e6dd4cbfaf90254e7a98/src/libs/GetPhysicalCardUtils.ts#L18-L20 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);
}

Expensify / App