[HOLD for payment 2025-02-05] [HOLD for payment 2025-02-04] [$250] Valid Australian postcodes are not accepted when adding a 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.87-3
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: @VictoriaExpensify
Slack conversation (hyperlinked to channel name): retain

Action Performed:

1. Go to settings
2. Open subscription page
3. change currency to AUD
4. Enter valid postal codes (for example 3000, 4879, 3001)

Expected Result:

Should accept the valid postal codes

Actual Result:

An error message is shown "Please enter a valid ZIP code using the format: 12345, 12345-1234, 12345 1234."

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/~021881781580181945077
• Upwork Job ID: 1881781580181945077
• Last Price Increase: 2025-01-21
• Automatic offers:
• ikevin127 | Contributor | 105877696
• ZhenjaHorbach | Contributor | 105888282

Issue Owner

Current Issue Owner: @trjExpensify

[melvin-bot]

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

[nkdengineer]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-21 02:05:46 UTC.

Proposal

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

An error message is shown "Please enter a valid ZIP code using the format: 12345, 12345-1234, 12345 1234."

What is the root cause of that problem?

We are using REGEX and error message for US when adding a payment card so it will consider Australian postcodes as invalid

App/src/components/AddPaymentCard/PaymentCardForm.tsx

Lines 168 to 170 in bec182c

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

App/src/libs/ValidationUtils.ts

Lines 167 to 170 in bec182c

	function isValidZipCode(zipCode: string): boolean {
	return CONST.REGEX.ZIP_CODE.test(zipCode);
	}

App/src/languages/en.ts

Line 1999 in bec182c

zipCode: `Please enter a valid ZIP code using the format: ${CONST.COUNTRY_ZIP_REGEX_DATA.US.samples}.`,

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

We can use CONST.COUNTRY_ZIP_REGEX_DATA.AU that we define here to validate when currency is AUD like the way we did here

App/src/CONST.ts

Lines 3712 to 3714 in bec182c

	AU: {
	regex: /^\d{4}$/,
	samples: '7181, 7735, 9169, 8780',

        if (values[INPUT_IDS.CURRENCY] === 'AUD') {
            let countryRegexDetails = CONST.COUNTRY_ZIP_REGEX_DATA.AU;
            if (!countryRegexDetails.regex.test(values.addressZipCode)) {
                errors.addressZipCode = translate('privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryRegexDetails.samples});
            }
        }

Do the same with the remaining currencies GPB and NZD

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[github-actions]

⚠️ @Krishna2323 Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[Krishna2323]

Proposal

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

Valid Australian postcodes are not accepted when adding a payment card

What is the root cause of that problem?

• We are using isValidZipCode to validate the zipcode and isValidZipCode uses the default regex (US) for validating.
  

  App/src/components/AddPaymentCard/PaymentCardForm.tsx

  Lines 168 to 170 in bec182c

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

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

• We should first create a mapping for getting the country code from currency:

+    PAYMENT_CARD_CURRENCY_COUNTRY: {
+        USD: 'US',
+        AUD: 'AU',
+        GBP: 'GB',
+        NZD: 'NZ',
+    },

• Then in PaymentCardForm.tsx, we need to get the country code using the currency and also the error message and hint:

const countryByCurreny = data?.currency ? CONST.PAYMENT_CARD_CURRENCY_COUNTRY?.[data?.currency] : CONST.PAYMENT_CARD_CURRENCY_COUNTRY.USD;
const zipSampleFormat = (countryByCurreny && (CONST.COUNTRY_ZIP_REGEX_DATA?.[countryByCurreny] as CountryZipRegex)?.samples) ?? '';
const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});

if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode, countryByCurreny)) {
    errors.addressZipCode = translate('privatePersonalDetails.error.incorrectZipFormat', {zipFormat});
}

hint={zipFormat}

• We should the modify isValidZipCode to accept a new param country which will be the country code and use the country specific regex to validate:

function isValidZipCode(zipCode: string, country?: Country): boolean {
    const countryRegexDetails = (country ? CONST.COUNTRY_ZIP_REGEX_DATA?.[country] : {}) as CountryZipRegex;
    const countrySpecificZipRegex = countryRegexDetails?.regex;

    if (countrySpecificZipRegex) {
        return countrySpecificZipRegex.test(zipCode);
    }

    return CONST.REGEX.ZIP_CODE.test(zipCode);
}

• And finally pass the countryByCurreny to isValidZipCode in PaymentCardForm.tsx.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Result

Monosnap.screencast.2025-01-21.07-49-21.mp4

[melvin-bot]

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

[melvin-bot]

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

[samranahm]

Proposal

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

Valid Australian postcodes are not accepted when adding a payment card

What is the root cause of that problem?

1. In isValidZipCode function currently we're using USA regex for validation.
   

   App/src/libs/ValidationUtils.ts

   Lines 167 to 169 in c07fa50

   	function isValidZipCode(zipCode: string): boolean {
   	return CONST.REGEX.ZIP_CODE.test(zipCode);
   	}

2. The same error message is displayed even if the ZIP code format changes, as we are not currently validating which local ZIP code format the user belongs to.
   

   App/src/components/AddPaymentCard/PaymentCardForm.tsx

   Lines 168 to 170 in c07fa50

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

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

• CurrencyField should be placed at the top to determine the user's country based on the selected currency.

• Next, check the user's currency by adding a mapping object in CONST

CURRENCY_COUNTRY_CODE: {
        USD: 'US',
        AUD: 'AU',
        GBP: 'GB',
        NZD: 'NZ',
}

• Get the user country with data?.currency

const countryByCurreny = data?.currency ? CONST.CURRENCY_COUNTRY_CODE?.[data?.currency] : CONST.CURRENCY_COUNTRY_CODE.USD;

• Update the isValidZipCode function

  function isValidZipCode(zipCode: string, country?: Country): boolean {
    const countryRegexDeta = (country ? CONST.COUNTRY_ZIP_REGEX_DATA?.[country] : {}) as CountryRegexDetails;
    const regex = countryRegexDeta?.regex;
    if (regex) {
        return regex.test(zipCode);
    }
    return CONST.REGEX.ZIP_CODE.test(zipCode);
}

• get the formatted zip code error message with

const countryByCurreny = data?.currency ? CONST.CURRENCY_COUNTRY_CODE?.[data?.currency] : CONST.CURRENCY_COUNTRY_CODE.USD;
const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});

and pass it to errors.addressZipCode

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Screen.Recording.2025-01-22.at.12.28.43.AM.mov

[ikevin127]

Proposal

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

Valid Australian postcodes are not accepted when adding a payment card.

What is the root cause of that problem?

The root cause of the current issue is this code block which only supports US based post codes.

Context (cc @Pujan92)

1. In this issue:

• [HOLD for payment 2024-12-16] [$125] Error message displayed when adding a UK zip code to a GBP payment card  #52642

after long discussions where @sakluger asked the team on Slack regarding post code validation in OD, the decision was:

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.

Given this, I removed the validation completely in the PR, only keeping the 'must not be empty' validation on the field.

Important

We went with this solution because we determined (ref1, ref2) that any other solution like mapping each country to extract the specific zip code based on the selected currency does not make sense, is too computationally expensive and it's not worth it when we can go with a simple and inclusive regex.

2. Then in this issue:

• [PAID] [$250] Error message is not displayed when entering characters that cannot be in a zip code #53918

@Krishna2323 Added back the logic which I removed in the other issue 😅 because the problem was that, since no validation was present on the field other than 'must not be empty', when inputting special characters (@ , : ; ' " &) there was no error message - so, while adding back the old US based post code validation "fixed" the second issue - it also reverted my previous PR changes without a care in the world 😂

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

Since the team confirmed in #52642 (comment) (quoted above) that we shouldn't have country specific post code validation, in order to align with OD, I think we should do the following:

• allow all country specific post codes (US, AU, NZ, UK), some including both digits and numbers (alphanumeric)
• ensure we allow (empty space) and - (hyphen) as they are valid in some country specific post codes (US / UK)
• ensure we don't allow any other special characters like (@ , : ; ' " &), and display generic error to comply with expected result of issue [PAID] [$250] Error message is not displayed when entering characters that cannot be in a zip code #53918

Steps to implement:

1. In CONST.REGEX add new regex: ALPHANUMERIC_WITH_SPACE_AND_HYPHEN: /^[A-Za-z0-9 -]+$/
2. In ValidationUtils under existing isValidZipCode add and export new function isValidPaymentZipCode which will test the regex added above at step (1).
3. In PaymentCardForm update this code block as follows:

if (values.addressZipCode && !ValidationUtils.isValidPaymentZipCode(values.addressZipCode)) { // <- updated validation function
    errors.addressZipCode = translate('addPaymentCardPage.error.addressZipCode'); // <- updated validation error message
}

this ensures we validate using the new regex. We also changed the validation error message to already existing and more generic one: ✅ 'Please enter a valid zip code.' when not-allowed characters are added to input, instead of keeping the current one which only includes US based post code error message: ❌ Please enter a valid ZIP code using the format: 12345, 12345-1234, 12345 1234..

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Create test scenarios for the new post code validation regex to test that:

• it allows all country specific post codes (US, AU, NZ, UK), some including both digits and numbers (eg. UK: SW8 4LT)
• it allows (empty spaces) and - (hyphens) as they are valid in some country specific post codes (US / UK)
• it doesn't allow any other special characters except the two mentioned above

Result video (before / after)

MacOS: Chrome

Before	After
before.mov	after.mov

[melvin-bot]

@Pujan92, @stephanieelliott Eep! 4 days overdue now. Issues have feelings too...

[trjExpensify]

I just caught a convo of someone being blocked from adding a payment card as well.

@Krishna2323 Added back the logic which I removed in the other issue 😅 because the problem was that, since no validation was present on the field other than 'must not be empty', when inputting special characters (@ , : ; ' " &) there was no error message - so, while adding back the old US based post code validation "fixed" the second issue - it also reverted my previous PR changes without a care in the world 😂

Can we revert this and/or get the fix CP'd today? Adding a billing card is incredibly important to conversion. Let's also add a super explicit code note to not touch the validation logic for post codes.

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

[luacmartins]

@ikevin127 your proposal looks good. Are you able to work on a PR in the next couple of hours? We want to get the fix CPed today.

[Pujan92]

Agree with @luacmartins

Just to confirm, do we need to remove that validation or switch the validation with ALPHANUMERIC_WITH_SPACE_AND_HYPHEN as @ikevin127 mentioned?

[luacmartins]

I think we should switch to ALPHANUMERIC_WITH_SPACE_AND_HYPHEN since we still wanna check that the input is not empty.

[ikevin127]

@luacmartins PR #55812 is ready for review! 🚀
(only added video for web since this is validation related, if videos for all platforms are required let me know and will add them)

Can we revert this and/or get the fix CP'd today? Adding a billing card is incredibly important to conversion. Let's also add a super explicit code note to not touch the validation logic for post codes.

@trjExpensify Indeed I can appreciate the importance of being able to add payment cards for subscription purposes, hopefully we merge the fix today so a revert won't be necessary 🤞

✅ I made sure to add a comment as instructed to explicitly state that tempering with the postcode validation logic without understanding the context can disrupt users adding payment cards, see comment.

[trjExpensify]

Thanks for the swift work on the PR, and adding the note! Thanks @ZhenjaHorbach for jumping on the review of the PR right away!

[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.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix postcode validation for add payment card flow #55812

If no regressions arise, payment will be issued on 2025-02-04. 🎊

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

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

[melvin-bot]

@Pujan92 / @ikevin127 @trjExpensify @Pujan92 / @ikevin127 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]

[Pujan92]

@trjExpensify Please unassign me and assign @ZhenjaHorbach as they reviewed the PR. Thanks!

[trjExpensify]

Sure, done!

[melvin-bot]

📣 @ZhenjaHorbach 🎉 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 📖

[melvin-bot]

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

• [CP Staging] Fix postcode validation for add payment card flow #55812

If no regressions arise, payment will be issued on 2025-02-05. 🎊

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

• @ikevin127 requires payment automatic offer (Contributor)
• @ZhenjaHorbach requires payment automatic offer (Contributor)

[melvin-bot]

@ikevin127 / @ZhenjaHorbach @trjExpensify @ikevin127 / @ZhenjaHorbach 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/54816/files#r1938170497.

• [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: https://expensify.slack.com/archives/C01GTK53T8Q/p1738379216754499.

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

Precondition: Create at least 1 workspace to have the Subscription section show up in Settings.

1. Go to Settings > Subscription > Add payment card.
2. Regardless of the selected currency, verify that the following postcode formats work as follows:

• 90000 or 90000-1234 or 90000 1234 (US based, incl. space / hyphen) ✅
• AB1 2CD or AB12 3CD or AB12CD (UK based, incl. space) ✅
• 4 digit format like 3000 (AU / NZ based) ✅
• any other special characters (@ , : ; ' " &) should not pass postcode validation ❌

Do we agree 👍 or 👎.

[luacmartins]

Let's add/update the test for this one since it's a core flow and has been broken a couple of times.

[ikevin127]

cc @trjExpensify for payments (due today on 4th)

[trjExpensify]

Yuuup! Regression test request created.

Payment summary as follows:

• $250 to @ikevin127 for the PR
• $250 to @ZhenjaHorbach for the C+ review

Paid, closing!