From 4f1331773244c5b20751a1e0b4469a5c05dfd3c4 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Fri, 3 Nov 2023 08:54:08 +0100 Subject: [PATCH 01/31] add: BusinessInfo and NameBusiness substep --- src/CONST.ts | 7 ++ src/hooks/useSubStep.js | 6 +- src/languages/en.ts | 5 + .../BusinessInfo/BusinessInfo.js | 99 +++++++++++++++++++ .../BusinessInfo/substeps/NameBusiness.js | 78 +++++++++++++++ 5 files changed, 192 insertions(+), 3 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 6b5433ca19f3..b9c895845264 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -178,6 +178,13 @@ const CONST = { ZIP_CODE: 'requestorAddressZipCode', }, }, + BUSINESS_INFO_STEP: { + INPUT_KEY: { + COMPANY_NAME: 'companyName', + COMPANY_TAX_ID: 'companyTaxID', + COMPANY_PHONE: 'companyPhone', + }, + }, PLAID: { ALLOWED_THROTTLED_COUNT: 2, ERROR: { diff --git a/src/hooks/useSubStep.js b/src/hooks/useSubStep.js index 86071e278913..4810e0ab4b41 100644 --- a/src/hooks/useSubStep.js +++ b/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, }; diff --git a/src/languages/en.ts b/src/languages/en.ts index 24802a30364b..b414d63e3479 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1370,6 +1370,11 @@ export default { letsDoubleCheck: "Let's double check 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: 'Business name', + }, validationStep: { headerTitle: 'Validate Bank Account', buttonText: 'Finish setup', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js new file mode 100644 index 000000000000..0f6cc3f7d657 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -0,0 +1,99 @@ +import React, {useCallback, useMemo} from 'react'; +import {View} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import _ from 'lodash'; +import lodashGet from 'lodash/get'; +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 getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; +import NameBusiness from './substeps/NameBusiness'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, +}; + +const STEPS_HEADER_HEIGHT = 40; +// TODO Will most likely come from different place +const STEP_NAMES = ['1', '2', '3', '4', '5']; + +const bodyContent = [NameBusiness]; + +const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; + +function BusinessInfo({reimbursementAccount}) { + const {translate} = useLocalize(); + + const submit = useCallback(() => { + const values = { + [businessInfoStep.COMPANY_NAME]: lodashGet(reimbursementAccount, ['achData', businessInfoStep.COMPANY_NAME], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], ''), + // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], ''), + }; + + const payload = { + bankAccountID: _.get(reimbursementAccount, 'achData.bankAccountID', 0), + ...values, + }; + + BankAccounts.updateCompanyInformationForBankAccount(payload); + }, [reimbursementAccount]); + + const startFrom = useMemo(() => getInitialSubstepForPersonalInfo(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 ( + <> + + + {}} + // TODO Will be replaced with proper values + startStep={2} + stepNames={STEP_NAMES} + /> + + + + ); +} + +BusinessInfo.propTypes = propTypes; +BusinessInfo.displayName = 'BusinessInfo'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(BusinessInfo); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js new file mode 100644 index 000000000000..0d3d5164769f --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js @@ -0,0 +1,78 @@ +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import lodashGet from 'lodash/get'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import Text from '../../../../components/Text'; +import TextInput from '../../../../components/TextInput'; +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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + ...subStepPropTypes, +}; + +const REQUIRED_FIELDS = [CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME]; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); + +function NameBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultCompanyName = lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME], ''); + + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0); + const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME]: values[CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.enterTheNameOfYourBusiness')} + + +
+ ); +} + +NameBusiness.propTypes = propTypes; +NameBusiness.displayName = 'NameBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(NameBusiness); From d493d3a60b64f6de96322d6f59b50ad38bafcb91 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Fri, 3 Nov 2023 09:19:42 +0100 Subject: [PATCH 02/31] add: TaxIdBusiness substep --- src/languages/en.ts | 3 + .../BusinessInfo/BusinessInfo.js | 3 +- .../BusinessInfo/substeps/NameBusiness.js | 10 +-- .../BusinessInfo/substeps/TaxIdBusiness.js | 81 +++++++++++++++++++ 4 files changed, 91 insertions(+), 6 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js diff --git a/src/languages/en.ts b/src/languages/en.ts index b414d63e3479..eea48d7879cd 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1374,6 +1374,9 @@ export default { businessInfo: 'Business info', enterTheNameOfYourBusiness: 'Enter the name of your business.', businessName: 'Business name', + enterYourCompanysTaxIdNumber: 'Enter your company’s Tax ID number.', + taxIDNumber: 'Tax ID number', + taxIDNumberPlaceholder: '9 digits', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 0f6cc3f7d657..697f2c5e4da9 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -16,6 +16,7 @@ import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; import NameBusiness from './substeps/NameBusiness'; +import TaxIdBusiness from './substeps/TaxIdBusiness'; const propTypes = { /** Reimbursement account from ONYX */ @@ -26,7 +27,7 @@ const STEPS_HEADER_HEIGHT = 40; // TODO Will most likely come from different place const STEP_NAMES = ['1', '2', '3', '4', '5']; -const bodyContent = [NameBusiness]; +const bodyContent = [NameBusiness, TaxIdBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js index 0d3d5164769f..8f72c9e44e12 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js @@ -21,21 +21,21 @@ const propTypes = { ...subStepPropTypes, }; -const REQUIRED_FIELDS = [CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME]; +const companyNameKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME; -const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyNameKey]); function NameBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultCompanyName = lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME], ''); + const defaultCompanyName = lodashGet(reimbursementAccount, ['achData', companyNameKey], ''); const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0); const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName); const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ - [CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME]: values[CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME], + [companyNameKey]: values[companyNameKey], }); onNext(); @@ -56,7 +56,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}) { label={translate('businessInfoStep.businessName')} accessibilityLabel={translate('businessInfoStep.businessName')} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - inputID={CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_NAME} + inputID={companyNameKey} containerStyles={[styles.mt4]} disabled={shouldDisableCompanyName} defaultValue={defaultCompanyName} diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js new file mode 100644 index 000000000000..f05607f5a334 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js @@ -0,0 +1,81 @@ +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import lodashGet from 'lodash/get'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import Text from '../../../../components/Text'; +import TextInput from '../../../../components/TextInput'; +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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + ...subStepPropTypes, +}; + +const companyTaxIdKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_TAX_ID; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyTaxIdKey]); + +function TaxIdBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultCompanyTaxId = lodashGet(reimbursementAccount, ['achData', companyTaxIdKey], ''); + + const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0); + + const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyTaxIdKey]: values[companyTaxIdKey], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.enterYourCompanysTaxIdNumber')} + + +
+ ); +} + +TaxIdBusiness.propTypes = propTypes; +TaxIdBusiness.displayName = 'TaxIdBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(TaxIdBusiness); From 82e383c7e6d7a1af959a0799661b6b69af5022c0 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Fri, 3 Nov 2023 10:40:03 +0100 Subject: [PATCH 03/31] add: WebsiteBusiness substep --- src/CONST.ts | 1 + src/languages/en.ts | 2 + .../BusinessInfo/BusinessInfo.js | 3 +- .../BusinessInfo/substeps/WebsiteBusiness.js | 105 ++++++++++++++++++ 4 files changed, 110 insertions(+), 1 deletion(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index b9c895845264..46656560e1c8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -183,6 +183,7 @@ const CONST = { COMPANY_NAME: 'companyName', COMPANY_TAX_ID: 'companyTaxID', COMPANY_PHONE: 'companyPhone', + COMPANY_WEBSITE: 'website', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index eea48d7879cd..9769f68f5b5c 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1377,6 +1377,8 @@ export default { enterYourCompanysTaxIdNumber: 'Enter your company’s Tax ID number.', taxIDNumber: 'Tax ID number', taxIDNumberPlaceholder: '9 digits', + enterYourCompanysWebsite: 'Enter your company’s website.', + companyWebsite: 'Company website', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 697f2c5e4da9..59b989e7b38d 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -17,6 +17,7 @@ import ROUTES from '../../../ROUTES'; import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; import NameBusiness from './substeps/NameBusiness'; import TaxIdBusiness from './substeps/TaxIdBusiness'; +import WebsiteBusiness from './substeps/WebsiteBusiness'; const propTypes = { /** Reimbursement account from ONYX */ @@ -27,7 +28,7 @@ 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]; +const bodyContent = [NameBusiness, TaxIdBusiness, WebsiteBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js new file mode 100644 index 000000000000..87745983dcb8 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js @@ -0,0 +1,105 @@ +import React, {useMemo} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import lodashGet from 'lodash/get'; +import PropTypes from 'prop-types'; +import Str from 'expensify-common/lib/str'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import Text from '../../../../components/Text'; +import TextInput from '../../../../components/TextInput'; +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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + /** Session info for the currently logged in user. */ + session: PropTypes.shape({ + /** Currently logged in user email */ + email: PropTypes.string, + }), + + /** Object with various information about the user */ + user: PropTypes.shape({ + /** Whether or not the user is on a public domain email account or not */ + isFromPublicDomain: PropTypes.bool, + }), + + ...subStepPropTypes, +}; + +const defaultProps = { + session: { + email: null, + }, + user: {}, +}; + +const companyWebsiteKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.COMPANY_WEBSITE; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyWebsiteKey]); + +function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultWebsiteExample = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]); + + const defaultCompanyWebsite = lodashGet(reimbursementAccount, ['achData', companyWebsiteKey], defaultWebsiteExample); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyWebsiteKey]: values[companyWebsiteKey], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.enterYourCompanysWebsite')} + {translate('common.websiteExample')} + + +
+ ); +} + +WebsiteBusiness.propTypes = propTypes; +WebsiteBusiness.defaultProps = defaultProps; +WebsiteBusiness.displayName = 'WebsiteBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, + session: { + key: ONYXKEYS.SESSION, + }, + user: { + key: ONYXKEYS.USER, + }, +})(WebsiteBusiness); From 942d549bb0238cc52f6386a82c6b14efd79ea466 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Fri, 3 Nov 2023 10:53:25 +0100 Subject: [PATCH 04/31] add: PhoneNumberBusiness substep --- src/CONST.ts | 2 +- src/languages/en.ts | 1 + .../BusinessInfo/BusinessInfo.js | 3 +- .../BusinessInfo/substeps/NameBusiness.js | 2 +- .../substeps/PhoneNumberBusiness.js | 75 +++++++++++++++++++ .../BusinessInfo/substeps/TaxIdBusiness.js | 2 +- 6 files changed, 81 insertions(+), 4 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 46656560e1c8..53b397a4aa97 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -182,8 +182,8 @@ const CONST = { INPUT_KEY: { COMPANY_NAME: 'companyName', COMPANY_TAX_ID: 'companyTaxID', - COMPANY_PHONE: 'companyPhone', COMPANY_WEBSITE: 'website', + COMPANY_PHONE: 'companyPhone', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 9769f68f5b5c..cb12bccea0dc 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1379,6 +1379,7 @@ export default { taxIDNumberPlaceholder: '9 digits', enterYourCompanysWebsite: 'Enter your company’s website.', companyWebsite: 'Company website', + enterYourCompanysPhoneNumber: 'Enter your company’s phone number.', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 59b989e7b38d..6b1322920ad1 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -18,6 +18,7 @@ import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPerso import NameBusiness from './substeps/NameBusiness'; import TaxIdBusiness from './substeps/TaxIdBusiness'; import WebsiteBusiness from './substeps/WebsiteBusiness'; +import PhoneNumberBusiness from './substeps/PhoneNumberBusiness'; const propTypes = { /** Reimbursement account from ONYX */ @@ -28,7 +29,7 @@ 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]; +const bodyContent = [NameBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js index 8f72c9e44e12..318a0f6692cd 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js @@ -51,7 +51,7 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}) { submitButtonStyles={[styles.pb5, styles.mb0]} > - {translate('businessInfoStep.enterTheNameOfYourBusiness')} + {translate('businessInfoStep.enterTheNameOfYourBusiness')} ValidationUtils.getFieldRequiredErrors(values, [companyPhoneNumberKey]); + +function PhoneNumberBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultCompanyPhoneNumber = lodashGet(reimbursementAccount, ['achData', companyPhoneNumberKey], ''); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyPhoneNumberKey]: values[companyPhoneNumberKey], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.enterYourCompanysPhoneNumber')} + + +
+ ); +} + +PhoneNumberBusiness.propTypes = propTypes; +PhoneNumberBusiness.displayName = 'NameBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(PhoneNumberBusiness); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js index f05607f5a334..8b1ecca2e70a 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js @@ -52,7 +52,7 @@ function TaxIdBusiness({reimbursementAccount, onNext, isEditing}) { submitButtonStyles={[styles.pb5, styles.mb0]} > - {translate('businessInfoStep.enterYourCompanysTaxIdNumber')} + {translate('businessInfoStep.enterYourCompanysTaxIdNumber')} Date: Fri, 3 Nov 2023 13:28:14 +0100 Subject: [PATCH 05/31] add: extracted getDefaultStateForField util and used it across the flow --- .../BusinessInfo/substeps/NameBusiness.js | 7 ++-- .../substeps/PhoneNumberBusiness.js | 4 +-- .../BusinessInfo/substeps/TaxIdBusiness.js | 6 ++-- .../BusinessInfo/substeps/WebsiteBusiness.js | 3 +- .../PersonalInfo/PersonalInfo.js | 22 ++++++------ .../PersonalInfo/substeps/Address.js | 35 +++++++++---------- .../PersonalInfo/substeps/Confirmation.js | 20 ++++++----- .../PersonalInfo/substeps/DateOfBirth.js | 10 +++--- .../PersonalInfo/substeps/FullName.js | 18 +++++----- .../utils/getDefaultStateForField.js | 15 ++++++++ 10 files changed, 80 insertions(+), 60 deletions(-) create mode 100644 src/pages/ReimbursementAccount/utils/getDefaultStateForField.js diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js index 318a0f6692cd..522116b8d489 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/NameBusiness.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -13,6 +12,7 @@ import subStepPropTypes from '../../subStepPropTypes'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -28,9 +28,10 @@ const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [com function NameBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultCompanyName = lodashGet(reimbursementAccount, ['achData', companyNameKey], ''); + const defaultCompanyName = getDefaultStateForField({reimbursementAccount, fieldName: companyNameKey, defaultValue: ''}); + + const bankAccountID = getDefaultStateForField({reimbursementAccount, fieldName: 'bankAccountID', defaultValue: 0}); - const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0); const shouldDisableCompanyName = Boolean(bankAccountID && defaultCompanyName); const handleSubmit = (values) => { diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js index 8be0b5118649..f9645373017d 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -13,6 +12,7 @@ import subStepPropTypes from '../../subStepPropTypes'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -28,7 +28,7 @@ const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [com function PhoneNumberBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultCompanyPhoneNumber = lodashGet(reimbursementAccount, ['achData', companyPhoneNumberKey], ''); + const defaultCompanyPhoneNumber = getDefaultStateForField({reimbursementAccount, fieldName: companyPhoneNumberKey, defaultValue: ''}); const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js index 8b1ecca2e70a..bd59f65067d5 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TaxIdBusiness.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -13,6 +12,7 @@ import subStepPropTypes from '../../subStepPropTypes'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -28,9 +28,9 @@ const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [com function TaxIdBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultCompanyTaxId = lodashGet(reimbursementAccount, ['achData', companyTaxIdKey], ''); + const defaultCompanyTaxId = getDefaultStateForField({reimbursementAccount, fieldName: companyTaxIdKey, defaultValue: ''}); - const bankAccountID = lodashGet(reimbursementAccount, 'achData.bankAccountID', 0); + const bankAccountID = getDefaultStateForField({reimbursementAccount, fieldName: 'bankAccountID', defaultValue: 0}); const shouldDisableCompanyTaxID = Boolean(bankAccountID && defaultCompanyTaxId); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js index 87745983dcb8..33de53f41915 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/WebsiteBusiness.js @@ -15,6 +15,7 @@ import subStepPropTypes from '../../subStepPropTypes'; import * as ValidationUtils from '../../../../libs/ValidationUtils'; import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -51,7 +52,7 @@ function WebsiteBusiness({reimbursementAccount, user, session, onNext, isEditing const defaultWebsiteExample = useMemo(() => (lodashGet(user, 'isFromPublicDomain', false) ? 'https://' : `https://www.${Str.extractEmailDomain(session.email, '')}`), [user, session]); - const defaultCompanyWebsite = lodashGet(reimbursementAccount, ['achData', companyWebsiteKey], defaultWebsiteExample); + const defaultCompanyWebsite = getDefaultStateForField({reimbursementAccount, fieldName: companyWebsiteKey, defaultValue: defaultWebsiteExample}); const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ diff --git a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js index 45cfacadb79e..7f1b7c5bb2fc 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js +++ b/src/pages/ReimbursementAccount/PersonalInfo/PersonalInfo.js @@ -1,7 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import _ from 'lodash'; import lodashGet from 'lodash/get'; import FullName from './substeps/FullName'; import DateOfBirth from './substeps/DateOfBirth'; @@ -20,6 +19,7 @@ import * as BankAccounts from '../../../libs/actions/BankAccounts'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; +import getDefaultStateForField from '../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -32,23 +32,25 @@ const STEP_NAMES = ['1', '2', '3', '4', '5']; const bodyContent = [FullName, DateOfBirth, SocialSecurityNumber, Address, Confirmation]; +const personalInfoStepKey = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY; + function PersonalInfo({reimbursementAccount}) { const {translate} = useLocalize(); const submit = useCallback(() => { const values = { - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], ''), - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], ''), + [personalInfoStepKey.FIRST_NAME]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.FIRST_NAME, defaultValue: ''}), + [personalInfoStepKey.LAST_NAME]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.LAST_NAME, defaultValue: ''}), + [personalInfoStepKey.DOB]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.DOB, defaultValue: ''}), + [personalInfoStepKey.SSN_LAST_4]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.SSN_LAST_4, defaultValue: ''}), + [personalInfoStepKey.STREET]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STREET, defaultValue: ''}), + [personalInfoStepKey.CITY]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.CITY, defaultValue: ''}), + [personalInfoStepKey.STATE]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STATE, defaultValue: ''}), + [personalInfoStepKey.ZIP_CODE]: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.ZIP_CODE, defaultValue: ''}), }; const payload = { - bankAccountID: _.get(reimbursementAccount, 'achData.bankAccountID', 0), + bankAccountID: getDefaultStateForField({reimbursementAccount, fieldName: 'bankAccountID', defaultValue: 0}), ...values, }; diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js index 96c8d3c4a47d..8e25abd32ae2 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js +++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Address.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -14,6 +13,7 @@ import HelpLinks from '../HelpLinks'; import AddressForm from '../../AddressForm'; import CONST from '../../../../CONST'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -22,19 +22,16 @@ const propTypes = { ...subStepPropTypes, }; +const personalInfoStepKey = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY; + const INPUT_KEYS = { - street: CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET, - city: CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY, - state: CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE, - zipCode: CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE, + street: personalInfoStepKey.STREET, + city: personalInfoStepKey.CITY, + state: personalInfoStepKey.STATE, + zipCode: personalInfoStepKey.ZIP_CODE, }; -const REQUIRED_FIELDS = [ - CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET, - CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY, - CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE, - CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE, -]; +const REQUIRED_FIELDS = [personalInfoStepKey.STREET, personalInfoStepKey.CITY, personalInfoStepKey.STATE, personalInfoStepKey.ZIP_CODE]; const validate = (values) => { const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); @@ -54,18 +51,18 @@ function Address({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); const defaultValues = { - street: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], ''), - city: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], ''), - state: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], ''), - zipCode: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], ''), + street: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STREET, defaultValue: ''}), + city: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.CITY, defaultValue: ''}), + state: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STATE, defaultValue: ''}), + zipCode: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.ZIP_CODE, defaultValue: ''}), }; const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], + [personalInfoStepKey.STREET]: values[personalInfoStepKey.STREET], + [personalInfoStepKey.CITY]: values[personalInfoStepKey.CITY], + [personalInfoStepKey.STATE]: values[personalInfoStepKey.STATE], + [personalInfoStepKey.ZIP_CODE]: values[personalInfoStepKey.ZIP_CODE], }); onNext(); }; diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.js b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.js index d5c1910e2497..afbe3583e51b 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.js +++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.js @@ -1,7 +1,6 @@ import React from 'react'; import {View, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -15,6 +14,7 @@ import Button from '../../../../components/Button'; import ScreenWrapper from '../../../../components/ScreenWrapper'; import * as ErrorUtils from '../../../../libs/ErrorUtils'; import DotIndicatorMessage from '../../../../components/DotIndicatorMessage'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -23,18 +23,20 @@ const propTypes = { ...subStepPropTypes, }; +const personalInfoStepKey = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY; + function Confirmation({reimbursementAccount, onNext, onMove}) { const {translate} = useLocalize(); const values = { - firstName: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME], ''), - lastName: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], ''), - dob: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB], ''), - ssnLast4: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4], ''), - street: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], ''), - city: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], ''), - state: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], ''), - zipCode: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], ''), + firstName: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.FIRST_NAME, defaultValue: ''}), + lastName: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.LAST_NAME, defaultValue: ''}), + dob: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.DOB, defaultValue: ''}), + ssnLast4: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.SSN_LAST_4, defaultValue: ''}), + street: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STREET, defaultValue: ''}), + city: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.CITY, defaultValue: ''}), + state: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.STATE, defaultValue: ''}), + zipCode: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.ZIP_CODE, defaultValue: ''}), }; const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount); diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.js b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.js index 16694913bf72..f2e111b96327 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.js +++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/DateOfBirth.js @@ -1,6 +1,5 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import {subYears} from 'date-fns'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; @@ -14,6 +13,7 @@ import HelpLinks from '../HelpLinks'; import NewDatePicker from '../../../../components/NewDatePicker'; import FormProvider from '../../../../components/Form/FormProvider'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -22,10 +22,10 @@ const propTypes = { ...subStepPropTypes, }; -const REQUIRED_FIELDS = [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB]; +const personalInfoStepKey = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY; const validate = (values) => { - const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); + const errors = ValidationUtils.getFieldRequiredErrors(values, [personalInfoStepKey.DOB]); if (values.dob) { if (!ValidationUtils.isValidPastDate(values.dob) || !ValidationUtils.meetsMaximumAgeRequirement(values.dob)) { @@ -41,7 +41,7 @@ const validate = (values) => { function DateOfBirth({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const dobDefaultValue = lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB], ''); + const dobDefaultValue = getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.DOB, defaultValue: ''}); const minDate = subYears(new Date(), CONST.DATE_BIRTH.MAX_AGE); const maxDate = subYears(new Date(), CONST.DATE_BIRTH.MIN_AGE_FOR_PAYMENT); @@ -61,7 +61,7 @@ function DateOfBirth({reimbursementAccount, onNext, isEditing}) { > {translate('personalInfoStep.enterYourDateOfBirth')} ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); @@ -30,14 +32,14 @@ function FullName({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); const defaultValues = { - firstName: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME], ''), - lastName: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], ''), + firstName: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.FIRST_NAME, defaultValue: ''}), + lastName: getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.LAST_NAME, defaultValue: ''}), }; const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.FIRST_NAME], - [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], + [personalInfoStepKey.FIRST_NAME]: values[personalInfoStepKey.FIRST_NAME], + [personalInfoStepKey.LAST_NAME]: values[personalInfoStepKey.LAST_NAME], }); onNext(); }; @@ -55,7 +57,7 @@ function FullName({reimbursementAccount, onNext, isEditing}) { {translate('personalInfoStep.enterYourLegalFirstAndLast')} Date: Fri, 3 Nov 2023 13:29:12 +0100 Subject: [PATCH 06/31] add: SSN with getDefaultStateForField util used --- .../PersonalInfo/substeps/SocialSecurityNumber.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js index b6a98a86c489..71f6b4658565 100644 --- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js +++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/SocialSecurityNumber.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import lodashGet from 'lodash/get'; import useLocalize from '../../../../hooks/useLocalize'; import styles from '../../../../styles/styles'; import Text from '../../../../components/Text'; @@ -14,6 +13,7 @@ import * as ValidationUtils from '../../../../libs/ValidationUtils'; import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; import HelpLinks from '../HelpLinks'; import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; const propTypes = { /** Reimbursement account from ONYX */ @@ -22,10 +22,10 @@ const propTypes = { ...subStepPropTypes, }; -const REQUIRED_FIELDS = [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]; +const personalInfoStepKey = CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY; const validate = (values) => { - const errors = ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); + const errors = ValidationUtils.getFieldRequiredErrors(values, [personalInfoStepKey.SSN_LAST_4]); if (values.ssnLast4 && !ValidationUtils.isValidSSNLastFour(values.ssnLast4)) { errors.ssnLast4 = 'bankAccount.error.ssnLast4'; @@ -36,10 +36,10 @@ const validate = (values) => { function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultSsnLast4 = lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4], ''); + const defaultSsnLast4 = getDefaultStateForField({reimbursementAccount, fieldName: personalInfoStepKey.SSN_LAST_4, defaultValue: ''}); const handleSubmit = (values) => { - BankAccounts.updateOnyxVBBAData({[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]: values[CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]}); + BankAccounts.updateOnyxVBBAData({[personalInfoStepKey.SSN_LAST_4]: values[personalInfoStepKey.SSN_LAST_4]}); onNext(); }; @@ -56,7 +56,7 @@ function SocialSecurityNumber({reimbursementAccount, onNext, isEditing}) { {translate('personalInfoStep.enterTheLast4')} {translate('personalInfoStep.dontWorry')} Date: Fri, 3 Nov 2023 14:15:40 +0100 Subject: [PATCH 07/31] add: AddressBusiness substep --- src/CONST.ts | 4 + src/languages/en.ts | 1 + .../BusinessInfo/BusinessInfo.js | 16 ++-- .../BusinessInfo/substeps/AddressBusiness.js | 89 +++++++++++++++++++ 4 files changed, 99 insertions(+), 11 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 53b397a4aa97..5d0d93223ce8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -184,6 +184,10 @@ const CONST = { COMPANY_TAX_ID: 'companyTaxID', COMPANY_WEBSITE: 'website', COMPANY_PHONE: 'companyPhone', + STREET: 'addressStreet', + CITY: 'addressCity', + STATE: 'addressState', + ZIP_CODE: 'addressZipCode', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index cb12bccea0dc..a93baee5e2b1 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1380,6 +1380,7 @@ export default { enterYourCompanysWebsite: 'Enter your company’s website.', companyWebsite: 'Company website', enterYourCompanysPhoneNumber: 'Enter your company’s phone number.', + enterYourCompanysAddress: 'Enter your company’s address.', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 6b1322920ad1..78b7ce76dcd0 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -1,7 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import _ from 'lodash'; import lodashGet from 'lodash/get'; import useSubStep from '../../../hooks/useSubStep'; import ONYXKEYS from '../../../ONYXKEYS'; @@ -15,10 +14,12 @@ import * as BankAccounts from '../../../libs/actions/BankAccounts'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; +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'; const propTypes = { /** Reimbursement account from ONYX */ @@ -29,7 +30,7 @@ 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]; +const bodyContent = [NameBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness, AddressBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; @@ -38,18 +39,11 @@ function BusinessInfo({reimbursementAccount}) { const submit = useCallback(() => { const values = { - [businessInfoStep.COMPANY_NAME]: lodashGet(reimbursementAccount, ['achData', businessInfoStep.COMPANY_NAME], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.LAST_NAME], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.DOB], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.SSN_LAST_4], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STREET], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.CITY], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.STATE], ''), - // [CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE]: lodashGet(reimbursementAccount, ['achData', CONST.BANK_ACCOUNT.PERSONAL_INFO_STEP.INPUT_KEY.ZIP_CODE], ''), + [businessInfoStep.COMPANY_NAME]: getDefaultStateForField({reimbursementAccount, fieldName: businessInfoStep.COMPANY_NAME, defaultValue: ''}), }; const payload = { - bankAccountID: _.get(reimbursementAccount, 'achData.bankAccountID', 0), + bankAccountID: getDefaultStateForField({reimbursementAccount, fieldName: 'bankAccountID', defaultValue: 0}), ...values, }; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js new file mode 100644 index 000000000000..4261580c8913 --- /dev/null +++ b/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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; +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) => ValidationUtils.getFieldRequiredErrors(values, REQUIRED_FIELDS); + +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: ''}), + }; + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyBusinessInfoKey.STREET]: values[companyBusinessInfoKey.STREET], + [companyBusinessInfoKey.CITY]: values[companyBusinessInfoKey.CITY], + [companyBusinessInfoKey.STATE]: values[companyBusinessInfoKey.STATE], + [companyBusinessInfoKey.ZIP_CODE]: values[companyBusinessInfoKey.ZIP_CODE], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.enterYourCompanysAddress')} + {translate('common.noPO')} + + +
+ ); +} + +AddressBusiness.propTypes = propTypes; +AddressBusiness.displayName = 'NameBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(AddressBusiness); From 316040abb6de3d310df59c7dd0b3854135a23676 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Fri, 3 Nov 2023 14:53:15 +0100 Subject: [PATCH 08/31] add: TypeBusiness substep --- src/CONST.ts | 1 + src/languages/en.ts | 10 +++ .../BusinessInfo/BusinessInfo.js | 3 +- .../BusinessInfo/substeps/TypeBusiness.js | 73 +++++++++++++++++++ 4 files changed, 86 insertions(+), 1 deletion(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 5d0d93223ce8..5581cec8d937 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -188,6 +188,7 @@ const CONST = { CITY: 'addressCity', STATE: 'addressState', ZIP_CODE: 'addressZipCode', + INCORPORATION_TYPE: 'incorporationType', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index a93baee5e2b1..b1503b2720b9 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1381,6 +1381,16 @@ export default { 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', + }, }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 78b7ce76dcd0..eed17d555329 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -20,6 +20,7 @@ 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'; const propTypes = { /** Reimbursement account from ONYX */ @@ -30,7 +31,7 @@ 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]; +const bodyContent = [NameBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness, AddressBusiness, TypeBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js new file mode 100644 index 000000000000..723ab22213e2 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js @@ -0,0 +1,73 @@ +import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import _ from 'underscore'; +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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; +import Picker from '../../../../components/Picker'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + ...subStepPropTypes, +}; + +const companyIncorporationTypeKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.INCORPORATION_TYPE; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyIncorporationTypeKey]); + +function NameBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultIncorporationType = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationTypeKey, defaultValue: ''}); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyIncorporationTypeKey]: values[companyIncorporationTypeKey], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.selectYourCompanysType')} + ({value: key, label: translate(`businessInfoStep.incorporationType.${key}`)}))} + placeholder={{value: '', label: '-'}} + defaultValue={defaultIncorporationType} + shouldSaveDraft + /> + +
+ ); +} + +NameBusiness.propTypes = propTypes; +NameBusiness.displayName = 'NameBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(NameBusiness); From 92b0ae2cb86ed5a49277af9231b73faaa87c3650 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Mon, 6 Nov 2023 12:34:40 +0100 Subject: [PATCH 09/31] add: IncorporationDateBusiness substep --- src/CONST.ts | 1 + src/languages/en.ts | 3 + .../BusinessInfo/BusinessInfo.js | 3 +- .../BusinessInfo/substeps/AddressBusiness.js | 2 +- .../substeps/IncorporationDateBusiness.js | 72 +++++++++++++++++++ .../substeps/PhoneNumberBusiness.js | 2 +- .../BusinessInfo/substeps/TypeBusiness.js | 8 +-- 7 files changed, 84 insertions(+), 7 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 5581cec8d937..5cd9c90c7030 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -189,6 +189,7 @@ const CONST = { STATE: 'addressState', ZIP_CODE: 'addressZipCode', INCORPORATION_TYPE: 'incorporationType', + INCORPORATION_DATE: 'incorporationDate', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index b1503b2720b9..45e3510ec91b 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1391,6 +1391,9 @@ export default { SOLE_PROPRIETORSHIP: 'Sole proprietorship', OTHER: 'Other', }, + selectYourCompanysIncorporationDate: 'Select your company’s incorporation date.', + incorporationDate: 'Incorporation date', + incorporationDatePlaceholder: 'Start date (yyyy-mm-dd)', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index eed17d555329..6605717836fa 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -21,6 +21,7 @@ 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'; const propTypes = { /** Reimbursement account from ONYX */ @@ -31,7 +32,7 @@ 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]; +const bodyContent = [NameBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness, AddressBusiness, TypeBusiness, IncorporationDateBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js index 4261580c8913..962a7f582453 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/AddressBusiness.js @@ -80,7 +80,7 @@ function AddressBusiness({reimbursementAccount, onNext, isEditing}) { } AddressBusiness.propTypes = propTypes; -AddressBusiness.displayName = 'NameBusiness'; +AddressBusiness.displayName = 'AddressBusiness'; export default withOnyx({ reimbursementAccount: { diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js new file mode 100644 index 000000000000..3f2946ee6bfa --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js @@ -0,0 +1,72 @@ +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 ONYXKEYS from '../../../../ONYXKEYS'; +import subStepPropTypes from '../../subStepPropTypes'; +import * as ValidationUtils from '../../../../libs/ValidationUtils'; +import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; +import * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; +import NewDatePicker from '../../../../components/NewDatePicker'; +import FormProvider from '../../../../components/Form/FormProvider'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + ...subStepPropTypes, +}; + +const companyIncorporationDateKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.INCORPORATION_DATE; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyIncorporationDateKey]); + +function IncorporationDateBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultCompanyIncorporationDate = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationDateKey, defaultValue: new Date()}); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyIncorporationDateKey]: values[companyIncorporationDateKey], + }); + + onNext(); + }; + + return ( + + + {translate('businessInfoStep.selectYourCompanysIncorporationDate')} + + + + ); +} + +IncorporationDateBusiness.propTypes = propTypes; +IncorporationDateBusiness.displayName = 'IncorporationDateBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(IncorporationDateBusiness); diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js index f9645373017d..4c7274ee1845 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/PhoneNumberBusiness.js @@ -66,7 +66,7 @@ function PhoneNumberBusiness({reimbursementAccount, onNext, isEditing}) { } PhoneNumberBusiness.propTypes = propTypes; -PhoneNumberBusiness.displayName = 'NameBusiness'; +PhoneNumberBusiness.displayName = 'PhoneNumberBusiness'; export default withOnyx({ reimbursementAccount: { diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js index 723ab22213e2..0c5ff3ba4b8a 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/TypeBusiness.js @@ -26,7 +26,7 @@ const companyIncorporationTypeKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_ const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyIncorporationTypeKey]); -function NameBusiness({reimbursementAccount, onNext, isEditing}) { +function TypeBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); const defaultIncorporationType = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationTypeKey, defaultValue: ''}); @@ -63,11 +63,11 @@ function NameBusiness({reimbursementAccount, onNext, isEditing}) { ); } -NameBusiness.propTypes = propTypes; -NameBusiness.displayName = 'NameBusiness'; +TypeBusiness.propTypes = propTypes; +TypeBusiness.displayName = 'TypeBusiness'; export default withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, -})(NameBusiness); +})(TypeBusiness); From de9b598f979d05f60be8c7cb3bdc59759ea2f557 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Mon, 6 Nov 2023 13:19:43 +0100 Subject: [PATCH 10/31] add: IncorporationStateBusiness substep --- src/CONST.ts | 1 + src/languages/en.ts | 2 + .../BusinessInfo/BusinessInfo.js | 13 +++- .../substeps/IncorporationDateBusiness.js | 2 +- .../substeps/IncorporationStateBusiness.js | 70 +++++++++++++++++++ 5 files changed, 84 insertions(+), 4 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index 5cd9c90c7030..ab45a3ca0dc0 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -190,6 +190,7 @@ const CONST = { ZIP_CODE: 'addressZipCode', INCORPORATION_TYPE: 'incorporationType', INCORPORATION_DATE: 'incorporationDate', + INCORPORATION_STATE: 'incorporationState', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 45e3510ec91b..6262a3eef469 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1394,6 +1394,8 @@ export default { 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.', }, validationStep: { headerTitle: 'Validate Bank Account', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 6605717836fa..1722e96c5a6e 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -14,6 +14,7 @@ import * as BankAccounts from '../../../libs/actions/BankAccounts'; import Navigation from '../../../libs/Navigation/Navigation'; import ROUTES from '../../../ROUTES'; import getInitialSubstepForPersonalInfo from '../utils/getInitialSubstepForPersonalInfo'; +import ScreenWrapper from '../../../components/ScreenWrapper'; import getDefaultStateForField from '../utils/getDefaultStateForField'; import NameBusiness from './substeps/NameBusiness'; import TaxIdBusiness from './substeps/TaxIdBusiness'; @@ -22,6 +23,7 @@ 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'; const propTypes = { /** Reimbursement account from ONYX */ @@ -32,7 +34,7 @@ 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]; +const bodyContent = [NameBusiness, IncorporationStateBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness, AddressBusiness, TypeBusiness, IncorporationDateBusiness]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; @@ -65,7 +67,12 @@ function BusinessInfo({reimbursementAccount}) { }; return ( - <> + - + ); } diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js index 3f2946ee6bfa..c463348a30ca 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationDateBusiness.js @@ -28,7 +28,7 @@ const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [com function IncorporationDateBusiness({reimbursementAccount, onNext, isEditing}) { const {translate} = useLocalize(); - const defaultCompanyIncorporationDate = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationDateKey, defaultValue: new Date()}); + const defaultCompanyIncorporationDate = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationDateKey, defaultValue: ''}); const handleSubmit = (values) => { BankAccounts.updateOnyxVBBAData({ diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.js new file mode 100644 index 000000000000..5258fcc3be87 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/IncorporationStateBusiness.js @@ -0,0 +1,70 @@ +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 * as BankAccounts from '../../../../libs/actions/BankAccounts'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; +import StatePicker from '../../../../components/StatePicker'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + ...subStepPropTypes, +}; + +const companyIncorporationStateKey = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY.INCORPORATION_STATE; + +const validate = (values) => ValidationUtils.getFieldRequiredErrors(values, [companyIncorporationStateKey]); + +function IncorporationStateBusiness({reimbursementAccount, onNext, isEditing}) { + const {translate} = useLocalize(); + + const defaultCompanyIncorporationState = getDefaultStateForField({reimbursementAccount, fieldName: companyIncorporationStateKey, defaultValue: ''}); + + const handleSubmit = (values) => { + BankAccounts.updateOnyxVBBAData({ + [companyIncorporationStateKey]: values[companyIncorporationStateKey], + }); + + onNext(); + }; + + return ( +
+ + {translate('businessInfoStep.pleaseSelectTheStateYourCompanyWasIncorporatedIn')} + + +
+ ); +} + +IncorporationStateBusiness.propTypes = propTypes; +IncorporationStateBusiness.displayName = 'IncorporationStateBusiness'; + +export default withOnyx({ + reimbursementAccount: { + key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, + }, +})(IncorporationStateBusiness); From 098e60c47a11a604222801b2bb2c90eeaa270a58 Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Mon, 6 Nov 2023 15:44:47 +0100 Subject: [PATCH 11/31] add: getSubstepValues util --- .../utils/getSubstepValues.js | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/pages/ReimbursementAccount/utils/getSubstepValues.js diff --git a/src/pages/ReimbursementAccount/utils/getSubstepValues.js b/src/pages/ReimbursementAccount/utils/getSubstepValues.js new file mode 100644 index 000000000000..6a94b5adfbc7 --- /dev/null +++ b/src/pages/ReimbursementAccount/utils/getSubstepValues.js @@ -0,0 +1,24 @@ +import lodashGet from 'lodash/get'; +import lodashReduce from 'lodash/reduce'; +import getDefaultStateForField from './getDefaultStateForField'; + +/** + * Returns values for substep confirmation page + * + * @param {Object} inputKeys object that stores substep info keys + * + * @param {Object} reimbursementAccountDraft object that stores substep info draft data + * + * @param {Object} reimbursementAccount object that stores substep info data + * + * @returns {Object} + */ +function getSubstepValues(inputKeys, reimbursementAccountDraft, reimbursementAccount) { + return lodashReduce( + Object.entries(inputKeys), + (acc, [, value]) => ({...acc, [value]: lodashGet(reimbursementAccountDraft, value, '') || getDefaultStateForField({reimbursementAccount, fieldName: value, defaultValue: ''})}), + {}, + ); +} + +export default getSubstepValues; From 427ab331247b634ab5f3fdef8786237486d367fc Mon Sep 17 00:00:00 2001 From: Marcin Swornowski Date: Mon, 6 Nov 2023 16:46:52 +0100 Subject: [PATCH 12/31] add: ConfirmationBusiness substep --- src/CONST.ts | 1 + src/languages/en.ts | 8 +- .../BusinessInfo/BusinessInfo.js | 13 +- .../substeps/ConfirmationBusiness.js | 174 ++++++++++++++++++ 4 files changed, 193 insertions(+), 3 deletions(-) create mode 100644 src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.js diff --git a/src/CONST.ts b/src/CONST.ts index ab45a3ca0dc0..c24bbb364298 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -191,6 +191,7 @@ const CONST = { INCORPORATION_TYPE: 'incorporationType', INCORPORATION_DATE: 'incorporationDate', INCORPORATION_STATE: 'incorporationState', + HAS_NO_CONNECTION_TO_CANNABIS: 'hasNoConnectionToCannabis', }, }, PLAID: { diff --git a/src/languages/en.ts b/src/languages/en.ts index 6262a3eef469..3ea19b9ee3f4 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1367,13 +1367,13 @@ 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: 'Business name', + businessName: 'Legal business name', enterYourCompanysTaxIdNumber: 'Enter your company’s Tax ID number.', taxIDNumber: 'Tax ID number', taxIDNumberPlaceholder: '9 digits', @@ -1396,6 +1396,10 @@ export default { 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', diff --git a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js index 1722e96c5a6e..e4b1636895bd 100644 --- a/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js +++ b/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.js @@ -24,6 +24,7 @@ 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'; const propTypes = { /** Reimbursement account from ONYX */ @@ -34,7 +35,17 @@ const STEPS_HEADER_HEIGHT = 40; // TODO Will most likely come from different place const STEP_NAMES = ['1', '2', '3', '4', '5']; -const bodyContent = [NameBusiness, IncorporationStateBusiness, TaxIdBusiness, WebsiteBusiness, PhoneNumberBusiness, AddressBusiness, TypeBusiness, IncorporationDateBusiness]; +const bodyContent = [ + NameBusiness, + TaxIdBusiness, + WebsiteBusiness, + PhoneNumberBusiness, + AddressBusiness, + TypeBusiness, + IncorporationDateBusiness, + IncorporationStateBusiness, + ConfirmationBusiness, +]; const businessInfoStep = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; diff --git a/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.js b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.js new file mode 100644 index 000000000000..6a365d06ca80 --- /dev/null +++ b/src/pages/ReimbursementAccount/BusinessInfo/substeps/ConfirmationBusiness.js @@ -0,0 +1,174 @@ +import React, {useMemo} from 'react'; +import {View, ScrollView} from 'react-native'; +import {withOnyx} from 'react-native-onyx'; +import useLocalize from '../../../../hooks/useLocalize'; +import styles from '../../../../styles/styles'; +import Text from '../../../../components/Text'; +import ONYXKEYS from '../../../../ONYXKEYS'; +import CONST from '../../../../CONST'; +import subStepPropTypes from '../../subStepPropTypes'; +import {reimbursementAccountPropTypes} from '../../reimbursementAccountPropTypes'; +import TextLink from '../../../../components/TextLink'; +import MenuItemWithTopDescription from '../../../../components/MenuItemWithTopDescription'; +import Button from '../../../../components/Button'; +import ScreenWrapper from '../../../../components/ScreenWrapper'; +import * as ErrorUtils from '../../../../libs/ErrorUtils'; +import DotIndicatorMessage from '../../../../components/DotIndicatorMessage'; +import reimbursementAccountDraftPropTypes from '../../ReimbursementAccountDraftPropTypes'; +import * as ReimbursementAccountProps from '../../reimbursementAccountPropTypes'; +import getSubstepValues from '../../utils/getSubstepValues'; +import CheckboxWithLabel from '../../../../components/CheckboxWithLabel'; +import getDefaultStateForField from '../../utils/getDefaultStateForField'; + +const propTypes = { + /** Reimbursement account from ONYX */ + reimbursementAccount: reimbursementAccountPropTypes, + + /** The draft values of the bank account being setup */ + reimbursementAccountDraft: reimbursementAccountDraftPropTypes, + + ...subStepPropTypes, +}; + +const defaultProps = { + reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps, + reimbursementAccountDraft: {}, +}; + +const businessInfoStepKeys = CONST.BANK_ACCOUNT.BUSINESS_INFO_STEP.INPUT_KEY; + +function ConfirmationBusiness({reimbursementAccount, reimbursementAccountDraft, onNext, onMove}) { + const {translate} = useLocalize(); + + const values = useMemo(() => getSubstepValues(businessInfoStepKeys, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + + const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount); + + const defaultCheckboxState = getDefaultStateForField({reimbursementAccount, fieldName: businessInfoStepKeys.HAS_NO_CONNECTION_TO_CANNABIS, defaultValue: false}); + + return ( + + + {translate('businessInfoStep.letsDoubleCheck')} + { + onMove(0); + }} + /> + { + onMove(1); + }} + /> + { + onMove(2); + }} + /> + { + onMove(3); + }} + /> + { + onMove(4); + }} + /> + { + onMove(5); + }} + /> + { + onMove(6); + }} + /> + { + onMove(7); + }} + /> + + ( + + {`${translate('businessInfoStep.confirmCompanyIsNot')} `} + + {`${translate('businessInfoStep.listOfRestrictedBusinesses')}.`} + + + )} + style={[styles.mt4]} + shouldSaveDraft + onInputChange={() => {}} + /> + + + + {error.length > 0 && ( + + )} +