[Bank Account Flow Refactor] Update the Bank account flow design

src/CONST.ts

@@ -187,6 +187,71 @@ const CONST = {
         DOMAIN: '@expensify.sms',
     },
     BANK_ACCOUNT: {
+        BANK_INFO_STEP: {
+            INPUT_KEY: {
+                ROUTING_NUMBER: 'routingNumber',
+                ACCOUNT_NUMBER: 'accountNumber',
+                PLAID_MASK: 'plaidMask',
+                IS_SAVINGS: 'isSavings',
+                BANK_NAME: 'bankName',
+                PLAID_ACCOUNT_ID: 'plaidAccountID',
+                PLAID_ACCESS_TOKEN: 'plaidAccessToken',
+            },
+        },
+        PERSONAL_INFO_STEP: {
+            INPUT_KEY: {
+                FIRST_NAME: 'firstName',
+                LAST_NAME: 'lastName',
+                DOB: 'dob',
+                SSN_LAST_4: 'ssnLast4',
+                STREET: 'requestorAddressStreet',
+                CITY: 'requestorAddressCity',
+                STATE: 'requestorAddressState',
+                ZIP_CODE: 'requestorAddressZipCode',
+            },
+        },
+        BUSINESS_INFO_STEP: {
+            INPUT_KEY: {
+                COMPANY_NAME: 'companyName',
+                COMPANY_TAX_ID: 'companyTaxID',
+                COMPANY_WEBSITE: 'website',
+                COMPANY_PHONE: 'companyPhone',
+                STREET: 'addressStreet',
+                CITY: 'addressCity',
+                STATE: 'addressState',
+                ZIP_CODE: 'addressZipCode',
+                INCORPORATION_TYPE: 'incorporationType',
+                INCORPORATION_DATE: 'incorporationDate',
+                INCORPORATION_STATE: 'incorporationState',
+                HAS_NO_CONNECTION_TO_CANNABIS: 'hasNoConnectionToCannabis',
+            },
+        },
+        BENEFICIAL_OWNER_INFO_STEP: {
+            SUBSTEP: {
+                IS_USER_UBO: 1,
+                IS_ANYONE_ELSE_UBO: 2,
+                UBO_DETAILS_FORM: 3,
+                ARE_THERE_MORE_UBOS: 4,
+                UBOS_LIST: 5,
+            },
+            INPUT_KEY: {
+                OWNS_MORE_THAN_25_PERCENT: 'ownsMoreThan25Percent',
+                HAS_OTHER_BENEFICIAL_OWNERS: 'hasOtherBeneficialOwners',
+                BENEFICIAL_OWNERS: 'beneficialOwners',
+            },
+            BENEFICIAL_OWNER_DATA: {
+                BENEFICIAL_OWNER_KEYS: 'beneficialOwnerKeys',
+                PREFIX: 'beneficialOwner',
+                FIRST_NAME: 'firstName',
+                LAST_NAME: 'lastName',
+                DOB: 'dob',
+                SSN_LAST_4: 'ssnLast4',
+                STREET: 'street',
+                CITY: 'city',
+                STATE: 'state',
+                ZIP_CODE: 'zipCode',
+            },
+        },
         PLAID: {
             ALLOWED_THROTTLED_COUNT: 2,
             ERROR: {
@@ -197,6 +262,13 @@ const CONST = {
                 EXIT: 'EXIT',
             },
         },
+        COMPLETE_VERIFICATION: {
+            INPUT_KEY: {
+                IS_AUTHORIZED_TO_USE_BANK_ACCOUNT: 'isAuthorizedToUseBankAccount',
+                CERTIFY_TRUE_INFORMATION: 'certifyTrueInformation',
+                ACCEPT_TERMS_AND_CONDITIONS: 'acceptTermsAndConditions',
+            },
+        },
         ERROR: {
             MISSING_ROUTING_NUMBER: '402 Missing routingNumber',
             MAX_ROUTING_NUMBER: '402 Maximum Size Exceeded routingNumber',
@@ -206,14 +278,18 @@ const CONST = {
         STEP: {
             // In the order they appear in the VBA flow
             BANK_ACCOUNT: 'BankAccountStep',
-            COMPANY: 'CompanyStep',
             REQUESTOR: 'RequestorStep',
+            COMPANY: 'CompanyStep',
+            BENEFICIAL_OWNERS: 'BeneficialOwnersStep',
             ACH_CONTRACT: 'ACHContractStep',
             VALIDATION: 'ValidationStep',
             ENABLE: 'EnableStep',
         },
+        STEP_NAMES: ['1', '2', '3', '4', '5'],
+        STEPS_HEADER_HEIGHT: 40,
         SUBSTEP: {
             MANUAL: 'manual',
+            PLAID: 'plaid',
         },
         VERIFICATIONS: {
             ERROR_MESSAGE: 'verifications.errorMessage',
@@ -477,6 +553,8 @@ const CONST = {
     ONFIDO_FACIAL_SCAN_POLICY_URL: 'https://onfido.com/facial-scan-policy-and-release/',
     ONFIDO_PRIVACY_POLICY_URL: 'https://onfido.com/privacy/',
     ONFIDO_TERMS_OF_SERVICE_URL: 'https://onfido.com/terms-of-service/',
+    LIST_OF_RESTRICTED_BUSINESSES: 'https://community.expensify.com/discussion/6191/list-of-restricted-businesses',
+
     // Use Environment.getEnvironmentURL to get the complete URL with port number
     DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
     EXPENSIFY_INBOX_URL: 'https://www.expensify.com/inbox',

src/ONYXKEYS.ts

@@ -127,6 +127,7 @@ const ONYXKEYS = {
 
     /** Token needed to initialize Onfido */
     ONFIDO_TOKEN: 'onfidoToken',
+    ONFIDO_APPLICANT_ID: 'onfidoApplicantID',
 
     /** Indicates which locale should be used */
     NVP_PREFERRED_LOCALE: 'preferredLocale',
@@ -398,6 +399,7 @@ type OnyxValues = {
     [ONYXKEYS.IS_PLAID_DISABLED]: boolean;
     [ONYXKEYS.PLAID_LINK_TOKEN]: string;
     [ONYXKEYS.ONFIDO_TOKEN]: string;
+    [ONYXKEYS.ONFIDO_APPLICANT_ID]: string;
     [ONYXKEYS.NVP_PREFERRED_LOCALE]: OnyxTypes.Locale;
     [ONYXKEYS.USER_WALLET]: OnyxTypes.UserWallet;
     [ONYXKEYS.WALLET_ONFIDO]: OnyxTypes.WalletOnfido;

src/components/AddPlaidBankAccount.js

@@ -1,6 +1,6 @@
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useCallback, useEffect, useRef} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {ActivityIndicator, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -20,6 +20,7 @@ import Icon from './Icon';
 import getBankIcon from './Icon/BankIcons';
 import Picker from './Picker';
 import PlaidLink from './PlaidLink';
+import RadioButtons from './RadioButtons';
 import Text from './Text';
 
 const propTypes = {
@@ -55,6 +56,9 @@ const propTypes = {
 
     /** Are we adding a withdrawal account? */
     allowDebit: PropTypes.bool,
+
+    /** Is displayed in new VBBA */
+    isDisplayedInNewVBBA: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -68,6 +72,7 @@ const defaultProps = {
     allowDebit: false,
     bankAccountID: 0,
     isPlaidDisabled: false,
+    isDisplayedInNewVBBA: false,
 };
 
 function AddPlaidBankAccount({
@@ -82,11 +87,21 @@ function AddPlaidBankAccount({
     bankAccountID,
     allowDebit,
     isPlaidDisabled,
+    isDisplayedInNewVBBA,
 }) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts', []);
+    const defaultSelectedPlaidAccount = _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID);
+    const defaultSelectedPlaidAccountID = lodashGet(defaultSelectedPlaidAccount, 'plaidAccountID', '');
+    const defaultSelectedPlaidAccountMask = lodashGet(
+        _.find(plaidBankAccounts, (account) => account.plaidAccountID === selectedPlaidAccountID),
+        'mask',
+        '',
+    );
     const subscribedKeyboardShortcuts = useRef([]);
     const previousNetworkState = useRef();
+    const [selectedPlaidAccountMask, setSelectedPlaidAccountMask] = useState(defaultSelectedPlaidAccountMask);
 
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -162,17 +177,27 @@ function AddPlaidBankAccount({
         previousNetworkState.current = isOffline;
     }, [allowDebit, bankAccountID, isAuthenticatedWithPlaid, isOffline]);
 
-    const plaidBankAccounts = lodashGet(plaidData, 'bankAccounts') || [];
     const token = getPlaidLinkToken();
     const options = _.map(plaidBankAccounts, (account) => ({
         value: account.plaidAccountID,
-        label: `${account.addressName} ${account.mask}`,
+        label: account.addressName,
     }));
     const {icon, iconSize, iconStyles} = getBankIcon({styles});
     const plaidErrors = lodashGet(plaidData, 'errors');
     const plaidDataErrorMessage = !_.isEmpty(plaidErrors) ? _.chain(plaidErrors).values().first().value() : '';
     const bankName = lodashGet(plaidData, 'bankName');
 
+    /**
+     * @param {String} plaidAccountID
+     *
+     * When user selects one of plaid accounts we need to set the mask in order to display it on UI
+     */
+    const handleSelectingPlaidAccount = (plaidAccountID) => {
+        const mask = _.find(plaidBankAccounts, (account) => account.plaidAccountID === plaidAccountID).mask;
+        setSelectedPlaidAccountMask(mask);
+        onSelect(plaidAccountID);
+    };
+
     if (isPlaidDisabled) {
         return (
             <View>
@@ -239,6 +264,34 @@ function AddPlaidBankAccount({
         return <FullPageOfflineBlockingView>{renderPlaidLink()}</FullPageOfflineBlockingView>;
     }
 
+    if (isDisplayedInNewVBBA) {
+        return (
+            <FullPageOfflineBlockingView>
+                <Text style={[styles.mb5, styles.textHeadline]}>{translate('bankAccount.chooseAnAccount')}</Text>
+                {!_.isEmpty(text) && <Text style={[styles.mb5]}>{text}</Text>}
+                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb5]}>
+                    <Icon
+                        src={icon}
+                        height={iconSize}
+                        width={iconSize}
+                    />
+                    <View>
+                        <Text style={[styles.ml3, styles.textStrong]}>{bankName}</Text>
+                        {selectedPlaidAccountMask.length > 0 && (
+                            <Text style={[styles.ml3, styles.textLabelSupporting]}>{`${translate('bankAccount.accountEnding')} ${selectedPlaidAccountMask}`}</Text>
+                        )}
+                    </View>
+                </View>
+                <Text style={[styles.textLabelSupporting]}>{`${translate('bankAccount.chooseAnAccountBelow')}:`}</Text>
+                <RadioButtons
+                    items={options}
+                    defaultCheckedValue={defaultSelectedPlaidAccountID}
+                    onPress={handleSelectingPlaidAccount}
+                />
+            </FullPageOfflineBlockingView>
+        );
+    }
+
     // Plaid bank accounts view
     return (
         <FullPageOfflineBlockingView>

src/components/Button/index.tsx

@@ -344,5 +344,4 @@ function Button(
 }
 
 Button.displayName = 'Button';
-
 export default withNavigationFallback(React.forwardRef(Button));

src/components/DatePicker/index.js

@@ -1,14 +1,15 @@
 import {setYear} from 'date-fns';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import React, {forwardRef, useState} from 'react';
+import React, {forwardRef, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import refPropTypes from '@components/refPropTypes';
 import TextInput from '@components/TextInput';
 import {propTypes as baseTextInputPropTypes, defaultProps as defaultBaseTextInputPropTypes} from '@components/TextInput/BaseTextInput/baseTextInputPropTypes';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
+import * as FormActions from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import CalendarPicker from './CalendarPicker';
 
@@ -42,6 +43,12 @@ const propTypes = {
     /** A function that is passed by FormWrapper */
     onTouched: PropTypes.func.isRequired,
 
+    /** Saves a draft of the input value when used in a form */
+    shouldSaveDraft: PropTypes.bool,
+
+    /** ID of the wrapping form */
+    formID: PropTypes.string,
+
     ...baseTextInputPropTypes,
 };
 
@@ -50,9 +57,28 @@ const datePickerDefaultProps = {
     minDate: setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
     maxDate: setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
     value: undefined,
+    shouldSaveDraft: false,
+    formID: '',
 };
 
-function DatePicker({forwardedRef, containerStyles, defaultValue, disabled, errorText, inputID, isSmallScreenWidth, label, maxDate, minDate, onInputChange, onTouched, placeholder, value}) {
+function DatePicker({
+    forwardedRef,
+    containerStyles,
+    defaultValue,
+    disabled,
+    errorText,
+    inputID,
+    isSmallScreenWidth,
+    label,
+    maxDate,
+    minDate,
+    onInputChange,
+    onTouched,
+    placeholder,
+    value,
+    shouldSaveDraft,
+    formID,
+}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
@@ -67,6 +93,19 @@ function DatePicker({forwardedRef, containerStyles, defaultValue, disabled, erro
         setSelectedDate(newValue);
     };
 
+    useEffect(() => {
+        // Value is provided to input via props and onChange never fires. We have to save draft manually.
+        if (shouldSaveDraft && formID !== '') {
+            FormActions.setDraftValues(formID, {[inputID]: selectedDate});
+        }
+
+        if (selectedDate === value || _.isUndefined(value)) {
+            return;
+        }
+
+        setSelectedDate(value);
+    }, [formID, inputID, selectedDate, shouldSaveDraft, value]);
+
     return (
         <View style={styles.datePickerRoot}>
             <View style={[isSmallScreenWidth ? styles.flex2 : {}, styles.pointerEventsNone]}>

src/components/Form/FormProvider.js

@@ -48,7 +48,7 @@ const propTypes = {
     }),
 
     /** Contains draft values for each input in the form */
-    draftValues: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.objectOf(Date)])),
+    draftValues: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number, PropTypes.objectOf(Date), PropTypes.arrayOf(PropTypes.string)])),
 
     /** Should the button be enabled when offline */
     enabledWhenOffline: PropTypes.bool,

src/components/Form/FormWrapper.js

@@ -57,8 +57,9 @@ const propTypes = {
     /** Container styles */
     style: stylePropTypes,
 
-    /** Submit button styles */
-    submitButtonStyles: stylePropTypes,
+    /** Submit button container styles */
+    // eslint-disable-next-line react/forbid-prop-types
+    submitButtonStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Custom content to display in the footer after submit button */
     footerContent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -93,10 +94,10 @@ function FormWrapper(props) {
         footerContent,
         isSubmitButtonVisible,
         style,
-        submitButtonStyles,
         enabledWhenOffline,
         isSubmitActionDangerous,
         formID,
+        submitButtonStyles,
     } = props;
     const formRef = useRef(null);
     const formContentRef = useRef(null);