diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 688d0d675cd6..24119bedaa8c 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -211,6 +211,13 @@ function ReportActionsList({ return ReportConnection.getReport(report.reportID)?.lastReadTime ?? report.lastReadTime ?? ''; }, [report.reportID, report.lastReadTime]); + // In a one-expense report, the report actions from the expense report and transaction thread are combined. + // If the transaction thread has a newer action, it will show an unread marker if we compare it with the expense report lastReadTime. + // - expense report action A <- expense report lastReadTime + // - transaction thread action A <- transaction thread lastReadTime + // So, we use whichever lastReadTime that is bigger. + const lastReadTime = transactionThreadReport?.lastReadTime && transactionThreadReport.lastReadTime > reportLastReadTime ? transactionThreadReport.lastReadTime : reportLastReadTime; + /** * The timestamp for the unread marker. * @@ -219,9 +226,9 @@ function ReportActionsList({ * - marks a message as read/unread * - reads a new message as it is received */ - const [unreadMarkerTime, setUnreadMarkerTime] = useState(reportLastReadTime); + const [unreadMarkerTime, setUnreadMarkerTime] = useState(lastReadTime); useEffect(() => { - setUnreadMarkerTime(reportLastReadTime); + setUnreadMarkerTime(lastReadTime); // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps }, [report.reportID]);