Use new transaction component inside reports in search

src/CONST.ts

@@ -1410,6 +1410,17 @@ const CONST = {
         TRANSACTION_LIST: {
             COLUMNS: {
                 COMMENTS: 'comments',
+                RECEIPT: 'receipt',
+                DATE: 'date',
+                MERCHANT: 'merchant',
+                FROM: 'from',
+                TO: 'to',
+                CATEGORY: 'category',
+                TAG: 'tag',
+                TOTAL_AMOUNT: 'amount',
+                TYPE: 'type',
+                ACTION: 'action',
+                TAX: 'tax',
             },
         },
         CANCEL_PAYMENT_REASONS: {

src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx

@@ -2,7 +2,7 @@ import {useFocusEffect} from '@react-navigation/native';
 import isEmpty from 'lodash/isEmpty';
 import React, {memo, useCallback, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import type {TupleToUnion} from 'type-fest';
+import type {TupleToUnion, ValueOf} from 'type-fest';
 import {getButtonRole} from '@components/Button/utils';
 import Checkbox from '@components/Checkbox';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -36,6 +36,7 @@ import CONST from '@src/CONST';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ROUTES from '@src/ROUTES';
 import type * as OnyxTypes from '@src/types/onyx';
+import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import {useMoneyRequestReportContext} from './MoneyRequestReportContext';
 import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
 import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
@@ -59,6 +60,23 @@ type TransactionWithOptionalHighlight = OnyxTypes.Transaction & {
     shouldBeHighlighted?: boolean;
 };
 
+type TransactionWithOptionalSearchFields = TransactionWithOptionalHighlight & {
+    /** The action that can be performed for the transaction */
+    action?: SearchTransactionAction;
+
+    /** Function passed to the action button, triggered when the button is pressed */
+    onButtonPress?: () => void;
+
+    /** The personal details of the user requesting money */
+    from?: SearchPersonalDetails;
+
+    /** The personal details of the user paying the request */
+    to?: SearchPersonalDetails;
+
+    /** Type of transaction */
+    transactionType?: ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
+};
+
 const sortableColumnNames = [
     CONST.SEARCH.TABLE_COLUMNS.DATE,
     CONST.SEARCH.TABLE_COLUMNS.MERCHANT,
@@ -67,6 +85,17 @@ const sortableColumnNames = [
     CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT,
 ];
 
+const allReportColumns = [
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.RECEIPT,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TYPE,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.DATE,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.MERCHANT,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.CATEGORY,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TAG,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS,
+    CONST.REPORT.TRANSACTION_LIST.COLUMNS.TOTAL_AMOUNT,
+];
+
 type SortableColumnName = TupleToUnion<typeof sortableColumnNames>;
 
 type SortedTransactions = {
@@ -260,6 +289,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                                 shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
                                 shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}
                                 onCheckboxPress={toggleTransaction}
+                                columns={allReportColumns}
                             />
                         </PressableWithFeedback>
                     );
@@ -324,4 +354,4 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
 MoneyRequestReportTransactionList.displayName = 'MoneyRequestReportTransactionList';
 
 export default memo(MoneyRequestReportTransactionList);
-export type {TransactionWithOptionalHighlight};
+export type {TransactionWithOptionalHighlight, TransactionWithOptionalSearchFields};

src/components/SelectionList/Search/ReportListItem.tsx

@@ -1,21 +1,24 @@
-import React from 'react';
+import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import type {ValueOf} from 'type-fest';
 import BaseListItem from '@components/SelectionList/BaseListItem';
 import type {ListItem, ReportListItemProps, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
+import TransactionItemRow from '@components/TransactionItemRow';
 import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle';
 import useLocalize from '@hooks/useLocalize';
 import usePermissions from '@hooks/usePermissions';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import ReportListItemHeader from './ReportListItemHeader';
-import TransactionListItemRow from './TransactionListItemRow';
 
 function ReportListItem<TItem extends ListItem>({
     item,
@@ -38,6 +41,12 @@ function ReportListItem<TItem extends ListItem>({
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportItem?.policyID}`];
     const isEmptyReport = reportItem.transactions.length === 0;
     const isDisabledOrEmpty = isEmptyReport || isDisabled;
+    const {isLargeScreenWidth} = useResponsiveLayout();
+
+    const dateColumnSize = useMemo(() => {
+        const shouldShowYearForSomeTransaction = reportItem.transactions.some((transaction) => shouldShowTransactionYear(transaction));
+        return shouldShowYearForSomeTransaction ? CONST.SEARCH.TABLE_COLUMN_SIZES.WIDE : CONST.SEARCH.TABLE_COLUMN_SIZES.NORMAL;
+    }, [reportItem.transactions]);
 
     const animatedHighlightStyle = useAnimatedHighlightStyle({
         borderRadius: variables.componentBorderRadius,
@@ -78,6 +87,23 @@ function ReportListItem<TItem extends ListItem>({
         return null;
     }
 
+    const sampleTransaction = reportItem.transactions.at(0);
+    const {COLUMNS} = CONST.REPORT.TRANSACTION_LIST;
+
+    const columns = [
+        COLUMNS.RECEIPT,
+        COLUMNS.TYPE,
+        COLUMNS.DATE,
+        COLUMNS.MERCHANT,
+        COLUMNS.FROM,
+        COLUMNS.TO,
+        ...(sampleTransaction?.shouldShowCategory ? [COLUMNS.CATEGORY] : []),
+        ...(sampleTransaction?.shouldShowTag ? [COLUMNS.TAG] : []),
+        ...(sampleTransaction?.shouldShowTax ? [COLUMNS.TAX] : []),
+        COLUMNS.TOTAL_AMOUNT,
+        COLUMNS.ACTION,
+    ] as Array<ValueOf<typeof COLUMNS>>;
+
     return (
         <BaseListItem
             item={item}
@@ -98,47 +124,49 @@ function ReportListItem<TItem extends ListItem>({
             hoverStyle={item.isSelected && styles.activeComponentBG}
             pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
         >
-            <View style={[styles.flex1]}>
-                <ReportListItemHeader
-                    report={reportItem}
-                    policy={policy}
-                    item={item}
-                    onSelectRow={onSelectRow}
-                    onCheckboxPress={onCheckboxPress}
-                    isDisabled={isDisabledOrEmpty}
-                    canSelectMultiple={canSelectMultiple}
-                />
-                {isEmptyReport ? (
-                    <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.mnh13]}>
-                        <Text
-                            style={[styles.textLabelSupporting]}
-                            numberOfLines={1}
-                        >
-                            {translate('search.moneyRequestReport.emptyStateTitle')}
-                        </Text>
-                    </View>
-                ) : (
-                    reportItem.transactions.map((transaction) => (
-                        <TransactionListItemRow
-                            key={transaction.transactionID}
-                            parentAction={reportItem.action}
-                            item={transaction}
-                            showTooltip={showTooltip}
-                            onButtonPress={() => {
-                                openReportInRHP(transaction);
-                            }}
-                            onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
-                            showItemHeaderOnNarrowLayout={false}
-                            containerStyle={[transaction.isSelected && styles.activeComponentBG, styles.ph3, styles.pv1half]}
-                            isChildListItem
-                            isDisabled={!!isDisabled}
-                            canSelectMultiple={!!canSelectMultiple}
-                            isButtonSelected={transaction.isSelected}
-                            shouldShowTransactionCheckbox
-                        />
-                    ))
-                )}
-            </View>
+            {(hovered) => (
+                <View style={[styles.flex1]}>
+                    <ReportListItemHeader
+                        report={reportItem}
+                        policy={policy}
+                        item={item}
+                        onSelectRow={onSelectRow}
+                        onCheckboxPress={onCheckboxPress}
+                        isDisabled={isDisabledOrEmpty}
+                        canSelectMultiple={canSelectMultiple}
+                    />
+                    {isEmptyReport ? (
+                        <View style={[styles.alignItemsCenter, styles.justifyContentCenter, styles.mnh13]}>
+                            <Text
+                                style={[styles.textLabelSupporting]}
+                                numberOfLines={1}
+                            >
+                                {translate('search.moneyRequestReport.emptyStateTitle')}
+                            </Text>
+                        </View>
+                    ) : (
+                        reportItem.transactions.map((transaction) => (
+                            <View>
+                                <TransactionItemRow
+                                    transactionItem={transaction}
+                                    isSelected={!!transaction.isSelected}
+                                    dateColumnSize={dateColumnSize}
+                                    shouldShowTooltip={showTooltip}
+                                    shouldUseNarrowLayout={!isLargeScreenWidth}
+                                    shouldShowCheckbox={!!canSelectMultiple}
+                                    onCheckboxPress={() => onCheckboxPress?.(transaction as unknown as TItem)}
+                                    columns={columns}
+                                    onButtonPress={() => {
+                                        openReportInRHP(transaction);
+                                    }}
+                                    isParentHovered={hovered}
+                                    columnWrapperStyles={[styles.ph3, styles.pv1half]}
+                                />
+                            </View>
+                        ))
+                    )}
+                </View>
+            )}
         </BaseListItem>
     );
 }

src/components/TransactionItemRow/DataCells/MerchantCell.tsx

@@ -5,7 +5,7 @@ import {getMerchant} from '@libs/TransactionUtils';
 import CONST from '@src/CONST';
 import type TransactionDataCellProps from './TransactionDataCellProps';
 
-function MerchantCell({transactionItem, shouldShowTooltip}: TransactionDataCellProps) {
+function MerchantCell({transactionItem, shouldShowTooltip, shouldUseNarrowLayout}: TransactionDataCellProps) {
     const styles = useThemeStyles();
 
     const merchantName = getMerchant(transactionItem);
@@ -15,7 +15,7 @@ function MerchantCell({transactionItem, shouldShowTooltip}: TransactionDataCellP
         <TextWithTooltip
             shouldShowTooltip={shouldShowTooltip}
             text={merchantToDisplay}
-            style={[styles.pre, styles.justifyContentCenter, styles.flex1]}
+            style={[!shouldUseNarrowLayout ? styles.lineHeightLarge : styles.lh20, styles.pre, styles.justifyContentCenter]}
         />
     );
 }

src/components/TransactionItemRow/DataCells/TaxCell.tsx

@@ -0,0 +1,22 @@
+import TextWithTooltip from '@components/TextWithTooltip';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import {getTaxAmount, getCurrency as getTransactionCurrency} from '@libs/TransactionUtils';
+import type TransactionDataCellProps from './TransactionDataCellProps';
+
+function TaxCell({transactionItem, shouldShowTooltip}: TransactionDataCellProps) {
+    const styles = useThemeStyles();
+
+    const taxAmount = getTaxAmount(transactionItem, true);
+    const currency = getTransactionCurrency(transactionItem);
+
+    return (
+        <TextWithTooltip
+            shouldShowTooltip={shouldShowTooltip}
+            text={convertToDisplayString(taxAmount, currency)}
+            style={[styles.optionDisplayName, styles.lineHeightLarge, styles.pre, styles.justifyContentCenter, styles.textAlignRight]}
+        />
+    );
+}
+
+export default TaxCell;

src/components/TransactionItemRow/DataCells/TransactionDataCellProps.ts

@@ -1,7 +1,7 @@
-import type Transaction from '@src/types/onyx/Transaction';
+import type {TransactionWithOptionalSearchFields} from '@components/MoneyRequestReportView/MoneyRequestReportTransactionList';
 
 type TransactionDataCellProps = {
-    transactionItem: Transaction;
+    transactionItem: TransactionWithOptionalSearchFields;
     shouldShowTooltip: boolean;
     shouldUseNarrowLayout?: boolean;
 };

src/components/TransactionItemRow/DataCells/TypeCell.tsx

@@ -24,6 +24,8 @@ const getTypeIcon = (type?: string) => {
     switch (type) {
         case CONST.SEARCH.TRANSACTION_TYPE.CARD:
             return Expensicons.CreditCard;
+        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
+            return Expensicons.Car;
         case CONST.SEARCH.TRANSACTION_TYPE.CASH:
         default:
             return Expensicons.Cash;
@@ -32,6 +34,8 @@ const getTypeIcon = (type?: string) => {
 
 const getTypeText = (type?: string): TranslationPaths => {
     switch (type) {
+        case CONST.SEARCH.TRANSACTION_TYPE.DISTANCE:
+            return 'common.distance';
         case CONST.SEARCH.TRANSACTION_TYPE.CARD:
             return 'iou.card';
         case CONST.SEARCH.TRANSACTION_TYPE.CASH:
@@ -43,7 +47,7 @@ const getTypeText = (type?: string): TranslationPaths => {
 function TypeCell({transactionItem, shouldUseNarrowLayout, shouldShowTooltip}: TransactionDataCellProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
-    const type = getType(transactionItem.cardName);
+    const type = transactionItem.transactionType ?? getType(transactionItem.cardName);
     const typeIcon = getTypeIcon(type);
     const typeText = getTypeText(type);
     const styles = useThemeStyles();