From 881d7be6e3b0b4c6e7261e99538180f6502c0d29 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Dec 2021 21:49:57 +0530 Subject: [PATCH 1/7] Add icons --- assets/images/bolt.svg | 7 +++++++ assets/images/transfer.svg | 11 +++++++++++ src/components/Icon/Expensicons.js | 4 ++++ 3 files changed, 22 insertions(+) create mode 100644 assets/images/bolt.svg create mode 100644 assets/images/transfer.svg diff --git a/assets/images/bolt.svg b/assets/images/bolt.svg new file mode 100644 index 000000000000..2290fbd7ded7 --- /dev/null +++ b/assets/images/bolt.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/assets/images/transfer.svg b/assets/images/transfer.svg new file mode 100644 index 000000000000..03cb3c5f72b2 --- /dev/null +++ b/assets/images/transfer.svg @@ -0,0 +1,11 @@ + + + + + + + + diff --git a/src/components/Icon/Expensicons.js b/src/components/Icon/Expensicons.js index ab8561c91b2e..945c81cda6ff 100644 --- a/src/components/Icon/Expensicons.js +++ b/src/components/Icon/Expensicons.js @@ -4,6 +4,7 @@ import ArrowRight from '../../../assets/images/arrow-right.svg'; import BackArrow from '../../../assets/images/back-left.svg'; import Bank from '../../../assets/images/bank.svg'; import Bill from '../../../assets/images/bill.svg'; +import Bolt from '../../../assets/images/bolt.svg'; import Briefcase from '../../../assets/images/briefcase.svg'; import Bug from '../../../assets/images/bug.svg'; import Building from '../../../assets/images/building.svg'; @@ -57,6 +58,7 @@ import RotateLeft from '../../../assets/images/rotate-left.svg'; import Send from '../../../assets/images/send.svg'; import SignOut from '../../../assets/images/sign-out.svg'; import Sync from '../../../assets/images/sync.svg'; +import Transfer from '../../../assets/images/transfer.svg'; import ThreeDots from '../../../assets/images/three-dots.svg'; import Trashcan from '../../../assets/images/trashcan.svg'; import UpArrow from '../../../assets/images/arrow-up.svg'; @@ -73,6 +75,7 @@ export { BackArrow, Bank, Bill, + Bolt, Briefcase, Building, Bug, @@ -126,6 +129,7 @@ export { Send, SignOut, Sync, + Transfer, ThreeDots, Trashcan, UpArrow, From c29736a93268e3e29180423685fb6e847ada9bf9 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Dec 2021 21:50:14 +0530 Subject: [PATCH 2/7] add routes --- src/ONYXKEYS.js | 4 ++++ src/ROUTES.js | 2 ++ 2 files changed, 6 insertions(+) diff --git a/src/ONYXKEYS.js b/src/ONYXKEYS.js index 1bfc29e16510..4c7ea591f3ff 100755 --- a/src/ONYXKEYS.js +++ b/src/ONYXKEYS.js @@ -168,4 +168,8 @@ export default { // Is Keyboard shortcuts modal open? IS_SHORTCUTS_MODAL_OPEN: 'isShortcutsModalOpen', + + // Stores information about active wallet transfer amount, selectedAccountID, status, etc + WALLET_TRANSFER: 'walletTransfer', + }; diff --git a/src/ROUTES.js b/src/ROUTES.js index a3a33bcdaa96..5f02858208d6 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -33,6 +33,8 @@ export default { SETTINGS_ADD_BANK_ACCOUNT: 'settings/payments/add-bank-account', SETTINGS_ADD_LOGIN: 'settings/addlogin/:type', getSettingsAddLoginRoute: type => `settings/addlogin/${type}`, + SETTINGS_PAYMENTS_TRANSFER_BALANCE: 'settings/payments/transfer-balance', + SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT: 'settings/payments/choose-transfer-account', NEW_GROUP: 'new/group', NEW_CHAT: 'new/chat', REPORT, From e71e8b564750e8cbd85fd0be07a00629163c85e1 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 21 Dec 2021 22:51:14 +0530 Subject: [PATCH 3/7] Scaffold the transfer wallet balance logic --- src/CONST.js | 5 ++++ src/languages/en.js | 19 +++++++++++++ src/languages/es.js | 19 +++++++++++++ src/libs/API.js | 16 +++++++++++ .../AppNavigator/ModalStackNavigators.js | 10 +++++++ src/libs/Navigation/linkingConfig.js | 8 ++++++ .../Payments/ChooseTransferAccountPage.js | 27 +++++++++++++++++++ .../settings/Payments/TransferBalancePage.js | 27 +++++++++++++++++++ 8 files changed, 131 insertions(+) create mode 100644 src/pages/settings/Payments/ChooseTransferAccountPage.js create mode 100644 src/pages/settings/Payments/TransferBalancePage.js diff --git a/src/CONST.js b/src/CONST.js index 9e06129f252f..1fe463dcb01c 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -377,6 +377,11 @@ const CONST = { }, WALLET: { + TRANSFER_BALANCE_FEE: 0.30, + TRANSFER_METHOD_TYPE: { + INSTANT: 'instant', + ACH: 'ach', + }, ERROR: { IDENTITY_NOT_FOUND: 'Identity not found', INVALID_SSN: 'Invalid SSN', diff --git a/src/languages/en.js b/src/languages/en.js index 1da746d0b82f..571730279de8 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -92,6 +92,7 @@ export default { bankAccount: 'Bank account', join: 'Join', decline: 'Decline', + transferBalance: 'Transfer Balance', }, attachmentPicker: { cameraPermissionRequired: 'Camera permission required', @@ -333,9 +334,27 @@ export default { }, paymentsPage: { paymentMethodsTitle: 'Payment methods', + allSet: 'All Set!', + transferConfirmText: ({amount}) => `${amount} will hit your account shortly!`, + gotIt: 'Got it, Thanks!', + }, + transferAmountPage: { + transfer: ({amount}) => `Transfer${amount ? ` ${amount}` : ''}`, + instant: 'Instant (Debit Card)', + instantSummary: ({amount}) => `1.5% fee (${amount} minimum)`, + ach: '1-3 Business Days (Bank Account)', + achSummary: 'No fee', + whichAccount: 'Which Account?', + fee: 'Fee', + failedTransfer: 'Failed to transfer balance', + }, + chooseTransferAccountPage: { + chooseAccount: 'Choose Account', }, paymentMethodList: { addPaymentMethod: 'Add payment method', + addDebitCard: 'Add debit card', + addBankAccount: 'Add bank account', accountLastFour: 'Account ending in', cardLastFour: 'Card ending in', addFirstPaymentMethod: 'Add a payment method to send and receive payments directly in the app.', diff --git a/src/languages/es.js b/src/languages/es.js index 7a76a87101a6..b4d3fcf62563 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -92,6 +92,7 @@ export default { bankAccount: 'Cuenta bancaria', join: 'Unirse', decline: 'Rechazar', + transferBalance: 'Transferencia de saldo', }, attachmentPicker: { cameraPermissionRequired: 'Se necesita permiso para usar la cámara', @@ -333,9 +334,27 @@ export default { }, paymentsPage: { paymentMethodsTitle: 'Métodos de pago', + allSet: 'Todo listo!', + transferConfirmText: ({amount}) => `${amount} llegará a tu cuenta en breve!`, + gotIt: 'Gracias!', + }, + transferAmountPage: { + transfer: ({amount}) => `Transferir${amount ? ` ${amount}` : ''}`, + instant: 'Instante', + instantSummary: ({amount}) => `Tarifa del 1.5% (${amount} mínimo)`, + ach: '1-3 días laborales', + achSummary: 'Sin cargo', + whichAccount: '¿Que cuenta?', + fee: 'Tarifa', + failedTransfer: 'No se pudo transferir el saldo', + }, + chooseTransferAccountPage: { + chooseAccount: 'Elegir cuenta', }, paymentMethodList: { addPaymentMethod: 'Agrega método de pago', + addDebitCard: 'Agregar tarjeta de débito', + addBankAccount: 'Agregar cuenta de banco', accountLastFour: 'Cuenta con terminación', cardLastFour: 'Tarjeta con terminacíon', addFirstPaymentMethod: 'Añade un método de pago para enviar y recibir pagos directamente desde la aplicación.', diff --git a/src/libs/API.js b/src/libs/API.js index 60ebf7334203..9904b7756f18 100644 --- a/src/libs/API.js +++ b/src/libs/API.js @@ -1123,6 +1123,21 @@ function CreatePolicyRoom(parameters) { return Network.post(commandName, parameters); } +/** + * Transfer Wallet balance and takes either the bankAccoundID or fundID + * @param {Object} parameters + * @param {String} [parameters.bankAccountID] + * @param {String} [parameters.fundID] + * @returns {Promise} + */ +function Wallet_TransferBalance(parameters) { + const commandName = 'TransferWalletBalance'; + if (!parameters.bankAccountID && !parameters.fundID) { + throw new Error('Must pass either bankAccountID or fundID to TransferWalletBalance'); + } + return Network.post(commandName, parameters); +} + export { Authenticate, AuthenticateWithAccountID, @@ -1180,6 +1195,7 @@ export { ValidateEmail, Wallet_Activate, Wallet_GetOnfidoSDKToken, + Wallet_TransferBalance, GetLocalCurrency, GetCurrencyList, Policy_Create, diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 3e2d3c1ddbc2..5dc728baea72 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -40,6 +40,8 @@ import WorkspaceMembersPage from '../../../pages/workspace/WorkspaceMembersPage' import WorkspaceBankAccountPage from '../../../pages/workspace/WorkspaceBankAccountPage'; import WorkspaceNewRoomPage from '../../../pages/workspace/WorkspaceNewRoomPage'; import CONST from '../../../CONST'; +import TransferBalancePage from '../../../pages/settings/Payments/TransferBalancePage'; +import ChooseTransferAccountPage from '../../../pages/settings/Payments/ChooseTransferAccountPage'; const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, @@ -180,6 +182,14 @@ const SettingsModalStackNavigator = createModalStackNavigator([ Component: SettingsPaymentsPage, name: 'Settings_Payments', }, + { + Component: TransferBalancePage, + name: 'Settings_Transfer_Balance', + }, + { + Component: ChooseTransferAccountPage, + name: 'Settings_Choose_Transfer_Account', + }, { Component: SettingsAddPayPalMePage, name: 'Settings_Add_Paypal_Me', diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index 2b61a58a5f40..b565d6c4d563 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -52,6 +52,14 @@ export default { path: ROUTES.SETTINGS_PAYMENTS, exact: true, }, + Settings_Transfer_Balance: { + path: ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE, + exact: true, + }, + Settings_Choose_Transfer_Account: { + path: ROUTES.SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT, + exact: true, + }, Settings_Add_Paypal_Me: { path: ROUTES.SETTINGS_ADD_PAYPAL_ME, exact: true, diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js new file mode 100644 index 000000000000..f8b907850a92 --- /dev/null +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -0,0 +1,27 @@ +import React from 'react'; +import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import Navigation from '../../../libs/Navigation/Navigation'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +const ChooseTransferAccountPage = ( + + + Navigation.goBack()} + onCloseButtonPress={() => Navigation.dismissModal()} + /> + + +); + +ChooseTransferAccountPage.propTypes = propTypes; + +export default withLocalize(ChooseTransferAccountPage); diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js new file mode 100644 index 000000000000..b34db29ac7fb --- /dev/null +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -0,0 +1,27 @@ +import React from 'react'; +import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; +import ScreenWrapper from '../../../components/ScreenWrapper'; +import Navigation from '../../../libs/Navigation/Navigation'; +import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index'; + +const propTypes = { + ...withLocalizePropTypes, +}; + +const TransferBalancePage = ( + + + Navigation.goBack()} + onCloseButtonPress={() => Navigation.dismissModal(true)} + /> + + +); + +TransferBalancePage.propTypes = propTypes; + +export default withLocalize(TransferBalancePage); From fa88d6d6c0f2143681aa33e784fd028b9045bb63 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Dec 2021 00:06:35 +0530 Subject: [PATCH 4/7] refactor PaymentMethod list --- src/libs/PaymentUtils.js | 79 +++++++++++++++++++ .../settings/Payments/PaymentMethodList.js | 63 ++------------- 2 files changed, 86 insertions(+), 56 deletions(-) create mode 100644 src/libs/PaymentUtils.js diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js new file mode 100644 index 000000000000..6a51864c7e37 --- /dev/null +++ b/src/libs/PaymentUtils.js @@ -0,0 +1,79 @@ +import _ from 'underscore'; +import lodashGet from 'lodash/get'; +import * as Expensicons from '../components/Icon/Expensicons'; +import getBankIcon from '../components/Icon/BankIcons'; +import CONST from '../CONST'; +import * as Localize from './Localize'; + +/** + * Get the PaymentMethods list + * @param {Array} bankAccountList + * @param {Array} cardList + * @param {String} [payPalMeUsername=''] + * @returns {Array} + */ +function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { + const combinedPaymentMethods = []; + + _.each(bankAccountList, (bankAccount) => { + // Add all bank accounts besides the wallet + if (bankAccount.type === CONST.BANK_ACCOUNT_TYPES.WALLET) { + return; + } + + const formattedBankAccountNumber = bankAccount.accountNumber + ? `${Localize.translate('paymentMethodList.accountLastFour')} ${bankAccount.accountNumber.slice(-4) + }` + : null; + const {icon, iconSize} = getBankIcon(lodashGet(bankAccount, 'additionalData.bankName', '')); + combinedPaymentMethods.push({ + type: CONST.PAYMENT_METHODS.BANK_ACCOUNT, + title: bankAccount.addressName, + description: formattedBankAccountNumber, + methodID: bankAccount.bankAccountID, + icon, + iconSize, + key: `bankAccount-${bankAccount.bankAccountID}`, + }); + }); + + _.each(cardList, (card) => { + const formattedCardNumber = card.cardNumber + ? `${this.props.translate('paymentMethodList.cardLastFour')} ${card.cardNumber.slice(-4)}` + : null; + const {icon, iconSize} = getBankIcon(card.bank, true); + combinedPaymentMethods.push({ + type: CONST.PAYMENT_METHODS.DEBIT_CARD, + title: card.addressName, + description: formattedCardNumber, + methodID: card.cardNumber, + icon, + iconSize, + key: `card-${card.cardNumber}`, + }); + }); + + if (payPalMeUsername) { + combinedPaymentMethods.push({ + type: CONST.PAYMENT_METHODS.PAYPAL, + title: 'PayPal.me', + methodID: CONST.PAYMENT_METHODS.PAYPAL, + description: this.props.payPalMeUsername, + icon: Expensicons.PayPal, + key: 'payPalMePaymentMethod', + }); + } + + // If we have not added any payment methods, show a default empty state + if (_.isEmpty(combinedPaymentMethods)) { + combinedPaymentMethods.push({ + text: this.props.translate('paymentMethodList.addFirstPaymentMethod'), + }); + } + + return combinedPaymentMethods; +} + +export default { + getPaymentMethods, +}; diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 15f6548a9cef..54d9a3d9817a 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -3,7 +3,6 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {FlatList} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import styles from '../../../styles/styles'; import * as StyleUtils from '../../../styles/StyleUtils'; import MenuItem from '../../../components/MenuItem'; @@ -13,8 +12,8 @@ import withLocalize, {withLocalizePropTypes} from '../../../components/withLocal import ONYXKEYS from '../../../ONYXKEYS'; import CONST from '../../../CONST'; import * as Expensicons from '../../../components/Icon/Expensicons'; -import getBankIcon from '../../../components/Icon/BankIcons'; import bankAccountPropTypes from '../../../components/bankAccountPropTypes'; +import PaymentUtils from '../../../libs/PaymentUtils'; const MENU_ITEM = 'menuItem'; @@ -70,60 +69,12 @@ class PaymentMethodList extends Component { * @returns {Array} */ createPaymentMethodList() { - const combinedPaymentMethods = []; - - _.each(this.props.bankAccountList, (bankAccount) => { - // Add all bank accounts besides the wallet - if (bankAccount.type === CONST.BANK_ACCOUNT_TYPES.WALLET) { - return; - } - - const formattedBankAccountNumber = bankAccount.accountNumber - ? `${this.props.translate('paymentMethodList.accountLastFour')} ${ - bankAccount.accountNumber.slice(-4) - }` - : null; - const {icon, iconSize} = getBankIcon(lodashGet(bankAccount, 'additionalData.bankName', '')); - combinedPaymentMethods.push({ - type: MENU_ITEM, - title: bankAccount.addressName, - - // eslint-disable-next-line - description: formattedBankAccountNumber, - icon, - iconSize, - onPress: e => this.props.onPress(e, bankAccount.bankAccountID), - key: `bankAccount-${bankAccount.bankAccountID}`, - }); - }); - - _.each(this.props.cardList, (card) => { - const formattedCardNumber = card.cardNumber - ? `${this.props.translate('paymentMethodList.cardLastFour')} ${card.cardNumber.slice(-4)}` - : null; - const {icon, iconSize} = getBankIcon(card.bank, true); - combinedPaymentMethods.push({ - type: MENU_ITEM, - title: card.addressName, - // eslint-disable-next-line - description: formattedCardNumber, - icon, - iconSize, - onPress: e => this.props.onPress(e, card.cardNumber), - key: `card-${card.cardNumber}`, - }); - }); - - if (this.props.payPalMeUsername) { - combinedPaymentMethods.push({ - type: MENU_ITEM, - title: 'PayPal.me', - description: this.props.payPalMeUsername, - icon: Expensicons.PayPal, - onPress: e => this.props.onPress(e, 'payPalMe'), - key: 'payPalMePaymentMethod', - }); - } + let combinedPaymentMethods = PaymentUtils.getPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername); + combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({ + ...paymentMethod, + type: MENU_ITEM, + onPress: e => this.props.onPress(e, paymentMethod.methodID), + })); // If we have not added any payment methods, show a default empty state if (_.isEmpty(combinedPaymentMethods)) { From 98b569a22e995d330513d6376fbd20092c37c53e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Dec 2021 00:24:04 +0530 Subject: [PATCH 5/7] fix issues and link Transfer walltet balance page with PaymentsPage --- src/libs/PaymentUtils.js | 13 ++------- .../Payments/ChooseTransferAccountPage.js | 6 ++-- src/pages/settings/Payments/PaymentsPage.js | 28 ++++++++++++++++--- .../settings/Payments/TransferBalancePage.js | 6 ++-- 4 files changed, 33 insertions(+), 20 deletions(-) diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index 6a51864c7e37..f23312fba406 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -22,7 +22,7 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { } const formattedBankAccountNumber = bankAccount.accountNumber - ? `${Localize.translate('paymentMethodList.accountLastFour')} ${bankAccount.accountNumber.slice(-4) + ? `${Localize.translateLocal('paymentMethodList.accountLastFour')} ${bankAccount.accountNumber.slice(-4) }` : null; const {icon, iconSize} = getBankIcon(lodashGet(bankAccount, 'additionalData.bankName', '')); @@ -39,7 +39,7 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { _.each(cardList, (card) => { const formattedCardNumber = card.cardNumber - ? `${this.props.translate('paymentMethodList.cardLastFour')} ${card.cardNumber.slice(-4)}` + ? `${Localize.translateLocal('paymentMethodList.cardLastFour')} ${card.cardNumber.slice(-4)}` : null; const {icon, iconSize} = getBankIcon(card.bank, true); combinedPaymentMethods.push({ @@ -58,19 +58,12 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { type: CONST.PAYMENT_METHODS.PAYPAL, title: 'PayPal.me', methodID: CONST.PAYMENT_METHODS.PAYPAL, - description: this.props.payPalMeUsername, + description: payPalMeUsername, icon: Expensicons.PayPal, key: 'payPalMePaymentMethod', }); } - // If we have not added any payment methods, show a default empty state - if (_.isEmpty(combinedPaymentMethods)) { - combinedPaymentMethods.push({ - text: this.props.translate('paymentMethodList.addFirstPaymentMethod'), - }); - } - return combinedPaymentMethods; } diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index f8b907850a92..eb3fec894eca 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -3,17 +3,17 @@ import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; const propTypes = { ...withLocalizePropTypes, }; -const ChooseTransferAccountPage = ( +const ChooseTransferAccountPage = props => ( Navigation.goBack()} onCloseButtonPress={() => Navigation.dismissModal()} diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index a49b2ada357f..fca141ae051b 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/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,6 +19,8 @@ import ONYXKEYS from '../../../ONYXKEYS'; import Permissions from '../../../libs/Permissions'; import AddPaymentMethodMenu from '../../../components/AddPaymentMethodMenu'; import CONST from '../../../CONST'; +import MenuItem from '../../../components/MenuItem'; +import * as Expensicons from '../../../components/Icon/Expensicons'; const propTypes = { ...withLocalizePropTypes, @@ -48,6 +50,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.transferBalance = this.transferBalance.bind(this); } componentDidMount() { @@ -110,6 +113,13 @@ class PaymentsPage extends React.Component { this.setState({shouldShowAddPaymentMenu: false}); } + /** + * Transfer wallet balance + */ + transferBalance() { + Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); + } + render() { return ( @@ -121,9 +131,19 @@ class PaymentsPage extends React.Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - { - Permissions.canUseWallet(this.props.betas) && - } + {Permissions.canUseWallet(this.props.betas) && ( + <> + + + + + + )} diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index b34db29ac7fb..eb12627c2a3c 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -3,17 +3,17 @@ import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize'; -import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView/index'; +import KeyboardAvoidingView from '../../../components/KeyboardAvoidingView'; const propTypes = { ...withLocalizePropTypes, }; -const TransferBalancePage = ( +const TransferBalancePage = props => ( Navigation.goBack()} onCloseButtonPress={() => Navigation.dismissModal(true)} From 16088b6a551f36f285806282e877dcc1e8f2314c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Dec 2021 01:55:45 +0530 Subject: [PATCH 6/7] Remove extra data from paymentMethods object & fix routes --- src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 4 ++-- src/libs/Navigation/linkingConfig.js | 4 ++-- src/libs/PaymentUtils.js | 3 --- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index 5dc728baea72..ccfe29fa6523 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -184,11 +184,11 @@ const SettingsModalStackNavigator = createModalStackNavigator([ }, { Component: TransferBalancePage, - name: 'Settings_Transfer_Balance', + name: 'Settings_Payments_Transfer_Balance', }, { Component: ChooseTransferAccountPage, - name: 'Settings_Choose_Transfer_Account', + name: 'Settings_Payments_Choose_Transfer_Account', }, { Component: SettingsAddPayPalMePage, diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js index b565d6c4d563..34946309b308 100644 --- a/src/libs/Navigation/linkingConfig.js +++ b/src/libs/Navigation/linkingConfig.js @@ -52,11 +52,11 @@ export default { path: ROUTES.SETTINGS_PAYMENTS, exact: true, }, - Settings_Transfer_Balance: { + Settings_Payments_Transfer_Balance: { path: ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE, exact: true, }, - Settings_Choose_Transfer_Account: { + Settings_Payments_Choose_Transfer_Account: { path: ROUTES.SETTINGS_PAYMENTS_CHOOSE_TRANSFER_ACCOUNT, exact: true, }, diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index f23312fba406..4e33a165cb3e 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -27,7 +27,6 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { : null; const {icon, iconSize} = getBankIcon(lodashGet(bankAccount, 'additionalData.bankName', '')); combinedPaymentMethods.push({ - type: CONST.PAYMENT_METHODS.BANK_ACCOUNT, title: bankAccount.addressName, description: formattedBankAccountNumber, methodID: bankAccount.bankAccountID, @@ -43,7 +42,6 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { : null; const {icon, iconSize} = getBankIcon(card.bank, true); combinedPaymentMethods.push({ - type: CONST.PAYMENT_METHODS.DEBIT_CARD, title: card.addressName, description: formattedCardNumber, methodID: card.cardNumber, @@ -55,7 +53,6 @@ function getPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') { if (payPalMeUsername) { combinedPaymentMethods.push({ - type: CONST.PAYMENT_METHODS.PAYPAL, title: 'PayPal.me', methodID: CONST.PAYMENT_METHODS.PAYPAL, description: payPalMeUsername, From 30688a95d3633f4a5dccd815e923d344f15a72e6 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 22 Dec 2021 02:02:09 +0530 Subject: [PATCH 7/7] hide the transfer page until ready --- src/pages/settings/Payments/PaymentsPage.js | 28 +++------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index fca141ae051b..a49b2ada357f 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -1,5 +1,5 @@ import React from 'react'; -import {ScrollView, View} from 'react-native'; +import {ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import PaymentMethodList from './PaymentMethodList'; @@ -19,8 +19,6 @@ import ONYXKEYS from '../../../ONYXKEYS'; import Permissions from '../../../libs/Permissions'; import AddPaymentMethodMenu from '../../../components/AddPaymentMethodMenu'; import CONST from '../../../CONST'; -import MenuItem from '../../../components/MenuItem'; -import * as Expensicons from '../../../components/Icon/Expensicons'; const propTypes = { ...withLocalizePropTypes, @@ -50,7 +48,6 @@ class PaymentsPage extends React.Component { this.paymentMethodPressed = this.paymentMethodPressed.bind(this); this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this); this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this); - this.transferBalance = this.transferBalance.bind(this); } componentDidMount() { @@ -113,13 +110,6 @@ class PaymentsPage extends React.Component { this.setState({shouldShowAddPaymentMenu: false}); } - /** - * Transfer wallet balance - */ - transferBalance() { - Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); - } - render() { return ( @@ -131,19 +121,9 @@ class PaymentsPage extends React.Component { onCloseButtonPress={() => Navigation.dismissModal(true)} /> - {Permissions.canUseWallet(this.props.betas) && ( - <> - - - - - - )} + { + Permissions.canUseWallet(this.props.betas) && + }