Merge pull request #27358 from BeeMargarida/fix/regression-flat-trans…

…late fix: regressions of flat translations (cherry picked from commit c9580da)
Expensify · Sep 13, 2023 · b761cbf · b761cbf
1 parent 8235fbd
commit b761cbf
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 79 deletions.
diff --git a/src/CONST.ts b/src/CONST.ts
@@ -1684,61 +1684,6 @@ const CONST = {
         ZW: 'Zimbabwe',
     },
 
-    ALL_US_ISO_STATES: [
-        'AK',
-        'AL',
-        'AR',
-        'AZ',
-        'CA',
-        'CO',
-        'CT',
-        'DE',
-        'FL',
-        'GA',
-        'HI',
-        'IA',
-        'ID',
-        'IL',
-        'IN',
-        'KS',
-        'KY',
-        'LA',
-        'MA',
-        'MD',
-        'ME',
-        'MI',
-        'MN',
-        'MO',
-        'MS',
-        'MT',
-        'NC',
-        'ND',
-        'NE',
-        'NH',
-        'NJ',
-        'NM',
-        'NV',
-        'NY',
-        'OH',
-        'OK',
-        'OR',
-        'PA',
-        'PR',
-        'RI',
-        'SC',
-        'SD',
-        'TN',
-        'TX',
-        'UT',
-        'VA',
-        'VT',
-        'WA',
-        'WI',
-        'WV',
-        'WY',
-        'DC',
-    ],
-
     // Sources: https://github.com/Expensify/App/issues/14958#issuecomment-1442138427
     // https://github.com/Expensify/App/issues/14958#issuecomment-1456026810
     COUNTRY_ZIP_REGEX_DATA: {

diff --git a/src/components/StatePicker/StateSelectorModal.js b/src/components/StatePicker/StateSelectorModal.js
@@ -1,6 +1,7 @@
 import _ from 'underscore';
 import React, {useMemo, useEffect} from 'react';
 import PropTypes from 'prop-types';
+import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import CONST from '../../CONST';
 import Modal from '../Modal';
 import HeaderWithBackButton from '../HeaderWithBackButton';
@@ -53,7 +54,7 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
 
     const countryStates = useMemo(
         () =>
-            _.map(CONST.ALL_US_ISO_STATES, (state) => {
+            _.map(_.keys(COMMON_CONST.STATES), (state) => {
                 const stateName = translate(`allStates.${state}.stateName`);
                 const stateISO = translate(`allStates.${state}.stateISO`);
                 return {

diff --git a/src/components/StatePicker/index.js b/src/components/StatePicker/index.js
@@ -1,6 +1,8 @@
 import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
+import _ from 'underscore';
+import {CONST as COMMON_CONST} from 'expensify-common/lib/CONST';
 import styles from '../../styles/styles';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import useLocalize from '../../hooks/useLocalize';
@@ -51,7 +53,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
         hidePickerModal();
     };
 
-    const title = value ? translate(`allStates.${value}.stateName`) : '';
+    const title = value && _.keys(COMMON_CONST.STATES).includes(value) ? translate(`allStates.${value}.stateName`) : '';
     const descStyle = title.length === 0 ? styles.textNormal : null;
 
     return (

diff --git a/src/pages/ReimbursementAccount/CompanyStep.js b/src/pages/ReimbursementAccount/CompanyStep.js
@@ -224,7 +224,7 @@ function CompanyStep({reimbursementAccount, reimbursementAccountDraft, getDefaul
                     <Picker
                         inputID="incorporationType"
                         label={translate('companyStep.companyType')}
-                        items={_.map(translate('companyStep.incorporationTypes'), (label, value) => ({value, label}))}
+                        items={_.map(_.keys(CONST.INCORPORATION_TYPES), (key) => ({value: key, label: translate(`companyStep.incorporationTypes.${key}`)}))}
                         placeholder={{value: '', label: '-'}}
                         defaultValue={getDefaultStateForField('incorporationType')}
                         shouldSaveDraft

diff --git a/src/pages/settings/Preferences/PriorityModePage.js b/src/pages/settings/Preferences/PriorityModePage.js
@@ -26,12 +26,12 @@ const defaultProps = {
 };
 
 function PriorityModePage(props) {
-    const priorityModes = _.map(props.translate('priorityModePage.priorityModes'), (mode, key) => ({
-        value: key,
-        text: mode.label,
-        alternateText: mode.description,
-        keyForList: key,
-        isSelected: props.priorityMode === key,
+    const priorityModes = _.map(_.values(CONST.PRIORITY_MODE), (mode) => ({
+        value: mode,
+        text: props.translate(`priorityModePage.priorityModes.${mode}.label`),
+        alternateText: props.translate(`priorityModePage.priorityModes.${mode}.description`),
+        keyForList: mode,
+        isSelected: props.priorityMode === mode,
     }));
 
     const updateMode = useCallback(

diff --git a/src/pages/settings/Preferences/ThemePage.js b/src/pages/settings/Preferences/ThemePage.js
@@ -27,11 +27,11 @@ const defaultProps = {
 };
 
 function ThemePage(props) {
-    const localesToThemes = _.map(props.translate('themePage.themes'), (theme, key) => ({
-        value: key,
-        text: theme.label,
-        keyForList: key,
-        isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === key,
+    const localesToThemes = _.map(_.values(_.omit(CONST.THEME, 'DEFAULT')), (theme) => ({
+        value: theme,
+        text: props.translate(`themePage.themes.${theme}.label`),
+        keyForList: theme,
+        isSelected: (props.preferredTheme || CONST.THEME.DEFAULT) === theme,
     }));
 
     return (

diff --git a/src/pages/settings/Profile/PronounsPage.js b/src/pages/settings/Profile/PronounsPage.js
@@ -31,7 +31,7 @@ function PronounsPage({currentUserPersonalDetails}) {
             .find((_value) => _value === currentPronounsKey)
             .value();
 
-        return currentPronounsText || '';
+        return currentPronounsText ? translate(`pronouns.${currentPronounsText}`) : '';
     });
 
     const filteredPronounsList = useMemo(() => {

diff --git a/src/pages/settings/Report/NotificationPreferencePage.js b/src/pages/settings/Report/NotificationPreferencePage.js
@@ -11,6 +11,7 @@ import withReportOrNotFound from '../../home/report/withReportOrNotFound';
 import FullPageNotFoundView from '../../../components/BlockingViews/FullPageNotFoundView';
 import reportPropTypes from '../../reportPropTypes';
 import ROUTES from '../../../ROUTES';
+import CONST from '../../../CONST';
 import * as Report from '../../../libs/actions/Report';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -26,17 +27,20 @@ const greenCheckmark = {src: Expensicons.Checkmark, color: themeColors.success};
 
 function NotificationPreferencePage(props) {
     const shouldDisableNotificationPreferences = ReportUtils.shouldDisableSettings(props.report) || ReportUtils.isArchivedRoom(props.report);
-    const notificationPreferenceOptions = _.map(props.translate('notificationPreferencesPage.notificationPreferences'), (preference, key) => ({
-        value: key,
-        text: preference,
-        keyForList: key,
+    const notificationPreferenceOptions = _.map(
+        _.filter(_.values(CONST.REPORT.NOTIFICATION_PREFERENCE), (pref) => pref !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN),
+        (preference) => ({
+            value: preference,
+            text: props.translate(`notificationPreferencesPage.notificationPreferences.${preference}`),
+            keyForList: preference,
 
-        // Include the green checkmark icon to indicate the currently selected value
-        customIcon: key === props.report.notificationPreference ? greenCheckmark : null,
+            // Include the green checkmark icon to indicate the currently selected value
+            customIcon: preference === props.report.notificationPreference ? greenCheckmark : null,
 
-        // This property will make the currently selected value have bold text
-        boldStyle: key === props.report.notificationPreference,
-    }));
+            // This property will make the currently selected value have bold text
+            boldStyle: preference === props.report.notificationPreference,
+        }),
+    );
 
     return (
         <ScreenWrapper includeSafeAreaPaddingBottom={false}>