Merge pull request #62286 from software-mansion-labs/feature/kuba-nowakowski/reuse_new_row_component_in_search

Use new transaction component inside reports in search

Author: mountiny

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

@@ -67,6 +67,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 +271,7 @@ function MoneyRequestReportTransactionList({report, transactions, reportActions,
                                 shouldUseNarrowLayout={shouldUseNarrowLayout || isMediumScreenWidth}
                                 shouldShowCheckbox={!!selectionMode?.isEnabled || isMediumScreenWidth}
                                 onCheckboxPress={toggleTransaction}
+                                columns={allReportColumns}
                             />
                         </PressableWithFeedback>
                     );

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,7 +124,7 @@ function ReportListItem<TItem extends ListItem>({
             hoverStyle={item.isSelected && styles.activeComponentBG}
             pressableWrapperStyle={[styles.mh5, animatedHighlightStyle]}
         >
-            {(hovered?: boolean) => (
+            {(hovered) => (
                 <View style={[styles.flex1]}>
                     <ReportListItemHeader
                         report={reportItem}
@@ -122,23 +148,23 @@ function ReportListItem<TItem extends ListItem>({
                         </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>
+                                <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>

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,23 @@
+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]}
+        />
+    );
+}
+
+TaxCell.displayName = 'TaxCell';
+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 '..';
 
 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();