From 6b71211f6aa6fea96092f769e9fafa554cae16b7 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 28 Jun 2022 15:04:16 +0400
Subject: [PATCH 01/45] Use new API command: TransferBalance

---
 src/libs/actions/PaymentMethods.js            | 29 +++++++++++++++++--
 .../settings/Payments/TransferBalancePage.js  |  2 +-
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 987095e63a72..7d951c4dc793 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -4,6 +4,7 @@ import lodashGet from 'lodash/get';
 import Onyx from 'react-native-onyx';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as DeprecatedAPI from '../deprecatedAPI';
+import * as API from '../API';
 import CONST from '../../CONST';
 import Growl from '../Growl';
 import * as Localize from '../Localize';
@@ -213,7 +214,7 @@ function clearDebitCardFormErrorAndSubmit() {
  * @param {*} paymentMethod.methodID
  * @param {String} paymentMethod.accountType
  */
-function transferWalletBalance(paymentMethod) {
+function transferBalance(transferAmount, paymentMethod) {
     const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
         ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT
         : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD;
@@ -234,6 +235,30 @@ function transferWalletBalance(paymentMethod) {
             Growl.error(Localize.translateLocal('transferAmountPage.failedTransfer'));
             Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: false});
         });
+
+        API.write('TransferBalance', parameters, {
+            optimisticData: [
+                {
+                    onyxMethod: 'merge',
+                    key: ONYXKEYS.WALLET_TRANSFER,
+                    value: {transferAmount, loading: true, error: null},
+                },
+            ],
+            successData: [
+                {
+                    onyxMethod: 'merge',
+                    key: ONYXKEYS.WALLET_TRANSFER,
+                    value: {loading: false},
+                },
+           ],
+            failureData: [
+                {
+                    onyxMethod: 'merge',
+                    key: ONYXKEYS.WALLET_TRANSFER,
+                    value: {loading: false},
+                },
+            ],
+        });
 }
 
 function resetWalletTransferData() {
@@ -282,7 +307,7 @@ export {
     kycWallRef,
     continueSetup,
     clearDebitCardFormErrorAndSubmit,
-    transferWalletBalance,
+    transferBalance,
     resetWalletTransferData,
     saveWalletTransferAmount,
     saveWalletTransferAccountTypeAndID,
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 08ad9da9356e..bd434235d306 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -138,7 +138,7 @@ class TransferBalancePage extends React.Component {
      */
     saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
         PaymentMethods.saveWalletTransferAmount(transferAmount);
-        PaymentMethods.transferWalletBalance(selectedAccount);
+        PaymentMethods.transferBalance(transferAmount, selectedAccount);
     }
 
     /**

From 2f7b9cc4f24605e94a0752694b5c849325b609a6 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 28 Jun 2022 15:04:57 +0400
Subject: [PATCH 02/45] Remove unnecessary saveWalletTransferAmount method

---
 src/libs/actions/PaymentMethods.js                 | 8 --------
 src/pages/settings/Payments/TransferBalancePage.js | 1 -
 2 files changed, 9 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 7d951c4dc793..6af5bafe9b72 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -271,13 +271,6 @@ function resetWalletTransferData() {
     });
 }
 
-/**
- * @param {Number} transferAmount
- */
-function saveWalletTransferAmount(transferAmount) {
-    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {transferAmount});
-}
-
 /**
  * @param {String} selectedAccountType
  * @param {String} selectedAccountID
@@ -309,7 +302,6 @@ export {
     clearDebitCardFormErrorAndSubmit,
     transferBalance,
     resetWalletTransferData,
-    saveWalletTransferAmount,
     saveWalletTransferAccountTypeAndID,
     saveWalletTransferMethodType,
     dismissWalletConfirmModal,
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index bd434235d306..14d1aa06e21c 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -137,7 +137,6 @@ class TransferBalancePage extends React.Component {
      * @param {Object} selectedAccount
      */
     saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
-        PaymentMethods.saveWalletTransferAmount(transferAmount);
         PaymentMethods.transferBalance(transferAmount, selectedAccount);
     }
 

From aec686556fcc08ff09e09c0928bf76e33d87f2f2 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 28 Jun 2022 15:19:35 +0400
Subject: [PATCH 03/45] Remove usage of deprecated API command

---
 src/libs/actions/PaymentMethods.js | 60 ++++++++++++------------------
 1 file changed, 23 insertions(+), 37 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 6af5bafe9b72..110915b36f48 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -221,44 +221,30 @@ function transferBalance(transferAmount, paymentMethod) {
     const parameters = {
         [paymentMethodIDKey]: paymentMethod.methodID,
     };
-    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: true});
 
-    DeprecatedAPI.TransferWalletBalance(parameters)
-        .then((response) => {
-            if (response.jsonCode !== 200) {
-                throw new Error(response.message);
-            }
-            Onyx.merge(ONYXKEYS.USER_WALLET, {currentBalance: 0});
-            Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: true, loading: false});
-            Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
-        }).catch(() => {
-            Growl.error(Localize.translateLocal('transferAmountPage.failedTransfer'));
-            Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: false});
-        });
-
-        API.write('TransferBalance', parameters, {
-            optimisticData: [
-                {
-                    onyxMethod: 'merge',
-                    key: ONYXKEYS.WALLET_TRANSFER,
-                    value: {transferAmount, loading: true, error: null},
-                },
-            ],
-            successData: [
-                {
-                    onyxMethod: 'merge',
-                    key: ONYXKEYS.WALLET_TRANSFER,
-                    value: {loading: false},
-                },
-           ],
-            failureData: [
-                {
-                    onyxMethod: 'merge',
-                    key: ONYXKEYS.WALLET_TRANSFER,
-                    value: {loading: false},
-                },
-            ],
-        });
+    API.write('TransferBalance', parameters, {
+        optimisticData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_TRANSFER,
+                value: {transferAmount, loading: true, error: null},
+            },
+        ],
+        successData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_TRANSFER,
+                value: {loading: false},
+            },
+        ],
+        failureData: [
+            {
+                onyxMethod: 'merge',
+                key: ONYXKEYS.WALLET_TRANSFER,
+                value: {loading: false},
+            },
+        ],
+    });
 }
 
 function resetWalletTransferData() {

From a4f35dd92c8e62b82f709f4ffad18d0f4a6a8e5f Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 28 Jun 2022 15:29:14 +0400
Subject: [PATCH 04/45] Fix JSDoc and remove unused import

---
 src/libs/actions/PaymentMethods.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 110915b36f48..4bb4a45cf4be 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -10,7 +10,6 @@ import Growl from '../Growl';
 import * as Localize from '../Localize';
 import Navigation from '../Navigation/Navigation';
 import * as CardUtils from '../CardUtils';
-import ROUTES from '../../ROUTES';
 import NameValuePair from './NameValuePair';
 import * as store from './ReimbursementAccount/store';
 
@@ -210,6 +209,7 @@ function clearDebitCardFormErrorAndSubmit() {
 
 /**
  * Call the API to transfer wallet balance.
+ * @param {Number} transferAmount
  * @param {Object} paymentMethod
  * @param {*} paymentMethod.methodID
  * @param {String} paymentMethod.accountType

From 6f4c9bb2f0fd1ed8d711304a54fd771eb1e61569 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 10:49:03 +0400
Subject: [PATCH 05/45] Add successful balance transfer page

---
 .../Payments/SuccessfulBalanceTransferPage.js | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/pages/settings/Payments/SuccessfulBalanceTransferPage.js

diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
new file mode 100644
index 000000000000..59fd8f0fd6ef
--- /dev/null
+++ b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import {
+    View,
+} from 'react-native';
+import CONST from '../../CONST';
+import Text from '../../components/Text';
+import TextLink from '../../components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import styles from '../../styles/styles';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const SuccessfulBalanceTransferPage = props => (
+    <View style={[styles.flex1]}>
+        <View style={[styles.ph5]}>
+            <Text style={styles.mb3}>
+                Your wallet balance has been successfully transferred! Please reach out to
+                <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                    {CONST.EMAIL.CONCIERGE}
+                </TextLink>
+                if you have any questions.
+            </Text>
+            <Button
+                text={props.translate('paymentsPage.allSet')}
+                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                style={[styles.mt4]}
+                iconStyles={[styles.mr5]}
+                extraLarge
+                success
+            />
+        </View>
+    </View>
+);
+
+SuccessfulBalanceTransferPage.propTypes = propTypes;
+SuccessfulBalanceTransferPage.displayName = 'SuccessfulBalanceTransferPage';
+
+export default withLocalize(SuccessfulBalanceTransferPage);

From 3e5fee2b2173e64187ede31da6cf74c29800dc48 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:22:34 +0400
Subject: [PATCH 06/45] Fixes for successful transfer balance page

---
 .../Payments/SuccessfulBalanceTransferPage.js | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
index 59fd8f0fd6ef..f710238ade72 100644
--- a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
+++ b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
@@ -2,11 +2,13 @@ import React from 'react';
 import {
     View,
 } from 'react-native';
-import CONST from '../../CONST';
-import Text from '../../components/Text';
-import TextLink from '../../components/TextLink';
-import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
-import styles from '../../styles/styles';
+import Button from '../../../components/Button';
+import CONST from '../../../CONST';
+import Text from '../../../components/Text';
+import TextLink from '../../../components/TextLink';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import styles from '../../../styles/styles';
+import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -16,18 +18,17 @@ const SuccessfulBalanceTransferPage = props => (
     <View style={[styles.flex1]}>
         <View style={[styles.ph5]}>
             <Text style={styles.mb3}>
-                Your wallet balance has been successfully transferred! Please reach out to
+                {"Your wallet balance has been successfully transferred! Please reach out to "}
                 <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
                     {CONST.EMAIL.CONCIERGE}
-                </TextLink>
-                if you have any questions.
+                </TextLink> 
+                {" if you have any questions."}
             </Text>
             <Button
                 text={props.translate('paymentsPage.allSet')}
-                onPress={() => Navigation.navigate(ROUTES.SETTINGS_PAYMENTS)}
+                onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
                 style={[styles.mt4]}
                 iconStyles={[styles.mr5]}
-                extraLarge
                 success
             />
         </View>

From 60eed1ca1f82c1d07576a54d4001208a32354e0f Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:23:05 +0400
Subject: [PATCH 07/45] Show transfer success page

---
 src/pages/settings/Payments/TransferBalancePage.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 14d1aa06e21c..a64a265c54d3 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -24,6 +24,7 @@ import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
+import SuccessfulBalanceTransferPage from './SuccessfulBalanceTransferPage';
 
 const propTypes = {
     /** User's wallet information */
@@ -168,6 +169,18 @@ class TransferBalancePage extends React.Component {
     }
 
     render() {
+        if (this.props.walletTransfer.shouldShowTransferSuccess) {
+            return (
+                <ScreenWrapper>
+                    <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
+                        <HeaderWithCloseButton
+                            title="Success"
+                        />
+                        <SuccessfulBalanceTransferPage />
+                    </KeyboardAvoidingView>
+                </ScreenWrapper>
+            );
+        }
         const selectedAccount = this.getSelectedPaymentMethodAccount();
         const selectedPaymentType = selectedAccount && selectedAccount.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
             ? CONST.WALLET.TRANSFER_METHOD_TYPE.ACH

From ae22a8b6ace83859ad840cdba91dd9a67ae79d30 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:24:19 +0400
Subject: [PATCH 08/45] Add showShouldTransferSuccess Onyx prop

---
 src/libs/actions/PaymentMethods.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 4bb4a45cf4be..43828f700890 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -227,21 +227,31 @@ function transferBalance(transferAmount, paymentMethod) {
             {
                 onyxMethod: 'merge',
                 key: ONYXKEYS.WALLET_TRANSFER,
-                value: {transferAmount, loading: true, error: null},
+                value: {
+                    transferAmount,
+                    loading: true,
+                    error: null,
+                },
             },
         ],
         successData: [
             {
                 onyxMethod: 'merge',
                 key: ONYXKEYS.WALLET_TRANSFER,
-                value: {loading: false},
+                value: {
+                    loading: false,
+                    shouldShowTransferSuccess: true,
+                },
             },
         ],
         failureData: [
             {
                 onyxMethod: 'merge',
                 key: ONYXKEYS.WALLET_TRANSFER,
-                value: {loading: false},
+                value: {
+                    loading: false,
+                    shouldShowTransferSuccess: false,
+                },
             },
         ],
     });
@@ -277,6 +287,11 @@ function dismissWalletConfirmModal() {
     Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: false});
 }
 
+function dismissSuccessfulTransferBalancePage() {
+    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowTransferSuccess: false});
+    Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
+}
+
 export {
     deleteDebitCard,
     deletePayPalMe,
@@ -286,6 +301,7 @@ export {
     kycWallRef,
     continueSetup,
     clearDebitCardFormErrorAndSubmit,
+    dismissSuccessfulTransferBalancePage,
     transferBalance,
     resetWalletTransferData,
     saveWalletTransferAccountTypeAndID,

From eaed050f70b49b54354bc42bea4fdfc69c900dbf Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:37:43 +0400
Subject: [PATCH 09/45] Import routes

---
 src/libs/actions/PaymentMethods.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 43828f700890..e68360730573 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -12,6 +12,7 @@ import Navigation from '../Navigation/Navigation';
 import * as CardUtils from '../CardUtils';
 import NameValuePair from './NameValuePair';
 import * as store from './ReimbursementAccount/store';
+import ROUTES from '../../ROUTES';
 
 /**
  * Deletes a debit card

From 8ede4a98f816d026dfcf18ed63d5c1f48b660e56 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:46:23 +0400
Subject: [PATCH 10/45] Add close button

---
 src/pages/settings/Payments/TransferBalancePage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index a64a265c54d3..c893e3bd09fc 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -175,6 +175,7 @@ class TransferBalancePage extends React.Component {
                     <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
                         <HeaderWithCloseButton
                             title="Success"
+                            onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                         />
                         <SuccessfulBalanceTransferPage />
                     </KeyboardAvoidingView>

From 93fe91050486e4dc6ac876ebde59c3b68e1fa329 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:46:52 +0400
Subject: [PATCH 11/45] Allow success and failure data to be set for refactored
 commands

---
 src/libs/Middleware/SaveResponseInOnyx.js | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/libs/Middleware/SaveResponseInOnyx.js b/src/libs/Middleware/SaveResponseInOnyx.js
index cf8444c771dd..54339c015509 100644
--- a/src/libs/Middleware/SaveResponseInOnyx.js
+++ b/src/libs/Middleware/SaveResponseInOnyx.js
@@ -10,20 +10,18 @@ function SaveResponseInOnyx(response, request) {
     return response
         .then((responseData) => {
             // We'll only save the onyxData, successData and failureData for the refactored commands
-            if (_.has(responseData, 'onyxData')) {
-                const data = [];
-                if (responseData.jsonCode === 200) {
-                    if (request.successData) {
-                        data.push(...request.successData);
-                    }
-                } else if (request.failureData) {
-                    data.push(...request.failureData);
+            const data = [];
+            if (responseData.jsonCode == 200) {
+                if (request.successData) {
+                    data.push(...request.successData);
                 }
-                if (responseData.onyxData) {
-                    data.push(...responseData.onyxData);
-                }
-                Onyx.update(data);
+            } else if (request.failureData) {
+                data.push(...request.failureData);
+            }
+            if (responseData.onyxData) {
+                data.push(...responseData.onyxData);
             }
+            Onyx.update(data);
             return responseData;
         });
 }

From bd830bd7acd679c43c08db0ce23fc56ee0578eb9 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 11:57:02 +0400
Subject: [PATCH 12/45] Style fixes

---
 src/libs/Middleware/SaveResponseInOnyx.js                   | 3 +--
 .../settings/Payments/SuccessfulBalanceTransferPage.js      | 6 +++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/libs/Middleware/SaveResponseInOnyx.js b/src/libs/Middleware/SaveResponseInOnyx.js
index 54339c015509..9135b39a69e2 100644
--- a/src/libs/Middleware/SaveResponseInOnyx.js
+++ b/src/libs/Middleware/SaveResponseInOnyx.js
@@ -1,5 +1,4 @@
 import Onyx from 'react-native-onyx';
-import _ from 'underscore';
 
 /**
  * @param {Promise} response
@@ -11,7 +10,7 @@ function SaveResponseInOnyx(response, request) {
         .then((responseData) => {
             // We'll only save the onyxData, successData and failureData for the refactored commands
             const data = [];
-            if (responseData.jsonCode == 200) {
+            if (responseData.jsonCode === 200) {
                 if (request.successData) {
                     data.push(...request.successData);
                 }
diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
index f710238ade72..2551d8f86050 100644
--- a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
+++ b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
@@ -18,11 +18,11 @@ const SuccessfulBalanceTransferPage = props => (
     <View style={[styles.flex1]}>
         <View style={[styles.ph5]}>
             <Text style={styles.mb3}>
-                {"Your wallet balance has been successfully transferred! Please reach out to "}
+                {'Your wallet balance has been successfully transferred! Please reach out to '}
                 <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
                     {CONST.EMAIL.CONCIERGE}
-                </TextLink> 
-                {" if you have any questions."}
+                </TextLink>
+                {' if you have any questions.'}
             </Text>
             <Button
                 text={props.translate('paymentsPage.allSet')}

From fea3749e5ca4bd61c584aaf7bb960dd4abca5340 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 12:46:25 +0400
Subject: [PATCH 13/45] Rename api command

---
 src/libs/actions/PaymentMethods.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index e68360730573..e373bf2a517c 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -223,7 +223,7 @@ function transferBalance(transferAmount, paymentMethod) {
         [paymentMethodIDKey]: paymentMethod.methodID,
     };
 
-    API.write('TransferBalance', parameters, {
+    API.write('TransferWalletBalance', parameters, {
         optimisticData: [
             {
                 onyxMethod: 'merge',

From 79e80d973e2cbe1eef06e3fa04333acb1f1fcdf1 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 13:14:11 +0400
Subject: [PATCH 14/45] Update success transfer message

---
 src/libs/actions/PaymentMethods.js            |  2 +-
 .../Payments/SuccessfulBalanceTransferPage.js | 22 +++++++++++++------
 .../settings/Payments/TransferBalancePage.js  |  4 +++-
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index e373bf2a517c..1ab3cbfd5b44 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -264,7 +264,7 @@ function resetWalletTransferData() {
         selectedAccountID: null,
         filterPaymentMethodType: null,
         loading: false,
-        shouldShowConfirmModal: false,
+        shouldShowTransferSuccess: false,
     });
 }
 
diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
index 2551d8f86050..6dcd1a1f3904 100644
--- a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
+++ b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
@@ -3,26 +3,33 @@ import {
     View,
 } from 'react-native';
 import Button from '../../../components/Button';
-import CONST from '../../../CONST';
 import Text from '../../../components/Text';
-import TextLink from '../../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
 import styles from '../../../styles/styles';
 import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
+import walletTransferPropTypes from './walletTransferPropTypes';
 
 const propTypes = {
     ...withLocalizePropTypes,
+
+    /** Wallet balance transfer props */
+    walletTransfer: walletTransferPropTypes,
+};
+
+const defaultProps = {
+    walletTransfer: {},
 };
 
 const SuccessfulBalanceTransferPage = props => (
     <View style={[styles.flex1]}>
         <View style={[styles.ph5]}>
             <Text style={styles.mb3}>
-                {'Your wallet balance has been successfully transferred! Please reach out to '}
-                <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
-                    {CONST.EMAIL.CONCIERGE}
-                </TextLink>
-                {' if you have any questions.'}
+                {props.translate('paymentsPage.transferConfirmText', {
+                    amount: props.numberFormat(
+                        props.walletTransfer.transferAmount / 100,
+                        {style: 'currency', currency: 'USD'},
+                    ),
+                })}
             </Text>
             <Button
                 text={props.translate('paymentsPage.allSet')}
@@ -36,6 +43,7 @@ const SuccessfulBalanceTransferPage = props => (
 );
 
 SuccessfulBalanceTransferPage.propTypes = propTypes;
+SuccessfulBalanceTransferPage.defaultProps = defaultProps;
 SuccessfulBalanceTransferPage.displayName = 'SuccessfulBalanceTransferPage';
 
 export default withLocalize(SuccessfulBalanceTransferPage);
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index c893e3bd09fc..1465c8c06dd8 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -177,7 +177,9 @@ class TransferBalancePage extends React.Component {
                             title="Success"
                             onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                         />
-                        <SuccessfulBalanceTransferPage />
+                        <SuccessfulBalanceTransferPage 
+                            walletTransfer={this.props.walletTransfer}
+                        />
                     </KeyboardAvoidingView>
                 </ScreenWrapper>
             );

From de4847c94b438b49794daa697d79e193c9155f1c Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 13:17:15 +0400
Subject: [PATCH 15/45] Update success message

---
 src/pages/settings/Payments/SuccessfulBalanceTransferPage.js | 2 +-
 src/pages/settings/Payments/TransferBalancePage.js           | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
index 6dcd1a1f3904..894c1e7c63c6 100644
--- a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
+++ b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
@@ -32,7 +32,7 @@ const SuccessfulBalanceTransferPage = props => (
                 })}
             </Text>
             <Button
-                text={props.translate('paymentsPage.allSet')}
+                text={props.translate('paymentsPage.gotIt')}
                 onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
                 style={[styles.mt4]}
                 iconStyles={[styles.mr5]}
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 1465c8c06dd8..5301bc6854af 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -174,10 +174,10 @@ class TransferBalancePage extends React.Component {
                 <ScreenWrapper>
                     <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
                         <HeaderWithCloseButton
-                            title="Success"
+                            title={this.props.translate('paymentsPage.allSet')}
                             onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                         />
-                        <SuccessfulBalanceTransferPage 
+                        <SuccessfulBalanceTransferPage
                             walletTransfer={this.props.walletTransfer}
                         />
                     </KeyboardAvoidingView>

From 217c07164442dcdb34e2cb0d45e3a085a12e45a5 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 30 Jun 2022 13:17:36 +0400
Subject: [PATCH 16/45] Remove unused confirm modal

---
 .../Payments/PaymentsPage/BasePaymentsPage.js      | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index e0b6b61d4668..a0e69d1effcc 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -27,7 +27,6 @@ import ConfirmPopover from '../../../../components/ConfirmPopover';
 import AddPaymentMethodMenu from '../../../../components/AddPaymentMethodMenu';
 import CONST from '../../../../CONST';
 import * as Expensicons from '../../../../components/Icon/Expensicons';
-import ConfirmModal from '../../../../components/ConfirmModal';
 import KYCWall from '../../../../components/KYCWall';
 import {propTypes, defaultProps} from './paymentsPagePropTypes';
 import {withNetwork} from '../../../../components/OnyxProvider';
@@ -420,19 +419,6 @@ class BasePaymentsPage extends React.Component {
                         shouldShowCancelButton
                         danger
                     />
-                    <ConfirmModal
-                        title={this.props.translate('paymentsPage.allSet')}
-                        onConfirm={PaymentMethods.dismissWalletConfirmModal}
-                        isVisible={this.props.walletTransfer.shouldShowConfirmModal}
-                        prompt={this.props.translate('paymentsPage.transferConfirmText', {
-                            amount: this.props.numberFormat(
-                                this.props.walletTransfer.transferAmount / 100,
-                                {style: 'currency', currency: 'USD'},
-                            ),
-                        })}
-                        confirmText={this.props.translate('paymentsPage.gotIt')}
-                        shouldShowCancelButton={false}
-                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

From c70a5ea53c32108156ccf7bf5f64c1b0151e8698 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 1 Jul 2022 17:14:11 +0400
Subject: [PATCH 17/45] Delete successful transfer balance page

---
 .../Payments/SuccessfulBalanceTransferPage.js | 49 -------------------
 .../settings/Payments/TransferBalancePage.js  | 26 ++++++++--
 2 files changed, 22 insertions(+), 53 deletions(-)
 delete mode 100644 src/pages/settings/Payments/SuccessfulBalanceTransferPage.js

diff --git a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js b/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
deleted file mode 100644
index 894c1e7c63c6..000000000000
--- a/src/pages/settings/Payments/SuccessfulBalanceTransferPage.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react';
-import {
-    View,
-} from 'react-native';
-import Button from '../../../components/Button';
-import Text from '../../../components/Text';
-import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
-import styles from '../../../styles/styles';
-import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
-import walletTransferPropTypes from './walletTransferPropTypes';
-
-const propTypes = {
-    ...withLocalizePropTypes,
-
-    /** Wallet balance transfer props */
-    walletTransfer: walletTransferPropTypes,
-};
-
-const defaultProps = {
-    walletTransfer: {},
-};
-
-const SuccessfulBalanceTransferPage = props => (
-    <View style={[styles.flex1]}>
-        <View style={[styles.ph5]}>
-            <Text style={styles.mb3}>
-                {props.translate('paymentsPage.transferConfirmText', {
-                    amount: props.numberFormat(
-                        props.walletTransfer.transferAmount / 100,
-                        {style: 'currency', currency: 'USD'},
-                    ),
-                })}
-            </Text>
-            <Button
-                text={props.translate('paymentsPage.gotIt')}
-                onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
-                style={[styles.mt4]}
-                iconStyles={[styles.mr5]}
-                success
-            />
-        </View>
-    </View>
-);
-
-SuccessfulBalanceTransferPage.propTypes = propTypes;
-SuccessfulBalanceTransferPage.defaultProps = defaultProps;
-SuccessfulBalanceTransferPage.displayName = 'SuccessfulBalanceTransferPage';
-
-export default withLocalize(SuccessfulBalanceTransferPage);
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 5301bc6854af..683a2fedf6d5 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -24,7 +24,6 @@ import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
-import SuccessfulBalanceTransferPage from './SuccessfulBalanceTransferPage';
 
 const propTypes = {
     /** User's wallet information */
@@ -177,9 +176,28 @@ class TransferBalancePage extends React.Component {
                             title={this.props.translate('paymentsPage.allSet')}
                             onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                         />
-                        <SuccessfulBalanceTransferPage
-                            walletTransfer={this.props.walletTransfer}
-                        />
+                        <View style={[styles.flex1]}>
+                            <View style={[styles.ph5]}>
+                                <Text style={styles.mb3}>
+                                    {this.props.translate('paymentsPage.transferConfirmText', {
+                                        amount: this.props.numberFormat(
+                                            this.props.walletTransfer.transferAmount / 100,
+                                            { style: 'currency', currency: 'USD' },
+                                        ),
+                                    })}
+                                </Text>
+                            </View>
+                        </View>
+
+                <FixedFooter>
+                    <Button
+                        text={this.props.translate('paymentsPage.gotIt')}
+                        onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
+                        style={[styles.mt4]}
+                        iconStyles={[styles.mr5]}
+                        success
+                    />
+                </FixedFooter>
                     </KeyboardAvoidingView>
                 </ScreenWrapper>
             );

From a3aa6b1ff01d31e6e84316089e52873abfc9c3cf Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 1 Jul 2022 17:15:56 +0400
Subject: [PATCH 18/45] Style fixes

---
 .../settings/Payments/TransferBalancePage.js  | 21 +++++++++----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 683a2fedf6d5..00a6f49a6289 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -182,22 +182,21 @@ class TransferBalancePage extends React.Component {
                                     {this.props.translate('paymentsPage.transferConfirmText', {
                                         amount: this.props.numberFormat(
                                             this.props.walletTransfer.transferAmount / 100,
-                                            { style: 'currency', currency: 'USD' },
+                                            {style: 'currency', currency: 'USD'},
                                         ),
                                     })}
                                 </Text>
                             </View>
                         </View>
-
-                <FixedFooter>
-                    <Button
-                        text={this.props.translate('paymentsPage.gotIt')}
-                        onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
-                        style={[styles.mt4]}
-                        iconStyles={[styles.mr5]}
-                        success
-                    />
-                </FixedFooter>
+                        <FixedFooter>
+                            <Button
+                                text={this.props.translate('paymentsPage.gotIt')}
+                                onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
+                                style={[styles.mt4]}
+                                iconStyles={[styles.mr5]}
+                                success
+                            />
+                        </FixedFooter>
                     </KeyboardAvoidingView>
                 </ScreenWrapper>
             );

From 725900bfae41cf990def2810238582d9a8e892cf Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 7 Jul 2022 18:05:02 +0400
Subject: [PATCH 19/45] Rename method

---
 src/libs/actions/PaymentMethods.js                 | 4 ++--
 src/pages/settings/Payments/TransferBalancePage.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 1ab3cbfd5b44..e6270d8dc1c8 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -215,7 +215,7 @@ function clearDebitCardFormErrorAndSubmit() {
  * @param {*} paymentMethod.methodID
  * @param {String} paymentMethod.accountType
  */
-function transferBalance(transferAmount, paymentMethod) {
+function transferWalletBalance(transferAmount, paymentMethod) {
     const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
         ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT
         : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD;
@@ -303,7 +303,7 @@ export {
     continueSetup,
     clearDebitCardFormErrorAndSubmit,
     dismissSuccessfulTransferBalancePage,
-    transferBalance,
+    transferWalletBalance,
     resetWalletTransferData,
     saveWalletTransferAccountTypeAndID,
     saveWalletTransferMethodType,
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 00a6f49a6289..60cbef6dbfe7 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -137,7 +137,7 @@ class TransferBalancePage extends React.Component {
      * @param {Object} selectedAccount
      */
     saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
-        PaymentMethods.transferBalance(transferAmount, selectedAccount);
+        PaymentMethods.transferWalletBalance(transferAmount, selectedAccount);
     }
 
     /**

From 93bbb80879c31d51ef0f7638dc0ba89cccc21334 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 7 Jul 2022 18:22:03 +0400
Subject: [PATCH 20/45] Specify that we want the API to return onyxData

---
 src/libs/actions/PaymentMethods.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index e6270d8dc1c8..9d73b09169d2 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -221,6 +221,7 @@ function transferWalletBalance(transferAmount, paymentMethod) {
         : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD;
     const parameters = {
         [paymentMethodIDKey]: paymentMethod.methodID,
+        shouldReturnOnyxData: true,
     };
 
     API.write('TransferWalletBalance', parameters, {

From 114f2d5d60bff40c66d8c3c1c87fc8c77def0769 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 8 Jul 2022 21:09:02 +0400
Subject: [PATCH 21/45] Update transfer balance success screen

---
 .../settings/Payments/TransferBalancePage.js    | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 60cbef6dbfe7..60427c86d677 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -12,6 +12,9 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal
 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';
+import defaultTheme from '../../../styles/themes/default';
 import MenuItem from '../../../components/MenuItem';
 import CONST from '../../../CONST';
 import variables from '../../../styles/variables';
@@ -173,12 +176,18 @@ class TransferBalancePage extends React.Component {
                 <ScreenWrapper>
                     <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
                         <HeaderWithCloseButton
-                            title={this.props.translate('paymentsPage.allSet')}
+                            title={this.props.translate('common.transferBalance')}
                             onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
                         />
-                        <View style={[styles.flex1]}>
+                        <View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                            <Icon
+                                src={Illustrations.TadaYellow}
+                                height={100}
+                                width={100}
+                                fill={defaultTheme.iconSuccessFill}
+                            />
                             <View style={[styles.ph5]}>
-                                <Text style={styles.mb3}>
+                                <Text style={[styles.mt5, styles.mb3]}>
                                     {this.props.translate('paymentsPage.transferConfirmText', {
                                         amount: this.props.numberFormat(
                                             this.props.walletTransfer.transferAmount / 100,
@@ -190,7 +199,7 @@ class TransferBalancePage extends React.Component {
                         </View>
                         <FixedFooter>
                             <Button
-                                text={this.props.translate('paymentsPage.gotIt')}
+                                text={this.props.translate('common.done')}
                                 onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
                                 style={[styles.mt4]}
                                 iconStyles={[styles.mr5]}

From 81ec21e9a22a25104e2ce3127aaeb01ed0e9971b Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 8 Jul 2022 21:24:27 +0400
Subject: [PATCH 22/45] Update success text

---
 src/languages/en.js                                |  3 ++-
 src/languages/es.js                                |  3 ++-
 src/pages/settings/Payments/TransferBalancePage.js | 12 +++++-------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index ed8a58ef02f4..5ea43650319b 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -391,7 +391,6 @@ export default {
         deleteDebitCardSuccess: 'Debit Card successfully deleted',
         deletePayPalSuccess: 'PayPal.me successfully deleted',
         allSet: 'All Set!',
-        transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`,
         gotIt: 'Got it, Thanks!',
         error: {
             notOwnerOfBankAccount: 'There was an error setting this bank account as your default payment method.',
@@ -408,6 +407,8 @@ export default {
         achSummary: 'No fee',
         whichAccount: 'Which Account?',
         fee: 'Fee',
+        transferSuccess: 'Transfer Successful!',
+        transferDetail: 'Your money should arrive in the next 1-3 business days.',
         failedTransfer: 'Your balance isn’t fully settled. Please transfer to a bank account.',
     },
     chooseTransferAccountPage: {
diff --git a/src/languages/es.js b/src/languages/es.js
index b63908a51bf1..5a7de034d094 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -391,7 +391,6 @@ export default {
         deleteDebitCardSuccess: 'Tarjeta de débito eliminada correctamente',
         deletePayPalSuccess: 'PayPal.me eliminada correctamente',
         allSet: 'Todo listo!',
-        transferConfirmText: ({amount}) => `${amount} llegará a tu cuenta en breve!`,
         gotIt: 'Gracias!',
         error: {
             notOwnerOfBankAccount: 'Ha ocurrido un error al establecer esta cuenta bancaria como tu método de pago predeterminado.',
@@ -408,6 +407,8 @@ export default {
         achSummary: 'Sin cargo',
         whichAccount: '¿Que cuenta?',
         fee: 'Tarifa',
+        transferSuccess: '',
+        transferDetail: '',
         failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor transfiere los fondos a una cuenta bancaria.',
     },
     chooseTransferAccountPage: {
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 60427c86d677..6aa06aae4e62 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -187,13 +187,11 @@ class TransferBalancePage extends React.Component {
                                 fill={defaultTheme.iconSuccessFill}
                             />
                             <View style={[styles.ph5]}>
-                                <Text style={[styles.mt5, styles.mb3]}>
-                                    {this.props.translate('paymentsPage.transferConfirmText', {
-                                        amount: this.props.numberFormat(
-                                            this.props.walletTransfer.transferAmount / 100,
-                                            {style: 'currency', currency: 'USD'},
-                                        ),
-                                    })}
+                                <Text style={[styles.mt5, styles.h1, styles.textAlignCenter]}>
+                                    {this.props.translate('transferAmountPage.transferSuccess')}
+                                </Text>
+                                <Text style={[styles.mt3, styles.textAlignCenter]}>
+                                    {this.props.translate('transferAmountPage.transferDetail')}
                                 </Text>
                             </View>
                         </View>

From 247b557699303a3d371e8790c040cf9132793cf9 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 8 Jul 2022 21:27:04 +0400
Subject: [PATCH 23/45] Remove unused text and translations

---
 src/languages/en.js | 2 --
 src/languages/es.js | 2 --
 2 files changed, 4 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 5ea43650319b..34b0e09b2630 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -390,8 +390,6 @@ export default {
         deleteBankAccountSuccess: 'Bank account successfully deleted',
         deleteDebitCardSuccess: 'Debit Card successfully deleted',
         deletePayPalSuccess: 'PayPal.me successfully deleted',
-        allSet: 'All Set!',
-        gotIt: 'Got it, Thanks!',
         error: {
             notOwnerOfBankAccount: 'There was an error setting this bank account as your default payment method.',
             invalidBankAccount: 'This bank account is temporarily suspended.',
diff --git a/src/languages/es.js b/src/languages/es.js
index 5a7de034d094..5de0210f51d9 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -390,8 +390,6 @@ export default {
         deleteBankAccountSuccess: 'Cuenta bancaria eliminada correctamente',
         deleteDebitCardSuccess: 'Tarjeta de débito eliminada correctamente',
         deletePayPalSuccess: 'PayPal.me eliminada correctamente',
-        allSet: 'Todo listo!',
-        gotIt: 'Gracias!',
         error: {
             notOwnerOfBankAccount: 'Ha ocurrido un error al establecer esta cuenta bancaria como tu método de pago predeterminado.',
             invalidBankAccount: 'Esta cuenta bancaria está temporalmente suspendida.',

From bc8ad8069310eb0d7f17b256aadce0e208fca3de Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 8 Jul 2022 21:28:47 +0400
Subject: [PATCH 24/45] Fix capitalization

---
 src/languages/en.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 34b0e09b2630..ab55f16bedc8 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -405,7 +405,7 @@ export default {
         achSummary: 'No fee',
         whichAccount: 'Which Account?',
         fee: 'Fee',
-        transferSuccess: 'Transfer Successful!',
+        transferSuccess: 'Transfer successful!',
         transferDetail: 'Your money should arrive in the next 1-3 business days.',
         failedTransfer: 'Your balance isn’t fully settled. Please transfer to a bank account.',
     },

From 173255a839936565a10383a35ca482fdf96d1eef Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 8 Jul 2022 21:29:45 +0400
Subject: [PATCH 25/45] Add Spanish translations

---
 src/languages/es.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 5de0210f51d9..5b005e887871 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -405,8 +405,8 @@ export default {
         achSummary: 'Sin cargo',
         whichAccount: '¿Que cuenta?',
         fee: 'Tarifa',
-        transferSuccess: '',
-        transferDetail: '',
+        transferSuccess: '¡Transferencia exitosa!',
+        transferDetail: 'Tu dinero debería llegar en 1-3 días laborables.',
         failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor transfiere los fondos a una cuenta bancaria.',
     },
     chooseTransferAccountPage: {

From 3cb64a0a53135832658760c93bf52c88a2d7846a Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Mon, 11 Jul 2022 13:24:30 +0400
Subject: [PATCH 26/45] Add TadaBlue illustration

---
 .../product-illustrations/tada--blue.svg      | 54 +++++++++++++++++++
 src/components/Icon/Illustrations.js          |  2 +
 2 files changed, 56 insertions(+)
 create mode 100644 assets/images/product-illustrations/tada--blue.svg

diff --git a/assets/images/product-illustrations/tada--blue.svg b/assets/images/product-illustrations/tada--blue.svg
new file mode 100644
index 000000000000..5430863ca145
--- /dev/null
+++ b/assets/images/product-illustrations/tada--blue.svg
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 80 80" style="enable-background:new 0 0 80 80;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#0185FF;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#0B1B34;}
+	.st2{fill:#FFFFFF;}
+	.st3{fill:#0185FF;}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+</style>
+<path class="st0" d="M25.5,40.3c-0.4,0-0.8,0.4-0.8,0.8c0,0.4,0.4,0.8,0.8,0.8s0.8-0.4,0.8-0.8S26,40.3,25.5,40.3z M23.1,41.1
+	c0-1.3,1.1-2.4,2.4-2.4s2.4,1.1,2.4,2.4c0,1.3-1.1,2.4-2.4,2.4S23.1,42.4,23.1,41.1z"/>
+<path class="st1" d="M61.8,23c-0.4,0-0.8,0.4-0.8,0.8s0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8C62.6,23.3,62.2,23,61.8,23z M59.4,23.8
+	c0-1.3,1.1-2.4,2.4-2.4c1.3,0,2.4,1.1,2.4,2.4s-1.1,2.4-2.4,2.4C60.4,26.2,59.4,25.1,59.4,23.8z"/>
+<path class="st2" d="M52.8,62.6c0.5-0.7,0.4-1.7-0.3-2.2s-1.7-0.4-2.2,0.3s-0.4,1.7,0.3,2.2C51.3,63.4,52.3,63.3,52.8,62.6z"/>
+<path class="st0" d="M50.9,61.1c-0.3,0.4-0.2,0.9,0.1,1.1c0.4,0.3,0.9,0.2,1.1-0.1c0.3-0.4,0.2-0.9-0.1-1.1
+	C51.7,60.7,51.2,60.8,50.9,61.1z M50.1,63.5c-1.1-0.8-1.2-2.3-0.4-3.4c0.8-1.1,2.3-1.2,3.4-0.4c1.1,0.8,1.2,2.3,0.4,3.4
+	C52.6,64.1,51.1,64.3,50.1,63.5z"/>
+<path class="st3" d="M21.4,32.2c0.7,0,1.2-0.5,1.2-1.2s-0.5-1.2-1.2-1.2s-1.2,0.5-1.2,1.2C20.2,31.6,20.7,32.2,21.4,32.2z"/>
+<path class="st3" d="M40.2,54.4c1,0,1.8-0.8,1.8-1.8s-0.8-1.8-1.8-1.8s-1.8,0.8-1.8,1.8S39.2,54.4,40.2,54.4z"/>
+<path class="st3" d="M50.3,23.6c1,0,1.8-0.8,1.8-1.8S51.3,20,50.3,20s-1.8,0.8-1.8,1.8C48.5,22.8,49.3,23.6,50.3,23.6z"/>
+<path class="st3" d="M68.8,44.5c0.5,0,0.9-0.4,0.9-0.9s-0.4-0.9-0.9-0.9s-0.9,0.4-0.9,0.9S68.3,44.5,68.8,44.5z"/>
+<path class="st3" d="M57.3,34.2c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C55.3,33.3,56.2,34.2,57.3,34.2z"/>
+<path class="st2" d="M57.3,31c0.6,0,1.2,0.6,1.2,1.2s-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2C56.1,31.6,56.6,31,57.3,31z M57.3,29.4
+	c-1.5,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8C60.1,30.7,58.8,29.4,57.3,29.4z"/>
+<path class="st3" d="M60.6,15c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S59.5,15,60.6,15z"/>
+<path class="st2" d="M60.6,11.8c0.6,0,1.2,0.6,1.2,1.2s-0.6,1.2-1.2,1.2c-0.6,0-1.2-0.6-1.2-1.2S59.9,11.8,60.6,11.8z M60.6,10.2
+	c-1.5,0-2.8,1.3-2.8,2.8s1.3,2.8,2.8,2.8s2.8-1.3,2.8-2.8S62.1,10.2,60.6,10.2z"/>
+<path class="st0" d="M44.9,34h-4.5v-1.6h4.5V34z"/>
+<path class="st0" d="M41.8,35.4V31h1.6v4.5L41.8,35.4L41.8,35.4z"/>
+<path class="st0" d="M70.6,33.2v-4.4h1.6v4.4H70.6z"/>
+<path class="st0" d="M69.3,30.2h4.4v1.6h-4.4V30.2z"/>
+<path class="st1" d="M35.7,42.6l2.7-0.2l-0.1-1.6l-3.5,0.3c-0.2,0-0.4,0.1-0.5,0.3C34,41.6,34,41.8,34,42l0.2,2.2L32,44.1
+	c-0.2,0-0.5,0.1-0.6,0.2c-0.2,0.2-0.2,0.4-0.2,0.6l0.2,2.2L29.2,47c-0.4,0-0.8,0.3-0.8,0.7l-0.2,3.8l1.6,0.1l0.2-3l2.3,0.1
+	c0.2,0,0.5-0.1,0.6-0.2c0.2-0.2,0.2-0.4,0.2-0.6l-0.2-2.2l2.2,0.1c0.2,0,0.5-0.1,0.6-0.2c0.2-0.2,0.2-0.4,0.2-0.6L35.7,42.6z"/>
+<path class="st1" d="M33.4,17.4l2-1.8l-1.1-1.2l-2.6,2.4c-0.2,0.1-0.2,0.4-0.3,0.6c0,0.2,0.1,0.4,0.2,0.6l1.6,1.6l-1.8,1.3
+	c-0.2,0.1-0.3,0.4-0.3,0.6s0.1,0.5,0.2,0.6l1.6,1.6L31.1,25c-0.4,0.3-0.4,0.8-0.2,1.1l2.2,3l1.3-0.9l-1.7-2.4l1.9-1.4
+	c0.2-0.1,0.3-0.4,0.3-0.6s-0.1-0.5-0.2-0.6l-1.6-1.6l1.8-1.3c0.2-0.1,0.3-0.4,0.3-0.6s-0.1-0.5-0.2-0.6L33.4,17.4z"/>
+<path class="st1" d="M53.9,45.4c0.2,0,0.4,0.1,0.6,0.3l1.3,1.7l1.5-1.6l1.2,1.1l-2.2,2.3c-0.2,0.2-0.4,0.3-0.6,0.3
+	c-0.2,0-0.5-0.1-0.6-0.3l-1.4-1.7L52.3,49c-0.2,0.2-0.4,0.3-0.6,0.2c-0.2,0-0.4-0.1-0.6-0.3l-2-2.5l1.2-1l1.4,1.8l1.5-1.6
+	C53.4,45.5,53.7,45.4,53.9,45.4z"/>
+<path class="st3" d="M44.9,12.6c-0.1,0-0.2,0-0.3-0.1c-0.3-0.2-0.5-0.4-0.5-0.7V6.6c0-0.5,0.3-0.8,0.8-0.8H50c0.3,0,0.6,0.2,0.7,0.5
+	c0.2,0.3,0.1,0.6-0.2,0.9l-5.1,5.1C45.3,12.5,45.1,12.6,44.9,12.6z"/>
+<path class="st2" d="M50,6.6l-5.1,5.1V6.6H50z M50,5h-5.1c-0.9,0-1.6,0.7-1.6,1.6v5.1c0,0.6,0.4,1.2,1,1.4c0.2,0.1,0.4,0.2,0.6,0.2
+	c0.4,0,0.8-0.2,1.1-0.5l5.1-5.1c0.5-0.5,0.6-1.1,0.3-1.8C51.3,5.4,50.6,5,50,5z"/>
+<path class="st3" d="M63.9,59.9v-5.2h5.2L63.9,59.9z"/>
+<path class="st3" d="M42.5,59.4L20.4,37.3l-8.6,20.4L22,67.8L42.5,59.4z"/>
+<path class="st4" d="M20.1,35.9l23.8,23.8l-22.1,9.1L10.9,57.9L20.1,35.9z M20.7,38.7l-7.9,18.8l9.4,9.4l18.9-7.8L20.7,38.7z"/>
+<path class="st3" d="M6.9,72.8c0.6,0.6,1.5,0.7,2.3,0.4L22,67.9L11.8,57.7L6.5,70.5C6.2,71.3,6.2,72.2,6.9,72.8z"/>
+<path class="st4" d="M11.7,56.9c0.3-0.1,0.5,0,0.7,0.2l10.2,10.2c0.2,0.2,0.3,0.5,0.2,0.7c-0.1,0.3-0.2,0.5-0.5,0.6L9.5,73.9
+	c-1.1,0.4-2.4,0.2-3.2-0.6c-0.9-0.9-1-2.2-0.6-3.2l0,0l5.4-12.8C11.2,57.1,11.4,56.9,11.7,56.9z M12.1,59.1L7.2,70.8
+	c-0.2,0.6-0.1,1.1,0.2,1.5c0.3,0.3,0.9,0.4,1.5,0.2l11.7-4.8L12.1,59.1z"/>
+</svg>
diff --git a/src/components/Icon/Illustrations.js b/src/components/Icon/Illustrations.js
index 9da4bcae764f..f7466159a964 100644
--- a/src/components/Icon/Illustrations.js
+++ b/src/components/Icon/Illustrations.js
@@ -14,6 +14,7 @@ import MoneyMousePink from '../../../assets/images/product-illustrations/money-m
 import ReceiptYellow from '../../../assets/images/product-illustrations/receipt--yellow.svg';
 import RocketOrange from '../../../assets/images/product-illustrations/rocket--orange.svg';
 import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
+import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
 import GpsTrackOrange from '../../../assets/images/product-illustrations/gps-track--orange.svg';
 
 export {
@@ -33,5 +34,6 @@ export {
     ReceiptYellow,
     RocketOrange,
     TadaYellow,
+    TadaBlue,
     GpsTrackOrange,
 };

From 88f1a41abe9ed74a387188edb8d628e82ce2fd14 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Mon, 11 Jul 2022 13:33:33 +0400
Subject: [PATCH 27/45] Use blue tada icon

---
 src/pages/settings/Payments/TransferBalancePage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 6aa06aae4e62..9f9fba2a8e51 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -181,7 +181,7 @@ class TransferBalancePage extends React.Component {
                         />
                         <View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
                             <Icon
-                                src={Illustrations.TadaYellow}
+                                src={Illustrations.TadaBlue}
                                 height={100}
                                 width={100}
                                 fill={defaultTheme.iconSuccessFill}

From 6cd7456f090ea90e0a19998044709b7c5fd5c018 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 12 Jul 2022 15:03:04 +0400
Subject: [PATCH 28/45] Remove unused prop `transferAmount`

---
 src/pages/settings/Payments/TransferBalancePage.js     | 10 +---------
 src/pages/settings/Payments/walletTransferPropTypes.js |  3 ---
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 9f9fba2a8e51..fae4070336cd 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -135,14 +135,6 @@ class TransferBalancePage extends React.Component {
         return selectedAccount || defaultAccount;
     }
 
-    /**
-     * @param {Number} transferAmount
-     * @param {Object} selectedAccount
-     */
-    saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) {
-        PaymentMethods.transferWalletBalance(transferAmount, selectedAccount);
-    }
-
     /**
      * @param {String} filterPaymentMethodType
      */
@@ -297,7 +289,7 @@ class TransferBalancePage extends React.Component {
                             pressOnEnter
                             isLoading={this.props.walletTransfer.loading}
                             isDisabled={isButtonDisabled}
-                            onPress={() => this.saveTransferAmountAndStartTransfer(transferAmount, selectedAccount)}
+                            onPress={() => PaymentMethods.transferWalletBalance(transferAmount, selectedAccount)}
                             text={this.props.translate(
                                 'transferAmountPage.transfer',
                                 {
diff --git a/src/pages/settings/Payments/walletTransferPropTypes.js b/src/pages/settings/Payments/walletTransferPropTypes.js
index 9d191d9211ba..82ba4b3a234e 100644
--- a/src/pages/settings/Payments/walletTransferPropTypes.js
+++ b/src/pages/settings/Payments/walletTransferPropTypes.js
@@ -6,9 +6,6 @@ const walletTransferPropTypes = PropTypes.shape({
     /** Selected accountID for transfer */
     selectedAccountID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
-    /** Amount being transferred */
-    transferAmount: PropTypes.number,
-
     /** Type to filter the payment Method list */
     filterPaymentMethodType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']),
 

From e794b9fa591895d8452bb613b2843149e4ce0f87 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 12 Jul 2022 15:10:51 +0400
Subject: [PATCH 29/45] Remove unused `shouldShowConfirmModal` and
 `dismissWalletConfirmModal`

---
 src/libs/actions/PaymentMethods.js                           | 5 -----
 .../settings/Payments/PaymentsPage/paymentsPagePropTypes.js  | 4 +---
 src/pages/settings/Payments/walletTransferPropTypes.js       | 3 ---
 3 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 9d73b09169d2..e09e05fb767f 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -285,10 +285,6 @@ function saveWalletTransferMethodType(filterPaymentMethodType) {
     Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {filterPaymentMethodType});
 }
 
-function dismissWalletConfirmModal() {
-    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: false});
-}
-
 function dismissSuccessfulTransferBalancePage() {
     Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowTransferSuccess: false});
     Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
@@ -308,6 +304,5 @@ export {
     resetWalletTransferData,
     saveWalletTransferAccountTypeAndID,
     saveWalletTransferMethodType,
-    dismissWalletConfirmModal,
     cleanLocalReimbursementData,
 };
diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
index 92158d06204c..172384d9c5fc 100644
--- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
+++ b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
@@ -32,9 +32,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    walletTransfer: {
-        shouldShowConfirmModal: false,
-    },
+    walletTransfer: {},
     betas: [],
     isLoadingPaymentMethods: true,
     shouldListenForResize: false,
diff --git a/src/pages/settings/Payments/walletTransferPropTypes.js b/src/pages/settings/Payments/walletTransferPropTypes.js
index 82ba4b3a234e..34cc7434be07 100644
--- a/src/pages/settings/Payments/walletTransferPropTypes.js
+++ b/src/pages/settings/Payments/walletTransferPropTypes.js
@@ -8,9 +8,6 @@ const walletTransferPropTypes = PropTypes.shape({
 
     /** Type to filter the payment Method list */
     filterPaymentMethodType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']),
-
-    /** Whether the confirmModal is shown to user. */
-    shouldShowConfirmModal: PropTypes.bool,
 });
 
 export default walletTransferPropTypes;

From 956cd08fe2aa2fd9421ce49a608777da22290551 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 12 Jul 2022 15:13:47 +0400
Subject: [PATCH 30/45] Rename to `shouldShowSuccess`

---
 src/libs/actions/PaymentMethods.js                        | 8 ++++----
 .../Payments/PaymentsPage/paymentsPagePropTypes.js        | 4 +++-
 src/pages/settings/Payments/TransferBalancePage.js        | 2 +-
 src/pages/settings/Payments/walletTransferPropTypes.js    | 3 +++
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index e09e05fb767f..bd9cddea1d0d 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -242,7 +242,7 @@ function transferWalletBalance(transferAmount, paymentMethod) {
                 key: ONYXKEYS.WALLET_TRANSFER,
                 value: {
                     loading: false,
-                    shouldShowTransferSuccess: true,
+                    shouldShowSuccess: true,
                 },
             },
         ],
@@ -252,7 +252,7 @@ function transferWalletBalance(transferAmount, paymentMethod) {
                 key: ONYXKEYS.WALLET_TRANSFER,
                 value: {
                     loading: false,
-                    shouldShowTransferSuccess: false,
+                    shouldShowSuccess: false,
                 },
             },
         ],
@@ -265,7 +265,7 @@ function resetWalletTransferData() {
         selectedAccountID: null,
         filterPaymentMethodType: null,
         loading: false,
-        shouldShowTransferSuccess: false,
+        shouldShowSuccess: false,
     });
 }
 
@@ -286,7 +286,7 @@ function saveWalletTransferMethodType(filterPaymentMethodType) {
 }
 
 function dismissSuccessfulTransferBalancePage() {
-    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowTransferSuccess: false});
+    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowSuccess: false});
     Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
 }
 
diff --git a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
index 172384d9c5fc..3ca8fbd19c3c 100644
--- a/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
+++ b/src/pages/settings/Payments/PaymentsPage/paymentsPagePropTypes.js
@@ -32,7 +32,9 @@ const propTypes = {
 };
 
 const defaultProps = {
-    walletTransfer: {},
+    walletTransfer: {
+        shouldShowSuccess: false,
+    },
     betas: [],
     isLoadingPaymentMethods: true,
     shouldListenForResize: false,
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index fae4070336cd..2a60f52dcb92 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -163,7 +163,7 @@ class TransferBalancePage extends React.Component {
     }
 
     render() {
-        if (this.props.walletTransfer.shouldShowTransferSuccess) {
+        if (this.props.walletTransfer.shouldShowSuccess && !this.props.walletTransfer.loading) {
             return (
                 <ScreenWrapper>
                     <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
diff --git a/src/pages/settings/Payments/walletTransferPropTypes.js b/src/pages/settings/Payments/walletTransferPropTypes.js
index 34cc7434be07..8a2ab06c9066 100644
--- a/src/pages/settings/Payments/walletTransferPropTypes.js
+++ b/src/pages/settings/Payments/walletTransferPropTypes.js
@@ -8,6 +8,9 @@ const walletTransferPropTypes = PropTypes.shape({
 
     /** Type to filter the payment Method list */
     filterPaymentMethodType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']),
+
+    /** Whether the success screen is shown to user. */
+    shouldShowSuccess: PropTypes.bool,
 });
 
 export default walletTransferPropTypes;

From 2ed73e04aea224f98432a83cf2c4d6467a69c4bc Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Wed, 13 Jul 2022 11:07:28 +0400
Subject: [PATCH 31/45] Remove unused `transferAmount` prop

---
 src/libs/actions/PaymentMethods.js                 | 4 +---
 src/pages/settings/Payments/TransferBalancePage.js | 2 +-
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index bd9cddea1d0d..96811dba753a 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -210,12 +210,11 @@ function clearDebitCardFormErrorAndSubmit() {
 
 /**
  * Call the API to transfer wallet balance.
- * @param {Number} transferAmount
  * @param {Object} paymentMethod
  * @param {*} paymentMethod.methodID
  * @param {String} paymentMethod.accountType
  */
-function transferWalletBalance(transferAmount, paymentMethod) {
+function transferWalletBalance(paymentMethod) {
     const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
         ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT
         : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD;
@@ -230,7 +229,6 @@ function transferWalletBalance(transferAmount, paymentMethod) {
                 onyxMethod: 'merge',
                 key: ONYXKEYS.WALLET_TRANSFER,
                 value: {
-                    transferAmount,
                     loading: true,
                     error: null,
                 },
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 2a60f52dcb92..19450b652b11 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -289,7 +289,7 @@ class TransferBalancePage extends React.Component {
                             pressOnEnter
                             isLoading={this.props.walletTransfer.loading}
                             isDisabled={isButtonDisabled}
-                            onPress={() => PaymentMethods.transferWalletBalance(transferAmount, selectedAccount)}
+                            onPress={() => PaymentMethods.transferWalletBalance(selectedAccount)}
                             text={this.props.translate(
                                 'transferAmountPage.transfer',
                                 {

From 76eb69383425912459f6bf9ec832638c3839b421 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 15 Jul 2022 13:28:45 +0400
Subject: [PATCH 32/45] Add copy for debit card transfer success

---
 src/languages/en.js | 3 ++-
 src/languages/es.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/languages/en.js b/src/languages/en.js
index 9ce10fd97559..1f00850002db 100755
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -403,7 +403,8 @@ export default {
         whichAccount: 'Which Account?',
         fee: 'Fee',
         transferSuccess: 'Transfer successful!',
-        transferDetail: 'Your money should arrive in the next 1-3 business days.',
+        transferDetailBankAccount: 'Your money should arrive in the next 1-3 business days.',
+        transferDetailDebitCard: 'Your money should arrive immediately.',
         failedTransfer: 'Your balance isn’t fully settled. Please transfer to a bank account.',
     },
     chooseTransferAccountPage: {
diff --git a/src/languages/es.js b/src/languages/es.js
index 7be52f7a70dd..52a9f53257a6 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -403,7 +403,8 @@ export default {
         whichAccount: '¿Que cuenta?',
         fee: 'Tarifa',
         transferSuccess: '¡Transferencia exitosa!',
-        transferDetail: 'Tu dinero debería llegar en 1-3 días laborables.',
+        transferDetailBankAccount: 'Tu dinero debería llegar en 1-3 días laborables.',
+        transferDetailDebitCard: '',
         failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor transfiere los fondos a una cuenta bancaria.',
     },
     chooseTransferAccountPage: {

From 6891d262061c5041467168d26c589a543da2b6db Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 15 Jul 2022 13:29:36 +0400
Subject: [PATCH 33/45] Show success message based on payment method type

---
 src/libs/actions/PaymentMethods.js                 | 1 +
 src/pages/settings/Payments/TransferBalancePage.js | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js
index 96811dba753a..3c63cb61b847 100644
--- a/src/libs/actions/PaymentMethods.js
+++ b/src/libs/actions/PaymentMethods.js
@@ -241,6 +241,7 @@ function transferWalletBalance(paymentMethod) {
                 value: {
                     loading: false,
                     shouldShowSuccess: true,
+                    paymentMethodType: paymentMethod.accountType,
                 },
             },
         ],
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 19450b652b11..cf22971f7902 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -183,7 +183,9 @@ class TransferBalancePage extends React.Component {
                                     {this.props.translate('transferAmountPage.transferSuccess')}
                                 </Text>
                                 <Text style={[styles.mt3, styles.textAlignCenter]}>
-                                    {this.props.translate('transferAmountPage.transferDetail')}
+                                    {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT 
+                                    ? this.props.translate('transferAmountPage.transferDetailBankAccount') 
+                                    : this.props.translate('transferAmountPage.transferDetailDebitCard')}
                                 </Text>
                             </View>
                         </View>

From 9da172dd941463f20375482d179e337e70cc660f Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Fri, 15 Jul 2022 13:30:20 +0400
Subject: [PATCH 34/45] Style fix

---
 src/pages/settings/Payments/TransferBalancePage.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index cf22971f7902..3bf2dae9668d 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -183,9 +183,9 @@ class TransferBalancePage extends React.Component {
                                     {this.props.translate('transferAmountPage.transferSuccess')}
                                 </Text>
                                 <Text style={[styles.mt3, styles.textAlignCenter]}>
-                                    {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT 
-                                    ? this.props.translate('transferAmountPage.transferDetailBankAccount') 
-                                    : this.props.translate('transferAmountPage.transferDetailDebitCard')}
+                                    {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
+                                        ? this.props.translate('transferAmountPage.transferDetailBankAccount')
+                                        : this.props.translate('transferAmountPage.transferDetailDebitCard')}
                                 </Text>
                             </View>
                         </View>

From 0e766f11df6130d1dfa07c02d3c7753a0f7941e0 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Mon, 18 Jul 2022 11:03:16 +0400
Subject: [PATCH 35/45] Add translation

---
 src/languages/es.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/languages/es.js b/src/languages/es.js
index 52a9f53257a6..701cd4cd47b6 100644
--- a/src/languages/es.js
+++ b/src/languages/es.js
@@ -404,7 +404,7 @@ export default {
         fee: 'Tarifa',
         transferSuccess: '¡Transferencia exitosa!',
         transferDetailBankAccount: 'Tu dinero debería llegar en 1-3 días laborables.',
-        transferDetailDebitCard: '',
+        transferDetailDebitCard: 'Tu dinero debería llegar de inmediato.',
         failedTransfer: 'Tu saldo no se ha acreditado completamente. Por favor transfiere los fondos a una cuenta bancaria.',
     },
     chooseTransferAccountPage: {

From d9001165441e7c1b04217fd54c69059c101ce62e Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Mon, 18 Jul 2022 11:54:06 +0400
Subject: [PATCH 36/45] Disable transfer balance if offline

---
 src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index d706b27d892e..63fed7edd95a 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -279,6 +279,7 @@ class BasePaymentsPage extends React.Component {
                                                 icon={Expensicons.Transfer}
                                                 onPress={triggerKYCFlow}
                                                 shouldShowRightIcon
+                                                disabled={this.props.network.isOffline}
                                             />
                                         )}
                                     </KYCWall>

From bdd1b5506198c1998b16ea526b4f7c0651537747 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Mon, 18 Jul 2022 12:03:09 +0400
Subject: [PATCH 37/45] Disable transfer button if offline

---
 .../settings/Payments/TransferBalancePage.js  | 37 +++++++++++--------
 1 file changed, 21 insertions(+), 16 deletions(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 3bf2dae9668d..608e770d9d34 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -27,6 +27,7 @@ import * as PaymentMethods from '../../../libs/actions/PaymentMethods';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
+import FormAlertWrapper from '../../../components/FormAlertWrapper';
 
 const propTypes = {
     /** User's wallet information */
@@ -286,23 +287,27 @@ class TransferBalancePage extends React.Component {
                         </View>
                     </ScrollView>
                     <FixedFooter style={[styles.flexGrow0]}>
-                        <Button
-                            success
-                            pressOnEnter
-                            isLoading={this.props.walletTransfer.loading}
-                            isDisabled={isButtonDisabled}
-                            onPress={() => PaymentMethods.transferWalletBalance(selectedAccount)}
-                            text={this.props.translate(
-                                'transferAmountPage.transfer',
-                                {
-                                    amount: isTransferable
-                                        ? this.props.numberFormat(
-                                            transferAmount / 100,
-                                            {style: 'currency', currency: 'USD'},
-                                        ) : '',
-                                },
+                        <FormAlertWrapper>
+                            {isOffline => (
+                                <Button
+                                    success
+                                    pressOnEnter
+                                    isLoading={this.props.walletTransfer.loading}
+                                    isDisabled={isButtonDisabled || isOffline}
+                                    onPress={() => PaymentMethods.transferWalletBalance(selectedAccount)}
+                                    text={this.props.translate(
+                                        'transferAmountPage.transfer',
+                                        {
+                                            amount: isTransferable
+                                                ? this.props.numberFormat(
+                                                    transferAmount / 100,
+                                                    {style: 'currency', currency: 'USD'},
+                                                ) : '',
+                                        },
+                                    )}
+                                />
                             )}
-                        />
+                        </FormAlertWrapper>
                     </FixedFooter>
                 </KeyboardAvoidingView>
             </ScreenWrapper>

From 193ed3fb796ae831222246be5de94757707847f6 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 19 Jul 2022 11:28:33 +0400
Subject: [PATCH 38/45] Add containerStyles prop to OfflineIndicator

---
 src/components/OfflineIndicator.js           | 11 ++++++++++-
 src/pages/home/report/ReportActionCompose.js |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index f06a16640c84..24f82b761afd 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import {View} from 'react-native';
+import PropTypes from 'prop-types';
 import {withNetwork} from './OnyxProvider';
 import networkPropTypes from './networkPropTypes';
 import Icon from './Icon';
@@ -14,9 +15,16 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...withLocalizePropTypes,
 };
 
+const defaultProps = {
+    containerStyles: [],
+};
+
 const OfflineIndicator = (props) => {
     if (!props.network.isOffline) {
         return null;
@@ -24,7 +32,7 @@ const OfflineIndicator = (props) => {
 
     return (
         <View style={[
-            styles.chatItemComposeSecondaryRowOffset,
+            ...props.containerStyles,
             styles.flexRow,
             styles.alignItemsCenter]}
         >
@@ -41,6 +49,7 @@ const OfflineIndicator = (props) => {
 };
 
 OfflineIndicator.propTypes = propTypes;
+OfflineIndicator.defaultProps = defaultProps;
 OfflineIndicator.displayName = 'OfflineIndicator';
 
 export default compose(
diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index ff9bf4fa80dd..a9bd5b022618 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component {
                     </View>
                 </View>
                 <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    <OfflineIndicator />
+                    <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>

From cc59b0a53de52131bf0cd7ca1f875dd0cba09bda Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Tue, 19 Jul 2022 11:41:54 +0400
Subject: [PATCH 39/45] Add OfflineIndicator to BasePaymentsPage and
 TransferBalancePage

---
 src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 ++
 src/pages/settings/Payments/TransferBalancePage.js           | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 826d53fd94ec..4165f1779491 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) {
@@ -435,6 +436,7 @@ class BasePaymentsPage extends React.Component {
                         shouldShowCancelButton
                         danger
                     />
+                    <OfflineIndicator containerStyles={[styles.pl5, styles.pv3]} />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );
diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index d24a7847eb73..40a4f43a365f 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -29,6 +29,7 @@ import cardPropTypes from '../../../components/cardPropTypes';
 import userWalletPropTypes from '../../EnablePayments/userWalletPropTypes';
 import ROUTES from '../../../ROUTES';
 import FormAlertWrapper from '../../../components/FormAlertWrapper';
+import OfflineIndicator from '../../../components/OfflineIndicator';
 
 const propTypes = {
     /** User's wallet information */
@@ -300,6 +301,7 @@ class TransferBalancePage extends React.Component {
                                 />
                             )}
                         </FormAlertWrapper>
+                        <OfflineIndicator containerStyles={[styles.pl1, styles.pv2]} />
                     </FixedFooter>
                 </KeyboardAvoidingView>
             </ScreenWrapper>

From 1796df02ea1f4a914219e0466cd04cc9f0297894 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Wed, 20 Jul 2022 15:25:41 +0400
Subject: [PATCH 40/45] Adjust icon and styles for OfflineIndicator

---
 src/components/OfflineIndicator.js                           | 4 ++--
 src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 24f82b761afd..a81455fac2d4 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -37,11 +37,11 @@ const OfflineIndicator = (props) => {
             styles.alignItemsCenter]}
         >
             <Icon
-                src={Expensicons.Offline}
+                src={Expensicons.OfflineCloud}
                 width={variables.iconSizeExtraSmall}
                 height={variables.iconSizeExtraSmall}
             />
-            <Text style={[styles.ml2, styles.chatItemComposeSecondaryRowSubText]}>
+            <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>
                 {props.translate('common.youAppearToBeOffline')}
             </Text>
         </View>
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 4165f1779491..28b8a3e8a520 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -436,7 +436,7 @@ class BasePaymentsPage extends React.Component {
                         shouldShowCancelButton
                         danger
                     />
-                    <OfflineIndicator containerStyles={[styles.pl5, styles.pv3]} />
+                    <OfflineIndicator containerStyles={[styles.ml5, styles.mv3]} />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

From 7909bbbe8aef4637f5c96276bfceafe99762b6a5 Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Wed, 20 Jul 2022 16:31:26 +0400
Subject: [PATCH 41/45] Fix styling of OfflineIndicator on TransferBalancePage

---
 src/pages/settings/Payments/TransferBalancePage.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js
index 40a4f43a365f..c5bec6cad405 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -301,8 +301,8 @@ class TransferBalancePage extends React.Component {
                                 />
                             )}
                         </FormAlertWrapper>
-                        <OfflineIndicator containerStyles={[styles.pl1, styles.pv2]} />
                     </FixedFooter>
+                    <OfflineIndicator containerStyles={[styles.ml5, styles.mb3]} />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );

From 706d90be35fd6364e7367e164209bbb6d53e8c7e Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 21 Jul 2022 11:49:44 +0400
Subject: [PATCH 42/45] Fix icon size for OfflineIndicator

---
 src/components/OfflineIndicator.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index a81455fac2d4..afda362b90e2 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -38,8 +38,8 @@ const OfflineIndicator = (props) => {
         >
             <Icon
                 src={Expensicons.OfflineCloud}
-                width={variables.iconSizeExtraSmall}
-                height={variables.iconSizeExtraSmall}
+                width={variables.iconSizeSmall}
+                height={variables.iconSizeSmall}
             />
             <Text style={[styles.ml3, styles.chatItemComposeSecondaryRowSubText]}>
                 {props.translate('common.youAppearToBeOffline')}

From d34fd5c9295fb3fbe9ffd4697602aa612e5b6bdb Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 21 Jul 2022 12:16:07 +0400
Subject: [PATCH 43/45] Fix errors from merge conflicts

---
 src/components/OfflineIndicator.js            |  2 +-
 .../Payments/PaymentsPage/BasePaymentsPage.js |  1 +
 .../settings/Payments/TransferBalancePage.js  | 60 +++++++++----------
 3 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index 5c19fc56c51f..b6a04ca8fbf0 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -37,7 +37,7 @@ const OfflineIndicator = (props) => {
     return (
         <View style={[
             ...props.containerStyles,
-            props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator,
+            props.containerStyles.length === 0 ? (props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator) : [],
             styles.flexRow,
             styles.alignItemsCenter]}
         >
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index 4835a67eefc0..d39c1d2b83ba 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -32,6 +32,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 c2c16a800dd8..a6694e785556 100644
--- a/src/pages/settings/Payments/TransferBalancePage.js
+++ b/src/pages/settings/Payments/TransferBalancePage.js
@@ -159,39 +159,37 @@ class TransferBalancePage extends React.Component {
         if (this.props.walletTransfer.shouldShowSuccess && !this.props.walletTransfer.loading) {
             return (
                 <ScreenWrapper>
-                    <KeyboardAvoidingView style={[styles.flex1]} behavior="height">
-                        <HeaderWithCloseButton
-                            title={this.props.translate('common.transferBalance')}
-                            onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
+                    <HeaderWithCloseButton
+                        title={this.props.translate('common.transferBalance')}
+                        onCloseButtonPress={PaymentMethods.dismissSuccessfulTransferBalancePage}
+                    />
+                    <View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
+                        <Icon
+                            src={Illustrations.TadaBlue}
+                            height={100}
+                            width={100}
+                            fill={defaultTheme.iconSuccessFill}
                         />
-                        <View style={[styles.pageWrapper, styles.flex1, styles.flexColumn, styles.alignItemsCenter, styles.justifyContentCenter]}>
-                            <Icon
-                                src={Illustrations.TadaBlue}
-                                height={100}
-                                width={100}
-                                fill={defaultTheme.iconSuccessFill}
-                            />
-                            <View style={[styles.ph5]}>
-                                <Text style={[styles.mt5, styles.h1, styles.textAlignCenter]}>
-                                    {this.props.translate('transferAmountPage.transferSuccess')}
-                                </Text>
-                                <Text style={[styles.mt3, styles.textAlignCenter]}>
-                                    {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
-                                        ? this.props.translate('transferAmountPage.transferDetailBankAccount')
-                                        : this.props.translate('transferAmountPage.transferDetailDebitCard')}
-                                </Text>
-                            </View>
+                        <View style={[styles.ph5]}>
+                            <Text style={[styles.mt5, styles.h1, styles.textAlignCenter]}>
+                                {this.props.translate('transferAmountPage.transferSuccess')}
+                            </Text>
+                            <Text style={[styles.mt3, styles.textAlignCenter]}>
+                                {this.props.walletTransfer.paymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT
+                                    ? this.props.translate('transferAmountPage.transferDetailBankAccount')
+                                    : this.props.translate('transferAmountPage.transferDetailDebitCard')}
+                            </Text>
                         </View>
-                        <FixedFooter>
-                            <Button
-                                text={this.props.translate('common.done')}
-                                onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
-                                style={[styles.mt4]}
-                                iconStyles={[styles.mr5]}
-                                success
-                            />
-                        </FixedFooter>
-                    </KeyboardAvoidingView>
+                    </View>
+                    <FixedFooter>
+                        <Button
+                            text={this.props.translate('common.done')}
+                            onPress={() => PaymentMethods.dismissSuccessfulTransferBalancePage()}
+                            style={[styles.mt4]}
+                            iconStyles={[styles.mr5]}
+                            success
+                        />
+                    </FixedFooter>
                 </ScreenWrapper>
             );
         }

From 1eebd135dbeae29b1b8e432a28b3980d74e29a6c Mon Sep 17 00:00:00 2001
From: Maria D'Costa <maria@expensify.com>
Date: Thu, 21 Jul 2022 12:33:19 +0400
Subject: [PATCH 44/45] Optionally override default styles for OfflineIndicator

---
 src/components/OfflineIndicator.js                   | 12 +++++++++---
 .../Payments/PaymentsPage/BasePaymentsPage.js        |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/OfflineIndicator.js b/src/components/OfflineIndicator.js
index b6a04ca8fbf0..572233e9d29d 100644
--- a/src/components/OfflineIndicator.js
+++ b/src/components/OfflineIndicator.js
@@ -16,7 +16,7 @@ const propTypes = {
     /** Information about the network */
     network: networkPropTypes.isRequired,
 
-    /** Styles for container element */
+    /** Optional styles for container element that will override the default styling for the offline indicator */
     containerStyles: PropTypes.arrayOf(PropTypes.object),
 
     /** Is the window width narrow, like on a mobile device */
@@ -29,6 +29,13 @@ const defaultProps = {
     containerStyles: [],
 };
 
+const setStyles = (containerStyles, isSmallScreenWidth) => {
+    if (containerStyles.length) {
+        return containerStyles;
+    }
+    return isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator;
+};
+
 const OfflineIndicator = (props) => {
     if (!props.network.isOffline) {
         return null;
@@ -36,8 +43,7 @@ const OfflineIndicator = (props) => {
 
     return (
         <View style={[
-            ...props.containerStyles,
-            props.containerStyles.length === 0 ? (props.isSmallScreenWidth ? styles.offlineIndicatorMobile : styles.offlineIndicator) : [],
+            setStyles(props.containerStyles, props.isSmallScreenWidth),
             styles.flexRow,
             styles.alignItemsCenter]}
         >
diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
index d39c1d2b83ba..c8b5b803add4 100644
--- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
+++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js
@@ -434,7 +434,7 @@ class BasePaymentsPage extends React.Component {
                     shouldShowCancelButton
                     danger
                 />
-               <OfflineIndicator containerStyles={[styles.ml5, styles.mv3]} />
+                <OfflineIndicator containerStyles={[styles.ml5, styles.mv3]} />
             </ScreenWrapper>
         );
     }

From e4550d64540e7fbffaecbf57f48dca00c8c4523a Mon Sep 17 00:00:00 2001
From: Kosuke Tseng <ctseng@expensify.com>
Date: Thu, 21 Jul 2022 15:14:44 -0700
Subject: [PATCH 45/45] use new prop

---
 src/pages/home/report/ReportActionCompose.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
index 12fb896ea1e3..c2cf3b9262b3 100755
--- a/src/pages/home/report/ReportActionCompose.js
+++ b/src/pages/home/report/ReportActionCompose.js
@@ -669,7 +669,7 @@ class ReportActionCompose extends React.Component {
                     </View>
                 </View>
                 <View style={[styles.chatItemComposeSecondaryRow, styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter]}>
-                    {!this.props.isSmallScreenWidth && <OfflineIndicator style={[styles.chatItemComposeSecondaryRowOffset]} />}
+                    {!this.props.isSmallScreenWidth && <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRowOffset]} />}
                     <ReportTypingIndicator reportID={this.props.reportID} />
                     <ExceededCommentLength commentLength={this.comment.length} />
                 </View>