From ed824786d97ef0b46fe4ef9e2e4028e51687d1c0 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Sat, 17 Feb 2024 18:06:31 +0200
Subject: [PATCH] Hide the double offline indicator in bank steps

---
 .../BankInfo/substeps/Confirmation.tsx        |  87 +++++-----
 .../ConfirmationUBO.tsx                       | 151 +++++++++--------
 .../substeps/CompanyOwnersListUBO.tsx         |  83 +++++----
 .../PersonalInfo/substeps/Confirmation.tsx    | 157 +++++++++---------
 4 files changed, 233 insertions(+), 245 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
index f2070e38b942..4105a5f03f36 100644
--- a/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/BankInfo/substeps/Confirmation.tsx
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import type {SubStepProps} from '@hooks/useSubStep/types';
@@ -46,57 +45,55 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
     };
 
     return (
-        <ScreenWrapper
-            testID={Confirmation.displayName}
-            style={[styles.pt0]}
+        <ScrollView
+            style={styles.pt0}
+            contentContainerStyle={styles.flexGrow1}
         >
-            <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
-                <Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
-                {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
-                    <View style={[styles.mb5]}>
-                        <MenuItemWithTopDescription
-                            description={translate('bankAccount.routingNumber')}
-                            title={values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
-                            shouldShowRightIcon={!bankAccountID}
-                            onPress={handleModifyAccountNumbers}
-                        />
-
-                        <MenuItemWithTopDescription
-                            description={translate('bankAccount.accountNumber')}
-                            title={values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
-                            shouldShowRightIcon={!bankAccountID}
-                            onPress={handleModifyAccountNumbers}
-                        />
-                    </View>
-                )}
-                {setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && (
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('bankAccount.letsDoubleCheck')}</Text>
+            <Text style={[styles.mt3, styles.mb3, styles.ph5, styles.textSupporting]}>{translate('bankAccount.thisBankAccount')}</Text>
+            {setupType === CONST.BANK_ACCOUNT.SUBSTEP.MANUAL && (
+                <View style={[styles.mb5]}>
                     <MenuItemWithTopDescription
-                        description={values[BANK_INFO_STEP_KEYS.BANK_NAME]}
-                        title={`${translate('bankAccount.accountEnding')} ${(values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '').slice(-4)}`}
+                        description={translate('bankAccount.routingNumber')}
+                        title={values[BANK_INFO_STEP_KEYS.ROUTING_NUMBER]}
                         shouldShowRightIcon={!bankAccountID}
                         onPress={handleModifyAccountNumbers}
                     />
-                )}
-                <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                    {error && error.length > 0 && (
-                        <DotIndicatorMessage
-                            textStyles={[styles.formError]}
-                            type="error"
-                            messages={{error}}
-                        />
-                    )}
-                    <Button
-                        isLoading={isLoading}
-                        isDisabled={isLoading}
-                        success
-                        style={[styles.w100]}
-                        onPress={onNext}
-                        text={translate('common.confirm')}
+
+                    <MenuItemWithTopDescription
+                        description={translate('bankAccount.accountNumber')}
+                        title={values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER]}
+                        shouldShowRightIcon={!bankAccountID}
+                        onPress={handleModifyAccountNumbers}
                     />
                 </View>
-            </ScrollView>
-        </ScreenWrapper>
+            )}
+            {setupType === CONST.BANK_ACCOUNT.SUBSTEP.PLAID && (
+                <MenuItemWithTopDescription
+                    description={values[BANK_INFO_STEP_KEYS.BANK_NAME]}
+                    title={`${translate('bankAccount.accountEnding')} ${(values[BANK_INFO_STEP_KEYS.ACCOUNT_NUMBER] ?? '').slice(-4)}`}
+                    shouldShowRightIcon={!bankAccountID}
+                    onPress={handleModifyAccountNumbers}
+                />
+            )}
+            <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                {error && error.length > 0 && (
+                    <DotIndicatorMessage
+                        textStyles={[styles.formError]}
+                        type="error"
+                        messages={{error}}
+                    />
+                )}
+                <Button
+                    isLoading={isLoading}
+                    isDisabled={isLoading}
+                    success
+                    style={[styles.w100]}
+                    onPress={onNext}
+                    text={translate('common.confirm')}
+                />
+            </View>
+        </ScrollView>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
index c5475c86230d..7095957cfbca 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/BeneficialOwnerDetailsFormSubsteps/ConfirmationUBO.tsx
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
@@ -37,85 +36,83 @@ function ConfirmationUBO({reimbursementAccount, reimbursementAccountDraft, onNex
     const error = reimbursementAccount ? ErrorUtils.getLatestErrorMessage(reimbursementAccount) : '';
 
     return (
-        <ScreenWrapper
-            testID={ConfirmationUBO.displayName}
-            style={[styles.pt0]}
+        <ScrollView
+            style={styles.pt0}
+            contentContainerStyle={styles.flexGrow1}
         >
-            <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
-                <MenuItemWithTopDescription
-                    description={translate('beneficialOwnerInfoStep.legalName')}
-                    title={`${values.firstName} ${values.lastName}`}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(UBO_STEP_INDEXES.LEGAL_NAME);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('common.dob')}
-                    title={values.dob}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('beneficialOwnerInfoStep.last4SSN')}
-                    title={values.ssnLast4}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(UBO_STEP_INDEXES.SSN);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('beneficialOwnerInfoStep.address')}
-                    title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(UBO_STEP_INDEXES.ADDRESS);
-                    }}
-                />
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+            <MenuItemWithTopDescription
+                description={translate('beneficialOwnerInfoStep.legalName')}
+                title={`${values.firstName} ${values.lastName}`}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(UBO_STEP_INDEXES.LEGAL_NAME);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('common.dob')}
+                title={values.dob}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(UBO_STEP_INDEXES.DATE_OF_BIRTH);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('beneficialOwnerInfoStep.last4SSN')}
+                title={values.ssnLast4}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(UBO_STEP_INDEXES.SSN);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('beneficialOwnerInfoStep.address')}
+                title={`${values.street}, ${values.city}, ${values.state} ${values.zipCode}`}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(UBO_STEP_INDEXES.ADDRESS);
+                }}
+            />
 
-                <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
-                    {`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
-                    <TextLink
-                        href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('onfidoStep.facialScan')}
-                    </TextLink>
-                    {', '}
-                    <TextLink
-                        href={CONST.ONFIDO_PRIVACY_POLICY_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('common.privacy')}
-                    </TextLink>
-                    {` ${translate('common.and')} `}
-                    <TextLink
-                        href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('common.termsOfService')}
-                    </TextLink>
-                </Text>
-                <View style={[styles.ph5, styles.mtAuto]}>
-                    {error && error.length > 0 && (
-                        <DotIndicatorMessage
-                            textStyles={[styles.formError]}
-                            type="error"
-                            messages={{error}}
-                        />
-                    )}
-                    <Button
-                        success
-                        style={[styles.w100, styles.mt2, styles.pb5]}
-                        onPress={onNext}
-                        text={translate('common.confirm')}
+            <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
+                {`${translate('beneficialOwnerInfoStep.byAddingThisBankAccount')} `}
+                <TextLink
+                    href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('onfidoStep.facialScan')}
+                </TextLink>
+                {', '}
+                <TextLink
+                    href={CONST.ONFIDO_PRIVACY_POLICY_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('common.privacy')}
+                </TextLink>
+                {` ${translate('common.and')} `}
+                <TextLink
+                    href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('common.termsOfService')}
+                </TextLink>
+            </Text>
+            <View style={[styles.ph5, styles.mtAuto]}>
+                {error && error.length > 0 && (
+                    <DotIndicatorMessage
+                        textStyles={[styles.formError]}
+                        type="error"
+                        messages={{error}}
                     />
-                </View>
-            </ScrollView>
-        </ScreenWrapper>
+                )}
+                <Button
+                    success
+                    style={[styles.w100, styles.mt2, styles.pb5]}
+                    onPress={onNext}
+                    text={translate('common.confirm')}
+                />
+            </View>
+        </ScrollView>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
index 650972966ebd..27838c65d12e 100644
--- a/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
+++ b/src/pages/ReimbursementAccount/BeneficialOwnerInfo/substeps/CompanyOwnersListUBO.tsx
@@ -6,7 +6,6 @@ import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import * as Expensicons from '@components/Icon/Expensicons';
 import MenuItem from '@components/MenuItem';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -101,49 +100,47 @@ function CompanyOwnersListUBO({
         });
 
     return (
-        <ScreenWrapper
-            testID={CompanyOwnersListUBO.displayName}
-            style={[styles.pt0]}
+        <ScrollView
+            style={styles.pt0}
+            contentContainerStyle={[styles.flexGrow1, styles.ph0]}
         >
-            <ScrollView contentContainerStyle={[styles.flexGrow1, styles.ph0]}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
-                <Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
-                <View>
-                    <Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
-                    {isUserUBO && (
-                        <MenuItem
-                            title={`${requestorData.firstName} ${requestorData.lastName}`}
-                            description={`${requestorData.requestorAddressStreet}, ${requestorData.requestorAddressCity}, ${requestorData.requestorAddressState} ${requestorData.requestorAddressZipCode}`}
-                            wrapperStyle={[styles.ph5]}
-                            icon={Expensicons.FallbackAvatar}
-                            iconWidth={40}
-                            iconHeight={40}
-                            interactive={false}
-                            shouldShowRightIcon={false}
-                            displayInDefaultIconColor
-                        />
-                    )}
-                    {extraBeneficialOwners}
-                </View>
-
-                <View style={[styles.ph5, styles.mtAuto]}>
-                    {error && error.length > 0 && (
-                        <DotIndicatorMessage
-                            textStyles={[styles.formError]}
-                            type="error"
-                            messages={{error}}
-                        />
-                    )}
-                </View>
-                <Button
-                    success
-                    isLoading={isLoading}
-                    style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
-                    onPress={handleUBOsConfirmation}
-                    text={translate('common.confirm')}
-                />
-            </ScrollView>
-        </ScreenWrapper>
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5]}>{translate('beneficialOwnerInfoStep.letsDoubleCheck')}</Text>
+            <Text style={[styles.p5, styles.textSupporting]}>{translate('beneficialOwnerInfoStep.regulationRequiresUsToVerifyTheIdentity')}</Text>
+            <View>
+                <Text style={[styles.textSupporting, styles.pv1, styles.ph5]}>{`${translate('beneficialOwnerInfoStep.owners')}:`}</Text>
+                {isUserUBO && (
+                    <MenuItem
+                        title={`${requestorData.firstName} ${requestorData.lastName}`}
+                        description={`${requestorData.requestorAddressStreet}, ${requestorData.requestorAddressCity}, ${requestorData.requestorAddressState} ${requestorData.requestorAddressZipCode}`}
+                        wrapperStyle={[styles.ph5]}
+                        icon={Expensicons.FallbackAvatar}
+                        iconWidth={40}
+                        iconHeight={40}
+                        interactive={false}
+                        shouldShowRightIcon={false}
+                        displayInDefaultIconColor
+                    />
+                )}
+                {extraBeneficialOwners}
+            </View>
+
+            <View style={[styles.ph5, styles.mtAuto]}>
+                {error && error.length > 0 && (
+                    <DotIndicatorMessage
+                        textStyles={[styles.formError]}
+                        type="error"
+                        messages={{error}}
+                    />
+                )}
+            </View>
+            <Button
+                success
+                isLoading={isLoading}
+                style={[styles.w100, styles.mt2, styles.pb5, styles.ph5]}
+                onPress={handleUBOsConfirmation}
+                text={translate('common.confirm')}
+            />
+        </ScrollView>
     );
 }
 
diff --git a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
index bf838d81b929..9eae888bdd74 100644
--- a/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
+++ b/src/pages/ReimbursementAccount/PersonalInfo/substeps/Confirmation.tsx
@@ -5,7 +5,6 @@ import {withOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import DotIndicatorMessage from '@components/DotIndicatorMessage';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
-import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import TextLink from '@components/TextLink';
 import useLocalize from '@hooks/useLocalize';
@@ -41,88 +40,86 @@ function Confirmation({reimbursementAccount, reimbursementAccountDraft, onNext,
     const error = ErrorUtils.getLatestErrorMessage(reimbursementAccount ?? {});
 
     return (
-        <ScreenWrapper
-            testID={Confirmation.displayName}
-            style={[styles.pt0]}
+        <ScrollView
+            style={styles.pt0}
+            contentContainerStyle={styles.flexGrow1}
         >
-            <ScrollView contentContainerStyle={styles.flexGrow1}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
-                <MenuItemWithTopDescription
-                    description={translate('personalInfoStep.legalName')}
-                    title={`${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('common.dob')}
-                    title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('personalInfoStep.last4SSN')}
-                    title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
-                    }}
-                />
-                <MenuItemWithTopDescription
-                    description={translate('personalInfoStep.address')}
-                    title={`${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${
-                        values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]
-                    }`}
-                    shouldShowRightIcon
-                    onPress={() => {
-                        onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
-                    }}
-                />
+            <Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mb3]}>{translate('personalInfoStep.letsDoubleCheck')}</Text>
+            <MenuItemWithTopDescription
+                description={translate('personalInfoStep.legalName')}
+                title={`${values[PERSONAL_INFO_STEP_KEYS.FIRST_NAME]} ${values[PERSONAL_INFO_STEP_KEYS.LAST_NAME]}`}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(PERSONAL_INFO_STEP_INDEXES.LEGAL_NAME);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('common.dob')}
+                title={values[PERSONAL_INFO_STEP_KEYS.DOB]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(PERSONAL_INFO_STEP_INDEXES.DATE_OF_BIRTH);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('personalInfoStep.last4SSN')}
+                title={values[PERSONAL_INFO_STEP_KEYS.SSN_LAST_4]}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(PERSONAL_INFO_STEP_INDEXES.SSN);
+                }}
+            />
+            <MenuItemWithTopDescription
+                description={translate('personalInfoStep.address')}
+                title={`${values[PERSONAL_INFO_STEP_KEYS.STREET]}, ${values[PERSONAL_INFO_STEP_KEYS.CITY]}, ${values[PERSONAL_INFO_STEP_KEYS.STATE]} ${
+                    values[PERSONAL_INFO_STEP_KEYS.ZIP_CODE]
+                }`}
+                shouldShowRightIcon
+                onPress={() => {
+                    onMove(PERSONAL_INFO_STEP_INDEXES.ADDRESS);
+                }}
+            />
 
-                <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
-                    {`${translate('personalInfoStep.byAddingThisBankAccount')} `}
-                    <TextLink
-                        href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('onfidoStep.facialScan')}
-                    </TextLink>
-                    {', '}
-                    <TextLink
-                        href={CONST.ONFIDO_PRIVACY_POLICY_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('common.privacy')}
-                    </TextLink>
-                    {` ${translate('common.and')} `}
-                    <TextLink
-                        href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
-                        style={[styles.textMicro]}
-                    >
-                        {translate('common.termsOfService')}
-                    </TextLink>
-                </Text>
-                <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
-                    {error && error.length > 0 && (
-                        <DotIndicatorMessage
-                            textStyles={[styles.formError]}
-                            type="error"
-                            messages={{error}}
-                        />
-                    )}
-                    <Button
-                        success
-                        isLoading={isLoading}
-                        style={[styles.w100]}
-                        onPress={onNext}
-                        text={translate('common.confirm')}
+            <Text style={[styles.mt3, styles.ph5, styles.textMicroSupporting]}>
+                {`${translate('personalInfoStep.byAddingThisBankAccount')} `}
+                <TextLink
+                    href={CONST.ONFIDO_FACIAL_SCAN_POLICY_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('onfidoStep.facialScan')}
+                </TextLink>
+                {', '}
+                <TextLink
+                    href={CONST.ONFIDO_PRIVACY_POLICY_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('common.privacy')}
+                </TextLink>
+                {` ${translate('common.and')} `}
+                <TextLink
+                    href={CONST.ONFIDO_TERMS_OF_SERVICE_URL}
+                    style={[styles.textMicro]}
+                >
+                    {translate('common.termsOfService')}
+                </TextLink>
+            </Text>
+            <View style={[styles.ph5, styles.pb5, styles.flexGrow1, styles.justifyContentEnd]}>
+                {error && error.length > 0 && (
+                    <DotIndicatorMessage
+                        textStyles={[styles.formError]}
+                        type="error"
+                        messages={{error}}
                     />
-                </View>
-            </ScrollView>
-        </ScreenWrapper>
+                )}
+                <Button
+                    success
+                    isLoading={isLoading}
+                    style={[styles.w100]}
+                    onPress={onNext}
+                    text={translate('common.confirm')}
+                />
+            </View>
+        </ScrollView>
     );
 }