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

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

[getusha]

@sakluger what about USD cards?

[melvin-bot]

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

[sakluger]

We have four billing currencies - USD, GBP, AUD, and NZD. I'm going to ask how we validate the billing card postal code field in OldDot, because I assume we should just reuse that logic.

[melvin-bot]

@sakluger, @getusha Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[sakluger]

FYI I asked here in Slack. I'm still waiting for a response so I bumped my question.

[sakluger]

I heard back from the team and discovered that there is no postal code validation in OldDot (none in frontend or backend). I also checked with the people who lead the project to add billing cards to NewDot, and they think that we should copy OldDot.

That means that we should remove all postal code validation from NewDot. @daledah @ikevin127 @YahyaDalbah could you please update your proposals with the new guidance if you'd like to be considered? Thanks!

[ikevin127]

@getusha I already suggested removing any specific Zip Code validation in my proposal, Alternative solution 2.

[getusha]

@ikevin127's proposal looks good to me. they were the first to suggest removing any zip code validation on their alternative solution. based on the decision making from the internal team

🎀 👀 🎀 C+ Reviewed!

[melvin-bot]

Triggered auto assignment to @danieldoglas, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[ikevin127]

♻️ Update regarding the issue: I drafted the PR already, awaiting to be assigned so I can open it.

While testing the fix, I noticed that on mWeb platforms the keyboard was locked to numeric because of this line:

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Line 289 in c4ff235

inputMode={CONST.INPUT_MODE.NUMERIC}

As part of the PR I removed that line as well since UK Zip Codes contain both characters and numbers, therefore we don't want to restrict users to numeric input only. More details in this PR #53178 (comment).

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

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