feat: verify identity step

src/libs/actions/BankAccounts.ts

@@ -119,6 +119,18 @@ function getVBBADataForOnyx(currentStep?: BankAccountStep): OnyxData {
     };
 }
 
+function addBusinessWebstieForDraft(website: string) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, {website});
+}
+
+function addBusinessAddressForDraft(businessAddress: {addressStreet?: string; addressCity?: string; addressState?: string; addressZipCode?: string}) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, businessAddress);
+}
+
+function addPersonalAddressForDraft(personalAddress: {requestorAddressStreet?: string; requestorAddressCity?: string; requestorAddressState?: string; requestorAddressZipCode?: string}) {
+    Onyx.merge(ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT, personalAddress);
+}
+
 /**
  * Submit Bank Account step with Plaid data so php can perform some checks.
  */
@@ -433,6 +445,9 @@ function setReimbursementAccountLoading(isLoading: boolean) {
 }
 
 export {
+    addBusinessWebstieForDraft,
+    addBusinessAddressForDraft,
+    addPersonalAddressForDraft,
     addPersonalBankAccount,
     clearOnfidoToken,
     clearPersonalBankAccount,

src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js

@@ -125,7 +125,7 @@ function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, policyID
                 <InteractiveStepSubHeader
                     onStepSelected={() => {}}
                     // TODO Will be replaced with proper values
-                    startStep={2}
+                    startStep={1}
                     stepNames={STEP_NAMES}
                 />
             </View>

src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -9,6 +9,7 @@ import {reimbursementAccountDefaultProps, reimbursementAccountPropTypes} from '@
 import subStepPropTypes from '@pages/ReimbursementAccount/subStepPropTypes';
 import getDefaultValueForReimbursementAccountField from '@pages/ReimbursementAccount/utils/getDefaultValueForReimbursementAccountField';
 import styles from '@styles/styles';
+import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -58,12 +59,17 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}) {
         zipCode: getDefaultValueForReimbursementAccountField(reimbursementAccount, companyBusinessInfoKey.ZIP_CODE, ''),
     };
 
+    const handleSubmit = (values) => {
+        BankAccounts.addBusinessAddressForDraft(values);
+        onNext();
+    };
+
     return (
-        <Form
+        <FormProvider
             formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
             submitButtonText={isEditing ? translate('common.confirm') : translate('common.next')}
             validate={validate}
-            onSubmit={onNext}
+            onSubmit={handleSubmit}
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
@@ -76,7 +82,7 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}) {
                 defaultValues={defaultValues}
                 streetTranslationKey="common.companyAddress"
             />
-        </Form>
+        </FormProvider>
     );
 }
 

src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js

@@ -1,7 +1,7 @@
 import Str from 'expensify-common/lib/str';
 import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import Form from '@components/Form';
 import Text from '@components/Text';
@@ -12,6 +12,7 @@ import {reimbursementAccountDefaultProps, reimbursementAccountPropTypes} from '@
 import subStepPropTypes from '@pages/ReimbursementAccount/subStepPropTypes';
 import getDefaultValueForReimbursementAccountField from '@pages/ReimbursementAccount/utils/getDefaultValueForReimbursementAccountField';
 import styles from '@styles/styles';
+import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -61,6 +62,10 @@ function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing
 
     const defaultCompanyWebsite = getDefaultValueForReimbursementAccountField(reimbursementAccount, companyWebsiteKey, defaultWebsiteExample);
 
+    useEffect(() => {
+        BankAccounts.addBusinessWebstieForDraft(defaultCompanyWebsite);
+    }, [defaultCompanyWebsite]);
+
     return (
         <Form
             formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}

src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js

@@ -1,12 +1,12 @@
-import React, {useCallback, useMemo} from 'react';
+import PropTypes from 'prop-types';
+import React, {forwardRef, useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import InteractiveStepSubHeader from '@components/InteractiveStepSubHeader';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useLocalize from '@hooks/useLocalize';
 import useSubStep from '@hooks/useSubStep';
-import Navigation from '@libs/Navigation/Navigation';
 import reimbursementAccountDraftPropTypes from '@pages/ReimbursementAccount/ReimbursementAccountDraftPropTypes';
 import {reimbursementAccountPropTypes} from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
 import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
@@ -17,7 +17,6 @@ import styles from '@styles/styles';
 import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ROUTES from '@src/ROUTES';
 import Address from './substeps/Address';
 import Confirmation from './substeps/Confirmation';
 import DateOfBirth from './substeps/DateOfBirth';
@@ -30,6 +29,8 @@ const propTypes = {
 
     /** The draft values of the bank account being setup */
     reimbursementAccountDraft: reimbursementAccountDraftPropTypes,
+
+    onBackButtonPress: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -44,7 +45,7 @@ const STEP_NAMES = ['1', '2', '3', '4', '5'];
 const bodyContent = [FullName, DateOfBirth, SocialSecurityNumber, Address, Confirmation];
 const personalInfoStepKeys = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
 
-function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
+const PersonalInfo = forwardRef(({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}, ref) => {
     const {translate} = useLocalize();
 
     const values = useMemo(() => getSubstepValues(personalInfoStepKeys, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
@@ -63,14 +64,15 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
 
     const handleBackButtonPress = () => {
         if (screenIndex === 0) {
-            Navigation.goBack(ROUTES.HOME);
+            onBackButtonPress();
         } else {
             prevScreen();
         }
     };
 
     return (
         <ScreenWrapper
+            ref={ref}
             testID={PersonalInfo.displayName}
             includeSafeAreaPaddingBottom={false}
             shouldEnablePickerAvoiding={false}
@@ -84,7 +86,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
                 <InteractiveStepSubHeader
                     onStepSelected={() => {}}
                     // TODO Will be replaced with proper values
-                    startStep={1}
+                    startStep={2}
                     stepNames={STEP_NAMES}
                 />
             </View>
@@ -95,7 +97,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
             />
         </ScreenWrapper>
     );
-}
+});
 
 PersonalInfo.propTypes = propTypes;
 PersonalInfo.defaultProps = defaultProps;

src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import Form from '@components/Form';
+import FormProvider from '@components/Form/FormProvider';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import * as ValidationUtils from '@libs/ValidationUtils';
@@ -12,6 +12,7 @@ import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimburs
 import subStepPropTypes from '@pages/ReimbursementAccount/subStepPropTypes';
 import getDefaultValueForReimbursementAccountField from '@pages/ReimbursementAccount/utils/getDefaultValueForReimbursementAccountField';
 import styles from '@styles/styles';
+import * as BankAccounts from '@userActions/BankAccounts';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 
@@ -61,12 +62,17 @@ function Address({reimbursementAccount, onNext, isEditing}) {
         zipCode: getDefaultValueForReimbursementAccountField(reimbursementAccount, personalInfoStepKey.ZIP_CODE, ''),
     };
 
+    const handleSubmit = (values) => {
+        BankAccounts.addPersonalAddressForDraft(values);
+        onNext();
+    };
+
     return (
-        <Form
+        <FormProvider
             formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
             submitButtonText={isEditing ? translate('common.confirm') : translate('common.next')}
             validate={validate}
-            onSubmit={onNext}
+            onSubmit={handleSubmit}
             submitButtonStyles={[styles.mb0, styles.pb5]}
             style={[styles.mh5, styles.flexGrow1]}
         >
@@ -85,7 +91,7 @@ function Address({reimbursementAccount, onNext, isEditing}) {
                     containerStyles={[styles.mt5]}
                 />
             </View>
-        </Form>
+        </FormProvider>
     );
 }
 

src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.js

@@ -1,3 +1,4 @@
+import lodashGet from 'lodash/get';
 import React, {useMemo} from 'react';
 import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -38,6 +39,7 @@ const personalInfoStepKeys = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY;
 function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}) {
     const {translate} = useLocalize();
 
+    const isLoading = lodashGet(reimbursementAccount, 'isLoading', false);
     const values = useMemo(() => getSubstepValues(personalInfoStepKeys, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount);
 
@@ -117,6 +119,7 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
                     )}
                     <Button
                         success
+                        isLoading={isLoading}
                         style={[styles.w100, styles.mt2, styles.pb5]}
                         onPress={onNext}
                         text={translate('common.confirm')}

src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.js

@@ -55,8 +55,8 @@ function FullName({reimbursementAccount, onNext, isEditing}) {
                     <TextInput
                         inputID={personalInfoStepKey.FIRST_NAME}
                         label={translate('personalInfoStep.legalFirstName')}
-                        accessibilityLabel={translate('personalInfoStep.legalFirstName')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        aria-label={translate('personalInfoStep.legalFirstName')}
+                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={defaultValues.firstName}
                         shouldSaveDraft
                     />
@@ -65,8 +65,8 @@ function FullName({reimbursementAccount, onNext, isEditing}) {
                     <TextInput
                         inputID={personalInfoStepKey.LAST_NAME}
                         label={translate('personalInfoStep.legalLastName')}
-                        accessibilityLabel={translate('personalInfoStep.legalLastName')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        aria-label={translate('personalInfoStep.legalLastName')}
+                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         defaultValue={defaultValues.lastName}
                         shouldSaveDraft
                     />

src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js

@@ -57,8 +57,8 @@ function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}) {
                     <TextInput
                         inputID={personalInfoStepKey.SSN_LAST_4}
                         label={translate('personalInfoStep.last4SSN')}
-                        accessibilityLabel={translate('personalInfoStep.last4SSN')}
-                        accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT}
+                        aria-label={translate('personalInfoStep.last4SSN')}
+                        role={CONST.ACCESSIBILITY_ROLE.TEXT}
                         containerStyles={[styles.mt4]}
                         keyboardType={CONST.KEYBOARD_TYPE.NUMBER_PAD}
                         defaultValue={defaultSsnLast4}

src/pages/ReimbursementAccount/ReimbursementAccountPage.js

@@ -495,10 +495,8 @@ class ReimbursementAccountPage extends React.Component {
             return (
                 <RequestorStep
                     ref={this.requestorStepRef}
-                    reimbursementAccount={this.props.reimbursementAccount}
                     onBackButtonPress={this.goBack}
                     shouldShowOnfido={Boolean(shouldShowOnfido)}
-                    getDefaultStateForField={this.getDefaultStateForField}
                 />
             );
         }

src/pages/ReimbursementAccount/RequestorStep.js

@@ -1,29 +1,25 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import PersonalInfo from './PersonalInfo/PersonalInfo';
-import {reimbursementAccountPropTypes} from './reimbursementAccountPropTypes';
-import RequestorOnfidoStep from './RequestorOnfidoStep';
+import VerifyIdentity from './VerifyIdentity/VerifyIdentity';
 
 const propTypes = {
     onBackButtonPress: PropTypes.func.isRequired,
-    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
-
     /** If we should show Onfido flow */
     shouldShowOnfido: PropTypes.bool.isRequired,
 };
 
-const RequestorStep = React.forwardRef(({reimbursementAccount, shouldShowOnfido, onBackButtonPress}, ref) => {
+const RequestorStep = React.forwardRef(({shouldShowOnfido, onBackButtonPress}, ref) => {
     if (shouldShowOnfido) {
-        return (
-            <RequestorOnfidoStep
-                ref={ref}
-                reimbursementAccount={reimbursementAccount}
-                onBackButtonPress={onBackButtonPress}
-            />
-        );
+        return <VerifyIdentity onBackButtonPress={onBackButtonPress} />;
     }
 
-    return <PersonalInfo />;
+    return (
+        <PersonalInfo
+            ref={ref}
+            onBackButtonPress={onBackButtonPress}
+        />
+    );
 });
 
 RequestorStep.propTypes = propTypes;