Expense - Hourglass message and report header title is not displayed in Spanish

[IuliiaHerets]

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: V9. 0.51-1
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

Pre-condition:

1. Set app language to spanish
2. Have a workspace created
3. Open workspace chat
4. Create an expense

Steps:

1. Go to https://staging.new.expensify.com/home
2. Open the workspace chat
3. Open the expense
4. Note the hourglass message and report header title

Expected Result:

Hourglass message and report header title must be displayed in Spanish.

Actual Result:

Hourglass message and report header title is not displayed in Spanish.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6640789_1729501044975.Screenrecorder-2024-10-21-14-16-09-637_compress_1.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @OfstadC (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@OfstadC FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[ChavdaSachin]

Proposal

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

Hourglass message and report header title is not displayed in Spanish

What is the root cause of that problem?

It is handled from here

App/src/libs/NextStepUtils.ts

Lines 257 to 283 in da68c0b

	optimisticNextStep = {
	type,
	icon: CONST.NEXT_STEP.ICONS.HOURGLASS,
	message: [
	{
	text: 'Waiting for ',
	},
	reimburserAccountID === -1
	? {
	text: 'an admin',
	}
	: {
	text: ReportUtils.getDisplayNameForParticipant(reimburserAccountID),
	type: 'strong',
	},
	{
	text: ' to ',
	},
	{
	text: hasValidAccount ? 'pay' : 'finish setting up',
	},
	{
	text: hasValidAccount ? ' %expenses.' : ' a business bank account.',
	},
	],
	};
	break;

The whole NextStepUtils file is hard coded in English.

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

Make use of translate function for the whole NextStepUtils file to tackle current and all the future similar issues.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[FitseTLT]

Proposal

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

Expense - Hourglass message and report header title is not displayed in Spanish

What is the root cause of that problem?

1. Header title:
   We are displaying the reportName of the report directly which lacks translation
   

   App/src/libs/ReportUtils.ts

   Line 2939 in b2fc5c9

   return report.reportName;

2. Next Steps:
   We are directly displaying (without translation) the next steps here
   

   App/src/components/MoneyReportHeaderStatusBar.tsx

   Line 47 in b2fc5c9

   <RenderHTML html={messageContent} />

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

We should add the necessary copys for these cases and display them

1. Here
   

   App/src/libs/ReportUtils.ts

   Line 2939 in b2fc5c9

   return report.reportName;

   
   We can translate the reportName we can do that in the general case for both invoice and money request report we can separate the Expense (Invoice) part of the text and pass the type expense or invoice and also the id of the report to a translateLocal as params and translate it accordingly
2. For next steps we will need to create a copy for the different types of next step messages we have got, and we can get the m from here (and also from BE in case there are next steps for which we are not creating an optimistic data)
   but we will need to first identify the type of next message we have got from the nextStep.message array so that we can translate meaningfully as a sentence. Then we will pass the type of next step and the necessary params like the email and then translate Local will return us the next step HTML in text just similar to what NextStepUtils.parseMessage is doing now.

What alternative solutions did you explore? (Optional)

[OfstadC]

Will hopefully get to this today

[OfstadC]

Posting in Slack

[OfstadC]

This isn't supported currently and we don't have immediate plans to change this - closing