[HOLD for payment 2024-02-22] [$500] Language - Error message on New contact method page remains on Spanish

[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?: Y
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 same user on two devices
2. Navigate to New dot on mobile device
3. Go to Staging> Preferences> Language> Spanish
4. Go to Staging> Profile> Contact method> New contact method
5. Add same email as login email so error message will trigger
6. Navigate to other device and change the language to English

Expected Result:

Contact method with error message should appear on English language

Actual Result:

Error message on New contact method page remains on Spanish when other device change the language to English

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

Bug6345811_1705525925897.Recording__1838.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01926d8327e3320b3a
• Upwork Job ID: 1747737257450725376
• Last Price Increase: 2024-01-24
• Automatic offers:
• ikevin127 | Contributor | 28132612

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01926d8327e3320b3a

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rushatgabhane (External)

[ikevin127]

Proposal

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

Error message on New contact method page remains on Spanish when other device change the language to English.

What is the root cause of that problem?

This happens because when we called the validate memozied function by clicking the Add button while the translation was in Spanish but then we changed the language back to English from the other device, the validate function didn't get called again in order to update the translation to English.

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

Add logic that calls the validate function when preferredLocale changes.

For this we would do the following:

App/src/components/Form/FormProvider.js

Line 387 in 4b7b8f2

{_.isFunction(children) ? children({inputValues}) : children}

• in FormProvider.js pass down the onValidate function next to the already passed inputValues
• in NewContactMethodPage.js pass preferredLocale to props at the bottom via withOnyx
• in the same component under the FormProvider use have an if that checks if prevPreferredLocale !== props.preferredLocale
• if true means language was changed then call onValidate(inputValues) to call the validate function again

This will update the error translation to English at the same time with the other translations.

What alternative solutions did you explore? (Optional)

For a more holistic approach we can have a useEffect directly within FormProvider.js where we check prevPreferredLocale !== preferredLocale and if true we call onValidate(inputValues);

Videos

MacOS: Chrome | iOS: Native

Screen.Recording.2024-01-18.at.02.21.19.mov

[aswin-s]

Proposal

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

Error messages in forms doesn't get updated on locale change

What is the root cause of that problem?

Error messages for form inputs gets set by the validate function prop provided to the FormProvider.

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.js

Line 121 in 4b7b8f2

validate={validate}

App/src/pages/settings/Profile/Contacts/NewContactMethodPage.js

Lines 66 to 86 in 4b7b8f2

	const validate = React.useCallback(
	(values) => {
	const phoneLogin = LoginUtils.getPhoneLogin(values.phoneOrEmail);
	const validateIfnumber = LoginUtils.validateNumber(phoneLogin);
	const errors = {};
	if (_.isEmpty(values.phoneOrEmail)) {
	ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.contactMethodRequired');
	}
	if (!_.isEmpty(values.phoneOrEmail) && !(validateIfnumber || Str.isValidEmail(values.phoneOrEmail))) {
	ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.invalidContactMethod');
	}
	if (!_.isEmpty(values.phoneOrEmail) && lodashGet(props.loginList, validateIfnumber || values.phoneOrEmail.toLowerCase())) {
	ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.enteredMethodIsAlreadySubmited');
	}
	return errors;
	},

The validate method gets invoked on submit, onBlur and onValue change events. A locale change event doesn't retrigger the validate function. So the error messages continue to be in the same locale as it was previously set.

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

As this happens to all Forms in the app, fix should be global. Listen to locale changes in FormProvider and invoke validate method if there are any existing errors in the form.

const FormProvider = forwardRef(
    ({validate, formID, shouldValidateOnBlur, shouldValidateOnChange, children, formState, network, enabledWhenOffline, draftValues, onSubmit, ...rest}, forwardedRef) => {
        const inputRefs = useRef({});
        const {preferredLocale} = useLocalize();


useEffect(() => {
  if (_.keys(errors).length === 0) {
    return;
  }
  const trimmedStringValues = ValidationUtils.prepareValues(inputValues);
  onValidate(trimmedStringValues);
  // Run this effect only on locale change
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, [preferredLocale]);

Result

Before

Screen.Recording.2024-01-18.at.5_out.mp4

After

Screen.Recording.2024-01-18.at.6_out.mp4

What alternative solutions did you explore? (Optional)

None (edited)

[samilabud]

Proposal

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

Language - Error message on New contact method page remains on Spanish

What is the root cause of that problem?

We are not running the validate method when we detect the language was changed in NewContactMethodPage.

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

The simplest solution is adding a reference to submit button to call validate function when preferredLocale change, we can get this with useEffect:

useEffect(() => (submitButtonRef.current ? submitButtonRef.current.click() : null), [preferredLocale]);

We get this sending a submit button ref in FormProvider like (submitButtonRef={submitButtonRef}):

const submitButtonRef = useRef(null);
.
.
.
<FormProvider
                formID={ONYXKEYS.FORMS.NEW_CONTACT_METHOD_FORM}
                validate={validate}
                onSubmit={addNewContactMethod}
                submitButtonText={props.translate('common.add')}
                style={[styles.flexGrow1, styles.mh5]}
                submitButtonRef={submitButtonRef}
                enabledWhenOffline
            >

Of course we should add the ref to reach the submit button, like ( ref={submitButtonRef}):

                   <Button
                        ref={submitButtonRef}
                        success
                        pressOnEnter={!disablePressOnEnter}
                        text={buttonText}
                        style={style}
                        onPress={onSubmit}
                        isDisabled={isDisabled}
                        isLoading={isLoading}
                        danger={isSubmitActionDangerous}
                        medium={useSmallerSubmitButtonSize}
                    />

Result:

Translate.on.submit.mp4

[DylanDylann]

Proposal

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

• Language - Error message on New contact method page remains on Spanish

What is the root cause of that problem?

• We are using the addErrorMessage function in validate to create the errors.
• In case of this bug, when the language is English, addErrorMessage will return the error like:

{
    "phoneOrEmail": [
        "The Entered Contact Method already exists.",
        {
            "isTranslated": true
        }
    ]
}

• The above error is passed down to the FormHelpMessage component and in here, we use the translatedMessage to display the error text.
  

  App/src/components/FormHelpMessage.tsx

  Line 36 in 4da7fda

  const translatedMessage = Localize.translateIfPhraseKey(message);

• The translatedMessage is always "The Entered Contact Method already exists." because isTranslated is true, regardless the current language is changed or not.
• This error appears in other forms that use the getErrorMessage as well.

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

1. Idea:

• In the error that is created by the getErrorMessage, we need to store the translation key as well:

{
    "phoneOrEmail": [
        "The Entered Contact Method already exists.",
        {
            "isTranslated": true,
            "key": "contacts.genericFailureMessages.enteredMethodIsAlreadySubmited"
        }
    ]
}

• And, when displaying the error text in FormHelpMessage, based on the translation key, we display the error.

2. Implement:

• First, we need to update the addErrorMessage to:

function addErrorMessage<TKey extends TranslationPaths>(errors: ErrorsList, inputID?: string, message?: TKey) {
...
    if (!error) {
+      errorList[inputID] = [translatedMessage, {isTranslated: true, key: message}];
    }
... 
}

• Then, update translateIfPhraseKey to:

+ function translateIfPhraseKey(message: MaybePhraseKey, forceTranslate: boolean = false): string {
...
        if (variables?.isTranslated) {
+            if (forceTranslate && variables.key) {
+              return translateLocal(variables.key as TranslationPaths, variables as never);
+          }
            return phrase;
        }
...
}

• Finally, update the below:
  

  App/src/components/FormHelpMessage.tsx

  Line 36 in 4da7fda

  const translatedMessage = Localize.translateIfPhraseKey(message);

  
  to:

+  const translatedMessage = Localize.translateIfPhraseKey(message, true); 

What alternative solutions did you explore? (Optional)

• In the error that is created by the getErrorMessage, we need to store the translation key as I mentioned in the main solution:
• And, once the Language changes, set the isValidated in each error to false

[shahinyan11]

Proposal

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

Language - Error message on New contact method page remains on Spanish

What is the root cause of that problem?

Error messages are generated by the validate function , which is not called after changing the language.

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

We can jus return translation keys instead translated messages in addErrorMessage function. and use this keys to display text. To do that we can make below changes

1. Change this line with below.

const translatedMessage = message;

2. Change this line with below

 errorText: Localize.translateIfPhraseKey(errors[inputID]) || fieldErrorMessage,

What alternative solutions did you explore? (Optional)