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