From 1bc4aa5fe8c1bc55aa39c0994dfb76451eab68fc Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 15 Feb 2024 10:54:38 +0700
Subject: [PATCH 1/3] display deleted request in transaction thread report

---
 src/pages/home/report/ReportActionItem.js | 37 +++++++++++++++++++----
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 39a5fcaa4ee0..d2f3c4584fd0 100644
--- 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)]}>
+                        <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>
+                            </OfflineWithFeedback>
+                        </View>
+                        <View style={styles.threadDividerLine} />
+                    </View>
+                );
+            }
             return (
                 <ShowContextMenuContext.Provider value={contextValue}>
                     <MoneyRequestView
@@ -649,8 +671,8 @@ function ReportActionItem(props) {
                             >
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
                             </ReportActionItemSingle>
-                            <View style={styles.reportHorizontalRule} />
                         </View>
+                        <View style={styles.reportHorizontalRule} />
                     </View>
                 );
             }
@@ -857,9 +879,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 +911,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)
+        );
+    }),
 );

From 97b59c265019503526e9270ee5b80192fc0e3e10 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 15 Feb 2024 11:03:37 +0700
Subject: [PATCH 2/3] remove divider line

---
 src/pages/home/report/ReportActionItem.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index d2f3c4584fd0..1fa2b0a70b19 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -630,7 +630,7 @@ function ReportActionItem(props) {
             const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction);
             if (ReportActionsUtils.isDeletedParentAction(parentReportAction) || isReversedTransaction) {
                 return (
-                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth)]}>
+                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
                         <AnimatedEmptyStateBackground />
                         <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
                             <OfflineWithFeedback pendingAction={lodashGet(parentReportAction, 'pendingAction', null)}>
@@ -645,7 +645,6 @@ function ReportActionItem(props) {
                                 </ReportActionItemSingle>
                             </OfflineWithFeedback>
                         </View>
-                        <View style={styles.threadDividerLine} />
                     </View>
                 );
             }

From 487acdcee0ce9971ecaf75f1da4eaff8a0d9afb2 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 19 Feb 2024 11:55:53 +0700
Subject: [PATCH 3/3] add divider line

---
 src/pages/home/report/ReportActionItem.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js
index 1fa2b0a70b19..e676c83c8b9b 100644
--- a/src/pages/home/report/ReportActionItem.js
+++ b/src/pages/home/report/ReportActionItem.js
@@ -630,7 +630,7 @@ function ReportActionItem(props) {
             const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction);
             if (ReportActionsUtils.isDeletedParentAction(parentReportAction) || isReversedTransaction) {
                 return (
-                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true)]}>
+                    <View style={[StyleUtils.getReportWelcomeContainerStyle(props.isSmallScreenWidth, true), styles.justifyContentEnd]}>
                         <AnimatedEmptyStateBackground />
                         <View style={[StyleUtils.getReportWelcomeTopMarginStyle(props.isSmallScreenWidth)]}>
                             <OfflineWithFeedback pendingAction={lodashGet(parentReportAction, 'pendingAction', null)}>
@@ -643,6 +643,7 @@ function ReportActionItem(props) {
                                         html={`<comment>${props.translate(isReversedTransaction ? 'parentReportAction.reversedTransaction' : 'parentReportAction.deletedRequest')}</comment>`}
                                     />
                                 </ReportActionItemSingle>
+                                <View style={styles.threadDividerLine} />
                             </OfflineWithFeedback>
                         </View>
                     </View>
@@ -660,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
@@ -671,7 +672,6 @@ function ReportActionItem(props) {
                                 <RenderHTML html={`<comment>${props.translate('parentReportAction.deletedTask')}</comment>`} />
                             </ReportActionItemSingle>
                         </View>
-                        <View style={styles.reportHorizontalRule} />
                     </View>
                 );
             }