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 contributors@expensify.com 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
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

[melvin-bot[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

https://github.com/Expensify/App/blob/1b9e3029cf55663927a8666ba749c6eb6793a0db/src/components/AddPaymentCard/PaymentCardForm.tsx#L168-L170

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