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

src/components/HeaderWithBackButton/types.ts

@@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx';
 import type {PopoverMenuItem} from '@components/PopoverMenu';
 import type {Action} from '@hooks/useSingleExecution';
 import type {StepCounterParams} from '@src/languages/params';
+import type {TranslationPaths} from '@src/languages/types';
 import type {AnchorPosition} from '@src/styles';
 import type {Policy, Report} from '@src/types/onyx';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
@@ -15,8 +16,8 @@ type ThreeDotsMenuItem = {
     /** An icon element displayed on the left side */
     icon: IconAsset;
 
-    /** Text label */
-    text: string;
+    /** Translation key for the label */
+    translationKey: TranslationPaths;
 
     /** A callback triggered when the item is selected */
     onSelected: () => void;

src/components/PromotedActionsBar.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getPinMenuItem, getShareMenuItem} from '@libs/HeaderUtils';
-import {translateLocal} from '@libs/Localize';
 import isSearchTopmostFullScreenRoute from '@libs/Navigation/helpers/isSearchTopmostFullScreenRoute';
 import Navigation from '@libs/Navigation/Navigation';
 import {changeMoneyRequestHoldStatus} from '@libs/ReportUtils';
@@ -50,7 +50,7 @@ const PromotedActions = {
     join: (report) => ({
         key: CONST.PROMOTED_ACTIONS.JOIN,
         icon: Expensicons.ChatBubbles,
-        text: translateLocal('common.join'),
+        translationKey: 'common.join',
         onSelected: callFunctionIfActionIsAllowed(() => {
             Navigation.dismissModal();
             joinRoom(report);
@@ -59,7 +59,7 @@ const PromotedActions = {
     message: ({reportID, accountID, login}) => ({
         key: CONST.PROMOTED_ACTIONS.MESSAGE,
         icon: Expensicons.CommentBubbles,
-        text: translateLocal('common.message'),
+        translationKey: 'common.message',
         onSelected: () => {
             if (reportID) {
                 Navigation.navigateToReportWithPolicyCheck({reportID});
@@ -79,7 +79,7 @@ const PromotedActions = {
     hold: ({isTextHold, reportAction, isDelegateAccessRestricted, setIsNoDelegateAccessMenuVisible, currentSearchHash}) => ({
         key: CONST.PROMOTED_ACTIONS.HOLD,
         icon: Expensicons.Stopwatch,
-        text: translateLocal(`iou.${isTextHold ? 'hold' : 'unhold'}`),
+        translationKey: `iou.${isTextHold ? 'hold' : 'unhold'}`,
         onSelected: () => {
             if (isDelegateAccessRestricted) {
                 setIsNoDelegateAccessMenuVisible(true); // Show the menu
@@ -111,21 +111,23 @@ type PromotedActionsBarProps = {
 function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBarProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
 
     if (promotedActions.length === 0) {
         return null;
     }
 
     return (
         <View style={[styles.flexRow, styles.ph5, styles.mb5, styles.gap2, styles.mw100, styles.w100, styles.justifyContentCenter, containerStyle]}>
-            {promotedActions.map(({key, onSelected, ...props}) => (
+            {promotedActions.map(({key, onSelected, translationKey, ...props}) => (
                 <View
                     style={[styles.flex1, styles.mw50]}
                     key={key}
                 >
                     <Button
                         onPress={onSelected}
                         iconFill={theme.icon}
+                        text={translate(translationKey)}
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...props}
                     />

src/libs/HeaderUtils.ts

@@ -4,23 +4,22 @@ import ROUTES from '@src/ROUTES';
 import type OnyxReport from '@src/types/onyx/Report';
 import {togglePinnedState} from './actions/Report';
 import {callFunctionIfActionIsAllowed} from './actions/Session';
-import {translateLocal} from './Localize';
 import Navigation from './Navigation/Navigation';
 
 function getPinMenuItem(report: OnyxReport): ThreeDotsMenuItem {
     const isPinned = !!report.isPinned;
 
     return {
         icon: Expensicons.Pin,
-        text: translateLocal(isPinned ? 'common.unPin' : 'common.pin'),
+        translationKey: 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'),
+        translationKey: 'common.share',
         onSelected: () => Navigation.navigate(ROUTES.REPORT_WITH_ID_DETAILS_SHARE_CODE.getRoute(report?.reportID, backTo)),
     };
 }

src/libs/PersonalDetailsUtils.ts

@@ -63,7 +63,13 @@ Onyx.connect({
 
 const regexMergedAccount = new RegExp(CONST.REGEX.MERGED_ACCOUNT_PREFIX);
 
-function getDisplayNameOrDefault(passedPersonalDetails?: Partial<PersonalDetails> | null, defaultValue = '', shouldFallbackToHidden = true, shouldAddCurrentUserPostfix = false): string {
+function getDisplayNameOrDefault(
+    passedPersonalDetails?: Partial<PersonalDetails> | null,
+    defaultValue = '',
+    shouldFallbackToHidden = true,
+    shouldAddCurrentUserPostfix = false,
+    youAfterTranslation = youTranslation,
+): string {
     let displayName = passedPersonalDetails?.displayName ?? '';
 
     let login = passedPersonalDetails?.login ?? '';
@@ -84,7 +90,7 @@ function getDisplayNameOrDefault(passedPersonalDetails?: Partial<PersonalDetails
     }
 
     if (shouldAddCurrentUserPostfix && !!displayName) {
-        displayName = `${displayName} (${youTranslation})`;
+        displayName = `${displayName} (${youAfterTranslation})`;
     }
 
     if (passedPersonalDetails?.accountID === CONST.ACCOUNT_ID.CONCIERGE) {

src/pages/ProfilePage.tsx

@@ -65,13 +65,14 @@ const chatReportSelector = (report: OnyxEntry<Report>): OnyxEntry<Report> =>
     };
 
 function ProfilePage({route}: ProfilePageProps) {
-    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (c) => mapOnyxCollectionItems(c, chatReportSelector)});
-    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
-    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA);
-    const [session] = useOnyx(ONYXKEYS.SESSION);
-    const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled});
+    const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {selector: (c) => mapOnyxCollectionItems(c, chatReportSelector), canBeMissing: true});
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true});
+    const [personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_METADATA, {canBeMissing: true});
+    const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
+    const [isDebugModeEnabled] = useOnyx(ONYXKEYS.USER, {selector: (user) => !!user?.isDebugModeEnabled, canBeMissing: true});
     const [guideCalendarLink] = useOnyx(ONYXKEYS.ACCOUNT, {
         selector: (account) => account?.guideCalendarLink,
+        canBeMissing: true,
     });
 
     const accountID = Number(route.params?.accountID ?? CONST.DEFAULT_NUMBER_ID);
@@ -84,7 +85,7 @@ function ProfilePage({route}: ProfilePageProps) {
         }
         return `${ONYXKEYS.COLLECTION.REPORT}${reportID}` as const;
     }, [accountID, isCurrentUser, reports, session]);
-    const [report] = useOnyx(reportKey);
+    const [report] = useOnyx(reportKey, {canBeMissing: true});
 
     const styles = useThemeStyles();
     const {translate, formatPhoneNumber} = useLocalize();
@@ -111,7 +112,7 @@ function ProfilePage({route}: ProfilePageProps) {
         return {accountID: optimisticAccountID, login: loginParams, displayName: loginParams};
     }, [personalDetails, accountID, loginParams, isValidAccountID]);
 
-    const displayName = formatPhoneNumber(getDisplayNameOrDefault(details, undefined, undefined, isCurrentUser));
+    const displayName = formatPhoneNumber(getDisplayNameOrDefault(details, undefined, undefined, isCurrentUser, translate('common.you').toLowerCase()));
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const fallbackIcon = details?.fallbackIcon ?? '';
     const login = details?.login ?? '';

src/stories/PromotedActionBar.stories.tsx

@@ -15,7 +15,9 @@ const story = {
     component: PromotedActionsBar,
 };
 
-type StoryType = typeof Template & {args?: Partial<PromotedActionsBarProps>};
+type PromotedActionWithText = Omit<PromotedAction, 'translationKey'> & {text: string};
+type PromotedActionsBarPropsWithText = Omit<PromotedActionsBarProps, 'promotedActions'> & {promotedActions: PromotedActionWithText[]};
+type StoryType = typeof Template & {args?: Partial<PromotedActionsBarPropsWithText>};
 
 function Template(args: PromotedActionsBarProps) {
     return (
@@ -47,7 +49,7 @@ const promotedActions = [
         text: 'Share',
         onSelected: () => {},
     },
-] satisfies PromotedAction[];
+] satisfies PromotedActionWithText[];
 
 const defaultPromotedAction = {
     key: '',