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