[Better Expense Report View] Add TransactionPreview component

src/components/ReportActionItem/MoneyRequestAction.tsx

@@ -112,6 +112,10 @@ function MoneyRequestAction({
         }
         return <RenderHTML html={`<deleted-action ${CONST.REVERSED_TRANSACTION_ATTRIBUTE}="${isReversedTransaction}">${translate(message)}</deleted-action>`} />;
     }
+
+    // TODO: 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/TransactionPreviewContent.tsx

@@ -0,0 +1,288 @@
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import {DotIndicator, Folder, Tag} from '@components/Icon/Expensicons';
+import MoneyRequestSkeletonView from '@components/MoneyRequestSkeletonView';
+import MultipleAvatars from '@components/MultipleAvatars';
+import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
+import ReportActionItemImages from '@components/ReportActionItem/ReportActionItemImages';
+import UserInfoCellsWithArrow from '@components/SelectionList/Search/UserInfoCellsWithArrow';
+import Text from '@components/Text';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import ControlSelection from '@libs/ControlSelection';
+import {convertToDisplayString} from '@libs/CurrencyUtils';
+import {canUseTouchScreen} from '@libs/DeviceCapabilities';
+import {getCleanedTagName} from '@libs/PolicyUtils';
+import variables from '@styles/variables';
+import type {TransactionPreviewUIProps} from './types';
+
+function TransactionPreviewContent({
+    isDeleted,
+    isScanning,
+    isWhisper,
+    isHovered,
+    isSettled,
+    isBillSplit,
+    isApproved,
+    isSettlementOrApprovalPartial,
+    isReviewDuplicateTransactionPage,
+    shouldShowSkeleton,
+    shouldShowRBR,
+    shouldDisableOnPress,
+    shouldShowKeepButton,
+    shouldShowDescription,
+    shouldShowMerchant,
+    shouldShowCategory,
+    shouldShowTag,
+    displayAmount,
+    category,
+    showCashOrCard,
+    tag,
+    requestCurrency,
+    merchantOrDescription,
+    previewHeaderText,
+    requestAmount,
+    splitShare,
+    receiptImages,
+    sortedParticipantAvatars,
+    containerStyles,
+    walletTermsErrors,
+    pendingAction,
+    showContextMenu,
+    offlineWithFeedbackOnClose,
+    translate,
+    navigateToReviewFields,
+    onPreviewPressed,
+    RBRmessage,
+    from,
+    to,
+    isIOU,
+}: TransactionPreviewUIProps) {
+    const theme = useTheme();
+    const styles = useThemeStyles();
+
+    const themeStyles = useMemo(
+        () => [
+            {
+                backgroundColor: theme.cardBG,
+            },
+        ],
+        [theme.cardBG],
+    );
+
+    const shouldShowCategoryOrTag = shouldShowCategory || shouldShowTag;
+
+    const childContainer = (
+        <View>
+            <OfflineWithFeedback
+                errors={walletTermsErrors}
+                onClose={() => offlineWithFeedbackOnClose}
+                errorRowStyles={[styles.mbn1]}
+                needsOffscreenAlphaCompositing
+                pendingAction={pendingAction}
+                shouldDisableStrikeThrough={isDeleted}
+                shouldDisableOpacity={isDeleted}
+            >
+                <View
+                    style={[
+                        isScanning || isWhisper ? [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius] : undefined,
+                        !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles, themeStyles] : {},
+                    ]}
+                >
+                    {!isDeleted && (
+                        <ReportActionItemImages
+                            images={receiptImages}
+                            isHovered={isHovered || isScanning}
+                            size={1}
+                        />
+                    )}
+                    {shouldShowSkeleton ? (
+                        <MoneyRequestSkeletonView />
+                    ) : (
+                        <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
+                            <View style={styles.gap3}>
+                                <View style={styles.expenseAndReportPreviewTextContainer}>
+                                    {isIOU && !!from && !!to && (
+                                        <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
+                                            <UserInfoCellsWithArrow
+                                                styles={styles}
+                                                theme={theme}
+                                                shouldDisplayArrowIcon
+                                                participantFrom={from}
+                                                participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                                participantTo={to}
+                                                participantToDisplayName={to.displayName ?? to.login ?? ''}
+                                                avatarSize="subscript"
+                                            />
+                                        </View>
+                                    )}
+                                    <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        {isBillSplit && (
+                                            <View style={styles.moneyRequestPreviewBoxAvatar}>
+                                                <MultipleAvatars
+                                                    icons={sortedParticipantAvatars}
+                                                    shouldStackHorizontally
+                                                    size="subscript"
+                                                    shouldUseCardBackground
+                                                />
+                                            </View>
+                                        )}
+                                        {!isBillSplit && !shouldShowDescription && !shouldShowMerchant && (
+                                            <Text
+                                                fontSize={variables.fontSizeNormal}
+                                                style={[isDeleted && styles.lineThrough]}
+                                                numberOfLines={1}
+                                            >
+                                                {displayAmount}
+                                            </Text>
+                                        )}
+                                    </View>
+                                    <View>
+                                        <View style={[styles.flexRow]}>
+                                            <View
+                                                style={[
+                                                    styles.flex1,
+                                                    styles.flexRow,
+                                                    styles.alignItemsCenter,
+                                                    !shouldShowMerchant && !shouldShowDescription && isBillSplit ? styles.justifyContentEnd : styles.justifyContentBetween,
+                                                ]}
+                                            >
+                                                {(shouldShowMerchant || shouldShowDescription) && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {merchantOrDescription}
+                                                    </Text>
+                                                )}
+                                                {(shouldShowMerchant || shouldShowDescription || isBillSplit) && (
+                                                    <Text
+                                                        fontSize={variables.fontSizeNormal}
+                                                        style={[isDeleted && styles.lineThrough]}
+                                                        numberOfLines={1}
+                                                    >
+                                                        {displayAmount}
+                                                    </Text>
+                                                )}
+                                            </View>
+                                        </View>
+                                        <View style={[styles.flexRow, styles.justifyContentEnd]}>
+                                            {!!splitShare && (
+                                                <Text style={[styles.textLabel, styles.colorMuted, styles.amountSplitPadding]}>
+                                                    {translate('iou.yourSplit', {amount: convertToDisplayString(splitShare, requestCurrency)})}
+                                                </Text>
+                                            )}
+                                        </View>
+                                    </View>
+                                    {shouldShowCategoryOrTag && (
+                                        <View style={[styles.flexRow, styles.pt1, styles.alignItemsCenter]}>
+                                            {shouldShowCategory && (
+                                                <View
+                                                    style={[
+                                                        styles.flexRow,
+                                                        styles.alignItemsCenter,
+                                                        styles.gap1,
+                                                        shouldShowTag && styles.mw50,
+                                                        shouldShowTag && styles.pr1,
+                                                        styles.flexShrink1,
+                                                    ]}
+                                                >
+                                                    <Icon
+                                                        src={Folder}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {category}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                            {shouldShowTag && !!tag && (
+                                                <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.gap1, category && styles.pl1]}>
+                                                    <Icon
+                                                        src={Tag}
+                                                        height={variables.iconSizeExtraSmall}
+                                                        width={variables.iconSizeExtraSmall}
+                                                        fill={theme.icon}
+                                                    />
+                                                    <Text
+                                                        numberOfLines={1}
+                                                        style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1]}
+                                                    >
+                                                        {getCleanedTagName(tag)}
+                                                    </Text>
+                                                </View>
+                                            )}
+                                        </View>
+                                    )}
+                                </View>
+                                {!isSettled && shouldShowRBR && (
+                                    <View style={[styles.flexRow, styles.alignItemsCenter, styles.gap1]}>
+                                        <Icon
+                                            src={DotIndicator}
+                                            fill={theme.danger}
+                                            height={variables.iconSizeExtraSmall}
+                                            width={variables.iconSizeExtraSmall}
+                                        />
+                                        <Text
+                                            numberOfLines={1}
+                                            style={[styles.textMicroSupporting, styles.pre, styles.flexShrink1, {color: theme.danger}]}
+                                        >
+                                            {RBRmessage}
+                                        </Text>
+                                    </View>
+                                )}
+                            </View>
+                        </View>
+                    )}
+                </View>
+            </OfflineWithFeedback>
+        </View>
+    );
+
+    if (!onPreviewPressed) {
+        return childContainer;
+    }
+
+    return (
+        <PressableWithoutFeedback
+            onPress={shouldDisableOnPress ? undefined : onPreviewPressed}
+            onPressIn={() => canUseTouchScreen() && ControlSelection.block()}
+            onPressOut={() => ControlSelection.unblock()}
+            onLongPress={showContextMenu}
+            shouldUseHapticsOnLongPress
+            accessibilityLabel={isBillSplit ? translate('iou.split') : showCashOrCard}
+            accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
+            style={[
+                styles.moneyRequestPreviewBox,
+                containerStyles,
+                themeStyles,
+                shouldDisableOnPress && styles.cursorDefault,
+                (isSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,
+            ]}
+        >
+            {childContainer}
+            {isReviewDuplicateTransactionPage && !isSettled && !isApproved && shouldShowKeepButton && (
+                <Button
+                    text={translate('violations.keepThisOne')}
+                    success
+                    style={[styles.ph4, styles.pb2]}
+                    onPress={navigateToReviewFields}
+                />
+            )}
+        </PressableWithoutFeedback>
+    );
+}
+
+TransactionPreviewContent.displayName = 'TransactionPreviewContentUI';
+
+export default TransactionPreviewContent;

src/components/ReportActionItem/TransactionPreview/index.tsx

@@ -0,0 +1,71 @@
+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 useLocalize from '@hooks/useLocalize';
+import useTransactionPreviewData from '@hooks/useSingleExecution/useTransactionPreviewData';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getOriginalMessage, isMoneyRequestAction as isMoneyRequestActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import {navigateToReviewFields} from '@libs/TransactionPreviewUtils';
+import {removeSettledAndApprovedTransactions} from '@libs/TransactionUtils';
+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} = props;
+
+    const {translate} = useLocalize();
+    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);
+
+    // 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 areThereDuplicates = !!(allDuplicates.length && duplicates.length && allDuplicates.length === duplicates.length);
+
+    const transactionPreviewData = useTransactionPreviewData(props, translate, route, areThereDuplicates);
+
+    const showContextMenu = (event: GestureResponderEvent) => {
+        if (!shouldDisplayContextMenu) {
+            return;
+        }
+        showContextMenuForReport(event, contextMenuAnchor, reportID, action, checkIfContextMenuActive);
+    };
+
+    const offlineWithFeedbackOnClose = useCallback(() => {
+        clearWalletTermsError();
+        clearIOUError(chatReportID);
+    }, [chatReportID]);
+
+    const navigate = useCallback(() => {
+        navigateToReviewFields(route, report, transaction, duplicates);
+    }, [duplicates, report, route, transaction]);
+
+    return (
+        <TransactionPreviewContent
+            /* eslint-disable-next-line react/jsx-props-no-spreading */
+            {...transactionPreviewData}
+            pendingAction={action.pendingAction}
+            navigateToReviewFields={navigate}
+            showContextMenu={showContextMenu}
+            offlineWithFeedbackOnClose={offlineWithFeedbackOnClose}
+            translate={translate}
+        />
+    );
+}
+
+TransactionPreview.displayName = 'TransactionPreview';
+
+export default TransactionPreview;