[Search v1] Add handling of actions and improve Search list items

src/CONST.ts

@@ -4999,6 +4999,9 @@ const CONST = {
             DONE: 'done',
             PAID: 'paid',
             VIEW: 'view',
+            REVIEW: 'review',
+            HOLD: 'hold',
+            UNHOLD: 'unhold',
         },
         TRANSACTION_TYPE: {
             CASH: 'cash',

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/: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
     CONCIERGE: 'concierge',
     FLAG_COMMENT: {

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: {

src/components/Search/index.tsx

@@ -149,7 +149,8 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
 
     const ListItem = SearchUtils.getListItem(type);
 
-    const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type);
+    const searchContext = {searchHash: hash};
+    const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type, searchContext);
     const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder);
 
     const onSortPress = (column: SearchColumnType, order: SortOrder) => {

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,28 +7,57 @@ import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
+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> = {
+    view: 'common.view',
+    review: 'common.review',
+    done: 'common.done',
+    paid: 'iou.settledExpensify',
+    hold: 'iou.hold',
+    unhold: 'iou.unhold',
+};
 
 type ActionCellProps = {
-    onButtonPress: () => void;
-    action?: string;
+    action?: SearchTransactionAction;
+    transactionID?: string;
+    searchHash: number;
     isLargeScreenWidth?: boolean;
     isSelected?: boolean;
+    goToItem: () => void;
 };
 
-function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false}: ActionCellProps) {
+function ActionCell({action = CONST.SEARCH.ACTION_TYPES.VIEW, transactionID, searchHash, isLargeScreenWidth = true, isSelected = false, goToItem}: ActionCellProps) {
     const {translate} = useLocalize();
-    const styles = useThemeStyles();
     const theme = useTheme();
+    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(CONST.SEARCH.TAB.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) {
-        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)}
+                    text={text}
                     icon={Expensicons.Checkmark}
                     badgeStyles={[
                         styles.ml0,
@@ -47,9 +76,21 @@ function ActionCell({onButtonPress, action = CONST.SEARCH.ACTION_TYPES.VIEW, isL
         );
     }
 
+    if (action === CONST.SEARCH.ACTION_TYPES.VIEW || action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
+        return (
+            <Button
+                text={text}
+                onPress={goToItem}
+                small
+                pressOnEnter
+                style={[styles.w100]}
+            />
+        );
+    }
+
     return (
         <Button
-            text={translate('common.view')}
+            text={text}
             onPress={onButtonPress}
             small
             pressOnEnter

src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

@@ -6,7 +6,7 @@ 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';
 
@@ -15,11 +15,22 @@ type ExpenseItemHeaderNarrowProps = {
     participantTo: SearchAccountDetails;
     participantFromDisplayName: string;
     participantToDisplayName: string;
+    action?: SearchTransactionAction;
+    transactionID?: string;
+    searchHash: number;
     onButtonPress: () => void;
-    action?: string;
 };
 
-function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, participantTo, participantToDisplayName, onButtonPress, action}: ExpenseItemHeaderNarrowProps) {
+function ExpenseItemHeaderNarrow({
+    participantFrom,
+    participantFromDisplayName,
+    participantTo,
+    participantToDisplayName,
+    action,
+    transactionID,
+    searchHash,
+    onButtonPress,
+}: ExpenseItemHeaderNarrowProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const theme = useTheme();
@@ -48,9 +59,10 @@ function ExpenseItemHeaderNarrow({participantFrom, participantFromDisplayName, p
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell
-                    onButtonPress={onButtonPress}
                     action={action}
-                    isLargeScreenWidth={false}
+                    transactionID={transactionID}
+                    searchHash={searchHash}
+                    goToItem={onButtonPress}
                 />
             </View>
         </View>

src/components/SelectionList/Search/ReportListItem.tsx

@@ -115,6 +115,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}
@@ -142,6 +145,7 @@ function ReportListItem<TItem extends ListItem>({
                         participantTo={participantTo}
                         participantToDisplayName={participantToDisplayName}
                         action={reportItem.action}
+                        searchHash={searchHash}
                         onButtonPress={handleOnButtonPress}
                     />
                 )}
@@ -177,9 +181,9 @@ function ReportListItem<TItem extends ListItem>({
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.TYPE)} />
                             <View style={StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)}>
                                 <ActionCell
-                                    isLargeScreenWidth={isLargeScreenWidth}
-                                    onButtonPress={handleOnButtonPress}
                                     action={reportItem.action}
+                                    searchHash={searchHash}
+                                    goToItem={handleOnButtonPress}
                                     isSelected={item.isSelected}
                                 />
                             </View>

src/components/SelectionList/Search/TransactionListItemRow.tsx

@@ -239,8 +239,10 @@ function TransactionListItemRow({
                         participantFromDisplayName={item.formattedFrom}
                         participantTo={item.to}
                         participantToDisplayName={item.formattedTo}
-                        onButtonPress={onButtonPress}
                         action={item.action}
+                        transactionID={item.transactionID}
+                        searchHash={item.searchHash}
+                        onButtonPress={onButtonPress}
                     />
                 )}
 
@@ -384,9 +386,11 @@ function TransactionListItemRow({
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
                     <ActionCell
-                        onButtonPress={onButtonPress}
                         action={item.action}
+                        transactionID={item.transactionID}
+                        searchHash={item.searchHash}
                         isSelected={isButtonSelected}
+                        goToItem={onButtonPress}
                     />
                 </View>
             </View>

src/components/SelectionList/types.ts

@@ -173,6 +173,9 @@ 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;
     };

src/languages/en.ts

@@ -169,6 +169,7 @@ export default {
         wallet: 'Wallet',
         preferences: 'Preferences',
         view: 'View',
+        review: 'Review',
         not: 'Not',
         signIn: 'Sign in',
         signInWithGoogle: 'Sign in with Google',

src/languages/es.ts

@@ -160,6 +160,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',

src/libs/API/parameters/HoldRequestOnSearchParams.ts

@@ -0,0 +1,7 @@
+type HoldRequestOnSearchParams = {
+    searchHash: number;
+    transactionIDList: string[];
+    comment?: string;
+};
+
+export default HoldRequestOnSearchParams;

src/libs/API/parameters/UnholdRequestOnSearchParams.ts

@@ -0,0 +1,6 @@
+type UnholdRequestOnSearchParams = {
+    searchHash: number;
+    transactionIDList: string[];
+};
+
+export default UnholdRequestOnSearchParams;

src/libs/API/parameters/index.ts

@@ -240,3 +240,5 @@ 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';

src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

@@ -409,6 +409,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>({

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,

src/libs/Navigation/linkingConfig/config.ts

@@ -809,6 +809,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]: {

src/libs/SearchUtils.ts

@@ -15,6 +15,9 @@ 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,
@@ -117,7 +120,7 @@ function shouldShowYear(data: TransactionListItemType[] | ReportListItemType[] |
     return false;
 }
 
-function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): TransactionListItemType[] {
+function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], context: SearchDataContext): TransactionListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -143,6 +146,7 @@ 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,
@@ -152,7 +156,7 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata
         });
 }
 
-function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): ReportListItemType[] {
+function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], context: SearchDataContext): ReportListItemType[] {
     const shouldShowMerchant = getShouldShowMerchant(data);
 
     const doesDataContainAPastYearTransaction = shouldShowYear(data);
@@ -190,6 +194,7 @@ 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,
@@ -229,8 +234,9 @@ 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) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
+    return searchTypeToItemMap[type].getSections(data, metadata, context) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
 }
 
 function getSortedSections<K extends keyof SearchTypeToItemMap>(
@@ -284,4 +290,4 @@ function getSearchParams() {
 }
 
 export {getListItem, getQueryHash, getSections, getSortedSections, getShouldShowMerchant, getSearchType, getSearchParams, shouldShowYear, isReportListItemType, isTransactionListItemType};
-export type {SearchColumnType, SortOrder};
+export type {SearchColumnType, SortOrder, SearchDataContext};

src/libs/actions/Search.ts

@@ -63,17 +63,18 @@ function createTransactionThread(hash: number, transactionID: string, reportID:
             },
         },
     };
-
     Onyx.merge(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, onyxUpdate);
 }
 
 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});
 }