From a245b253a4b3b0dec9c22046ab6aa764f5059797 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 7 May 2024 10:34:13 +0200
Subject: [PATCH 01/16] Add handling of actions to TransactionListItem

---
 .../Search/TransactionListItemRow.tsx         | 65 ++++++++++++++++---
 src/libs/SearchUtils.ts                       | 29 ++++++++-
 src/libs/actions/Search.ts                    | 23 ++++++-
 src/types/onyx/SearchResults.ts               |  5 +-
 4 files changed, 109 insertions(+), 13 deletions(-)

diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index c0fff452d1e5..0a51adf0e6df 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
+import Badge from '@components/Badge';
 import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -14,11 +15,13 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
+import * as SearchUtils from '@libs/SearchUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {SearchTransactionType} from '@src/types/onyx/SearchResults';
+import type {TranslationPaths} from '@src/languages/types';
+import type {SearchTransactionAction, SearchTransactionType} from '@src/types/onyx/SearchResults';
 import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
 import TextWithIconCell from './TextWithIconCell';
 import UserInfoCell from './UserInfoCell';
@@ -35,8 +38,8 @@ type TransactionCellProps = {
 } & CellProps;
 
 type ActionCellProps = {
-    onButtonPress: () => void;
-} & CellProps;
+    goToItem: () => void;
+} & TransactionCellProps;
 
 type TotalCellProps = {
     isChildListItem: boolean;
@@ -64,6 +67,18 @@ const getTypeIcon = (type?: SearchTransactionType) => {
     }
 };
 
+const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
+    view: 'common.view',
+    // Todo add translation for Review
+    review: 'common.view',
+    done: 'common.done',
+    paid: 'iou.settledExpensify',
+    approve: 'iou.approve',
+    pay: 'iou.pay',
+    submit: 'common.submit',
+    hold: 'iou.hold',
+};
+
 function ReceiptCell({transactionItem}: TransactionCellProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -148,17 +163,50 @@ function TypeCell({transactionItem, isLargeScreenWidth}: TransactionCellProps) {
     );
 }
 
-function ActionCell({onButtonPress}: ActionCellProps) {
+function ActionCell({transactionItem, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
+    const {action, amount} = transactionItem;
+
+    const text = translate(actionTranslationsMap[action]);
+
+    if (['done', 'paid'].includes(action)) {
+        return (
+            <Badge
+                success
+                text={text}
+                icon={Expensicons.Checkmark}
+                badgeStyles={[styles.badgeBordered]}
+                textStyles={[{fontWeight: '700'}]}
+            />
+        );
+    }
+
+    if (['view', 'review'].includes(action)) {
+        return (
+            <Button
+                text={translate('common.view')}
+                onPress={goToItem}
+                small
+                pressOnEnter
+                style={[styles.w100]}
+            />
+        );
+    }
+
+    const command = SearchUtils.getTransactionActionCommand(action);
+    const reportsAndAmounts = {[transactionItem.reportID ?? -1]: amount};
+
     return (
         <Button
-            text={translate('common.view')}
-            onPress={onButtonPress}
+            text={text}
+            onPress={() => {
+                command('', reportsAndAmounts);
+            }}
             small
             pressOnEnter
-            style={[styles.w100]}
+            style={[styles.p0]}
         />
     );
 }
@@ -364,7 +412,8 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
-                        onButtonPress={onButtonPress}
+                        transactionItem={item}
+                        goToItem={onButtonPress}
                         showTooltip={false}
                         isLargeScreenWidth={false}
                     />
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 4be04ac48802..3c450d2f605f 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -5,7 +5,16 @@ import type {ReportListItemType, TransactionListItemType} from '@components/Sele
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {SearchAccountDetails, SearchDataTypes, SearchPersonalDetails, SearchTransaction, SearchTypeToItemMap, SectionsType} from '@src/types/onyx/SearchResults';
+import type {
+    SearchAccountDetails,
+    SearchDataTypes,
+    SearchPersonalDetails,
+    SearchTransaction,
+    SearchTransactionAction,
+    SearchTypeToItemMap,
+    SectionsType,
+} from '@src/types/onyx/SearchResults';
+import * as SearchActions from './actions/Search';
 import DateUtils from './DateUtils';
 import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute';
 import navigationRef from './Navigation/navigationRef';
@@ -269,10 +278,26 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
     });
 }
 
+function getTransactionActionCommand(action: Omit<SearchTransactionAction, 'view' | 'done' | 'paid'>): (searchHash: string, reportsAndAmounts: Record<string, number>) => void {
+    if (action === 'pay') {
+        return SearchActions.payMoneyRequest;
+    }
+
+    if (action === 'approve') {
+        return SearchActions.approveMoneyRequest;
+    }
+
+    if (action === 'hold') {
+        return SearchActions.holdMoneyRequest;
+    }
+
+    return SearchActions.submitMoneyRequest;
+}
+
 function getSearchParams() {
     const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State<RootStackParamList>);
     return topmostCentralPaneRoute?.params as CentralPaneNavigatorParamList['Search_Central_Pane'];
 }
 
-export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear};
+export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getTransactionActionCommand, getSearchParams, shouldShowYear};
 export type {SearchColumnType, SortOrder};
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
index bf94de9c52b2..e191dd2527a8 100644
--- a/src/libs/actions/Search.ts
+++ b/src/libs/actions/Search.ts
@@ -57,8 +57,27 @@ function createTransactionThread(hash: number, transactionID: string, reportID:
             },
         },
     };
-
     Onyx.merge(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, onyxUpdate);
 }
 
-export {search, createTransactionThread};
+// Todo finalize the action methods and api calls
+function payMoneyRequest(searchHash: string, reportsAndAmounts: Record<string, number>) {
+    const optimisticData = {
+        onyxMethod: 'merge',
+        key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+        value: {isLoading: true},
+    };
+    const finallyData = {
+        onyxMethod: 'merge',
+        key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+        value: {isLoading: false},
+    };
+
+    API.write('Request', {paymentType, reportsAndAmounts}, {optimisticData, finallyData});
+}
+
+function approveMoneyRequest() {}
+function holdMoneyRequest() {}
+function submitMoneyRequest() {}
+
+export {search, createTransactionThread, payMoneyRequest, approveMoneyRequest, holdMoneyRequest, submitMoneyRequest};
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 52afaa44f8d2..c1f1e4dc6dac 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -99,6 +99,8 @@ type SearchReport = {
     action?: string;
 };
 
+type SearchTransactionAction = 'done' | 'paid' | 'view' | 'review' | 'pay' | 'approve' | 'hold' | 'submit';
+
 /** Model of transaction search result */
 type SearchTransaction = {
     /** The ID of the transaction */
@@ -183,7 +185,7 @@ type SearchTransaction = {
     transactionThreadReportID: string;
 
     /** The action that can be performed for the transaction */
-    action: string;
+    action: SearchTransactionAction;
 
     /** The MCC Group associated with the transaction */
     mccGroup?: ValueOf<typeof CONST.MCC_GROUPS>;
@@ -219,6 +221,7 @@ export type {
     SearchQuery,
     SearchTransaction,
     SearchTransactionType,
+    SearchTransactionAction,
     SearchPersonalDetails,
     SearchPolicyDetails,
     SearchAccountDetails,

From 619cd3cb14f35416bf4f5af67848a6ce7dd5f8f9 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Wed, 19 Jun 2024 15:13:36 +0200
Subject: [PATCH 02/16] Extract ActionCell to a separate component

---
 .../SelectionList/Search/ActionCell.tsx       | 77 +++++++++++++++++++
 .../Search/ExpenseItemHeaderNarrow.tsx        | 16 ++--
 .../SelectionList/Search/ReportListItem.tsx   |  2 +-
 .../Search/TransactionListItemRow.tsx         | 77 +------------------
 4 files changed, 88 insertions(+), 84 deletions(-)
 create mode 100644 src/components/SelectionList/Search/ActionCell.tsx

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
new file mode 100644
index 000000000000..4f63e2992189
--- /dev/null
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import Badge from '@components/Badge';
+import Button from '@components/Button';
+import * as Expensicons from '@components/Icon/Expensicons';
+import type {TransactionListItemType} from '@components/SelectionList/types';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import * as SearchUtils from '@libs/SearchUtils';
+import type {TranslationPaths} from '@src/languages/types';
+import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
+
+const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
+    view: 'common.view',
+    // Todo add translation for Review
+    review: 'common.view',
+    done: 'common.done',
+    paid: 'iou.settledExpensify',
+    approve: 'iou.approve',
+    pay: 'iou.pay',
+    submit: 'common.submit',
+    hold: 'iou.hold',
+};
+
+type ActionCellProps = {
+    transactionItem: TransactionListItemType;
+    goToItem: () => void;
+};
+
+function ActionCell({transactionItem, goToItem}: ActionCellProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    const {action, amount} = transactionItem;
+
+    const text = translate(actionTranslationsMap[action]);
+
+    if (['done', 'paid'].includes(action)) {
+        return (
+            <Badge
+                success
+                text={text}
+                icon={Expensicons.Checkmark}
+                badgeStyles={[styles.badgeBordered]}
+                textStyles={[{fontWeight: '700'}]}
+            />
+        );
+    }
+
+    if (['view', 'review'].includes(action)) {
+        return (
+            <Button
+                text={text}
+                onPress={goToItem}
+                small
+                pressOnEnter
+                style={[styles.w100]}
+            />
+        );
+    }
+
+    const command = SearchUtils.getTransactionActionCommand(action);
+    const reportsAndAmounts = {[transactionItem.reportID ?? -1]: amount};
+
+    return (
+        <Button
+            text={text}
+            onPress={() => {
+                command('', reportsAndAmounts);
+            }}
+            small
+            pressOnEnter
+            style={[styles.w100]}
+        />
+    );
+}
+
+export default ActionCell;
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index cea9c174dda5..37bae581a26e 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -1,25 +1,26 @@
 import React, {memo} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
+import type {TransactionListItemType} from '@components/SelectionList/types';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
+import ActionCell from './ActionCell';
 import UserInfoCell from './UserInfoCell';
 
 type ExpenseItemHeaderNarrowProps = {
+    transactionItem: TransactionListItemType;
     participantFrom: SearchAccountDetails;
     participantTo: SearchAccountDetails;
     participantFromDisplayName: string;
     participantToDisplayName: string;
-    buttonText: string;
     onButtonPress: () => void;
 };
 
-function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, buttonText, onButtonPress}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({transactionItem, participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, onButtonPress}: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
@@ -47,12 +48,9 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
                 </View>
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
-                <Button
-                    text={buttonText}
-                    onPress={onButtonPress}
-                    small
-                    pressOnEnter
-                    style={[styles.p0]}
+                <ActionCell
+                    transactionItem={transactionItem}
+                    goToItem={onButtonPress}
                 />
             </View>
         </View>
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 2273b80e529d..1c1a813f3d6c 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -146,11 +146,11 @@ function ReportListItem<TItem extends ListItem>({
             <View style={styles.flex1}>
                 {!isLargeScreenWidth && (
                     <ExpenseItemHeaderNarrow
+                        transactionItem={{action: 'view'}}
                         participantFrom={participantFrom}
                         participantFromDisplayName={participantFromDisplayName}
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
-                        buttonText={translate('common.view')}
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 0a51adf0e6df..04eed2a628d8 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -1,27 +1,23 @@
 import React from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import Badge from '@components/Badge';
-import Button from '@components/Button';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ReceiptImage from '@components/ReceiptImage';
 import type {TransactionListItemType} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
-import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import DateUtils from '@libs/DateUtils';
-import * as SearchUtils from '@libs/SearchUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import tryResolveUrlFromApiRoot from '@libs/tryResolveUrlFromApiRoot';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
-import type {TranslationPaths} from '@src/languages/types';
-import type {SearchTransactionAction, SearchTransactionType} from '@src/types/onyx/SearchResults';
+import type {SearchTransactionType} from '@src/types/onyx/SearchResults';
+import ActionCell from './ActionCell';
 import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
 import TextWithIconCell from './TextWithIconCell';
 import UserInfoCell from './UserInfoCell';
@@ -37,10 +33,6 @@ type TransactionCellProps = {
     transactionItem: TransactionListItemType;
 } & CellProps;
 
-type ActionCellProps = {
-    goToItem: () => void;
-} & TransactionCellProps;
-
 type TotalCellProps = {
     isChildListItem: boolean;
 } & TransactionCellProps;
@@ -67,18 +59,6 @@ const getTypeIcon = (type?: SearchTransactionType) => {
     }
 };
 
-const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
-    view: 'common.view',
-    // Todo add translation for Review
-    review: 'common.view',
-    done: 'common.done',
-    paid: 'iou.settledExpensify',
-    approve: 'iou.approve',
-    pay: 'iou.pay',
-    submit: 'common.submit',
-    hold: 'iou.hold',
-};
-
 function ReceiptCell({transactionItem}: TransactionCellProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -163,54 +143,6 @@ function TypeCell({transactionItem, isLargeScreenWidth}: TransactionCellProps) {
     );
 }
 
-function ActionCell({transactionItem, goToItem}: ActionCellProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    const {action, amount} = transactionItem;
-
-    const text = translate(actionTranslationsMap[action]);
-
-    if (['done', 'paid'].includes(action)) {
-        return (
-            <Badge
-                success
-                text={text}
-                icon={Expensicons.Checkmark}
-                badgeStyles={[styles.badgeBordered]}
-                textStyles={[{fontWeight: '700'}]}
-            />
-        );
-    }
-
-    if (['view', 'review'].includes(action)) {
-        return (
-            <Button
-                text={translate('common.view')}
-                onPress={goToItem}
-                small
-                pressOnEnter
-                style={[styles.w100]}
-            />
-        );
-    }
-
-    const command = SearchUtils.getTransactionActionCommand(action);
-    const reportsAndAmounts = {[transactionItem.reportID ?? -1]: amount};
-
-    return (
-        <Button
-            text={text}
-            onPress={() => {
-                command('', reportsAndAmounts);
-            }}
-            small
-            pressOnEnter
-            style={[styles.p0]}
-        />
-    );
-}
-
 function CategoryCell({isLargeScreenWidth, showTooltip, transactionItem}: TransactionCellProps) {
     const styles = useThemeStyles();
     return isLargeScreenWidth ? (
@@ -263,7 +195,6 @@ function TaxCell({transactionItem, showTooltip}: TransactionCellProps) {
 
 function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeaderOnNarrowLayout = true, containerStyle, isChildListItem = false}: TransactionListItemRowProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
     const {isLargeScreenWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
 
@@ -272,11 +203,11 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
             <View style={containerStyle}>
                 {showItemHeaderOnNarrowLayout && (
                     <ExpenseItemHeaderNarrow
+                        transactionItem={item}
                         participantFrom={item.from}
                         participantFromDisplayName={item.formattedFrom}
                         participantTo={item.to}
                         participantToDisplayName={item.formattedTo}
-                        buttonText={translate('common.view')}
                         onButtonPress={onButtonPress}
                     />
                 )}
@@ -414,8 +345,6 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     <ActionCell
                         transactionItem={item}
                         goToItem={onButtonPress}
-                        showTooltip={false}
-                        isLargeScreenWidth={false}
                     />
                 </View>
             </View>

From 1584ced984965ef51bc54e2025a0cf03d9b64fa4 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Fri, 21 Jun 2024 11:29:22 +0200
Subject: [PATCH 03/16] Implement action buttons for transactions and reports
 in Search

---
 src/components/Search.tsx                     |  3 +-
 .../SelectionList/Search/ActionCell.tsx       | 23 +++----
 .../Search/ExpenseItemHeaderNarrow.tsx        | 22 ++++--
 .../SelectionList/Search/ReportListItem.tsx   | 35 +++-------
 .../Search/TransactionListItemRow.tsx         |  8 ++-
 src/components/SelectionList/types.ts         |  3 +
 .../parameters/HoldRequestOnSearchParams.ts   |  7 ++
 .../parameters/UnholdRequestOnSearchParams.ts |  6 ++
 src/libs/API/parameters/index.ts              |  2 +
 src/libs/API/types.ts                         |  5 ++
 src/libs/SearchUtils.ts                       | 34 +++++-----
 src/libs/actions/Search.ts                    | 67 ++++++++++++++-----
 src/types/onyx/SearchResults.ts               | 17 +++--
 13 files changed, 150 insertions(+), 82 deletions(-)
 create mode 100644 src/libs/API/parameters/HoldRequestOnSearchParams.ts
 create mode 100644 src/libs/API/parameters/UnholdRequestOnSearchParams.ts

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index e4faa15bfb94..a326a2716713 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -137,7 +137,8 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
 
     const ListItem = SearchUtils.getListItem(type);
 
-    const data = SearchUtils.getSections(searchResults?.data ?? {}, type);
+    const searchContext = {searchHash: hash};
+    const data = SearchUtils.getSections(searchResults?.data ?? {}, type, searchContext);
     const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
 
     const onSortPress = (column: SearchColumnType, order: SortOrder) => {
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 4f63e2992189..cdff7b0d6196 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
-import type {TransactionListItemType} from '@components/SelectionList/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as SearchUtils from '@libs/SearchUtils';
@@ -11,27 +10,24 @@ import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
 
 const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
     view: 'common.view',
-    // Todo add translation for Review
-    review: 'common.view',
+    review: 'common.view', // Todo fix translation
     done: 'common.done',
     paid: 'iou.settledExpensify',
-    approve: 'iou.approve',
-    pay: 'iou.pay',
-    submit: 'common.submit',
     hold: 'iou.hold',
+    unhold: 'iou.unholdExpense',
 };
 
 type ActionCellProps = {
-    transactionItem: TransactionListItemType;
+    action: SearchTransactionAction;
+    transactionIDs: string[];
+    searchHash: number;
     goToItem: () => void;
 };
 
-function ActionCell({transactionItem, goToItem}: ActionCellProps) {
+function ActionCell({action, transactionIDs, searchHash, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
-    const {action, amount} = transactionItem;
-
     const text = translate(actionTranslationsMap[action]);
 
     if (['done', 'paid'].includes(action)) {
@@ -59,13 +55,16 @@ function ActionCell({transactionItem, goToItem}: ActionCellProps) {
     }
 
     const command = SearchUtils.getTransactionActionCommand(action);
-    const reportsAndAmounts = {[transactionItem.reportID ?? -1]: amount};
 
     return (
         <Button
             text={text}
             onPress={() => {
-                command('', reportsAndAmounts);
+                if (!command) {
+                    return;
+                }
+
+                command(searchHash, transactionIDs, '');
             }}
             small
             pressOnEnter
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 37bae581a26e..8bb4628d9fb4 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -2,25 +2,35 @@ import React, {memo} from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import type {TransactionListItemType} from '@components/SelectionList/types';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
-import type {SearchAccountDetails} from '@src/types/onyx/SearchResults';
+import type {SearchAccountDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import ActionCell from './ActionCell';
 import UserInfoCell from './UserInfoCell';
 
 type ExpenseItemHeaderNarrowProps = {
-    transactionItem: TransactionListItemType;
     participantFrom: SearchAccountDetails;
     participantTo: SearchAccountDetails;
     participantFromDisplayName: string;
     participantToDisplayName: string;
+    action: SearchTransactionAction;
+    transactionIDs: string[];
+    searchHash: number;
     onButtonPress: () => void;
 };
 
-function ExpenseItemHeaderNarrow({transactionItem, participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, onButtonPress}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({
+    participantFrom,
+    participantFromDisplayName,
+    participantTo,
+    participantToDisplayName,
+    action,
+    transactionIDs,
+    searchHash,
+    onButtonPress,
+}: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
@@ -49,7 +59,9 @@ function ExpenseItemHeaderNarrow({transactionItem, participantFrom, participantF
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
-                    transactionItem={transactionItem}
+                    action={action}
+                    transactionIDs={transactionIDs}
+                    searchHash={searchHash}
                     goToItem={onButtonPress}
                 />
             </View>
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 1c1a813f3d6c..b49ae0a3a35d 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import BaseListItem from '@components/SelectionList/BaseListItem';
 import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
@@ -14,6 +13,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import {getSearchParams} from '@libs/SearchUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import ActionCell from './ActionCell';
 import ExpenseItemHeaderNarrow from './ExpenseItemHeaderNarrow';
 import TransactionListItem from './TransactionListItem';
 import TransactionListItemRow from './TransactionListItemRow';
@@ -29,10 +29,6 @@ type ReportCellProps = {
     reportItem: ReportListItemType;
 } & CellProps;
 
-type ActionCellProps = {
-    onButtonPress: () => void;
-} & CellProps;
-
 function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProps) {
     const styles = useThemeStyles();
 
@@ -45,21 +41,6 @@ function TotalCell({showTooltip, isLargeScreenWidth, reportItem}: ReportCellProp
     );
 }
 
-function ActionCell({onButtonPress}: ActionCellProps) {
-    const {translate} = useLocalize();
-    const styles = useThemeStyles();
-
-    return (
-        <Button
-            text={translate('common.view')}
-            onPress={onButtonPress}
-            small
-            pressOnEnter
-            style={[styles.w100]}
-        />
-    );
-}
-
 function ReportListItem<TItem extends ListItem>({
     item,
     isFocused,
@@ -124,6 +105,9 @@ function ReportListItem<TItem extends ListItem>({
         );
     }
 
+    // every child item comes from the same search hash, so it doesn't matter which one we use, we just need the hash
+    const {searchHash} = reportItem.transactions[0];
+
     return (
         <BaseListItem
             item={item}
@@ -146,11 +130,13 @@ function ReportListItem<TItem extends ListItem>({
             <View style={styles.flex1}>
                 {!isLargeScreenWidth && (
                     <ExpenseItemHeaderNarrow
-                        transactionItem={{action: 'view'}}
                         participantFrom={participantFrom}
                         participantFromDisplayName={participantFromDisplayName}
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
+                        action={reportItem.action ?? 'view'}
+                        transactionIDs={[]}
+                        searchHash={searchHash}
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
@@ -176,9 +162,10 @@ function ReportListItem<TItem extends ListItem>({
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
-                                    showTooltip={showTooltip}
-                                    isLargeScreenWidth={isLargeScreenWidth}
-                                    onButtonPress={handleOnButtonPress}
+                                    action={reportItem.action ?? 'view'}
+                                    transactionIDs={[]}
+                                    searchHash={searchHash}
+                                    goToItem={handleOnButtonPress}
                                 />
                             </View>
                         </>
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 04eed2a628d8..cd399f45d006 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -203,11 +203,13 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
             <View style={containerStyle}>
                 {showItemHeaderOnNarrowLayout && (
                     <ExpenseItemHeaderNarrow
-                        transactionItem={item}
                         participantFrom={item.from}
                         participantFromDisplayName={item.formattedFrom}
                         participantTo={item.to}
                         participantToDisplayName={item.formattedTo}
+                        action={item.action}
+                        transactionIDs={[item.transactionID]}
+                        searchHash={item.searchHash}
                         onButtonPress={onButtonPress}
                     />
                 )}
@@ -343,7 +345,9 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
-                        transactionItem={item}
+                        action={item.action}
+                        transactionIDs={[item.transactionID]}
+                        searchHash={item.searchHash}
                         goToItem={onButtonPress}
                     />
                 </View>
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index f65a2624ad10..c2d695b71227 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -172,6 +172,9 @@ type TransactionListItemType = ListItem &
          * This is true if at least one transaction in the dataset was created in past years
          */
         shouldShowYear: boolean;
+
+        /** Hash of search that was used to retrieve this item, needed for performing Actions on it */
+        searchHash: number;
     };
 
 type ReportListItemType = ListItem &
diff --git a/src/libs/API/parameters/HoldRequestOnSearchParams.ts b/src/libs/API/parameters/HoldRequestOnSearchParams.ts
new file mode 100644
index 000000000000..a2bdbcb02591
--- /dev/null
+++ b/src/libs/API/parameters/HoldRequestOnSearchParams.ts
@@ -0,0 +1,7 @@
+type HoldRequestOnSearchParams = {
+    searchHash: number;
+    transactionIDList: string[];
+    comment?: string;
+};
+
+export default HoldRequestOnSearchParams;
diff --git a/src/libs/API/parameters/UnholdRequestOnSearchParams.ts b/src/libs/API/parameters/UnholdRequestOnSearchParams.ts
new file mode 100644
index 000000000000..eaae2d9d4403
--- /dev/null
+++ b/src/libs/API/parameters/UnholdRequestOnSearchParams.ts
@@ -0,0 +1,6 @@
+type UnholdRequestOnSearchParams = {
+    searchHash: number;
+    transactionIDList: string[];
+};
+
+export default UnholdRequestOnSearchParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index 26df06fc6294..e6e40e3e64ef 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -231,3 +231,5 @@ export type {default as UpdateSubscriptionAutoRenewParams} from './UpdateSubscri
 export type {default as UpdateSubscriptionAddNewUsersAutomaticallyParams} from './UpdateSubscriptionAddNewUsersAutomaticallyParams';
 export type {default as GenerateSpotnanaTokenParams} from './GenerateSpotnanaTokenParams';
 export type {default as UpdateSubscriptionSizeParams} from './UpdateSubscriptionSizeParams';
+export type {default as HoldRequestOnSearchParams} from './HoldRequestOnSearchParams';
+export type {default as UnholdRequestOnSearchParams} from './UnholdRequestOnSearchParams';
diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts
index 8f093ee827c3..149f44325ea8 100644
--- a/src/libs/API/types.ts
+++ b/src/libs/API/types.ts
@@ -227,6 +227,8 @@ const WRITE_COMMANDS = {
     UPDATE_SUBSCRIPTION_AUTO_RENEW: 'UpdateSubscriptionAutoRenew',
     UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY: 'UpdateSubscriptionAddNewUsersAutomatically',
     UPDATE_SUBSCRIPTION_SIZE: 'UpdateSubscriptionSize',
+    HOLD_MONEY_REQUEST_ON_SEARCH: 'HoldRequestOnSearch',
+    UNHOLD_MONEY_REQUEST_ON_SEARCH: 'UnHoldRequestOnSearch',
 } as const;
 
 type WriteCommand = ValueOf<typeof WRITE_COMMANDS>;
@@ -455,6 +457,9 @@ type WriteCommandParameters = {
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_AUTO_RENEW]: Parameters.UpdateSubscriptionAutoRenewParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_ADD_NEW_USERS_AUTOMATICALLY]: Parameters.UpdateSubscriptionAddNewUsersAutomaticallyParams;
     [WRITE_COMMANDS.UPDATE_SUBSCRIPTION_SIZE]: Parameters.UpdateSubscriptionSizeParams;
+
+    [WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH]: Parameters.HoldRequestOnSearchParams;
+    [WRITE_COMMANDS.UNHOLD_MONEY_REQUEST_ON_SEARCH]: Parameters.UnholdRequestOnSearchParams;
 };
 
 const READ_COMMANDS = {
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 3c450d2f605f..1248bca29385 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -24,6 +24,9 @@ import * as UserUtils from './UserUtils';
 
 type SortOrder = ValueOf<typeof CONST.SORT_ORDER>;
 type SearchColumnType = ValueOf<typeof CONST.SEARCH_TABLE_COLUMNS>;
+type SearchDataContext = {
+    searchHash: number;
+};
 
 const columnNamesToSortingProperty = {
     [CONST.SEARCH_TABLE_COLUMNS.TO]: 'formattedTo' as const,
@@ -121,7 +124,7 @@ function shouldShowYear(data: TransactionListItemType[] | ReportListItemType[] |
     return false;
 }
 
-function getTransactionsSections(data: OnyxTypes.SearchResults['data']): TransactionListItemType[] {
+function getTransactionsSections(data: OnyxTypes.SearchResults['data'], context: SearchDataContext): TransactionListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -147,6 +150,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
                 formattedMerchant,
                 date,
                 shouldShowMerchant,
+                searchHash: context.searchHash,
                 shouldShowCategory: true,
                 shouldShowTag: true,
                 shouldShowTax: true,
@@ -156,7 +160,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac
         });
 }
 
-function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListItemType[] {
+function getReportSections(data: OnyxTypes.SearchResults['data'], context: SearchDataContext): ReportListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -194,6 +198,7 @@ function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListIte
                 formattedMerchant,
                 date,
                 shouldShowMerchant,
+                searchHash: context.searchHash,
                 shouldShowCategory: true,
                 shouldShowTag: true,
                 shouldShowTax: true,
@@ -229,8 +234,8 @@ function getListItem<K extends keyof SearchTypeToItemMap>(type: K): SearchTypeTo
     return searchTypeToItemMap[type].listItem;
 }
 
-function getSections<K extends keyof SearchTypeToItemMap>(data: OnyxTypes.SearchResults['data'], type: K): ReturnType<SearchTypeToItemMap[K]['getSections']> {
-    return searchTypeToItemMap[type].getSections(data) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
+function getSections<K extends keyof SearchTypeToItemMap>(data: OnyxTypes.SearchResults['data'], type: K, context: SearchDataContext): ReturnType<SearchTypeToItemMap[K]['getSections']> {
+    return searchTypeToItemMap[type].getSections(data, context) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
 }
 
 function getSortedSections<K extends keyof SearchTypeToItemMap>(
@@ -278,20 +283,15 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
     });
 }
 
-function getTransactionActionCommand(action: Omit<SearchTransactionAction, 'view' | 'done' | 'paid'>): (searchHash: string, reportsAndAmounts: Record<string, number>) => void {
-    if (action === 'pay') {
-        return SearchActions.payMoneyRequest;
-    }
-
-    if (action === 'approve') {
-        return SearchActions.approveMoneyRequest;
-    }
-
+function getTransactionActionCommand(
+    action: Omit<SearchTransactionAction, 'view' | 'done' | 'paid'>,
+): ((searchHash: number, transactionIDList: string[], comment?: string) => void) | undefined {
     if (action === 'hold') {
-        return SearchActions.holdMoneyRequest;
+        return SearchActions.holdMoneyRequestOnSearch;
+    }
+    if (action === 'unhold') {
+        return SearchActions.unholdMoneyRequestOnSearch;
     }
-
-    return SearchActions.submitMoneyRequest;
 }
 
 function getSearchParams() {
@@ -300,4 +300,4 @@ function getSearchParams() {
 }
 
 export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getTransactionActionCommand, getSearchParams, shouldShowYear};
-export type {SearchColumnType, SortOrder};
+export type {SearchColumnType, SortOrder, SearchDataContext};
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
index e191dd2527a8..59544f09bae6 100644
--- a/src/libs/actions/Search.ts
+++ b/src/libs/actions/Search.ts
@@ -2,7 +2,7 @@ import Onyx from 'react-native-onyx';
 import type {OnyxUpdate} from 'react-native-onyx';
 import * as API from '@libs/API';
 import type {SearchParams} from '@libs/API/parameters';
-import {READ_COMMANDS} from '@libs/API/types';
+import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {SearchTransaction} from '@src/types/onyx/SearchResults';
 import * as Report from './Report';
@@ -60,24 +60,59 @@ function createTransactionThread(hash: number, transactionID: string, reportID:
     Onyx.merge(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, onyxUpdate);
 }
 
-// Todo finalize the action methods and api calls
-function payMoneyRequest(searchHash: string, reportsAndAmounts: Record<string, number>) {
-    const optimisticData = {
-        onyxMethod: 'merge',
-        key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-        value: {isLoading: true},
+function holdMoneyRequestOnSearch(searchHash: number, transactionIDList: string[], comment?: string) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+            value: {isLoading: true},
+        },
+    ];
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+            value: {isLoading: false},
+        },
+    ];
+
+    const commandPayload = {
+        searchHash,
+        transactionIDList,
+        comment,
     };
-    const finallyData = {
-        onyxMethod: 'merge',
-        key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-        value: {isLoading: false},
+
+    API.write(WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH, commandPayload, {optimisticData, finallyData});
+}
+
+function unholdMoneyRequestOnSearch(searchHash: number, transactionIDList: string[]) {
+    const optimisticData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+            value: {isLoading: true},
+        },
+    ];
+    const finallyData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
+            value: {isLoading: false},
+        },
+    ];
+
+    const commandPayload = {
+        searchHash,
+        transactionIDList,
     };
 
-    API.write('Request', {paymentType, reportsAndAmounts}, {optimisticData, finallyData});
+    API.write(WRITE_COMMANDS.UNHOLD_MONEY_REQUEST_ON_SEARCH, commandPayload, {optimisticData, finallyData});
 }
 
-function approveMoneyRequest() {}
-function holdMoneyRequest() {}
-function submitMoneyRequest() {}
+// These actions will be implemented at a later point
+// function payMoneyRequest() {}
+// function approveMoneyRequest() {}
+// function holdMoneyRequest() {}
+// function submitMoneyRequest() {}
 
-export {search, createTransactionThread, payMoneyRequest, approveMoneyRequest, holdMoneyRequest, submitMoneyRequest};
+export {search, createTransactionThread, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch};
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index c1f1e4dc6dac..96a1d42c5cc9 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -2,7 +2,7 @@ import type {ValueOf} from 'type-fest';
 import type ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import type TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
-import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
+import type {SearchColumnType, SearchDataContext, SortOrder} from '@libs/SearchUtils';
 import type CONST from '@src/CONST';
 
 /** Types of search data */
@@ -29,7 +29,7 @@ type SearchTypeToItemMap = {
         listItem: ListItemType<K>;
 
         /** Returns search results sections based on search results data */
-        getSections: (data: SearchResults['data']) => SectionsType<K>;
+        getSections: (data: SearchResults['data'], context: SearchDataContext) => SectionsType<K>;
 
         /** Returns sorted search results sections based on search results data */
         getSortedSections: (data: SectionsType<K>, sortBy?: SearchColumnType, sortOrder?: SortOrder) => SectionsType<K>;
@@ -78,6 +78,12 @@ type SearchPolicyDetails = {
     name: string;
 };
 
+/** The action that can be performed for the transaction */
+type SearchTransactionAction = 'view' | 'review' | 'done' | 'paid' | 'hold' | 'unhold';
+
+/** The action that can be performed for the report */
+type SearchReportAction = 'view' | 'review' | 'done' | 'paid';
+
 /** Model of report search result */
 type SearchReport = {
     /** The ID of the report */
@@ -96,11 +102,9 @@ type SearchReport = {
     type?: string;
 
     /** The action that can be performed for the report */
-    action?: string;
+    action?: SearchReportAction;
 };
 
-type SearchTransactionAction = 'done' | 'paid' | 'view' | 'review' | 'pay' | 'approve' | 'hold' | 'submit';
-
 /** Model of transaction search result */
 type SearchTransaction = {
     /** The ID of the transaction */
@@ -213,6 +217,9 @@ type SearchResults = {
 
     /** Search results data */
     data: Record<string, SearchTransaction & Record<string, SearchPersonalDetails>> & Record<string, SearchPolicyDetails> & Record<string, SearchReport>;
+
+    /** Whether search data is being fetched from server */
+    isLoading?: boolean;
 };
 
 export default SearchResults;

From dbb2748692b67e8e5cb8b5e025880d546b4feda4 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Mon, 24 Jun 2024 13:26:30 +0200
Subject: [PATCH 04/16] Implement small changes in Actions after review

---
 src/components/SelectionList/Search/ActionCell.tsx          | 6 +++---
 .../SelectionList/Search/ExpenseItemHeaderNarrow.tsx        | 2 +-
 src/components/SelectionList/Search/ReportListItem.tsx      | 2 --
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index cdff7b0d6196..918d4c16b70d 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -19,12 +19,12 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 
 type ActionCellProps = {
     action: SearchTransactionAction;
-    transactionIDs: string[];
+    transactionIDs?: string[];
     searchHash: number;
     goToItem: () => void;
 };
 
-function ActionCell({action, transactionIDs, searchHash, goToItem}: ActionCellProps) {
+function ActionCell({action, transactionIDs = [], searchHash, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
 
@@ -64,7 +64,7 @@ function ActionCell({action, transactionIDs, searchHash, goToItem}: ActionCellPr
                     return;
                 }
 
-                command(searchHash, transactionIDs, '');
+                command(searchHash, transactionIDs);
             }}
             small
             pressOnEnter
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 2f6ce4970e96..fcb924e49a22 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -16,7 +16,7 @@ type ExpenseItemHeaderNarrowProps = {
     participantFromDisplayName: string;
     participantToDisplayName: string;
     action: SearchTransactionAction;
-    transactionIDs: string[];
+    transactionIDs?: string[];
     searchHash: number;
     onButtonPress: () => void;
 };
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 5719298781d5..651225dbee23 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -135,7 +135,6 @@ function ReportListItem<TItem extends ListItem>({
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
                         action={reportItem.action ?? 'view'}
-                        transactionIDs={[]}
                         searchHash={searchHash}
                         onButtonPress={handleOnButtonPress}
                     />
@@ -163,7 +162,6 @@ function ReportListItem<TItem extends ListItem>({
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
                                     action={reportItem.action ?? 'view'}
-                                    transactionIDs={[]}
                                     searchHash={searchHash}
                                     goToItem={handleOnButtonPress}
                                 />

From b573e740ac928fc7231bd8688e3402be59a9026f Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 25 Jun 2024 11:42:31 +0200
Subject: [PATCH 05/16] refactor Consts for Search

---
 src/CONST.ts                                  | 77 ++++++++++---------
 src/components/Search.tsx                     |  4 +-
 .../SelectionList/Search/ReportListItem.tsx   |  6 +-
 .../Search/TransactionListItemRow.tsx         | 28 +++----
 .../SelectionList/SearchTableHeader.tsx       | 28 +++----
 .../SelectionList/SortableHeaderText.tsx      |  4 +-
 .../BottomTabBar/index.tsx                    |  2 +-
 .../BottomTabBar/index.website.tsx            |  2 +-
 src/libs/Navigation/switchPolicyID.ts         |  2 +-
 src/libs/SearchUtils.ts                       | 38 ++++-----
 src/pages/Search/SearchFilters.tsx            | 16 ++--
 src/pages/Search/SearchPage.tsx               |  4 +-
 src/pages/Search/SearchPageBottomTab.tsx      |  8 +-
 src/styles/utils/index.ts                     | 22 +++---
 src/types/onyx/SearchResults.ts               | 16 ++--
 15 files changed, 131 insertions(+), 126 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index c485268b55e2..e11c753cb450 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -943,20 +943,6 @@ const CONST = {
         RESIZE_DEBOUNCE_TIME: 100,
         UNREAD_UPDATE_DEBOUNCE_TIME: 300,
     },
-    SEARCH_TABLE_COLUMNS: {
-        RECEIPT: 'receipt',
-        DATE: 'date',
-        MERCHANT: 'merchant',
-        DESCRIPTION: 'description',
-        FROM: 'from',
-        TO: 'to',
-        CATEGORY: 'category',
-        TAG: 'tag',
-        TOTAL_AMOUNT: 'amount',
-        TYPE: 'type',
-        ACTION: 'action',
-        TAX_AMOUNT: 'taxAmount',
-    },
     PRIORITY_MODE: {
         GSD: 'gsd',
         DEFAULT: 'default',
@@ -3542,12 +3528,7 @@ const CONST = {
         SCAN: 'scan',
         DISTANCE: 'distance',
     },
-    TAB_SEARCH: {
-        ALL: 'all',
-        SHARED: 'shared',
-        DRAFTS: 'drafts',
-        FINISHED: 'finished',
-    },
+
     STATUS_TEXT_MAX_LENGTH: 100,
 
     DROPDOWN_BUTTON_SIZE: {
@@ -4848,28 +4829,52 @@ const CONST = {
         ADHOC: ' AdHoc',
     },
 
-    SEARCH_TRANSACTION_TYPE: {
-        CASH: 'cash',
-        CARD: 'card',
-        DISTANCE: 'distance',
-    },
-
-    SEARCH_RESULTS_PAGE_SIZE: 50,
-
-    SEARCH_DATA_TYPES: {
-        TRANSACTION: 'transaction',
-        REPORT: 'report',
+    SEARCH: {
+        RESULTS_PAGE_SIZE: 50,
+        DATA_TYPES: {
+            TRANSACTION: 'transaction',
+            REPORT: 'report',
+        },
+        ACTION_TYPES: {
+            DONE: 'done',
+            PAID: 'paid',
+            VIEW: 'view',
+        },
+        TRANSACTION_TYPE: {
+            CASH: 'cash',
+            CARD: 'card',
+            DISTANCE: 'distance',
+        },
+        SORT_ORDER: {
+            ASC: 'asc',
+            DESC: 'desc',
+        },
+        TAB: {
+            ALL: 'all',
+            SHARED: 'shared',
+            DRAFTS: 'drafts',
+            FINISHED: 'finished',
+        },
+        TABLE_COLUMNS: {
+            RECEIPT: 'receipt',
+            DATE: 'date',
+            MERCHANT: 'merchant',
+            DESCRIPTION: 'description',
+            FROM: 'from',
+            TO: 'to',
+            CATEGORY: 'category',
+            TAG: 'tag',
+            TOTAL_AMOUNT: 'amount',
+            TYPE: 'type',
+            ACTION: 'action',
+            TAX_AMOUNT: 'taxAmount',
+        },
     },
 
     REFERRER: {
         NOTIFICATION: 'notification',
     },
 
-    SORT_ORDER: {
-        ASC: 'asc',
-        DESC: 'desc',
-    },
-
     SUBSCRIPTION_SIZE_LIMIT: 20000,
 
     PAYMENT_CARD_CURRENCY: {
diff --git a/src/components/Search.tsx b/src/components/Search.tsx
index 5fd256c69e57..349d55d05972 100644
--- a/src/components/Search.tsx
+++ b/src/components/Search.tsx
@@ -35,7 +35,7 @@ type SearchProps = {
     sortOrder?: SortOrder;
 };
 
-const sortableSearchTabs: SearchQuery[] = [CONST.TAB_SEARCH.ALL];
+const sortableSearchTabs: SearchQuery[] = [CONST.SEARCH.TAB.ALL];
 const transactionItemMobileHeight = 100;
 const reportItemTransactionHeight = 52;
 const listItemPadding = 12; // this is equivalent to 'mb3' on every transaction/report list item
@@ -125,7 +125,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             return;
         }
         const currentOffset = searchResults?.search?.offset ?? 0;
-        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH_RESULTS_PAGE_SIZE, sortBy, sortOrder});
+        SearchActions.search({hash, query, offset: currentOffset + CONST.SEARCH.RESULTS_PAGE_SIZE, sortBy, sortOrder});
     };
 
     const type = SearchUtils.getSearchType(searchResults?.search);
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 651225dbee23..92a218a57e77 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -71,7 +71,7 @@ function ReportListItem<TItem extends ListItem>({
 
     const openReportInRHP = (transactionItem: TransactionListItemType) => {
         const searchParams = getSearchParams();
-        const currentQuery = searchParams?.query ?? CONST.TAB_SEARCH.ALL;
+        const currentQuery = searchParams?.query ?? CONST.SEARCH.TAB.ALL;
         Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(currentQuery, transactionItem.transactionThreadReportID));
     };
 
@@ -158,8 +158,8 @@ function ReportListItem<TItem extends ListItem>({
                     {isLargeScreenWidth && (
                         <>
                             {/** We add an empty view with type style to align the total with the table header */}
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)} />
-                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)}>
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
+                            <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
                                     action={reportItem.action ?? 'view'}
                                     searchHash={searchHash}
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 0f16e111050d..e78ac5f9b72e 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -49,11 +49,11 @@ type TransactionListItemRowProps = {
 
 const getTypeIcon = (type?: SearchTransactionType) => {
     switch (type) {
-        case CONST.SEARCH_TRANSACTION_TYPE.CASH:
+        case CONST.SEARCH.TRANSACTION_TYPE.CASH:
             return Expensicons.Cash;
-        case CONST.SEARCH_TRANSACTION_TYPE.CARD:
+        case CONST.SEARCH.TRANSACTION_TYPE.CARD:
             return Expensicons.CreditCard;
-        case CONST.SEARCH_TRANSACTION_TYPE.DISTANCE:
+        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
             return Expensicons.Car;
         default:
             return Expensicons.Cash;
@@ -269,41 +269,41 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
     return (
         <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, containerStyle]}>
             <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.RECEIPT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
                     <ReceiptCell
                         transactionItem={item}
                         isLargeScreenWidth={false}
                         showTooltip={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.DATE, item.shouldShowYear)]}>
                     <DateCell
                         transactionItem={item}
                         showTooltip={showTooltip}
                         isLargeScreenWidth={isLargeScreenWidth}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.MERCHANT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.MERCHANT)]}>
                     <MerchantCell
                         transactionItem={item}
                         showTooltip={showTooltip}
                         isLargeScreenWidth={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
                         participant={item.from}
                         displayName={item.formattedFrom}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.FROM)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
                         participant={item.to}
                         displayName={item.formattedTo}
                     />
                 </View>
                 {item.shouldShowCategory && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.CATEGORY)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.CATEGORY)]}>
                         <CategoryCell
                             isLargeScreenWidth={isLargeScreenWidth}
                             showTooltip={showTooltip}
@@ -312,7 +312,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
                 {item.shouldShowTag && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAG)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAG)]}>
                         <TagCell
                             isLargeScreenWidth={isLargeScreenWidth}
                             showTooltip={showTooltip}
@@ -321,7 +321,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
                 {item.shouldShowTax && (
-                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT)]}>
+                    <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT)]}>
                         <TaxCell
                             transactionItem={item}
                             isLargeScreenWidth={isLargeScreenWidth}
@@ -330,7 +330,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                     </View>
                 )}
 
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT)]}>
                     <TotalCell
                         showTooltip={showTooltip}
                         transactionItem={item}
@@ -338,14 +338,14 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                         isChildListItem={isChildListItem}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.TYPE)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)]}>
                     <TypeCell
                         transactionItem={item}
                         isLargeScreenWidth={isLargeScreenWidth}
                         showTooltip={false}
                     />
                 </View>
-                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>
+                <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
                         transactionIDs={[item.transactionID]}
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index 9cb7bb940bd5..6ba753273e8c 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -20,65 +20,65 @@ type SearchColumnConfig = {
 
 const SearchColumns: SearchColumnConfig[] = [
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.RECEIPT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.RECEIPT,
         translationKey: 'common.receipt',
         shouldShow: () => true,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.DATE,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.DATE,
         translationKey: 'common.date',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.MERCHANT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
         translationKey: 'common.merchant',
         shouldShow: (data: OnyxTypes.SearchResults['data']) => SearchUtils.getShouldShowMerchant(data),
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION,
         translationKey: 'common.description',
         shouldShow: (data: OnyxTypes.SearchResults['data']) => !SearchUtils.getShouldShowMerchant(data),
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.FROM,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.FROM,
         translationKey: 'common.from',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TO,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TO,
         translationKey: 'common.to',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.CATEGORY,
         translationKey: 'common.category',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowCategoryColumn ?? false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TAG,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
         translationKey: 'common.tag',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTagColumn ?? false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
         translationKey: 'common.tax',
         shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTaxColumn ?? false,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
         translationKey: 'common.total',
         shouldShow: () => true,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.TYPE,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.TYPE,
         translationKey: 'common.type',
         shouldShow: () => true,
         isColumnSortable: false,
     },
     {
-        columnName: CONST.SEARCH_TABLE_COLUMNS.ACTION,
+        columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION,
         translationKey: 'common.action',
         shouldShow: () => true,
         isColumnSortable: false,
@@ -115,7 +115,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed,
                     }
 
                     const isActive = sortBy === columnName;
-                    const textStyle = columnName === CONST.SEARCH_TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
+                    const textStyle = columnName === CONST.SEARCH.TABLE_COLUMNS.RECEIPT ? StyleUtils.getTextOverflowStyle('clip') : null;
                     const isSortable = isSortingAllowed && isColumnSortable;
 
                     return (
@@ -123,7 +123,7 @@ function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed,
                             key={translationKey}
                             text={translate(translationKey)}
                             textStyle={textStyle}
-                            sortOrder={sortOrder ?? CONST.SORT_ORDER.ASC}
+                            sortOrder={sortOrder ?? CONST.SEARCH.SORT_ORDER.ASC}
                             isActive={isActive}
                             containerStyle={[StyleUtils.getSearchTableColumnStyles(columnName, shouldShowYear)]}
                             isSortable={isSortable}
diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
index bd5f4873bbbc..8b0accf45711 100644
--- a/src/components/SelectionList/SortableHeaderText.tsx
+++ b/src/components/SelectionList/SortableHeaderText.tsx
@@ -39,11 +39,11 @@ export default function SortableHeaderText({text, sortOrder, isActive, textStyle
         );
     }
 
-    const icon = sortOrder === CONST.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
+    const icon = sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? Expensicons.ArrowUpLong : Expensicons.ArrowDownLong;
     const displayIcon = isActive;
     const activeColumnStyle = isSortable && isActive && styles.searchTableHeaderActive;
 
-    const nextSortOrder = isActive && sortOrder === CONST.SORT_ORDER.DESC ? CONST.SORT_ORDER.ASC : CONST.SORT_ORDER.DESC;
+    const nextSortOrder = isActive && sortOrder === CONST.SEARCH.SORT_ORDER.DESC ? CONST.SEARCH.SORT_ORDER.ASC : CONST.SEARCH.SORT_ORDER.DESC;
 
     return (
         <View style={containerStyle}>
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
index 9b2e9449c672..79cb33ef9b39 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.tsx
@@ -100,7 +100,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}
diff --git a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
index 4fecfdcb0e3e..699ebebbc66c 100644
--- a/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
+++ b/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar/index.website.tsx
@@ -101,7 +101,7 @@ function BottomTabBar({isLoadingApp = false}: PurposeForUsingExpensifyModalProps
             <Tooltip text={translate('common.search')}>
                 <PressableWithFeedback
                     onPress={() => {
-                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL)));
+                        interceptAnonymousUser(() => Navigation.navigate(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL)));
                     }}
                     role={CONST.ROLE.BUTTON}
                     accessibilityLabel={translate('common.search')}
diff --git a/src/libs/Navigation/switchPolicyID.ts b/src/libs/Navigation/switchPolicyID.ts
index 78d23cb9d53c..ffaaf8daa081 100644
--- a/src/libs/Navigation/switchPolicyID.ts
+++ b/src/libs/Navigation/switchPolicyID.ts
@@ -77,7 +77,7 @@ export default function switchPolicyID(navigation: NavigationContainerRef<RootSt
     // Here's the configuration: src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
     const isOpeningSearchFromBottomTab = !route && topmostCentralPaneRoute?.name === SCREENS.SEARCH.CENTRAL_PANE;
     if (isOpeningSearchFromBottomTab) {
-        newPath = ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL);
+        newPath = ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL);
     }
     const stateFromPath = getStateFromPath(newPath as Route) as PartialState<NavigationState<RootStackParamList>>;
     const action: StackNavigationAction = getActionFromState(stateFromPath, linkingConfig.config);
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 10c0a4cb28db..bb7dbc59b785 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -22,25 +22,25 @@ import type {CentralPaneNavigatorParamList, RootStackParamList, State} from './N
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
-type SortOrder = ValueOf<typeof CONST.SORT_ORDER>;
-type SearchColumnType = ValueOf<typeof CONST.SEARCH_TABLE_COLUMNS>;
+type SortOrder = ValueOf<typeof CONST.SEARCH.SORT_ORDER>;
+type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
 type SearchDataContext = {
     searchHash: number;
 };
 
 const columnNamesToSortingProperty = {
-    [CONST.SEARCH_TABLE_COLUMNS.TO]: 'formattedTo' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.DATE]: 'date' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.TAG]: 'tag' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT]: 'formattedTotal' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.CATEGORY]: 'category' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.TYPE]: 'type' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.ACTION]: 'action' as const,
-    [CONST.SEARCH_TABLE_COLUMNS.DESCRIPTION]: null,
-    [CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT]: null,
-    [CONST.SEARCH_TABLE_COLUMNS.RECEIPT]: null,
+    [CONST.SEARCH.TABLE_COLUMNS.TO]: 'formattedTo' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.DATE]: 'date' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.TAG]: 'tag' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.MERCHANT]: 'formattedMerchant' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: 'formattedTotal' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.CATEGORY]: 'category' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.TYPE]: 'type' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.ACTION]: 'action' as const,
+    [CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION]: null,
+    [CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: null,
+    [CONST.SEARCH.TABLE_COLUMNS.RECEIPT]: null,
 };
 
 /**
@@ -70,7 +70,7 @@ function getTransactionItemCommonFormattedProperties(
 }
 
 function isSearchDataType(type: string): type is SearchDataTypes {
-    const searchDataTypes: string[] = Object.values(CONST.SEARCH_DATA_TYPES);
+    const searchDataTypes: string[] = Object.values(CONST.SEARCH.DATA_TYPES);
     return searchDataTypes.includes(type);
 }
 
@@ -217,12 +217,12 @@ function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx
 }
 
 const searchTypeToItemMap: SearchTypeToItemMap = {
-    [CONST.SEARCH_DATA_TYPES.TRANSACTION]: {
+    [CONST.SEARCH.DATA_TYPES.TRANSACTION]: {
         listItem: TransactionListItem,
         getSections: getTransactionsSections,
         getSortedSections: getSortedTransactionData,
     },
-    [CONST.SEARCH_DATA_TYPES.REPORT]: {
+    [CONST.SEARCH.DATA_TYPES.REPORT]: {
         listItem: ReportListItem,
         getSections: getReportSections,
         // sorting for ReportItems not yet implemented
@@ -278,13 +278,13 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
 
         // We are guaranteed that both a and b will be string or number at the same time
         if (typeof aValue === 'string' && typeof bValue === 'string') {
-            return sortOrder === CONST.SORT_ORDER.ASC ? aValue.toLowerCase().localeCompare(bValue) : bValue.toLowerCase().localeCompare(aValue);
+            return sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? aValue.toLowerCase().localeCompare(bValue) : bValue.toLowerCase().localeCompare(aValue);
         }
 
         const aNum = aValue as number;
         const bNum = bValue as number;
 
-        return sortOrder === CONST.SORT_ORDER.ASC ? aNum - bNum : bNum - aNum;
+        return sortOrder === CONST.SEARCH.SORT_ORDER.ASC ? aNum - bNum : bNum - aNum;
     });
 }
 
diff --git a/src/pages/Search/SearchFilters.tsx b/src/pages/Search/SearchFilters.tsx
index 6026a4570a91..bbb861364f00 100644
--- a/src/pages/Search/SearchFilters.tsx
+++ b/src/pages/Search/SearchFilters.tsx
@@ -34,27 +34,27 @@ function SearchFilters({query}: SearchFiltersProps) {
     const filterItems: SearchMenuFilterItem[] = [
         {
             title: translate('common.expenses'),
-            query: CONST.TAB_SEARCH.ALL,
+            query: CONST.SEARCH.TAB.ALL,
             icon: Expensicons.Receipt,
-            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL),
+            route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL),
         },
         {
             title: translate('common.shared'),
-            query: CONST.TAB_SEARCH.SHARED,
+            query: CONST.SEARCH.TAB.SHARED,
             icon: Expensicons.Send,
-            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.SHARED),
+            route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.SHARED),
         },
         {
             title: translate('common.drafts'),
-            query: CONST.TAB_SEARCH.DRAFTS,
+            query: CONST.SEARCH.TAB.DRAFTS,
             icon: Expensicons.Pencil,
-            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.DRAFTS),
+            route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.DRAFTS),
         },
         {
             title: translate('common.finished'),
-            query: CONST.TAB_SEARCH.FINISHED,
+            query: CONST.SEARCH.TAB.FINISHED,
             icon: Expensicons.CheckCircle,
-            route: ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.FINISHED),
+            route: ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.FINISHED),
         },
     ];
     const activeItemIndex = filterItems.findIndex((item) => item.query === query);
diff --git a/src/pages/Search/SearchPage.tsx b/src/pages/Search/SearchPage.tsx
index 1f7db3eeb2c5..771bb85d327c 100644
--- a/src/pages/Search/SearchPage.tsx
+++ b/src/pages/Search/SearchPage.tsx
@@ -26,7 +26,7 @@ function SearchPage({route}: SearchPageProps) {
     const {query: rawQuery, policyIDs, sortBy, sortOrder} = route?.params ?? {};
 
     const query = rawQuery as SearchQuery;
-    const isValidQuery = Object.values(CONST.TAB_SEARCH).includes(query);
+    const isValidQuery = Object.values(CONST.SEARCH.TAB).includes(query);
 
     const headerContent: {[key in SearchQuery]: {icon: IconAsset; title: string}} = {
         all: {icon: Illustrations.MoneyReceipts, title: translate('common.expenses')},
@@ -35,7 +35,7 @@ function SearchPage({route}: SearchPageProps) {
         finished: {icon: Illustrations.CheckmarkCircle, title: translate('common.finished')},
     };
 
-    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL));
 
     // On small screens this page is not displayed, the configuration is in the file: src/libs/Navigation/AppNavigator/createCustomStackNavigator/index.tsx
     // To avoid calling hooks in the Search component when this page isn't visible, we return null here.
diff --git a/src/pages/Search/SearchPageBottomTab.tsx b/src/pages/Search/SearchPageBottomTab.tsx
index c6baf7c5b008..a0a3c9969247 100644
--- a/src/pages/Search/SearchPageBottomTab.tsx
+++ b/src/pages/Search/SearchPageBottomTab.tsx
@@ -21,8 +21,8 @@ type SearchPageProps = StackScreenProps<CentralPaneNavigatorParamList, typeof SC
 const defaultSearchProps = {
     query: '' as SearchQuery,
     policyIDs: undefined,
-    sortBy: CONST.SEARCH_TABLE_COLUMNS.DATE,
-    sortOrder: CONST.SORT_ORDER.DESC,
+    sortBy: CONST.SEARCH.TABLE_COLUMNS.DATE,
+    sortOrder: CONST.SEARCH.SORT_ORDER.DESC,
 };
 function SearchPageBottomTab() {
     const {translate} = useLocalize();
@@ -44,9 +44,9 @@ function SearchPageBottomTab() {
 
     const query = rawQuery as SearchQuery;
 
-    const isValidQuery = Object.values(CONST.TAB_SEARCH).includes(query);
+    const isValidQuery = Object.values(CONST.SEARCH.TAB).includes(query);
 
-    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.TAB_SEARCH.ALL));
+    const handleOnBackButtonPress = () => Navigation.goBack(ROUTES.SEARCH.getRoute(CONST.SEARCH.TAB.ALL));
 
     return (
         <ScreenWrapper
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index b034b33c0099..946ffdf94148 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1555,29 +1555,29 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getSearchTableColumnStyles: (columnName: string, shouldExtendDateColumn = false): ViewStyle => {
         let columnWidth;
         switch (columnName) {
-            case CONST.SEARCH_TABLE_COLUMNS.RECEIPT:
+            case CONST.SEARCH.TABLE_COLUMNS.RECEIPT:
                 columnWidth = {...getWidthStyle(variables.w36), ...styles.alignItemsCenter};
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.DATE:
+            case CONST.SEARCH.TABLE_COLUMNS.DATE:
                 columnWidth = getWidthStyle(shouldExtendDateColumn ? variables.w84 : variables.w52);
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.MERCHANT:
-            case CONST.SEARCH_TABLE_COLUMNS.FROM:
-            case CONST.SEARCH_TABLE_COLUMNS.TO:
+            case CONST.SEARCH.TABLE_COLUMNS.MERCHANT:
+            case CONST.SEARCH.TABLE_COLUMNS.FROM:
+            case CONST.SEARCH.TABLE_COLUMNS.TO:
                 columnWidth = styles.flex1;
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.CATEGORY:
-            case CONST.SEARCH_TABLE_COLUMNS.TAG:
+            case CONST.SEARCH.TABLE_COLUMNS.CATEGORY:
+            case CONST.SEARCH.TABLE_COLUMNS.TAG:
                 columnWidth = {...getWidthStyle(variables.w36), ...styles.flex1};
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT:
-            case CONST.SEARCH_TABLE_COLUMNS.TOTAL_AMOUNT:
+            case CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT:
+            case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT:
                 columnWidth = {...getWidthStyle(variables.w96), ...styles.alignItemsEnd};
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.TYPE:
+            case CONST.SEARCH.TABLE_COLUMNS.TYPE:
                 columnWidth = {...getWidthStyle(variables.w20), ...styles.alignItemsCenter};
                 break;
-            case CONST.SEARCH_TABLE_COLUMNS.ACTION:
+            case CONST.SEARCH.TABLE_COLUMNS.ACTION:
                 columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter};
                 break;
             default:
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index dd572f62cdd9..b016a554e424 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -6,19 +6,19 @@ import type {SearchColumnType, SearchDataContext, SortOrder} from '@libs/SearchU
 import type CONST from '@src/CONST';
 
 /** Types of search data */
-type SearchDataTypes = ValueOf<typeof CONST.SEARCH_DATA_TYPES>;
+type SearchDataTypes = ValueOf<typeof CONST.SEARCH.DATA_TYPES>;
 
 /** Model of search result list item */
-type ListItemType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+type ListItemType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH.DATA_TYPES.TRANSACTION
     ? typeof TransactionListItem
-    : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+    : T extends typeof CONST.SEARCH.DATA_TYPES.REPORT
     ? typeof ReportListItem
     : never;
 
 /** Model of search result section */
-type SectionsType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH_DATA_TYPES.TRANSACTION
+type SectionsType<T extends SearchDataTypes> = T extends typeof CONST.SEARCH.DATA_TYPES.TRANSACTION
     ? TransactionListItemType[]
-    : T extends typeof CONST.SEARCH_DATA_TYPES.REPORT
+    : T extends typeof CONST.SEARCH.DATA_TYPES.REPORT
     ? ReportListItemType[]
     : never;
 
@@ -168,7 +168,7 @@ type SearchTransaction = {
     category: string;
 
     /** The type of request */
-    type: ValueOf<typeof CONST.SEARCH_TRANSACTION_TYPE>;
+    type: ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
 
     /** The type of report the transaction is associated with */
     reportType: string;
@@ -220,10 +220,10 @@ type SearchTransaction = {
 type SearchAccountDetails = Partial<SearchPolicyDetails & SearchPersonalDetails>;
 
 /** Types of searchable transactions */
-type SearchTransactionType = ValueOf<typeof CONST.SEARCH_TRANSACTION_TYPE>;
+type SearchTransactionType = ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
 
 /** Types of search queries */
-type SearchQuery = ValueOf<typeof CONST.TAB_SEARCH>;
+type SearchQuery = ValueOf<typeof CONST.SEARCH.TAB>;
 
 /** Model of search results */
 type SearchResults = {

From 54303a17a812865246e17a31b35f8f3cc42d0797 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 25 Jun 2024 14:05:01 +0200
Subject: [PATCH 06/16] Update ActionCell component to correctly handle hold
 and unhold actions

---
 src/CONST.ts                                  |  3 +
 .../SelectionList/Search/ActionCell.tsx       | 91 +++++++++----------
 .../Search/ExpenseItemHeaderNarrow.tsx        |  2 +-
 .../SelectionList/Search/ReportListItem.tsx   |  4 +-
 src/languages/en.ts                           |  1 +
 src/languages/es.ts                           |  1 +
 src/types/onyx/SearchResults.ts               |  7 +-
 7 files changed, 54 insertions(+), 55 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index f8ce1a574d49..64b10059df1e 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -4839,6 +4839,9 @@ const CONST = {
             DONE: 'done',
             PAID: 'paid',
             VIEW: 'view',
+            REVIEW: 'review',
+            HOLD: 'hold',
+            UNHOLD: 'unhold',
         },
         TRANSACTION_TYPE: {
             CASH: 'cash',
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 4dc374ff16af..0d55bfee8e4d 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -15,22 +15,22 @@ import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
 
 const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
     view: 'common.view',
-    review: 'common.view', // Todo fix translation
+    review: 'common.review',
     done: 'common.done',
     paid: 'iou.settledExpensify',
     hold: 'iou.hold',
-    unhold: 'iou.unholdExpense',
+    unhold: 'iou.unhold',
 };
 
 type ActionCellProps = {
-    action: SearchTransactionAction;
+    action?: SearchTransactionAction;
     transactionIDs?: string[];
     searchHash: number;
     isLargeScreenWidth?: boolean;
     goToItem: () => void;
 };
 
-function ActionCell({action, transactionIDs = [], searchHash, isLargeScreenWidth = true, goToItem}: ActionCellProps) {
+function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionIDs = [], searchHash, isLargeScreenWidth = true, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -38,61 +38,58 @@ function ActionCell({action, transactionIDs = [], searchHash, isLargeScreenWidth
 
     const text = translate(actionTranslationsMap[action]);
 
-    if (['done', 'paid'].includes(action)) {
-        if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
-            const buttonTextKey = action === CONST.SEARCH.ACTION_TYPES.PAID ? 'iou.settledExpensify' : 'common.done';
-            return (
-                <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
-                    <Badge
-                        text={translate(buttonTextKey)}
-                        icon={Expensicons.Checkmark}
-                        badgeStyles={[
-                            styles.ml0,
-                            styles.ph2,
-                            styles.gap1,
-                            isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
-                            StyleUtils.getBorderColorStyle(theme.border),
-                            StyleUtils.getHeight(variables.h20),
-                            StyleUtils.getMinimumHeight(variables.h20),
-                        ]}
-                        textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
-                        iconStyles={styles.mr0}
-                        success
-                    />
-                </View>
-            );
-        }
-
-        if (['view', 'review'].includes(action)) {
-            return (
-                <Button
+    if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
+        return (
+            <View style={[StyleUtils.getHeight(variables.h28), styles.justifyContentCenter]}>
+                <Badge
                     text={text}
-                    onPress={goToItem}
-                    small
-                    pressOnEnter
-                    style={[styles.w100]}
+                    icon={Expensicons.Checkmark}
+                    badgeStyles={[
+                        styles.ml0,
+                        styles.ph2,
+                        styles.gap1,
+                        isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
+                        StyleUtils.getBorderColorStyle(theme.border),
+                        StyleUtils.getHeight(variables.h20),
+                        StyleUtils.getMinimumHeight(variables.h20),
+                    ]}
+                    textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
+                    iconStyles={styles.mr0}
+                    success
                 />
-            );
-        }
-
-        const command = SearchUtils.getTransactionActionCommand(action);
+            </View>
+        );
+    }
 
+    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
         return (
             <Button
                 text={text}
-                onPress={() => {
-                    if (!command) {
-                        return;
-                    }
-
-                    command(searchHash, transactionIDs);
-                }}
+                onPress={goToItem}
                 small
                 pressOnEnter
                 style={[styles.w100]}
             />
         );
     }
+
+    const command = SearchUtils.getTransactionActionCommand(action);
+
+    return (
+        <Button
+            text={text}
+            onPress={() => {
+                if (!command) {
+                    return;
+                }
+
+                command(searchHash, transactionIDs);
+            }}
+            small
+            pressOnEnter
+            style={[styles.w100]}
+        />
+    );
 }
 
 ActionCell.displayName = 'ActionCell';
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index fcb924e49a22..c49e9df22074 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -15,7 +15,7 @@ type ExpenseItemHeaderNarrowProps = {
     participantTo: SearchAccountDetails;
     participantFromDisplayName: string;
     participantToDisplayName: string;
-    action: SearchTransactionAction;
+    action?: SearchTransactionAction;
     transactionIDs?: string[];
     searchHash: number;
     onButtonPress: () => void;
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 92a218a57e77..29baebd186f0 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -134,7 +134,7 @@ function ReportListItem<TItem extends ListItem>({
                         participantFromDisplayName={participantFromDisplayName}
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
-                        action={reportItem.action ?? 'view'}
+                        action={reportItem.action}
                         searchHash={searchHash}
                         onButtonPress={handleOnButtonPress}
                     />
@@ -161,7 +161,7 @@ function ReportListItem<TItem extends ListItem>({
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
-                                    action={reportItem.action ?? 'view'}
+                                    action={reportItem.action}
                                     searchHash={searchHash}
                                     goToItem={handleOnButtonPress}
                                 />
diff --git a/src/languages/en.ts b/src/languages/en.ts
index 68a8a8a6a029..21909d62eb4e 100755
--- a/src/languages/en.ts
+++ b/src/languages/en.ts
@@ -156,6 +156,7 @@ export default {
         wallet: 'Wallet',
         preferences: 'Preferences',
         view: 'View',
+        review: 'Review',
         not: 'Not',
         signIn: 'Sign in',
         signInWithGoogle: 'Sign in with Google',
diff --git a/src/languages/es.ts b/src/languages/es.ts
index cc3ae848de6b..a0a80ba5b585 100644
--- a/src/languages/es.ts
+++ b/src/languages/es.ts
@@ -147,6 +147,7 @@ export default {
         wallet: 'Billetera',
         preferences: 'Preferencias',
         view: 'Ver',
+        review: 'Revisar',
         not: 'No',
         privacyPolicy: 'la Política de Privacidad de Expensify',
         addCardTermsOfService: 'Términos de Servicio',
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index b016a554e424..7b568e939883 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -94,10 +94,7 @@ type SearchPolicyDetails = {
 };
 
 /** The action that can be performed for the transaction */
-type SearchTransactionAction = 'view' | 'review' | 'done' | 'paid' | 'hold' | 'unhold';
-
-/** The action that can be performed for the report */
-type SearchReportAction = 'view' | 'review' | 'done' | 'paid';
+type SearchTransactionAction = ValueOf<typeof CONST.SEARCH.ACTION_TYPES>;
 
 /** Model of report search result */
 type SearchReport = {
@@ -117,7 +114,7 @@ type SearchReport = {
     type?: string;
 
     /** The action that can be performed for the report */
-    action?: SearchReportAction;
+    action?: SearchTransactionAction;
 };
 
 /** Model of transaction search result */

From b38a8e4fe2dc308abd4b9f69a191d95dd76e2a2c Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Thu, 27 Jun 2024 10:09:59 +0200
Subject: [PATCH 07/16] add small fixes to search utils

---
 src/libs/SearchUtils.ts    | 2 +-
 src/libs/actions/Search.ts | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index bb7dbc59b785..84a5bf7f3393 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -289,7 +289,7 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
 }
 
 function getTransactionActionCommand(
-    action: Omit<SearchTransactionAction, 'view' | 'done' | 'paid'>,
+    action: Omit<SearchTransactionAction, typeof CONST.SEARCH.ACTION_TYPES.VIEW | typeof CONST.SEARCH.ACTION_TYPES.DONE | typeof CONST.SEARCH.ACTION_TYPES.PAID>,
 ): ((searchHash: number, transactionIDList: string[], comment?: string) => void) | undefined {
     if (action === 'hold') {
         return SearchActions.holdMoneyRequestOnSearch;
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
index 59544f09bae6..493f6393a5c9 100644
--- a/src/libs/actions/Search.ts
+++ b/src/libs/actions/Search.ts
@@ -109,10 +109,4 @@ function unholdMoneyRequestOnSearch(searchHash: number, transactionIDList: strin
     API.write(WRITE_COMMANDS.UNHOLD_MONEY_REQUEST_ON_SEARCH, commandPayload, {optimisticData, finallyData});
 }
 
-// These actions will be implemented at a later point
-// function payMoneyRequest() {}
-// function approveMoneyRequest() {}
-// function holdMoneyRequest() {}
-// function submitMoneyRequest() {}
-
 export {search, createTransactionThread, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch};

From 5e3cb314d0ce9f647485433b20ffd6f0fc689597 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Fri, 28 Jun 2024 14:27:03 +0200
Subject: [PATCH 08/16] Add Search hold reason RHP page and handle hold/unhold
 actions

---
 src/ROUTES.ts                                 |  5 ++
 src/SCREENS.ts                                |  1 +
 .../SelectionList/Search/ActionCell.tsx       | 10 +--
 .../ModalStackNavigators/index.tsx            |  1 +
 .../CENTRAL_PANE_TO_RHP_MAPPING.ts            |  2 +-
 src/libs/Navigation/linkingConfig/config.ts   |  1 +
 src/libs/SearchUtils.ts                       | 21 ++++--
 src/pages/Search/SearchHoldReasonPage.tsx     | 70 ++++++++++++++++++
 src/pages/iou/HoldReasonFormView.tsx          | 72 +++++++++++++++++++
 src/pages/iou/HoldReasonPage.tsx              | 55 ++------------
 10 files changed, 177 insertions(+), 61 deletions(-)
 create mode 100644 src/pages/Search/SearchHoldReasonPage.tsx
 create mode 100644 src/pages/iou/HoldReasonFormView.tsx

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 5c8cfdcc8a68..5a455116e2b0 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -53,6 +53,11 @@ const ROUTES = {
         getRoute: (query: string, reportID: string) => `search/${query}/view/${reportID}` as const,
     },
 
+    TRANSACTION_HOLD_REASON_RHP: {
+        route: '/search/:query/hold/:transactionID/hash/:searchHash',
+        getRoute: (query: string, transactionID: string, searchHash: number) => `search/${query}/hold/${transactionID}/hash/${searchHash}` as const,
+    },
+
     // 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
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {
diff --git a/src/SCREENS.ts b/src/SCREENS.ts
index 5c5fc6c31092..91ba2cfe99ff 100644
--- a/src/SCREENS.ts
+++ b/src/SCREENS.ts
@@ -30,6 +30,7 @@ const SCREENS = {
     SEARCH: {
         CENTRAL_PANE: 'Search_Central_Pane',
         REPORT_RHP: 'Search_Report_RHP',
+        TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         BOTTOM_TAB: 'Search_Bottom_Tab',
     },
     SETTINGS: {
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 0d55bfee8e4d..7fd4134792f3 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -24,13 +24,13 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 
 type ActionCellProps = {
     action?: SearchTransactionAction;
-    transactionIDs?: string[];
+    transactionID: string;
     searchHash: number;
     isLargeScreenWidth?: boolean;
     goToItem: () => void;
 };
 
-function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionIDs = [], searchHash, isLargeScreenWidth = true, goToItem}: ActionCellProps) {
+function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, searchHash, isLargeScreenWidth = true, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -73,17 +73,17 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionIDs = [
         );
     }
 
-    const command = SearchUtils.getTransactionActionCommand(action);
+    const onAction = SearchUtils.getTransactionAction(action);
 
     return (
         <Button
             text={text}
             onPress={() => {
-                if (!command) {
+                if (!onAction) {
                     return;
                 }
 
-                command(searchHash, transactionIDs);
+                onAction(searchHash, transactionID);
             }}
             small
             pressOnEnter
diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
index 6e9782defe4f..21ffa2d82fdf 100644
--- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
+++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -378,6 +378,7 @@ const TransactionDuplicateStackNavigator = createModalStackNavigator<Transaction
 
 const SearchReportModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
     [SCREENS.SEARCH.REPORT_RHP]: () => require<ReactComponentModule>('../../../../pages/home/ReportScreen').default,
+    [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchHoldReasonPage').default,
 });
 
 const RestrictedActionModalStackNavigator = createModalStackNavigator<SearchReportParamList>({
diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
index 1192e4649ea0..83929b7e7d02 100755
--- a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
+++ b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
@@ -38,7 +38,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
     [SCREENS.SETTINGS.ABOUT]: [SCREENS.SETTINGS.APP_DOWNLOAD_LINKS],
     [SCREENS.SETTINGS.SAVE_THE_WORLD]: [SCREENS.I_KNOW_A_TEACHER, SCREENS.INTRO_SCHOOL_PRINCIPAL, SCREENS.I_AM_A_TEACHER],
     [SCREENS.SETTINGS.TROUBLESHOOT]: [SCREENS.SETTINGS.CONSOLE],
-    [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP],
+    [SCREENS.SEARCH.CENTRAL_PANE]: [SCREENS.SEARCH.REPORT_RHP, SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP],
     [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [
         SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD,
         SCREENS.SETTINGS.SUBSCRIPTION.SIZE,
diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
index c66472abb3b4..e52cb87b8110 100644
--- a/src/libs/Navigation/linkingConfig/config.ts
+++ b/src/libs/Navigation/linkingConfig/config.ts
@@ -755,6 +755,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                 [SCREENS.RIGHT_MODAL.SEARCH_REPORT]: {
                     screens: {
                         [SCREENS.SEARCH.REPORT_RHP]: ROUTES.SEARCH_REPORT.route,
+                        [SCREENS.SEARCH.TRANSACTION_HOLD_REASON_RHP]: ROUTES.TRANSACTION_HOLD_REASON_RHP.route,
                     },
                 },
                 [SCREENS.RIGHT_MODAL.RESTRICTED_ACTION]: {
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index 5982bfc7f023..d6836940741c 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -2,8 +2,10 @@ import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtil
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import Navigation from '@navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {
     SearchAccountDetails,
@@ -288,14 +290,19 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
     });
 }
 
-function getTransactionActionCommand(
+function getTransactionAction(
     action: Omit<SearchTransactionAction, typeof CONST.SEARCH.ACTION_TYPES.VIEW | typeof CONST.SEARCH.ACTION_TYPES.DONE | typeof CONST.SEARCH.ACTION_TYPES.PAID>,
-): ((searchHash: number, transactionIDList: string[], comment?: string) => void) | undefined {
-    if (action === 'hold') {
-        return SearchActions.holdMoneyRequestOnSearch;
+): ((searchHash: number, transactionID: string) => void) | undefined {
+    if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
+        return (searchHash, transactionID) => {
+            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute('all', transactionID, searchHash));
+        };
     }
-    if (action === 'unhold') {
-        return SearchActions.unholdMoneyRequestOnSearch;
+
+    if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
+        return (searchHash, transactionID) => {
+            SearchActions.unholdMoneyRequestOnSearch(searchHash, [transactionID]);
+        };
     }
 }
 
@@ -304,5 +311,5 @@ function getSearchParams() {
     return topmostCentralPaneRoute?.params as AuthScreensParamList['Search_Central_Pane'];
 }
 
-export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear, getTransactionActionCommand};
+export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear, getTransactionAction};
 export type {SearchColumnType, SortOrder, SearchDataContext};
diff --git a/src/pages/Search/SearchHoldReasonPage.tsx b/src/pages/Search/SearchHoldReasonPage.tsx
new file mode 100644
index 000000000000..11ae7fcf1803
--- /dev/null
+++ b/src/pages/Search/SearchHoldReasonPage.tsx
@@ -0,0 +1,70 @@
+import type {RouteProp} from '@react-navigation/native';
+import React, {useCallback, useEffect} from 'react';
+import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import useLocalize from '@hooks/useLocalize';
+import Navigation from '@libs/Navigation/Navigation';
+import * as ValidationUtils from '@libs/ValidationUtils';
+import HoldReasonFormView from '@pages/iou/HoldReasonFormView';
+import * as FormActions from '@userActions/FormActions';
+import * as SearchActions from '@src/libs/actions/Search';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/MoneyRequestHoldReasonForm';
+
+type SearchHoldReasonPageRouteParams = {
+    /** ID of the transaction the page was opened for */
+    transactionID: string;
+
+    /** Hash of search query that was used to generate this specific set of transactions  */
+    searchHash: number;
+
+    /** Link to previous page */
+    backTo: Route;
+};
+
+type SearchHoldReasonPageProps = {
+    /** Navigation route context info provided by react navigation */
+    route: RouteProp<{params: SearchHoldReasonPageRouteParams}>;
+};
+
+function SearchHoldReasonPage({route}: SearchHoldReasonPageProps) {
+    const {translate} = useLocalize();
+
+    const {searchHash, transactionID, backTo} = route.params;
+
+    const onSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => {
+        SearchActions.holdMoneyRequestOnSearch(searchHash, [transactionID], values.comment);
+
+        Navigation.goBack();
+    };
+
+    const validate = useCallback(
+        (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => {
+            const errors: FormInputErrors<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM> = ValidationUtils.getFieldRequiredErrors(values, [INPUT_IDS.COMMENT]);
+
+            if (!values.comment) {
+                errors.comment = translate('common.error.fieldRequired');
+            }
+
+            return errors;
+        },
+        [translate],
+    );
+
+    useEffect(() => {
+        FormActions.clearErrors(ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM);
+        FormActions.clearErrorFields(ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM);
+    }, []);
+
+    return (
+        <HoldReasonFormView
+            onSubmit={onSubmit}
+            validate={validate}
+            backTo={backTo}
+        />
+    );
+}
+
+SearchHoldReasonPage.displayName = 'SearchHoldReasonPage';
+
+export default SearchHoldReasonPage;
diff --git a/src/pages/iou/HoldReasonFormView.tsx b/src/pages/iou/HoldReasonFormView.tsx
new file mode 100644
index 000000000000..197d00b6b0ed
--- /dev/null
+++ b/src/pages/iou/HoldReasonFormView.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {View} from 'react-native';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import Text from '@components/Text';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import Navigation from '@libs/Navigation/Navigation';
+import type ONYXKEYS from '@src/ONYXKEYS';
+import type {Route} from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/MoneyRequestHoldReasonForm';
+
+type HoldReasonFormViewProps = {
+    /** Submit function for submitting form */
+    onSubmit: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => void;
+
+    /** Submit function for validating form */
+    validate: (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => Partial<Record<'comment', string | undefined>>;
+
+    /** Link to previous page */
+    backTo: Route;
+};
+
+function HoldReasonFormView({backTo, validate, onSubmit}: HoldReasonFormViewProps) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {inputCallbackRef} = useAutoFocusInput();
+
+    return (
+        <ScreenWrapper
+            includeSafeAreaPaddingBottom={false}
+            shouldEnableMaxHeight
+            testID={HoldReasonFormView.displayName}
+        >
+            <HeaderWithBackButton
+                title={translate('iou.holdExpense')}
+                onBackButtonPress={() => Navigation.goBack(backTo)}
+            />
+            <FormProvider
+                formID="moneyHoldReasonForm"
+                submitButtonText={translate('iou.holdExpense')}
+                style={[styles.flexGrow1, styles.ph5]}
+                onSubmit={onSubmit}
+                validate={validate}
+                enabledWhenOffline
+            >
+                <Text style={styles.mb6}>{translate('iou.explainHold')}</Text>
+                <View>
+                    <InputWrapper
+                        InputComponent={TextInput}
+                        inputID={INPUT_IDS.COMMENT}
+                        valueType="string"
+                        name="comment"
+                        defaultValue={undefined}
+                        label={translate('iou.reason')}
+                        accessibilityLabel={translate('iou.reason')}
+                        ref={inputCallbackRef}
+                    />
+                </View>
+            </FormProvider>
+        </ScreenWrapper>
+    );
+}
+
+HoldReasonFormView.displayName = 'HoldReasonFormViewProps';
+
+export default HoldReasonFormView;
diff --git a/src/pages/iou/HoldReasonPage.tsx b/src/pages/iou/HoldReasonPage.tsx
index 2fc789f77c6c..82f29acf7d10 100644
--- a/src/pages/iou/HoldReasonPage.tsx
+++ b/src/pages/iou/HoldReasonPage.tsx
@@ -1,17 +1,8 @@
 import type {RouteProp} from '@react-navigation/native';
 import React, {useCallback, useEffect} from 'react';
-import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
-import FormProvider from '@components/Form/FormProvider';
-import InputWrapper from '@components/Form/InputWrapper';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
-import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import ScreenWrapper from '@components/ScreenWrapper';
-import Text from '@components/Text';
-import TextInput from '@components/TextInput';
-import useAutoFocusInput from '@hooks/useAutoFocusInput';
 import useLocalize from '@hooks/useLocalize';
-import useThemeStyles from '@hooks/useThemeStyles';
 import * as ErrorUtils from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
@@ -22,6 +13,7 @@ import * as IOU from '@userActions/IOU';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
 import INPUT_IDS from '@src/types/form/MoneyRequestHoldReasonForm';
+import HoldReasonFormView from './HoldReasonFormView';
 
 type HoldReasonPageRouteParams = {
     /** ID of the transaction the page was opened for */
@@ -40,9 +32,7 @@ type HoldReasonPageProps = {
 };
 
 function HoldReasonPage({route}: HoldReasonPageProps) {
-    const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {inputCallbackRef} = useAutoFocusInput();
 
     const {transactionID, reportID, backTo} = route.params;
 
@@ -53,10 +43,6 @@ function HoldReasonPage({route}: HoldReasonPageProps) {
     const isWorkspaceRequest = ReportUtils.isReportInGroupPolicy(report);
     const parentReportAction = ReportActionsUtils.getReportAction(report?.parentReportID ?? '-1', report?.parentReportActionID ?? '-1');
 
-    const navigateBack = () => {
-        Navigation.navigate(backTo);
-    };
-
     const onSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => {
         // We have extra isWorkspaceRequest condition since, for 1:1 requests, canEditMoneyRequest will rightly return false
         // as we do not allow requestee to edit fields like description and amount.
@@ -66,7 +52,7 @@ function HoldReasonPage({route}: HoldReasonPageProps) {
         }
 
         IOU.putOnHold(transactionID, values.comment, reportID);
-        navigateBack();
+        Navigation.navigate(backTo);
     };
 
     const validate = useCallback(
@@ -96,38 +82,11 @@ function HoldReasonPage({route}: HoldReasonPageProps) {
     }, []);
 
     return (
-        <ScreenWrapper
-            includeSafeAreaPaddingBottom={false}
-            shouldEnableMaxHeight
-            testID={HoldReasonPage.displayName}
-        >
-            <HeaderWithBackButton
-                title={translate('iou.holdExpense')}
-                onBackButtonPress={() => Navigation.goBack(backTo)}
-            />
-            <FormProvider
-                formID="moneyHoldReasonForm"
-                submitButtonText={translate('iou.holdExpense')}
-                style={[styles.flexGrow1, styles.ph5]}
-                onSubmit={onSubmit}
-                validate={validate}
-                enabledWhenOffline
-            >
-                <Text style={styles.mb6}>{translate('iou.explainHold')}</Text>
-                <View>
-                    <InputWrapper
-                        InputComponent={TextInput}
-                        inputID={INPUT_IDS.COMMENT}
-                        valueType="string"
-                        name="comment"
-                        defaultValue={undefined}
-                        label={translate('iou.reason')}
-                        accessibilityLabel={translate('iou.reason')}
-                        ref={inputCallbackRef}
-                    />
-                </View>
-            </FormProvider>
-        </ScreenWrapper>
+        <HoldReasonFormView
+            onSubmit={onSubmit}
+            validate={validate}
+            backTo={backTo}
+        />
     );
 }
 

From 979bd17efeb5a920fd836663670c5ac1dadba15e Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Fri, 28 Jun 2024 14:54:56 +0200
Subject: [PATCH 09/16] Cleanup Search ActionCell and actions

---
 .../SelectionList/Search/ActionCell.tsx       | 30 +++++++++++-------
 .../Search/ExpenseItemHeaderNarrow.tsx        |  6 ++--
 .../Search/TransactionListItemRow.tsx         |  4 +--
 src/libs/SearchUtils.ts                       | 31 ++-----------------
 4 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 7fd4134792f3..da6fb638f2b0 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
@@ -7,10 +7,12 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as SearchUtils from '@libs/SearchUtils';
+import Navigation from '@navigation/Navigation';
 import variables from '@styles/variables';
+import * as SearchActions from '@userActions/Search';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
+import ROUTES from '@src/ROUTES';
 import type {SearchTransactionAction} from '@src/types/onyx/SearchResults';
 
 const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
@@ -24,7 +26,7 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 
 type ActionCellProps = {
     action?: SearchTransactionAction;
-    transactionID: string;
+    transactionID?: string;
     searchHash: number;
     isLargeScreenWidth?: boolean;
     goToItem: () => void;
@@ -36,6 +38,18 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, sea
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const onButtonPress = useCallback(() => {
+        if (!transactionID) {
+            return;
+        }
+
+        if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
+            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute('all', transactionID, searchHash));
+        } else if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
+            SearchActions.unholdMoneyRequestOnSearch(searchHash, [transactionID]);
+        }
+    }, [action, searchHash, transactionID]);
+
     const text = translate(actionTranslationsMap[action]);
 
     if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
@@ -73,18 +87,10 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, sea
         );
     }
 
-    const onAction = SearchUtils.getTransactionAction(action);
-
     return (
         <Button
             text={text}
-            onPress={() => {
-                if (!onAction) {
-                    return;
-                }
-
-                onAction(searchHash, transactionID);
-            }}
+            onPress={onButtonPress}
             small
             pressOnEnter
             style={[styles.w100]}
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index c49e9df22074..30b53d8b420b 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -16,7 +16,7 @@ type ExpenseItemHeaderNarrowProps = {
     participantFromDisplayName: string;
     participantToDisplayName: string;
     action?: SearchTransactionAction;
-    transactionIDs?: string[];
+    transactionID?: string;
     searchHash: number;
     onButtonPress: () => void;
 };
@@ -27,7 +27,7 @@ function ExpenseItemHeaderNarrow({
     participantTo,
     participantToDisplayName,
     action,
-    transactionIDs,
+    transactionID,
     searchHash,
     onButtonPress,
 }: ExpenseItemHeaderNarrowProps) {
@@ -60,7 +60,7 @@ function ExpenseItemHeaderNarrow({
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
                     action={action}
-                    transactionIDs={transactionIDs}
+                    transactionID={transactionID}
                     searchHash={searchHash}
                     goToItem={onButtonPress}
                 />
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 90db43673994..a96581ab8a50 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -224,7 +224,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                         participantTo={item.to}
                         participantToDisplayName={item.formattedTo}
                         action={item.action}
-                        transactionIDs={[item.transactionID]}
+                        transactionID={item.transactionID}
                         searchHash={item.searchHash}
                         onButtonPress={onButtonPress}
                     />
@@ -362,7 +362,7 @@ function TransactionListItemRow({item, showTooltip, onButtonPress, showItemHeade
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
                         action={item.action}
-                        transactionIDs={[item.transactionID]}
+                        transactionID={item.transactionID}
                         searchHash={item.searchHash}
                         goToItem={onButtonPress}
                     />
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index d6836940741c..5fc3cbd9adb5 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -2,21 +2,10 @@ import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtil
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
-import Navigation from '@navigation/Navigation';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
-import type {
-    SearchAccountDetails,
-    SearchDataTypes,
-    SearchPersonalDetails,
-    SearchTransaction,
-    SearchTransactionAction,
-    SearchTypeToItemMap,
-    SectionsType,
-} from '@src/types/onyx/SearchResults';
-import * as SearchActions from './actions/Search';
+import type {SearchAccountDetails, SearchDataTypes, SearchPersonalDetails, SearchTransaction, SearchTypeToItemMap, SectionsType} from '@src/types/onyx/SearchResults';
 import DateUtils from './DateUtils';
 import getTopmostCentralPaneRoute from './Navigation/getTopmostCentralPaneRoute';
 import navigationRef from './Navigation/navigationRef';
@@ -290,26 +279,10 @@ function getSortedTransactionData(data: TransactionListItemType[], sortBy?: Sear
     });
 }
 
-function getTransactionAction(
-    action: Omit<SearchTransactionAction, typeof CONST.SEARCH.ACTION_TYPES.VIEW | typeof CONST.SEARCH.ACTION_TYPES.DONE | typeof CONST.SEARCH.ACTION_TYPES.PAID>,
-): ((searchHash: number, transactionID: string) => void) | undefined {
-    if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
-        return (searchHash, transactionID) => {
-            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute('all', transactionID, searchHash));
-        };
-    }
-
-    if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
-        return (searchHash, transactionID) => {
-            SearchActions.unholdMoneyRequestOnSearch(searchHash, [transactionID]);
-        };
-    }
-}
-
 function getSearchParams() {
     const topmostCentralPaneRoute = getTopmostCentralPaneRoute(navigationRef.getRootState() as State<RootStackParamList>);
     return topmostCentralPaneRoute?.params as AuthScreensParamList['Search_Central_Pane'];
 }
 
-export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear, getTransactionAction};
+export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear};
 export type {SearchColumnType, SortOrder, SearchDataContext};

From 7f68d1251c6240782bb2d8ee5e94b0f8c337c716 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Wed, 3 Jul 2024 14:57:44 +0200
Subject: [PATCH 10/16] Update Search Item Actions after merging bulk actions

---
 src/ROUTES.ts                                 |  4 +-
 src/components/InitialURLContextProvider.tsx  |  1 -
 .../SelectionList/Search/ActionCell.tsx       |  2 +-
 src/libs/actions/Search.ts                    | 52 +------------------
 4 files changed, 5 insertions(+), 54 deletions(-)

diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 1cc302b44ece..7372c78070fa 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -54,8 +54,8 @@ const ROUTES = {
     },
 
     TRANSACTION_HOLD_REASON_RHP: {
-        route: '/search/:query/hold/:transactionID/hash/:searchHash',
-        getRoute: (query: string, transactionID: string, searchHash: number) => `search/${query}/hold/${transactionID}/hash/${searchHash}` as const,
+        route: '/search/:query/hold/:transactionID/:searchHash',
+        getRoute: (query: string, transactionID: string, searchHash: number) => `search/${query}/hold/${transactionID}/${searchHash}` as const,
     },
 
     // 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
diff --git a/src/components/InitialURLContextProvider.tsx b/src/components/InitialURLContextProvider.tsx
index a8a28b1f39ad..4aa76edd3e62 100644
--- a/src/components/InitialURLContextProvider.tsx
+++ b/src/components/InitialURLContextProvider.tsx
@@ -32,4 +32,3 @@ InitialURLContextProvider.displayName = 'InitialURLContextProvider';
 
 export default InitialURLContextProvider;
 export {InitialURLContext};
-]
\ No newline at end of file
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 5c1402847335..b2650b589d10 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -45,7 +45,7 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, sea
         }
 
         if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
-            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute('all', transactionID, searchHash));
+            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute(CONST.SEARCH.TAB.ALL, transactionID, searchHash));
         } else if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
             SearchActions.unholdMoneyRequestOnSearch(searchHash, [transactionID]);
         }
diff --git a/src/libs/actions/Search.ts b/src/libs/actions/Search.ts
index ba1f247373f6..4ce82a027a12 100644
--- a/src/libs/actions/Search.ts
+++ b/src/libs/actions/Search.ts
@@ -66,63 +66,15 @@ function createTransactionThread(hash: number, transactionID: string, reportID:
     Onyx.merge(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, onyxUpdate);
 }
 
-function holdMoneyRequestOnSearch(searchHash: number, transactionIDList: string[], comment?: string) {
-    const optimisticData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-            value: {isLoading: true},
-        },
-    ];
-    const finallyData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-            value: {isLoading: false},
-        },
-    ];
-
-    const commandPayload = {
-        searchHash,
-        transactionIDList,
-        comment,
-    };
-
-    API.write(WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH, commandPayload, {optimisticData, finallyData});
-}
-
-function unholdMoneyRequestOnSearch(searchHash: number, transactionIDList: string[]) {
-    const optimisticData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-            value: {isLoading: true},
-        },
-    ];
-    const finallyData: OnyxUpdate[] = [
-        {
-            onyxMethod: Onyx.METHOD.MERGE,
-            key: `${ONYXKEYS.COLLECTION.SNAPSHOT}${searchHash}`,
-            value: {isLoading: false},
-        },
-    ];
-
-    const commandPayload = {
-        searchHash,
-        transactionIDList,
-    };
-
-    API.write(WRITE_COMMANDS.UNHOLD_MONEY_REQUEST_ON_SEARCH, commandPayload, {optimisticData, finallyData});
-}
-
-export {search, createTransactionThread, holdMoneyRequestOnSearch, unholdMoneyRequestOnSearch};
 function holdMoneyRequestOnSearch(hash: number, transactionIDList: string[], comment: string) {
     const {optimisticData, finallyData} = getOnyxLoadingData(hash);
+
     API.write(WRITE_COMMANDS.HOLD_MONEY_REQUEST_ON_SEARCH, {hash, transactionIDList, comment}, {optimisticData, finallyData});
 }
 
 function unholdMoneyRequestOnSearch(hash: number, transactionIDList: string[]) {
     const {optimisticData, finallyData} = getOnyxLoadingData(hash);
+
     API.write(WRITE_COMMANDS.UNHOLD_MONEY_REQUEST_ON_SEARCH, {hash, transactionIDList}, {optimisticData, finallyData});
 }
 

From ef948e34cd9d9b7f3ffbf42d8a89172618c42173 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Wed, 3 Jul 2024 16:03:52 +0200
Subject: [PATCH 11/16] Cleanup Search params old command leftovers

---
 src/libs/API/parameters/HoldRequestOnSearchParams.ts   | 7 -------
 src/libs/API/parameters/UnholdRequestOnSearchParams.ts | 6 ------
 src/libs/API/parameters/index.ts                       | 2 --
 3 files changed, 15 deletions(-)
 delete mode 100644 src/libs/API/parameters/HoldRequestOnSearchParams.ts
 delete mode 100644 src/libs/API/parameters/UnholdRequestOnSearchParams.ts

diff --git a/src/libs/API/parameters/HoldRequestOnSearchParams.ts b/src/libs/API/parameters/HoldRequestOnSearchParams.ts
deleted file mode 100644
index a2bdbcb02591..000000000000
--- a/src/libs/API/parameters/HoldRequestOnSearchParams.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-type HoldRequestOnSearchParams = {
-    searchHash: number;
-    transactionIDList: string[];
-    comment?: string;
-};
-
-export default HoldRequestOnSearchParams;
diff --git a/src/libs/API/parameters/UnholdRequestOnSearchParams.ts b/src/libs/API/parameters/UnholdRequestOnSearchParams.ts
deleted file mode 100644
index eaae2d9d4403..000000000000
--- a/src/libs/API/parameters/UnholdRequestOnSearchParams.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-type UnholdRequestOnSearchParams = {
-    searchHash: number;
-    transactionIDList: string[];
-};
-
-export default UnholdRequestOnSearchParams;
diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts
index bcb2cabc4783..2f203a4cfd9a 100644
--- a/src/libs/API/parameters/index.ts
+++ b/src/libs/API/parameters/index.ts
@@ -240,5 +240,3 @@ export type {default as UpdateNetSuiteSubsidiaryParams} from './UpdateNetSuiteSu
 export type {default as OpenPolicyExpensifyCardsPageParams} from './OpenPolicyExpensifyCardsPageParams';
 export type {default as RequestExpensifyCardLimitIncreaseParams} from './RequestExpensifyCardLimitIncreaseParams';
 export type {default as UpdateNetSuiteGenericTypeParams} from './UpdateNetSuiteGenericTypeParams';
-export type {default as HoldRequestOnSearchParams} from './HoldRequestOnSearchParams';
-export type {default as UnholdRequestOnSearchParams} from './UnholdRequestOnSearchParams';

From 87c2866d5409e5e419e331cdbf7b694a396f67d8 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Mon, 8 Jul 2024 11:31:06 +0200
Subject: [PATCH 12/16] Add SearchContext and use it for storing current search
 hash

---
 src/App.tsx                                   |  2 +
 src/ROUTES.ts                                 |  4 +-
 src/components/Search/SearchContext.tsx       | 58 +++++++++++++++++++
 src/components/Search/index.tsx               |  8 ++-
 src/components/Search/types.ts                | 16 ++++-
 .../SelectionList/Search/ActionCell.tsx       | 12 ++--
 .../Search/ExpenseItemHeaderNarrow.tsx        | 13 +----
 .../SelectionList/Search/ReportListItem.tsx   |  5 --
 .../Search/TransactionListItemRow.tsx         |  2 -
 .../SelectionList/SearchTableHeader.tsx       |  2 +-
 .../SelectionList/SortableHeaderText.tsx      |  2 +-
 src/components/SelectionList/types.ts         |  3 -
 src/libs/API/parameters/Search.ts             |  2 +-
 src/libs/Navigation/types.ts                  |  2 +-
 src/libs/SearchUtils.ts                       | 18 ++----
 src/pages/Search/SearchHoldReasonPage.tsx     |  9 ++-
 src/types/onyx/SearchResults.ts               |  4 +-
 17 files changed, 103 insertions(+), 59 deletions(-)
 create mode 100644 src/components/Search/SearchContext.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 21025d34a661..98b5d4afeb1d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,6 +20,7 @@ import OnyxProvider from './components/OnyxProvider';
 import PopoverContextProvider from './components/PopoverProvider';
 import SafeArea from './components/SafeArea';
 import ScrollOffsetContextProvider from './components/ScrollOffsetContextProvider';
+import {SearchContextProvider} from './components/Search/SearchContext';
 import ThemeIllustrationsProvider from './components/ThemeIllustrationsProvider';
 import ThemeProvider from './components/ThemeProvider';
 import ThemeStylesProvider from './components/ThemeStylesProvider';
@@ -91,6 +92,7 @@ function App({url}: AppProps) {
                             VolumeContextProvider,
                             VideoPopoverMenuContextProvider,
                             KeyboardProvider,
+                            SearchContextProvider,
                         ]}
                     >
                         <CustomStatusBarAndBackground />
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
index 79396aa925fa..2e8d4708f301 100644
--- a/src/ROUTES.ts
+++ b/src/ROUTES.ts
@@ -54,8 +54,8 @@ const ROUTES = {
     },
 
     TRANSACTION_HOLD_REASON_RHP: {
-        route: '/search/:query/hold/:transactionID/:searchHash',
-        getRoute: (query: string, transactionID: string, searchHash: number) => `search/${query}/hold/${transactionID}/${searchHash}` as const,
+        route: '/search/:query/hold/:transactionID',
+        getRoute: (query: string, transactionID: string) => `search/${query}/hold/${transactionID}` as const,
     },
 
     // 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
diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx
new file mode 100644
index 000000000000..2ac54f281802
--- /dev/null
+++ b/src/components/Search/SearchContext.tsx
@@ -0,0 +1,58 @@
+import React, {useCallback, useContext, useMemo, useState} from 'react';
+import type {SearchContext} from '@components/Search/types';
+import type ChildrenProps from '@src/types/utils/ChildrenProps';
+
+const defaultSearchContext = {
+    currentSearchHash: -1,
+    selectedTransactionIds: [],
+    setCurrentSearchHash: () => {},
+    setSelectedTransactionIds: () => {},
+};
+
+const Context = React.createContext<SearchContext>(defaultSearchContext);
+
+function SearchContextProvider({children}: ChildrenProps) {
+    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactionIds'>>({
+        currentSearchHash: defaultSearchContext.currentSearchHash,
+        selectedTransactionIds: defaultSearchContext.selectedTransactionIds,
+    });
+
+    const setCurrentSearchHash = useCallback(
+        (searchHash: number) => {
+            setSearchContextData({
+                ...searchContextData,
+                currentSearchHash: searchHash,
+            });
+        },
+        [searchContextData],
+    );
+
+    const setSelectedTransactionIds = useCallback(
+        (selectedTransactionIds: string[]) => {
+            setSearchContextData({
+                ...searchContextData,
+                selectedTransactionIds,
+            });
+        },
+        [searchContextData],
+    );
+
+    const searchContext = useMemo<SearchContext>(
+        () => ({
+            ...searchContextData,
+            setCurrentSearchHash,
+            setSelectedTransactionIds,
+        }),
+        [searchContextData, setCurrentSearchHash, setSelectedTransactionIds],
+    );
+
+    return <Context.Provider value={searchContext}>{children}</Context.Provider>;
+}
+
+function useSearchContext() {
+    return useContext(Context);
+}
+
+SearchContextProvider.displayName = 'SearchContextProvider';
+
+export {SearchContextProvider, useSearchContext};
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 41bb5234bd8f..71660482c299 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -3,6 +3,8 @@ import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
+import {useSearchContext} from '@components/Search/SearchContext';
+import {SearchColumnType, SortOrder} from '@components/Search/types';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import TableListItemSkeleton from '@components/Skeletons/TableListItemSkeleton';
@@ -13,7 +15,6 @@ import * as SearchActions from '@libs/actions/Search';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
 import * as ReportUtils from '@libs/ReportUtils';
-import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import * as SearchUtils from '@libs/SearchUtils';
 import Navigation from '@navigation/Navigation';
 import type {AuthScreensParamList} from '@navigation/types';
@@ -47,6 +48,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
     const {isLargeScreenWidth} = useWindowDimensions();
     const navigation = useNavigation<StackNavigationProp<AuthScreensParamList>>();
     const lastSearchResultsRef = useRef<OnyxEntry<SearchResults>>();
+    const {setCurrentSearchHash} = useSearchContext();
 
     const getItemHeight = useCallback(
         (item: TransactionListItemType | ReportListItemType) => {
@@ -83,6 +85,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
             return;
         }
 
+        setCurrentSearchHash(hash);
         SearchActions.search({hash, query, policyIDs, offset: 0, sortBy, sortOrder});
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [hash, isOffline]);
@@ -148,8 +151,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
 
     const ListItem = SearchUtils.getListItem(type);
 
-    const searchContext = {searchHash: hash};
-    const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type, searchContext);
+    const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type);
     const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
 
     const onSortPress = (column: SearchColumnType, order: SortOrder) => {
diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
index 3ebc2797947a..af972ac9c7b9 100644
--- a/src/components/Search/types.ts
+++ b/src/components/Search/types.ts
@@ -1,3 +1,6 @@
+import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
+import type CONST from '@src/CONST';
+
 /** Model of the selected transaction */
 type SelectedTransactionInfo = {
     /** Whether the transaction is selected */
@@ -13,5 +16,14 @@ type SelectedTransactionInfo = {
 /** Model of selected results */
 type SelectedTransactions = Record<string, SelectedTransactionInfo>;
 
-// eslint-disable-next-line import/prefer-default-export
-export type {SelectedTransactionInfo, SelectedTransactions};
+type SortOrder = ValueOf<typeof CONST.SEARCH.SORT_ORDER>;
+type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
+
+type SearchContext = {
+    currentSearchHash: number;
+    selectedTransactionIds: string[];
+    setCurrentSearchHash: (hash: number) => void;
+    setSelectedTransactionIds: (selectedTransactionIds: string[]) => void;
+};
+
+export type {SelectedTransactionInfo, SelectedTransactions, SearchColumnType, SortOrder, SearchContext};
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index b2650b589d10..b01c52763b30 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -3,6 +3,7 @@ import {View} from 'react-native';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
+import {useSearchContext} from '@components/Search/SearchContext';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -27,29 +28,30 @@ const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> =
 type ActionCellProps = {
     action?: SearchTransactionAction;
     transactionID?: string;
-    searchHash: number;
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
     goToItem: () => void;
 };
 
-function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, searchHash, isLargeScreenWidth = true, isSelected = false, goToItem}: ActionCellProps) {
+function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isLargeScreenWidth = true, isSelected = false, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const {currentSearchHash} = useSearchContext();
+
     const onButtonPress = useCallback(() => {
         if (!transactionID) {
             return;
         }
 
         if (action === CONST.SEARCH.ACTION_TYPES.HOLD) {
-            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute(CONST.SEARCH.TAB.ALL, transactionID, searchHash));
+            Navigation.navigate(ROUTES.TRANSACTION_HOLD_REASON_RHP.getRoute(CONST.SEARCH.TAB.ALL, transactionID));
         } else if (action === CONST.SEARCH.ACTION_TYPES.UNHOLD) {
-            SearchActions.unholdMoneyRequestOnSearch(searchHash, [transactionID]);
+            SearchActions.unholdMoneyRequestOnSearch(currentSearchHash, [transactionID]);
         }
-    }, [action, searchHash, transactionID]);
+    }, [action, currentSearchHash, transactionID]);
 
     const text = translate(actionTranslationsMap[action]);
 
diff --git a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
index 30b53d8b420b..f634f84509b1 100644
--- a/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
+++ b/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx
@@ -17,20 +17,10 @@ type ExpenseItemHeaderNarrowProps = {
     participantToDisplayName: string;
     action?: SearchTransactionAction;
     transactionID?: string;
-    searchHash: number;
     onButtonPress: () => void;
 };
 
-function ExpenseItemHeaderNarrow({
-    participantFrom,
-    participantFromDisplayName,
-    participantTo,
-    participantToDisplayName,
-    action,
-    transactionID,
-    searchHash,
-    onButtonPress,
-}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, action, transactionID, onButtonPress}: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
@@ -61,7 +51,6 @@ function ExpenseItemHeaderNarrow({
                 <ActionCell
                     action={action}
                     transactionID={transactionID}
-                    searchHash={searchHash}
                     goToItem={onButtonPress}
                 />
             </View>
diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 1087e1d9d9c7..8e113a6c95b5 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -115,9 +115,6 @@ function ReportListItem<TItem extends ListItem>({
         );
     }
 
-    // every child item comes from the same search hash, so it doesn't matter which one we use, we just need the hash
-    const {searchHash} = reportItem.transactions[0];
-
     return (
         <BaseListItem
             item={item}
@@ -145,7 +142,6 @@ function ReportListItem<TItem extends ListItem>({
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
                         action={reportItem.action}
-                        searchHash={searchHash}
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
@@ -182,7 +178,6 @@ function ReportListItem<TItem extends ListItem>({
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
                                     action={reportItem.action}
-                                    searchHash={searchHash}
                                     goToItem={handleOnButtonPress}
                                     isSelected={item.isSelected}
                                 />
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 02ccbb1b270f..197743221602 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -241,7 +241,6 @@ function TransactionListItemRow({
                         participantToDisplayName={item.formattedTo}
                         action={item.action}
                         transactionID={item.transactionID}
-                        searchHash={item.searchHash}
                         onButtonPress={onButtonPress}
                     />
                 )}
@@ -388,7 +387,6 @@ function TransactionListItemRow({
                     <ActionCell
                         action={item.action}
                         transactionID={item.transactionID}
-                        searchHash={item.searchHash}
                         isSelected={isButtonSelected}
                         goToItem={onButtonPress}
                     />
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index 95e4b680692b..ce813554bbe6 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import {View} from 'react-native';
+import {SearchColumnType, SortOrder} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchUtils from '@libs/SearchUtils';
-import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type * as OnyxTypes from '@src/types/onyx';
diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
index 8b0accf45711..56346871a9e2 100644
--- a/src/components/SelectionList/SortableHeaderText.tsx
+++ b/src/components/SelectionList/SortableHeaderText.tsx
@@ -4,10 +4,10 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
+import {SortOrder} from '@components/Search/types';
 import Text from '@components/Text';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import type {SortOrder} from '@libs/SearchUtils';
 import CONST from '@src/CONST';
 
 type SearchTableHeaderColumnProps = {
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
index 565e639443de..a20f0ae18c58 100644
--- a/src/components/SelectionList/types.ts
+++ b/src/components/SelectionList/types.ts
@@ -178,9 +178,6 @@ type TransactionListItemType = ListItem &
          */
         shouldShowYear: boolean;
 
-        /** Hash of search that was used to retrieve this item, needed for performing Actions on it */
-        searchHash: number;
-
         /** Key used internally by React */
         keyForList: string;
     };
diff --git a/src/libs/API/parameters/Search.ts b/src/libs/API/parameters/Search.ts
index 0a8345b0b7e0..8f6553753f84 100644
--- a/src/libs/API/parameters/Search.ts
+++ b/src/libs/API/parameters/Search.ts
@@ -1,4 +1,4 @@
-import type {SortOrder} from '@libs/SearchUtils';
+import {SortOrder} from '@components/Search/types';
 
 type SearchParams = {
     hash: number;
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index a59ff9de0b08..d8eb077056e7 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -11,8 +11,8 @@ import type {
     Route,
 } from '@react-navigation/native';
 import type {TupleToUnion, ValueOf} from 'type-fest';
+import type {SearchColumnType, SortOrder} from '@components/Search/types';
 import type {IOURequestType} from '@libs/actions/IOU';
-import type {SearchColumnType, SortOrder} from '@libs/SearchUtils';
 import type CONST from '@src/CONST';
 import type {Country, IOUAction, IOUType} from '@src/CONST';
 import type NAVIGATORS from '@src/NAVIGATORS';
diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
index d2c39280bd17..abd4889006f2 100644
--- a/src/libs/SearchUtils.ts
+++ b/src/libs/SearchUtils.ts
@@ -1,4 +1,4 @@
-import type {ValueOf} from 'react-native-gesture-handler/lib/typescript/typeUtils';
+import type {SearchColumnType, SortOrder} from '@components/Search/types';
 import ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ListItem, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
@@ -14,12 +14,6 @@ import type {AuthScreensParamList, RootStackParamList, State} from './Navigation
 import * as TransactionUtils from './TransactionUtils';
 import * as UserUtils from './UserUtils';
 
-type SortOrder = ValueOf<typeof CONST.SEARCH.SORT_ORDER>;
-type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
-type SearchDataContext = {
-    searchHash: number;
-};
-
 const columnNamesToSortingProperty = {
     [CONST.SEARCH.TABLE_COLUMNS.TO]: 'formattedTo' as const,
     [CONST.SEARCH.TABLE_COLUMNS.FROM]: 'formattedFrom' as const,
@@ -121,7 +115,7 @@ function shouldShowYear(data: TransactionListItemType[] | ReportListItemType[] |
     return false;
 }
 
-function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], context: SearchDataContext): TransactionListItemType[] {
+function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): TransactionListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -147,7 +141,6 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
                 formattedMerchant,
                 date,
                 shouldShowMerchant,
-                searchHash: context.searchHash,
                 shouldShowCategory: metadata?.columnsToShow?.shouldShowCategoryColumn,
                 shouldShowTag: metadata?.columnsToShow?.shouldShowTagColumn,
                 shouldShowTax: metadata?.columnsToShow?.shouldShowTaxColumn,
@@ -157,7 +150,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
         });
 }
 
-function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], context: SearchDataContext): ReportListItemType[] {
+function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): ReportListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -197,7 +190,6 @@ function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx
                 formattedMerchant,
                 date,
                 shouldShowMerchant,
-                searchHash: context.searchHash,
                 shouldShowCategory: metadata?.columnsToShow?.shouldShowCategoryColumn,
                 shouldShowTag: metadata?.columnsToShow?.shouldShowTagColumn,
                 shouldShowTax: metadata?.columnsToShow?.shouldShowTaxColumn,
@@ -237,9 +229,8 @@ function getSections<K extends keyof SearchTypeToItemMap>(
     data: OnyxTypes.SearchResults['data'],
     metadata: OnyxTypes.SearchResults['search'],
     type: K,
-    context: SearchDataContext,
 ): ReturnType<SearchTypeToItemMap[K]['getSections']> {
-    return searchTypeToItemMap[type].getSections(data, metadata, context) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
+    return searchTypeToItemMap[type].getSections(data, metadata) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
 }
 
 function getSortedSections<K extends keyof SearchTypeToItemMap>(
@@ -322,4 +313,3 @@ export {
     isTransactionListItemType,
     isSearchResultsEmpty,
 };
-export type {SearchColumnType, SortOrder, SearchDataContext};
diff --git a/src/pages/Search/SearchHoldReasonPage.tsx b/src/pages/Search/SearchHoldReasonPage.tsx
index 11ae7fcf1803..2506f6bf2453 100644
--- a/src/pages/Search/SearchHoldReasonPage.tsx
+++ b/src/pages/Search/SearchHoldReasonPage.tsx
@@ -1,6 +1,7 @@
 import type {RouteProp} from '@react-navigation/native';
 import React, {useCallback, useEffect} from 'react';
 import type {FormInputErrors, FormOnyxValues} from '@components/Form/types';
+import {useSearchContext} from '@components/Search/SearchContext';
 import useLocalize from '@hooks/useLocalize';
 import Navigation from '@libs/Navigation/Navigation';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -15,9 +16,6 @@ type SearchHoldReasonPageRouteParams = {
     /** ID of the transaction the page was opened for */
     transactionID: string;
 
-    /** Hash of search query that was used to generate this specific set of transactions  */
-    searchHash: number;
-
     /** Link to previous page */
     backTo: Route;
 };
@@ -30,10 +28,11 @@ type SearchHoldReasonPageProps = {
 function SearchHoldReasonPage({route}: SearchHoldReasonPageProps) {
     const {translate} = useLocalize();
 
-    const {searchHash, transactionID, backTo} = route.params;
+    const {currentSearchHash} = useSearchContext();
+    const {transactionID, backTo} = route.params;
 
     const onSubmit = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_HOLD_FORM>) => {
-        SearchActions.holdMoneyRequestOnSearch(searchHash, [transactionID], values.comment);
+        SearchActions.holdMoneyRequestOnSearch(currentSearchHash, [transactionID], values.comment);
 
         Navigation.goBack();
     };
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
index 6847625d2f4b..05cd2db18006 100644
--- a/src/types/onyx/SearchResults.ts
+++ b/src/types/onyx/SearchResults.ts
@@ -1,8 +1,8 @@
 import type {ValueOf} from 'type-fest';
+import type {SearchColumnType, SortOrder} from '@components/Search/types';
 import type ReportListItem from '@components/SelectionList/Search/ReportListItem';
 import type TransactionListItem from '@components/SelectionList/Search/TransactionListItem';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
-import type {SearchColumnType, SearchDataContext, SortOrder} from '@libs/SearchUtils';
 import type CONST from '@src/CONST';
 
 /** Types of search data */
@@ -29,7 +29,7 @@ type SearchTypeToItemMap = {
         listItem: ListItemType<K>;
 
         /** Returns search results sections based on search results data */
-        getSections: (data: SearchResults['data'], metadata: SearchResults['search'], context: SearchDataContext) => SectionsType<K>;
+        getSections: (data: SearchResults['data'], metadata: SearchResults['search']) => SectionsType<K>;
 
         /** Returns sorted search results sections based on search results data */
         getSortedSections: (data: SectionsType<K>, sortBy?: SearchColumnType, sortOrder?: SortOrder) => SectionsType<K>;

From f2d25444d36f2f815c9b33b9b169b1884f59d680 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Mon, 8 Jul 2024 15:54:23 +0200
Subject: [PATCH 13/16] Add small style updates to transaction items

---
 src/components/Search/SearchContext.tsx                       | 2 +-
 src/components/Search/index.tsx                               | 4 ++--
 src/components/SelectionList/Search/ActionCell.tsx            | 2 +-
 src/components/SelectionList/Search/TransactionListItem.tsx   | 2 +-
 .../SelectionList/Search/TransactionListItemRow.tsx           | 4 +++-
 src/components/SelectionList/SearchTableHeader.tsx            | 2 +-
 src/components/SelectionList/SortableHeaderText.tsx           | 2 +-
 src/libs/API/parameters/Search.ts                             | 2 +-
 8 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx
index 2ac54f281802..95d448ec18c7 100644
--- a/src/components/Search/SearchContext.tsx
+++ b/src/components/Search/SearchContext.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
-import type {SearchContext} from '@components/Search/types';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
+import type {SearchContext} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
diff --git a/src/components/Search/index.tsx b/src/components/Search/index.tsx
index 71660482c299..5d224260743a 100644
--- a/src/components/Search/index.tsx
+++ b/src/components/Search/index.tsx
@@ -3,8 +3,6 @@ import type {StackNavigationProp} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
-import {useSearchContext} from '@components/Search/SearchContext';
-import {SearchColumnType, SortOrder} from '@components/Search/types';
 import SearchTableHeader from '@components/SelectionList/SearchTableHeader';
 import type {ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import TableListItemSkeleton from '@components/Skeletons/TableListItemSkeleton';
@@ -26,8 +24,10 @@ import ROUTES from '@src/ROUTES';
 import type SearchResults from '@src/types/onyx/SearchResults';
 import type {SearchDataTypes, SearchQuery} from '@src/types/onyx/SearchResults';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
+import {useSearchContext} from './SearchContext';
 import SearchListWithHeader from './SearchListWithHeader';
 import SearchPageHeader from './SearchPageHeader';
+import type {SearchColumnType, SortOrder} from './types';
 
 type SearchProps = {
     query: SearchQuery;
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index b01c52763b30..a2d2ce24173e 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -66,9 +66,9 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
                         styles.ph2,
                         styles.gap1,
                         isLargeScreenWidth ? styles.alignSelfCenter : styles.alignSelfEnd,
-                        StyleUtils.getBorderColorStyle(theme.border),
                         StyleUtils.getHeight(variables.h20),
                         StyleUtils.getMinimumHeight(variables.h20),
+                        isSelected ? StyleUtils.getBorderColorStyle(theme.buttonHoveredBG) : StyleUtils.getBorderColorStyle(theme.border),
                     ]}
                     textStyles={StyleUtils.getFontSizeStyle(variables.fontSizeExtraSmall)}
                     iconStyles={styles.mr0}
diff --git a/src/components/SelectionList/Search/TransactionListItem.tsx b/src/components/SelectionList/Search/TransactionListItem.tsx
index b00ae0703c2e..6db308831baa 100644
--- a/src/components/SelectionList/Search/TransactionListItem.tsx
+++ b/src/components/SelectionList/Search/TransactionListItem.tsx
@@ -22,7 +22,7 @@ function TransactionListItem<TItem extends ListItem>({
 
     const {isLargeScreenWidth} = useWindowDimensions();
 
-    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, styles.ph3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
 
     const listItemWrapperStyle = [
         styles.flex1,
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 197743221602..c6110c8b08e6 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -71,13 +71,15 @@ function ReceiptCell({transactionItem}: TransactionCellProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const backgroundStyles = transactionItem.isSelected ? StyleUtils.getBackgroundColorStyle(theme.buttonHoveredBG) : StyleUtils.getBackgroundColorStyle(theme.border);
+
     return (
         <View
             style={[
                 StyleUtils.getWidthAndHeightStyle(variables.h36, variables.w40),
                 StyleUtils.getBorderRadiusStyle(variables.componentBorderRadiusSmall),
-                StyleUtils.getBackgroundColorStyle(theme.border),
                 styles.overflowHidden,
+                backgroundStyles,
             ]}
         >
             <ReceiptImage
diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx
index ce813554bbe6..4fc53211b734 100644
--- a/src/components/SelectionList/SearchTableHeader.tsx
+++ b/src/components/SelectionList/SearchTableHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
-import {SearchColumnType, SortOrder} from '@components/Search/types';
+import type {SearchColumnType, SortOrder} from '@components/Search/types';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/components/SelectionList/SortableHeaderText.tsx b/src/components/SelectionList/SortableHeaderText.tsx
index 56346871a9e2..47a894d79f53 100644
--- a/src/components/SelectionList/SortableHeaderText.tsx
+++ b/src/components/SelectionList/SortableHeaderText.tsx
@@ -4,7 +4,7 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
-import {SortOrder} from '@components/Search/types';
+import type {SortOrder} from '@components/Search/types';
 import Text from '@components/Text';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
diff --git a/src/libs/API/parameters/Search.ts b/src/libs/API/parameters/Search.ts
index 8f6553753f84..60ea54419492 100644
--- a/src/libs/API/parameters/Search.ts
+++ b/src/libs/API/parameters/Search.ts
@@ -1,4 +1,4 @@
-import {SortOrder} from '@components/Search/types';
+import type {SortOrder} from '@components/Search/types';
 
 type SearchParams = {
     hash: number;

From 0484b99a2b03d8733690fbdba119a0e431402304 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 9 Jul 2024 10:37:37 +0200
Subject: [PATCH 14/16] Add small style fixes to search

---
 src/components/Search/SearchContext.tsx                | 10 +++++-----
 src/components/Search/types.ts                         |  2 +-
 .../SelectionList/Search/TransactionListItemRow.tsx    |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx
index 95d448ec18c7..3911780d3965 100644
--- a/src/components/Search/SearchContext.tsx
+++ b/src/components/Search/SearchContext.tsx
@@ -4,7 +4,7 @@ import type {SearchContext} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
-    selectedTransactionIds: [],
+    selectedTransactionIDs: [],
     setCurrentSearchHash: () => {},
     setSelectedTransactionIds: () => {},
 };
@@ -12,9 +12,9 @@ const defaultSearchContext = {
 const Context = React.createContext<SearchContext>(defaultSearchContext);
 
 function SearchContextProvider({children}: ChildrenProps) {
-    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactionIds'>>({
+    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactionIDs'>>({
         currentSearchHash: defaultSearchContext.currentSearchHash,
-        selectedTransactionIds: defaultSearchContext.selectedTransactionIds,
+        selectedTransactionIDs: defaultSearchContext.selectedTransactionIDs,
     });
 
     const setCurrentSearchHash = useCallback(
@@ -28,10 +28,10 @@ function SearchContextProvider({children}: ChildrenProps) {
     );
 
     const setSelectedTransactionIds = useCallback(
-        (selectedTransactionIds: string[]) => {
+        (selectedTransactionIDs: string[]) => {
             setSearchContextData({
                 ...searchContextData,
-                selectedTransactionIds,
+                selectedTransactionIDs,
             });
         },
         [searchContextData],
diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts
index af972ac9c7b9..cff74fe08a0a 100644
--- a/src/components/Search/types.ts
+++ b/src/components/Search/types.ts
@@ -21,7 +21,7 @@ type SearchColumnType = ValueOf<typeof CONST.SEARCH.TABLE_COLUMNS>;
 
 type SearchContext = {
     currentSearchHash: number;
-    selectedTransactionIds: string[];
+    selectedTransactionIDs: string[];
     setCurrentSearchHash: (hash: number) => void;
     setSelectedTransactionIds: (selectedTransactionIds: string[]) => void;
 };
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index c6110c8b08e6..d8e268fd1cea 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -308,7 +308,7 @@ function TransactionListItemRow({
                     style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled]}
                 />
             )}
-            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, canSelectMultiple && styles.ph4]}>
+            <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, canSelectMultiple && styles.pl4]}>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.RECEIPT)]}>
                     <ReceiptCell
                         transactionItem={item}

From fbf83afc1791b6365bc49c6f8f5fc2f285b20214 Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 9 Jul 2024 11:08:47 +0200
Subject: [PATCH 15/16] Fix Search transaction list item highlight colors

---
 src/components/ReceiptImage.tsx                      |  7 ++++++-
 src/components/SelectionList/Search/ActionCell.tsx   | 12 ++++++++----
 .../SelectionList/Search/TransactionListItemRow.tsx  |  1 +
 src/components/ThumbnailImage.tsx                    | 10 ++++++++--
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/ReceiptImage.tsx b/src/components/ReceiptImage.tsx
index a520693cff57..8c980838b841 100644
--- a/src/components/ReceiptImage.tsx
+++ b/src/components/ReceiptImage.tsx
@@ -74,8 +74,11 @@ type ReceiptImageProps = (
     /** The size of the fallback icon */
     fallbackIconSize?: number;
 
-    /** The colod of the fallback icon */
+    /** The color of the fallback icon */
     fallbackIconColor?: string;
+
+    /** The background color of fallback icon */
+    fallbackIconBackground?: string;
 };
 
 function ReceiptImage({
@@ -93,6 +96,7 @@ function ReceiptImage({
     fallbackIconSize,
     shouldUseInitialObjectPosition = false,
     fallbackIconColor,
+    fallbackIconBackground,
 }: ReceiptImageProps) {
     const styles = useThemeStyles();
 
@@ -129,6 +133,7 @@ function ReceiptImage({
                 fallbackIcon={fallbackIcon}
                 fallbackIconSize={fallbackIconSize}
                 fallbackIconColor={fallbackIconColor}
+                fallbackIconBackground={fallbackIconBackground}
                 objectPosition={shouldUseInitialObjectPosition ? CONST.IMAGE_OBJECT_POSITION.INITIAL : CONST.IMAGE_OBJECT_POSITION.TOP}
             />
         );
diff --git a/src/components/SelectionList/Search/ActionCell.tsx b/src/components/SelectionList/Search/ActionCell.tsx
index 3103298f6dfb..ad77070c1b99 100644
--- a/src/components/SelectionList/Search/ActionCell.tsx
+++ b/src/components/SelectionList/Search/ActionCell.tsx
@@ -38,9 +38,6 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    if (!isLargeScreenWidth) {
-        return null;
-    }
 
     const {currentSearchHash} = useSearchContext();
 
@@ -56,6 +53,10 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
         }
     }, [action, currentSearchHash, transactionID]);
 
+    if (!isLargeScreenWidth) {
+        return null;
+    }
+
     const text = translate(actionTranslationsMap[action]);
 
     if (action === CONST.SEARCH.ACTION_TYPES.PAID || action === CONST.SEARCH.ACTION_TYPES.DONE) {
@@ -81,6 +82,8 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
         );
     }
 
+    const buttonInnerStyles = isSelected ? styles.buttonDefaultHovered : {};
+
     if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
         return (
             <Button
@@ -89,6 +92,7 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
                 small
                 pressOnEnter
                 style={[styles.w100]}
+                innerStyles={buttonInnerStyles}
             />
         );
     }
@@ -100,7 +104,7 @@ function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, isL
             small
             pressOnEnter
             style={[styles.w100]}
-            innerStyles={isSelected ? styles.buttonDefaultHovered : {}}
+            innerStyles={buttonInnerStyles}
         />
     );
 }
diff --git a/src/components/SelectionList/Search/TransactionListItemRow.tsx b/src/components/SelectionList/Search/TransactionListItemRow.tsx
index 43ad0cdc8e0b..f9ca70536e4b 100644
--- a/src/components/SelectionList/Search/TransactionListItemRow.tsx
+++ b/src/components/SelectionList/Search/TransactionListItemRow.tsx
@@ -92,6 +92,7 @@ function ReceiptCell({transactionItem}: TransactionCellProps) {
                 fallbackIcon={Expensicons.ReceiptPlus}
                 fallbackIconSize={20}
                 fallbackIconColor={theme.icon}
+                fallbackIconBackground={transactionItem.isSelected ? theme.buttonHoveredBG : undefined}
                 iconSize="x-small"
             />
         </View>
diff --git a/src/components/ThumbnailImage.tsx b/src/components/ThumbnailImage.tsx
index 3b89b7c3a7ad..04d0200ea228 100644
--- a/src/components/ThumbnailImage.tsx
+++ b/src/components/ThumbnailImage.tsx
@@ -41,9 +41,12 @@ type ThumbnailImageProps = {
     /** The size of the fallback icon */
     fallbackIconSize?: number;
 
-    /** The colod of the fallback icon */
+    /** The color of the fallback icon */
     fallbackIconColor?: string;
 
+    /** The background color of fallback icon */
+    fallbackIconBackground?: string;
+
     /** Should the image be resized on load or just fit container */
     shouldDynamicallyResize?: boolean;
 
@@ -66,6 +69,7 @@ function ThumbnailImage({
     fallbackIcon = Expensicons.Gallery,
     fallbackIconSize = variables.iconSizeSuperLarge,
     fallbackIconColor,
+    fallbackIconBackground,
     objectPosition = CONST.IMAGE_OBJECT_POSITION.INITIAL,
 }: ThumbnailImageProps) {
     const styles = useThemeStyles();
@@ -107,8 +111,10 @@ function ThumbnailImage({
     const sizeStyles = shouldDynamicallyResize ? [thumbnailDimensionsStyles] : [styles.w100, styles.h100];
 
     if (failedToLoad || previewSourceURL === '') {
+        const fallbackColor = StyleUtils.getBackgroundColorStyle(fallbackIconBackground ?? theme.border);
+
         return (
-            <View style={[style, styles.overflowHidden, StyleUtils.getBackgroundColorStyle(theme.border)]}>
+            <View style={[style, styles.overflowHidden, fallbackColor]}>
                 <View style={[...sizeStyles, styles.alignItemsCenter, styles.justifyContentCenter]}>
                     <Icon
                         src={isOffline ? Expensicons.OfflineCloud : fallbackIcon}

From a224fe22915b4d4c7be91b29e58e2a5498421bfe Mon Sep 17 00:00:00 2001
From: Mateusz Titz <titzmateusz@gmail.com>
Date: Tue, 9 Jul 2024 16:03:47 +0200
Subject: [PATCH 16/16] Fix margin on ReportListItem

---
 src/components/SelectionList/Search/ReportListItem.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/SelectionList/Search/ReportListItem.tsx b/src/components/SelectionList/Search/ReportListItem.tsx
index 8e113a6c95b5..29c7bc2ca60c 100644
--- a/src/components/SelectionList/Search/ReportListItem.tsx
+++ b/src/components/SelectionList/Search/ReportListItem.tsx
@@ -145,7 +145,7 @@ function ReportListItem<TItem extends ListItem>({
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
-                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3, isLargeScreenWidth && styles.mr4]}>
+                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap3]}>
                     <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween]}>
                         <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
                             {canSelectMultiple && (