Merge pull request #2562 from eVoloshchak/eVoloshchak-localizedStrings

Apply localization to all hard coded text
Expensify · Apr 26, 2021 · cb3eb87 · cb3eb87
2 parents ed3c40c + fe1aad8
commit cb3eb87
Show file tree

Hide file tree

Showing 50 changed files with 869 additions and 391 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -67,8 +67,8 @@ const CONST = {
     },
     MESSAGES: {
         // eslint-disable-next-line max-len
-        NO_PHONE_NUMBER: 'Please enter a phone number including the country code e.g +447814266907',
-        MAXIMUM_PARTICIPANTS_REACHED: 'You\'ve reached the maximum number of participants for a group chat.',
+        NO_PHONE_NUMBER: 'noPhoneNumberMessage',
+        MAXIMUM_PARTICIPANTS_REACHED: 'maxParticipantsReachedMessage',
     },
     PRIORITY_MODE: {
         GSD: 'gsd',
@@ -85,12 +85,12 @@ const CONST = {
     DEFAULT_TIME_ZONE: {automatic: true, selected: 'America/Los_Angeles'},
     DEFAULT_ACCOUNT_DATA: {error: '', success: '', loading: false},
     PRONOUNS: {
-        HE_HIM_HIS: 'He/him',
-        SHE_HER_HERS: 'She/her',
-        THEY_THEM_THEIRS: 'They/them',
-        ZE_HIR_HIRS: 'Ze/hir',
-        SELF_SELECT: 'Self-select',
-        CALL_ME_BY_MY_NAME: 'Call me by my name',
+        HE_HIM_HIS: 'heHimHis',
+        SHE_HER_HERS: 'sheHerHers',
+        THEY_THEM_THEIRS: 'theyThemTheirs',
+        ZE_HIR_HIRS: 'zeHirHirs',
+        SELF_SELECT: 'selfSelect',
+        CALL_ME_BY_MY_NAME: 'callMeByMyName',
     },
     APP_STATE: {
         ACTIVE: 'active',

diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js
@@ -68,4 +68,7 @@ export default {
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         REPORT_IOUS: 'reportIOUs_',
     },
+
+    // Indicates which locale should be used
+    PREFERRED_LOCALE: 'en',
 };
diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js
@@ -15,6 +15,7 @@ import compose from '../libs/compose';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
 import HeaderWithCloseButton from './HeaderWithCloseButton';
 import fileDownload from '../libs/fileDownload';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 /**
  * Modal render prop component that exposes modal launching triggers that can be used
@@ -46,6 +47,8 @@ const propTypes = {
         authToken: PropTypes.string.isRequired,
     }).isRequired,
 
+    ...withLocalizePropTypes,
+
     ...windowDimensionsPropTypes,
 };
 
@@ -130,7 +133,7 @@ class AttachmentModal extends PureComponent {
                                     styles.buttonConfirmText,
                                 ]}
                             >
-                                Upload
+                                {this.props.translations.translate('upload')}
                             </Text>
                         </TouchableOpacity>
                     )}
@@ -162,4 +165,5 @@ export default compose(
             key: ONYXKEYS.SESSION,
         },
     }),
+    withLocalize,
 )(AttachmentModal);
diff --git a/src/components/AttachmentPicker/index.native.js b/src/components/AttachmentPicker/index.native.js
@@ -11,10 +11,15 @@ import Popover from '../Popover';
 import MenuItem from '../MenuItem';
 import {Camera, Gallery, Paperclip} from '../Icon/Expensicons';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import compose from '../../libs/compose';
+import {translate} from '../../libs/translate';
+import ONYXKEYS from '../../ONYXKEYS';
 
 const propTypes = {
     ...basePropTypes,
     ...windowDimensionsPropTypes,
+    ...withLocalizePropTypes,
 };
 
 /**
@@ -39,15 +44,15 @@ const documentPickerOptions = {
  */
 function showPermissionsAlert() {
     Alert.alert(
-        'Camera Permission Required',
-        'Expensify.cash does not have access to your camera, please enable the permission and try again.',
+        translate(ONYXKEYS.PREFERRED_LOCALE, 'cameraPermissionRequired'),
+        translate(ONYXKEYS.PREFERRED_LOCALE, 'expensifyDoesntHaveAccessToCamera'),
         [
             {
-                text: 'Cancel',
+                text: translate(ONYXKEYS.PREFERRED_LOCALE, 'cancel'),
                 style: 'cancel',
             },
             {
-                text: 'Settings',
+                text: translate(ONYXKEYS.PREFERRED_LOCALE, 'settings'),
                 onPress: () => Linking.openSettings(),
             },
         ],
@@ -61,8 +66,8 @@ function showPermissionsAlert() {
  */
 function showGeneralAlert() {
     Alert.alert(
-        'Attachment Error',
-        'An error occurred while selecting an attachment, please try again',
+        translate(ONYXKEYS.PREFERRED_LOCALE, 'attachmentError'),
+        translate(ONYXKEYS.PREFERRED_LOCALE, 'errorWhileSelectingAttachment'),
     );
 }
 
@@ -99,8 +104,8 @@ function showImagePicker(imagePickerFunc) {
                         showGeneralAlert(response.error);
                         break;
                 }
-
-                reject(new Error(`Error during attachment selection: ${response.error}`));
+                const errorDescription = translate(ONYXKEYS.PREFERRED_LOCALE, 'errorDuringAttachmentSelection');
+                reject(new Error(`${errorDescription}: ${response.error}`));
             }
 
             resolve(response);
@@ -142,17 +147,17 @@ class AttachmentPicker extends Component {
         this.menuItemData = [
             {
                 icon: Camera,
-                text: 'Take Photo',
+                text: this.props.translations.translate('takePhoto'),
                 pickAttachment: () => showImagePicker(RNImagePicker.launchCamera),
             },
             {
                 icon: Gallery,
-                text: 'Choose from Gallery',
+                text: this.props.translations.translate('chooseFromGallery'),
                 pickAttachment: () => showImagePicker(RNImagePicker.launchImageLibrary),
             },
             {
                 icon: Paperclip,
-                text: 'Choose Document',
+                text: this.props.translations.translate('chooseDocument'),
                 pickAttachment: showDocumentPicker,
             },
         ];
@@ -247,4 +252,7 @@ class AttachmentPicker extends Component {
 
 AttachmentPicker.propTypes = propTypes;
 AttachmentPicker.displayName = 'AttachmentPicker';
-export default withWindowDimensions(AttachmentPicker);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(AttachmentPicker);
diff --git a/src/components/AttachmentView.js b/src/components/AttachmentView.js
@@ -7,6 +7,8 @@ import PDFView from './PDFView';
 import ImageView from './ImageView';
 import Icon from './Icon';
 import {Paperclip} from './Icon/Expensicons';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
 
 const propTypes = {
     // URL to full-sized attachment
@@ -15,18 +17,21 @@ const propTypes = {
     file: PropTypes.shape({
         name: PropTypes.string,
     }),
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     file: {
-        name: 'Unknown Filename',
+        name: '',
     },
 };
 
 const AttachmentView = (props) => {
     // Check both sourceURL and file.name since PDFs dragged into the the text field
     // will appear with a sourceURL that is a blob
-    if (Str.isPDF(props.sourceURL) || (props.file && Str.isPDF(props.file.name))) {
+    if (Str.isPDF(props.sourceURL)
+        || (props.file && Str.isPDF(props.file.name || props.translations.translate('unknownFilename')))) {
         return (
             <PDFView
                 sourceURL={props.sourceURL}
@@ -59,4 +64,7 @@ AttachmentView.propTypes = propTypes;
 AttachmentView.defaultProps = defaultProps;
 AttachmentView.displayName = 'AttachmentView';
 
-export default memo(AttachmentView);
+export default compose(
+    memo,
+    withLocalize,
+)(AttachmentView);
diff --git a/src/components/ConfirmModal.js b/src/components/ConfirmModal.js
@@ -8,6 +8,8 @@ import Modal from './Modal';
 import styles from '../styles/styles';
 import CONST from '../CONST';
 import withWindowDimensions, {windowDimensionsPropTypes} from './withWindowDimensions';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
 
 const propTypes = {
     /** Title of the modal */
@@ -31,12 +33,14 @@ const propTypes = {
     /** Modal content text */
     prompt: PropTypes.string,
 
+    ...withLocalizePropTypes,
+
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
-    confirmText: 'Yes',
-    cancelText: 'No',
+    confirmText: '',
+    cancelText: '',
     prompt: '',
 };
 
@@ -68,7 +72,7 @@ const ConfirmModal = props => (
                         styles.buttonSuccessText,
                     ]}
                 >
-                    {props.confirmText}
+                    {props.confirmText || props.translations.translate('yes')}
                 </Text>
             </TouchableOpacity>
 
@@ -77,7 +81,7 @@ const ConfirmModal = props => (
                 onPress={props.onCancel}
             >
                 <Text style={styles.buttonText}>
-                    {props.cancelText}
+                    {props.cancelText || props.translations.translate('no')}
                 </Text>
             </TouchableOpacity>
         </View>
@@ -87,4 +91,7 @@ const ConfirmModal = props => (
 ConfirmModal.propTypes = propTypes;
 ConfirmModal.defaultProps = defaultProps;
 ConfirmModal.displayName = 'ConfirmModal';
-export default withWindowDimensions(ConfirmModal);
+export default compose(
+    withWindowDimensions,
+    withLocalize,
+)(ConfirmModal);
diff --git a/src/components/HeaderWithCloseButton.js b/src/components/HeaderWithCloseButton.js
@@ -7,6 +7,7 @@ import styles from '../styles/styles';
 import Header from './Header';
 import Icon from './Icon';
 import {Close, Download, BackArrow} from './Icon/Expensicons';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
 
 const propTypes = {
     /** Title of the Header */
@@ -29,6 +30,8 @@ const propTypes = {
 
     /** Whether we should show a border on the bottom of the Header */
     shouldShowBorderBottom: PropTypes.bool,
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -63,7 +66,7 @@ const HeaderWithCloseButton = props => (
             <Header title={props.title} textSize={props.textSize} />
             <View style={[styles.reportOptions, styles.flexRow]}>
                 {
-                    props.title === 'Attachment' && (
+                    props.title === props.translations.translate('attachment') && (
                         <TouchableOpacity
                             onPress={props.onDownloadButtonPress}
                             style={[styles.touchableButtonImage]}
@@ -88,4 +91,4 @@ HeaderWithCloseButton.propTypes = propTypes;
 HeaderWithCloseButton.defaultProps = defaultProps;
 HeaderWithCloseButton.displayName = 'HeaderWithCloseButton';
 
-export default HeaderWithCloseButton;
+export default withLocalize(HeaderWithCloseButton);
diff --git a/src/components/IOUConfirmationList.js b/src/components/IOUConfirmationList.js
@@ -13,6 +13,8 @@ import {
 import OptionsList from './OptionsList';
 import ButtonWithLoader from './ButtonWithLoader';
 import ONYXKEYS from '../ONYXKEYS';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+import compose from '../libs/compose';
 
 const propTypes = {
     // Callback to inform parent modal of success
@@ -71,6 +73,8 @@ const propTypes = {
         // Whether or not the IOU step is loading (creating the IOU Report)
         loading: PropTypes.bool,
     }),
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
@@ -103,13 +107,13 @@ class IOUConfirmationList extends Component {
                 `$${this.calculateAmount() / 100}`);
 
             sections.push({
-                title: 'WHO PAID?',
+                title: this.props.translations.translate('whoPaid'),
                 data: formattedMyPersonalDetails,
                 shouldShow: true,
                 indexOffset: 0,
             });
             sections.push({
-                title: 'WHO WAS THERE?',
+                title: this.props.translations.translate('whoWasThere'),
                 data: formattedParticipants,
                 shouldShow: true,
                 indexOffset: 0,
@@ -120,7 +124,7 @@ class IOUConfirmationList extends Component {
                 `$${this.props.iouAmount}`);
 
             sections.push({
-                title: 'TO',
+                title: this.props.translations.translate('to').toUpperCase(),
                 data: formattedParticipants,
                 shouldShow: true,
                 indexOffset: 0,
@@ -212,23 +216,25 @@ class IOUConfirmationList extends Component {
                     />
                     <View>
                         <Text style={[styles.p5, styles.textMicroBold, styles.colorHeading]}>
-                            WHAT&apos;S IT FOR?
+                            {this.props.translations.translate('whatsItFor')}
                         </Text>
                     </View>
                     <View style={[styles.ph5]}>
                         <TextInput
                             style={[styles.textInput]}
                             value={this.props.comment}
                             onChangeText={this.props.onUpdateComment}
-                            placeholder="Optional"
+                            placeholder={this.props.translations.translate('optional')}
                             placeholderTextColor={themeColors.placeholderText}
                         />
                     </View>
                 </View>
                 <View style={[styles.ph5, styles.pb3]}>
                     <ButtonWithLoader
                         isLoading={this.props.iou.loading}
-                        text={this.props.hasMultipleParticipants ? 'Split' : `Request $${this.props.iouAmount}`}
+                        text={this.props.hasMultipleParticipants
+                            ? this.props.translations.translate('optional')
+                            : `${this.props.translations.translate('request')} $${this.props.iouAmount}`}
                         onClick={() => {
                             if (this.props.hasMultipleParticipants) {
                                 this.props.onConfirm({splits: this.getSplits()});
@@ -247,9 +253,12 @@ IOUConfirmationList.displayName = 'IOUConfirmPage';
 IOUConfirmationList.propTypes = propTypes;
 IOUConfirmationList.defaultProps = defaultProps;
 
-export default withOnyx({
-    iou: {key: ONYXKEYS.IOU},
-    myPersonalDetails: {
-        key: ONYXKEYS.MY_PERSONAL_DETAILS,
-    },
-})(IOUConfirmationList);
+export default compose(
+    withLocalize,
+    withOnyx({
+        iou: {key: ONYXKEYS.IOU},
+        myPersonalDetails: {
+            key: ONYXKEYS.MY_PERSONAL_DETAILS,
+        },
+    }),
+)(IOUConfirmationList);