[$1000] Login - "Incorrect magic code..." message is not translated in 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!

---

Action Performed:

1. Go to Sign in page
2. Enter any Expensify account
3. Fill-in incorrect magic codes
4. Scroll to bottom and change to Spanish language

Expected Result:

"Incorrect magic code. Please try again or request a new code." message should be displayed in Spanish language

Actual Result:

Even the app language is changed to Spanish - the message "Incorrect magic code. Please try again or request a new code." is still displayed in English

Workaround:

Unknown

Platforms:

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

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

Version Number: 1.3.42.6

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Bug6132070_Recording__408.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015e1220542398ee6e
• Upwork Job ID: 1683951951539818496
• Last Price Increase: 2023-08-01

[melvin-bot]

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

[melvin-bot]

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

[dukenv0307]

Proposal

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

Login - "Incorrect magic code..." message is not translated in Spanish

What is the root cause of that problem?

The error display is returned by BE. It is const and we cannot translate it when the language change

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 285 in 11e9f85

{hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}

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

We should create a translation key for this error and BE should return this translation key instead of the constant error

And then we can use props.translate to change the error when the language is changed

message={props.translate(ErrorUtils.getLatestErrorMessage(props.account))}

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 285 in 11e9f85

{hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 269 in 11e9f85

{hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}

What alternative solutions did you explore? (Optional)

Instead of showing an error due to BE returns, we can create a translation error in failureData of account when we sign in fail with magic code.

[ishpaul777]

Proposal

Problem

"Incorrect magic code..." message is not translated in Spanish

Root Cause

The issue lies in the backend code, where the error message is not being sent as a phrase key. As a result, when the translateIfPhraseKey(message) function is called in FormHelpMessage, it returns the message as it is.

ref- https://github.com/Expensify/App/blob/b9508b616f3a7229365c8bd7280fd1e34cfd2f9b/src/components/FormHelpMessage.js#L39C4-L39C76
https://github.com/Expensify/App/blob/38bc5b360441063602bbcea934b302ddf159210f/src/libs/Localize/index.js#L100C1-L119C2

Proposed Changes

To address this issue, we need to send a error as a phrase key and have corresponding translation in both phrase dictionaries english and spanish
.

[hoangzinh]

Proposal

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

Login - "Incorrect magic code..." message is not translated in Spanish

What is the root cause of that problem?

In the Validate code form for Sign in step, whenever we click Sign in button, it will call this action util

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 229 in edfea4b

Session.signIn('', validateCode, twoFactorAuthCode, props.preferredLocale);

Inside this action util, when the API call is failed, we haven't set any error message in FE side yet

App/src/libs/actions/Session/index.js

Lines 339 to 348 in edfea4b

	const failureData = [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: ONYXKEYS.ACCOUNT,
	value: {
	isLoading: false,
	loadingForm: null,
	},
	},
	];

So when its failure, we can only pick the error message of BE API returning to display, and BE error is English only

App/src/pages/signin/ValidateCodeForm/BaseValidateCodeForm.js

Line 267 in edfea4b

{hasError && <FormHelpMessage message={ErrorUtils.getLatestErrorMessage(props.account)} />}

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

I think we can generate error message in FE side then display in the form in this case, because we're validating the code, most of cases it's failed due to invalid magic code.

• In the failure action of above API call, we need to set error message with translation phraseKey
  (almost same when we are failed to validate secondary login here)

  App/src/libs/actions/Session/index.js

  Lines 339 to 348 in edfea4b

  	const failureData = [
  	{
  	onyxMethod: Onyx.METHOD.MERGE,
  	key: ONYXKEYS.ACCOUNT,
  	value: {
  	isLoading: false,
  	loadingForm: null,
  	},
  	},
  	];

• When we get error to display in the form here, we need to get earliest error message instead of last error message (because last error message is always the BE error message, the earliest is the FE error message, same as validate secondary login here

[adelekennedy]

@hungvu193 this seems like a similar issue as this one - I think this is essentially a dupe?

[hoangzinh]

@adelekennedy I don't think it's a dup. Because in this GH issue, the current error message is come from BE, and in FE we haven't set the error message yet.

[hungvu193]

Yep. This is more like a BE issue

[melvin-bot]

@adelekennedy Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015e1220542398ee6e

[melvin-bot]

Triggered auto assignment to Contributor Plus for review of internal employee PR - @robertKozik (Internal)

[melvin-bot]

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

[melvin-bot]

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

[adelekennedy]

reproduced! From above this is likely internal but adding the external label so the C+ makes the final call

[robertKozik]

Sorry for overdue @adelekennedy, missed that one. Yeah I agree that this issue should be internal, as backend should return proper translation key for this error. It cannot be solved only on FE side

[melvin-bot]

Triggered auto assignment to @cristipaval (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[melvin-bot]

Current assignee @robertKozik is eligible for the Internal assigner, not assigning anyone new.

[melvin-bot]

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

[adelekennedy]

checking here @cristipaval @robertKozik how should we move forward on this one?

[cristipaval]

I'll have a look tomorrow at this one to check if it is internal.

[melvin-bot]

@cristipaval @adelekennedy @robertKozik this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[cristipaval]

The issue happens because we do not have internationalization in the backend yet and that error comes from the backend. Closing this issue for now, it will be fixed when we'll support i18n in the backend.

[ishpaul777]

Sending a translation key from backend and having a corresponding translation to key in dictionaries will resolve the issue in the mean time.