Merge pull request #36557 from dukenv0307/fix/34425

Display deleted request in transaction thread report
Expensify · Feb 20, 2024 · 7430c5f · 7430c5f
2 parents cb031ac + 487acdc
commit 7430c5f
Showing 1 changed file with 31 additions and 7 deletions.
diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
@@ -627,6 +627,28 @@ function ReportActionItem(props) {
     if (props.action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
         const parentReportAction = props.parentReportActions[props.report.parentReportActionID];
         if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
+            const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction);
+            if (ReportActionsUtils.isDeletedParentAction(parentReportAction) || isReversedTransaction) {
+                return (
+                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true), styles.justifyContentEnd]}>
+                        <AnimatedEmptyStateBackground />
+                        <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
+                            <OfflineWithFeedback pendingAction={lodashGet(parentReportAction, 'pendingAction', null)}>
+                                <ReportActionItemSingle
+                                    action={parentReportAction}
+                                    showHeader
+                                    report={props.report}
+                                >
+                                    <RenderHTML
+                                        html={`<comment>${props.translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}</comment>`}
+                                    />
+                                </ReportActionItemSingle>
+                                <View style={styles.threadDividerLine} />
+                            </OfflineWithFeedback>
+                        </View>
+                    </View>
+                );
+            }
             return (
                 <ShowContextMenuContext.Provider value={contextValue}>
                     <MoneyRequestView
@@ -639,7 +661,7 @@ function ReportActionItem(props) {
         if (ReportUtils.isTaskReport(props.report)) {
             if (ReportUtils.isCanceledTaskReport(props.report, parentReportAction)) {
                 return (
-                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
+                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)]}>
                         <AnimatedEmptyStateBackground />
                         <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
                             <ReportActionItemSingle
@@ -649,7 +671,6 @@ function ReportActionItem(props) {
                             >
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
                             </ReportActionItemSingle>
-                            <View style={styles.reportHorizontalRule} />
                         </View>
                     </View>
                 );
@@ -857,9 +878,10 @@ export default compose(
         },
     }),
 )(
-    memo(
-        ReportActionItem,
-        (prevProps, nextProps) =>
+    memo(ReportActionItem, (prevProps, nextProps) => {
+        const prevParentReportAction = prevProps.parentReportActions[prevProps.report.parentReportActionID];
+        const nextParentReportAction = nextProps.parentReportActions[nextProps.report.parentReportActionID];
+        return (
             prevProps.displayAsGroup === nextProps.displayAsGroup &&
             prevProps.draftMessage === nextProps.draftMessage &&
             prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction &&
@@ -888,6 +910,8 @@ export default compose(
             prevProps.linkedReportActionID === nextProps.linkedReportActionID &&
             _.isEqual(prevProps.policyReportFields, nextProps.policyReportFields) &&
             _.isEqual(prevProps.report.reportFields, nextProps.report.reportFields) &&
-            _.isEqual(prevProps.policy, nextProps.policy),
-    ),
+            _.isEqual(prevProps.policy, nextProps.policy) &&
+            _.isEqual(prevParentReportAction, nextParentReportAction)
+        );
+    }),
 );