[HOLD for payment 2024-02-20] [$250] Address – Incorrect error message appear when enter Cyrillic letters into Zip field

[lanitochka17]

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: 1.4.26-1
Reproducible in staging?: Y
Reproducible in production?: N
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: Applause - Internal Team
Slack conversation:

Action Performed:

1. Login to New dot
2. Navigate to Settings -> Profile -> Personal details
3. Navigate to Home address page
4. Add Cyrillic letters or symbols into Zip/Postcode field

Expected Result:

"Incorrect zip code format" message should appear

Actual Result:

Incorrect error message ( privatePersonalDetails.error.incorrectZipFormat ) appear when enter Cyrillic letters into Zip/Postcode field

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• 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/~01ae2a56928644ce4f
• Upwork Job ID: 1747794052740149248
• Last Price Increase: 2024-01-18
• Automatic offers:
• s77rt | Reviewer | 28118027
• dukenv0307 | Contributor | 28118028

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @jasperhuangg (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[abzokhattab]

Proposal

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

Address - Incorrect error message appear when enter Cyrillic letters into Zip field

What is the root cause of that problem?

1. the zip code input is inside an input wrapper where the inputcomponent prop is TextInput
2. inside the input wapper we call registerInput which is provided by the FormProvider context here
3. the registerInput function sets the errorText ---> errorText: errors[inputID] || fieldErrorMessage,
4. now the object returned from the registerInput is passed to the TextInput as props
5. the BaseTextInput component uses FormHelpMessage to display the error where the input is the errorText provided in the props
6. the FormHelpMessage component calls Localize.translateIfPhraseKey to translate the error message
7. the translateIfPhraseKey function parses the input value to fetch the passed variables to the translate function
8. in the case of the zipcode we don't provide a second argument to the translation making the variables object assigned to undefined which make the translate function unable to resolve the translation.

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

we can add an empty object as the default value for the variables obj here :

        const [phrase, variables = {}] = Array.isArray(message) ? message : [message];

alternatively

we can modify the zipcode translation above to:

App/src/components/AddressForm.js

Line 106 in 9208c95

errors.zipPostCode = ['privatePersonalDetails.error.incorrectZipFormat', {zipFormat: countryZipFormat}];

futhermore this snippet could be refactored to:

const trimmedZip = values.zipPostCode.trim().toUpperCase();
const zipValidation = countrySpecificZipRegex ? countrySpecificZipRegex.test(trimmedZip) : CONST.GENERIC_ZIP_CODE_REGEX.test(trimmedZip);
const isRequiredFulfilled = ValidationUtils.isRequiredFulfilled(values.zipPostCode.trim());

if (!zipValidation) {
    errors.zipPostCode = isRequiredFulfilled
        ? ['privatePersonalDetails.error.incorrectZipFormat', { zipFormat: countryZipFormat }]
        : 'common.error.fieldRequired';
}

[melvin-bot]

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