[Fix] Translated error messages

src/components/DotIndicatorMessage.js

@@ -17,7 +17,7 @@ const propTypes = {
      *      timestamp: 'message',
      *  }
      */
-    messages: PropTypes.objectOf(PropTypes.string),
+    messages: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.array, PropTypes.string])),
 
     // The type of message, 'error' shows a red dot, 'success' shows a green dot
     type: PropTypes.oneOf(['error', 'success']).isRequired,

src/components/FormHelpMessage.js

@@ -8,10 +8,11 @@ import Text from './Text';
 import colors from '../styles/colors';
 import styles from '../styles/styles';
 import stylePropTypes from '../styles/stylePropTypes';
+import * as Localize from '../libs/Localize';
 
 const propTypes = {
     /** Error or hint text. Ignored when children is not empty */
-    message: PropTypes.string,
+    message: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
 
     /** Children to render next to dot indicator */
     children: PropTypes.node,
@@ -35,6 +36,7 @@ const FormHelpMessage = (props) => {
         return null;
     }
 
+    const translatedMessage = Localize.translateIfPhraseKey(props.message);
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter, styles.mt2, styles.mb1, ...props.style]}>
             {props.isError && (
@@ -44,7 +46,7 @@ const FormHelpMessage = (props) => {
                 />
             )}
             <View style={[styles.flex1, props.isError && styles.ml2]}>
-                {props.children || <Text style={[props.isError ? styles.formError : styles.formHelp, styles.mb0]}>{props.message}</Text>}
+                {props.children || <Text style={[props.isError ? styles.formError : styles.formHelp, styles.mb0]}>{translatedMessage}</Text>}
             </View>
         </View>
     );

src/libs/Localize/index.js

@@ -94,14 +94,16 @@ function translateLocal(phrase, variables) {
 /**
  * Return translated string for given error.
  *
- * @param {String} phrase
+ * @param {String|Array} message
  * @returns {String}
  */
-function translateIfPhraseKey(phrase) {
+function translateIfPhraseKey(message) {
     try {
-        return translateLocal(phrase);
+        // check if error message has a variable parameter
+        const [phrase, variables] = _.isArray(message) ? message : [message];
+        return translateLocal(phrase, variables);
     } catch (error) {
-        return phrase;
+        return message;
     }
 }
 

src/pages/EnablePayments/TermsStep.js

@@ -66,7 +66,7 @@ class TermsStep extends React.Component {
     }
 
     render() {
-        const errorMessage = this.state.error ? this.props.translate('common.error.acceptTerms') : ErrorUtils.getLatestErrorMessage(this.props.walletTerms) || '';
+        const errorMessage = this.state.error ? 'common.error.acceptTerms' : ErrorUtils.getLatestErrorMessage(this.props.walletTerms) || '';
         return (
             <>
                 <HeaderWithCloseButton

src/pages/settings/PasswordPage.js

@@ -19,6 +19,7 @@ import TextInput from '../../components/TextInput';
 import * as Session from '../../libs/actions/Session';
 import * as ErrorUtils from '../../libs/ErrorUtils';
 import ConfirmationPage from '../../components/ConfirmationPage';
+import FormHelpMessage from '../../components/FormHelpMessage';
 
 const propTypes = {
     /* Onyx Props */
@@ -201,7 +202,10 @@ class PasswordPage extends Component {
                                 {shouldShowNewPasswordPrompt && <Text style={[styles.textLabelSupporting, styles.mt1]}>{this.props.translate('passwordPage.newPasswordPrompt')}</Text>}
                             </View>
                             {_.every(this.state.errors, (error) => !error) && !_.isEmpty(this.props.account.errors) && (
-                                <Text style={styles.formError}>{ErrorUtils.getLatestErrorMessage(this.props.account)}</Text>
+                                <FormHelpMessage
+                                    isError
+                                    message={ErrorUtils.getLatestErrorMessage(this.props.account)}
+                                />
                             )}
                         </ScrollView>
                         <FixedFooter style={[styles.flexGrow0]}>

src/pages/settings/Profile/Contacts/ContactMethodDetailsPage.js

@@ -232,7 +232,7 @@ class ContactMethodDetailsPage extends Component {
                             <DotIndicatorMessage
                                 type="success"
                                 style={[styles.mb3]}
-                                messages={{0: this.props.translate('contacts.enterMagicCode', {contactMethod: formattedContactMethod})}}
+                                messages={{0: ['contacts.enterMagicCode', {contactMethod: formattedContactMethod}]}}
                             />
                             <ValidateCodeForm
                                 contactMethod={contactMethod}

src/pages/settings/Profile/Contacts/ValidateCodeForm/BaseValidateCodeForm.js

@@ -146,7 +146,7 @@ function BaseValidateCodeForm(props) {
                         <DotIndicatorMessage
                             type="success"
                             style={[styles.mt6, styles.flex0]}
-                            messages={{0: props.translate('resendValidationForm.linkHasBeenResent')}}
+                            messages={{0: 'resendValidationForm.linkHasBeenResent'}}
                         />
                     )}
                 </View>

src/pages/signin/ResendValidationForm.js

@@ -81,7 +81,7 @@ const ResendValidationForm = (props) => {
                 <DotIndicatorMessage
                     style={[styles.mb5, styles.flex0]}
                     type="success"
-                    messages={{0: props.translate(props.account.message)}}
+                    messages={{0: props.account.message}}
                 />
             )}
             {!_.isEmpty(props.account.errors) && (

src/pages/tasks/NewTaskPage.js

@@ -68,7 +68,7 @@ const NewTaskPage = (props) => {
     const [assignee, setAssignee] = React.useState({});
     const [shareDestination, setShareDestination] = React.useState({});
     const [submitError, setSubmitError] = React.useState(false);
-    const [errorMessage, setErrorMessage] = React.useState(props.translate('newTaskPage.confirmError'));
+    const [errorMessage, setErrorMessage] = React.useState('newTaskPage.confirmError');
     const [parentReport, setParentReport] = React.useState({});
 
     useEffect(() => {
@@ -80,7 +80,7 @@ const NewTaskPage = (props) => {
             const assigneeDetails = lodashGet(OptionsListUtils.getPersonalDetailsForLogins([props.task.assignee], props.personalDetails), props.task.assignee);
             if (!assigneeDetails) {
                 setSubmitError(true);
-                return setErrorMessage(props.translate('newTaskPage.assigneeError'));
+                return setErrorMessage('newTaskPage.assigneeError');
             }
             const displayDetails = TaskUtils.getAssignee(assigneeDetails);
             setAssignee(displayDetails);