[HOLD for payment 2025-01-30] [$250] Workspace not translated when choose recipient

[m-natarajan]

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: 9.0.85-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
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: @dukenv0307
Slack conversation (hyperlinked to channel name): expensify_bugs

Action Performed:

1. Change the app language to Spanish
2. Click FAB button -> Create Expense
3. Enter amount -> Click next
4. Observe everything in Spanish
5. Change the app language to English
6. Click FAB button -> Create Expense -> Enter amount

Expected Result:

'workspace' is displayed in English

Actual Result:

'workspace' has not been translated, it is still in Spanish

Workaround:

unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Recording.889.mp4

bug-resize.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021879298486790010202
• Upwork Job ID: 1879298486790010202
• Last Price Increase: 2025-01-14

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

Triggered auto assignment to @Christinadobrzyn (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.

[daledah]

Proposal

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

Workspace not translated when choose recipient

What is the root cause of that problem?

In ReportUtils, function getChatRoomSubtitle we use Localize.translateLocal to translate here

App/src/libs/ReportUtils.ts

Lines 4345 to 4347 in 7b8bb55

	if ((isPolicyExpenseChat(report) && !!report?.isOwnPolicyExpenseChat) || isExpenseReport(report)) {
	return translateLocal('workspace.common.workspace');
	}

it will not re-render when we change the app language

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

We should use Localize.translate(preferredLocale, 'workspace.common.workspace') like the way we did with other places

1. In OptionsListContextProvider we need to get preferredLocale from Onyx

    const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE);

2. Add a new param preferredLocale to function createOptionList and pass it from OptionsListContextProvider

App/src/libs/OptionsListUtils.ts

Line 894 in 7b8bb55

function createOptionList(personalDetails: OnyxEntry<PersonalDetailsList>, reports?: OnyxCollection<Report>) {

3. Add a new param preferredLocale to function createOption and pass it from createOptionList

App/src/libs/OptionsListUtils.ts

Lines 628 to 634 in 7b8bb55

	function createOption(
	accountIDs: number[],
	personalDetails: OnyxInputOrEntry<PersonalDetailsList>,
	report: OnyxInputOrEntry<Report>,
	reportActions: ReportActions,
	config?: PreviewConfig,
	): ReportUtils.OptionData {

4. In function createOption pass preferredLocale to getChatRoomSubtitle and update this function to use Localize.translate

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

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.

[melvin-bot]

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

[melvin-bot]

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

[drminh2807]

🚨 Edited by proposal-police: This proposal was edited at 2025-01-16 08:38:40 UTC.

Proposal

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

Workspace not translated when choose recipient

What is the root cause of that problem?

Report options wont change when preferedLocal change

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

Add preferredLocale to useEffect dependencies

const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE);

App/src/components/OptionListContextProvider.tsx

Lines 65 to 75 in 7b9e55e

	setOptions((prevOptions) => {
	const newOptions = {
	...prevOptions,
	reports: newReports,
	};
	return newOptions;
	});
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	}, [reports]);

   }, [reports, preferredLocale]);

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

Add unit test to make sure options are workspace in Spanish when language changes next to

App/tests/unit/OptionsListUtilsTest.ts

Lines 395 to 401 in 5133090

	beforeEach(() => {
	OPTIONS = OptionsListUtils.createOptionList(PERSONAL_DETAILS, REPORTS);
	OPTIONS_WITH_CONCIERGE = OptionsListUtils.createOptionList(PERSONAL_DETAILS_WITH_CONCIERGE, REPORTS_WITH_CONCIERGE);
	OPTIONS_WITH_CHRONOS = OptionsListUtils.createOptionList(PERSONAL_DETAILS_WITH_CHRONOS, REPORTS_WITH_CHRONOS);
	OPTIONS_WITH_RECEIPTS = OptionsListUtils.createOptionList(PERSONAL_DETAILS_WITH_RECEIPTS, REPORTS_WITH_RECEIPTS);
	OPTIONS_WITH_WORKSPACE_ROOM = OptionsListUtils.createOptionList(PERSONAL_DETAILS, REPORTS_WITH_WORKSPACE_ROOMS);
	});

    it('createOptionList() localization', () => {
        const reports = OptionsListUtils.createOptionList(PERSONAL_DETAILS, REPORTS).reports;
        expect(reports.at(9)?.subtitle).toBe('Workspace');
        return waitForBatchedUpdates()
            .then(() => Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES))
            .then(() => {
                const newReports = OptionsListUtils.createOptionList(PERSONAL_DETAILS, REPORTS).reports;
                expect(newReports.at(9)?.subtitle).toBe('Espacio de trabajo');
            });
    });

What alternative solutions did you explore? (Optional)

N/A

[parasharrajat]

I believe, that passing down the translate function is extraneous dependency to the util functions. So just forcing the component to recalculate when locale changes would be good enough for this issue which can be done by adding dependency to the effect. @drminh2807 Did you check if the compiler does not remove the extra dependency on runtime?

[drminh2807]

The compiler will not remove the extra dependency at runtime.

[parasharrajat]

Ok, then it is great. I believe we can go with @drminh2807's solution. It seems like a clever way of rendering when language changes and because language change is not a frequent action, it will not create performance overhead.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[parasharrajat]

@drminh2807 Let's add a unit test to make sure options are rendered in Spanish when language changes.

[drminh2807]

@parasharrajat sure, I just update my proposal to add a unit test

[melvin-bot]

📣 @drminh2807 You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[drminh2807]

I applied Upwork job, Please check

[Christinadobrzyn]

@drminh2807 can you please send me a link to your Upwork profile? TY!

[drminh2807]

@Christinadobrzyn here is my upwork profile https://www.upwork.com/freelancers/~0147ffcb350b578b95

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.88-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: 55246 Workspace not translated when choose recipient #55380

If no regressions arise, payment will be issued on 2025-01-30. 🎊

For reference, here are some details about the assignees on this issue:

• @drminh2807 $250 - requires payment Upwork offer - https://www.upwork.com/nx/wm/offer/105909404
• @parasharrajat $250 - requires payment through NewDot Manual Requests

[melvin-bot]

@parasharrajat @Christinadobrzyn @parasharrajat The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[Christinadobrzyn]

Payment is later this week

@parasharrajat do we need a regression test for this?

I don't think @dukenv0307 worked on this right, it was just @parasharrajat and @drminh2807?

[parasharrajat]

Nope, we don't need the steps here. Yes, @dukenv0307 didn't work on this?

[Christinadobrzyn]

Thanks @parasharrajat!

Payment is coming up - The payment summary is here - #55246 (comment)

[melvin-bot]

Payment Summary

Upwork Job

• ROLE: @drminh2807 paid $250 via Upwork https://www.upwork.com/nx/wm/offer/105909404
• Reviewer: @parasharrajat owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1879298486790010202/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[Christinadobrzyn]

Payment day - no regression test for this - payment summary here - #55246 (comment)

@parasharrajat please make sure to request payment in ND. Closing this out!

[parasharrajat]

Payment requested as per #55246 (comment)

[JmillsExpensify]

$250 approved for @parasharrajat