Add selection to table on MoneyRequestReport page

.storybook/preview.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Onyx from 'react-native-onyx';
 import {SafeAreaProvider} from 'react-native-safe-area-context';
 import type {Parameters} from 'storybook/internal/types';
+import {MoneyRequestReportContextProvider} from '@components/MoneyRequestReportView/MoneyRequestReportContext';
 import ComposeProviders from '@src/components/ComposeProviders';
 import HTMLEngineProvider from '@src/components/HTMLEngineProvider';
 import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
@@ -21,7 +22,18 @@ Onyx.init({
 
 const decorators = [
     (Story: React.ElementType) => (
-        <ComposeProviders components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider]}>
+        <ComposeProviders
+            components={[
+                OnyxProvider,
+                LocaleContextProvider,
+                HTMLEngineProvider,
+                SafeAreaProvider,
+                PortalProvider,
+                EnvironmentProvider,
+                KeyboardStateProvider,
+                MoneyRequestReportContextProvider,
+            ]}
+        >
             <Story />
         </ComposeProviders>
     ),

src/ROUTES.ts

@@ -108,6 +108,13 @@ const ROUTES = {
             return getUrlWithBackToParam(baseRoute, backTo);
         },
     },
+    SEARCH_MONEY_REQUEST_REPORT_HOLD_TRANSACTIONS: {
+        route: 'search/r/:reportID/hold',
+        getRoute: ({reportID, backTo}: {reportID: string; backTo?: string}) => {
+            const baseRoute = `search/r/${reportID}/hold` as const;
+            return getUrlWithBackToParam(baseRoute, backTo);
+        },
+    },
     TRANSACTION_HOLD_REASON_RHP: 'search/hold',
 
     // This is a utility route used to go to the user's concierge chat, or the sign-in page if the user's not authenticated

src/SCREENS.ts

@@ -39,6 +39,7 @@ const SCREENS = {
     SEARCH: {
         ROOT: 'Search_Root',
         MONEY_REQUEST_REPORT: 'Search_Money_Request_Report',
+        MONEY_REQUEST_REPORT_HOLD_TRANSACTIONS: 'Search_Money_Request_Report_Hold_Transactions',
         REPORT_RHP: 'Search_Report_RHP',
         ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP',
         ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP',

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -17,6 +17,7 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isActionVisibleOnMoneyRequestReport} from '@libs/MoneyRequestReportUtils';
 import {
     getFirstVisibleReportActionID,
+    getIOUActionForTransactionID,
     getMostRecentIOURequestActionID,
     getOneTransactionThreadReportID,
     hasNextActionMadeBySameActor,
@@ -70,9 +71,13 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID];
 }
 
-function selectTransactionsForReportID(transactions: OnyxCollection<OnyxTypes.Transaction>, reportID: string) {
+function selectTransactionsForReportID(transactions: OnyxCollection<OnyxTypes.Transaction>, reportID: string, reportActions: OnyxTypes.ReportAction[]) {
     return Object.values(transactions ?? {}).filter((transaction): transaction is Transaction => {
-        return transaction?.reportID === reportID;
+        if (!transaction) {
+            return false;
+        }
+        const action = getIOUActionForTransactionID(reportActions, transaction.transactionID);
+        return transaction.reportID === reportID && !isDeletedParentAction(action);
     });
 }
 
@@ -97,7 +102,7 @@ function MoneyRequestReportActionsList({report, reportActions = [], hasNewerActi
     const transactionThreadReportID = getOneTransactionThreadReportID(reportID, reportActions ?? [], false);
     const firstVisibleReportActionID = useMemo(() => getFirstVisibleReportActionID(reportActions, isOffline), [reportActions, isOffline]);
     const [transactions = []] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION, {
-        selector: (allTransactions): OnyxTypes.Transaction[] => selectTransactionsForReportID(allTransactions, reportID),
+        selector: (allTransactions): OnyxTypes.Transaction[] => selectTransactionsForReportID(allTransactions, reportID, reportActions),
     });
     const [transactionThreadReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID ?? CONST.DEFAULT_NUMBER_ID}`);
     const [currentUserAccountID] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.accountID});

src/components/MoneyRequestReportView/MoneyRequestReportContext.tsx

@@ -0,0 +1,92 @@
+import React, {useCallback, useContext, useMemo, useState} from 'react';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type TMoneyRequestReportContext = {
+    selectedTransactionsID: Record<string, string[]>;
+    setSelectedTransactionsID: (reportID: string) => (transactionsID: string[]) => void;
+    toggleTransaction: (reportID: string) => (transactionID: string) => void;
+    removeTransaction: (reportID: string) => (transactionID?: string) => void;
+    isTransactionSelected: (reportID: string) => (transactionID: string) => boolean;
+};
+
+const defaultMoneyRequestReportContext = {
+    selectedTransactionsID: {},
+    setSelectedTransactionsID: () => () => {},
+    toggleTransaction: () => () => {},
+    removeTransaction: () => () => {},
+    isTransactionSelected: () => () => false,
+};
+
+const Context = React.createContext<TMoneyRequestReportContext>(defaultMoneyRequestReportContext);
+
+// TODO merge it with SearchContext in follow-up - https://github.com/Expensify/App/issues/59431
+function MoneyRequestReportContextProvider({children}: ChildrenProps) {
+    const [selectedTransactionsForReport, setSelectedTransactionsForReport] = useState<Record<string, string[]>>({});
+
+    const setSelectedTransactionsID = useCallback(
+        (reportID: string) => (transactionsID: string[]) => {
+            setSelectedTransactionsForReport((prev) => ({...prev, [reportID]: transactionsID}));
+        },
+        [],
+    );
+
+    const toggleTransaction = useCallback(
+        (reportID: string) => (transactionID: string) => {
+            setSelectedTransactionsForReport((prev) => {
+                const prevTransactions = prev[reportID] ?? [];
+                if (prevTransactions.includes(transactionID)) {
+                    return {...prev, [reportID]: prevTransactions.filter((t) => t !== transactionID)};
+                }
+                return {...prev, [reportID]: [...prevTransactions, transactionID]};
+            });
+        },
+        [],
+    );
+
+    const removeTransaction = useCallback(
+        (reportID: string) => (transactionID?: string) => {
+            setSelectedTransactionsForReport((prev) => {
+                const prevTransactions = prev[reportID] ?? [];
+                return {...prev, [reportID]: prevTransactions.filter((t) => t !== transactionID)};
+            });
+        },
+        [],
+    );
+
+    const isTransactionSelected = useCallback(
+        (reportID: string) => (transactionID: string) => (selectedTransactionsForReport[reportID] ?? []).includes(transactionID),
+        [selectedTransactionsForReport],
+    );
+
+    const context = useMemo(
+        () => ({
+            selectedTransactionsID: selectedTransactionsForReport,
+            setSelectedTransactionsID,
+            toggleTransaction,
+            isTransactionSelected,
+            removeTransaction,
+        }),
+        [isTransactionSelected, removeTransaction, selectedTransactionsForReport, setSelectedTransactionsID, toggleTransaction],
+    );
+
+    return <Context.Provider value={context}>{children}</Context.Provider>;
+}
+
+function useMoneyRequestReportContext(reportID?: string) {
+    const context = useContext(Context);
+
+    return useMemo(
+        () => ({
+            selectedTransactionsID: reportID ? context.selectedTransactionsID[reportID] ?? [] : [],
+            setSelectedTransactionsID: reportID ? context.setSelectedTransactionsID(reportID) : () => {},
+            toggleTransaction: reportID ? context.toggleTransaction(reportID) : () => {},
+            isTransactionSelected: reportID ? context.isTransactionSelected(reportID) : () => false,
+            removeTransaction: reportID ? context.removeTransaction(reportID) : () => {},
+        }),
+        [context, reportID],
+    );
+}
+
+MoneyRequestReportContextProvider.displayName = 'MoneyRequestReportContextProvider';
+
+export {MoneyRequestReportContextProvider, useMoneyRequestReportContext};

src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx

@@ -66,7 +66,7 @@ function MoneyRequestReportTableHeader({sortBy, sortOrder, onSortPress, dateColu
     const styles = useThemeStyles();
 
     return (
-        <View style={[styles.peopleRow, styles.listTableHeader, styles.pt4]}>
+        <View style={[styles.dFlex, styles.flex5]}>
             <SortableTableHeader
                 columns={columnConfig}
                 shouldShowColumn={shouldShowColumn}

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -1,8 +1,9 @@
 import isEmpty from 'lodash/isEmpty';
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+import React, {memo, useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
 import type {TupleToUnion} from 'type-fest';
 import {getButtonRole} from '@components/Button/utils';
+import Checkbox from '@components/Checkbox';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import type {SortOrder} from '@components/Search/types';
 import Text from '@components/Text';
@@ -11,6 +12,7 @@ import useHover from '@hooks/useHover';
 import useLocalize from '@hooks/useLocalize';
 import {useMouseContext} from '@hooks/useMouseContext';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {convertToDisplayString} from '@libs/CurrencyUtils';
 import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils';
@@ -19,9 +21,11 @@ import {getMoneyRequestSpendBreakdown} from '@libs/ReportUtils';
 import {compareValues} from '@libs/SearchUIUtils';
 import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear';
 import Navigation from '@navigation/Navigation';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import {useMoneyRequestReportContext} from './MoneyRequestReportContext';
 import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
 import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
 import {setActiveTransactionReportIDs} from './TransactionReportIDRepository';
@@ -50,7 +54,6 @@ const sortableColumnNames = [
 type SortableColumnName = TupleToUnion<typeof sortableColumnNames>;
 
 type SortedTransactions = {
-    transactions: OnyxTypes.Transaction[];
     sortBy: SortableColumnName;
     sortOrder: SortOrder;
 };
@@ -62,18 +65,9 @@ const getTransactionKey = (transaction: OnyxTypes.Transaction, key: SortableColu
     return key === CONST.SEARCH.TABLE_COLUMNS.DATE ? dateKey : key;
 };
 
-const areTransactionValuesEqual = (transactions: OnyxTypes.Transaction[], key: SortableColumnName) => {
-    const firstValidTransaction = transactions.find((transaction) => transaction !== undefined);
-    if (!firstValidTransaction) {
-        return true;
-    }
-
-    const keyOfFirstValidTransaction = getTransactionKey(firstValidTransaction, key);
-    return transactions.every((transaction) => transaction[getTransactionKey(transaction, key)] === firstValidTransaction[keyOfFirstValidTransaction]);
-};
-
 function MoneyRequestReportTransactionList({report, transactions, reportActions, hasComments}: MoneyRequestReportTransactionListProps) {
     const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout();
     const displayNarrowVersion = isMediumScreenWidth || shouldUseNarrowLayout;
@@ -86,29 +80,23 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
     const {bind} = useHover();
     const {isMouseDownOnInput, setMouseUp} = useMouseContext();
 
+    const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext(report.reportID);
+
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
         bind.onMouseLeave();
         e.stopPropagation();
         setMouseUp();
     };
 
-    const [sortedData, setSortedData] = useState<SortedTransactions>({
-        transactions,
+    const [sortConfig, setSortConfig] = useState<SortedTransactions>({
         sortBy: CONST.SEARCH.TABLE_COLUMNS.DATE,
         sortOrder: CONST.SEARCH.SORT_ORDER.ASC,
     });
 
-    const {sortBy, sortOrder} = sortedData;
+    const {sortBy, sortOrder} = sortConfig;
 
-    useEffect(() => {
-        if (areTransactionValuesEqual(transactions, sortBy)) {
-            return;
-        }
-
-        setSortedData((prevState) => ({
-            ...prevState,
-            transactions: [...transactions].sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy)),
-        }));
+    const sortedTransactions = useMemo(() => {
+        return [...transactions].sort((a, b) => compareValues(a[getTransactionKey(a, sortBy)], b[getTransactionKey(b, sortBy)], sortOrder, sortBy));
     }, [sortBy, sortOrder, transactions]);
 
     const navigateToTransaction = useCallback(
@@ -123,12 +111,12 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
 
             // Single transaction report will open in RHP, and we need to find every other report ID for the rest of transactions
             // to display prev/next arrows in RHP for navigating between transactions
-            const sortedSiblingTransactionReportIDs = getThreadReportIDsForTransactions(reportActions, sortedData.transactions);
+            const sortedSiblingTransactionReportIDs = getThreadReportIDsForTransactions(reportActions, sortedTransactions);
             setActiveTransactionReportIDs(sortedSiblingTransactionReportIDs);
 
             Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute({reportID: reportIDToNavigate, backTo}));
         },
-        [reportActions, sortedData.transactions],
+        [reportActions, sortedTransactions],
     );
 
     const dateColumnSize = useMemo(() => {
@@ -143,22 +131,37 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
     return !isEmpty(transactions) ? (
         <>
             {!displayNarrowVersion && (
-                <MoneyRequestReportTableHeader
-                    shouldShowSorting
-                    sortBy={sortBy}
-                    sortOrder={sortOrder}
-                    dateColumnSize={dateColumnSize}
-                    onSortPress={(selectedSortBy, selectedSortOrder) => {
-                        if (!isSortableColumnName(selectedSortBy)) {
-                            return;
-                        }
-
-                        setSortedData((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
-                    }}
-                />
+                <View style={[styles.dFlex, styles.flexRow, styles.ph5, styles.pv3, StyleUtils.getPaddingBottom(6), styles.justifyContentCenter, styles.alignItemsCenter]}>
+                    <View style={[styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
+                        <Checkbox
+                            onPress={() => {
+                                if (selectedTransactionsID.length === transactions.length) {
+                                    setSelectedTransactionsID([]);
+                                } else {
+                                    setSelectedTransactionsID(transactions.map((t) => t.transactionID));
+                                }
+                            }}
+                            accessibilityLabel={CONST.ROLE.CHECKBOX}
+                            isChecked={selectedTransactionsID.length === transactions.length}
+                        />
+                    </View>
+                    <MoneyRequestReportTableHeader
+                        shouldShowSorting
+                        sortBy={sortBy}
+                        sortOrder={sortOrder}
+                        dateColumnSize={dateColumnSize}
+                        onSortPress={(selectedSortBy, selectedSortOrder) => {
+                            if (!isSortableColumnName(selectedSortBy)) {
+                                return;
+                            }
+
+                            setSortConfig((prevState) => ({...prevState, sortBy: selectedSortBy, sortOrder: selectedSortOrder}));
+                        }}
+                    />
+                </View>
             )}
             <View style={[listHorizontalPadding, styles.gap2, styles.pb4, displayNarrowVersion && styles.pt4]}>
-                {sortedData.transactions.map((transaction) => {
+                {sortedTransactions.map((transaction) => {
                     return (
                         <PressableWithFeedback
                             onPress={(e) => {
@@ -180,11 +183,12 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                         >
                             <TransactionItemRow
                                 transactionItem={transaction}
-                                isSelected={false}
+                                isSelected={isTransactionSelected(transaction.transactionID)}
                                 shouldShowTooltip
                                 dateColumnSize={dateColumnSize}
                                 shouldUseNarrowLayout={displayNarrowVersion}
                                 shouldShowChatBubbleComponent
+                                onCheckboxPress={toggleTransaction}
                             />
                         </PressableWithFeedback>
                     );
@@ -230,4 +234,4 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
 
 MoneyRequestReportTransactionList.displayName = 'MoneyRequestReportTransactionList';
 
-export default MoneyRequestReportTransactionList;
+export default memo(MoneyRequestReportTransactionList);

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -134,7 +134,7 @@ function MoneyRequestReportView({report, policy, reportMetadata, shouldDisplayRe
                     <MoneyReportHeader
                         report={report}
                         policy={policy}
-                        reportActions={[]}
+                        reportActions={reportActions}
                         transactionThreadReportID={undefined}
                         shouldDisplayBackButton
                         onBackButtonPress={() => {