[Details Revamp] Update ReportDetailsPage for Rooms, Groups, Money Reports and Policy Expenses

src/CONST.ts

@@ -2126,6 +2126,8 @@ const CONST = {
         SETTINGS: 'settings',
         LEAVE_ROOM: 'leaveRoom',
         PRIVATE_NOTES: 'privateNotes',
+        DELETE: 'delete',
+        MARK_AS_INCOMPLETE: 'markAsIncomplete',
     },
     EDIT_REQUEST_FIELD: {
         AMOUNT: 'amount',
@@ -3735,6 +3737,14 @@ const CONST = {
         REPORT: 'REPORT',
     },
 
+    PROMOTED_ACTIONS: {
+        PIN: 'pin',
+        SHARE: 'share',
+        JOIN: 'join',
+        MESSAGE: 'message',
+        HOLD: 'hold',
+    },
+
     THUMBNAIL_IMAGE: {
         SMALL_SCREEN: {
             SIZE: 250,

src/components/PromotedActionsBar.tsx

@@ -5,7 +5,12 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as HeaderUtils from '@libs/HeaderUtils';
 import * as Localize from '@libs/Localize';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ReportUtils from '@libs/ReportUtils';
 import * as ReportActions from '@userActions/Report';
+import * as Session from '@userActions/Session';
+import CONST from '@src/CONST';
+import type {ReportAction} from '@src/types/onyx';
 import type OnyxReport from '@src/types/onyx/Report';
 import Button from './Button';
 import type {ThreeDotsMenuItem} from './HeaderWithBackButton/types';
@@ -15,21 +20,34 @@ type PromotedAction = {
     key: string;
 } & ThreeDotsMenuItem;
 
-type PromotedActionsType = Record<'pin' | 'share', (report: OnyxReport) => PromotedAction> & {
+type BasePromotedActions = typeof CONST.PROMOTED_ACTIONS.PIN | typeof CONST.PROMOTED_ACTIONS.SHARE | typeof CONST.PROMOTED_ACTIONS.JOIN;
+
+type PromotedActionsType = Record<BasePromotedActions, (report: OnyxReport) => PromotedAction> & {
     message: (params: {accountID?: number; login?: string}) => PromotedAction;
+} & {
+    hold: (params: {isTextHold: boolean; reportAction: ReportAction | undefined}) => PromotedAction;
 };
 
 const PromotedActions = {
     pin: (report) => ({
-        key: 'pin',
+        key: CONST.PROMOTED_ACTIONS.PIN,
         ...HeaderUtils.getPinMenuItem(report),
     }),
     share: (report) => ({
-        key: 'share',
+        key: CONST.PROMOTED_ACTIONS.SHARE,
         ...HeaderUtils.getShareMenuItem(report),
     }),
+    join: (report) => ({
+        key: CONST.PROMOTED_ACTIONS.JOIN,
+        icon: Expensicons.ChatBubbles,
+        text: Localize.translateLocal('common.join'),
+        onSelected: Session.checkIfActionIsAllowed(() => {
+            Navigation.dismissModal();
+            ReportActions.joinRoom(report);
+        }),
+    }),
     message: ({accountID, login}) => ({
-        key: 'message',
+        key: CONST.PROMOTED_ACTIONS.MESSAGE,
         icon: Expensicons.CommentBubbles,
         text: Localize.translateLocal('common.message'),
         onSelected: () => {
@@ -43,6 +61,15 @@ const PromotedActions = {
             }
         },
     }),
+    hold: ({isTextHold, reportAction}) => ({
+        key: CONST.PROMOTED_ACTIONS.HOLD,
+        icon: Expensicons.Stopwatch,
+        text: Localize.translateLocal(`iou.${isTextHold ? 'hold' : 'unhold'}`),
+        onSelected: () => {
+            Navigation.dismissModal();
+            ReportUtils.changeMoneyRequestHoldStatus(reportAction);
+        },
+    }),
 } satisfies PromotedActionsType;
 
 type PromotedActionsBarProps = {
@@ -61,10 +88,6 @@ function PromotedActionsBar({promotedActions, containerStyle}: PromotedActionsBa
         return null;
     }
 
-    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}) => (

src/components/RoomHeaderAvatars.tsx

@@ -44,8 +44,8 @@ function RoomHeaderAvatars({icons, reportID}: RoomHeaderAvatarsProps) {
             >
                 <Avatar
                     source={icons[0].source}
-                    imageStyles={styles.avatarLarge}
-                    size={CONST.AVATAR_SIZE.LARGE}
+                    imageStyles={styles.avatarXLarge}
+                    size={CONST.AVATAR_SIZE.XLARGE}
                     name={icons[0].name}
                     avatarID={icons[0].id}
                     type={icons[0].type}

src/languages/en.ts

@@ -758,6 +758,7 @@ export default {
         waitingOnEnabledWallet: ({submitterDisplayName}: WaitingOnBankAccountParams) => `started settling up. Payment is on hold until ${submitterDisplayName} enables their wallet.`,
         enableWallet: 'Enable Wallet',
         hold: 'Hold',
+        unhold: 'Unhold',
         holdExpense: 'Hold expense',
         unholdExpense: 'Unhold expense',
         heldExpense: 'held this expense',
@@ -1305,6 +1306,9 @@ export default {
             },
         },
     },
+    reportDetailsPage: {
+        inWorkspace: ({policyName}) => `in ${policyName}`,
+    },
     reportDescriptionPage: {
         roomDescription: 'Room description',
         roomDescriptionOptional: 'Room description (optional)',

src/languages/es.ts

@@ -770,6 +770,7 @@ export default {
         payOnly: 'Solo pagar',
         approveOnly: 'Solo aprobar',
         hold: 'Bloqueada',
+        unhold: 'Desbloqueada',
         holdEducationalTitle: 'Este gasto está',
         whatIsHoldTitle: '¿Qué es Bloquear?',
         whatIsHoldExplain: 'Bloquear es nuestra forma de agilizar la colaboración financiera. ¡"Rechazar" es tan duro!',
@@ -1305,6 +1306,9 @@ export default {
             },
         },
     },
+    reportDetailsPage: {
+        inWorkspace: ({policyName}) => `en ${policyName}`,
+    },
     reportDescriptionPage: {
         roomDescription: 'Descripción de la sala de chat',
         roomDescriptionOptional: 'Descripción de la sala de chat (opcional)',

src/libs/ReportUtils.ts

@@ -6143,22 +6143,29 @@ function getAllWorkspaceReports(policyID: string): Array<OnyxEntry<Report>> {
 /**
  * @param policy - the workspace the report is on, null if the user isn't a member of the workspace
  */
-function shouldDisableRename(report: OnyxEntry<Report>, policy: OnyxEntry<Policy>): boolean {
-    if (isDefaultRoom(report) || isArchivedRoom(report) || isThread(report) || isMoneyRequestReport(report) || isPolicyExpenseChat(report)) {
+function shouldDisableRename(report: OnyxEntry<Report>): boolean {
+    if (
+        isDefaultRoom(report) ||
+        isArchivedRoom(report) ||
+        isPublicRoom(report) ||
+        isThread(report) ||
+        isMoneyRequest(report) ||
+        isMoneyRequestReport(report) ||
+        isPolicyExpenseChat(report) ||
+        isInvoiceRoom(report) ||
+        isInvoiceReport(report)
+    ) {
         return true;
     }
 
     if (isGroupChat(report)) {
         return false;
     }
 
-    // if the linked workspace is null, that means the person isn't a member of the workspace the report is in
-    // which means this has to be a public room we want to disable renaming for
-    if (!policy) {
+    if (isDeprecatedGroupDM(report) || isTaskReport(report)) {
         return true;
     }
 
-    // If there is a linked workspace, that means the user is a member of the workspace the report is in and is allowed to rename.
     return false;
 }