[No QA][Search v1] Create ReportListItem

src/CONST.ts

@@ -4772,6 +4772,7 @@ const CONST = {
 
     SEARCH_DATA_TYPES: {
         TRANSACTION: 'transaction',
+        REPORT: 'report',
     },
 
     REFERRER: {

src/components/Search.tsx

@@ -1,7 +1,8 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useOnyx} from 'react-native-onyx';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as SearchActions from '@libs/actions/Search';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import Log from '@libs/Log';
@@ -12,20 +13,29 @@ import useCustomBackHandler from '@pages/Search/useCustomBackHandler';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {SearchReport, SearchTransaction} from '@src/types/onyx/SearchResults';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import SelectionList from './SelectionList';
 import SearchTableHeader from './SelectionList/SearchTableHeader';
+import type {ReportListItemType, TransactionListItemType} from './SelectionList/types';
 import TableListItemSkeleton from './Skeletons/TableListItemSkeleton';
 
 type SearchProps = {
     query: string;
     policyIDs?: string;
 };
 
+function isReportListItemType(item: TransactionListItemType | ReportListItemType): item is ReportListItemType {
+    const reportListItem = item as ReportListItemType;
+    return reportListItem.transactions !== undefined;
+}
+
 function Search({query, policyIDs}: SearchProps) {
+    const [selectedItems, setSelectedItems] = useState<Array<SearchTransaction | SearchReport>>([]);
     const {isOffline} = useNetwork();
     const styles = useThemeStyles();
+    const {isLargeScreenWidth} = useWindowDimensions();
     useCustomBackHandler();
 
     const hash = SearchUtils.getQueryHash(query, policyIDs);
@@ -75,16 +85,56 @@ function Search({query, policyIDs}: SearchProps) {
         return null;
     }
 
+    const toggleListItem = (listItem: TransactionListItemType | ReportListItemType) => {
+        // @TODO: Selecting checkboxes will be handled in a separate PR
+        if (isReportListItemType(listItem)) {
+            Log.info(listItem?.reportID?.toString() ?? '');
+            return;
+        }
+
+        Log.info(listItem.transactionID);
+    };
+
     const ListItem = SearchUtils.getListItem(type);
-    const data = SearchUtils.getSections(searchResults?.data ?? {}, type);
+
+    const data = SearchUtils.getSections(
+        {
+            ...searchResults?.data,
+            // @TODO: Remove this comment when report items are returned from the API, uncomment it to test whether ReportListItem is displayed properly.
+            // report_0: {
+            //     reportID: 0,
+            //     reportName: 'Alice’s Apples owes $110.00',
+            //     total: 1000,
+            //     currency: 'USD',
+            //     action: 'pay',
+            // },
+        } ?? {},
+        type,
+    );
+
+    const toggleAllItems = () => {
+        if (selectedItems.length === data.length) {
+            setSelectedItems([]);
+        } else {
+            setSelectedItems([...data]);
+        }
+    };
 
     return (
         <SelectionList
+            canSelectMultiple={isLargeScreenWidth}
+            onSelectAll={toggleAllItems}
+            onCheckboxPress={toggleListItem}
             customListHeader={<SearchTableHeader data={searchResults?.data} />}
             ListItem={ListItem}
             sections={[{data, isDisabled: false}]}
             onSelectRow={(item) => {
-                openReport(item.transactionThreadReportID);
+                if (isReportListItemType(item)) {
+                    openReport(item.reportID);
+                    return;
+                }
+
+                openReport(item.transactionID);
             }}
             shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}
             listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]}

src/components/SelectionList/ExpenseItemHeader.tsx

@@ -0,0 +1,54 @@
+import React 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 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 UserInfoCell from './UserInfoCell';
+
+type ExpenseItemHeaderProps = {
+    participantFrom: SearchAccountDetails;
+    participantTo: SearchAccountDetails;
+    buttonText: string;
+    onButtonPress: () => void;
+};
+
+function ExpenseItemHeader({participantFrom, participantTo, buttonText, onButtonPress}: ExpenseItemHeaderProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+
+    return (
+        <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.mb2, styles.gap2]}>
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1, styles.flex1]}>
+                <View style={[styles.mw50]}>
+                    <UserInfoCell participant={participantFrom} />
+                </View>
+                <Icon
+                    src={Expensicons.ArrowRightLong}
+                    width={variables.iconSizeXXSmall}
+                    height={variables.iconSizeXXSmall}
+                    fill={theme.icon}
+                />
+                <View style={[styles.flex1, styles.mw50]}>
+                    <UserInfoCell participant={participantTo} />
+                </View>
+            </View>
+            <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
+                <Button
+                    text={buttonText}
+                    onPress={onButtonPress}
+                    small
+                    pressOnEnter
+                    style={[styles.p0]}
+                />
+            </View>
+        </View>
+    );
+}
+
+export default ExpenseItemHeader;

src/components/SelectionList/ListItemCheckbox.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {View} from 'react-native';
+import Icon from '@components/Icon';
+import {PressableWithFeedback} from '@components/Pressable';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type ListItemCheckboxProps = {
+    accessibilityLabel?: string;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isDisabledCheckbox: boolean;
+    onPress: () => void;
+};
+
+function ListItemCheckbox({accessibilityLabel, isSelected, isDisabled, isDisabledCheckbox, onPress}: ListItemCheckboxProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const theme = useTheme();
+
+    return (
+        <PressableWithFeedback
+            accessibilityLabel={accessibilityLabel ?? ''}
+            role={CONST.ROLE.BUTTON}
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            disabled={isDisabled || isDisabledCheckbox}
+            onPress={onPress}
+            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), isDisabledCheckbox && styles.cursorDisabled]}
+        >
+            <View style={[StyleUtils.getCheckboxContainerStyle(20), StyleUtils.getMultiselectListStyles(!!isSelected, !!isDisabled)]}>
+                {isSelected && (
+                    <Icon
+                        src={Expensicons.Checkmark}
+                        fill={theme.textLight}
+                        height={14}
+                        width={14}
+                    />
+                )}
+            </View>
+        </PressableWithFeedback>
+    );
+}
+
+ListItemCheckbox.displayName = 'ListItemCheckbox';
+
+export default ListItemCheckbox;

src/components/SelectionList/ReportListItem.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import Text from '@components/Text';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import * as CurrencyUtils from '@libs/CurrencyUtils';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ROUTES from '@src/ROUTES';
+import BaseListItem from './BaseListItem';
+import ExpenseItemHeader from './ExpenseItemHeader';
+import ListItemCheckbox from './ListItemCheckbox';
+import TransactionListItem from './TransactionListItem';
+import TransactionListItemRow from './TransactionListItemRow';
+import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from './types';
+
+const TYPE_COLUMN_WIDTH = 52;
+
+function ReportListItem<TItem extends ListItem>({
+    item,
+    isFocused,
+    showTooltip,
+    isDisabled,
+    canSelectMultiple,
+    onSelectRow,
+    onDismissError,
+    shouldPreventDefaultFocusOnSelectRow,
+    onFocus,
+    shouldSyncFocus,
+}: ReportListItemProps<TItem>) {
+    const reportItem = item as unknown as ReportListItemType;
+
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+    const {isLargeScreenWidth} = useWindowDimensions();
+    const StyleUtils = useStyleUtils();
+
+    const listItemPressableStyle = [styles.selectionListPressableItemWrapper, styles.pv3, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive];
+
+    const handleOnButtonPress = () => {
+        onSelectRow(item);
+    };
+
+    const openReportInRHP = (transactionItem: TransactionListItemType) => {
+        Navigation.navigate(ROUTES.SEARCH_REPORT.getRoute(CONST.TAB_SEARCH.ALL, transactionItem.transactionThreadReportID));
+    };
+
+    const totalCell = (
+        <TextWithTooltip
+            shouldShowTooltip={showTooltip}
+            text={CurrencyUtils.convertToDisplayString(reportItem?.total, reportItem?.currency)}
+            style={[styles.optionDisplayName, styles.textNewKansasNormal, styles.pre, styles.justifyContentCenter, isLargeScreenWidth ? undefined : styles.textAlignRight]}
+        />
+    );
+
+    const actionCell = (
+        <Button
+            text={translate('common.view')}
+            onPress={handleOnButtonPress}
+            small
+            pressOnEnter
+            style={[styles.p0]}
+        />
+    );
+
+    if (reportItem.transactions.length === 1) {
+        const transactionItem = reportItem.transactions[0];
+
+        return (
+            <TransactionListItem
+                item={transactionItem as unknown as TItem}
+                isFocused={isFocused}
+                showTooltip={showTooltip}
+                isDisabled={isDisabled}
+                canSelectMultiple={canSelectMultiple}
+                onSelectRow={() => openReportInRHP(transactionItem)}
+                onDismissError={onDismissError}
+                shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                onFocus={onFocus}
+                shouldSyncFocus={shouldSyncFocus}
+            />
+        );
+    }
+    const participantFrom = reportItem.transactions[0].from;
+    const participantTo = reportItem.transactions[0].to;
+
+    if (reportItem?.reportName && reportItem.transactions.length > 1) {
+        return (
+            <BaseListItem
+                item={item}
+                pressableStyle={listItemPressableStyle}
+                wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
+                containerStyle={[styles.mb3]}
+                isFocused={isFocused}
+                isDisabled={isDisabled}
+                showTooltip={showTooltip}
+                canSelectMultiple={canSelectMultiple}
+                onSelectRow={onSelectRow}
+                onDismissError={onDismissError}
+                shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                errors={item.errors}
+                pendingAction={item.pendingAction}
+                keyForList={item.keyForList}
+                onFocus={onFocus}
+                shouldSyncFocus={shouldSyncFocus}
+                hoverStyle={item.isSelected && styles.activeComponentBG}
+            >
+                <View style={styles.flex1}>
+                    {!isLargeScreenWidth && (
+                        <ExpenseItemHeader
+                            participantFrom={participantFrom}
+                            participantTo={participantTo}
+                            buttonText={translate('common.view')}
+                            onButtonPress={handleOnButtonPress}
+                        />
+                    )}
+                    <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, isLargeScreenWidth && styles.mr4]}>
+                        {/** marginRight added here to move the action button by the type column distance */}
+                        <View style={[styles.flexRow, styles.flex1, styles.alignItemsCenter, styles.justifyContentBetween, isLargeScreenWidth && {marginRight: TYPE_COLUMN_WIDTH}]}>
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex2]}>
+                                {canSelectMultiple && (
+                                    <ListItemCheckbox
+                                        accessibilityLabel={item.text}
+                                        isDisabled={Boolean(isDisabled)}
+                                        isDisabledCheckbox={Boolean(item.isDisabledCheckbox)}
+                                        isSelected={Boolean(item.isSelected)}
+                                        onPress={() => {}}
+                                    />
+                                )}
+
+                                <View style={[styles.flexShrink1, isLargeScreenWidth && styles.ph4]}>
+                                    <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>
+                                    <Text style={[styles.textMicroSupporting]}>{`${reportItem.transactions.length} grouped expenses`}</Text>
+                                </View>
+                            </View>
+                            <View style={[styles.flexRow, styles.flex1, styles.justifyContentEnd]}>{totalCell}</View>
+                        </View>
+                        {isLargeScreenWidth && <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.ACTION)]}>{actionCell}</View>}
+                    </View>
+                    <View style={[styles.mt3, styles.reportListItemSeparator]} />
+                    {reportItem.transactions.map((transaction) => (
+                        <TransactionListItemRow
+                            item={transaction}
+                            showTooltip={showTooltip}
+                            isDisabled={Boolean(isDisabled)}
+                            canSelectMultiple={Boolean(canSelectMultiple)}
+                            onButtonPress={() => {
+                                openReportInRHP(transaction);
+                            }}
+                            showItemHeaderOnNarrowLayout={false}
+                            containerStyle={styles.mt3}
+                        />
+                    ))}
+                </View>
+            </BaseListItem>
+        );
+    }
+
+    return null;
+}
+
+ReportListItem.displayName = 'ReportListItem';
+
+export default ReportListItem;

src/components/SelectionList/SearchTableHeader.tsx

@@ -30,7 +30,7 @@ function SearchTableHeader({data}: SearchTableHeaderProps) {
     }
 
     return (
-        <View style={[styles.ph5, styles.pb3]}>
+        <View style={[styles.flex1]}>
             <View style={[styles.flex1, styles.flexRow, styles.gap3, styles.ph4]}>
                 <SearchTableHeaderColumn
                     containerStyle={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH_TABLE_COLUMNS.DATE)]}