Merge pull request Expensify#64911 from s77rt/statement-matching

JS00001 · web-flow · commit 763a99e7a70f · 2025-06-25T15:32:35.000-07:00
Search: Added `Card` to GROUP_BY
diff --git a/src/CONST/index.ts b/src/CONST/index.ts
@@ -6604,6 +6604,7 @@ const CONST = {
         GROUP_BY: {
             REPORTS: 'reports',
             MEMBERS: 'members',
+            CARDS: 'cards',
         },
         BOOLEAN: {
             YES: 'yes',
diff --git a/src/components/Search/SearchContext.tsx b/src/components/Search/SearchContext.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {isMoneyRequestReport} from '@libs/ReportUtils';
-import {isTransactionListItemType, isTransactionMemberGroupListItemType, isTransactionReportGroupListItemType} from '@libs/SearchUIUtils';
+import {isTransactionCardGroupListItemType, isTransactionListItemType, isTransactionMemberGroupListItemType, isTransactionReportGroupListItemType} from '@libs/SearchUIUtils';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {SearchContext, SearchContextData} from './types';
@@ -76,6 +76,13 @@ function SearchContextProvider({children}: ChildrenProps) {
                 .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
         }
 
+        if (data.length && data.every(isTransactionCardGroupListItemType)) {
+            selectedReports = data
+                .flatMap((item) => item.transactions)
+                .filter(({keyForList}) => !!keyForList && selectedTransactions[keyForList]?.isSelected)
+                .map(({reportID, action = CONST.SEARCH.ACTION_TYPES.VIEW, amount: total = CONST.DEFAULT_NUMBER_ID, policyID}) => ({reportID, action, total, policyID}));
+        }
+
         if (data.length && data.every(isTransactionListItemType)) {
             selectedReports = data
                 .filter(({keyForList}) => !!keyForList && selectedTransactions[keyForList]?.isSelected)
diff --git a/src/components/SelectionList/Search/MemberListItemHeader.tsx b/src/components/SelectionList/Search/MemberListItemHeader.tsx
@@ -5,7 +5,10 @@ import Checkbox from '@components/Checkbox';
 import type {ListItem, TransactionMemberGroupListItemType} from '@components/SelectionList/types';
 import TextWithTooltip from '@components/TextWithTooltip';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import {formatPhoneNumber} from '@libs/LocalePhoneNumber';
+import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils';
 import CONST from '@src/CONST';
 
 type MemberListItemHeaderProps<TItem extends ListItem> = {
@@ -24,6 +27,10 @@ type MemberListItemHeaderProps<TItem extends ListItem> = {
 
 function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onCheckboxPress, isDisabled, canSelectMultiple}: MemberListItemHeaderProps<TItem>) {
     const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const formattedDisplayName = formatPhoneNumber(getDisplayNameOrDefault(memberItem));
+    const formattedLogin = formatPhoneNumber(memberItem.login ?? '');
 
     // s77rt add total cell, action cell and collapse/expand button
 
@@ -36,7 +43,7 @@ function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onChe
                             onPress={() => onCheckboxPress?.(memberItem as unknown as TItem)}
                             isChecked={memberItem.isSelected}
                             disabled={!!isDisabled || memberItem.isDisabledCheckbox}
-                            accessibilityLabel={memberItem.text ?? ''}
+                            accessibilityLabel={translate('common.select')}
                         />
                     )}
                     <View style={[styles.flexRow, styles.gap3]}>
@@ -45,18 +52,18 @@ function MemberListItemHeader<TItem extends ListItem>({member: memberItem, onChe
                                 <Avatar
                                     source={memberItem.avatar}
                                     type={CONST.ICON_TYPE_AVATAR}
-                                    name={memberItem.displayName ?? memberItem.login}
+                                    name={formattedDisplayName}
                                     avatarID={memberItem.accountID}
                                 />
                             </View>
                         </UserDetailsTooltip>
                         <View style={[styles.gapHalf]}>
                             <TextWithTooltip
-                                text={memberItem.displayName ?? memberItem.login ?? ''}
+                                text={formattedDisplayName}
                                 style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
                             />
                             <TextWithTooltip
-                                text={memberItem.login ?? ''}
+                                text={formattedLogin || formattedDisplayName}
                                 style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
                             />
                         </View>
diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx
@@ -133,6 +133,10 @@ function TransactionGroupListItem<TItem extends ListItem>({
                     canSelectMultiple={canSelectMultiple}
                 />
             ),
+            [CONST.SEARCH.GROUP_BY.CARDS]: (
+                // s77rt CardListItemHeader
+                <View />
+            ),
         };
 
         if (!groupBy) {
diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -25,7 +25,7 @@ import type CONST from '@src/CONST';
 import type {Policy, Report, TransactionViolation} from '@src/types/onyx';
 import type {Attendee, SplitExpense} from '@src/types/onyx/IOU';
 import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon';
-import type {SearchPersonalDetails, SearchReport, SearchReportAction, SearchTask, SearchTransaction} from '@src/types/onyx/SearchResults';
+import type {SearchCard, SearchPersonalDetails, SearchReport, SearchReportAction, SearchTask, SearchTransaction} from '@src/types/onyx/SearchResults';
 import type {ReceiptErrors} from '@src/types/onyx/Transaction';
 import type Transaction from '@src/types/onyx/Transaction';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
@@ -330,16 +330,17 @@ type TransactionGroupListItemType = ListItem & {
     transactions: TransactionListItemType[];
 };
 
-type TransactionReportGroupListItemType = TransactionGroupListItemType &
-    SearchReport & {
+type TransactionReportGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.REPORTS} & SearchReport & {
         /** The personal details of the user requesting money */
         from: SearchPersonalDetails;
 
         /** The personal details of the user paying the request */
         to: SearchPersonalDetails;
     };
 
-type TransactionMemberGroupListItemType = TransactionGroupListItemType & SearchPersonalDetails;
+type TransactionMemberGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.MEMBERS} & SearchPersonalDetails;
+
+type TransactionCardGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.CARDS} & SearchPersonalDetails & SearchCard;
 
 type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** The section list item */
@@ -880,6 +881,7 @@ export type {
     TransactionGroupListItemType,
     TransactionReportGroupListItemType,
     TransactionMemberGroupListItemType,
+    TransactionCardGroupListItemType,
     Section,
     SectionListDataType,
     SectionWithIndexOffset,
diff --git a/src/languages/de.ts b/src/languages/de.ts
@@ -5770,6 +5770,7 @@ const translations = {
             groupBy: {
                 reports: 'Bericht',
                 members: 'Mitglied',
+                cards: 'Karte',
             },
         },
         groupBy: 'Gruppe nach',
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -5707,6 +5707,7 @@ const translations = {
             groupBy: {
                 reports: 'Report', // s77rt use singular key name
                 members: 'Member', // s77rt use singular key name
+                cards: 'Card', // s77rt use singular key name
             },
         },
         groupBy: 'Group by',
diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -5760,6 +5760,7 @@ const translations = {
             groupBy: {
                 reports: 'Informe',
                 members: 'Miembro',
+                cards: 'Tarjeta',
             },
         },
         groupBy: 'Agrupar por',
diff --git a/src/languages/fr.ts b/src/languages/fr.ts
@@ -5780,6 +5780,7 @@ const translations = {
             groupBy: {
                 reports: 'Rapport',
                 members: 'Membre',
+                cards: 'Carte',
             },
         },
         groupBy: 'Groupe par',
diff --git a/src/languages/it.ts b/src/languages/it.ts
@@ -5756,6 +5756,7 @@ const translations = {
             groupBy: {
                 reports: 'Rapporto',
                 members: 'Membro',
+                cards: 'Carta',
             },
         },
         groupBy: 'Gruppo per',
diff --git a/src/languages/ja.ts b/src/languages/ja.ts
@@ -5700,6 +5700,7 @@ const translations = {
             groupBy: {
                 reports: '報告',
                 members: 'メンバー',
+                cards: 'カード',
             },
         },
         groupBy: 'グループ',
diff --git a/src/languages/nl.ts b/src/languages/nl.ts
@@ -5743,6 +5743,7 @@ const translations = {
             groupBy: {
                 reports: 'Verslag',
                 members: 'Lid',
+                cards: 'Kaart',
             },
         },
         groupBy: 'Groep per',
diff --git a/src/languages/pl.ts b/src/languages/pl.ts
@@ -5727,6 +5727,7 @@ const translations = {
             groupBy: {
                 reports: 'Relatório',
                 members: 'Membro',
+                cards: 'Karta',
             },
         },
         groupBy: 'Agrupar por',
diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts
@@ -5740,6 +5740,7 @@ const translations = {
             groupBy: {
                 reports: 'Relatório',
                 members: 'Membro',
+                cards: 'Cartão',
             },
         },
         groupBy: 'Agrupar por',
diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts
@@ -5638,6 +5638,7 @@ const translations = {
             groupBy: {
                 reports: '报告',
                 members: '成员',
+                cards: '卡片',
             },
         },
         groupBy: '组别',
diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts
@@ -17,6 +17,7 @@ import type {
     ReportActionListItemType,
     SearchListItem,
     TaskListItemType,
+    TransactionCardGroupListItemType,
     TransactionGroupListItemType,
     TransactionListItemType,
     TransactionMemberGroupListItemType,
@@ -305,14 +306,21 @@ function isTransactionGroupListItemType(item: ListItem): item is TransactionGrou
  * Type guard that checks if something is a TransactionReportGroupListItemType
  */
 function isTransactionReportGroupListItemType(item: ListItem): item is TransactionReportGroupListItemType {
-    return isTransactionGroupListItemType(item) && 'reportID' in item;
+    return isTransactionGroupListItemType(item) && 'groupedBy' in item && item.groupedBy === CONST.SEARCH.GROUP_BY.REPORTS;
 }
 
 /**
  * Type guard that checks if something is a TransactionMemberGroupListItemType
  */
 function isTransactionMemberGroupListItemType(item: ListItem): item is TransactionMemberGroupListItemType {
-    return isTransactionGroupListItemType(item) && 'accountID' in item;
+    return isTransactionGroupListItemType(item) && 'groupedBy' in item && item.groupedBy === CONST.SEARCH.GROUP_BY.MEMBERS;
+}
+
+/**
+ * Type guard that checks if something is a TransactionCardGroupListItemType
+ */
+function isTransactionCardGroupListItemType(item: ListItem): item is TransactionCardGroupListItemType {
+    return isTransactionGroupListItemType(item) && 'groupedBy' in item && item.groupedBy === CONST.SEARCH.GROUP_BY.CARDS;
 }
 
 /**
@@ -912,6 +920,7 @@ function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx
             const reportPendingAction = reportItem?.pendingAction ?? reportItem?.pendingFields?.preview;
             reportIDToTransactions[reportKey] = {
                 ...reportItem,
+                groupedBy: CONST.SEARCH.GROUP_BY.REPORTS,
                 action: getAction(data, allViolations, key),
                 keyForList: reportItem.reportID,
                 from: data.personalDetailsList?.[reportItem.accountID ?? CONST.DEFAULT_NUMBER_ID],
@@ -979,6 +988,16 @@ function getMemberSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx
     return data && metadata ? [] : []; // s77rt TODO
 }
 
+/**
+ * @private
+ * Organizes data into List Sections grouped by card for display, for the TransactionGroupListItemType of Search Results.
+ *
+ * Do not use directly, use only via `getSections()` facade.
+ */
+function getCardSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): TransactionCardGroupListItemType[] {
+    return data && metadata ? [] : []; // s77rt TODO
+}
+
 /**
  * Returns the appropriate list item component based on the type and status of the search data.
  */
@@ -1005,11 +1024,18 @@ function getSections(type: SearchDataTypes, status: SearchStatus, data: OnyxType
     if (type === CONST.SEARCH.DATA_TYPES.TASK) {
         return getTaskSections(data);
     }
-    if (groupBy === CONST.SEARCH.GROUP_BY.REPORTS) {
-        return getReportSections(data, metadata);
-    }
-    if (groupBy === CONST.SEARCH.GROUP_BY.MEMBERS) {
-        return getMemberSections(data, metadata);
+
+    if (groupBy) {
+        // Disabling the default-case lint rule here is actually safer as this forces us to make the switch cases exhaustive
+        // eslint-disable-next-line default-case
+        switch (groupBy) {
+            case CONST.SEARCH.GROUP_BY.REPORTS:
+                return getReportSections(data, metadata);
+            case CONST.SEARCH.GROUP_BY.MEMBERS:
+                return getMemberSections(data, metadata);
+            case CONST.SEARCH.GROUP_BY.CARDS:
+                return getCardSections(data, metadata);
+        }
     }
 
     return getTransactionsSections(data, metadata);
@@ -1032,12 +1058,20 @@ function getSortedSections(
     if (type === CONST.SEARCH.DATA_TYPES.TASK) {
         return getSortedTaskData(data as TaskListItemType[], sortBy, sortOrder);
     }
-    if (groupBy === CONST.SEARCH.GROUP_BY.REPORTS) {
-        return getSortedReportData(data as TransactionReportGroupListItemType[]);
-    }
-    if (groupBy === CONST.SEARCH.GROUP_BY.MEMBERS) {
-        return getSortedMemberData(data as TransactionMemberGroupListItemType[]);
+
+    if (groupBy) {
+        // Disabling the default-case lint rule here is actually safer as this forces us to make the switch cases exhaustive
+        // eslint-disable-next-line default-case
+        switch (groupBy) {
+            case CONST.SEARCH.GROUP_BY.REPORTS:
+                return getSortedReportData(data as TransactionReportGroupListItemType[]);
+            case CONST.SEARCH.GROUP_BY.MEMBERS:
+                return getSortedMemberData(data as TransactionMemberGroupListItemType[]);
+            case CONST.SEARCH.GROUP_BY.CARDS:
+                return getSortedCardData(data as TransactionCardGroupListItemType[]);
+        }
     }
+
     return getSortedTransactionData(data as TransactionListItemType[], sortBy, sortOrder);
 }
 
@@ -1135,6 +1169,14 @@ function getSortedMemberData(data: TransactionMemberGroupListItemType[]) {
     return data ? [] : []; // s77rt TODO
 }
 
+/**
+ * @private
+ * Sorts report sections based on a specified column and sort order.
+ */
+function getSortedCardData(data: TransactionCardGroupListItemType[]) {
+    return data ? [] : []; // s77rt TODO
+}
+
 /**
  * @private
  * Sorts report actions sections based on a specified column and sort order.
@@ -1649,6 +1691,7 @@ export {
     isTransactionGroupListItemType,
     isTransactionReportGroupListItemType,
     isTransactionMemberGroupListItemType,
+    isTransactionCardGroupListItemType,
     isSearchResultsEmpty,
     isTransactionListItemType,
     isReportActionListItemType,
diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts
@@ -455,6 +455,19 @@ type SearchTask = {
     statusNum: ValueOf<typeof CONST.REPORT.STATUS_NUM>;
 };
 
+/** Model of card search result */
+// s77rt sync with BE
+type SearchCard = {
+    /** Last four Primary Account Number digits */
+    lastFourPAN: string;
+
+    /** Card name */
+    cardName: string;
+
+    /** Cardholder account ID */
+    accountID: number;
+};
+
 /** Types of searchable transactions */
 type SearchTransactionType = ValueOf<typeof CONST.SEARCH.TRANSACTION_TYPE>;
 
@@ -476,6 +489,7 @@ type SearchResults = {
         PrefixedRecord<typeof ONYXKEYS.COLLECTION.REPORT_ACTIONS, Record<string, SearchReportAction>> &
         PrefixedRecord<typeof ONYXKEYS.COLLECTION.REPORT, SearchReport> &
         PrefixedRecord<typeof ONYXKEYS.COLLECTION.POLICY, SearchPolicy> &
+        PrefixedRecord<typeof ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, SearchCard> &
         PrefixedRecord<typeof ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS, TransactionViolation[]> &
         PrefixedRecord<typeof ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS, ReportNameValuePairs>;
 
@@ -500,4 +514,5 @@ export type {
     SearchReport,
     SearchReportAction,
     SearchPolicy,
+    SearchCard,
 };
diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts
diff --git a/tests/unit/Search/handleActionButtonPressTest.ts b/tests/unit/Search/handleActionButtonPressTest.ts
