Search: Add WithdrawalIDListItemHeader

src/CONST/index.ts

@@ -5314,6 +5314,35 @@ const CONST = {
         USAA: 'usaa',
     },
 
+    /**
+     * Bank account names (user friendly)
+     */
+    get BANK_NAMES_USER_FRIENDLY() {
+        return {
+            [this.BANK_NAMES.EXPENSIFY]: 'Expensify',
+            [this.BANK_NAMES.AMERICAN_EXPRESS]: 'American Express',
+            [this.BANK_NAMES.BANK_OF_AMERICA]: 'Bank of America',
+            [this.BANK_NAMES.BB_T]: 'Truist',
+            [this.BANK_NAMES.CAPITAL_ONE]: 'Capital One',
+            [this.BANK_NAMES.CHASE]: 'Chase',
+            [this.BANK_NAMES.CHARLES_SCHWAB]: 'Charles Schwab',
+            [this.BANK_NAMES.CITIBANK]: 'Citibank',
+            [this.BANK_NAMES.CITIZENS_BANK]: 'Citizens',
+            [this.BANK_NAMES.DISCOVER]: 'Discover',
+            [this.BANK_NAMES.FIDELITY]: 'Fidelity',
+            [this.BANK_NAMES.GENERIC_BANK]: 'Bank',
+            [this.BANK_NAMES.HUNTINGTON_BANK]: 'Huntington',
+            [this.BANK_NAMES.HUNTINGTON_NATIONAL]: 'Huntington National',
+            [this.BANK_NAMES.NAVY_FEDERAL_CREDIT_UNION]: 'Navy Federal Credit Union',
+            [this.BANK_NAMES.PNC]: 'PNC',
+            [this.BANK_NAMES.REGIONS_BANK]: 'Regions',
+            [this.BANK_NAMES.SUNTRUST]: 'SunTrust',
+            [this.BANK_NAMES.TD_BANK]: 'TD Bank',
+            [this.BANK_NAMES.US_BANK]: 'U.S. Bank',
+            [this.BANK_NAMES.USAA]: 'USAA',
+        };
+    },
+
     /**
      * Constants for maxToRenderPerBatch parameter that is used for FlatList or SectionList. This controls the amount of items rendered per batch, which is the next chunk of items
      * rendered on every scroll.
@@ -6391,6 +6420,7 @@ const CONST = {
             ASSIGNEE: 'assignee',
             IN: 'in',
             CARD: 'card',
+            WITHDRAWAL_ID: 'withdrawalID',
         },
         SYNTAX_OPERATORS: {
             AND: 'and',

src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx

@@ -31,6 +31,7 @@ const shouldShowColumnConfig: Record<SortableColumnName, (isIOUReport: boolean)
     [CONST.SEARCH.TABLE_COLUMNS.TITLE]: () => false,
     [CONST.SEARCH.TABLE_COLUMNS.ASSIGNEE]: () => false,
     [CONST.SEARCH.TABLE_COLUMNS.CARD]: () => false,
+    [CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID]: () => false,
 };
 
 const columnConfig: ColumnConfig[] = [

src/components/Search/index.tsx

@@ -41,6 +41,7 @@ import {
     isTransactionGroupListItemType,
     isTransactionListItemType,
     isTransactionMemberGroupListItemType,
+    isTransactionWithdrawalIDGroupListItemType,
     shouldShowEmptyState,
     shouldShowYear as shouldShowYearUtil,
 } from '@libs/SearchUIUtils';
@@ -559,6 +560,10 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
                 return;
             }
 
+            if (isTransactionWithdrawalIDGroupListItemType(item)) {
+                return;
+            }
+
             const isFromSelfDM = item.reportID === CONST.REPORT.UNREPORTED_REPORT_ID;
             const isTransactionItem = isTransactionListItemType(item);
 
@@ -630,7 +635,13 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
 
     const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
     const isTask = type === CONST.SEARCH.DATA_TYPES.TASK;
-    const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || isMobileSelectionModeEnabled) && groupBy !== CONST.SEARCH.GROUP_BY.FROM && groupBy !== CONST.SEARCH.GROUP_BY.CARD;
+    const canSelectMultiple =
+        !isChat &&
+        !isTask &&
+        (!isSmallScreenWidth || isMobileSelectionModeEnabled) &&
+        groupBy !== CONST.SEARCH.GROUP_BY.FROM &&
+        groupBy !== CONST.SEARCH.GROUP_BY.CARD &&
+        groupBy !== CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID;
     const ListItem = getListItem(type, status, groupBy);
     const sortedSelectedData = useMemo(
         () =>

src/components/SelectionList/Search/TransactionGroupListItem.tsx

@@ -13,6 +13,7 @@ import type {
     TransactionListItemType,
     TransactionMemberGroupListItemType,
     TransactionReportGroupListItemType,
+    TransactionWithdrawalIDGroupListItemType,
 } from '@components/SelectionList/types';
 import Text from '@components/Text';
 import TransactionItemRow from '@components/TransactionItemRow';
@@ -32,6 +33,7 @@ import ROUTES from '@src/ROUTES';
 import CardListItemHeader from './CardListItemHeader';
 import MemberListItemHeader from './MemberListItemHeader';
 import ReportListItemHeader from './ReportListItemHeader';
+import WithdrawalIDListItemHeader from './WithdrawalIDListItemHeader';
 
 function TransactionGroupListItem<TItem extends ListItem>({
     item,
@@ -138,8 +140,13 @@ function TransactionGroupListItem<TItem extends ListItem>({
                 />
             ),
             [CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: (
-                // Will be implemented as part of https://github.com/Expensify/App/pull/66078
-                <View />
+                <WithdrawalIDListItemHeader
+                    withdrawalID={groupItem as TransactionWithdrawalIDGroupListItemType}
+                    onSelectRow={onSelectRow}
+                    onCheckboxPress={onCheckboxPress}
+                    isDisabled={isDisabledOrEmpty}
+                    canSelectMultiple={canSelectMultiple}
+                />
             ),
         };
 

src/components/SelectionList/Search/WithdrawalIDListItemHeader.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {View} from 'react-native';
+import Checkbox from '@components/Checkbox';
+import Icon from '@components/Icon';
+import getBankIcon from '@components/Icon/BankIcons';
+import type {ListItem, TransactionWithdrawalIDGroupListItemType} from '@components/SelectionList/types';
+import TextWithTooltip from '@components/TextWithTooltip';
+import useLocalize from '@hooks/useLocalize';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useStyleUtils from '@hooks/useStyleUtils';
+import useThemeStyles from '@hooks/useThemeStyles';
+import DateUtils from '@libs/DateUtils';
+import CONST from '@src/CONST';
+import ActionCell from './ActionCell';
+import TotalCell from './TotalCell';
+
+type WithdrawalIDListItemHeaderProps<TItem extends ListItem> = {
+    /** The withdrawal ID currently being looked at */
+    withdrawalID: TransactionWithdrawalIDGroupListItemType;
+
+    /** Callback to fire when the item is pressed */
+    onSelectRow: (item: TItem) => void;
+
+    /** Callback to fire when a checkbox is pressed */
+    onCheckboxPress?: (item: TItem) => void;
+
+    /** Whether this section items disabled for selection */
+    isDisabled?: boolean | null;
+
+    /** Whether selecting multiple transactions at once is allowed */
+    canSelectMultiple: boolean | undefined;
+};
+
+function WithdrawalIDListItemHeader<TItem extends ListItem>({
+    withdrawalID: withdrawalIDItem,
+    onSelectRow,
+    onCheckboxPress,
+    isDisabled,
+    canSelectMultiple,
+}: WithdrawalIDListItemHeaderProps<TItem>) {
+    const styles = useThemeStyles();
+    const StyleUtils = useStyleUtils();
+    const {translate} = useLocalize();
+    const {isLargeScreenWidth} = useResponsiveLayout();
+    const {icon, iconSize, iconStyles} = getBankIcon({bankName: withdrawalIDItem.bankName, styles});
+    const formattedBankName = CONST.BANK_NAMES_USER_FRIENDLY[withdrawalIDItem.bankName];
+    const formattedWithdrawalDate = DateUtils.formatWithUTCTimeZone(
+        withdrawalIDItem.debitPosted,
+        DateUtils.doesDateBelongToAPastYear(withdrawalIDItem.debitPosted) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT,
+    );
+    const shouldShowAction = isLargeScreenWidth;
+
+    return (
+        <View>
+            <View style={[styles.pv1Half, styles.ph3, styles.flexRow, styles.alignItemsCenter, styles.justifyContentStart]}>
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mnh40, styles.flex1, styles.gap3]}>
+                    {!!canSelectMultiple && (
+                        <Checkbox
+                            onPress={() => onCheckboxPress?.(withdrawalIDItem as unknown as TItem)}
+                            isChecked={withdrawalIDItem.isSelected}
+                            disabled={!!isDisabled || withdrawalIDItem.isDisabledCheckbox}
+                            accessibilityLabel={translate('common.select')}
+                        />
+                    )}
+                    <View style={[styles.flexRow, styles.flex1, styles.gap3]}>
+                        <Icon
+                            src={icon}
+                            width={iconSize}
+                            height={iconSize}
+                            additionalStyles={iconStyles}
+                        />
+                        <View style={[styles.gapHalf, styles.flexShrink1]}>
+                            <TextWithTooltip
+                                text={`${formattedBankName} xx${withdrawalIDItem.accountNumber.slice(-4)}`}
+                                style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
+                            />
+                            <TextWithTooltip
+                                text={`${formattedWithdrawalDate}  ${translate('common.withdrawalID')}: ${withdrawalIDItem.entryID}`}
+                                style={[styles.textLabelSupporting, styles.lh16, styles.pre]}
+                            />
+                        </View>
+                    </View>
+                </View>
+                <View style={[styles.flexShrink0, styles.mr3]}>
+                    <TotalCell
+                        total={withdrawalIDItem.total}
+                        currency={withdrawalIDItem.currency}
+                    />
+                </View>
+                {shouldShowAction && (
+                    <View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
+                        <ActionCell
+                            action={CONST.SEARCH.ACTION_TYPES.VIEW}
+                            goToItem={() => onSelectRow(withdrawalIDItem as unknown as TItem)}
+                            isSelected={withdrawalIDItem.isSelected}
+                        />
+                    </View>
+                )}
+            </View>
+        </View>
+    );
+}
+
+WithdrawalIDListItemHeader.displayName = 'WithdrawalIDListItemHeader';
+
+export default WithdrawalIDListItemHeader;

src/components/SelectionList/SearchTableHeader.tsx

@@ -34,6 +34,7 @@ const shouldShowColumnConfig: Record<SortableColumnName, ShouldShowSearchColumnF
     [CONST.SEARCH.TABLE_COLUMNS.ASSIGNEE]: () => true,
     [CONST.SEARCH.TABLE_COLUMNS.IN]: () => true,
     [CONST.SEARCH.TABLE_COLUMNS.CARD]: () => false,
+    [CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID]: () => false,
     // This column is never displayed on Search
     [CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS]: () => false,
 };
@@ -81,6 +82,10 @@ const expenseHeaders: SearchColumnConfig[] = [
         columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
         translationKey: 'common.tag',
     },
+    {
+        columnName: CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID,
+        translationKey: 'common.withdrawalID',
+    },
     {
         columnName: CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
         translationKey: 'common.tax',
@@ -178,6 +183,9 @@ function SearchTableHeader({
             if (groupBy === CONST.SEARCH.GROUP_BY.CARD) {
                 return columnName === CONST.SEARCH.TABLE_COLUMNS.CARD || columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT || columnName === CONST.SEARCH.TABLE_COLUMNS.ACTION;
             }
+            if (groupBy === CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID) {
+                return columnName === CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID || columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT || columnName === CONST.SEARCH.TABLE_COLUMNS.ACTION;
+            }
 
             const shouldShowFun = shouldShowColumnConfig[columnName];
             return shouldShowFun(data, metadata);

src/components/SelectionList/types.ts

@@ -348,7 +348,7 @@ type TransactionMemberGroupListItemType = TransactionGroupListItemType & {groupe
 
 type TransactionCardGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.CARD} & SearchPersonalDetails & SearchCardGroup;
 
-type TransactionWithdrawalIDGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID} & SearchPersonalDetails & SearchWithdrawalIDGroup;
+type TransactionWithdrawalIDGroupListItemType = TransactionGroupListItemType & {groupedBy: typeof CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID} & SearchWithdrawalIDGroup;
 
 type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     /** The section list item */

src/languages/de.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'Netzwerk',
         reportID: 'Berichts-ID',
         longID: 'Lange ID',
+        withdrawalID: 'Auszahlungs-ID',
         bankAccounts: 'Bankkonten',
         chooseFile: 'Datei auswählen',
         chooseFiles: 'Dateien auswählen',

src/languages/en.ts

@@ -579,6 +579,7 @@ const translations = {
         network: 'Network',
         reportID: 'Report ID',
         longID: 'Long ID',
+        withdrawalID: 'Withdrawal ID',
         bankAccounts: 'Bank accounts',
         chooseFile: 'Choose file',
         chooseFiles: 'Choose files',

src/languages/es.ts

@@ -571,6 +571,7 @@ const translations = {
         network: 'La red',
         reportID: 'ID del informe',
         longID: 'ID largo',
+        withdrawalID: 'ID de retiro',
         bankAccounts: 'Cuentas bancarias',
         chooseFile: 'Elegir archivo',
         chooseFiles: 'Elegir archivos',

src/languages/fr.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'Réseau',
         reportID: 'ID du rapport',
         longID: 'ID long',
+        withdrawalID: 'ID de retrait',
         bankAccounts: 'Comptes bancaires',
         chooseFile: 'Choisir un fichier',
         chooseFiles: 'Choisir des fichiers',

src/languages/it.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'Rete',
         reportID: 'ID Rapporto',
         longID: 'ID lungo',
+        withdrawalID: 'ID di prelievo',
         bankAccounts: 'Conti bancari',
         chooseFile: 'Scegli file',
         chooseFiles: 'Scegli file',

src/languages/ja.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'ネットワーク',
         reportID: 'レポートID',
         longID: 'Long ID',
+        withdrawalID: '出金ID',
         bankAccounts: '銀行口座',
         chooseFile: 'ファイルを選択',
         chooseFiles: 'ファイルを選択',

src/languages/nl.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'Netwerk',
         reportID: 'Rapport-ID',
         longID: 'Lang ID',
+        withdrawalID: 'Opname-ID',
         bankAccounts: 'Bankrekeningen',
         chooseFile: 'Bestand kiezen',
         chooseFiles: 'Bestanden kiezen',

src/languages/pl.ts

@@ -587,6 +587,7 @@ const translations = {
         network: 'Sieć',
         reportID: 'ID raportu',
         longID: 'Długi identyfikator',
+        withdrawalID: 'Identyfikator wypłaty',
         bankAccounts: 'Konta bankowe',
         chooseFile: 'Wybierz plik',
         chooseFiles: 'Wybierz pliki',

src/languages/pt-BR.ts

@@ -588,6 +588,7 @@ const translations = {
         network: 'Network',
         reportID: 'ID do Relatório',
         longID: 'ID longo',
+        withdrawalID: 'ID de retirada',
         bankAccounts: 'Contas bancárias',
         chooseFile: 'Escolher arquivo',
         chooseFiles: 'Escolher arquivos',

src/languages/zh-hans.ts

@@ -587,6 +587,7 @@ const translations = {
         network: '网络',
         reportID: '报告 ID',
         longID: 'Long ID',
+        withdrawalID: '提现ID',
         bankAccounts: '银行账户',
         chooseFile: '选择文件',
         chooseFiles: '选择文件',