Skip to content

Commit 8fae8a5

Browse files
committed
update WithdrawalIDListItemHeader
1 parent e60ae85 commit 8fae8a5

8 files changed

Lines changed: 61 additions & 11 deletions

File tree

src/CONST/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6405,6 +6405,7 @@ const CONST = {
64056405
ASSIGNEE: 'assignee',
64066406
IN: 'in',
64076407
CARD: 'card',
6408+
WITHDRAWAL_ID: 'withdrawalId',
64086409
},
64096410
SYNTAX_OPERATORS: {
64106411
AND: 'and',

src/components/MoneyRequestReportView/MoneyRequestReportTableHeader.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const shouldShowColumnConfig: Record<SortableColumnName, (isIOUReport: boolean)
3131
[CONST.SEARCH.TABLE_COLUMNS.TITLE]: () => false,
3232
[CONST.SEARCH.TABLE_COLUMNS.ASSIGNEE]: () => false,
3333
[CONST.SEARCH.TABLE_COLUMNS.CARD]: () => false,
34+
[CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID]: () => false,
3435
};
3536

3637
const columnConfig: ColumnConfig[] = [

src/components/Search/index.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ import {
4141
isTransactionGroupListItemType,
4242
isTransactionListItemType,
4343
isTransactionMemberGroupListItemType,
44+
isTransactionWithdrawalIDGroupListItemType,
4445
shouldShowEmptyState,
4546
shouldShowYear as shouldShowYearUtil,
4647
} from '@libs/SearchUIUtils';
@@ -557,6 +558,10 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
557558
return;
558559
}
559560

561+
if (isTransactionWithdrawalIDGroupListItemType(item)) {
562+
return;
563+
}
564+
560565
const isFromSelfDM = item.reportID === CONST.REPORT.UNREPORTED_REPORT_ID;
561566
const isTransactionItem = isTransactionListItemType(item);
562567

@@ -628,7 +633,13 @@ function Search({queryJSON, searchResults, onSearchListScroll, contentContainerS
628633

629634
const isChat = type === CONST.SEARCH.DATA_TYPES.CHAT;
630635
const isTask = type === CONST.SEARCH.DATA_TYPES.TASK;
631-
const canSelectMultiple = !isChat && !isTask && (!isSmallScreenWidth || isMobileSelectionModeEnabled) && groupBy !== CONST.SEARCH.GROUP_BY.FROM && groupBy !== CONST.SEARCH.GROUP_BY.CARD;
636+
const canSelectMultiple =
637+
!isChat &&
638+
!isTask &&
639+
(!isSmallScreenWidth || isMobileSelectionModeEnabled) &&
640+
groupBy !== CONST.SEARCH.GROUP_BY.FROM &&
641+
groupBy !== CONST.SEARCH.GROUP_BY.CARD &&
642+
groupBy !== CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID;
632643
const ListItem = getListItem(type, status, groupBy);
633644
const sortedSelectedData = useMemo(
634645
() =>

src/components/SelectionList/Search/TransactionGroupListItem.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ function TransactionGroupListItem<TItem extends ListItem>({
142142
[CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID]: (
143143
<WithdrawalIDListItemHeader
144144
withdrawalID={groupItem as TransactionWithdrawalIDGroupListItemType}
145+
onSelectRow={onSelectRow}
145146
onCheckboxPress={onCheckboxPress}
146147
isDisabled={isDisabledOrEmpty}
147148
canSelectMultiple={canSelectMultiple}

src/components/SelectionList/Search/WithdrawalIDListItemHeader.tsx

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,21 @@ import getBankIcon from '@components/Icon/BankIcons';
66
import type {ListItem, TransactionWithdrawalIDGroupListItemType} from '@components/SelectionList/types';
77
import TextWithTooltip from '@components/TextWithTooltip';
88
import useLocalize from '@hooks/useLocalize';
9+
import useResponsiveLayout from '@hooks/useResponsiveLayout';
10+
import useStyleUtils from '@hooks/useStyleUtils';
911
import useThemeStyles from '@hooks/useThemeStyles';
1012
import DateUtils from '@libs/DateUtils';
1113
import CONST from '@src/CONST';
14+
import ActionCell from './ActionCell';
15+
import TotalCell from './TotalCell';
1216

1317
type WithdrawalIDListItemHeaderProps<TItem extends ListItem> = {
1418
/** The withdrawal ID currently being looked at */
1519
withdrawalID: TransactionWithdrawalIDGroupListItemType;
1620

21+
/** Callback to fire when the item is pressed */
22+
onSelectRow: (item: TItem) => void;
23+
1724
/** Callback to fire when a checkbox is pressed */
1825
onCheckboxPress?: (item: TItem) => void;
1926

@@ -24,18 +31,24 @@ type WithdrawalIDListItemHeaderProps<TItem extends ListItem> = {
2431
canSelectMultiple: boolean | undefined;
2532
};
2633

27-
function WithdrawalIDListItemHeader<TItem extends ListItem>({withdrawalID: withdrawalIDItem, onCheckboxPress, isDisabled, canSelectMultiple}: WithdrawalIDListItemHeaderProps<TItem>) {
34+
function WithdrawalIDListItemHeader<TItem extends ListItem>({
35+
withdrawalID: withdrawalIDItem,
36+
onSelectRow,
37+
onCheckboxPress,
38+
isDisabled,
39+
canSelectMultiple,
40+
}: WithdrawalIDListItemHeaderProps<TItem>) {
2841
const styles = useThemeStyles();
42+
const StyleUtils = useStyleUtils();
2943
const {translate} = useLocalize();
30-
44+
const {isLargeScreenWidth} = useResponsiveLayout();
3145
const {icon, iconSize, iconStyles} = getBankIcon({bankName: withdrawalIDItem.bankName, styles});
3246
const formattedBankName = CONST.BANK_NAMES_USER_FRIENDLY[withdrawalIDItem.bankName];
3347
const formattedWithdrawalDate = DateUtils.formatWithUTCTimeZone(
3448
withdrawalIDItem.debitPosted,
3549
DateUtils.doesDateBelongToAPastYear(withdrawalIDItem.debitPosted) ? CONST.DATE.MONTH_DAY_YEAR_ABBR_FORMAT : CONST.DATE.MONTH_DAY_ABBR_FORMAT,
3650
);
37-
38-
// s77rt add total cell, action cell and collapse/expand button
51+
const shouldShowAction = isLargeScreenWidth;
3952

4053
return (
4154
<View>
@@ -49,16 +62,16 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({withdrawalID: withd
4962
accessibilityLabel={translate('common.select')}
5063
/>
5164
)}
52-
<View style={[styles.flexRow, styles.gap3]}>
65+
<View style={[styles.flexRow, styles.flex1, styles.gap3]}>
5366
<Icon
5467
src={icon}
5568
width={iconSize}
5669
height={iconSize}
5770
additionalStyles={iconStyles}
5871
/>
59-
<View style={[styles.gapHalf]}>
72+
<View style={[styles.gapHalf, styles.flexShrink1]}>
6073
<TextWithTooltip
61-
text={`${formattedBankName} ${withdrawalIDItem.accountNumber}`}
74+
text={`${formattedBankName} xx${withdrawalIDItem.accountNumber.slice(-4)}`}
6275
style={[styles.optionDisplayName, styles.sidebarLinkTextBold, styles.pre]}
6376
/>
6477
<TextWithTooltip
@@ -68,9 +81,21 @@ function WithdrawalIDListItemHeader<TItem extends ListItem>({withdrawalID: withd
6881
</View>
6982
</View>
7083
</View>
71-
</View>
72-
<View style={[styles.pv2, styles.ph3]}>
73-
<View style={[styles.borderBottom]} />
84+
<View style={[styles.flexShrink0, styles.mr3]}>
85+
<TotalCell
86+
total={withdrawalIDItem.total}
87+
currency={withdrawalIDItem.currency}
88+
/>
89+
</View>
90+
{shouldShowAction && (
91+
<View style={[StyleUtils.getReportTableColumnStyles(CONST.SEARCH.TABLE_COLUMNS.ACTION)]}>
92+
<ActionCell
93+
action={CONST.SEARCH.ACTION_TYPES.VIEW}
94+
goToItem={() => onSelectRow(withdrawalIDItem as unknown as TItem)}
95+
isSelected={withdrawalIDItem.isSelected}
96+
/>
97+
</View>
98+
)}
7499
</View>
75100
</View>
76101
);

src/components/SelectionList/SearchTableHeader.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ const shouldShowColumnConfig: Record<SortableColumnName, ShouldShowSearchColumnF
3434
[CONST.SEARCH.TABLE_COLUMNS.ASSIGNEE]: () => true,
3535
[CONST.SEARCH.TABLE_COLUMNS.IN]: () => true,
3636
[CONST.SEARCH.TABLE_COLUMNS.CARD]: () => false,
37+
[CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID]: () => false,
3738
// This column is never displayed on Search
3839
[CONST.REPORT.TRANSACTION_LIST.COLUMNS.COMMENTS]: () => false,
3940
};
@@ -81,6 +82,10 @@ const expenseHeaders: SearchColumnConfig[] = [
8182
columnName: CONST.SEARCH.TABLE_COLUMNS.TAG,
8283
translationKey: 'common.tag',
8384
},
85+
{
86+
columnName: CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID,
87+
translationKey: 'common.withdrawalID',
88+
},
8489
{
8590
columnName: CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT,
8691
translationKey: 'common.tax',
@@ -178,6 +183,9 @@ function SearchTableHeader({
178183
if (groupBy === CONST.SEARCH.GROUP_BY.CARD) {
179184
return columnName === CONST.SEARCH.TABLE_COLUMNS.CARD || columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT || columnName === CONST.SEARCH.TABLE_COLUMNS.ACTION;
180185
}
186+
if (groupBy === CONST.SEARCH.GROUP_BY.WITHDRAWAL_ID) {
187+
return columnName === CONST.SEARCH.TABLE_COLUMNS.WITHDRAWAL_ID || columnName === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT || columnName === CONST.SEARCH.TABLE_COLUMNS.ACTION;
188+
}
181189

182190
const shouldShowFun = shouldShowColumnConfig[columnName];
183191
return shouldShowFun(data, metadata);

src/languages/en.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -578,6 +578,7 @@ const translations = {
578578
reportID: 'Report ID',
579579
longID: 'Long ID',
580580
entryID: 'Entry ID',
581+
withdrawalID: 'Withdrawal ID',
581582
bankAccounts: 'Bank accounts',
582583
chooseFile: 'Choose file',
583584
chooseFiles: 'Choose files',

src/languages/es.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -569,6 +569,8 @@ const translations = {
569569
network: 'La red',
570570
reportID: 'ID del informe',
571571
longID: 'ID largo',
572+
entryID: 'ID de la entrada',
573+
withdrawalID: 'ID de retiro',
572574
bankAccounts: 'Cuentas bancarias',
573575
chooseFile: 'Elegir archivo',
574576
chooseFiles: 'Elegir archivos',

0 commit comments

Comments
 (0)