From 95e9ae8f494d949bdaa61b61affc65f1105cd5f6 Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Mon, 1 Aug 2022 19:05:37 -0700
Subject: [PATCH 1/2] Revert "Revert "Add in bad diff from staging""


From 7e6b62125b626a32865f1c8a3e1a116a8fae9d4c Mon Sep 17 00:00:00 2001
From: Yuwen Memon <yuwen@expensify.com>
Date: Tue, 2 Aug 2022 10:13:42 -0700
Subject: [PATCH 2/2] Get staging code to match working version in main

---
 src/pages/AddPersonalBankAccountPage.js       |  37 ++++--
 .../Payments/PaymentsPage/BasePaymentsPage.js |   1 +
 .../settings/Payments/TransferBalancePage.js  | 107 ++++++++++--------
 3 files changed, 89 insertions(+), 56 deletions(-)

diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js
index b7cc498da2f4..dc5245702c88 100644
--- a/src/pages/AddPersonalBankAccountPage.js
+++ b/src/pages/AddPersonalBankAccountPage.js
@@ -13,7 +13,6 @@ import AddPlaidBankAccount from '../components/AddPlaidBankAccount';
 import getPlaidOAuthReceivedRedirectURI from '../libs/getPlaidOAuthReceivedRedirectURI';
 import compose from '../libs/compose';
 import ONYXKEYS from '../ONYXKEYS';
-import KeyboardAvoidingView from '../components/KeyboardAvoidingView';
 import Text from '../components/Text';
 import styles from '../styles/styles';
 import * as Illustrations from '../components/Icon/Illustrations';
@@ -176,17 +175,33 @@ class AddPersonalBankAccountPage extends React.Component {
                                 receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()}
                             />
                             {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
-                                <FormAlertWithSubmitButton
-                                    isAlertVisible={Boolean(error)}
-                                    buttonText={this.props.translate('common.saveAndContinue')}
-                                    onSubmit={this.submit}
-                                    message={error}
-                                    isLoading={loading}
-                                />
+                                <View style={[styles.mb5]}>
+                                    <TextInput
+                                        label={this.props.translate('addPersonalBankAccountPage.enterPassword')}
+                                        secureTextEntry
+                                        value={this.state.password}
+                                        autoCompleteType="password"
+                                        textContentType="password"
+                                        autoCapitalize="none"
+                                        autoFocus={canFocusInputOnScreenFocus()}
+                                        onChangeText={text => this.setState({password: text})}
+                                        errorText={this.getErrorText('password')}
+                                        hasError={this.getErrors().password}
+                                    />
+                                </View>
                             )}
-                        </FormScrollView>
-                    )}
-                </KeyboardAvoidingView>
+                        </View>
+                        {!_.isUndefined(this.state.selectedPlaidBankAccount) && (
+                            <FormAlertWithSubmitButton
+                                isAlertVisible={Boolean(error)}
+                                buttonText={this.props.translate('common.saveAndContinue')}
+                                onSubmit={this.submit}
+                                message={error}
+                                isLoading={loading}
+                            />
+                        )}
+                    </FormScrollView>
+                )}
             </ScreenWrapper>
         );
     }
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 7b2954f4d2a5..6b49dca8356f 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -33,6 +33,7 @@ import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
 import * as PaymentUtils from '../../../../libs/PaymentUtils';
+import OfflineIndicator from '../../../../components/OfflineIndicator';
 
 class BasePaymentsPage extends React.Component {
     constructor(props) {
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 0df6461cc9c2..b1699f367e8f 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -11,7 +11,6 @@ import styles from '../../../styles/styles';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import {withNetwork} from '../../../components/OnyxProvider';
 import compose from '../../../libs/compose';
-import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import * as Illustrations from '../../../components/Icon/Illustrations';
 import Icon from '../../../components/Icon';
@@ -208,54 +207,72 @@ class TransferBalancePage extends React.Component {
 
         return (
             <ScreenWrapper>
-                <KeyboardAvoidingView>
-                    <HeaderWithCloseButton
-                        title={this.props.translate('common.transferBalance')}
-                        shouldShowBackButton
-                        onBackButtonPress={() => Navigation.goBack()}
-                        onCloseButtonPress={() => Navigation.dismissModal(true)}
-                    />
-                    <View style={[styles.flex1, styles.flexBasisAuto, styles.justifyContentCenter]}>
-                        <CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
+                <HeaderWithCloseButton
+                    title={this.props.translate('common.transferBalance')}
+                    shouldShowBackButton
+                    onBackButtonPress={() => Navigation.goBack()}
+                    onCloseButtonPress={() => Navigation.dismissModal(true)}
+                />
+                <View style={[styles.flex1, styles.flexBasisAuto, styles.justifyContentCenter]}>
+                    <CurrentWalletBalance balanceStyles={[styles.transferBalanceBalance]} />
+                </View>
+                <ScrollView style={styles.flexGrow0} contentContainerStyle={styles.pv5}>
+                    <View style={styles.ph5}>
+                        {_.map(this.paymentTypes, paymentType => (
+                            <MenuItem
+                                key={paymentType.key}
+                                title={paymentType.title}
+                                description={paymentType.description}
+                                iconWidth={variables.iconSizeXLarge}
+                                iconHeight={variables.iconSizeXLarge}
+                                icon={paymentType.icon}
+                                success={selectedPaymentType === paymentType.key}
+                                wrapperStyle={{
+                                    ...styles.mt3,
+                                    ...styles.pv4,
+                                    ...styles.transferBalancePayment,
+                                    ...(selectedPaymentType === paymentType.key
+                                        && styles.transferBalanceSelectedPayment),
+                                }}
+                                onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
+                            />
+                        ))}
                     </View>
-                    <ScrollView style={styles.flexGrow0} contentContainerStyle={styles.pv5}>
-                        <View style={styles.ph5}>
-                            {_.map(this.paymentTypes, paymentType => (
-                                <MenuItem
-                                    key={paymentType.key}
-                                    title={paymentType.title}
-                                    description={paymentType.description}
-                                    iconWidth={variables.iconSizeXLarge}
-                                    iconHeight={variables.iconSizeXLarge}
-                                    icon={paymentType.icon}
-                                    success={selectedPaymentType === paymentType.key}
-                                    wrapperStyle={{
-                                        ...styles.mt3,
-                                        ...styles.pv4,
-                                        ...styles.transferBalancePayment,
-                                        ...(selectedPaymentType === paymentType.key
-                                            && styles.transferBalanceSelectedPayment),
-                                    }}
-                                    onPress={() => this.navigateToChooseTransferAccount(paymentType.type)}
-                                />
-                            ))}
-                        </View>
+                    <Text
+                        style={[styles.p5, styles.textStrong, styles.textLabel, styles.justifyContentStart]}
+                    >
+                        {this.props.translate('transferAmountPage.whichAccount')}
+                    </Text>
+                    {Boolean(selectedAccount)
+                        && (
+                            <MenuItem
+                                title={selectedAccount.title}
+                                description={selectedAccount.description}
+                                shouldShowRightIcon
+                                iconWidth={selectedAccount.iconSize}
+                                iconHeight={selectedAccount.iconSize}
+                                icon={selectedAccount.icon}
+                                onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
+                            />
+                        )}
+                    <View style={styles.ph5}>
                         <Text
-                            style={[styles.p5, styles.textStrong, styles.textLabel, styles.justifyContentStart]}
+                            style={[
+                                styles.mt5,
+                                styles.mb3,
+                                styles.textStrong,
+                                styles.textLabel,
+                                styles.justifyContentStart,
+                            ]}
                         >
-                            {this.props.translate('transferAmountPage.whichAccount')}
+                            {this.props.translate('transferAmountPage.fee')}
                         </Text>
-                        {Boolean(selectedAccount)
-                            && (
-                                <MenuItem
-                                    title={selectedAccount.title}
-                                    description={selectedAccount.description}
-                                    shouldShowRightIcon
-                                    iconWidth={selectedAccount.iconSize}
-                                    iconHeight={selectedAccount.iconSize}
-                                    icon={selectedAccount.icon}
-                                    onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)}
-                                />
+                        <Text
+                            style={[styles.justifyContentStart]}
+                        >
+                            {this.props.numberFormat(
+                                calculatedFee / 100,
+                                {style: 'currency', currency: 'USD'},
                             )}
                         </Text>
                     </View>