[PR 7 of 18] Pass originalReportID to context menu for report

src/CONST/index.ts

@@ -8789,6 +8789,9 @@ const CONST = {
         TRANSACTION_PREVIEW: {
             CARD: 'TransactionPreview-Card',
         },
+        TRIP_ROOM_PREVIEW: {
+            CARD: 'TripRoomPreview-Card',
+        },
         TRANSACTION_ITEM_ROW: {
             ARROW_RIGHT: 'TransactionItemRow-ArrowRight',
         },

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -39,7 +39,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP
     const encryptedAuthToken = session?.encryptedAuthToken ?? '';
     const sourceURLWithAuth = addEncryptedAuthTokenToURL(source, encryptedAuthToken);
 
-    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu} = useShowContextMenuState();
+    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu, originalReportID} = useShowContextMenuState();
     const {checkIfContextMenuActive} = useShowContextMenuActions();
 
     return (
@@ -58,7 +58,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP
                 if (isDisabled || !shouldDisplayContextMenu) {
                     return;
                 }
-                showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived));
+                showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived), originalReportID);
             }}
             shouldUseHapticsOnLongPress
             accessibilityLabel={displayName}

src/components/HTMLEngineProvider/HTMLRenderers/ImageRenderer.tsx

@@ -90,7 +90,7 @@ function ImageRenderer({tnode}: CustomRendererProps<TBlock>) {
         />
     );
 
-    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu} = useShowContextMenuState();
+    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu, originalReportID} = useShowContextMenuState();
     const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
 
     return imagePreviewModalDisabled ? (
@@ -124,7 +124,15 @@ function ImageRenderer({tnode}: CustomRendererProps<TBlock>) {
                             return;
                         }
                         return onShowContextMenu(() =>
-                            showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived)),
+                            showContextMenuForReport(
+                                event,
+                                anchor,
+                                report?.reportID,
+                                action,
+                                checkIfContextMenuActive,
+                                isArchivedNonExpenseReport(report, isReportArchived),
+                                originalReportID,
+                            ),
                         );
                     }}
                     isNested

src/components/HTMLEngineProvider/HTMLRenderers/MentionUserRenderer.tsx

@@ -33,7 +33,7 @@ function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersona
     const htmlAttribAccountID = tnode.attributes.accountid;
     const personalDetails = usePersonalDetails();
     const htmlAttributeAccountID = tnode.attributes.accountid;
-    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu} = useShowContextMenuState();
+    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu, originalReportID} = useShowContextMenuState();
     const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
 
     let accountID: number;
@@ -83,7 +83,7 @@ function MentionUserRenderer({style, tnode, TDefaultRenderer, currentUserPersona
                     return;
                 }
                 return onShowContextMenu(() =>
-                    showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived)),
+                    showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived), originalReportID),
                 );
             }}
             onPress={(event) => {

src/components/HTMLEngineProvider/HTMLRenderers/PreRenderer.tsx

@@ -33,7 +33,7 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
-    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu} = useShowContextMenuState();
+    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu, originalReportID} = useShowContextMenuState();
     const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
     const isLast = defaultRendererProps.renderIndex === defaultRendererProps.renderLength - 1;
 
@@ -63,7 +63,15 @@ function PreRenderer({TDefaultRenderer, onPressIn, onPressOut, onLongPress, ...d
                         if (isDisabled || !shouldDisplayContextMenu) {
                             return;
                         }
-                        return showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived));
+                        return showContextMenuForReport(
+                            event,
+                            anchor,
+                            report?.reportID,
+                            action,
+                            checkIfContextMenuActive,
+                            isArchivedNonExpenseReport(report, isReportArchived),
+                            originalReportID,
+                        );
                     });
                 }}
                 shouldUseHapticsOnLongPress

src/components/ReportActionItem/MoneyRequestAction.tsx

@@ -68,6 +68,9 @@ type MoneyRequestActionProps = {
 
     /** Whether  context menu should be shown on press */
     shouldDisplayContextMenu?: boolean;
+
+    /** ID of the original report from which the given reportAction is first created */
+    originalReportID?: string;
 };
 
 function MoneyRequestAction({
@@ -82,6 +85,7 @@ function MoneyRequestAction({
     style,
     isWhisper = false,
     shouldDisplayContextMenu = true,
+    originalReportID,
 }: MoneyRequestActionProps) {
     const {shouldOpenReportInRHP} = useReportActionItemState();
     const {onPreviewPressed} = useReportActionItemActions();
@@ -186,6 +190,7 @@ function MoneyRequestAction({
             isHovered={isHovered}
             isWhisper={isWhisper}
             shouldDisplayContextMenu={shouldDisplayContextMenu}
+            originalReportID={originalReportID}
         />
     );
 }

src/components/ReportActionItem/MoneyRequestReportPreview/MoneyRequestReportPreviewContent.tsx

@@ -131,6 +131,7 @@ function MoneyRequestReportPreviewContent({
     shouldShowBorder = false,
     onPress,
     forwardedFSClass,
+    originalReportID,
 }: MoneyRequestReportPreviewContentProps) {
     const [userBillingGraceEndPeriods] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [chatReportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${chatReportID}`);
@@ -917,7 +918,7 @@ function MoneyRequestReportPreviewContent({
                             if (!shouldDisplayContextMenu) {
                                 return;
                             }
-                            showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive);
+                            showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive, false, originalReportID);
                         }}
                         shouldUseHapticsOnLongPress
                         style={[

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -39,6 +39,7 @@ function MoneyRequestReportPreview({
     onPaymentOptionsHide,
     shouldDisplayContextMenu = true,
     shouldShowBorder,
+    originalReportID,
 }: MoneyRequestReportPreviewProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -148,6 +149,7 @@ function MoneyRequestReportPreview({
             onPreviewPressed={openReportFromPreview}
             shouldShowPayerAndReceiver={shouldShowPayerAndReceiver}
             shouldHighlight={!!newTransactionIDs?.has(item.transactionID)}
+            originalReportID={originalReportID}
         />
     );
 
@@ -180,6 +182,7 @@ function MoneyRequestReportPreview({
             onPress={openReportFromPreview}
             shouldShowBorder={shouldShowBorder}
             forwardedFSClass={CONST.FULLSTORY.CLASS.UNMASK}
+            originalReportID={originalReportID}
         />
     );
 }

src/components/ReportActionItem/MoneyRequestReportPreview/types.ts

@@ -60,6 +60,9 @@ type MoneyRequestReportPreviewProps = {
 
     /** Whether to show a border to separate Reports Chat Item and Money Request Report Preview */
     shouldShowBorder?: boolean;
+
+    /** ID of the original report from which the given reportAction is first created */
+    originalReportID?: string;
 };
 
 type MoneyRequestReportPreviewContentOnyxProps = {

src/components/ReportActionItem/TaskPreview.tsx

@@ -8,7 +8,7 @@ import Icon from '@components/Icon';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import RenderHTML from '@components/RenderHTML';
-import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import {showContextMenuForReport, useShowContextMenuState} from '@components/ShowContextMenuContext';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
 import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
@@ -85,6 +85,7 @@ function TaskPreview({
     const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const theme = useTheme();
+    const {originalReportID} = useShowContextMenuState();
     const taskReportID = taskReport?.reportID ?? action?.childReportID;
     // Prefer the live task report name so offline title edits are reflected immediately.
     const taskTitle = taskReport?.reportName ?? action?.childReportName ?? '';
@@ -145,7 +146,7 @@ function TaskPreview({
                         if (!shouldDisplayContextMenu) {
                             return;
                         }
-                        return showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive);
+                        return showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive, false, originalReportID);
                     })
                 }
                 shouldUseHapticsOnLongPress

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -43,6 +43,7 @@ function TransactionPreview(props: TransactionPreviewProps) {
         shouldHighlight,
         reportPreviewAction,
         contextAction,
+        originalReportID,
     } = props;
 
     const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
@@ -71,11 +72,14 @@ function TransactionPreview(props: TransactionPreviewProps) {
     const transactionDetails = getTransactionDetails(transaction);
     const {amount: requestAmount, currency: requestCurrency} = transactionDetails ?? {};
 
+    const contextMenuReportID = contextAction ? chatReportID : reportID;
+    const contextMenuAction = contextAction ?? action;
+
     const showContextMenu = (event: GestureResponderEvent) => {
         if (!shouldDisplayContextMenu) {
             return;
         }
-        showContextMenuForReport(event, contextMenuAnchor, contextAction ? chatReportID : reportID, contextAction ?? action, checkIfContextMenuActive);
+        showContextMenuForReport(event, contextMenuAnchor, contextMenuReportID, contextMenuAction, checkIfContextMenuActive, false, originalReportID);
     };
 
     const offlineWithFeedbackOnClose = useCallback(() => {

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -72,6 +72,9 @@ type TransactionPreviewProps = {
 
     /** Whether the item should be highlighted */
     shouldHighlight?: boolean;
+
+    /** ID of the original report from which the given reportAction is first created */
+    originalReportID?: string;
 };
 
 type TransactionPreviewContentProps = {

src/components/ReportActionItem/TripRoomPreview.tsx

@@ -51,6 +51,9 @@ type TripRoomPreviewProps = {
     /** Whether the corresponding report action item is hovered */
     isHovered?: boolean;
 
+    /** ID of the original report from which the given reportAction is first created */
+    originalReportID?: string;
+
     /** Whether  context menu should be shown on press */
     shouldDisplayContextMenu?: boolean;
 };
@@ -123,6 +126,7 @@ function TripRoomPreview({
     isHovered = false,
     checkIfContextMenuActive = () => {},
     shouldDisplayContextMenu = true,
+    originalReportID,
 }: TripRoomPreviewProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -172,9 +176,10 @@ function TripRoomPreview({
                         if (!shouldDisplayContextMenu) {
                             return;
                         }
-                        showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive);
+                        showContextMenuForReport(event, contextMenuAnchor, chatReportID, action, checkIfContextMenuActive, false, originalReportID);
                     }}
                     shouldUseHapticsOnLongPress
+                    sentryLabel={CONST.SENTRY_LABEL.TRIP_ROOM_PREVIEW.CARD}
                     style={[styles.flexRow, styles.justifyContentBetween, styles.reportPreviewBox]}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('iou.viewDetails')}

src/components/ShowContextMenuContext/default.ts

@@ -8,6 +8,7 @@ const defaultShowContextMenuStateContextValue: ShowContextMenuStateContextType =
     transactionThreadReport: undefined,
     isDisabled: true,
     shouldDisplayContextMenu: true,
+    originalReportID: undefined,
 };
 
 const defaultShowContextMenuActionsContextValue: ShowContextMenuActionsContextType = {

src/components/ShowContextMenuContext/index.tsx

@@ -3,7 +3,6 @@ import {createContext, useContext} from 'react';
 import type {GestureResponderEvent} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
-import {getOriginalReportID} from '@libs/ReportUtils';
 import {showContextMenu} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import type {ContextMenuAnchor} from '@pages/inbox/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
@@ -31,6 +30,7 @@ function useShowContextMenuActions(): ShowContextMenuActionsContextType {
  * @param action - ReportAction for ContextMenu
  * @param checkIfContextMenuActive Callback to update context menu active state
  * @param isArchivedRoom - Is the report an archived room
+ * @param originalReportID - ID of the original report from which the given reportAction is first created
  */
 function showContextMenuForReport(
     event: GestureResponderEvent | MouseEvent,
@@ -39,6 +39,7 @@ function showContextMenuForReport(
     action: OnyxEntry<ReportAction>,
     checkIfContextMenuActive: () => void,
     isArchivedRoom = false,
+    originalReportID?: string,
 ) {
     if (!canUseTouchScreen()) {
         return;
@@ -51,7 +52,7 @@ function showContextMenuForReport(
         contextMenuAnchor: anchor,
         report: {
             reportID,
-            originalReportID: reportID ? getOriginalReportID(reportID, action, undefined) : undefined,
+            originalReportID: originalReportID ?? reportID,
             isArchivedRoom,
         },
         reportAction: {

src/components/ShowContextMenuContext/types.ts

@@ -10,6 +10,7 @@ type ShowContextMenuStateContextType = {
     transactionThreadReport?: OnyxEntry<Report>;
     isDisabled: boolean;
     shouldDisplayContextMenu?: boolean;
+    originalReportID?: string;
 };
 
 type ShowContextMenuActionsContextType = {

src/components/VideoPlayerPreview/VideoPlayerThumbnail.tsx

@@ -31,7 +31,7 @@ type VideoPlayerThumbnailProps = {
 function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel, isDeleted}: VideoPlayerThumbnailProps) {
     const styles = useThemeStyles();
     const icons = useMemoizedLazyExpensifyIcons(['Play'] as const);
-    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu} = useShowContextMenuState();
+    const {anchor, report, isReportArchived, action, isDisabled, shouldDisplayContextMenu, originalReportID} = useShowContextMenuState();
     const {onShowContextMenu, checkIfContextMenuActive} = useShowContextMenuActions();
 
     return (
@@ -59,7 +59,15 @@ function VideoPlayerThumbnail({thumbnailUrl, onPress, accessibilityLabel, isDele
                             return;
                         }
                         onShowContextMenu(() => {
-                            showContextMenuForReport(event, anchor, report?.reportID, action, checkIfContextMenuActive, isArchivedNonExpenseReport(report, isReportArchived));
+                            showContextMenuForReport(
+                                event,
+                                anchor,
+                                report?.reportID,
+                                action,
+                                checkIfContextMenuActive,
+                                isArchivedNonExpenseReport(report, isReportArchived),
+                                originalReportID,
+                            );
                         });
                     }}
                     shouldUseHapticsOnLongPress

src/pages/inbox/report/PureReportActionItem.tsx

@@ -626,7 +626,7 @@ function PureReportActionItem({
             clearError(transactionID);
         }
         clearAllRelatedReportActionErrors(reportID, action, originalReportID);
-    }, [action, isSendingMoney, reportID, clearAllRelatedReportActionErrors, report, chatReport, clearError]);
+    }, [action, isSendingMoney, reportID, clearAllRelatedReportActionErrors, report, chatReport, clearError, originalReportID]);
 
     const showDismissReceiptErrorModal = useCallback(async () => {
         const result = await showConfirmModal({
@@ -835,8 +835,9 @@ function PureReportActionItem({
             transactionThreadReport,
             isDisabled: false,
             shouldDisplayContextMenu: shouldDisplayContextMenuValue,
+            originalReportID,
         }),
-        [report, action, transactionThreadReport, shouldDisplayContextMenuValue, isReportArchived],
+        [report, action, transactionThreadReport, shouldDisplayContextMenuValue, isReportArchived, originalReportID],
     );
 
     const contextMenuActionsValue = useMemo(
@@ -1176,6 +1177,7 @@ function PureReportActionItem({
                     style={displayAsGroup ? [] : [styles.mt2]}
                     isWhisper={isWhisper}
                     shouldDisplayContextMenu={shouldDisplayContextMenuValue}
+                    originalReportID={originalReportID}
                 />
             );
 
@@ -1220,6 +1222,7 @@ function PureReportActionItem({
                                     Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(action.childReportID, undefined, undefined, Navigation.getActiveRoute()));
                                 }}
                                 isTrackExpense={isTrackExpenseActionReportActionsUtils(action)}
+                                originalReportID={originalReportID}
                             />
                         </View>
                     );
@@ -1238,6 +1241,7 @@ function PureReportActionItem({
                     containerStyles={displayAsGroup ? [] : [styles.mt2]}
                     checkIfContextMenuActive={toggleContextMenuFromActiveReportAction}
                     shouldDisplayContextMenu={shouldDisplayContextMenuValue}
+                    originalReportID={originalReportID}
                 />
             );
         } else if (action.actionName === CONST.REPORT.ACTIONS.TYPE.REPORT_PREVIEW && isClosedExpenseReportWithNoExpenses) {
@@ -1257,6 +1261,7 @@ function PureReportActionItem({
                     onPaymentOptionsHide={() => setIsPaymentMethodPopoverActive(false)}
                     shouldDisplayContextMenu={shouldDisplayContextMenuValue}
                     shouldShowBorder={shouldShowBorder}
+                    originalReportID={originalReportID}
                 />
             );
         } else if (isTaskAction(action)) {