Business Info Page

src/CONST.ts

@@ -178,6 +178,22 @@ const CONST = {
                 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',
+            },
+        },
         PLAID: {
             ALLOWED_THROTTLED_COUNT: 2,
             ERROR: {
@@ -475,6 +491,7 @@ 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: 'http://localhost:',

src/hooks/useSubStep.js

@@ -2,13 +2,13 @@ import {useState, useRef, useCallback} from 'react';
 import PropTypes from 'prop-types';
 
 const propTypes = {
-    /** an array of substep components */
+    /** An array of substep components */
     bodyContent: PropTypes.arrayOf(PropTypes.element).isRequired,
 
-    /** an index of the component from bodyContent array to start from */
+    /** An index of the component from bodyContent array to start from */
     onFinished: PropTypes.func.isRequired,
 
-    /** a callback to be fired when pressing Confirm on the last substep screen */
+    /** A callback to be fired when pressing Confirm on the last substep screen */
     startFrom: PropTypes.number,
 };
 

src/languages/en.ts

@@ -1367,9 +1367,40 @@ export default {
         last4SSN: 'Last 4 Social Security Number',
         enterYourAddress: 'Enter your address.',
         address: 'Address',
-        letsDoubleCheck: "Let's double check everything looks right",
+        letsDoubleCheck: "Let's double check that everything looks right",
         byAddingThisBankAccount: 'By adding this bank account, you confirm that you have read, understand and accept',
     },
+    businessInfoStep: {
+        businessInfo: 'Business info',
+        enterTheNameOfYourBusiness: 'Enter the name of your business.',
+        businessName: 'Legal business name',
+        enterYourCompanysTaxIdNumber: 'Enter your company’s Tax ID number.',
+        taxIDNumber: 'Tax ID number',
+        taxIDNumberPlaceholder: '9 digits',
+        enterYourCompanysWebsite: 'Enter your company’s website.',
+        companyWebsite: 'Company website',
+        enterYourCompanysPhoneNumber: 'Enter your company’s phone number.',
+        enterYourCompanysAddress: 'Enter your company’s address.',
+        selectYourCompanysType: 'Select your company’s type.',
+        companyType: 'Company type',
+        incorporationType: {
+            LLC: 'LLC',
+            CORPORATION: 'Corp',
+            PARTNERSHIP: 'Partnership',
+            COOPERATIVE: 'Cooperative',
+            SOLE_PROPRIETORSHIP: 'Sole proprietorship',
+            OTHER: 'Other',
+        },
+        selectYourCompanysIncorporationDate: 'Select your company’s incorporation date.',
+        incorporationDate: 'Incorporation date',
+        incorporationDatePlaceholder: 'Start date (yyyy-mm-dd)',
+        incorporationState: 'Incorporation state',
+        pleaseSelectTheStateYourCompanyWasIncorporatedIn: 'Please select the state your company was incorporated in.',
+        letsDoubleCheck: "Let's double check that everything looks right",
+        companyAddress: 'Company address',
+        listOfRestrictedBusinesses: 'list of restricted businesses',
+        confirmCompanyIsNot: 'I confirm that this company is not on the',
+    },
     validationStep: {
         headerTitle: 'Validate Bank Account',
         buttonText: 'Finish setup',

src/languages/es.ts

@@ -1390,6 +1390,37 @@ export default {
         letsDoubleCheck: 'Revisemos que todo esté bien',
         byAddingThisBankAccount: 'Agregando esta cuenta bancaria, confirmas que as leído, entendido y aceptado',
     },
+    businessInfoStep: {
+        businessInfo: 'Información de Negocio',
+        enterTheNameOfYourBusiness: 'Introduzca el nombre de su negocio.',
+        businessName: 'Nombre del Negocio',
+        enterYourCompanysTaxIdNumber: 'Introduzca el número de identificación fiscal.',
+        taxIDNumber: 'Número de identificación fiscal',
+        taxIDNumberPlaceholder: '9 dígitos',
+        enterYourCompanysWebsite: 'Introduzca el sitio web de su compañia.',
+        companyWebsite: 'Sitio web de la compañia',
+        enterYourCompanysPhoneNumber: 'Introduzca el número de teléfono de su compañia.',
+        enterYourCompanysAddress: 'Introduzca el la dirección de su compañia.',
+        selectYourCompanysType: 'Seleccione el tipo de compañia.',
+        companyType: 'Tipo de compañia',
+        incorporationType: {
+            LLC: 'SRL',
+            CORPORATION: 'Corporación',
+            PARTNERSHIP: 'Asociación',
+            COOPERATIVE: 'Cooperativa',
+            SOLE_PROPRIETORSHIP: 'Empresa unipersonal',
+            OTHER: 'Otros',
+        },
+        selectYourCompanysIncorporationDate: 'Seleccione la fecha de constitución de su empresa.',
+        incorporationDate: 'Fecha de constitución',
+        incorporationDatePlaceholder: 'Fecha de inicio (yyyy-mm-dd)',
+        incorporationState: 'Estado de constitución',
+        pleaseSelectTheStateYourCompanyWasIncorporatedIn: 'Seleccione el estado en el que se constituyó su empresa.',
+        letsDoubleCheck: 'Verifiquemos que todo esté correcto',
+        companyAddress: 'Dirección de la empresa',
+        listOfRestrictedBusinesses: 'lista de negocios restringidos',
+        confirmCompanyIsNot: 'Confirmo que esta empresa no está en la',
+    },
     validationStep: {
         headerTitle: 'Validar cuenta bancaria',
         buttonText: 'Finalizar configuración',

src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js

@@ -0,0 +1,152 @@
+import React, {useCallback, useMemo} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import lodashGet from 'lodash/get';
+import _ from 'underscore';
+import {parsePhoneNumber} from 'awesome-phonenumber';
+import PropTypes from 'prop-types';
+import useSubStep from '../../../hooks/useSubStep';
+import ONYXKEYS from '../../../ONYXKEYS';
+import {reimbursementAccountPropTypes} from '../reimbursementAccountPropTypes';
+import HeaderWithBackButton from '../../../components/HeaderWithBackButton';
+import InteractiveStepSubHeader from '../../../components/InteractiveStepSubHeader';
+import useLocalize from '../../../hooks/useLocalize';
+import styles from '../../../styles/styles';
+import CONST from '../../../CONST';
+import * as BankAccounts from '../../../libs/actions/BankAccounts';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ROUTES from '../../../ROUTES';
+import ScreenWrapper from '../../../components/ScreenWrapper';
+import getDefaultStateForField from '../utils/getDefaultStateForField';
+import NameBusiness from './substeps/NameBusiness';
+import TaxIdBusiness from './substeps/TaxIdBusiness';
+import WebsiteBusiness from './substeps/WebsiteBusiness';
+import PhoneNumberBusiness from './substeps/PhoneNumberBusiness';
+import AddressBusiness from './substeps/AddressBusiness';
+import TypeBusiness from './substeps/TypeBusiness';
+import IncorporationDateBusiness from './substeps/IncorporationDateBusiness';
+import IncorporationStateBusiness from './substeps/IncorporationStateBusiness';
+import ConfirmationBusiness from './substeps/ConfirmationBusiness';
+import getSubstepValues from '../utils/getSubstepValues';
+import reimbursementAccountDraftPropTypes from '../ReimbursementAccountDraftPropTypes';
+import * as ReimbursementAccountProps from '../reimbursementAccountPropTypes';
+import getInitialSubstepForBusinessInfo from '../utils/getInitialSubstepForBusinessInfo';
+
+const propTypes = {
+    /** Reimbursement account from ONYX */
+    reimbursementAccount: reimbursementAccountPropTypes,
+
+    /** The draft values of the bank account being setup */
+    reimbursementAccountDraft: reimbursementAccountDraftPropTypes,
+
+    /* The workspace policyID */
+    policyID: PropTypes.string,
+};
+
+const defaultProps = {
+    reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps,
+    reimbursementAccountDraft: {},
+    policyID: '',
+};
+
+const STEPS_HEADER_HEIGHT = 40;
+// TODO Will most likely come from different place
+const STEP_NAMES = ['1', '2', '3', '4', '5'];
+
+const bodyContent = [
+    NameBusiness,
+    TaxIdBusiness,
+    WebsiteBusiness,
+    PhoneNumberBusiness,
+    AddressBusiness,
+    TypeBusiness,
+    IncorporationDateBusiness,
+    IncorporationStateBusiness,
+    ConfirmationBusiness,
+];
+
+const businessInfoStepKeys = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY;
+
+function BusinessInfo({reimbursementAccount, reimbursementAccountDraft, policyID}) {
+    const {translate} = useLocalize();
+
+    /**
+     * @param {Array} fieldNames
+     *
+     * @returns {*}
+     */
+    const getBankAccountFields = useCallback(
+        (fieldNames) => ({
+            ..._.pick(lodashGet(reimbursementAccount, 'achData'), ...fieldNames),
+            ..._.pick(reimbursementAccountDraft, ...fieldNames),
+        }),
+        [reimbursementAccount, reimbursementAccountDraft],
+    );
+
+    const submit = useCallback(() => {
+        const values = getSubstepValues(businessInfoStepKeys, reimbursementAccountDraft, reimbursementAccount);
+
+        const payload = {
+            bankAccountID: getDefaultStateForField({reimbursementAccount, fieldName: 'bankAccountID', defaultValue: 0}),
+            ...values,
+            ...getBankAccountFields(['routingNumber', 'accountNumber', 'bankName', 'plaidAccountID', 'plaidAccessToken', 'isSavings']),
+            companyTaxID: values.companyTaxID.replace(CONST.REGEX.NON_NUMERIC, ''),
+            companyPhone: parsePhoneNumber(values.companyPhone, {regionCode: CONST.COUNTRY.US}).number.significant,
+        };
+
+        BankAccounts.updateCompanyInformationForBankAccount(payload, policyID);
+    }, [getBankAccountFields, reimbursementAccount, reimbursementAccountDraft, policyID]);
+
+    const startFrom = useMemo(() => getInitialSubstepForBusinessInfo(lodashGet(reimbursementAccount, ['achData'], {})), [reimbursementAccount]);
+
+    const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo} = useSubStep({bodyContent, startFrom, onFinished: submit});
+
+    const handleBackButtonPress = () => {
+        if (screenIndex === 0) {
+            Navigation.goBack(ROUTES.HOME);
+        } else {
+            prevScreen();
+        }
+    };
+
+    return (
+        <ScreenWrapper
+            testID={BusinessInfo.displayName}
+            includeSafeAreaPaddingBottom={false}
+            shouldEnablePickerAvoiding={false}
+            shouldEnableMaxHeight
+        >
+            <HeaderWithBackButton
+                title={translate('businessInfoStep.businessInfo')}
+                guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
+                onBackButtonPress={handleBackButtonPress}
+            />
+            <View style={[styles.ph5, styles.mv3, {height: STEPS_HEADER_HEIGHT}]}>
+                <InteractiveStepSubHeader
+                    onStepSelected={() => {}}
+                    // TODO Will be replaced with proper values
+                    startStep={2}
+                    stepNames={STEP_NAMES}
+                />
+            </View>
+            <SubStep
+                isEditing={isEditing}
+                onNext={nextScreen}
+                onMove={moveTo}
+            />
+        </ScreenWrapper>
+    );
+}
+
+BusinessInfo.propTypes = propTypes;
+BusinessInfo.defaultProps = defaultProps;
+BusinessInfo.displayName = 'BusinessInfo';
+
+export default withOnyx({
+    reimbursementAccount: {
+        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+    },
+    reimbursementAccountDraft: {
+        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT_DRAFT,
+    },
+})(BusinessInfo);

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import {withOnyx} from 'react-native-onyx';
+import {View} from 'react-native';
+import useLocalize from '../../../../hooks/useLocalize';
+import styles from '../../../../styles/styles';
+import Text from '../../../../components/Text';
+import CONST from '../../../../CONST';
+import Form from '../../../../components/Form';
+import ONYXKEYS from '../../../../ONYXKEYS';
+import subStepPropTypes from '../../subStepPropTypes';
+import * as ValidationUtils from '../../../../libs/ValidationUtils';
+import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes';
+import getDefaultStateForField from '../../utils/getDefaultStateForField';
+import AddressForm from '../../AddressForm';
+
+const propTypes = {
+    /** Reimbursement account from ONYX */
+    reimbursementAccount: reimbursementAccountPropTypes.isRequired,
+
+    ...subStepPropTypes,
+};
+
+const companyBusinessInfoKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY;
+
+const INPUT_KEYS = {
+    street: companyBusinessInfoKey.STREET,
+    city: companyBusinessInfoKey.CITY,
+    state: companyBusinessInfoKey.STATE,
+    zipCode: companyBusinessInfoKey.ZIP_CODE,
+};
+
+const REQUIRED_FIELDS = [companyBusinessInfoKey.STREET, companyBusinessInfoKey.CITY, companyBusinessInfoKey.STATE, companyBusinessInfoKey.ZIP_CODE];
+
+const validate = (values) => {
+    const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS);
+
+    if (values.addressStreet && !ValidationUtils.isValidAddress(values.addressStreet)) {
+        errors.addressStreet = 'bankAccount.error.addressStreet';
+    }
+
+    if (values.addressZipCode && !ValidationUtils.isValidZipCode(values.addressZipCode)) {
+        errors.addressZipCode = 'bankAccount.error.zipCode';
+    }
+
+    return errors;
+};
+
+function AddressBusiness({reimbursementAccount, onNext, isEditing}) {
+    const {translate} = useLocalize();
+
+    const defaultValues = {
+        street: getDefaultStateForField({reimbursementAccount, fieldName: companyBusinessInfoKey.STREET, defaultValue: ''}),
+        city: getDefaultStateForField({reimbursementAccount, fieldName: companyBusinessInfoKey.CITY, defaultValue: ''}),
+        state: getDefaultStateForField({reimbursementAccount, fieldName: companyBusinessInfoKey.STATE, defaultValue: ''}),
+        zipCode: getDefaultStateForField({reimbursementAccount, fieldName: companyBusinessInfoKey.ZIP_CODE, defaultValue: ''}),
+    };
+
+    return (
+        <Form
+            formID={ONYXKEYS.REIMBURSEMENT_ACCOUNT}
+            submitButtonText={isEditing ? translate('common.confirm') : translate('common.next')}
+            validate={validate}
+            onSubmit={onNext}
+            submitButtonStyles={[styles.mb0, styles.pb5]}
+            style={[styles.mh5, styles.flexGrow1]}
+        >
+            <View>
+                <Text style={[styles.textHeadline]}>{translate('businessInfoStep.enterYourCompanysAddress')}</Text>
+                <Text>{translate('common.noPO')}</Text>
+                <AddressForm
+                    inputKeys={INPUT_KEYS}
+                    shouldSaveDraft
+                    translate={translate}
+                    defaultValues={defaultValues}
+                    streetTranslationKey="common.companyAddress"
+                />
+            </View>
+        </Form>
+    );
+}
+
+AddressBusiness.propTypes = propTypes;
+AddressBusiness.displayName = 'AddressBusiness';
+
+export default withOnyx({
+    reimbursementAccount: {
+        key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
+    },
+})(AddressBusiness);