[HOLD for payment 2025-05-06][$250] Pin/Unpin and Share buttons in the Report details page are not dynamically translated when user changes language

[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.1.27-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: @hoangzinh
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Go to any report
2. Tap on the report header to open report details page
3. Log in with same credentials, on the 2nd device, change the preferred language

Expected Result:

The Pin/Unpin and Share buttons should be dynamically translated based on the current preferred language

Actual Result:

The Pin/Unpin and Share buttons still keep the previous preferred language

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Screen.Recording.2025-04-11.at.22.36.58.mov

Recording.1137.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021911854124883086871
• Upwork Job ID: 1911854124883086871
• Last Price Increase: 2025-04-14
• Automatic offers:
• ikevin127 | Reviewer | 106964768
• FitseTLT | Contributor | 106964770

Issue Owner

Current Issue Owner: @thienlnam

[melvin-bot]

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

[m-natarajan]

Proposal by @hoangzinh

Proposal

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

Pin/Unpin and Share buttons in the Report details page are not dynamically translated when user changes language

What is the root cause of that problem?

In the ReportDetailsPage, we use useMemo to cache promotedActions, but in the dependency list of useMemo, it doesn't have preferredLocale

App/src/pages/ReportDetailsPage.tsx

Lines 811 to 822 in 604acb6

	}, [
	report,
	moneyRequestAction,
	currentSearchHash,
	canJoin,
	isExpenseReport,
	shouldShowHoldAction,
	canHoldUnholdReportAction.canHoldRequest,
	transactionThreadReportID,
	isDelegateAccessRestricted,
	backTo,
	]);

Therefore, when preferredLocale is updated, it doesn't trigger useMemo to generate new promotedActions

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

1. Subscribe preferredLocale from useLocalize here

   App/src/pages/ReportDetailsPage.tsx

   Line 165 in 604acb6

   const {translate} = useLocalize();

2. Then pass it in as a dependency of useMemo above

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

No, translation issue

What alternative solutions did you explore? (Optional)

Remove useMemo here

[github-actions]

⚠️ @hoangzinh Thanks for your proposal. Please update it to follow the proposal template, as proposals are only reviewed if they follow that format (note the mandatory sections).

[FitseTLT]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-11 21:46:31 UTC.

Proposal

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

Pin/Unpin and Share buttons in the Report details page are not dynamically translated when user changes language

What is the root cause of that problem?

We set the text here via translateLocal

App/src/libs/HeaderUtils.ts

Lines 15 to 25 in 4523c69

	text: translateLocal(isPinned ? 'common.unPin' : 'common.pin'),
	onSelected: callFunctionIfActionIsAllowed(() => togglePinnedState(report.reportID, isPinned)),
	};
	}
	function getShareMenuItem(report: OnyxReport, backTo?: string): ThreeDotsMenuItem {
	return {
	icon: Expensicons.QrCode,
	text: translateLocal('common.share'),
	onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID, backTo)),
	};

then display the text directly in PromotedActionsBar

App/src/components/PromotedActionsBar.tsx

Lines 128 to 133 in 4523c69

	iconFill={theme.icon}
	// eslint-disable-next-line react/jsx-props-no-spreading
	{...props}
	/>
	</View>
	))}

so the value will not change on language change

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

The correct approach is to set translationKey instead of text like here

function getPinMenuItem(report: OnyxReport): ThreeDotsMenuItem {
    const isPinned = !!report.isPinned;

    return {
        icon: Expensicons.Pin,
        translationKey: isPinned ? 'common.unPin' : 'common.pin',
        onSelected: callFunctionIfActionIsAllowed(() => togglePinnedState(report.reportID, isPinned)),
    };
}

function getShareMenuItem(report: OnyxReport, backTo?: string): ThreeDotsMenuItem {
    return {
        icon: Expensicons.QrCode,
        translationKey: 'common.share',
        onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID, backTo)),
    };

then display it via useLocalize translate in PromotedActionsBar

App/src/components/PromotedActionsBar.tsx

Line 128 in 4523c69

iconFill={theme.icon}

                        text={translate(translationKey)}

We should do the same for other promoted actions like hold etc here
This will ensure PromotedActions to not unnecessarily be re-calculated on language change just like we do for the menuItems in here

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

N / A

What alternative solutions did you explore? (Optional)

[ashuvssut]

Proposal

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

Pin/Unpin and Share buttons in the Report details page are not dynamically translated when user changes language

What is the root cause of that problem?

This is a classic problem where the useMemo hook is using the previous reference of PromotedActions object.

• More specifically, "the previous reference PromotedActions object" means the first render's calculated reference of PromotedActions object

App/src/pages/ProfilePage.tsx

Lines 162 to 166 in b83750a

	const promotedActions = useMemo(() => {
	const result: PromotedAction[] = [];
	if (report) {
	result.push(PromotedActions.pin(report));
	}

Adding preferredLocale in the useMemo dependency will not fix the issue. The Actual root cause is that we are using the "old PromotedAction object reference even when we change the preferredLocale state

const {preferredLocale} = useLocalize();
const promotedActions = useMemo(() => {
   // Even after adding preferredLocale as dependency, we are still using the old reference of `PromotedActions` object here.
 },[accountID, isCurrentUser, loginParams, report, preferredLocale]);

What "old reference" are we exactly using within the "old PromotedAction object"?

Many methods in the PromotedAction object use the translateLocal function.
However, translateLocal internally calls the old BaseLocaleListener.getPreferredLocale() reference, which always returns the outdated value of preferredLocale from BaseLocaleListener.ts

translateLocal function:-

App/src/libs/Localize/index.ts

Lines 170 to 172 in b83750a

	function translateLocal<TPath extends TranslationPaths>(phrase: TPath, ...parameters: TranslationParameters<TPath>) {
	return translate(BaseLocaleListener.getPreferredLocale(), phrase, ...parameters);
	}

BaseLocaleListener.getPreferredLocale() function:-

App/src/libs/Localize/LocaleListener/BaseLocaleListener.ts

Lines 26 to 34 in b83750a

	function getPreferredLocale(): BaseLocale {
	return preferredLocale;
	}
	const BaseLocaleListener = {
	connect,
	getPreferredLocale,
	};

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

We need to recreate PromotedActions object outside the useMemo like this

const _PromotedActions = useMemo(() => ({...PromotedActions}), [preferredLocale]);

and then use this new _PromotedActions object as the useMemo dependency:

const {preferredLocale} = useLocalize();
const _PromotedActions = useMemo(() => ({...PromotedActions}), [preferredLocale]);
const promotedActions = useMemo(() => {
   // use `_PromotedActions` instead of `PromotedActions` everywhere
 },[accountID, isCurrentUser, loginParams, report, _PromotedActions]);

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

N/A

What alternative solutions did you explore? (Optional)

N/A

Extra details

The logics I explained above need to be implemented in 2 files specifically:-

• ProfilePage.tsx
• ReportDetailsPage.tsx

Demo video comparing Case 1: Adding preferredLocale to the useMemo dependency array vs Case 2: Recreating the PromotedActions object outside the useMemo block and then addingPromotedActions to the useMemo dependency array.

[melvin-bot]

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

[melvin-bot]

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