Details - Zip code does not shown a error message

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Issue found when executing PR #20228 Part 3. Personal Details

Action Performed:

1. Go to staging.new.expensify.com
2. Log in with any account
3. Open Settings -> Profile -> Personal details -> Home address
4. Leave all inputs empty.
5. Verify that every input has an error message

Expected Result:

Every input has an error message

Actual Result:

Zip code does not shown a error message

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.28.3

Reproducible in staging?: yes

Reproducible in production?: yes

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

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @conorpendergrast (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[dukenv0307]

Proposal

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

Details - Zip code does not shown a error message

What is the root cause of that problem?

We don't set zipcode in required field

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Line 84 in bd0e843

const requiredFields = ['addressLine1', 'city', 'country', 'state'];

Although, we just validated the zipcode field in here

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Lines 106 to 113 in bd0e843

	if (countrySpecificZipRegex) {
	if (!countrySpecificZipRegex.test(values.zipPostCode.trim().toUpperCase())) {
	if (ValidationUtils.isRequiredFulfilled(values.zipPostCode.trim())) {
	errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];
	} else {
	errors.zipPostCode = 'common.error.fieldRequired';
	}
	}

But this code only be executed when a country is selected

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

add zipcode into required fields

            const requiredFields = ['addressLine1', 'city', 'country', 'state', 'zipPostCode'];

and we also update the the logic to validate the zipcode here

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Lines 106 to 116 in bd0e843

	if (countrySpecificZipRegex) {
	if (!countrySpecificZipRegex.test(values.zipPostCode.trim().toUpperCase())) {
	if (ValidationUtils.isRequiredFulfilled(values.zipPostCode.trim())) {
	errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];
	} else {
	errors.zipPostCode = 'common.error.fieldRequired';
	}
	}
	} else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values.zipPostCode.trim().toUpperCase())) {
	errors.zipPostCode = 'privatePersonalDetails.error.incorrectZipFormat';
	}

to remove redundant logic
like this

if (countrySpecificZipRegex) {        
                if (!countrySpecificZipRegex.test(values.zipPostCode.trim().toUpperCase())) {
                        errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];
                }
            } else if (!CONST.GENERIC_ZIP_CODE_REGEX.test(values.zipPostCode.trim().toUpperCase())) {
                errors.zipPostCode = 'privatePersonalDetails.error.incorrectZipFormat';
            }
}

If we want to prioritize checking the required field before the Incorrect zip code format we can move this logic

App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

Lines 92 to 97 in bd0e843

	_.each(requiredFields, (fieldKey) => {
	if (ValidationUtils.isRequiredFulfilled(values[fieldKey])) {
	return;
	}
	errors[fieldKey] = 'common.error.fieldRequired';
	});

to the bottom of validate function

What alternative solutions did you explore? (Optional)

[Pujan92]

I think this is not a bug as zipcode is not a required field for all the countries and depends on the selected country.

[conorpendergrast]

I agree that I think this is intentional as not all countries require a zip/ post code.

Confirming via Slack

[conorpendergrast]

I was wrong! Zip code is now a required field (internal discussion); for those countries that don't have zipcodes, a customer will just enter placeholder characters like 00000

[conorpendergrast]

A little more nuanced here:

We also discussed somewhere that when no country selected, it's treated as if selected country without postal code supported

That was introduced in this PR. So, this is not a bug!~