From 68e5ce63db6db166ab623d0e686e6665f49ac705 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 1 Dec 2021 16:22:29 +0530
Subject: [PATCH] fis: remaining pages for workspace

---
 .../ReimbursementAccount/BankAccountStep.js   | 100 +++++++++---------
 .../workspace/WorkspaceBankAccountPage.js     |  67 ++++++------
 2 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/src/pages/ReimbursementAccount/BankAccountStep.js b/src/pages/ReimbursementAccount/BankAccountStep.js
index 9b9411ded77f..1429687ccc1b 100644
--- a/src/pages/ReimbursementAccount/BankAccountStep.js
+++ b/src/pages/ReimbursementAccount/BankAccountStep.js
@@ -1,6 +1,6 @@
 import _ from 'underscore';
 import React from 'react';
-import {View, Image} from 'react-native';
+import {View, Image, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import MenuItem from '../../components/MenuItem';
@@ -176,62 +176,60 @@ class BankAccountStep extends React.Component {
                     shouldShowBackButton
                 />
                 {!subStep && (
-                    <>
-                        <View style={[styles.flex1]}>
-                            <WorkspaceSection
-                                icon={Illustrations.BankMouseGreen}
-                                title={this.props.translate('workspace.bankAccount.streamlinePayments')}
-                            />
-                            <Text style={[styles.mh5, styles.mb5]}>
-                                {this.props.translate('bankAccount.toGetStarted')}
+                    <ScrollView style={[styles.flex1]}>
+                        <WorkspaceSection
+                            icon={Illustrations.BankMouseGreen}
+                            title={this.props.translate('workspace.bankAccount.streamlinePayments')}
+                        />
+                        <Text style={[styles.mh5, styles.mb5]}>
+                            {this.props.translate('bankAccount.toGetStarted')}
+                        </Text>
+                        <MenuItem
+                            icon={Expensicons.Bank}
+                            title={this.props.translate('bankAccount.connectOnlineWithPlaid')}
+                            onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
+                            disabled={this.props.isPlaidDisabled || !this.props.user.validated}
+                            shouldShowRightIcon
+                        />
+                        {this.props.isPlaidDisabled && (
+                            <Text style={[styles.formError, styles.mh5]}>
+                                {this.props.translate('bankAccount.error.tooManyAttempts')}
                             </Text>
-                            <MenuItem
-                                icon={Expensicons.Bank}
-                                title={this.props.translate('bankAccount.connectOnlineWithPlaid')}
-                                onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID)}
-                                disabled={this.props.isPlaidDisabled || !this.props.user.validated}
-                                shouldShowRightIcon
-                            />
-                            {this.props.isPlaidDisabled && (
-                                <Text style={[styles.formError, styles.mh5]}>
-                                    {this.props.translate('bankAccount.error.tooManyAttempts')}
+                        )}
+                        <MenuItem
+                            icon={Expensicons.Paycheck}
+                            title={this.props.translate('bankAccount.connectManually')}
+                            disabled={!this.props.user.validated}
+                            onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)}
+                            shouldShowRightIcon
+                        />
+                        {!this.props.user.validated && (
+                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
+                                <Text style={[styles.mutedTextLabel, styles.mr4]}>
+                                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
                                 </Text>
-                            )}
-                            <MenuItem
-                                icon={Expensicons.Paycheck}
-                                title={this.props.translate('bankAccount.connectManually')}
-                                disabled={!this.props.user.validated}
-                                onPress={() => BankAccounts.setBankAccountSubStep(CONST.BANK_ACCOUNT.SETUP_TYPE.MANUAL)}
-                                shouldShowRightIcon
-                            />
-                            {!this.props.user.validated && (
-                                <View style={[styles.flexRow, styles.alignItemsCenter, styles.m4]}>
-                                    <Text style={[styles.mutedTextLabel, styles.mr4]}>
-                                        <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                                    </Text>
-                                    <Text style={styles.mutedTextLabel}>
-                                        {this.props.translate('bankAccount.validateAccountError')}
-                                    </Text>
-                                </View>
-                            )}
-                            <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
-                                <TextLink href="https://use.expensify.com/privacy">
-                                    {this.props.translate('common.privacy')}
+                                <Text style={styles.mutedTextLabel}>
+                                    {this.props.translate('bankAccount.validateAccountError')}
+                                </Text>
+                            </View>
+                        )}
+                        <View style={[styles.m5, styles.flexRow, styles.justifyContentBetween]}>
+                            <TextLink href="https://use.expensify.com/privacy">
+                                {this.props.translate('common.privacy')}
+                            </TextLink>
+                            <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                <TextLink
+                                    // eslint-disable-next-line max-len
+                                    href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
+                                >
+                                    {this.props.translate('bankAccount.yourDataIsSecure')}
                                 </TextLink>
-                                <View style={[styles.flexRow, styles.alignItemsCenter]}>
-                                    <TextLink
-                                        // eslint-disable-next-line max-len
-                                        href="https://community.expensify.com/discussion/5677/deep-dive-how-expensify-protects-your-information/"
-                                    >
-                                        {this.props.translate('bankAccount.yourDataIsSecure')}
-                                    </TextLink>
-                                    <View style={[styles.ml1]}>
-                                        <Icon src={Expensicons.Lock} fill={colors.blue} />
-                                    </View>
+                                <View style={[styles.ml1]}>
+                                    <Icon src={Expensicons.Lock} fill={colors.blue} />
                                 </View>
                             </View>
                         </View>
-                    </>
+                    </ScrollView>
                 )}
                 {subStep === CONST.BANK_ACCOUNT.SETUP_TYPE.PLAID && (
                     <AddPlaidBankAccount
diff --git a/src/pages/workspace/WorkspaceBankAccountPage.js b/src/pages/workspace/WorkspaceBankAccountPage.js
index 219c1c3f27c5..09d4165c49fd 100644
--- a/src/pages/workspace/WorkspaceBankAccountPage.js
+++ b/src/pages/workspace/WorkspaceBankAccountPage.js
@@ -1,10 +1,8 @@
 import lodashGet from 'lodash/get';
 import React from 'react';
 import {withOnyx} from 'react-native-onyx';
-import HeaderWithCloseButton from '../../components/HeaderWithCloseButton';
 import * as Expensicons from '../../components/Icon/Expensicons';
 import * as Illustrations from '../../components/Icon/Illustrations';
-import ScreenWrapper from '../../components/ScreenWrapper';
 import Text from '../../components/Text';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import * as BankAccounts from '../../libs/actions/BankAccounts';
@@ -16,6 +14,8 @@ import ROUTES from '../../ROUTES';
 import reimbursementAccountPropTypes from '../ReimbursementAccount/reimbursementAccountPropTypes';
 import WorkspaceSection from './WorkspaceSection';
 import WorkspaceResetBankAccountModal from './WorkspaceResetBankAccountModal';
+import WorkspacePageWithSections from './WorkspacePageWithSections';
+
 
 const propTypes = {
     /** ACH data for the withdrawal account actively being set up */
@@ -85,37 +85,38 @@ class WorkspaceBankAccountPage extends React.Component {
         }
 
         return (
-            <ScreenWrapper>
-                <HeaderWithCloseButton
-                    title={this.props.translate('workspace.common.bankAccount')}
-                    onCloseButtonPress={Navigation.dismissModal}
-                    onBackButtonPress={() => Navigation.navigate(ROUTES.getWorkspaceInitialRoute(this.props.route.params.policyID))}
-                    shouldShowBackButton
-                />
-                <WorkspaceSection
-                    title={this.props.translate('workspace.bankAccount.almostDone')}
-                    icon={Illustrations.BankArrowPink}
-                    menuItems={[
-                        {
-                            title: this.props.translate('workspace.bankAccount.continueWithSetup'),
-                            icon: Expensicons.Bank,
-                            onPress: this.navigateToBankAccountRoute,
-                            shouldShowRightIcon: true,
-                        },
-                        {
-                            title: this.props.translate('workspace.bankAccount.startOver'),
-                            icon: Expensicons.RotateLeft,
-                            onPress: BankAccounts.requestResetFreePlanBankAccount,
-                            shouldShowRightIcon: true,
-                        },
-                    ]}
-                >
-                    <Text>
-                        {this.props.translate('workspace.bankAccount.youreAlmostDone')}
-                    </Text>
-                </WorkspaceSection>
-                <WorkspaceResetBankAccountModal />
-            </ScreenWrapper>
+            <WorkspacePageWithSections
+                headerText={this.props.translate('workspace.common.bankAccount')}
+                route={this.props.route}
+            >
+                {() => (
+                    <>
+                        <WorkspaceSection
+                            title={this.props.translate('workspace.bankAccount.almostDone')}
+                            icon={Illustrations.BankArrowPink}
+                            menuItems={[
+                                {
+                                    title: this.props.translate('workspace.bankAccount.continueWithSetup'),
+                                    icon: Expensicons.Bank,
+                                    onPress: this.navigateToBankAccountRoute,
+                                    shouldShowRightIcon: true,
+                                },
+                                {
+                                    title: this.props.translate('workspace.bankAccount.startOver'),
+                                    icon: Expensicons.RotateLeft,
+                                    onPress: BankAccounts.requestResetFreePlanBankAccount,
+                                    shouldShowRightIcon: true,
+                                },
+                            ]}
+                        >
+                            <Text>
+                                {this.props.translate('workspace.bankAccount.youreAlmostDone')}
+                            </Text>
+                        </WorkspaceSection>
+                        <WorkspaceResetBankAccountModal />
+                    </>
+                )}
+            </WorkspacePageWithSections>
         );
     }
 }