Add One Transaction Report View

src/components/ReportActionItem/MoneyRequestView.tsx

@@ -70,6 +70,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;
@@ -84,6 +87,7 @@ function MoneyRequestView({
     policyTagList,
     policy,
     transactionViolations,
+    shouldShowAnimatedBackground,
 }: MoneyRequestViewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -235,9 +239,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

@@ -213,6 +213,32 @@ function isTransactionThread(parentReportAction: OnyxEntry<ReportAction>): boole
     );
 }
 
+function getOneTransactionThreadReportID(reportActions: OnyxEntry<ReportActions>): string {
+    const reportActionsArray = Object.values(reportActions ?? {});
+
+    if (!reportActionsArray.length) {
+        return '0';
+    }
+
+    // Get all IOU report actions for the report.
+    const iouRequestTypes: Array<ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>> = [CONST.IOU.REPORT_ACTION_TYPE.CREATE, CONST.IOU.REPORT_ACTION_TYPE.SPLIT];
+    const iouRequestActions = reportActionsArray.filter(
+        (action) =>
+            action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU &&
+            (iouRequestTypes.includes(action.originalMessage.type) ?? []) &&
+            action.childReportID &&
+            action.originalMessage.IOUTransactionID,
+    );
+
+    // If we don't have any IOU request actions, or we have more than one IOU request actions, this isn't a oneTransaction report and we don't want to return the transactionThreadReportActions
+    if (!iouRequestActions.length || iouRequestActions.length > 1) {
+        return '0';
+    }
+
+    // Ensure we have a childReportID associated with the IOU report action
+    return String(iouRequestActions[0].childReportID);
+}
+
 /**
  * Sort an array of reportActions by their created timestamp first, and reportActionID second
  * This gives us a stable order even in the case of multiple reportActions created on the same millisecond
@@ -532,6 +558,21 @@ function getSortedReportActionsForDisplay(reportActions: ReportActions | ReportA
     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 "created" IOU report actions because we don't want to show any preview actions for one transaction reports
+    return sortedReportActions.filter((action) => ((action as OriginalMessageIOU).originalMessage?.type ?? '') !== CONST.IOU.REPORT_ACTION_TYPE.CREATE);
+}
+
 /**
  * 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.
@@ -922,6 +963,7 @@ function getReportActionMessageText(reportAction: OnyxEntry<ReportAction> | Empt
 
 export {
     extractLinksFromMessageHtml,
+    getOneTransactionThreadReportID,
     getAllReportActions,
     getIOUReportIDFromReportActionPreview,
     getLastClosedReportAction,
@@ -939,6 +981,7 @@ export {
     getReportPreviewAction,
     getSortedReportActions,
     getSortedReportActionsForDisplay,
+    getCombinedReportActionsForDisplay,
     isConsecutiveActionMadeByPreviousActor,
     isCreatedAction,
     isCreatedTaskReportAction,

src/libs/ReportUtils.ts

@@ -1235,6 +1235,23 @@ 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(reportID: string): boolean {
+    const reportActions = ReportActionsUtils.getAllReportActions(reportID);
+    return ReportActionsUtils.getOneTransactionThreadReportID(reportActions) !== '0';
+}
+
+/**
+ * Checks if a report is a transaction thread associated with a report that has only one transaction
+ */
+function isOneTransactionThread(reportID: string, parentReportID: string): boolean {
+    const parentReportActions = ReportActionsUtils.getAllReportActions(parentReportID);
+    const transactionThreadReportID = ReportActionsUtils.getOneTransactionThreadReportID(parentReportActions);
+    return reportID === transactionThreadReportID;
+}
+
 /**
  * Should return true only for personal 1:1 report
  *
@@ -1683,6 +1700,11 @@ function getIcons(
         };
         const isManager = currentUserAccountID === report?.managerID;
 
+        // For one transaction IOUs, display a simplified report icon
+        if (isOneTransactionReport(report?.reportID ?? '0')) {
+            return [ownerIcon];
+        }
+
         return isManager ? [managerIcon, ownerIcon] : [ownerIcon, managerIcon];
     }
 
@@ -4101,6 +4123,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.reportID, report.parentReportID ?? '0')) {
+        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.
@@ -4553,6 +4580,10 @@ function shouldReportShowSubscript(report: OnyxEntry<Report>): boolean {
         return true;
     }
 
+    if (isExpenseReport(report) && isOneTransactionReport(report?.reportID ?? '')) {
+        return true;
+    }
+
     if (isWorkspaceTaskReport(report)) {
         return true;
     }
@@ -5337,6 +5368,8 @@ export {
     hasSingleParticipant,
     getReportRecipientAccountIDs,
     isOneOnOneChat,
+    isOneTransactionReport,
+    isOneTransactionThread,
     isPayer,
     goBackToDetailsPage,
     getTransactionReportName,

src/pages/home/ReportScreen.js

@@ -65,8 +65,11 @@
     /** The report metadata loading states */
     reportMetadata: reportMetadataPropTypes,
 
+    /** All the report actions stored in Onyx */
+    allReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+
     /** All the report actions for this report */
-    reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+    reportActions: PropTypes.arrayOf(PropTypes.shape(reportActionPropTypes)),
 
     /** The report's parentReportAction */
     parentReportAction: PropTypes.shape(reportActionPropTypes),
@@ -103,7 +106,9 @@
 
 const defaultProps = {
     isSidebarLoaded: false,
-    reportActions: {},
+    reportActions: [],
+    allReportActions: {},
+    transactionThreadReportActions: [],
     parentReportAction: {},
     report: {},
     reportMetadata: {
@@ -142,6 +147,7 @@
     route,
     report: reportProp,
     reportMetadata,
+    allReportActions,
     reportActions,
     parentReportAction,
     accountManagerReportID,
@@ -263,7 +269,6 @@
     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);
@@ -280,6 +285,15 @@
     const policy = policies[`${ONYXKEYS.COLLECTION.POLICY}${report.policyID}`] || {};
     const isTopMostReportId = currentReportID === getReportID(route);
     const didSubscribeToReportLeavingEvents = useRef(false);
+    const transactionThreadReportID = ReportActionsUtils.getOneTransactionThreadReportID(allReportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`]);
+    const transactionThreadReportActions = useMemo(() => {
+        if (transactionThreadReportID === '0') {
+            return [];
+        }
+
+        const reportActions = allReportActions[`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${transactionThreadReportID}`] ?? [];
+        return ReportActionsUtils.getSortedReportActionsForDisplay(reportActions);
+    }, [allReportActions, transactionThreadReportID]);
 
     useEffect(() => {
         if (!report.reportID || shouldHideReport) {
@@ -559,7 +573,11 @@
                             >
                                 {isReportReadyForDisplay && !isLoadingInitialReportActions && !isLoading && (
                                     <ReportActionsView
-                                        reportActions={reportActions}
+                                        reportActions={
+                                            _.isEmpty(transactionThreadReportActions)
+                                                ? reportActions
+                                                : ReportActionsUtils.getCombinedReportActionsForDisplay(reportActions, transactionThreadReportActions)
+                                        }
                                         report={report}
                                         parentReportAction={parentReportAction}
                                         isLoadingInitialReportActions={reportMetadata.isLoadingInitialReportActions}
@@ -608,6 +626,9 @@
             isSidebarLoaded: {
                 key: ONYXKEYS.IS_SIDEBAR_LOADED,
             },
+            allReportActions: {
+                key: ONYXKEYS.COLLECTION.REPORT_ACTIONS,
+            },
             reportActions: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
                 canEvict: false,
@@ -664,6 +685,7 @@
         ReportScreen,
         (prevProps, nextProps) =>
             prevProps.isSidebarLoaded === nextProps.isSidebarLoaded &&
+            _.isEqual(prevProps.allReportActions, nextProps.allReportActions) &&
             _.isEqual(prevProps.reportActions, nextProps.reportActions) &&
             _.isEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
             prevProps.isComposerFullSize === nextProps.isComposerFullSize &&