feat: verify identity

Expensify · Nov 24, 2023 · 88e7b0a · 88e7b0a
1 parent 6beb491
commit 88e7b0a
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 35 deletions.
diff --git a/src/libs/actions/BankAccounts.ts b/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,

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/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>

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js b/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>
     );
 }
 

diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js b/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}

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
@@ -30,6 +31,8 @@ const propTypes = {
 
     /** The draft values of the bank account being setup */
     reimbursementAccountDraft: reimbursementAccountDraftPropTypes,
+
+    onBackButtonPress: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -44,7 +47,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}) {
+function PersonalInfo({reimbursementAccount, reimbursementAccountDraft, onBackButtonPress}) {
     const {translate} = useLocalize();
 
     const values = useMemo(() => getSubstepValues(personalInfoStepKeys, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
@@ -63,7 +66,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
 
     const handleBackButtonPress = () => {
         if (screenIndex === 0) {
-            Navigation.goBack(ROUTES.HOME);
+            onBackButtonPress();
         } else {
             prevScreen();
         }
@@ -84,7 +87,7 @@ function PersonalInfo({reimbursementAccount, reimbursementAccountDraft}) {
                 <InteractiveStepSubHeader
                     onStepSelected={() => {}}
                     // TODO Will be replaced with proper values
-                    startStep={1}
+                    startStep={2}
                     stepNames={STEP_NAMES}
                 />
             </View>

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js b/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>
     );
 }
 

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/FullName.js b/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
                     />

diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js b/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}

diff --git a/src/pages/ReimbursementAccount/ReimbursementAccountPage.js b/src/pages/ReimbursementAccount/ReimbursementAccountPage.js
@@ -494,11 +494,8 @@ class ReimbursementAccountPage extends React.Component {
             const shouldShowOnfido = this.props.onfidoToken && !achData.isOnfidoSetupComplete;
             return (
                 <RequestorStep
-                    ref={this.requestorStepRef}
-                    reimbursementAccount={this.props.reimbursementAccount}
                     onBackButtonPress={this.goBack}
                     shouldShowOnfido={Boolean(shouldShowOnfido)}
-                    getDefaultStateForField={this.getDefaultStateForField}
                 />
             );
         }

diff --git a/src/pages/ReimbursementAccount/RequestorStep.js b/src/pages/ReimbursementAccount/RequestorStep.js
@@ -1,29 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import VerifyIdentity from '@pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity';
 import PersonalInfo from './PersonalInfo/PersonalInfo';
-import {reimbursementAccountPropTypes} from './reimbursementAccountPropTypes';
-import RequestorOnfidoStep from './RequestorOnfidoStep';
 
 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}) => {
     if (shouldShowOnfido) {
-        return (
-            <RequestorOnfidoStep
-                ref={ref}
-                reimbursementAccount={reimbursementAccount}
-                onBackButtonPress={onBackButtonPress}
-            />
-        );
+        return <VerifyIdentity onBackButtonPress={onBackButtonPress} />;
     }
 
-    return <PersonalInfo />;
+    return <PersonalInfo onBackButtonPress={onBackButtonPress} />;
 });
 
 RequestorStep.propTypes = propTypes;

diff --git a/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js b/src/pages/ReimbursementAccount/VerifyIdentity/VerifyIdentity.js
@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import React, {useCallback} 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 {reimbursementAccountPropTypes} from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
+import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes';
+import getDefaultValueForReimbursementAccountField from '@pages/ReimbursementAccount/utils/getDefaultValueForReimbursementAccountField';
+import OnfidoInitialize from '@pages/ReimbursementAccount/VerifyIdentity/substeps/OnfidoInitialize';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as BankAccounts from '@userActions/BankAccounts';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+const propTypes = {
+    /** Reimbursement account from ONYX */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
+    onBackButtonPress: PropTypes.func.isRequired,
+};
+
+const defaultProps = {
+    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps,
+};
+
+// TODO Will most likely come from different place
+const STEPS_HEADER_HEIGHT = 40;
+const STEP_NAMES = ['1', '2', '3', '4', '5'];
+
+const bodyContent = [OnfidoInitialize];
+
+function VerifyIdentity({reimbursementAccount, onBackButtonPress}) {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const submit = useCallback(
+        (onfidoData) => {
+            BankAccounts.verifyIdentityForBankAccount(getDefaultValueForReimbursementAccountField(reimbursementAccount, 'bankAccountID', 0), onfidoData);
+            BankAccounts.updateReimbursementAccountDraft({isOnfidoSetupComplete: true});
+        },
+        [reimbursementAccount],
+    );
+
+    const {componentToRender: SubStep, isEditing, nextScreen, moveTo} = useSubStep({bodyContent, startFrom: 0, onFinished: submit});
+
+    return (
+        <ScreenWrapper testID={VerifyIdentity.displayName}>
+            <HeaderWithBackButton
+                onBackButtonPress={onBackButtonPress}
+                title={translate('onfidoStep.verifyIdentity')}
+            />
+            <View style={[styles.ph5, styles.mv3, {height: STEPS_HEADER_HEIGHT}]}>
+                <InteractiveStepSubHeader
+                    onStepSelected={() => {}}
+                    startStep={3}
+                    stepNames={STEP_NAMES}
+                />
+            </View>
+            <SubStep
+                isEditing={isEditing}
+                onNext={nextScreen}
+                onMove={moveTo}
+            />
+        </ScreenWrapper>
+    );
+}
+
+VerifyIdentity.propTypes = propTypes;
+VerifyIdentity.defaultProps = defaultProps;
+VerifyIdentity.displayName = 'VerifyIdentity';
+
+export default withOnyx({
+    reimbursementAccount: {
+        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+    },
+})(VerifyIdentity);