Add One Transaction Report View

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -71,6 +71,9 @@ type MoneyRequestViewPropsWithoutTransaction = MoneyRequestViewOnyxPropsWithoutT
 
     /** Whether we should display the horizontal rule below the component */
     shouldShowHorizontalRule: boolean;
+
+    /** Whether we should display the animated banner above the component */
+    shouldShowAnimatedBackground: boolean;
 };
 
 type MoneyRequestViewProps = MoneyRequestViewTransactionOnyxProps & MoneyRequestViewPropsWithoutTransaction;
@@ -85,6 +88,7 @@ function MoneyRequestView({
     policyTagList,
     policy,
     transactionViolations,
+    shouldShowAnimatedBackground,
 }: MoneyRequestViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -239,9 +243,9 @@ function MoneyRequestView({
     );
 
     return (
-        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth)]}>
-            <AnimatedEmptyStateBackground />
-            <View style={[StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth)]}>
+        <View style={[StyleUtils.getReportWelcomeContainerStyle(isSmallScreenWidth, true, shouldShowAnimatedBackground)]}>
+            {shouldShowAnimatedBackground && <AnimatedEmptyStateBackground />}
+            <View style={shouldShowAnimatedBackground && [StyleUtils.getReportWelcomeTopMarginStyle(isSmallScreenWidth, true)]}>
                 {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}
                 {(showMapAsImage || hasReceipt) && (
                     <OfflineWithFeedback

src/libs/ReportActionsUtils.ts

@@ -525,6 +525,22 @@ function getSortedReportActionsForDisplay(reportActions: ReportActions | null, s
     return getSortedReportActions(baseURLAdjustedReportActions, true, shouldMarkTheFirstItemAsNewest);
 }
 
+/**
+ * This method returns a combined array of report actions from a parent report and child transaction thread report that
+ * are ready for display in the ReportActionView.
+ */
+function getCombinedReportActionsForDisplay(reportActions: ReportAction[], transactionThreadReportActions: ReportAction[]): ReportAction[] {
+
+    // Filter out the created action from the transaction thread report actions, since we already have the parent report's created action
+    const filteredTransactionThreadReportActions = transactionThreadReportActions?.filter(action => action.actionName !== CONST.REPORT.ACTIONS.TYPE.CREATED);
+
+    // Sort the combined list of parent report actions and transaction thread report actions
+    const sortedReportActions = getSortedReportActions([...reportActions, ...filteredTransactionThreadReportActions], true);
+
+    // Filter out IOU report actions because we don't want to show any preview actions for one transaction reports
+    return sortedReportActions.filter(action => action.actionName !== CONST.REPORT.ACTIONS.TYPE.IOU);
+}
+
 /**
  * In some cases, there can be multiple closed report actions in a chat report.
  * This method returns the last closed report action so we can always show the correct archived report reason.
@@ -693,6 +709,24 @@ function getAllReportActions(reportID: string): ReportActions {
     return allReportActions?.[reportID] ?? {};
 }
 
+/**
+ * Gets an array of IOU report actions
+ */
+function getIOUReportActions(reportID: string): ReportAction[] | null {
+    const reportActions = Object.values(getAllReportActions(reportID));
+    if (!reportActions.length) {
+        return null;
+    }
+
+    const iouRequestTypes: Array<ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>> = [CONST.IOU.REPORT_ACTION_TYPE.CREATE, CONST.IOU.REPORT_ACTION_TYPE.SPLIT];
+    const iouRequestActions = reportActions?.filter((action) => action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && iouRequestTypes.includes(action.originalMessage.type)) ?? [];
+
+    if (!iouRequestActions.length) {
+        return null;
+    }
+    return iouRequestActions;
+}
+
 /**
  * Check whether a report action is an attachment (a file, such as an image or a zip).
  *
@@ -892,6 +926,7 @@ function isCurrentActionUnread(report: Report | EmptyObject, reportAction: Repor
 export {
     extractLinksFromMessageHtml,
     getAllReportActions,
+    getIOUReportActions,
     getIOUReportIDFromReportActionPreview,
     getLastClosedReportAction,
     getLastVisibleAction,
@@ -906,6 +941,7 @@ export {
     getReportPreviewAction,
     getSortedReportActions,
     getSortedReportActionsForDisplay,
+    getCombinedReportActionsForDisplay,
     isConsecutiveActionMadeByPreviousActor,
     isCreatedAction,
     isCreatedTaskReportAction,

src/libs/ReportUtils.ts

@@ -1199,6 +1199,38 @@ function isMoneyRequestReport(reportOrID: OnyxEntry<Report> | string): boolean {
     return isIOUReport(report) || isExpenseReport(report);
 }
 
+/**
+ * Checks if a report has only one transaction associated with it
+ */
+function isOneTransactionReport(reportOrID: OnyxEntry<Report> | string): boolean {
+    const report = typeof reportOrID === 'object' ? reportOrID : allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null;
+
+    // Check the parent report (which would be the IOU or expense report if the passed report is an IOU or expense request)
+    // to see how many IOU report actions it contains
+    const iouReportActions = ReportActionsUtils.getIOUReportActions(report?.reportID ?? '');
+    return (iouReportActions?.length ?? 0) === 1;
+}
+
+/**
+ * Returns the reportID of the first transaction thread associated with a report
+ */
+function getOneTransactionThreadReportID(reportOrID: OnyxEntry<Report> | string): string | undefined {
+    const report = typeof reportOrID === 'object' ? reportOrID : allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null;
+
+    // Get all IOU report actions for the report.
+    const iouReportAction = ReportActionsUtils.getIOUReportActions(report?.reportID ?? '')?.find(reportAction => reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && reportAction.childReportID);
+    return iouReportAction ? String(iouReportAction.childReportID) : '0'
+}
+
+/**
+ * Checks if a report is a transaction thread associated with a report that has only one transaction
+ */
+function isOneTransactionThread(reportOrID: OnyxEntry<Report> | string): boolean {
+    const report = typeof reportOrID === 'object' ? reportOrID : allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null;
+    const parentReport = getParentReport(report);
+    return isOneTransactionReport(parentReport?.reportID ?? '');
+}
+
 /**
  * Should return true only for personal 1:1 report
  *
@@ -1604,6 +1636,11 @@ function getIcons(
         };
         const isPayer = currentUserAccountID === report?.managerID;
 
+        // For one transaction IOUs, display a simplified report icon
+        if (isOneTransactionReport(report)) {
+            return [ownerIcon];
+        }
+
         return isPayer ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon];
     }
 
@@ -3944,6 +3981,11 @@ function shouldReportBeInOptionList({
         return false;
     }
 
+    // If this is a transaction thread associated with a report that only has one transaction, omit it
+    if (isOneTransactionThread(report)) {
+        return false;
+    }
+
     // Include the currently viewed report. If we excluded the currently viewed report, then there
     // would be no way to highlight it in the options list and it would be confusing to users because they lose
     // a sense of context.
@@ -4388,6 +4430,10 @@ function shouldReportShowSubscript(report: OnyxEntry<Report>): boolean {
         return true;
     }
 
+    if (isExpenseReport(report) && isOneTransactionReport(report)) {
+        return true;
+    }
+
     if (isWorkspaceTaskReport(report)) {
         return true;
     }
@@ -5173,6 +5219,9 @@ export {
     hasSingleParticipant,
     getReportRecipientAccountIDs,
     isOneOnOneChat,
+    isOneTransactionReport,
+    getOneTransactionThreadReportID,
+    isOneTransactionThread,
     goBackToDetailsPage,
     getTransactionReportName,
     getTransactionDetails,

src/pages/home/ReportScreen.js

@@ -68,6 +68,9 @@ const propTypes = {
     /** All the report actions for this report */
     reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
 
+    /** The report actions for the first transaction thread associated with the report */
+    transactionThreadReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+
     /** The report's parentReportAction */
     parentReportAction: PropTypes.shape(reportActionPropTypes),
 
@@ -103,7 +106,8 @@ const propTypes = {
 
 const defaultProps = {
     isSidebarLoaded: false,
-    reportActions: {},
+    reportActions: [],
+    transactionThreadReportActions: [],
     parentReportAction: {},
     report: {},
     reportMetadata: {
@@ -143,6 +147,7 @@ function ReportScreen({
     report: reportProp,
     reportMetadata,
     reportActions,
+    transactionThreadReportActions,
     parentReportAction,
     accountManagerReportID,
     markReadyForHydration,
@@ -263,7 +268,6 @@ function ReportScreen({
     const {reportPendingAction, reportErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
     const screenWrapperStyle = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
     const isEmptyChat = useMemo(() => _.isEmpty(reportActions), [reportActions]);
-    // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
     const isLoadingInitialReportActions = _.isEmpty(reportActions) && reportMetadata.isLoadingInitialReportActions;
     const isOptimisticDelete = lodashGet(report, 'statusNum') === CONST.REPORT.STATUS_NUM.CLOSED;
     const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);
@@ -559,7 +563,7 @@ function ReportScreen({
                             >
                                 {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && (
                                     <ReportActionsView
-                                        reportActions={reportActions}
+                                        reportActions={_.isEmpty(transactionThreadReportActions) ? reportActions : ReportActionsUtils.getCombinedReportActionsForDisplay(reportActions, transactionThreadReportActions)}
                                         report={report}
                                         isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
                                         isLoadingNewerReportActions={reportMetadata.isLoadingNewerReportActions}
@@ -612,6 +616,15 @@ export default compose(
                 canEvict: false,
                 selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true),
             },
+            transactionThreadReportActions: {
+                key: ({route}) => {
+                    const reportID = getReportID(route);
+                    const transactionThreadReportID = reportID && ReportUtils.isOneTransactionReport(reportID) ? ReportUtils.getOneTransactionThreadReportID(reportID) : '0';
+                    return `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`
+                },
+                canEvict: false,
+                selector: (reportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(reportActions, true),
+            },
             report: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,
                 allowStaleData: true,
@@ -664,6 +677,7 @@ export default compose(
         (prevProps, nextProps) =>
             prevProps.isSidebarLoaded === nextProps.isSidebarLoaded &&
             _.isEqual(prevProps.reportActions, nextProps.reportActions) &&
+            _.isEqual(prevProps.transactionThreadReportActions, nextProps.transactionThreadReportActions) &&
             _.isEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
             prevProps.isComposerFullSize === nextProps.isComposerFullSize &&
             _.isEqual(prevProps.betas, nextProps.betas) &&

src/pages/home/report/ReportActionItem.js

@@ -62,6 +62,7 @@ import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import MiniReportActionContextMenu from './ContextMenu/MiniReportActionContextMenu';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
@@ -113,6 +114,9 @@ const propTypes = {
     /** IOU report for this action, if any */
     iouReport: reportPropTypes,
 
+    /** Single transaction thread associated with the report, if any */
+    transactionThreadReport: reportPropTypes,
+
     /** Flag to show, hide the thread divider line */
     shouldHideThreadDividerLine: PropTypes.bool,
 
@@ -132,6 +136,7 @@ const defaultProps = {
     emojiReactions: {},
     shouldShowSubscriptAvatar: false,
     iouReport: undefined,
+    transactionThreadReport: undefined,
     shouldHideThreadDividerLine: false,
     userWallet: {},
     parentReportActions: {},
@@ -658,6 +663,7 @@ function ReportActionItem(props) {
                     <MoneyRequestView
                         report={props.report}
                         shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
+                        shouldShowAnimatedBackground
                     />
                 </ShowContextMenuContext.Provider>
             );
@@ -700,6 +706,15 @@ function ReportActionItem(props) {
                         policyReportFields={_.values(props.policyReportFields)}
                         shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
                     />
+                    {props.transactionThreadReport && !isEmptyObject(props.transactionThreadReport) && (
+                        <ShowContextMenuContext.Provider value={contextValue}>
+                            <MoneyRequestView
+                                report={props.transactionThreadReport}
+                                shouldShowHorizontalRule={!props.shouldHideThreadDividerLine}
+                                shouldShowAnimatedBackground={false}
+                            />
+                        </ShowContextMenuContext.Provider>
+                    )}
                 </OfflineWithFeedback>
             );
         }
@@ -861,6 +876,13 @@ export default compose(
             },
             initialValue: {},
         },
+        transactionThreadReport: {
+            key: ({report}) => {
+                const transactionThreadReportID = ReportUtils.isOneTransactionReport(report) ? ReportUtils.getOneTransactionThreadReportID(report) : '';
+                return transactionThreadReportID ? `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}` : undefined;
+            },
+            initialValue: {},
+        },
         policyReportFields: {
             key: ({report}) => (report && 'policyID' in report ? `${ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS}${report.policyID}` : undefined),
             initialValue: [],
@@ -896,6 +918,7 @@ export default compose(
             _.isEqual(prevProps.report.pendingFields, nextProps.report.pendingFields) &&
             _.isEqual(prevProps.report.isDeletedParentAction, nextProps.report.isDeletedParentAction) &&
             _.isEqual(prevProps.report.errorFields, nextProps.report.errorFields) &&
+            _.isEqual(prevProps.transactionThreadReport, nextProps.transactionThreadReport) &&
             lodashGet(prevProps.report, 'statusNum') === lodashGet(nextProps.report, 'statusNum') &&
             lodashGet(prevProps.report, 'stateNum') === lodashGet(nextProps.report, 'stateNum') &&
             lodashGet(prevProps.report, 'parentReportID') === lodashGet(nextProps.report, 'parentReportID') &&

src/styles/utils/index.ts

@@ -756,21 +756,18 @@ function getLineHeightStyle(lineHeight: number): TextStyle {
 /**
  * Gets the correct size for the empty state container based on screen dimensions
  */
-function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyOrTaskReport = false): ViewStyle {
+function getReportWelcomeContainerStyle(isSmallScreenWidth: boolean, isMoneyOrTaskReport = false, shouldShowAnimatedBackground = true): ViewStyle {
     const emptyStateBackground = isMoneyOrTaskReport ? CONST.EMPTY_STATE_BACKGROUND.MONEY_OR_TASK_REPORT : CONST.EMPTY_STATE_BACKGROUND;
-    if (isSmallScreenWidth) {
-        return {
-            minHeight: emptyStateBackground.SMALL_SCREEN.CONTAINER_MINHEIGHT,
-            display: 'flex',
-            justifyContent: 'space-between',
-        };
-    }
-
-    return {
-        minHeight: emptyStateBackground.WIDE_SCREEN.CONTAINER_MINHEIGHT,
+    const baseStyles: ViewStyle = {
         display: 'flex',
         justifyContent: 'space-between',
     };
+
+    if (shouldShowAnimatedBackground) {
+        baseStyles.minHeight = isSmallScreenWidth ? emptyStateBackground.SMALL_SCREEN.CONTAINER_MINHEIGHT : emptyStateBackground.WIDE_SCREEN.CONTAINER_MINHEIGHT;
+    }
+
+    return baseStyles;
 }
 
 type GetBaseAutoCompleteSuggestionContainerStyleParams = {