From bd49f5cc9c53ee7d66c9fe641213cec2d3a5e7fa Mon Sep 17 00:00:00 2001 From: Michal Muzyk Date: Mon, 28 Oct 2024 14:32:28 +0100 Subject: [PATCH 01/20] feat: step 3 --- src/languages/en.ts | 28 +- src/languages/es.ts | 28 +- src/languages/params.ts | 5 + .../AddressFormFields.tsx | 53 ++- .../NonUSD/BusinessInfo/BusinessInfo.tsx | 9 +- .../NonUSD/BusinessInfo/mockedCorpayLists.ts | 411 ++++++++++++++++++ .../NonUSD/BusinessInfo/substeps/Address.tsx | 103 +++++ .../BusinessInfo/substeps/BusinessType.tsx | 102 +++++ .../BusinessInfo/substeps/Confirmation.tsx | 104 ++++- .../substeps/IncorporationLocation.tsx | 116 +++++ .../NonUSD/BusinessInfo/substeps/Name.tsx | 74 ++++ .../BusinessInfo/substeps/PaymentVolume.tsx | 80 ++++ .../BusinessInfo/substeps/PhoneNumber.tsx | 68 +++ .../substeps/RegistrationNumber.tsx | 66 +++ .../NonUSD/mockedCanadianProvinces.ts | 56 +++ src/types/form/ReimbursementAccountForm.ts | 58 +++ src/types/onyx/PrivatePersonalDetails.ts | 2 +- src/types/onyx/ReimbursementAccount.ts | 48 ++ 18 files changed, 1390 insertions(+), 21 deletions(-) create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists.ts create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/IncorporationLocation.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Name.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/PaymentVolume.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/PhoneNumber.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/RegistrationNumber.tsx create mode 100644 src/pages/ReimbursementAccount/NonUSD/mockedCanadianProvinces.ts diff --git a/src/languages/en.ts b/src/languages/en.ts index e98559c0df93..4faab1e7d4f8 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -43,7 +43,7 @@ import type { CompanyCardFeedNameParams, ConfirmThatParams, ConnectionNameParams, - ConnectionParams, + ConnectionParams, CurrencyCodeParams, CustomersOrJobsLabelParams, DateParams, DateShouldBeAfterParams, @@ -2161,6 +2161,32 @@ const translations = { listOfRestrictedBusinesses: 'list of restricted businesses', confirmCompanyIsNot: 'I confirm that this company is not on the', businessInfoTitle: 'Business info', + legalBusinessName: 'Legal business name', + whatsTheBusinessName: "What's the business name?", + whatsTheBusinessAddress: "What's the business address?", + whatsTheBusinessPhone: "What's the business phone number?", + whatsTheBusinessRegistrationNumber: "What's the business registration number?", + whereWasTheBusinessIncorporated: 'Where was the business incorporated?', + whatTypeOfBusinessIsIt: 'What type of business is it?', + whatsTheBusinessAnnualPayment: "What's the business's annual payment volume?", + registrationNumber: 'Registration number', + businessAddress: 'Business address', + businessType: 'Business type', + incorporation: 'Incorporation', + incorporationCountry: 'Incorporation country', + incorporationTypeName: 'Incorporation type', + businessCategory: 'Business category', + annualPaymentVolume: 'Annual payment volume', + annualPaymentVolumeInCurrency: ({currencyCode}: CurrencyCodeParams) => `Annual payment volume in ${currencyCode}`, + selectIncorporationType: 'Select incorporation type', + selectBusinessCategory: 'Select business category', + selectAnnualPaymentVolume: 'Select annual payment volume', + selectIncorporationCountry: 'Select incorporation country', + selectIncorporationState: 'Select incorporation state', + findIncorporationType: 'Find incorporation type', + findBusinessCategory: 'Find business category', + findAnnualPaymentVolume: 'Find annual payment volume', + findIncorporationState: 'Find incorporation state', }, beneficialOwnerInfoStep: { doYouOwn25percent: 'Do you own 25% or more of', diff --git a/src/languages/es.ts b/src/languages/es.ts index a81ded5820bc..bd706ffc4e51 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -41,7 +41,7 @@ import type { CompanyCardFeedNameParams, ConfirmThatParams, ConnectionNameParams, - ConnectionParams, + ConnectionParams, CurrencyCodeParams, CustomersOrJobsLabelParams, DateParams, DateShouldBeAfterParams, @@ -2184,6 +2184,32 @@ const translations = { listOfRestrictedBusinesses: 'lista de negocios restringidos', confirmCompanyIsNot: 'Confirmo que esta empresa no está en la', businessInfoTitle: 'Información del negocio', + legalBusinessName: 'Nombre comercial legal', + whatsTheBusinessName: '¿Cuál es el nombre del negocio?', + whatsTheBusinessAddress: "¿Cuál es la dirección del negocio?", + whatsTheBusinessPhone: "¿Cuál es el número de teléfono del negocio?", + whatsTheBusinessRegistrationNumber: "¿Cuál es el número de registro del negocio?", + whereWasTheBusinessIncorporated: '¿Dónde se constituyó el negocio?', + whatTypeOfBusinessIsIt: 'What type of business is it?', + whatsTheBusinessAnnualPayment: "¿Cuál es el volumen anual de pagos del negocio?", + registrationNumber: 'Registration number', + businessAddress: 'Business address', + businessType: 'Business type', + incorporation: 'Incorporation', + incorporationCountry: 'Incorporation country', + incorporationTypeName: 'Incorporation type', + businessCategory: 'Business category', + annualPaymentVolume: 'Annual payment volume', + annualPaymentVolumeInCurrency: ({currencyCode}: CurrencyCodeParams) => `Annual payment volume in ${currencyCode}`, + selectIncorporationType: 'Select incorporation type', + selectIncorporationCountry: 'Select incorporation country', + selectIncorporationState: 'Select incorporation state', + selectBusinessCategory: 'Select business category', + selectAnnualPaymentVolume: 'Select annual payment volume', + findIncorporationType: 'Find incorporation type', + findBusinessCategory: 'Find business category', + findAnnualPaymentVolume: 'Find annual payment volume', + findIncorporationState: 'Find incorporation state', }, beneficialOwnerInfoStep: { doYouOwn25percent: '¿Posees el 25% o más de', diff --git a/src/languages/params.ts b/src/languages/params.ts index 9341b914d1d0..f3c1d5deb21a 100644 --- a/src/languages/params.ts +++ b/src/languages/params.ts @@ -542,6 +542,10 @@ type CompanyCardBankName = { bankName: string; }; +type CurrencyCodeParams = { + currencyCode: string; +}; + export type { AuthenticationErrorParams, ImportMembersSuccessfullDescriptionParams, @@ -740,4 +744,5 @@ export type { OptionalParam, AssignCardParams, ImportedTypesParams, + CurrencyCodeParams }; diff --git a/src/pages/ReimbursementAccount/AddressFormFields.tsx b/src/pages/ReimbursementAccount/AddressFormFields.tsx index a863d3cc5952..d9529d17adb2 100644 --- a/src/pages/ReimbursementAccount/AddressFormFields.tsx +++ b/src/pages/ReimbursementAccount/AddressFormFields.tsx @@ -1,5 +1,6 @@ import React from 'react'; import {View} from 'react-native'; +import type {StyleProp, ViewStyle} from 'react-native'; import AddressSearch from '@components/AddressSearch'; import InputWrapper from '@components/Form/InputWrapper'; import type {State} from '@components/StateSelector'; @@ -34,14 +35,34 @@ type AddressFormProps = { /** Saves a draft of the input value when used in a form */ shouldSaveDraft?: boolean; + + /** Additional styles to apply to container */ + containerStyles?: StyleProp; + + /** Indicates if country selector should be displayed */ + shouldDisplayCountrySelector?: boolean; + + /** Indicates if state selector should be displayed */ + shouldDisplayStateSelector?: boolean; }; -function AddressFormFields({shouldSaveDraft = false, defaultValues, values, errors, inputKeys, onFieldChange, streetTranslationKey}: AddressFormProps) { +function AddressFormFields({ + shouldSaveDraft = false, + defaultValues, + values, + errors, + inputKeys, + onFieldChange, + streetTranslationKey, + containerStyles, + shouldDisplayCountrySelector = false, + shouldDisplayStateSelector = true, +}: AddressFormProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); return ( - <> + - - onFieldChange?.({state: value})} - errorText={errors?.state ? translate('bankAccount.error.addressState') : ''} - /> - + {shouldDisplayStateSelector && ( + + onFieldChange?.({state: value})} + errorText={errors?.state ? translate('bankAccount.error.addressState') : ''} + /> + + )} - + ); } diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx index 8d1781edefbd..9d37d79df3d7 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.tsx @@ -5,7 +5,14 @@ import useLocalize from '@hooks/useLocalize'; import useSubStep from '@hooks/useSubStep'; import type {SubStepProps} from '@hooks/useSubStep/types'; import CONST from '@src/CONST'; +import Address from './substeps/Address'; +import BusinessType from './substeps/BusinessType'; import Confirmation from './substeps/Confirmation'; +import IncorporationLocation from './substeps/IncorporationLocation'; +import Name from './substeps/Name'; +import PaymentVolume from './substeps/PaymentVolume'; +import PhoneNumber from './substeps/PhoneNumber'; +import RegistrationNumber from './substeps/RegistrationNumber'; type BusinessInfoProps = { /** Handles back button press */ @@ -15,7 +22,7 @@ type BusinessInfoProps = { onSubmit: () => void; }; -const bodyContent: Array> = [Confirmation]; +const bodyContent: Array> = [Name, Address, PhoneNumber, RegistrationNumber, IncorporationLocation, BusinessType, PaymentVolume, Confirmation]; function BusinessInfo({onBackButtonPress, onSubmit}: BusinessInfoProps) { const {translate} = useLocalize(); diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists.ts b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists.ts new file mode 100644 index 000000000000..893717e6550a --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists.ts @@ -0,0 +1,411 @@ +const annualVolumeRange = [ + { + id: '0', + name: 'Undefined', + stringValue: 'Undefined', + }, + { + id: '1', + name: 'LessThan25000', + stringValue: 'Less than 25000', + }, + { + id: '2', + name: 'TwentyFiveThousandToFiftyThousand', + stringValue: '25,000 - 50,000', + }, + { + id: '3', + name: 'FiftyThousandToSeventyFiveThousand', + stringValue: '50,000 – 75,000', + }, + { + id: '4', + name: 'SeventyFiveToOneHundredThousand', + stringValue: '75,000 – 100,000', + }, + { + id: '5', + name: 'OneHundredToOneHundredFiftyThousand', + stringValue: '100,000 – 150,000', + }, + { + id: '6', + name: 'OneHundredFiftyToTwoHundredThousand', + stringValue: '150,000 – 200,000', + }, + { + id: '7', + name: 'TwoHundredToTwoHundredFiftyThousand', + stringValue: '200,000 – 250,000', + }, + { + id: '8', + name: 'TwoHundredFiftyToThreeHundredThousand', + stringValue: '250,000 – 300,000', + }, + { + id: '9', + name: 'ThreeHundredToFourHundredThousand', + stringValue: '300,000 – 400,000', + }, + { + id: '10', + name: 'FourHundredToFiveHundredThousand', + stringValue: '400,000 – 500,000', + }, + { + id: '11', + name: 'FiveHundredToSevenHundredFiftyThousand', + stringValue: '500,000 – 750,000', + }, + { + id: '12', + name: 'SevenHundredFiftyThousandToOneMillion', + stringValue: '750,000 – 1 million', + }, + { + id: '13', + name: 'OneMillionToTwoMillion', + stringValue: '1 million – 2 million', + }, + { + id: '14', + name: 'TwoMillionToThreeMillion', + stringValue: '2 million – 3 million', + }, + { + id: '15', + name: 'ThreeMillionToFiveMillion', + stringValue: '3 million – 5 million', + }, + { + id: '16', + name: 'FiveMillionToSevenPointFiveMillion', + stringValue: '5 million – 7.5 million', + }, + { + id: '17', + name: 'SevenPointFiveMillionToTenMillion', + stringValue: '7.5 million – 10 million', + }, + { + id: '18', + name: 'GreaterThan10Million', + stringValue: 'Greater than 10 Million', + }, +]; + +// eslint-disable-next-line rulesdir/no-negated-variables +const applicantType = [ + { + id: '0', + name: 'Undefined', + stringValue: 'Undefined', + }, + { + id: '1', + name: 'Corporation', + stringValue: 'Corporation', + }, + { + id: '2', + name: 'Limited_Liability_Company', + stringValue: 'Limited Liability Company (e.g., LLC, LC)', + }, + { + id: '3', + name: 'Partnership', + stringValue: 'Partnership', + }, + { + id: '4', + name: 'Partnership_UK', + stringValue: 'Partnership UK', + }, + { + id: '5', + name: 'Unincorporated_Entity', + stringValue: 'Unincorporated Entity', + }, + { + id: '6', + name: 'Sole_Proprietorship_Sole_Trader', + stringValue: 'Sole Proprietorship/Sole Trader', + }, + { + id: '7', + name: 'Private_person_Entity', + stringValue: 'Private person/ Entity', + }, + { + id: '8', + name: 'Personal_Account', + stringValue: 'Personal Account', + }, + { + id: '9', + name: 'Financial_Institution', + stringValue: 'Financial Institution', + }, + { + id: '10', + name: 'Non_Profit', + stringValue: 'Not for Profit', + }, + { + id: '11', + name: 'Online_User_Verification', + stringValue: 'Online User Verification', + }, + { + id: '12', + name: 'Charitable_Organization', + stringValue: 'Charitable Organizationt', + }, + { + id: '13', + name: 'Trust', + stringValue: 'Trust', + }, +]; + +const natureOfBusiness = [ + { + id: '0', + name: 'Undefined', + stringValue: 'Undefined', + }, + { + id: '10', + name: 'Aerospace and defense', + stringValue: 'Aerospace and defense', + }, + { + id: '20', + name: 'Agriculture and agric-food', + stringValue: 'Agriculture and agric-food', + }, + { + id: '30', + name: 'Apparel / Clothing', + stringValue: 'Apparel / Clothing', + }, + { + id: '40', + name: 'Automotive / Trucking', + stringValue: 'Automotive / Trucking', + }, + { + id: '50', + name: 'Books / Magazines', + stringValue: 'Books / Magazines', + }, + { + id: '60', + name: 'Broadcasting', + stringValue: 'Broadcasting', + }, + { + id: '70', + name: 'Building products', + stringValue: 'Building products', + }, + { + id: '80', + name: 'Chemicals', + stringValue: 'Chemicals', + }, + { + id: '90', + name: 'Dairy', + stringValue: 'Dairy', + }, + { + id: '100', + name: 'E-business', + stringValue: 'E-business', + }, + { + id: '105', + name: 'Educational Institutes', + stringValue: 'Educational Institutes', + }, + { + id: '110', + name: 'Environment', + stringValue: 'Environment', + }, + { + id: '120', + name: 'Explosives', + stringValue: 'Explosives', + }, + { + id: '140', + name: 'Fisheries and oceans', + stringValue: 'Fisheries and oceans', + }, + { + id: '150', + name: 'Food / Beverage distribution', + stringValue: 'Food / Beverage distribution', + }, + { + id: '160', + name: 'Footwear', + stringValue: 'Footwear', + }, + { + id: '170', + name: 'Forest industries', + stringValue: 'Forest industries', + }, + { + id: '180', + name: 'Furniture', + stringValue: 'Furniture', + }, + { + id: '190', + name: 'Giftware and crafts', + stringValue: 'Giftware and crafts', + }, + { + id: '200', + name: 'Horticulture', + stringValue: 'Horticulture', + }, + { + id: '210', + name: 'Hydroelectric energy', + stringValue: 'Hydroelectric energy', + }, + { + id: '220', + name: 'Information and communication technologies', + stringValue: 'Information and communication technologies', + }, + { + id: '230', + name: 'Intelligent systems', + stringValue: 'Intelligent systems', + }, + { + id: '240', + name: 'Livestock', + stringValue: 'Livestock', + }, + { + id: '250', + name: 'Medical devices', + stringValue: 'Medical devices', + }, + { + id: '251', + name: 'Medical treatment', + stringValue: 'Medical treatment', + }, + { + id: '260', + name: 'Minerals, metals and mining', + stringValue: 'Minerals, metals and mining', + }, + { + id: '270', + name: 'Oil and gas', + stringValue: 'Oil and gas', + }, + { + id: '280', + name: 'Pharmaceuticals and biopharmaceuticals', + stringValue: 'Pharmaceuticals and biopharmaceuticals', + }, + { + id: '290', + name: 'Plastics', + stringValue: 'Plastics', + }, + { + id: '300', + name: 'Poultry and eggs', + stringValue: 'Poultry and eggs', + }, + { + id: '310', + name: 'Printing /Publishing', + stringValue: 'Printing /Publishing', + }, + { + id: '320', + name: 'Product design and development', + stringValue: 'Product design and development', + }, + { + id: '330', + name: 'Railway', + stringValue: 'Railway', + }, + { + id: '340', + name: 'Retail', + stringValue: 'Retail', + }, + { + id: '350', + name: 'Shipping and industrial marine', + stringValue: 'Shipping and industrial marine', + }, + { + id: '360', + name: 'Soil', + stringValue: 'Soil', + }, + { + id: '370', + name: 'Sound recording', + stringValue: 'Sound recording', + }, + { + id: '380', + name: 'Sporting goods', + stringValue: 'Sporting goods', + }, + { + id: '390', + name: 'Telecommunications equipment', + stringValue: 'Telecommunications equipment', + }, + { + id: '400', + name: 'Television', + stringValue: 'Television', + }, + { + id: '410', + name: 'Textiles', + stringValue: 'Textiles', + }, + { + id: '420', + name: 'Tourism', + stringValue: 'Tourism', + }, + { + id: '425', + name: 'Trademarks / Law', + stringValue: 'Trademarks / Law', + }, + { + id: '430', + name: 'Water supply', + stringValue: 'Water supply', + }, + { + id: '440', + name: 'Wholesale', + stringValue: 'Wholesale', + }, +]; + +export {annualVolumeRange, applicantType, natureOfBusiness}; diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx new file mode 100644 index 000000000000..a55b9159a234 --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Address.tsx @@ -0,0 +1,103 @@ +import React, {useCallback, useMemo} from 'react'; +import {useOnyx} from 'react-native-onyx'; +import FormProvider from '@components/Form/FormProvider'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as ValidationUtils from '@libs/ValidationUtils'; +import AddressFormFields from '@pages/ReimbursementAccount/AddressFormFields'; +import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; + +type AddressProps = SubStepProps; + +const {COMPANY_STREET, COMPANY_ZIP_CODE, COMPANY_STATE, COMPANY_CITY, COMPANY_COUNTRY} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; + +const INPUT_KEYS = { + street: COMPANY_STREET, + city: COMPANY_CITY, + state: COMPANY_STATE, + zipCode: COMPANY_ZIP_CODE, + country: COMPANY_COUNTRY, +}; +const STEP_FIELDS = [COMPANY_STREET, COMPANY_CITY, COMPANY_STATE, COMPANY_ZIP_CODE, COMPANY_COUNTRY]; +const STEP_FIELDS_WITHOUT_STATE = [COMPANY_STREET, COMPANY_CITY, COMPANY_ZIP_CODE, COMPANY_COUNTRY]; + +function Address({onNext, isEditing}: AddressProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + const onyxValues = useMemo(() => getSubstepValues(INPUT_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + + // TODO look into default country + const businessStepCountryDraftValue = onyxValues[COMPANY_COUNTRY]; + const countryStepCountryDraftValue = reimbursementAccountDraft?.[INPUT_IDS.ADDITIONAL_DATA.COUNTRY] ?? ''; + const countryInitialValue = + businessStepCountryDraftValue !== '' && businessStepCountryDraftValue !== countryStepCountryDraftValue ? businessStepCountryDraftValue : countryStepCountryDraftValue; + + const defaultValues = { + street: onyxValues[COMPANY_STREET] ?? '', + city: onyxValues[COMPANY_CITY] ?? '', + state: onyxValues[COMPANY_STATE] ?? '', + zipCode: onyxValues[COMPANY_ZIP_CODE] ?? '', + country: onyxValues[COMPANY_COUNTRY] ?? countryInitialValue, + }; + + const shouldDisplayStateSelector = defaultValues.country === CONST.COUNTRY.US || defaultValues.country === CONST.COUNTRY.CA || defaultValues.country === ''; + + const validate = useCallback( + (values: FormOnyxValues): FormInputErrors => { + const errors = ValidationUtils.getFieldRequiredErrors(values, shouldDisplayStateSelector ? STEP_FIELDS : STEP_FIELDS_WITHOUT_STATE); + + if (values[COMPANY_STREET] && !ValidationUtils.isValidAddress(values[COMPANY_STREET])) { + errors[COMPANY_STREET] = translate('bankAccount.error.addressStreet'); + } + + if (values[COMPANY_ZIP_CODE] && !ValidationUtils.isValidZipCode(values[COMPANY_ZIP_CODE])) { + errors[COMPANY_ZIP_CODE] = translate('bankAccount.error.zipCode'); + } + + return errors; + }, + [shouldDisplayStateSelector, translate], + ); + + const handleSubmit = useReimbursementAccountStepFormSubmit({ + fieldIds: shouldDisplayStateSelector ? STEP_FIELDS : STEP_FIELDS_WITHOUT_STATE, + onNext, + shouldSaveDraft: isEditing, + }); + + return ( + + {translate('businessInfoStep.enterTheNameOfYourBusiness')} + + + ); +} + +Address.displayName = 'Address'; + +export default Address; diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx new file mode 100644 index 000000000000..17204c3212ce --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/BusinessType.tsx @@ -0,0 +1,102 @@ +import React, {useCallback, useState} from 'react'; +import {useOnyx} from 'react-native-onyx'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; +import PushRowWithModal from '@components/PushRowWithModal'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import useReimbursementAccountStepFormSubmit from '@hooks/useReimbursementAccountStepFormSubmit'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import * as ValidationUtils from '@libs/ValidationUtils'; +import {applicantType, natureOfBusiness} from '@pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists'; +import * as FormActions from '@userActions/FormActions'; +import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; + +type BusinessTypeProps = SubStepProps; + +const {BUSINESS_CATEGORY, APPLICANT_TYPE_ID} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; +const STEP_FIELDS = [BUSINESS_CATEGORY, APPLICANT_TYPE_ID]; + +function BusinessType({onNext, isEditing}: BusinessTypeProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + + const incorporationTypeDefaultValue = reimbursementAccount?.achData?.additionalData?.corpay?.[APPLICANT_TYPE_ID] ?? reimbursementAccountDraft?.[APPLICANT_TYPE_ID] ?? ''; + + const businessCategoryDefaultValue = reimbursementAccount?.achData?.additionalData?.corpay?.[BUSINESS_CATEGORY] ?? reimbursementAccountDraft?.[BUSINESS_CATEGORY] ?? ''; + + const [selectedIncorporationType, setSelectedIncorporationType] = useState(incorporationTypeDefaultValue); + const [selectedBusinessCategory, setSelectedBusinessCategory] = useState(businessCategoryDefaultValue); + + const validate = useCallback((values: FormOnyxValues): FormInputErrors => { + return ValidationUtils.getFieldRequiredErrors(values, STEP_FIELDS); + }, []); + + const handleSelectingIncorporationType = (incorporationType: string) => { + FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[APPLICANT_TYPE_ID]: incorporationType}); + setSelectedIncorporationType(incorporationType); + }; + + const handleSelectingBusinessCategory = (businessCategory: string) => { + FormActions.setDraftValues(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM, {[BUSINESS_CATEGORY]: businessCategory}); + setSelectedBusinessCategory(businessCategory); + }; + + const handleSubmit = useReimbursementAccountStepFormSubmit({ + fieldIds: STEP_FIELDS, + onNext, + shouldSaveDraft: isEditing, + }); + + const incorporationTypeListOptions = applicantType.reduce((accumulator, currentValue) => { + accumulator[currentValue.name] = currentValue.stringValue; + return accumulator; + }, {} as Record); + const businessCategoryListOptions = natureOfBusiness.reduce((accumulator, currentValue) => { + accumulator[currentValue.name] = currentValue.stringValue; + return accumulator; + }, {} as Record); + + return ( + + {translate('businessInfoStep.whatTypeOfBusinessIsIt')} + + + + ); +} + +BusinessType.displayName = 'BusinessType'; + +export default BusinessType; diff --git a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx index 9ff2b0e57de9..6df777f7ba36 100644 --- a/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx +++ b/src/pages/ReimbursementAccount/NonUSD/BusinessInfo/substeps/Confirmation.tsx @@ -1,16 +1,51 @@ -import React from 'react'; +import React, {useMemo} from 'react'; import {View} from 'react-native'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; +import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; import ScrollView from '@components/ScrollView'; +import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; import type {SubStepProps} from '@hooks/useSubStep/types'; import useThemeStyles from '@hooks/useThemeStyles'; +import {annualVolumeRange, applicantType, natureOfBusiness} from '@pages/ReimbursementAccount/NonUSD/BusinessInfo/mockedCorpayLists'; +import getSubstepValues from '@pages/ReimbursementAccount/utils/getSubstepValues'; +import ONYXKEYS from '@src/ONYXKEYS'; +import INPUT_IDS from '@src/types/form/ReimbursementAccountForm'; -function Confirmation({onNext}: SubStepProps) { +const BUSINESS_INFO_STEP_KEYS = INPUT_IDS.ADDITIONAL_DATA.CORPAY; +const { + COMPANY_NAME, + BUSINESS_REGISTRATION_INCORPORATION_NUMBER, + COMPANY_STREET, + COMPANY_CITY, + COMPANY_STATE, + COMPANY_ZIP_CODE, + BUSINESS_CONTACT_NUMBER, + FORMATION_INCORPORATION_COUNTRY_CODE, + ANNUAL_VOLUME, + APPLICANT_TYPE_ID, + BUSINESS_CATEGORY, +} = INPUT_IDS.ADDITIONAL_DATA.CORPAY; + +const displayStringValue = (list: Array<{id: string; name: string; stringValue: string}>, matchingName: string) => { + return list.find((item) => item.name === matchingName)?.stringValue ?? ''; +}; + +function Confirmation({onNext, onMove}: SubStepProps) { const {translate} = useLocalize(); const styles = useThemeStyles(); + const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); + const [reimbursementAccountDraft] = useOnyx(ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM_DRAFT); + + const values = useMemo(() => getSubstepValues(BUSINESS_INFO_STEP_KEYS, reimbursementAccountDraft, reimbursementAccount), [reimbursementAccount, reimbursementAccountDraft]); + + const paymentVolume = useMemo(() => displayStringValue(annualVolumeRange, values[ANNUAL_VOLUME]), [values]); + const businessCategory = useMemo(() => displayStringValue(natureOfBusiness, values[BUSINESS_CATEGORY]), [values]); + const businessType = useMemo(() => displayStringValue(applicantType, values[APPLICANT_TYPE_ID]), [values]); + return ( {({safeAreaPaddingBottomStyle}) => ( @@ -18,6 +53,71 @@ function Confirmation({onNext}: SubStepProps) { style={styles.pt0} contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]} > + {translate('businessInfoStep.letsDoubleCheck')} + { + onMove(0); + }} + /> + { + onMove(3); + }} + /> + { + onMove(1); + }} + /> + { + onMove(2); + }} + /> + { + onMove(5); + }} + /> + { + onMove(4); + }} + /> + { + onMove(5); + }} + /> + { + onMove(6); + }} + />