Merge pull request Expensify#62936 from software-mansion-labs/bugfix/kuba_nowakowski/make_chatbubbgle_gray_when_readed

Fix logic of single transaction report

Author: mountiny

src/components/SelectionList/Search/ReportListItem.tsx

@@ -155,6 +155,7 @@ function ReportListItem<TItem extends ListItem>({
                                     isParentHovered={hovered}
                                     columnWrapperStyles={[styles.ph3, styles.pv1half]}
                                     isReportItemChild
+                                    isInSingleTransactionReport={reportItem.transactions.length === 1}
                                 />
                             </View>
                         ))

src/components/TransactionItemRow/DataCells/ChatBubbleCell.tsx

@@ -19,7 +19,7 @@ import type Transaction from '@src/types/onyx/Transaction';
 const isReportUnread = ({lastReadTime = '', lastVisibleActionCreated = '', lastMentionedTime = ''}: Report): boolean =>
     lastReadTime < lastVisibleActionCreated || lastReadTime < (lastMentionedTime ?? '');
 
-function ChatBubbleCell({transaction, containerStyles}: {transaction: Transaction; containerStyles?: ViewStyle[]}) {
+function ChatBubbleCell({transaction, containerStyles, isInSingleTransactionReport}: {transaction: Transaction; containerStyles?: ViewStyle[]; isInSingleTransactionReport?: boolean}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -28,10 +28,16 @@ function ChatBubbleCell({transaction, containerStyles}: {transaction: Transactio
         canBeMissing: true,
     });
 
-    const [transactionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`, {
+    const [childReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportAction?.childReportID}`, {
         canBeMissing: true,
     });
 
+    const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${transaction.reportID}`, {
+        canBeMissing: false,
+    });
+
+    const transactionReport = isInSingleTransactionReport ? parentReport : childReport;
+
     const threadMessages = useMemo(
         () => ({
             count: (iouReportAction && iouReportAction?.childVisibleActionCount) ?? 0,

src/components/TransactionItemRow/index.tsx

@@ -98,6 +98,7 @@ type TransactionItemRowProps = {
     isReportItemChild?: boolean;
     isActionLoading?: boolean;
     isInReportTableView?: boolean;
+    isInSingleTransactionReport?: boolean;
 };
 
 /** If merchant name is empty or (none), then it falls back to description if screen is narrow */
@@ -134,6 +135,7 @@ function TransactionItemRow({
     isReportItemChild = false,
     isActionLoading,
     isInReportTableView = false,
+    isInSingleTransactionReport = false,
 }: TransactionItemRowProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -290,7 +292,10 @@ function TransactionItemRow({
             ),
             [CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS]: (
                 <View style={[StyleUtils.getReportTableColumnStyles(CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS)]}>
-                    <ChatBubbleCell transaction={transactionItem} />
+                    <ChatBubbleCell
+                        transaction={transactionItem}
+                        isInSingleTransactionReport={isInSingleTransactionReport}
+                    />
                 </View>
             ),
             [CONST.REPORT.TRANSACTION_LIST.COLUMNS.TOTAL_AMOUNT]: (
@@ -317,6 +322,7 @@ function TransactionItemRow({
             isActionLoading,
             isReportItemChild,
             isDateColumnWide,
+            isInSingleTransactionReport,
             isSelected,
             merchantOrDescriptionName,
             onButtonPress,
@@ -420,6 +426,7 @@ function TransactionItemRow({
                                 <ChatBubbleCell
                                     transaction={transactionItem}
                                     containerStyles={[styles.mt2]}
+                                    isInSingleTransactionReport={isInSingleTransactionReport}
                                 />
                             </View>
                         </View>