[Better Expense Report View] Expense Report Preview

src/components/MoneyReportHeader.tsx

@@ -31,6 +31,7 @@ import {
     isInvoiceReport,
     isReportApproved,
     isReportOwner,
+    isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
     navigateBackOnDeleteTransaction,
     reportTransactionsSelector,
 } from '@libs/ReportUtils';
@@ -363,10 +364,7 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
         (!!statusBarProps || shouldShowNextStep);
 
     // The submit button should be success green colour only if the user is the submitter and the policy does not have Scheduled Submit turned on
-    const isWaitingForSubmissionFromCurrentUser = useMemo(
-        () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
-        [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
-    );
+    const isWaitingForSubmissionFromCurrentUser = useMemo(() => isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy), [chatReport, policy]);
 
     const shouldDuplicateButtonBeSuccess = useMemo(
         () => isDuplicate && !shouldShowSettlementButton && !shouldShowExportIntegrationButton && !shouldShowSubmitButton && !shouldShowMarkAsCashButton,

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,107 @@
+import React, {useMemo, useState} from 'react';
+import type {LayoutChangeEvent, 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 [currentWidth, setCurrentWidth] = useState(256);
+    const reportPreviewStyles = useMemo(
+        () => StyleUtils.getMoneyRequestReportPreviewStyle(shouldUseNarrowLayout, currentWidth, transactions.length === 1),
+        [StyleUtils, currentWidth, shouldUseNarrowLayout, transactions.length],
+    );
+
+    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={reportPreviewStyles.transactionPreviewStyle}
+            containerStyles={[styles.h100, containerStyles]}
+            transactionID={item.transactionID}
+        />
+    );
+
+    return (
+        <MoneyRequestReportPreviewContent
+            containerStyles={[reportPreviewStyles.componentStyle, 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}
+            getCurrentWidth={(e: LayoutChangeEvent) => {
+                setCurrentWidth(e.nativeEvent.layout.width ?? 255);
+            }}
+            reportPreviewStyles={reportPreviewStyles}
+        />
+    );
+}
+
+MoneyRequestReportPreview.displayName = 'MoneyRequestReportPreview';
+
+export default MoneyRequestReportPreview;

src/components/ReportActionItem/MoneyRequestReportPreview/types.ts

@@ -0,0 +1,65 @@
+import type {LayoutChangeEvent, ListRenderItem, StyleProp, ViewStyle} from 'react-native';
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {TransactionPreviewStyleType} from '@components/ReportActionItem/TransactionPreview/types';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import type {PersonalDetails, Policy, Report, ReportAction, Transaction, TransactionViolation, TransactionViolations} from '@src/types/onyx';
+
+type MoneyRequestReportPreviewStyleType = {
+    flatListStyle: StyleProp<ViewStyle>;
+    wrapperStyle: ViewStyle;
+    contentContainerStyle: ViewStyle;
+    transactionPreviewStyle: TransactionPreviewStyleType;
+    componentStyle: StyleProp<ViewStyle>;
+};
+
+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>; getCurrentWidth: (e: LayoutChangeEvent) => void; reportPreviewStyles: MoneyRequestReportPreviewStyleType};
+
+export type {MoneyRequestReportPreviewContentProps, MoneyRequestReportPreviewProps, MoneyRequestReportPreviewStyleType};

src/components/ReportActionItem/ReportPreview.tsx

@@ -70,6 +70,7 @@ import {
     isReportOwner,
     isSettled,
     isTripRoom as isTripRoomReportUtils,
+    isWaitingForSubmissionFromCurrentUser as isWaitingForSubmissionFromCurrentUserReportUtils,
 } from '@libs/ReportUtils';
 import StringUtils from '@libs/StringUtils';
 import {
@@ -254,10 +255,7 @@ function ReportPreview({
     const shouldDisableSubmitButton = shouldShowSubmitButton && !isAllowedToSubmitDraftExpenseReport(iouReport);
 
     // The submit button should be success green colour only if the user is submitter and the policy does not have Scheduled Submit turned on
-    const isWaitingForSubmissionFromCurrentUser = useMemo(
-        () => chatReport?.isOwnPolicyExpenseChat && !policy?.harvesting?.enabled,
-        [chatReport?.isOwnPolicyExpenseChat, policy?.harvesting?.enabled],
-    );
+    const isWaitingForSubmissionFromCurrentUser = useMemo(() => isWaitingForSubmissionFromCurrentUserReportUtils(chatReport, policy), [chatReport, policy]);
 
     const {isDelegateAccessRestricted} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);

src/components/ReportActionItem/TransactionPreview/TransactionPreviewContent.tsx

@@ -5,13 +5,13 @@ 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 TransactionPreviewSkeletonView from '@components/TransactionPreviewSkeletonView';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -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 previewTextViewGap = (isBillSplit || shouldShowMerchantOrDescription || shouldShowCategoryOrTag) && styles.gap2;
+    const previewTextMargin = shouldShowIOUHeader && shouldShowMerchantOrDescription && !isBillSplit && !shouldShowCategoryOrTag && styles.mbn1;
+    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] : {},
                     ]}
                 >
@@ -200,27 +205,27 @@ function TransactionPreviewContent({
                         />
                     )}
                     {shouldShowSkeleton ? (
-                        <MoneyRequestSkeletonView />
+                        <TransactionPreviewSkeletonView transactionPreviewWidth={wrapperStyles.width} />
                     ) : (
                         <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={previewTextViewGap}>
                                     <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16]}>{previewHeaderText}</Text>
+                                        <Text style={[styles.textLabelSupporting, styles.flex1, styles.lh16, previewTextMargin]}>{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,