[Due for payment 2025-10-15] [$250] Account - Address shows `MISSING TRANSLATION` in the country picker

[izarutskaya]

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:
Reproducible in staging?: Needs Reproduction
Reproducible in production?: Needs Reproduction
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: @shawnborton
Slack conversation (hyperlinked to channel name): #expensify_bugs

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Click Account > Profile > Private > Address

Expected Result:

Only correct address shows in the country picker.

Actual Result:

Address shows MISSING TRANSLATION in the country picker.

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968058530670849013
• Upwork Job ID: 1968058530670849013
• Last Price Increase: 2025-09-16
• Automatic offers:
• abzokhattab | Contributor | 108824050

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

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

[lorretheboy]

Proposal

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

Address shows MISSING TRANSLATION in the country picker

What is the root cause of that problem?

Translation is missing for a country so it falls back to MISSING TRANSLATION HERE

App/src/components/CountrySelector.tsx

Line 37 in b489871

const title = countryCode ? translate(`allCountries.${countryCode}`) : '';

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

We should add the missing country code to translation and ALL_COUNTRIES const (Need to ask OP for the country they selected - as it is not clear)

Or

We can fallback to country code if translation is not existed

    const getCountryTitle = () => {
        if (!countryCode) {
            return '';
        }

        if (!(countryCode in CONST.ALL_COUNTRIES)) {
            // If the country code doesn't exist, return the code itself as fallback
            return countryCode;
        }

        return translate(`allCountries.${countryCode}`);
    };

    const title = getCountryTitle();

We can do similar here

    const getCountryTitle = () => {
        if (!value) {
            return undefined;
        }

        if (!(value in CONST.ALL_COUNTRIES)) {
            // If the country code doesn't exist, return the code itself as fallback
            return value;
        }

        return translate(`allCountries.${value}` as TranslationPaths);
    };

...

    title={getCountryTitle()}

App/src/components/CountryPicker/index.tsx

Line 37 in 5da0d43

title={value ? translate(`allCountries.${value}` as TranslationPaths) : undefined}

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)

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.

[abzokhattab]

i am not able to reproduce it ..

@shawnborton, it would be helpful if you could share the console logs, as the missing translation should add a debug log

[aadil42]

same as @abzokhattab

[melvin-bot]

@flaviadefaria Whoops! This issue is 2 days overdue. Let's get this updated quick!

[shawnborton]

Any update on this one? I am able to reproduce it still. How can I help diagnose it?

[abzokhattab]

Can you search in the console log for this phrase was not found in the and show us the complete text... there should be a log alert for the missing translation locale

[shawnborton]

Probably this:

[alrt] allCountries.United States was not found in the en locale - {"stack":"\"Error\\n    at R.default.alert (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2201542)\\n    at translate (https://staging.new.expensify.com/main-04039f71b652df4e8e53.bundle.js:1:4313672)\\n    at K (https://staging.new.expensify.com/main-04039f71b652df4e8e53.bundle.js:1:3372598)\\n    at CountrySelector (https://staging.new.expensify.com/487-77149e358d5fb6ef47fe.bundle.js:1:995483)\\n    at renderWithHooks (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2827721)\\n    at updateForwardRef (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2851911)\\n    at beginWork (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2872690)\\n    at performUnitOfWork (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2927903)\\n    at workLoopSync (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2927770)\\n    at renderRootSync (https://staging.new.expensify.com/vendors-419f1baec88641014445.bundle.js:22:2927549)\""} 

[abzokhattab]

Proposal

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

Users see "MISSING TRANSLATION" errors in the country picker when their address data contains country names (e.g., "United States") instead of country codes (e.g., "US").

What is the root cause of that problem?

• The backend's openApp API response returns country names (e.g., "United States") instead of country codes (e.g., "US") for new users during signup
• This causes country names to be stored in Onyx and used throughout the app
• The translation system expects country codes, so translate('allCountries.United States') fails
• Multiple country picker components (CountrySelector and CountryPicker) are vulnerable to this same translation error

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

• Create centralized utility function: Add normalizeCountryToCode() in a new utilsrc/libs/CountryUtils.ts to handle country name/code conversion consistently

  function normalizeCountryToCode(countryValue: string | undefined | null): Country | '' {
      if (!countryValue) return '';
      if (Object.keys(CONST.ALL_COUNTRIES).includes(countryValue)) return countryValue as Country;
      const countryCode = Object.keys(CONST.ALL_COUNTRIES).find(
          (code) => CONST.ALL_COUNTRIES[code as keyof typeof CONST.ALL_COUNTRIES] === countryValue
      );
      return (countryCode as Country) ?? '';
  }

• Fix AddressSearch component here: Use centralized function to convert Google Places country names to country codes

  const countryFallback = normalizeCountryToCode(countryFallbackLongName);

• also use the centralized function in CountrySelector, CountryPicker, and CountrySelectionPage to handle existing bad data

  const normalizedCountryCode = normalizeCountryToCode(countryCode);

• we can also use it in the updateAddress that is sent to the db

• Create data migration script: in backend, use centralized function to convert existing country names to country codes in user data

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)

NA

[melvin-bot]

@flaviadefaria 6 days overdue. This is scarier than being forced to listen to Vogon poetry!