diff --git a/src/CONST.ts b/src/CONST.ts index 2de265de53ce..55c847f78ec3 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -471,6 +471,19 @@ const CONST = { PERSONAL: 'PERSONAL', }, }, + NON_USD_BANK_ACCOUNT: { + STEP: { + COUNTRY: 'CountryStep', + BANK_INFO: 'BankInfoStep', + BUSINESS_INFO: 'BusinessInfoStep', + BENEFICIAL_OWNER_INFO: 'BeneficialOwnerInfoStep', + SIGNER_INFO: 'SignerInfoStep', + AGREEMENTS: 'AgreementsStep', + FINISH: 'FinishStep', + }, + STEP_NAMES: ['1', '2', '3', '4', '5', '6'], + STEP_HEADER_HEIGHT: 40, + }, INCORPORATION_TYPES: { LLC: 'LLC', CORPORATION: 'Corp', diff --git a/src/languages/en.ts b/src/languages/en.ts index ae9d199d423e..5a9460908a76 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -2160,6 +2160,7 @@ const translations = { companyAddress: 'Company address', listOfRestrictedBusinesses: 'list of restricted businesses', confirmCompanyIsNot: 'I confirm that this company is not on the', + businessInfoTitle: 'Business info', }, beneficialOwnerInfoStep: { doYouOwn25percent: 'Do you own 25% or more of', @@ -2238,6 +2239,21 @@ const translations = { enable2FAText: 'We take your security seriously. Please set up 2FA now to add an extra layer of protection to your account.', secureYourAccount: 'Secure your account', }, + countryStep: { + confirmBusinessBank: 'Confirm business bank account currency and country', + confirmCurrency: 'Confirm currency and country', + }, + signerInfoStep: { + signerInfo: 'Signer info', + }, + agreementsStep: { + agreements: 'Agreements', + pleaseConfirm: 'Please confirm the agreements below', + accept: 'Accept and add bank account', + }, + finishStep: { + connect: 'Connect bank account', + }, reimbursementAccountLoadingAnimation: { oneMoment: 'One moment', explanationLine: "We’re taking a look at your information. You'll be able to continue with next steps shortly.", diff --git a/src/languages/es.ts b/src/languages/es.ts index 9e182d99a94a..ab9a1b183d98 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2184,6 +2184,7 @@ const translations = { companyAddress: 'Dirección de la empresa', listOfRestrictedBusinesses: 'lista de negocios restringidos', confirmCompanyIsNot: 'Confirmo que esta empresa no está en la', + businessInfoTitle: 'Información del negocio', }, beneficialOwnerInfoStep: { doYouOwn25percent: '¿Posees el 25% o más de', @@ -2262,6 +2263,21 @@ const translations = { enable2FAText: 'Tu seguridad es importante para nosotros. Por favor, configura ahora la autenticación de dos factores para añadir una capa adicional de protección a tu cuenta.', secureYourAccount: 'Asegura tu cuenta', }, + countryStep: { + confirmBusinessBank: 'Confirmar moneda y país de la cuenta bancaria comercial', + confirmCurrency: 'Confirmar moneda y país', + }, + signerInfoStep: { + signerInfo: 'Información del firmante', + }, + agreementsStep: { + agreements: 'Acuerdos', + pleaseConfirm: 'Por favor confirme los acuerdos a continuación', + accept: 'Aceptar y añadir cuenta bancaria', + }, + finishStep: { + connect: 'Conectar cuenta bancaria', + }, reimbursementAccountLoadingAnimation: { oneMoment: 'Un momento', explanationLine: 'Estamos verificando tu información y podrás continuar con los siguientes pasos en unos momentos.', diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/Agreements.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/Agreements.tsx new file mode 100644 index 000000000000..605157e2fe33 --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/Agreements/Agreements.tsx @@ -0,0 +1,61 @@ +import type {ComponentType} from 'react'; +import React from 'react'; +import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useSubStep from '@hooks/useSubStep'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import CONST from '@src/CONST'; +import Confirmation from './substeps/Confirmation'; + +type AgreementsProps = { + /** Handles back button press */ + onBackButtonPress: () => void; + + /** Handles submit button press */ + onSubmit: () => void; +}; + +const bodyContent: Array> = [Confirmation]; + +function Agreements({onBackButtonPress, onSubmit}: AgreementsProps) { + const {translate} = useLocalize(); + + const submit = () => { + onSubmit(); + }; + + const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + + const handleBackButtonPress = () => { + if (isEditing) { + goToTheLastStep(); + return; + } + + if (screenIndex === 0) { + onBackButtonPress(); + } else { + prevScreen(); + } + }; + + return ( + + + + ); +} + +Agreements.displayName = 'Agreements'; + +export default Agreements; diff --git a/src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx new file mode 100644 index 000000000000..da828929b0da --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/Agreements/substeps/Confirmation.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import FormProvider from '@components/Form/FormProvider'; +import Text from '@components/Text'; +import useLocalize from '@hooks/useLocalize'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; +import ONYXKEYS from '@src/ONYXKEYS'; + +function Confirmation({onNext}: SubStepProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + return ( + + {translate('agreementsStep.pleaseConfirm')} + + ); +} + +Confirmation.displayName = 'Confirmation'; + +export default Confirmation; diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx new file mode 100644 index 000000000000..d6a9267b4f94 --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/BankInfo.tsx @@ -0,0 +1,61 @@ +import type {ComponentType} from 'react'; +import React from 'react'; +import InteractiveStepWrapper from '@components/InteractiveStepWrapper'; +import useLocalize from '@hooks/useLocalize'; +import useSubStep from '@hooks/useSubStep'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import CONST from '@src/CONST'; +import Confirmation from './substeps/Confirmation'; + +type BankInfoProps = { + /** Handles back button press */ + onBackButtonPress: () => void; + + /** Handles submit button press */ + onSubmit: () => void; +}; + +const bodyContent: Array> = [Confirmation]; + +function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) { + const {translate} = useLocalize(); + + const submit = () => { + onSubmit(); + }; + + const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep({bodyContent, startFrom: 0, onFinished: submit}); + + const handleBackButtonPress = () => { + if (isEditing) { + goToTheLastStep(); + return; + } + + if (screenIndex === 0) { + onBackButtonPress(); + } else { + prevScreen(); + } + }; + + return ( + + + + ); +} + +BankInfo.displayName = 'BankInfo'; + +export default BankInfo; diff --git a/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx new file mode 100644 index 000000000000..9ff2b0e57de9 --- /dev/null +++ b/src/pages/ReimbursementAccount/NonUSD/BankInfo/substeps/Confirmation.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import {View} from 'react-native'; +import Button from '@components/Button'; +import SafeAreaConsumer from '@components/SafeAreaConsumer'; +import ScrollView from '@components/ScrollView'; +import useLocalize from '@hooks/useLocalize'; +import type {SubStepProps} from '@hooks/useSubStep/types'; +import useThemeStyles from '@hooks/useThemeStyles'; + +function Confirmation({onNext}: SubStepProps) { + const {translate} = useLocalize(); + const styles = useThemeStyles(); + + return ( + + {({safeAreaPaddingBottomStyle}) => ( + + +