-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
QuickbooksOutOfPocketExpenseAccountSelectPage.tsx
88 lines (78 loc) · 4.02 KB
/
QuickbooksOutOfPocketExpenseAccountSelectPage.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
import React, {useCallback, useMemo} from 'react';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import SelectionList from '@components/SelectionList';
import RadioListItem from '@components/SelectionList/RadioListItem';
import type {ListItem} from '@components/SelectionList/types';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import * as Connections from '@libs/actions/connections';
import Navigation from '@navigation/Navigation';
import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
import withPolicyConnections from '@pages/workspace/withPolicyConnections';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {Account} from '@src/types/onyx/Policy';
type CardListItem = ListItem & {
value: Account;
};
function QuickbooksOutOfPocketExpenseAccountSelectPage({policy}: WithPolicyConnectionsProps) {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {bankAccounts, journalEntryAccounts, accountPayable} = policy?.connections?.quickbooksOnline?.data ?? {};
const {reimbursableExpensesExportDestination, reimbursableExpensesAccount} = policy?.connections?.quickbooksOnline?.config ?? {};
const data: CardListItem[] = useMemo(() => {
let accounts: Account[];
switch (reimbursableExpensesExportDestination) {
case CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.CHECK:
accounts = bankAccounts ?? [];
break;
case CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.VENDOR_BILL:
accounts = accountPayable ?? [];
break;
case CONST.QUICKBOOKS_REIMBURSABLE_ACCOUNT_TYPE.JOURNAL_ENTRY:
accounts = journalEntryAccounts ?? [];
break;
default:
accounts = [];
}
return accounts.map((account) => ({
value: account,
text: account.name,
keyForList: account.name,
isSelected: account.id === reimbursableExpensesAccount?.id,
}));
}, [accountPayable, bankAccounts, reimbursableExpensesExportDestination, reimbursableExpensesAccount, journalEntryAccounts]);
const policyID = policy?.id ?? '';
const selectExportAccount = useCallback(
(row: CardListItem) => {
if (row.value.id !== reimbursableExpensesAccount?.id) {
Connections.updatePolicyConnectionConfig(policyID, CONST.POLICY.CONNECTIONS.NAME.QBO, CONST.QUICK_BOOKS_CONFIG.REIMBURSABLE_EXPENSES_ACCOUNT, row.value);
}
Navigation.goBack(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_ONLINE_EXPORT_OUT_OF_POCKET_EXPENSES.getRoute(policyID));
},
[reimbursableExpensesAccount, policyID],
);
return (
<AccessOrNotFoundWrapper
policyID={policyID}
accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN]}
featureName={CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED}
>
<ScreenWrapper testID={QuickbooksOutOfPocketExpenseAccountSelectPage.displayName}>
<HeaderWithBackButton title={translate('workspace.qbo.accountsPayable')} />
<SelectionList
headerContent={<Text style={[styles.ph5, styles.pb5]}>{translate('workspace.qbo.accountsPayableDescription')}</Text>}
sections={[{data}]}
ListItem={RadioListItem}
onSelectRow={selectExportAccount}
initiallyFocusedOptionKey={data.find((mode) => mode.isSelected)?.keyForList}
/>
</ScreenWrapper>
</AccessOrNotFoundWrapper>
);
}
QuickbooksOutOfPocketExpenseAccountSelectPage.displayName = 'QuickbooksOutOfPocketExpenseAccountSelectPage';
export default withPolicyConnections(QuickbooksOutOfPocketExpenseAccountSelectPage);