Merge pull request #51019 from MrMuzyk/feat/frame-for-non-usd

feat: Frame for non USD bank account flow

Author: madmax330

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',

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.",

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.',

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<ComponentType<SubStepProps>> = [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 (
+        <InteractiveStepWrapper
+            wrapperID={Agreements.displayName}
+            handleBackButtonPress={handleBackButtonPress}
+            headerTitle={translate('agreementsStep.agreements')}
+            stepNames={CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES}
+            startStepIndex={5}
+        >
+            <SubStep
+                isEditing={isEditing}
+                onNext={nextScreen}
+                onMove={moveTo}
+            />
+        </InteractiveStepWrapper>
+    );
+}
+
+Agreements.displayName = 'Agreements';
+
+export default Agreements;

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 (
+        <FormProvider
+            formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
+            onSubmit={onNext}
+            submitButtonText={translate('agreementsStep.accept')}
+            style={[styles.mh5, styles.flexGrow1]}
+            enabledWhenOffline={false}
+        >
+            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('agreementsStep.pleaseConfirm')}</Text>
+        </FormProvider>
+    );
+}
+
+Confirmation.displayName = 'Confirmation';
+
+export default Confirmation;

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<ComponentType<SubStepProps>> = [Confirmation];
+
+function BankInfo({onBackButtonPress, onSubmit}: BankInfoProps) {
+    const {translate} = useLocalize();
+
+    const submit = () => {
+        onSubmit();
+    };
+
+    const {componentToRender: SubStep, isEditing, screenIndex, nextScreen, prevScreen, moveTo, goToTheLastStep} = useSubStep<SubStepProps>({bodyContent, startFrom: 0, onFinished: submit});
+
+    const handleBackButtonPress = () => {
+        if (isEditing) {
+            goToTheLastStep();
+            return;
+        }
+
+        if (screenIndex === 0) {
+            onBackButtonPress();
+        } else {
+            prevScreen();
+        }
+    };
+
+    return (
+        <InteractiveStepWrapper
+            wrapperID={BankInfo.displayName}
+            handleBackButtonPress={handleBackButtonPress}
+            headerTitle={translate('bankAccount.bankInfo')}
+            stepNames={CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES}
+            startStepIndex={1}
+        >
+            <SubStep
+                isEditing={isEditing}
+                onNext={nextScreen}
+                onMove={moveTo}
+            />
+        </InteractiveStepWrapper>
+    );
+}
+
+BankInfo.displayName = 'BankInfo';
+
+export default BankInfo;

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 (
+        <SafeAreaConsumer>
+            {({safeAreaPaddingBottomStyle}) => (
+                <ScrollView
+                    style={styles.pt0}
+                    contentContainerStyle={[styles.flexGrow1, safeAreaPaddingBottomStyle]}
+                >
+                    <View style={[styles.p5, styles.flexGrow1, styles.justifyContentEnd]}>
+                        <Button
+                            success
+                            style={[styles.w100]}
+                            onPress={onNext}
+                            large
+                            text={translate('common.confirm')}
+                        />
+                    </View>
+                </ScrollView>
+            )}
+        </SafeAreaConsumer>
+    );
+}
+
+Confirmation.displayName = 'Confirmation';
+
+export default Confirmation;

src/pages/ReimbursementAccount/NonUSD/BeneficialOwnerInfo/BeneficialOwnerInfo.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import {View} from 'react-native';
+import Button from '@components/Button';
+import InteractiveStepWrapper from '@components/InteractiveStepWrapper';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type BeneficialOwnerInfoProps = {
+    /** Handles back button press */
+    onBackButtonPress: () => void;
+
+    /** Handles submit button press */
+    onSubmit: () => void;
+};
+
+function BeneficialOwnerInfo({onBackButtonPress, onSubmit}: BeneficialOwnerInfoProps) {
+    const {translate} = useLocalize();
+    const styles = useThemeStyles();
+
+    return (
+        <InteractiveStepWrapper
+            wrapperID={BeneficialOwnerInfo.displayName}
+            handleBackButtonPress={onBackButtonPress}
+            headerTitle={translate('beneficialOwnerInfoStep.companyOwner')}
+            stepNames={CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES}
+            startStepIndex={3}
+        >
+            <View style={styles.mtAuto}>
+                <Button
+                    success
+                    large
+                    style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
+                    onPress={onSubmit}
+                    text={translate('common.confirm')}
+                />
+            </View>
+        </InteractiveStepWrapper>
+    );
+}
+
+BeneficialOwnerInfo.displayName = 'BeneficialOwnerInfo';
+
+export default BeneficialOwnerInfo;

src/pages/ReimbursementAccount/NonUSD/BusinessInfo/BusinessInfo.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 BusinessInfoProps = {
+    /** Handles back button press */
+    onBackButtonPress: () => void;
+
+    /** Handles submit button press */
+    onSubmit: () => void;
+};
+
+const bodyContent: Array<ComponentType<SubStepProps>> = [Confirmation];
+
+function BusinessInfo({onBackButtonPress, onSubmit}: BusinessInfoProps) {
+    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 (
+        <InteractiveStepWrapper
+            wrapperID={BusinessInfo.displayName}
+            handleBackButtonPress={handleBackButtonPress}
+            headerTitle={translate('businessInfoStep.businessInfoTitle')}
+            stepNames={CONST.NON_USD_BANK_ACCOUNT.STEP_NAMES}
+            startStepIndex={2}
+        >
+            <SubStep
+                isEditing={isEditing}
+                onNext={nextScreen}
+                onMove={moveTo}
+            />
+        </InteractiveStepWrapper>
+    );
+}
+
+BusinessInfo.displayName = 'BusinessInfo';
+
+export default BusinessInfo;