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

lanitochka17 · 2024-01-17T21:46:45Z

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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:

Login same user on two devices
Navigate to New dot on mobile device
Go to Staging> Preferences> Language> Spanish
Go to Staging> Profile> Contact method> New contact method
Add same email as login email so error message will trigger
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?

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 · 2024-01-17T21:46:49Z

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

melvin-bot · 2024-01-17T21:46:50Z

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

melvin-bot · 2024-01-17T21:46:55Z

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

ikevin127 · 2024-01-17T23:32:33Z

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 · 2024-01-18T00:36:18Z

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 · 2024-01-18T00:38:49Z

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 · 2024-01-18T07:02:18Z

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?

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.

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 · 2024-01-18T07:29:55Z

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

Change this line with below.

const translatedMessage = message;

Change this line with below

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

What alternative solutions did you explore? (Optional)

michaelhaxhiu · 2024-01-23T20:34:54Z

@rushatgabhane let's get review on these proposal when you have a chance

melvin-bot · 2024-01-24T16:00:08Z

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

rushatgabhane · 2024-01-24T19:09:58Z

useEffect directly within FormProvider.js where we check prevPreferredLocale !== preferredLocale and if true we call onValidate(inputValues)

I like @ikevin127's alternative proposal #34684 (comment)
🎀 👀 🎀

melvin-bot · 2024-01-24T19:10:06Z

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

DylanDylann · 2024-01-24T19:12:22Z

@rushatgabhane What do you think about my proposal here?

DylanDylann · 2024-01-24T19:33:57Z

@rushatgabhane @mountiny I mentioned the RCA in my proposal. This bug does not appear on all the pages that use FormProvider (you can try the Address page, ...), just appears on the pages that use addErrorMessage (This is not mentioned in the selected proposal).
Also, i think RCA step is very important in this case, rather than just addressing its symptoms. By understanding the root cause, we can develop more effective and sustainable solutions.

mountiny · 2024-01-24T20:57:35Z

@rushatgabhane interesting points from @DylanDylann if this is not happening across different forms. What do you think?

rushatgabhane · 2024-01-25T07:44:37Z

@DylanDylann

We are already passing the translation key, right?

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

Line 82 in 0d0b0a8

    
           ErrorUtils.addErrorMessage(errors, 'phoneOrEmail', 'contacts.genericFailureMessages.enteredMethodIsAlreadySubmited');

DylanDylann · 2024-01-25T07:48:38Z

@rushatgabhane Yes. We are passing the translation key, but the addErrorMessage will return something like:

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

As you can see, when the language changes, we do not have translation key to render the correct text

DylanDylann · 2024-01-30T02:49:16Z

@rushatgabhane Do you have any feedback about my comment here?

ikevin127 · 2024-01-30T10:14:59Z

Can I get assigned so I can start working on a PR as per reviewer decision here #34684 (comment) ?

It's been 6 days since the reviewer's decision without any change or re-assignment.

cc @mountiny @michaelhaxhiu

ikevin127 · 2024-02-15T09:04:22Z

Looks like the automation might've failed to set the 7-day hold for payment since the PR #35509 (comment) was deployed to production ~4 hours ago 🧐

rushatgabhane · 2024-02-20T04:01:08Z

requested $500 on newdot here - https://staging.new.expensify.com/r/6728438891608723

rushatgabhane · 2024-02-20T04:01:27Z

@laurenreidexpensify could you please attach payment summary, thanks 🙇

laurenreidexpensify · 2024-02-20T11:27:01Z

Payment Summary:

Contributor: $500 @ikevin127 to be paid in Upwork on 22 Feb
C+: $500 @rushatgabhane to be paid in newdot on 22 Feb

laurenreidexpensify · 2024-02-20T11:27:17Z

@rushatgabhane can you do checklist thanks!

laurenreidexpensify · 2024-02-22T10:25:46Z

Payment Summary:

Contributor: $500 @ikevin127 paid in Upwork on 22 Feb
C+: $500 @rushatgabhane pls request payment in newdot

Outstanding action: checklist / regression test confirmation from @rushatgabhane

JmillsExpensify · 2024-02-23T17:11:02Z

$500 approved for @rushatgabhane based on summary above.

rushatgabhane · 2024-02-26T16:36:04Z

The PR that introduced the bug has been identified. Link to the PR: Status clear after #24620
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: https://github.com/Expensify/App/pull/24620/files#r1516857330
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N.A.
Determine if we should create a regression test for this bug. - Yes
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again
1. Login with the same account on two instances (or devices).
2. Navigate to ND on one of the instance (or device).
3. Go to Settings > Preferences > Language > Spanish.
4. Go to Settings > Profile > Contact method > New contact method.
5. Add same email as account login email so an error message will appear.
6. Navigate to the other instance (or device) and change the language to English.
7. Observe that the other instance (or device), when the language changes from Spanish -> English, the error is translated as well.

laurenreidexpensify · 2024-03-01T07:35:00Z

@rushatgabhane bump to wrap up thanks

melvin-bot · 2024-03-04T15:11:19Z

@rushatgabhane, @mountiny, @ikevin127, @laurenreidexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

laurenreidexpensify · 2024-03-06T13:09:22Z

@rushatgabhane can we get this one wrapped in next day pls :) Thanks!

rushatgabhane · 2024-03-07T21:30:39Z

@laurenreidexpensify sorry for the delay. updated the checklist : )

lanitochka17 added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jan 17, 2024

melvin-bot bot changed the title ~~Language - Error message on New contact method page remains on Spanish~~ [$500] Language - Error message on New contact method page remains on Spanish Jan 17, 2024

melvin-bot bot assigned michaelhaxhiu Jan 17, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jan 17, 2024

melvin-bot bot assigned rushatgabhane Jan 17, 2024

melvin-bot bot added the Overdue label Jan 22, 2024

melvin-bot bot removed the Overdue label Jan 23, 2024

melvin-bot bot assigned mountiny Jan 24, 2024

melvin-bot bot added the Overdue label Jan 29, 2024

laurenreidexpensify added Weekly KSv2 and removed Daily KSv2 labels Feb 2, 2024

mountiny changed the title ~~[$500] Language - Error message on New contact method page remains on Spanish~~ [HOLD for payment 2024-02-23] [$500] Language - Error message on New contact method page remains on Spanish Feb 15, 2024

mountiny changed the title ~~[HOLD for payment 2024-02-23] [$500] Language - Error message on New contact method page remains on Spanish~~ [HOLD for payment 2024-02-22] [$500] Language - Error message on New contact method page remains on Spanish Feb 15, 2024

mountiny added Awaiting Payment Auto-added when associated PR is deployed to production and removed Reviewing Has a PR in review labels Feb 15, 2024

melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Feb 21, 2024

melvin-bot bot added the Overdue label Feb 26, 2024

melvin-bot bot added Overdue and removed Overdue labels Feb 26, 2024

melvin-bot bot added Overdue and removed Overdue labels Mar 1, 2024

melvin-bot bot removed the Overdue label Mar 6, 2024

rushatgabhane mentioned this issue Mar 7, 2024

Status clear after #24620

Merged

58 tasks

melvin-bot bot added the Overdue label Mar 11, 2024

laurenreidexpensify closed this as completed Mar 11, 2024

melvin-bot bot removed the Overdue label Mar 11, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

lanitochka17 commented Jan 17, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jan 17, 2024

melvin-bot bot commented Jan 17, 2024

melvin-bot bot commented Jan 17, 2024

ikevin127 commented Jan 17, 2024 •

edited

Loading

aswin-s commented Jan 18, 2024

samilabud commented Jan 18, 2024

DylanDylann commented Jan 18, 2024 •

edited

Loading

shahinyan11 commented Jan 18, 2024 •

edited

Loading

michaelhaxhiu commented Jan 23, 2024

melvin-bot bot commented Jan 24, 2024

rushatgabhane commented Jan 24, 2024

melvin-bot bot commented Jan 24, 2024

DylanDylann commented Jan 24, 2024

DylanDylann commented Jan 24, 2024 •

edited

Loading

mountiny commented Jan 24, 2024

rushatgabhane commented Jan 25, 2024 •

edited

Loading

DylanDylann commented Jan 25, 2024

DylanDylann commented Jan 30, 2024

ikevin127 commented Jan 30, 2024

ikevin127 commented Feb 15, 2024

rushatgabhane commented Feb 20, 2024

rushatgabhane commented Feb 20, 2024

laurenreidexpensify commented Feb 20, 2024

laurenreidexpensify commented Feb 20, 2024

laurenreidexpensify commented Feb 22, 2024

JmillsExpensify commented Feb 23, 2024

rushatgabhane commented Feb 26, 2024 •

edited

Loading

laurenreidexpensify commented Mar 1, 2024

melvin-bot bot commented Mar 4, 2024

laurenreidexpensify commented Mar 6, 2024

rushatgabhane commented Mar 7, 2024

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

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

Comments

lanitochka17 commented Jan 17, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Jan 17, 2024

melvin-bot bot commented Jan 17, 2024

melvin-bot bot commented Jan 17, 2024

ikevin127 commented Jan 17, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Videos

aswin-s commented Jan 18, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

samilabud commented Jan 18, 2024

Proposal

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

What is the root cause of that problem?

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

DylanDylann commented Jan 18, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

shahinyan11 commented Jan 18, 2024 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

michaelhaxhiu commented Jan 23, 2024

melvin-bot bot commented Jan 24, 2024

rushatgabhane commented Jan 24, 2024

melvin-bot bot commented Jan 24, 2024

DylanDylann commented Jan 24, 2024

DylanDylann commented Jan 24, 2024 • edited Loading

mountiny commented Jan 24, 2024

rushatgabhane commented Jan 25, 2024 • edited Loading

DylanDylann commented Jan 25, 2024

DylanDylann commented Jan 30, 2024

ikevin127 commented Jan 30, 2024

ikevin127 commented Feb 15, 2024

rushatgabhane commented Feb 20, 2024

rushatgabhane commented Feb 20, 2024

laurenreidexpensify commented Feb 20, 2024

laurenreidexpensify commented Feb 20, 2024

laurenreidexpensify commented Feb 22, 2024

JmillsExpensify commented Feb 23, 2024

rushatgabhane commented Feb 26, 2024 • edited Loading

laurenreidexpensify commented Mar 1, 2024

melvin-bot bot commented Mar 4, 2024

laurenreidexpensify commented Mar 6, 2024

rushatgabhane commented Mar 7, 2024

lanitochka17 commented Jan 17, 2024 •

edited by melvin-bot bot

Loading

ikevin127 commented Jan 17, 2024 •

edited

Loading

DylanDylann commented Jan 18, 2024 •

edited

Loading

shahinyan11 commented Jan 18, 2024 •

edited

Loading

DylanDylann commented Jan 24, 2024 •

edited

Loading

rushatgabhane commented Jan 25, 2024 •

edited

Loading

rushatgabhane commented Feb 26, 2024 •

edited

Loading