[No QA] [Better Expense Report View] Add TransactionPreview component

.storybook/webpack.config.ts

@@ -58,6 +58,7 @@ const webpackConfig = ({config}: {config: Configuration}) => {
         'react-native$': 'react-native-web',
         '@react-native-community/netinfo': path.resolve(__dirname, '../__mocks__/@react-native-community/netinfo.ts'),
         '@react-navigation/native': path.resolve(__dirname, '../__mocks__/@react-navigation/native'),
+        '@libs/TransactionPreviewUtils': path.resolve(__dirname, '../src/libs/__mocks__/TransactionPreviewUtils.ts'),
         ...custom.resolve.alias,
     };
 

src/components/ReportActionItem/MoneyRequestAction.tsx

@@ -116,6 +116,10 @@ function MoneyRequestAction({
         }
         return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
     }
+
+    // NOTE: this part of code is needed here if we want to replace MoneyRequestPreview with TransactionPreview
+    // const renderCondition = lodashIsEmpty(iouReport) && !(isSplitBillAction || isTrackExpenseAction);
+    // return renderCondition ? null : (
     return (
         <MoneyRequestPreview
             iouReportID={requestReportID}

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -0,0 +1,80 @@
+import {useRoute} from '@react-navigation/native';
+import React, {useCallback, useMemo} from 'react';
+import type {GestureResponderEvent} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import {showContextMenuForReport} from '@components/ShowContextMenuContext';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import {getReviewNavigationRoute} from '@libs/TransactionPreviewUtils';
+import {removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
+import Navigation from '@navigation/Navigation';
+import type {PlatformStackRouteProp} from '@navigation/PlatformStackNavigation/types';
+import type {TransactionDuplicateNavigatorParamList} from '@navigation/types';
+import {clearWalletTermsError} from '@userActions/PaymentMethods';
+import {clearIOUError} from '@userActions/Report';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
+import TransactionPreviewContent from './TransactionPreviewContent';
+import type {TransactionPreviewProps} from './types';
+
+function TransactionPreview(props: TransactionPreviewProps) {
+    const {action, chatReportID, reportID, contextMenuAnchor, checkIfContextMenuActive = () => {}, shouldDisplayContextMenu, iouReportID} = props;
+
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`);
+    const route = useRoute<PlatformStackRouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params?.threadReportID}`);
+    const isMoneyRequestAction = isMoneyRequestActionReportActionsUtils(action);
+    const transactionID = isMoneyRequestAction ? getOriginalMessage(action)?.IOUTransactionID : null;
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const violations = useTransactionViolations(transaction?.transactionID);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
+    // Get transaction violations for given transaction id from onyx, find duplicated transactions violations and get duplicates
+    const allDuplicates = useMemo(() => violations?.find((violation) => violation.name === CONST.VIOLATIONS.DUPLICATED_TRANSACTION)?.data?.duplicates ?? [], [violations]);
+    const duplicates = useMemo(() => removeSettledAndApprovedTransactions(allDuplicates), [allDuplicates]);
+    const sessionAccountID = session?.accountID;
+    const areThereDuplicates = allDuplicates.length > 0 && duplicates.length > 0 && allDuplicates.length === duplicates.length;
+
+    const showContextMenu = (event: GestureResponderEvent) => {
+        if (!shouldDisplayContextMenu) {
+            return;
+        }
+        showContextMenuForReport(event, contextMenuAnchor, reportID, action, checkIfContextMenuActive);
+    };
+
+    const offlineWithFeedbackOnClose = useCallback(() => {
+        clearWalletTermsError();
+        clearIOUError(chatReportID);
+    }, [chatReportID]);
+
+    const navigateToReviewFields = useCallback(() => {
+        Navigation.navigate(getReviewNavigationRoute(route, report, transaction, duplicates));
+    }, [duplicates, report, route, transaction]);
+
+    return (
+        <TransactionPreviewContent
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...props}
+            chatReport={chatReport}
+            personalDetails={personalDetails}
+            iouReport={iouReport}
+            transaction={transaction}
+            violations={violations}
+            showContextMenu={showContextMenu}
+            offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
+            navigateToReviewFields={navigateToReviewFields}
+            areThereDuplicates={areThereDuplicates}
+            sessionAccountID={sessionAccountID}
+            walletTermsErrors={walletTerms?.errors}
+            routeName={route.name}
+        />
+    );
+}
+
+TransactionPreview.displayName = 'TransactionPreview';
+
+export default TransactionPreview;

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -0,0 +1,112 @@
+import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {PersonalDetailsList, Report, ReportAction, Transaction, TransactionViolations} from '@src/types/onyx';
+import type {Errors} from '@src/types/onyx/OnyxCommon';
+
+type TransactionPreviewProps = {
+    /** The active IOUReport, used for Onyx subscription */
+    iouReportID: string | undefined;
+
+    /** The associated chatReport */
+    chatReportID: string | undefined;
+
+    /** The ID of the current report */
+    reportID: string | undefined;
+
+    /** Callback for the preview pressed */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
+
+    /** All the data of the action, used for showing context menu */
+    action: ReportAction;
+
+    /** Popover context menu anchor, used for showing context menu */
+    contextMenuAnchor?: ContextMenuAnchor;
+
+    /** Callback for updating context menu active state, used for showing context menu */
+    checkIfContextMenuActive?: () => void;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** True if this IOU has a type of split */
+    isBillSplit: boolean;
+
+    /** Whether this IOU is a track expense */
+    isTrackExpense: boolean;
+
+    /** True if the IOU Preview card is hovered */
+    isHovered?: boolean;
+
+    /** Whether or not an IOU report contains expenses in a different currency
+     * that are either created or cancelled offline, and thus haven't been converted to the report's currency yet
+     */
+    shouldShowPendingConversionMessage?: boolean;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether  context menu should be shown on press */
+    shouldDisplayContextMenu?: boolean;
+};
+
+type TransactionPreviewContentProps = {
+    /** Function to display the context menu in response to an event. */
+    showContextMenu: (event: GestureResponderEvent) => void;
+
+    /** Handles the UI response and data clean-up when the transaction goes offline. */
+    offlineWithFeedbackOnClose: () => void;
+
+    /** Navigates the user to a separate view or component for reviewing or editing transaction fields. */
+    navigateToReviewFields: () => void;
+
+    /** General callback for handling presses on the preview component, can also handle keyboard events. */
+    onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent | undefined) => void;
+
+    /** Whether the transaction is whisper. */
+    isWhisper?: boolean;
+
+    /** Determines if the element is currently hovered over. */
+    isHovered?: boolean;
+
+    /** Optional custom styles to be applied to container components. */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** Records any errors related to wallet terms. */
+    walletTermsErrors: Errors | undefined;
+
+    /** Represents the IOU report entry from Onyx */
+    iouReport: OnyxEntry<Report>;
+
+    /** Flag to determine if a transaction involves a bill split among multiple parties. */
+    isBillSplit: boolean;
+
+    /** Holds the transaction data entry from Onyx */
+    transaction: OnyxEntry<Transaction>;
+
+    /** Represents the action entry from Onyx */
+    action: ReportAction;
+
+    /** Contains data about potential transaction violations */
+    violations: TransactionViolations;
+
+    /** Holds the chat report entry from Onyx */
+    chatReport?: Report;
+
+    /** Optional details about people involved in the transaction */
+    personalDetails?: PersonalDetailsList;
+
+    /** Indicates whether the transaction consists of duplicates */
+    areThereDuplicates: boolean;
+
+    /** Session account ID */
+    sessionAccountID?: number;
+
+    /** Name of the route where the transaction preview is being displayed */
+    routeName: string;
+
+    /** Determine whether to hide the component's children if deletion is pending */
+    shouldHideOnDelete?: boolean;
+};
+
+export type {TransactionPreviewProps, TransactionPreviewContentProps};

src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx

@@ -12,7 +12,7 @@ import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
 import variables from '@styles/variables';
 import type {SearchPersonalDetails, SearchTransactionAction} from '@src/types/onyx/SearchResults';
 import ActionCell from './ActionCell';
-import UserInfoCell from './UserInfoCell';
+import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
 
 type ExpenseItemHeaderNarrowProps = {
     text?: string;
@@ -77,26 +77,13 @@ function ExpenseItemHeaderNarrow({
                         </View>
                     </PressableWithFeedback>
                 )}
-                <View style={[styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantFrom}
-                        displayName={participantFromDisplayName}
-                    />
-                </View>
-                {!!shouldDisplayArrowIcon && (
-                    <Icon
-                        src={Expensicons.ArrowRightLong}
-                        width={variables.iconSizeXXSmall}
-                        height={variables.iconSizeXXSmall}
-                        fill={theme.icon}
-                    />
-                )}
-                <View style={[styles.flex1, styles.mw50]}>
-                    <UserInfoCell
-                        participant={participantTo}
-                        displayName={participantToDisplayName}
-                    />
-                </View>
+                <UserInfoCellsWithArrow
+                    shouldDisplayArrowIcon={!!shouldDisplayArrowIcon}
+                    participantFrom={participantFrom}
+                    participantFromDisplayName={participantFromDisplayName}
+                    participantTo={participantTo}
+                    participantToDisplayName={participantToDisplayName}
+                />
             </View>
             <View style={[StyleUtils.getWidthStyle(variables.w80)]}>
                 <ActionCell

src/components/SelectionList/Search/TransactionListItemRow.tsx

@@ -416,13 +416,15 @@ function TransactionListItemRow({
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
-                        participant={item.from}
+                        accountID={item.from.accountID}
+                        avatar={item.from.avatar}
                         displayName={item.formattedFrom}
                     />
                 </View>
                 <View style={[StyleUtils.getSearchTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.FROM)]}>
                     <UserInfoCell
-                        participant={item.to}
+                        accountID={item.to.accountID}
+                        avatar={item.to.avatar}
                         displayName={item.formattedTo}
                     />
                 </View>

src/components/SelectionList/Search/UserInfoCell.tsx

@@ -1,22 +1,27 @@
 import React from 'react';
+import type {TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Avatar from '@components/Avatar';
 import Text from '@components/Text';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {isCorrectSearchUserName} from '@libs/SearchUIUtils';
+import type {AvatarSource} from '@libs/UserUtils';
+import type {AvatarSizeName} from '@styles/utils';
 import CONST from '@src/CONST';
-import type {SearchPersonalDetails} from '@src/types/onyx/SearchResults';
 
 type UserInfoCellProps = {
-    participant: SearchPersonalDetails;
+    accountID: number;
+    avatar: AvatarSource | undefined;
     displayName: string;
+    avatarSize?: AvatarSizeName;
+    textStyle?: TextStyle;
+    avatarStyle?: ViewStyle;
 };
 
-function UserInfoCell({participant, displayName}: UserInfoCellProps) {
+function UserInfoCell({avatar, accountID, displayName, avatarSize, textStyle, avatarStyle}: UserInfoCellProps) {
     const styles = useThemeStyles();
     const {isLargeScreenWidth} = useResponsiveLayout();
-    const avatarURL = participant?.avatar;
 
     if (!isCorrectSearchUserName(displayName)) {
         return null;
@@ -26,16 +31,16 @@ function UserInfoCell({participant, displayName}: UserInfoCellProps) {
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
             <Avatar
                 imageStyles={[styles.alignSelfCenter]}
-                size={CONST.AVATAR_SIZE.MID_SUBSCRIPT}
-                source={avatarURL}
+                size={avatarSize ?? CONST.AVATAR_SIZE.MID_SUBSCRIPT}
+                source={avatar}
                 name={displayName}
                 type={CONST.ICON_TYPE_AVATAR}
-                avatarID={participant?.accountID}
-                containerStyles={[styles.pr2]}
+                avatarID={accountID}
+                containerStyles={[styles.pr2, avatarStyle]}
             />
             <Text
                 numberOfLines={1}
-                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1]}
+                style={[isLargeScreenWidth ? styles.themeTextColor : styles.textMicroBold, styles.flexShrink1, textStyle]}
             >
                 {displayName}
             </Text>