Add wallet balance transfer Page

src/components/CurrentWalletBalance.js

@@ -17,11 +17,15 @@ const propTypes = {
         currentBalance: PropTypes.number,
     }),
 
+    /** Styles of the amount */
+    balanceStyles: PropTypes.arrayOf(PropTypes.object),
+
     ...withLocalizePropTypes,
 };
 
 const defaultProps = {
     userWallet: {},
+    balanceStyles: [],
 };
 
 const CurrentWalletBalance = (props) => {
@@ -41,7 +45,7 @@ const CurrentWalletBalance = (props) => {
     );
     return (
         <Text
-            style={[styles.textXXXLarge, styles.pv5, styles.alignSelfCenter]}
+            style={[styles.textXXXLarge, styles.pv5, styles.alignSelfCenter, ...props.balanceStyles]}
         >
             {`${formattedBalance}`}
         </Text>

src/libs/PaymentUtils.js

@@ -6,13 +6,13 @@ import CONST from '../CONST';
 import * as Localize from './Localize';
 
 /**
- * Get the PaymentMethods list
+ * Format the PaymentMethods list
  * @param {Array} bankAccountList
  * @param {Array} cardList
  * @param {String} [payPalMeUsername='']
- * @returns {Array<PaymentMethod>}
+ * @returns {Array<Object>}
  */
-function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') {
+function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') {
     const combinedPaymentMethods = [];
 
     _.each(bankAccountList, (bankAccount) => {
@@ -64,6 +64,16 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') {
     return combinedPaymentMethods;
 }
 
+/**
+ * Get the amount that is being transferred
+ * @param {Number} currentBalance
+ * @returns {Number}
+ */
+function getWalletTransferAmount(currentBalance) {
+    return currentBalance - CONST.WALLET.TRANSFER_BALANCE_FEE;
+}
+
 export default {
-    getPaymentMethods,
+    formatPaymentMethods,
+    getWalletTransferAmount,
 };

src/libs/actions/PaymentMethods.js

@@ -8,6 +8,7 @@ import Growl from '../Growl';
 import * as Localize from '../Localize';
 import Navigation from '../Navigation/Navigation';
 import * as CardUtils from '../CardUtils';
+import Log from '../Log';
 
 /**
  * Calls the API to get the user's bankAccountList, cardList, wallet, and payPalMe
@@ -95,8 +96,59 @@ function clearDebitCardFormErrorAndSubmit() {
     });
 }
 
+/**
+ * Call the API to transfer wallet balance.
+ * @param {Object} paymentMethod
+ * @param {String} paymentMethod.id
+ * @param {'bankAccount'|'debitCard'} paymentMethod.type
+ * @returns {Promise}
+ */
+function transferWalletBalance(paymentMethod) {
+    const parameters = {
+        [paymentMethod.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? 'bankAccountID' : 'fundID']: paymentMethod.id,
+    };
+    Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: true});
+
+    return API.TransferWalletBalance(parameters)
+        .then((response) => {
+            if (response.jsonCode !== 200) {
+                throw new Error(response.message);
+            }
+            Onyx.merge(ONYXKEYS.USER_WALLET, {balance: 0});
+            Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: true, loading: false});
+            Navigation.navigate(ROUTES.SETTINGS_PAYMENTS);
+        }).catch((error) => {
+            Log.alert(`[Payments] Failed to transfer wallet balance: ${error.message}`);
+            Growl.error(Localize.translateLocal('transferAmountPage.failedTransfer'));
+            Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: false});
+        });
+}
+
+/**
+ * Set the necessary data for wallet transfer
+ * @param {String} selectedAccountID
+ */
+function saveWalletTransferAccount(selectedAccountID) {
+    Onyx.set(ONYXKEYS.WALLET_TRANSFER, {
+        selectedAccountID,
+        filterPaymentMethodType: null,
+        loading: false,
+        shouldShowConfirmModal: false,
+    });
+}
+
+/**
+ * Remove all the data related to wallet transfer and close the ConfirmModal
+ */
+function clearWalletTransfer() {
+    Onyx.set(ONYXKEYS.WALLET_TRANSFER, null);
+}
+
 export {
     getPaymentMethods,
     addBillingCard,
     clearDebitCardFormErrorAndSubmit,
+    transferWalletBalance,
+    saveWalletTransferAccount,
+    clearWalletTransfer,
 };

src/pages/settings/Payments/PaymentMethodList.js

@@ -69,7 +69,7 @@ class PaymentMethodList extends Component {
      * @returns {Array}
      */
     createPaymentMethodList() {
-        let combinedPaymentMethods = PaymentUtils.getPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername);
+        let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername);
         combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({
             ...paymentMethod,
             type: MENU_ITEM,

src/pages/settings/Payments/PaymentsPage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {ScrollView} from 'react-native';
+import {ScrollView, View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import PropTypes from 'prop-types';
 import PaymentMethodList from './PaymentMethodList';
@@ -19,18 +19,38 @@ import ONYXKEYS from '../../../ONYXKEYS';
 import Permissions from '../../../libs/Permissions';
 import AddPaymentMethodMenu from '../../../components/AddPaymentMethodMenu';
 import CONST from '../../../CONST';
+import * as Expensicons from '../../../components/Icon/Expensicons';
+import MenuItem from '../../../components/MenuItem';
+import walletTransferPropTypes from './walletTransferPropTypes';
+import ConfirmModal from '../../../components/ConfirmModal';
+import PaymentUtils from '../../../libs/PaymentUtils';
 
 const propTypes = {
-    ...withLocalizePropTypes,
+    /** Wallet balance transfer props */
+    walletTransfer: walletTransferPropTypes,
+
+    /** The user's wallet account */
+    userWallet: PropTypes.shape({
+        /** The user's current wallet balance */
+        currentBalance: PropTypes.number,
+    }),
 
     /** List of betas available to current user */
     betas: PropTypes.arrayOf(PropTypes.string),
 
     /** Are we loading payment methods? */
     isLoadingPaymentMethods: PropTypes.bool,
+
+    ...withLocalizePropTypes,
 };
 
 const defaultProps = {
+    walletTransfer: {
+        shouldShowConfirmModal: false,
+    },
+    userWallet: {
+        currentBalance: 0,
+    },
     betas: [],
     isLoadingPaymentMethods: true,
 };
@@ -48,6 +68,7 @@ class PaymentsPage extends React.Component {
         this.paymentMethodPressed = this.paymentMethodPressed.bind(this);
         this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this);
         this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this);
+        this.navigateToTransferBalancePage = this.navigateToTransferBalancePage.bind(this);
     }
 
     componentDidMount() {
@@ -110,6 +131,10 @@ class PaymentsPage extends React.Component {
         this.setState({shouldShowAddPaymentMenu: false});
     }
 
+    navigateToTransferBalancePage() {
+        Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE);
+    }
+
     render() {
         return (
             <ScreenWrapper>
@@ -121,9 +146,19 @@ class PaymentsPage extends React.Component {
                         onCloseButtonPress={() => Navigation.dismissModal(true)}
                     />
                     <ScrollView style={styles.flex1}>
-                        {
-                            Permissions.canUseWallet(this.props.betas) && <CurrentWalletBalance />
-                        }
+                        {Permissions.canUseWallet(this.props.betas) && (
+                            <>
+                                <View style={[styles.mv5]}>
+                                    <CurrentWalletBalance />
+                                </View>
+                                <MenuItem
+                                    title={this.props.translate('common.transferBalance')}
+                                    icon={Expensicons.Transfer}
+                                    onPress={this.navigateToTransferBalancePage}
+                                    shouldShowRightIcon
+                                />
+                            </>
+                        )}
                         <Text
                             style={[styles.ph5, styles.formLabel]}
                         >
@@ -145,6 +180,19 @@ class PaymentsPage extends React.Component {
                         }}
                         onItemSelected={method => this.addPaymentMethodTypePressed(method)}
                     />
+                    <ConfirmModal
+                        title={this.props.translate('paymentsPage.allSet')}
+                        onConfirm={PaymentMethods.clearWalletTransfer}
+                        isVisible={this.props.walletTransfer.shouldShowConfirmModal}
+                        prompt={this.props.translate('paymentsPage.transferConfirmText', {
+                            amount: this.props.numberFormat(
+                                PaymentUtils.getWalletTransferAmount(this.props.userWallet.currentBalance),
+                                {style: 'currency', currency: 'USD'},
+                            ),
+                        })}
+                        confirmText={this.props.translate('paymentsPage.gotIt')}
+                        shouldShowCancelButton={false}
+                    />
                 </KeyboardAvoidingView>
             </ScreenWrapper>
         );
@@ -160,6 +208,9 @@ export default compose(
         betas: {
             key: ONYXKEYS.BETAS,
         },
+        userWallet: {
+            key: ONYXKEYS.USER_WALLET,
+        },
         isLoadingPaymentMethods: {
             key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS,
             initWithStoredValues: false,