[HOLD for payment 2024-12-16] [$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-22
• Automatic offers:
• ikevin127 | Contributor | 105099990

Issue Owner

Current Issue Owner: @sakluger

[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]

Edited by proposal-police: This proposal was edited at 2024-11-18 19:58:48 UTC.

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.

Alternative solution 1

Map over all CONST.COUNTRY_ZIP_REGEX_DATA countries regex and allow Zip Codes matching any of our available countries regardless of selected currency.

Alternative solution 2

Remove any specific Zip Code validation, allowing any input as long as the field is not empty. This one would be the most performant (since this seems to be a very important criteria 🙂).

Alternative solution 3

Use CONST.GENERIC_ZIP_CODE_REGEX for a more generic Zip Code validation.

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!

[sakluger]

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

@ikevin127 that sounds fair to me! If your solution is selected, then I will increase the price to $250.

[getusha]

@ikevin127 @daledah we already have COUNTRY_ZIP_REGEX_DATA, i suggest you to have a look at AddressForm/Profile/Address page component. i don't think there is a need to create a new utility function.

[ikevin127]

@getusha Are you sure you read my proposal ? Asking because I'm confused by your note since I did use COUNTRY_ZIP_REGEX_DATA in the solution I proposed.

[getusha]

@getusha Are you sure you read my proposal ? Asking because I'm confused by your note since I did use COUNTRY_ZIP_REGEX_DATA in the solution I proposed.

mb, i overlooked that. reviewing your solution

[getusha]

@ikevin127 after a second look i am not sure if mapping currencies to countries is the right idea. as there could be for example, someone from UK with USD card. I think it's better if we could use a generic regex to validate the zip code.

[YahyaDalbah]

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?

We only check valid US zip code and not check valid UK zip code

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 168 to 170 in 8e1b0fd

	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?

we must handle UK zip code when the GBP currency is selected

1. make a new util function in ValidationUtils.ts

function isValidUKZipCode(zipCode: string): boolean {
    return CONST.COUNTRY_ZIP_REGEX_DATA.GB.regex.test(zipCode);
}

2. update validate function in PaymentCardForm.tsx here

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

📣 @YahyaDalbah! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ikevin127]

@getusha If by generic regex you mean simply allowing any postcode then we might as well remove any validation as we're not interested in actually validating based on each country's regex.

The reason why I propose validating based on currency is because especially in the US, if you don't input the Zip Code matching the card - the bank will reject authorization / payment.

Updated proposal

Added alternative solution where we map over all CONST.COUNTRY_ZIP_REGEX_DATA countries regex and allow Zip Codes matching any of our available countries.

Hopefully this will satisfy, otherwise I need more specificity on what exactly you're expecting in terms of solution here.

[YahyaDalbah]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~018af63917b9a4424c

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[getusha]

If by generic regex you mean simply allowing any postcode then we might as well remove any validation as we're not interested in actually validating based on each country's regex.

We are selecting a currency not a country, i don't see how that's relevant.

The reason why I propose validating based on currency is because especially in the US, if you don't input the Zip Code matching the card - the bank will reject authorization / payment.

Having a USD card doesn't necessarily mean you'll always have a US billing address IMO

Map over all CONST.COUNTRY_ZIP_REGEX_DATA countries regex and allow Zip Codes matching any of our available countries.

It might cause performance implications, which could make the solution not ideal.

[ikevin127]

@getusha You are not making any sense honestly, first you say:

we already have COUNTRY_ZIP_REGEX_DATA, i suggest you to have a look at AddressForm/Profile/Address page component. i don't think there is a need to create a new utility function.

Then when I suggested 2 different solutions using COUNTRY_ZIP_REGEX_DATA you say that they are not good enough because one is validating Zip Code based on currency and the other "might" cause performance issues.

I don't understand what are your expectations in this case, can you clarify ?

Also please test the solutions and come back with solid proof that the solution does introduce performance issues, because "might" means nothing.

Let me know if you have the capacity to do that and want to review this issue properly, otherwise I will propose re-assigning another reviewer. Thanks!

[ikevin127]

PR #53178 is ready for review! 🚀

[ikevin127]

♻️ Status update: PR has been open and ready for review 2 days ago, awaiting @getusha's review.

[ikevin127]

♻️ Status update: PR has been open and ready for review for 5 days, still awaiting @getusha's review.
Bumped in the PR as well - awaiting a response.

[trjExpensify]

Just as a bit of a follow-up here if that PR is almost done and dusted, but I think we should change the label name to Zip / Postcode to match the label name found in the form on profile > private > address. Only the US uses "Zip code" terminology.

[ikevin127]

@trjExpensify Sure, will change the label before the PR gets merged - linking to your comment for the reason.

✅ Done

[trjExpensify]

Excellent!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.72-1 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Remove Zip Code validation from Add a payment card page #53178

If no regressions arise, payment will be issued on 2024-12-16. 🎊

For reference, here are some details about the assignees on this issue:

• @ikevin127 requires payment automatic offer (Contributor)
• @getusha requires payment through NewDot Manual Requests

[melvin-bot]

@ikevin127 / @getusha @sakluger @ikevin127 / @getusha The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[ikevin127]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: https://github.com/Expensify/App/pull/42771/files#r1882966545

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: N/A.

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

1. Go to Settings.
2. Go to Subscriptions.
3. Click Add a payment card.
4. Verify that no specific Zip Code format is required other that the field itself being required (can't be left empty) regardless of the selected currency (USD, GBP or any other available).

Do we agree 👍 or 👎.

[ikevin127]

@sakluger for visibility

[sakluger]

Sorry for the delayed payment, I was out sick yesterday. Also, thank you @ikevin127 for completing the BZ checklist. That's usually the responsibility of the Contributor+ assignee, but I appreciate you doing that here.

[sakluger]

Summarizing payment on this issue:

Contributor: @ikevin127 $125, paid via Upwork
Contributor+: @getusha $125, please request on Newdot

[garrettmknight]

$125 approved for @getusha