[Better Expense Report View] Expense Report Preview

src/components/MoneyRequestSkeletonView.tsx

@@ -10,6 +10,7 @@ function MoneyRequestSkeletonView() {
     const styles = useThemeStyles();
     return (
         <SkeletonViewContentLoader
+            testID={MoneyRequestSkeletonView.displayName}
             animate
             width={styles.w100.width}
             height={variables.moneyRequestSkeletonHeight}

src/components/ReportActionItem/MoneyRequestReportPreview/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import type {ListRenderItem} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import TransactionPreview from '@components/ReportActionItem/TransactionPreview';
+import useDelegateUserDetails from '@hooks/useDelegateUserDetails';
+import usePolicy from '@hooks/usePolicy';
+import useReportWithTransactionsAndViolations from '@hooks/useReportWithTransactionsAndViolations';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useTransactionViolations from '@hooks/useTransactionViolations';
+import {getIOUActionForReportID, isSplitBillAction as isSplitBillActionReportActionsUtils, isTrackExpenseAction as isTrackExpenseActionReportActionsUtils} from '@libs/ReportActionsUtils';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Transaction} from '@src/types/onyx';
+import MoneyRequestReportPreviewContent from './MoneyRequestReportPreviewContent';
+import type {MoneyRequestReportPreviewProps} from './types';
+
+function MoneyRequestReportPreview({
+    iouReportID,
+    policyID,
+    chatReportID,
+    action,
+    containerStyles,
+    contextMenuAnchor,
+    isHovered = false,
+    isWhisper = false,
+    checkIfContextMenuActive = () => {},
+    onPaymentOptionsShow,
+    onPaymentOptionsHide,
+}: MoneyRequestReportPreviewProps) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`);
+    const [invoiceReceiverPolicy] = useOnyx(
+        `${ONYXKEYS.COLLECTION.POLICY}${chatReport?.invoiceReceiver && 'policyID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.policyID : CONST.DEFAULT_NUMBER_ID}`,
+    );
+    const [invoiceReceiverPersonalDetail] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {
+        selector: (personalDetails) =>
+            personalDetails?.[chatReport?.invoiceReceiver && 'accountID' in chatReport.invoiceReceiver ? chatReport.invoiceReceiver.accountID : CONST.DEFAULT_NUMBER_ID],
+    });
+    const [iouReport, transactions, violations] = useReportWithTransactionsAndViolations(iouReportID);
+    const policy = usePolicy(policyID);
+    const lastTransaction = transactions?.at(0);
+    const lastTransactionViolations = useTransactionViolations(lastTransaction?.transactionID);
+    const {isDelegateAccessRestricted} = useDelegateUserDetails();
+    const isTrackExpenseAction = isTrackExpenseActionReportActionsUtils(action);
+    const isSplitBillAction = isSplitBillActionReportActionsUtils(action);
+    const style = StyleUtils.getMoneyRequestReportPreviewStyle(transactions.length, shouldUseNarrowLayout);
+
+    const renderItem: ListRenderItem<Transaction> = ({item}) => (
+        <TransactionPreview
+            chatReportID={chatReportID}
+            action={getIOUActionForReportID(item.reportID, item.transactionID)}
+            reportID={item.reportID}
+            isBillSplit={isSplitBillAction}
+            isTrackExpense={isTrackExpenseAction}
+            contextMenuAnchor={contextMenuAnchor}
+            isWhisper={isWhisper}
+            isHovered={isHovered}
+            iouReportID={iouReportID}
+            onPreviewPressed={() => {}}
+            wrapperStyles={style.transaction}
+            containerStyles={[styles.h100, containerStyles]}
+        />
+    );
+
+    return (
+        <MoneyRequestReportPreviewContent
+            containerStyles={[style.preview, containerStyles]}
+            contextMenuAnchor={contextMenuAnchor}
+            isHovered={isHovered}
+            isWhisper={isWhisper}
+            checkIfContextMenuActive={checkIfContextMenuActive}
+            onPaymentOptionsShow={onPaymentOptionsShow}
+            onPaymentOptionsHide={onPaymentOptionsHide}
+            action={action}
+            chatReportID={chatReportID}
+            iouReportID={iouReportID}
+            policyID={undefined}
+            iouReport={iouReport}
+            transactions={transactions}
+            violations={violations}
+            chatReport={chatReport}
+            policy={policy}
+            invoiceReceiverPersonalDetail={invoiceReceiverPersonalDetail}
+            invoiceReceiverPolicy={invoiceReceiverPolicy}
+            lastTransactionViolations={lastTransactionViolations}
+            isDelegateAccessRestricted={isDelegateAccessRestricted}
+            renderItem={renderItem}
+        />
+    );
+}
+
+MoneyRequestReportPreview.displayName = 'MoneyRequestReportPreview';
+
+export default MoneyRequestReportPreview;

src/components/ReportActionItem/MoneyRequestReportPreview/types.ts

@@ -0,0 +1,55 @@
+import type {ListRenderItem, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
+
+type MoneyRequestReportPreviewProps = {
+    /** The report's policyID, used for Onyx subscription */
+    policyID: string | undefined;
+
+    /** All the data of the action */
+    action: ReportAction;
+
+    /** The associated chatReport */
+    chatReportID: string | undefined;
+
+    /** The active IOUReport, used for Onyx subscription */
+    iouReportID: string | undefined;
+
+    /** Extra styles to pass to View wrapper */
+    containerStyles?: StyleProp<ViewStyle>;
+
+    /** 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;
+
+    /** Callback when the payment options popover is shown */
+    onPaymentOptionsShow?: () => void;
+
+    /** Callback when the payment options popover is closed */
+    onPaymentOptionsHide?: () => void;
+
+    /** Whether a message is a whisper */
+    isWhisper?: boolean;
+
+    /** Whether the corresponding report action item is hovered */
+    isHovered?: boolean;
+};
+
+type MoneyRequestReportPreviewContentOnyxProps = {
+    chatReport: OnyxEntry<Report>;
+    invoiceReceiverPolicy: OnyxEntry<Policy>;
+    iouReport: OnyxEntry<Report>;
+    transactions: Transaction[];
+    violations: OnyxCollection<TransactionViolation[]>;
+    policy: OnyxEntry<Policy>;
+    invoiceReceiverPersonalDetail: OnyxEntry<PersonalDetails>;
+    lastTransactionViolations: TransactionViolations;
+    isDelegateAccessRestricted: boolean;
+};
+
+type MoneyRequestReportPreviewContentProps = MoneyRequestReportPreviewContentOnyxProps & MoneyRequestReportPreviewProps & {renderItem: ListRenderItem<Transaction> | null | undefined};
+
+export type {MoneyRequestReportPreviewContentProps, MoneyRequestReportPreviewProps};

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -49,6 +49,7 @@ function TransactionPreviewContent({
     navigateToReviewFields,
     onPreviewPressed,
     containerStyles,
+    wrapperStyles,
     isBillSplit,
     areThereDuplicates,
     sessionAccountID,
@@ -159,12 +160,12 @@ function TransactionPreviewContent({
         () =>
             shouldShowSplitShare
                 ? transaction?.comment?.splits?.find((split) => split.accountID === sessionAccountID)?.amount ??
-                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action.actorAccountID === sessionAccountID)
+                  calculateAmount(isReportAPolicyExpenseChat ? 1 : participantAccountIDs.length - 1, requestAmount ?? 0, requestCurrency ?? '', action?.actorAccountID === sessionAccountID)
                 : 0,
         [
             shouldShowSplitShare,
             isReportAPolicyExpenseChat,
-            action.actorAccountID,
+            action?.actorAccountID,
             participantAccountIDs.length,
             transaction?.comment?.splits,
             requestAmount,
@@ -173,8 +174,12 @@ function TransactionPreviewContent({
         ],
     );
 
+    const shouldAddGapToPreviewText = isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag;
+    const shouldAddMbn1ToPreviewText = shouldShowIOUHeader && shouldShowMerchantOrDescription && !isBillSplit && !shouldShowCategoryOrTag;
+    const shouldWrapDisplayAmount = !(shouldShowMerchantOrDescription || isBillSplit);
+
     const transactionContent = (
-        <View style={[styles.border, styles.reportContainerBorderRadius]}>
+        <View style={[styles.border, styles.reportContainerBorderRadius, containerStyles]}>
             <OfflineWithFeedback
                 errors={walletTermsErrors}
                 onClose={() => offlineWithFeedbackOnClose}
@@ -187,7 +192,7 @@ function TransactionPreviewContent({
             >
                 <View
                     style={[
-                        isScanning || isWhisper ? [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius] : undefined,
+                        (isScanning || isWhisper) && [styles.reportPreviewBoxHoverBorder, styles.reportContainerBorderRadius],
                         !onPreviewPressed ? [styles.moneyRequestPreviewBox, containerStyles, themeStyles] : {},
                     ]}
                 >
@@ -204,23 +209,23 @@ function TransactionPreviewContent({
                     ) : (
                         <View style={[styles.expenseAndReportPreviewBoxBody, styles.mtn1]}>
                             <View style={styles.gap3}>
-                                <View style={isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag ? styles.gap2 : {}}>
-                                    {shouldShowIOUHeader && (
-                                        <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
-                                            <UserInfoCellsWithArrow
-                                                shouldDisplayArrowIcon
-                                                participantFrom={from}
-                                                participantFromDisplayName={from.displayName ?? from.login ?? ''}
-                                                participantTo={to}
-                                                participantToDisplayName={to.displayName ?? to.login ?? ''}
-                                                avatarSize="mid-subscript"
-                                                infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
-                                                infoCellsAvatarStyle={styles.pr1}
-                                            />
-                                        </View>
-                                    )}
+                                {shouldShowIOUHeader && (
+                                    <View style={[styles.flex1, styles.dFlex, styles.alignItemsCenter, styles.gap2, styles.flexRow]}>
+                                        <UserInfoCellsWithArrow
+                                            shouldDisplayArrowIcon
+                                            participantFrom={from}
+                                            participantFromDisplayName={from.displayName ?? from.login ?? ''}
+                                            participantTo={to}
+                                            participantToDisplayName={to.displayName ?? to.login ?? ''}
+                                            avatarSize="mid-subscript"
+                                            infoCellsTextStyle={{...styles.textMicroBold, lineHeight: 14}}
+                                            infoCellsAvatarStyle={styles.pr1}
+                                        />
+                                    </View>
+                                )}
+                                <View style={shouldAddGapToPreviewText && styles.gap2}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16, shouldAddMbn1ToPreviewText && styles.mbn1]}>{previewHeaderText}</Text>
                                         {isBillSplit && (
                                             <View style={styles.moneyRequestPreviewBoxAvatar}>
                                                 <MultipleAvatars
@@ -231,7 +236,7 @@ function TransactionPreviewContent({
                                                 />
                                             </View>
                                         )}
-                                        {!isBillSplit && !shouldShowMerchantOrDescription && (
+                                        {shouldWrapDisplayAmount && (
                                             <Text
                                                 fontSize={variables.fontSizeNormal}
                                                 style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
@@ -260,7 +265,7 @@ function TransactionPreviewContent({
                                                         {merchantOrDescription}
                                                     </Text>
                                                 )}
-                                                {(shouldShowMerchant || shouldShowDescription || isBillSplit) && (
+                                                {!shouldWrapDisplayAmount && (
                                                     <Text
                                                         fontSize={variables.fontSizeNormal}
                                                         style={[isDeleted && styles.lineThrough, styles.flexShrink0]}
@@ -364,7 +369,7 @@ function TransactionPreviewContent({
             accessibilityHint={convertToDisplayString(requestAmount, requestCurrency)}
             style={[
                 styles.moneyRequestPreviewBox,
-                containerStyles,
+                wrapperStyles,
                 themeStyles,
                 shouldDisableOnPress && styles.cursorDefault,
                 (isIOUSettled || isApproved) && isSettlementOrApprovalPartial && styles.offlineFeedback.pending,

src/components/ReportActionItem/TransactionPreview/types.ts

@@ -18,17 +18,20 @@ type TransactionPreviewProps = {
     onPreviewPressed: (event?: GestureResponderEvent | KeyboardEvent) => void;
 
     /** All the data of the action, used for showing context menu */
-    action: ReportAction;
+    action: OnyxEntry<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 */
+    /** Optional custom styles to be applied to container component. */
     containerStyles?: StyleProp<ViewStyle>;
 
+    /** Optional custom styles to be applied to wrapper component. */
+    wrapperStyles?: StyleProp<ViewStyle>;
+
     /** True if this IOU has a type of split */
     isBillSplit: boolean;
 
@@ -69,9 +72,12 @@ type TransactionPreviewContentProps = {
     /** Determines if the element is currently hovered over. */
     isHovered?: boolean;
 
-    /** Optional custom styles to be applied to container components. */
+    /** Optional custom styles to be applied to container component. */
     containerStyles?: StyleProp<ViewStyle>;
 
+    /** Optional custom styles to be applied to wrapper component. */
+    wrapperStyles?: StyleProp<ViewStyle>;
+
     /** Records any errors related to wallet terms. */
     walletTermsErrors: Errors | undefined;
 
@@ -85,7 +91,7 @@ type TransactionPreviewContentProps = {
     transaction: OnyxEntry<Transaction>;
 
     /** Represents the action entry from Onyx */
-    action: ReportAction;
+    action: OnyxEntry<ReportAction>;
 
     /** Contains data about potential transaction violations */
     violations: TransactionViolations;

src/libs/TransactionPreviewUtils.ts

@@ -123,7 +123,7 @@ function getTransactionPreviewTextAndTranslationPaths({
 }: {
     iouReport: OnyxEntry<OnyxTypes.Report>;
     transaction: OnyxEntry<OnyxTypes.Transaction>;
-    action: OnyxTypes.ReportAction;
+    action: OnyxEntry<OnyxTypes.ReportAction>;
     violations: OnyxTypes.TransactionViolations;
     transactionDetails: Partial<TransactionDetails>;
     isBillSplit: boolean;
@@ -256,7 +256,7 @@ function createTransactionPreviewConditionals({
 }: {
     iouReport: OnyxInputValue<OnyxTypes.Report> | undefined;
     transaction: OnyxEntry<OnyxTypes.Transaction> | undefined;
-    action: OnyxTypes.ReportAction;
+    action: OnyxEntry<OnyxTypes.ReportAction>;
     violations: OnyxTypes.TransactionViolations;
     transactionDetails: Partial<TransactionDetails>;
     isBillSplit: boolean;
@@ -284,7 +284,7 @@ function createTransactionPreviewConditionals({
     const isFullyApproved = isApproved && !isSettlementOrApprovalPartial;
 
     const shouldDisableOnPress = isBillSplit && isEmptyObject(transaction);
-    const shouldShowSkeleton = isEmptyObject(transaction) && !isMessageDeleted(action) && action.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
+    const shouldShowSkeleton = isEmptyObject(transaction) && !isMessageDeleted(action) && action?.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
     const shouldShowTag = !!tag && isReportAPolicyExpenseChat;
     const shouldShowCategory = !!category && isReportAPolicyExpenseChat;