[$125] Error message displayed when adding a UK zip code to a GBP payment card

[m-natarajan]

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.63-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @muttmuure
Slack conversation (hyperlinked to channel name): ts_external_expensify_bugs

Action Performed:

1. Go to Settings
2. Go to Subscriptions
3. Click Add a payment card
4. Change the currency to GBP
5. Add a Zip Code

Expected Result:

A UK post code is accepted

Actual Result:

The Zip Code field shows an error.

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857542773027117579
• Upwork Job ID: 1857542773027117579
• Last Price Increase: 2024-11-15

Issue Owner

Current Issue Owner: @getusha

[melvin-bot]

Triggered auto assignment to @sakluger (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.

[daledah]

Proposal

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

Adding a UK zip code to a GBP payment card errors out incorrectly

What is the root cause of that problem?

We only check valid zip code and not check valid us post code

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 168 to 170 in 1b9e302

	if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
	errors.addressZipCode = translate(label.error.addressZipCode);
	}

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

1. Create a new utils function isValidUKPostalCode

UK_POST_CODE: /^(GIR 0AA|[A-Z]{1,2}\d{1,2} ?\d[A-Z]{2}|[A-Z]{1,2}\d[A-Z] ?\d[A-Z]{2})$/i,
function isValidUKPostalCode(postalCode: string): boolean {
    return CONST.REGEX.UK_POST_CODE.test(postalCode);
}

2. Update validate function to use isValidUKPostalCode here

        if (data?.currency === CONST.PAYMENT_CARD_CURRENCY.GBP) {
            if(values.addressZipCode && !ValidationUtils.isValidUKPostalCode(values.addressZipCode))
            errors.addressZipCode = translate(label.error.addressZipCode);
        } else {
            if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
                errors.addressZipCode = translate(label.error.addressZipCode);
            }
        }

Notes: we should add isValidUKPostalCode to other places where we validate zip code

What alternative solutions did you explore? (Optional)

Simply we only need to update isValidZipCode to use UK_POST_CODE regex

[sakluger]

This seems like a pretty easy change. I'm going to set the initial price at $125.

If this needs to be done for several countries, and each one requires specific treatment, then we can consider a higher price, but it doesn't seem like that's necessary for now.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Upwork job price has been updated to $125

[ikevin127]

Proposal

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

Error message displayed when adding a UK zip code to a GBP payment card.

What is the root cause of that problem?

The current PaymentCardForm.tsx component's validate function, specifically the Zip Code validation logic is the root cause of our issue as it only validates US Zip Code regardless of the selected Currency.

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 168 to 170 in 99bf554

	if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
	errors.addressZipCode = translate(label.error.addressZipCode);
	}

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

Adjust the validate logic similarly to what we do in Address / AddressForm which is Zip Code validation based on the selected country, in our case for a more comprehensive solution we'll validate Zip Code based on selected Currency.

To do this we will add / adjust the following:

1. In CurrencyUtilscreate a new function called getCurrencyCountryCodes which will take as argument currencyCode and return an array with the country code / codes using that currency:

/**
 * Get the country code for a certain currency(ISO 4217) Code
 */
function getCurrencyCountryCodes(currencyCode: keyof typeof CONST.CURRENCY): Array<keyof typeof CONST.ALL_COUNTRIES> {
    const currencyCountryMap: Record<keyof typeof CONST.CURRENCY, Array<keyof typeof CONST.ALL_COUNTRIES>> = {
        [CONST.CURRENCY.USD]: ['US'],
        [CONST.CURRENCY.AUD]: ['AU'],
        [CONST.CURRENCY.CAD]: ['CA'],
        [CONST.CURRENCY.GBP]: ['GB'],
        [CONST.CURRENCY.NZD]: ['NZ'],
        [CONST.CURRENCY.EUR]: ['AT', 'BE', 'CY', 'EE', 'FI', 'FR', 'DE', 'GR', 'IE', 'IT', 'LV', 'LT', 'LU', 'MT', 'NL', 'PT', 'SK', 'SI', 'ES'],
    };

    return currencyCountryMap[currencyCode] ?? [];
}

2. Within the PaymentCardForm.tsx component in the validate function replace the current Zip Code validation logic with the following:

// Use provided currency or default to USD
const currency = data?.currency ?? CONST.PAYMENT_CARD_CURRENCY.USD;
// Get countries associated with the currency
const countries = CurrencyUtils.getCurrencyCountryCodes(currency);

// Check if the addressZipCode matches any country-specific regex
if (values.addressZipCode) {
    const zipCode = values.addressZipCode.trim();
    const isValidZip = countries.some((countryCode) => {
        const regexDetails = CONST.COUNTRY_ZIP_REGEX_DATA[countryCode];
        // Optionally: check for empty string after trim
        if (!zipCode) {
            return false;
        }

        return 'regex' in regexDetails && regexDetails.regex.test(zipCode);
    });

    if (!isValidZip) {
        errors.addressZipCode = translate(label.error.addressZipCode);
    }
}

this will ensure that the Zip Code is validated based on the currency selected in the Add payment card, defaulting to USD just like the Currency field.

Here's a test branch: ikevin127-cardZipCodeValidation for testing convenience or the diff if preferred.

Result video (before / after)

MacOS: Chrome

Before	After
before.mov	after.mov

[ikevin127]

If this needs to be done for several countries, and each one requires specific treatment, then we can consider a higher price, but it doesn't seem like that's necessary for now.

@sakluger In the proposed solution I made sure to include logic for each specific currency / country and also for the EUR currency which is used in multiple european countries. Even though the current Add payment card currency selector stops at NZD, I wanted the solution to be future proof as we might add EUR to the list.

I'd say that justifies the base $250 bounty for this issue in case the proposed solution will be the one selected. Thank you!