-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
SetupMethod.tsx
77 lines (69 loc) · 2.75 KB
/
SetupMethod.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
import React from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import Button from '@components/Button';
import * as Expensicons from '@components/Icon/Expensicons';
import * as Illustrations from '@components/Icon/Illustrations';
import Section from '@components/Section';
import Text from '@components/Text';
import TextLink from '@components/TextLink';
import useLocalize from '@hooks/useLocalize';
import useThemeStyles from '@hooks/useThemeStyles';
import getPlaidDesktopMessage from '@libs/getPlaidDesktopMessage';
import * as BankAccounts from '@userActions/BankAccounts';
import CONFIG from '@src/CONFIG';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {User} from '@src/types/onyx';
type SetupMethodOnyxProps = {
/** The user's data */
user: OnyxEntry<User>;
/** Whether Plaid is disabled */
isPlaidDisabled: OnyxEntry<boolean>;
};
type SetupMethodProps = SetupMethodOnyxProps;
const plaidDesktopMessage = getPlaidDesktopMessage();
const enablePayments = `${CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL}${ROUTES.SETTINGS_ENABLE_PAYMENTS}`;
function SetupMethod({isPlaidDisabled, user}: SetupMethodProps) {
const styles = useThemeStyles();
const {translate} = useLocalize();
return (
<View>
<Section
icon={Illustrations.MoneyWings}
title={translate('walletPage.addYourBankAccount')}
titleStyles={[styles.textHeadlineLineHeightXXL]}
>
<View style={[styles.mv3]}>
<Text>{translate('walletPage.addBankAccountBody')}</Text>
</View>
{!!plaidDesktopMessage && (
<View style={[styles.mv3, styles.flexRow, styles.justifyContentBetween]}>
<TextLink href={enablePayments}>{translate(plaidDesktopMessage)}</TextLink>
</View>
)}
<Button
icon={Expensicons.Bank}
text={translate('bankAccount.addBankAccount')}
onPress={() => BankAccounts.openPersonalBankAccountSetupWithPlaid()}
isDisabled={!!isPlaidDisabled || !user?.validated}
style={[styles.mt4, styles.mb2]}
iconStyles={styles.buttonCTAIcon}
shouldShowRightIcon
success
large
/>
</Section>
</View>
);
}
SetupMethod.displayName = 'SetupMethod';
export default withOnyx<SetupMethodProps, SetupMethodOnyxProps>({
isPlaidDisabled: {
key: ONYXKEYS.IS_PLAID_DISABLED,
},
user: {
key: ONYXKEYS.USER,
},
})(SetupMethod);