From 898573b2a9fd8ea40cd795dbcfd801942d3a795d Mon Sep 17 00:00:00 2001
From: dominictb <tb-dominic@outlook.com>
Date: Tue, 6 Aug 2024 17:08:06 +0700
Subject: [PATCH] fix: update logic to render thread divider in money report
 view

---
 .../ReportActionItem/MoneyReportView.tsx      | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx
index 7c2e29bd983..0a7f43ba25a 100644
--- a/src/components/ReportActionItem/MoneyReportView.tsx
+++ b/src/components/ReportActionItem/MoneyReportView.tsx
@@ -10,6 +10,7 @@ import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import SpacerView from '@components/SpacerView';
 import Text from '@components/Text';
+import UnreadActionIndicator from '@components/UnreadActionIndicator';
 import useLocalize from '@hooks/useLocalize';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
@@ -76,6 +77,22 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
     const shouldShowReportField =
         !ReportUtils.isClosedExpenseReportWithNoExpenses(report) && ReportUtils.isPaidGroupPolicyExpenseReport(report) && (!isCombinedReport || !isOnlyTitleFieldEnabled);
 
+    const renderThreadDivider = useMemo(
+        () =>
+            shouldHideThreadDividerLine && !isCombinedReport ? (
+                <UnreadActionIndicator
+                    reportActionID={report.reportID}
+                    shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+                />
+            ) : (
+                <SpacerView
+                    shouldShow={!shouldHideThreadDividerLine}
+                    style={[!shouldHideThreadDividerLine ? styles.reportHorizontalRule : {}]}
+                />
+            ),
+        [shouldHideThreadDividerLine, report.reportID, styles.reportHorizontalRule, isCombinedReport],
+    );
+
     return (
         <>
             <View style={[styles.pRelative]}>
@@ -197,12 +214,7 @@ function MoneyReportView({report, policy, isCombinedReport = false, shouldShowTo
                     </>
                 )}
             </View>
-            {(shouldShowReportField || shouldShowBreakdown || shouldShowTotal) && (
-                <SpacerView
-                    shouldShow={!shouldHideThreadDividerLine}
-                    style={[!shouldHideThreadDividerLine ? styles.reportHorizontalRule : {}]}
-                />
-            )}
+            {(shouldShowReportField || shouldShowBreakdown || shouldShowTotal) && renderThreadDivider}
         </>
     );
 }