Merge pull request #89521 from Expensify/claude-fixUnreportedBadgeSelectedColor

[CP Staging] Fix unreported badge invisible when expense row selected

Author: francoisl

src/components/Search/SearchList/ListItem/ExpenseReportListItem.tsx

@@ -304,6 +304,7 @@ function ExpenseReportListItem<TItem extends ListItem>({
                             shouldShowUserInfo={!!reportItem?.from}
                             stateNum={reportItem.stateNum}
                             statusNum={reportItem.statusNum}
+                            isSelected={!!reportItem.isSelected}
                         />
                     )}
                     {!isLargeScreenWidth && (

src/components/Search/SearchList/ListItem/ExpenseReportListItemRow.tsx

@@ -117,6 +117,7 @@ function ExpenseReportListItemRow({
                     stateNum={item.stateNum}
                     statusNum={item.statusNum}
                     isPending={item.shouldShowStatusAsPending}
+                    isSelected={item.isSelected}
                 />
             </View>
         ),

src/components/Search/SearchList/ListItem/ReportListItemHeader.tsx

@@ -251,6 +251,7 @@ function ReportListItemHeader<TItem extends ListItem>({
                 containerStyles={[styles.pr3, styles.mb2]}
                 stateNum={reportItem.stateNum}
                 statusNum={reportItem.statusNum}
+                isSelected={!!reportItem.isSelected}
             />
             <HeaderFirstRow
                 report={reportItem}

src/components/Search/SearchList/ListItem/StatusCell.tsx

@@ -4,7 +4,7 @@ import StatusBadge from '@components/StatusBadge';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getReportStatusColorStyle, getReportStatusTranslation} from '@libs/ReportUtils';
+import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
 
 type StatusCellProps = {
     /** The stateNum of the report */
@@ -18,9 +18,12 @@ type StatusCellProps = {
 
     /** Whether the transaction is deleted */
     isDeleted?: boolean;
+
+    /** Whether the parent row is selected */
+    isSelected?: boolean;
 };
 
-function StatusCell({stateNum, statusNum, isPending, isDeleted}: StatusCellProps) {
+function StatusCell({stateNum, statusNum, isPending, isDeleted, isSelected}: StatusCellProps) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
@@ -32,11 +35,13 @@ function StatusCell({stateNum, statusNum, isPending, isDeleted}: StatusCellProps
         return null;
     }
 
+    const backgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, isDeleted, isSelected);
+
     return (
         <View style={[styles.w100, styles.justifyContentCenter, isPending && styles.offlineFeedbackPending]}>
             <StatusBadge
                 text={statusText}
-                backgroundColor={reportStatusColorStyle.backgroundColor}
+                backgroundColor={backgroundColor}
                 textColor={reportStatusColorStyle.textColor}
             />
         </View>

src/components/Search/SearchList/ListItem/TransactionListItem.tsx

@@ -237,6 +237,7 @@ function TransactionListItem<TItem extends ListItem>({
                                 shouldShowUserInfo={!isDeletedTransaction && !!transactionItem?.from}
                                 stateNum={transactionItem.report?.stateNum}
                                 statusNum={transactionItem.report?.statusNum}
+                                isSelected={!!transactionItem.isSelected}
                             />
                         )}
                         <TransactionItemRow

src/components/Search/SearchList/ListItem/UserInfoAndActionButtonRow.tsx

@@ -9,7 +9,7 @@ import StatusBadge from '@components/StatusBadge';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {getReportStatusColorStyle, getReportStatusTranslation} from '@libs/ReportUtils';
+import {getReportStatusColorStyle, getReportStatusTranslation, getStatusBadgeBackgroundColor} from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import type {ExpenseReportListItemType, TransactionListItemType, TransactionReportGroupListItemType} from './types';
 import UserInfoCellsWithArrow from './UserInfoCellsWithArrow';
@@ -20,18 +20,21 @@ function UserInfoAndActionButtonRow({
     containerStyles,
     stateNum,
     statusNum,
+    isSelected,
 }: {
     item: TransactionReportGroupListItemType | TransactionListItemType | ExpenseReportListItemType;
     shouldShowUserInfo: boolean;
     containerStyles?: StyleProp<ViewStyle>;
     stateNum: ExpenseReportListItemType['stateNum'];
     statusNum: ExpenseReportListItemType['statusNum'];
+    isSelected?: boolean;
 }) {
     const styles = useThemeStyles();
     const theme = useTheme();
     const {translate} = useLocalize();
     const statusText = getReportStatusTranslation({stateNum, statusNum, translate});
     const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum);
+    const badgeBackgroundColor = getStatusBadgeBackgroundColor(theme, stateNum, statusNum, undefined, isSelected);
     const participantFromDisplayName = item.formattedFrom ?? item?.from?.displayName ?? '';
     return (
         <View style={[styles.pt0, styles.flexRow, styles.alignItemsCenter, shouldShowUserInfo ? styles.justifyContentBetween : styles.justifyContentEnd, styles.gap2, containerStyles]}>
@@ -53,7 +56,7 @@ function UserInfoAndActionButtonRow({
             {!!statusText && !!reportStatusColorStyle && (
                 <StatusBadge
                     text={statusText}
-                    backgroundColor={reportStatusColorStyle.backgroundColor}
+                    backgroundColor={badgeBackgroundColor}
                     textColor={reportStatusColorStyle.textColor}
                 />
             )}

src/components/TransactionItemRow/index.tsx

@@ -680,6 +680,7 @@ function TransactionItemRow({
                             stateNum={transactionItem.report?.stateNum}
                             statusNum={transactionItem.report?.statusNum}
                             isDeleted={isDeletedTransaction}
+                            isSelected={isSelected}
                         />
                     </View>
                 );

src/libs/ReportUtils.ts

@@ -13255,6 +13255,12 @@ function getReportStatusColorStyle(theme: ThemeColors, stateNum?: number, status
     return undefined;
 }
 
+function getStatusBadgeBackgroundColor(theme: ThemeColors, stateNum?: number, statusNum?: number, isDeleted?: boolean, isSelected?: boolean): ColorValue | undefined {
+    const reportStatusColorStyle = getReportStatusColorStyle(theme, stateNum, statusNum, isDeleted);
+    const isUnreported = (stateNum === undefined || statusNum === undefined) && !isDeleted;
+    return isSelected && isUnreported ? theme.buttonHoveredBG : reportStatusColorStyle?.backgroundColor;
+}
+
 /**
  * Checks if a workspace member is leaving a workspace room
  * This is used to determine if we need to show special handling when a workspace member leaves a room
@@ -13731,6 +13737,7 @@ export {
     isMoneyRequestReportEligibleForMerge,
     getReportStatusTranslation,
     getReportStatusColorStyle,
+    getStatusBadgeBackgroundColor,
     getMovedActionMessage,
     excludeParticipantsForDisplay,
     getReceiptUploadErrorReason,