-
Notifications
You must be signed in to change notification settings - Fork 2.7k
/
WorkspaceExpensifyCardBankAccounts.tsx
98 lines (85 loc) · 4.11 KB
/
WorkspaceExpensifyCardBankAccounts.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import type {StackScreenProps} from '@react-navigation/stack';
import React from 'react';
import {View} from 'react-native';
import {useOnyx} from 'react-native-onyx';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import getBankIcon from '@components/Icon/BankIcons';
import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import ScreenWrapper from '@components/ScreenWrapper';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import {getLastFourDigits} from '@libs/BankAccountUtils';
import * as CardUtils from '@libs/CardUtils';
import Navigation from '@navigation/Navigation';
import type {SettingsNavigatorParamList} from '@navigation/types';
import * as Card from '@userActions/Card';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type {BankName} from '@src/types/onyx/Bank';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
type WorkspaceExpensifyCardBankAccountsProps = StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.EXPENSIFY_CARD_BANK_ACCOUNT>;
function WorkspaceExpensifyCardBankAccounts({route}: WorkspaceExpensifyCardBankAccountsProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const [bankAccountsList] = useOnyx(ONYXKEYS.BANK_ACCOUNT_LIST);
const policyID = route?.params?.policyID ?? '-1';
const handleAddBankAccount = () => {
Navigation.navigate(ROUTES.BANK_ACCOUNT_WITH_STEP_TO_OPEN.getRoute('new', policyID, ROUTES.WORKSPACE_EXPENSIFY_CARD.getRoute(policyID)));
};
const handleSelectBankAccount = (value?: number) => {
Card.configureExpensifyCardsForPolicy(policyID, value);
Navigation.navigate(ROUTES.WORKSPACE_EXPENSIFY_CARD_ISSUE_NEW.getRoute(policyID));
};
const renderBankOptions = () => {
if (!bankAccountsList || isEmptyObject(bankAccountsList)) {
return null;
}
const eligibleBankAccounts = CardUtils.getEligibleBankAccountsForCard(bankAccountsList);
return eligibleBankAccounts.map((bankAccount) => {
const bankName = (bankAccount.accountData?.addressName ?? '') as BankName;
const bankAccountNumber = bankAccount.accountData?.accountNumber ?? '';
const bankAccountID = bankAccount.accountData?.bankAccountID;
const {icon, iconSize, iconStyles} = getBankIcon({bankName, styles});
return (
<MenuItem
title={bankName}
description={`${translate('workspace.expensifyCard.accountEndingIn')} ${getLastFourDigits(bankAccountNumber)}`}
onPress={() => handleSelectBankAccount(bankAccountID)}
icon={icon}
iconHeight={iconSize}
iconWidth={iconSize}
iconStyles={iconStyles}
shouldShowRightIcon
displayInDefaultIconColor
/>
);
});
};
return (
<ScreenWrapper
testID={WorkspaceExpensifyCardBankAccounts.displayName}
includeSafeAreaPaddingBottom={false}
shouldEnablePickerAvoiding={false}
>
<HeaderWithBackButton
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
title={translate('workspace.expensifyCard.chooseBankAccount')}
/>
<View style={styles.flex1}>
<Text style={[styles.mh5, styles.mb3]}>{translate('workspace.expensifyCard.chooseExistingBank')}</Text>
{renderBankOptions()}
<MenuItem
icon={Expensicons.Plus}
title={translate('workspace.expensifyCard.addNewBankAccount')}
onPress={handleAddBankAccount}
/>
</View>
</ScreenWrapper>
);
}
WorkspaceExpensifyCardBankAccounts.displayName = 'WorkspaceExpensifyCardBankAccounts';
export default WorkspaceExpensifyCardBankAccounts;