Business Info Page

src/CONST.ts

@@ -180,6 +180,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: {
@@ -481,6 +497,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: 'https://dev.new.expensify.com:',

src/components/Form/FormWrapper.js

@@ -169,7 +169,6 @@ function FormWrapper(props) {
             isSubmitActionDangerous,
             isSubmitButtonVisible,
             onSubmit,
-            submitButtonStyles,
             style,
             submitButtonStyles,
             submitButtonText,

src/components/StatePicker/index.js

@@ -7,6 +7,7 @@ import FormHelpMessage from '@components/FormHelpMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import refPropTypes from '@components/refPropTypes';
 import useLocalize from '@hooks/useLocalize';
+import stylePropTypes from '@styles/stylePropTypes';
 import styles from '@styles/styles';
 import StateSelectorModal from './StateSelectorModal';
 
@@ -25,6 +26,9 @@ const propTypes = {
 
     /** Label to display on field */
     label: PropTypes.string,
+
+    /** Any additional styles to apply */
+    wrapperStyle: stylePropTypes,
 };
 
 const defaultProps = {
@@ -33,9 +37,10 @@ const defaultProps = {
     errorText: '',
     onInputChange: () => {},
     label: undefined,
+    wrapperStyle: {},
 };
 
-function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
+function StatePicker({value, errorText, onInputChange, forwardedRef, label, wrapperStyle}) {
     const {translate} = useLocalize();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
     const [searchValue, setSearchValue] = useState('');
@@ -67,6 +72,7 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
                 description={label || translate('common.state')}
                 descriptionTextStyle={descStyle}
                 onPress={showPickerModal}
+                wrapperStyle={wrapperStyle}
             />
             <View style={styles.ml5}>
                 <FormHelpMessage message={errorText} />

src/hooks/useSubStep.js

@@ -2,13 +2,13 @@ import PropTypes from 'prop-types';
 import {useCallback, useRef, useState} from 'react';
 
 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

@@ -1365,9 +1365,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

@@ -1387,6 +1387,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 {parsePhoneNumber} from 'awesome-phonenumber';
+import lodashGet from 'lodash/get';
+import PropTypes from 'prop-types';
+import React, {useCallback, useMemo} from 'react';
+import {View} from 'react-native';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+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';
+import getDefaultStateForField from '@pages/ReimbursementAccount/utils/getDefaultStateForField';
+import getInitialSubstepForBusinessInfo from '@pages/ReimbursementAccount/utils/getInitialSubstepForBusinessInfo';
+import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues';
+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 AddressBusiness from './substeps/AddressBusiness';
+import ConfirmationBusiness from './substeps/ConfirmationBusiness';
+import IncorporationDateBusiness from './substeps/IncorporationDateBusiness';
+import IncorporationStateBusiness from './substeps/IncorporationStateBusiness';
+import NameBusiness from './substeps/NameBusiness';
+import PhoneNumberBusiness from './substeps/PhoneNumberBusiness';
+import TaxIdBusiness from './substeps/TaxIdBusiness';
+import TypeBusiness from './substeps/TypeBusiness';
+import WebsiteBusiness from './substeps/WebsiteBusiness';
+
+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 values = useMemo(() => getSubstepValues(businessInfoStepKeys, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]);
+
+    const submit = useCallback(() => {
+        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);
+    }, [reimbursementAccount, values, getBankAccountFields, policyID]);
+
+    const startFrom = useMemo(() => getInitialSubstepForBusinessInfo(values), [values]);
+
+    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);