[PAID] [$1000] The error is displayed in Spanish on invalid number chat even when the language preference has changed to English

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open android
2. Go offline
3. Change language to Spanish
4. Click on new chat with invalid number , example 122455
5. Send messages
6. Now go back and change the language to english
7. Go to the same chat again and turn your wifi on
8. Notice that the error below the messages is shown in Spanish even when the language was already changed to English in offline mode. Except for the error message, every other sentence are shown in English.

Expected Result:

The error message should be shown in English when the language was changed in the preference

Actual Result:

The error is displayed in Spanish on invalid number chat even when the language preference has changed to English

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.8.8
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
Notes/Photos/Videos: Any additional supporting documentation

error.mp4

az_recorder_20230429_234232.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @priya-zha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1682764542821759

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e6c0bedde567e47c
• Upwork Job ID: 1653077149487792128
• Last Price Increase: 2023-05-08

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01e6c0bedde567e47c

[MelvinBot]

Current assignee @kevinksullivan is eligible for the External assigner, not assigning anyone new.

[MelvinBot]

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

[MelvinBot]

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

[StevenKKC]

Proposal

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

The error is displayed in Spanish on invalid number chat even when the language preference has changed to English

What is the root cause of that problem?

The user's comment is saved by onSubmitComment.

App/src/pages/home/ReportScreen.js

Lines 176 to 178 in d0f7955

	onSubmitComment(text) {
	Report.addComment(getReportID(this.props.route), text);
	}

And addComment function calls addActions.

App/src/libs/actions/Report.js

Lines 316 to 318 in d0f7955

	function addComment(reportID, text) {
	addActions(reportID, text);
	}

In addActions function, if an error occurs, the failure message is generated by Localize.translateLocal('report.genericAddCommentFailureMessage'), and is saved to Onyx. That is, the error will be saved in Spanish.

App/src/libs/actions/Report.js

Lines 265 to 271 in d0f7955

	const failureData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
	value: _.mapObject(optimisticReportActions, action => ({...action, errors: {[DateUtils.getMicroseconds()]: Localize.translateLocal('report.genericAddCommentFailureMessage')}})),
	},
	];

So if send the message fails, the translated Spanish error message is saved.

And the translated message is displayed by <Text key={i} style={styles.offlineFeedback.text}>{message}</Text>.

App/src/components/DotIndicatorMessage.js

Lines 58 to 62 in d0f7955

	<View style={styles.offlineFeedback.textContainer}>
	{_.map(sortedMessages, (message, i) => (
	<Text key={i} style={styles.offlineFeedback.text}>{message}</Text>
	))}
	</View>

So even though the language preference has changed to English, the error will be displayed in Spanish.

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

If the error occurs, instead of saving the translated error message, it would just save the error key directly to Onyx. (ex. report.genericAddCommentFailureMessage).

const failureData = [
{
onyxMethod: Onyx.METHOD.MERGE,
key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
value: _.mapObject(optimisticReportActions, action => ({...action, errors: {[DateUtils.getMicroseconds()]: 'report.genericAddCommentFailureMessage'}})),
},
];

When showing the error message, we first check the error key exists in the user's translation dictionary.

For this we would create a utility function inside Localize.

This utility function checks whether the error key exists in the translation dictionary of the user.
If the error key exists in the translation dictionary, then return the corresponding translated error message.
Otherwise return the error key itself. (In this case, the error key is the error message created and translated by the previous version.)

function translateError(phrase) {
const desiredLanguage = BaseLocaleListener.getPreferredLocale();

const defaultLanguageDictionary = lodashGet(translations, desiredLanguage, {});
const translatedPhrase = lodashGet(defaultLanguageDictionary, phrase);
if (translatedPhrase) {
return Str.result(translatedPhrase, {});
}

return phrase;
}

Now we can use this utility function to show the error message.
<Text key={i} style={styles.offlineFeedback.text}>{Localize.translateError(message)}</Text>

We can use this approach to cover all cases where we save the translation error to Onyx.

What alternative solutions did you explore? (Optional)

None.