From 9a514debf057dcf78d04702e12c9b01eca779c4c Mon Sep 17 00:00:00 2001
From: jayeshmangwani <jayeshmangwani@gmail.com>
Date: Tue, 22 Nov 2022 21:06:37 +0530
Subject: [PATCH] added scrollable to payments page and connect bank account
 page

---
 src/pages/ReimbursementAccount/EnableStep.js  |  6 +-
 .../settings/Payments/PaymentMethodList.js    |  5 ++
 .../Payments/PaymentsPage/BasePaymentsPage.js | 85 ++++++++++---------
 3 files changed, 55 insertions(+), 41 deletions(-)

diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js
index 7c0b58bf0157..88a24edf4fb5 100644
--- a/src/pages/ReimbursementAccount/EnableStep.js
+++ b/src/pages/ReimbursementAccount/EnableStep.js
@@ -1,7 +1,7 @@
 import _ from 'underscore';
 import React from 'react';
 import PropTypes from 'prop-types';
-import {View, Image} from 'react-native';
+import {View, Image, ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import styles from '../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
@@ -111,7 +111,7 @@ class EnableStep extends React.Component {
                     shouldShowBackButton
                     onBackButtonPress={() => Navigation.goBack()}
                 />
-                <View style={[styles.flex1]}>
+                <ScrollView style={[styles.flex1]}>
                     <Section
                         title={!isUsingExpensifyCard ? this.props.translate('workspace.bankAccount.oneMoreThing') : this.props.translate('workspace.bankAccount.allSet')}
                         // eslint-disable-next-line max-len
@@ -139,7 +139,7 @@ class EnableStep extends React.Component {
                             {this.props.translate('workspace.card.checkingDomain')}
                         </Text>
                     )}
-                </View>
+                </ScrollView>
             </View>
         );
     }
diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 7691b02e9f43..b1be756e2a17 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -60,6 +60,9 @@ const propTypes = {
     /** ID of selected payment method */
     selectedMethodID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
+    /** Content for the FlatList header component */
+    listHeaderComponent: PropTypes.func,
+
     ...withLocalizePropTypes,
 };
 
@@ -76,6 +79,7 @@ const defaultProps = {
     actionPaymentMethodType: '',
     activePaymentMethodID: '',
     selectedMethodID: '',
+    listHeaderComponent: null,
 };
 
 class PaymentMethodList extends Component {
@@ -215,6 +219,7 @@ class PaymentMethodList extends Component {
                     renderItem={this.renderItem}
                     keyExtractor={item => item.key}
                     ListEmptyComponent={this.renderListEmptyComponent()}
+                    ListHeaderComponent={this.props.listHeaderComponent}
                 />
                 {
                     this.props.shouldShowAddPaymentMethodButton
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 1c952172fe55..b308898e4662 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -63,6 +63,7 @@ class BasePaymentsPage extends React.Component {
         this.hidePasswordPrompt = this.hidePasswordPrompt.bind(this);
         this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this);
         this.setMenuPosition = this.setMenuPosition.bind(this);
+        this.listHeaderComponent = this.listHeaderComponent.bind(this);
     }
 
     componentDidMount() {
@@ -260,6 +261,51 @@ class BasePaymentsPage extends React.Component {
         Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE);
     }
 
+    listHeaderComponent() {
+        return (
+            <>
+                {Permissions.canUseWallet(this.props.betas) && (
+                    <>
+                        <View style={[styles.mv5]}>
+                            <OfflineWithFeedback
+                                pendingAction={CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}
+                                errors={this.props.walletTerms.errors}
+                                onClose={PaymentMethods.clearWalletTermsError}
+                                errorRowStyles={[styles.ml10, styles.mr2]}
+                            >
+                                <CurrentWalletBalance />
+                            </OfflineWithFeedback>
+                        </View>
+                        {this.props.userWallet.currentBalance > 0 && (
+                            <KYCWall
+                                onSuccessfulKYC={this.navigateToTransferBalancePage}
+                                enablePaymentsRoute={ROUTES.SETTINGS_ENABLE_PAYMENTS}
+                                addBankAccountRoute={ROUTES.SETTINGS_ADD_BANK_ACCOUNT}
+                                addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
+                                popoverPlacement="bottom"
+                            >
+                                {triggerKYCFlow => (
+                                    <MenuItem
+                                        title={this.props.translate('common.transferBalance')}
+                                        icon={Expensicons.Transfer}
+                                        onPress={triggerKYCFlow}
+                                        shouldShowRightIcon
+                                        disabled={this.props.network.isOffline}
+                                    />
+                                )}
+                            </KYCWall>
+                        )}
+                    </>
+                )}
+                <Text
+                    style={[styles.ph5, styles.mt6, styles.formLabel]}
+                >
+                    {this.props.translate('paymentsPage.paymentMethodsTitle')}
+                </Text>
+            </>
+        );
+    }
+
     render() {
         const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL;
         const shouldShowMakeDefaultButton = !this.state.isSelectedPaymentMethodDefault
@@ -278,44 +324,6 @@ class BasePaymentsPage extends React.Component {
                     onCloseButtonPress={() => Navigation.dismissModal(true)}
                 />
                 <View style={[styles.flex1, styles.mb4]}>
-                    {Permissions.canUseWallet(this.props.betas) && (
-                        <>
-                            <View style={[styles.mv5]}>
-                                <OfflineWithFeedback
-                                    pendingAction={CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD}
-                                    errors={this.props.walletTerms.errors}
-                                    onClose={PaymentMethods.clearWalletTermsError}
-                                    errorRowStyles={[styles.ml10, styles.mr2]}
-                                >
-                                    <CurrentWalletBalance />
-                                </OfflineWithFeedback>
-                            </View>
-                            {this.props.userWallet.currentBalance > 0 && (
-                                <KYCWall
-                                    onSuccessfulKYC={this.navigateToTransferBalancePage}
-                                    enablePaymentsRoute={ROUTES.SETTINGS_ENABLE_PAYMENTS}
-                                    addBankAccountRoute={ROUTES.SETTINGS_ADD_BANK_ACCOUNT}
-                                    addDebitCardRoute={ROUTES.SETTINGS_ADD_DEBIT_CARD}
-                                    popoverPlacement="bottom"
-                                >
-                                    {triggerKYCFlow => (
-                                        <MenuItem
-                                            title={this.props.translate('common.transferBalance')}
-                                            icon={Expensicons.Transfer}
-                                            onPress={triggerKYCFlow}
-                                            shouldShowRightIcon
-                                            disabled={this.props.network.isOffline}
-                                        />
-                                    )}
-                                </KYCWall>
-                            )}
-                        </>
-                    )}
-                    <Text
-                        style={[styles.ph5, styles.mt6, styles.formLabel]}
-                    >
-                        {this.props.translate('paymentsPage.paymentMethodsTitle')}
-                    </Text>
                     <OfflineWithFeedback
                         style={styles.flex1}
                         contentContainerStyle={styles.flex1}
@@ -333,6 +341,7 @@ class BasePaymentsPage extends React.Component {
                             activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt
                                 ? this.getSelectedPaymentMethodID()
                                 : ''}
+                            listHeaderComponent={this.listHeaderComponent}
                         />
                     </OfflineWithFeedback>
                 </View>