From 97c8e99a67086ee3c580fd83740aa7d82e4aa37a Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 07:36:52 +0530 Subject: [PATCH 01/19] Allow hiding the Add payment method button on Payment Method list --- src/pages/settings/Payments/PaymentMethodList.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 1e2c3b12424b..b25d8171dfd4 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -45,6 +45,9 @@ const propTypes = { cardID: PropTypes.number, })), + /** Whether the add Payment button be shown on the list */ + shouldShowAddPaymentMethodButton: PropTypes.bool, + ...withLocalizePropTypes, }; @@ -54,6 +57,7 @@ const defaultProps = { cardList: [], isLoadingPayments: false, isAddPaymentMenuActive: false, + shouldShowAddPaymentMethodButton: true, }; class PaymentMethodList extends Component { @@ -83,6 +87,10 @@ class PaymentMethodList extends Component { }); } + if (!this.props.shouldShowAddPaymentMethodButton) { + return combinedPaymentMethods; + } + combinedPaymentMethods.push({ type: MENU_ITEM, title: this.props.translate('paymentMethodList.addPaymentMethod'), @@ -119,6 +127,8 @@ class PaymentMethodList extends Component { iconHeight={item.iconSize} iconWidth={item.iconSize} wrapperStyle={item.wrapperStyle} + shouldShowSelectedState={this.props.shouldShowSelectedState} + isSelected={this.props.selectedMethodID === item.methodID} /> ); } From 8660d642f4668ae580b49755d6bf791656fb9b8a Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:07:11 +0530 Subject: [PATCH 02/19] Added ChooseTransferAccontpage --- .../Payments/ChooseTransferAccountPage.js | 102 +++++++++++++++--- .../settings/Payments/PaymentMethodList.js | 8 ++ 2 files changed, 97 insertions(+), 13 deletions(-) diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index eb3fec894eca..8bfccf9f1fe8 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -1,27 +1,103 @@ import React from 'react'; +import {withOnyx} from 'react-native-onyx'; +import {View} from 'react-native'; +import PropTypes from 'prop-types'; 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'; +import CONST from '../../../CONST'; +import PaymentMethodList from './PaymentMethodList'; +import * as PaymentMethods from '../../../libs/actions/PaymentMethods'; +import ROUTES from '../../../ROUTES'; +import MenuItem from '../../../components/MenuItem'; +import * as Expensicons from '../../../components/Icon/Expensicons'; +import compose from '../../../libs/compose'; +import ONYXKEYS from '../../../ONYXKEYS'; +import walletTransferPropTypes from './walletTransferPropTypes'; +import styles from '../../../styles/styles'; const propTypes = { + /** Wallet transfer propTypes */ + walletTransfer: walletTransferPropTypes, + + /** Are we loading payment methods? */ + isLoadingPaymentMethods: PropTypes.bool, + ...withLocalizePropTypes, }; -const ChooseTransferAccountPage = props => ( - - - Navigation.goBack()} - onCloseButtonPress={() => Navigation.dismissModal()} - /> - - -); +const defaultProps = { + walletTransfer: {}, + isLoadingPaymentMethods: false, +}; + +const ChooseTransferAccountPage = (props) => { + /** + * Go back to TransferPage with the selected bank account + * @param {String} accountID of the selected account. + */ + const selectAccountAndNavigateBack = (accountID) => { + PaymentMethods.updateWalletTransferData({selectedAccountID: accountID}); + Navigation.navigate(ROUTES.SETTINGS_TRANSFER_BALANCE); + }; + + /** + * @param {String} paymentType + */ + const navigateToAddPaymentMethodPage = () => { + if (props.filterType === CONST.PAYMENT_METHODS.DEBIT_CARD) { + Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD); + return; + } + Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); + }; + + return ( + + + Navigation.goBack()} + onCloseButtonPress={() => Navigation.dismissModal()} + /> + + + + + + + ); +}; ChooseTransferAccountPage.propTypes = propTypes; +ChooseTransferAccountPage.defaultProps = defaultProps; +ChooseTransferAccountPage.displayName = 'ChooseTransferAccountPage'; -export default withLocalize(ChooseTransferAccountPage); +export default compose( + withLocalize, + withOnyx({ + walletTransfer: { + key: ONYXKEYS.WALLET_TRANSFER, + }, + isLoadingPaymentMethods: { + key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, + initWithStoredValues: false, + }, + }), +)(ChooseTransferAccountPage); diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index b25d8171dfd4..6b3dae2d319f 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -48,6 +48,9 @@ const propTypes = { /** Whether the add Payment button be shown on the list */ shouldShowAddPaymentMethodButton: PropTypes.bool, + /** Type to filter the payment Method list */ + filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT]).isRequired, + ...withLocalizePropTypes, }; @@ -74,6 +77,11 @@ class PaymentMethodList extends Component { */ createPaymentMethodList() { let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername); + + if (!_.isEmpty(this.props.filterType)) { + combinedPaymentMethods = _.filter(combinedPaymentMethods, paymentMethod => paymentMethod.type === this.props.filterType); + } + combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({ ...paymentMethod, type: MENU_ITEM, From 05f8a7c688d89a73bd7e96a5058bb662ee341236 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:16:53 +0530 Subject: [PATCH 03/19] set navigation between choose account and transfer page --- .../settings/Payments/ChooseTransferAccountPage.js | 6 +++--- src/pages/settings/Payments/TransferBalancePage.js | 11 +++++++++++ 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index 8bfccf9f1fe8..26d1101cd62a 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -39,7 +39,7 @@ const ChooseTransferAccountPage = (props) => { * @param {String} accountID of the selected account. */ const selectAccountAndNavigateBack = (accountID) => { - PaymentMethods.updateWalletTransferData({selectedAccountID: accountID}); + PaymentMethods.saveWalletTransferAccount({selectedAccountID: accountID}); Navigation.navigate(ROUTES.SETTINGS_TRANSFER_BALANCE); }; @@ -63,7 +63,7 @@ const ChooseTransferAccountPage = (props) => { onBackButtonPress={() => Navigation.goBack()} onCloseButtonPress={() => Navigation.dismissModal()} /> - + { this.navigateToChooseTransferAccount(paymentType.type)} /> ))} this.navigateToChooseTransferAccount(selectedAccount.type)} /> )} Date: Thu, 13 Jan 2022 08:18:14 +0530 Subject: [PATCH 04/19] add methods --- src/libs/actions/PaymentMethods.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 38735599f882..4db6e78ead50 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -164,6 +164,20 @@ function saveWalletTransferAmount(transferAmount) { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {transferAmount}); } +/** + * @param {String} selectedAccountID + */ +function saveWalletTransferAccount(selectedAccountID) { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountID}); +} + +/** + * @param {String} filterPaymentMethodType + */ +function saveWalletTransferMethodType(filterPaymentMethodType) { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {filterPaymentMethodType}); +} + function dismissWalletConfirmModal() { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {shouldShowConfirmModal: false}); } @@ -177,5 +191,7 @@ export { transferWalletBalance, saveWalletTransferAccountAndResetData, saveWalletTransferAmount, + saveWalletTransferAccount, + saveWalletTransferMethodType, dismissWalletConfirmModal, }; From 00f410600b006199f27caf629c0293c24ecc9be8 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:30:02 +0530 Subject: [PATCH 05/19] Apply filters correctly --- src/libs/PaymentUtils.js | 3 +++ src/pages/settings/Payments/ChooseTransferAccountPage.js | 7 ++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index 3950a6a3214b..eacc9c9e3885 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -48,6 +48,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') icon, iconSize, key: `bankAccount-${bankAccount.bankAccountID}`, + type: CONST.PAYMENT_METHODS.BANK_ACCOUNT, }); }); @@ -63,6 +64,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') icon, iconSize, key: `card-${card.cardNumber}`, + type: CONST.PAYMENT_METHODS.DEBIT_CARD, }); }); @@ -73,6 +75,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '') description: payPalMeUsername, icon: Expensicons.PayPal, key: 'payPalMePaymentMethod', + type: CONST.PAYMENT_METHODS.PAYPAL, }); } diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index 26d1101cd62a..f568d6ae6076 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -36,11 +36,12 @@ const defaultProps = { const ChooseTransferAccountPage = (props) => { /** * Go back to TransferPage with the selected bank account + * @param {Object} event Click event object * @param {String} accountID of the selected account. */ - const selectAccountAndNavigateBack = (accountID) => { - PaymentMethods.saveWalletTransferAccount({selectedAccountID: accountID}); - Navigation.navigate(ROUTES.SETTINGS_TRANSFER_BALANCE); + const selectAccountAndNavigateBack = (event, accountID) => { + PaymentMethods.saveWalletTransferAccount(accountID); + Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); }; /** From 93fdbb63c523864df5d29ce1aad2d469b865d308 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:32:25 +0530 Subject: [PATCH 06/19] Reset data on every transfer --- src/libs/actions/PaymentMethods.js | 10 +++------- src/pages/settings/Payments/TransferBalancePage.js | 3 +-- 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 4db6e78ead50..f00dd6248fe9 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -144,13 +144,9 @@ function transferWalletBalance(paymentMethod) { }); } -/** - * Set the transfer account and reset the transfer data for Wallet balance transfer - * @param {String} selectedAccountID - */ -function saveWalletTransferAccountAndResetData(selectedAccountID) { +function resetWalletTransferData() { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, { - selectedAccountID, + selectedAccountID: null, filterPaymentMethodType: null, loading: false, shouldShowConfirmModal: false, @@ -189,7 +185,7 @@ export { continueSetup, clearDebitCardFormErrorAndSubmit, transferWalletBalance, - saveWalletTransferAccountAndResetData, + resetWalletTransferData, saveWalletTransferAmount, saveWalletTransferAccount, saveWalletTransferMethodType, diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index c07e5d3b6067..e7b77f0be6cc 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -98,8 +98,7 @@ class TransferBalancePage extends React.Component { ]; this.saveTransferAmountAndBalance = this.saveTransferAmountAndBalance.bind(this); - const selectedAccount = this.getSelectedPaymentMethodAccount(); - PaymentMethods.saveWalletTransferAccountAndResetData(selectedAccount ? selectedAccount.id : ''); + PaymentMethods.resetWalletTransferData(); } /** From 12c62e0e0c40449ee1edbc6027a0260603952e1c Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:33:46 +0530 Subject: [PATCH 07/19] make filtering optional for PaymentMethodList --- src/pages/settings/Payments/PaymentMethodList.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 6b3dae2d319f..a5b535d25910 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -49,7 +49,7 @@ const propTypes = { shouldShowAddPaymentMethodButton: PropTypes.bool, /** Type to filter the payment Method list */ - filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT]).isRequired, + filterType: PropTypes.oneOf([CONST.PAYMENT_METHODS.DEBIT_CARD, CONST.PAYMENT_METHODS.BANK_ACCOUNT, '']), ...withLocalizePropTypes, }; @@ -61,6 +61,7 @@ const defaultProps = { isLoadingPayments: false, isAddPaymentMenuActive: false, shouldShowAddPaymentMethodButton: true, + filterType: '', }; class PaymentMethodList extends Component { From e3f1b4f68b8f9b841d161fe75cd2ab8589b507bb Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:45:26 +0530 Subject: [PATCH 08/19] UI tweaks --- src/pages/settings/Payments/ChooseTransferAccountPage.js | 2 +- src/pages/settings/Payments/PaymentsPage.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index f568d6ae6076..ef3a540d504a 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -64,7 +64,7 @@ const ChooseTransferAccountPage = (props) => { onBackButtonPress={() => Navigation.goBack()} onCloseButtonPress={() => Navigation.dismissModal()} /> - + )} {this.props.translate('paymentsPage.paymentMethodsTitle')} From b4803794c8922d594ac47736bb5e532816ef1e57 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 08:54:35 +0530 Subject: [PATCH 09/19] rename method names --- src/libs/actions/PaymentMethods.js | 2 +- src/pages/settings/Payments/TransferBalancePage.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index f00dd6248fe9..ae7dde2e24d2 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -130,7 +130,7 @@ function transferWalletBalance(paymentMethod) { }; Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: true}); - API.TransferWalletBalance(parameters) + API.Wallet_TransferBalance(parameters) .then((response) => { if (response.jsonCode !== 200) { throw new Error(response.message); diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index e7b77f0be6cc..3343c2023f23 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -97,7 +97,6 @@ class TransferBalancePage extends React.Component { }, ]; - this.saveTransferAmountAndBalance = this.saveTransferAmountAndBalance.bind(this); PaymentMethods.resetWalletTransferData(); } @@ -119,7 +118,7 @@ class TransferBalancePage extends React.Component { * @param {Number} transferAmount * @param {Object} selectedAccount */ - saveTransferAmountAndBalance(transferAmount, selectedAccount) { + saveTransferAmountAndStartTransfer(transferAmount, selectedAccount) { PaymentMethods.saveWalletTransferAmount(transferAmount); PaymentMethods.transferWalletBalance(selectedAccount); } @@ -133,6 +132,7 @@ class TransferBalancePage extends React.Component { } render() { + this.props.userWallet.currentBalance = 125; const selectedAccount = this.getSelectedPaymentMethodAccount(); const selectedPaymentType = selectedAccount && selectedAccount.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.WALLET.TRANSFER_METHOD_TYPE.ACH @@ -222,7 +222,7 @@ class TransferBalancePage extends React.Component { pressOnEnter isLoading={this.props.walletTransfer.loading} isDisabled={isButtonDisabled} - onPress={() => this.saveTransferAmountAndBalance(transferAmount, selectedAccount)} + onPress={() => this.saveTransferAmountAndStartTransfer(transferAmount, selectedAccount)} text={this.props.translate( 'transferAmountPage.transfer', { From ec1782c0d5d055706b6f77b6e0e003294a4ea094 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 22:00:26 +0530 Subject: [PATCH 10/19] translations fixed --- src/languages/en.js | 4 ++-- src/languages/es.js | 4 ++-- src/pages/settings/Payments/ChooseTransferAccountPage.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index e95934194aa6..e599e3161dbe 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -368,8 +368,8 @@ export default { }, paymentMethodList: { addPaymentMethod: 'Add payment method', - addDebitCard: 'Add debit card', - addBankAccount: 'Add bank account', + addNewDebitCard: 'Add new debit card', + addNewBankAccount: 'Add new 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 df211fbb7892..0e88f03dc20c 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -368,8 +368,8 @@ export default { }, paymentMethodList: { addPaymentMethod: 'Agrega método de pago', - addDebitCard: 'Agregar tarjeta de débito', - addBankAccount: 'Agregar cuenta de banco', + addNewDebitCard: 'Agregar nueva tarjeta de débito', + addNewBankAccount: 'Agregar nueva 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/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index ef3a540d504a..7bca746941b4 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -76,8 +76,8 @@ const ChooseTransferAccountPage = (props) => { From cc5e4a59619f52b316cb58bb8260345fe2421a06 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 23:07:56 +0530 Subject: [PATCH 11/19] Refactored names, clean up and comments --- src/libs/actions/PaymentMethods.js | 5 +++-- .../settings/Payments/ChooseTransferAccountPage.js | 13 ++----------- src/pages/settings/Payments/TransferBalancePage.js | 1 - 3 files changed, 5 insertions(+), 14 deletions(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index ae7dde2e24d2..07ed01811b14 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -163,11 +163,12 @@ function saveWalletTransferAmount(transferAmount) { /** * @param {String} selectedAccountID */ -function saveWalletTransferAccount(selectedAccountID) { +function saveWalletTransferAccountID(selectedAccountID) { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountID}); } /** + * Toggles the user's selected type of payment method (bank account or debit card) on the wallet transfer balance screen. * @param {String} filterPaymentMethodType */ function saveWalletTransferMethodType(filterPaymentMethodType) { @@ -187,7 +188,7 @@ export { transferWalletBalance, resetWalletTransferData, saveWalletTransferAmount, - saveWalletTransferAccount, + saveWalletTransferAccountID, saveWalletTransferMethodType, dismissWalletConfirmModal, }; diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index 7bca746941b4..8f373da72dbc 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -22,25 +22,21 @@ const propTypes = { /** Wallet transfer propTypes */ walletTransfer: walletTransferPropTypes, - /** Are we loading payment methods? */ - isLoadingPaymentMethods: PropTypes.bool, - ...withLocalizePropTypes, }; const defaultProps = { walletTransfer: {}, - isLoadingPaymentMethods: false, }; const ChooseTransferAccountPage = (props) => { /** - * Go back to TransferPage with the selected bank account + * Go back to transfer balance screen with the selected bank account set * @param {Object} event Click event object * @param {String} accountID of the selected account. */ const selectAccountAndNavigateBack = (event, accountID) => { - PaymentMethods.saveWalletTransferAccount(accountID); + PaymentMethods.saveWalletTransferAccountID(accountID); Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); }; @@ -79,7 +75,6 @@ const ChooseTransferAccountPage = (props) => { ? props.translate('paymentMethodList.addNewBankAccount') : props.translate('paymentMethodList.addNewDebitCard')} icon={Expensicons.Plus} - disabled={props.isLoadingPaymentMethods} /> @@ -96,9 +91,5 @@ export default compose( walletTransfer: { key: ONYXKEYS.WALLET_TRANSFER, }, - isLoadingPaymentMethods: { - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - initWithStoredValues: false, - }, }), )(ChooseTransferAccountPage); diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 3343c2023f23..881270b8b00b 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -132,7 +132,6 @@ class TransferBalancePage extends React.Component { } render() { - this.props.userWallet.currentBalance = 125; const selectedAccount = this.getSelectedPaymentMethodAccount(); const selectedPaymentType = selectedAccount && selectedAccount.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.WALLET.TRANSFER_METHOD_TYPE.ACH From c43bd3aa075c814c0978636422a3e65e2b5c7f72 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 13 Jan 2022 23:32:56 +0530 Subject: [PATCH 12/19] remove unused imports --- src/pages/settings/Payments/ChooseTransferAccountPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index 8f373da72dbc..fe6f22449be2 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -1,7 +1,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import {View} from 'react-native'; -import PropTypes from 'prop-types'; import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; import Navigation from '../../../libs/Navigation/Navigation'; From 0136230534129b25da4aebc440ea93c151eb3a28 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 14 Jan 2022 07:12:13 +0530 Subject: [PATCH 13/19] rename and props correction --- src/libs/API.js | 4 ++-- src/libs/actions/PaymentMethods.js | 2 +- src/pages/settings/Payments/ChooseTransferAccountPage.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/libs/API.js b/src/libs/API.js index b1fb0288644a..7e7f21c9f2fa 100644 --- a/src/libs/API.js +++ b/src/libs/API.js @@ -1151,7 +1151,7 @@ function CreatePolicyRoom(parameters) { * @param {String} [parameters.fundID] * @returns {Promise} */ -function Wallet_TransferBalance(parameters) { +function TransferWalletBalance(parameters) { const commandName = 'TransferWalletBalance'; if (!parameters.bankAccountID && !parameters.fundID) { throw new Error('Must pass either bankAccountID or fundID to TransferWalletBalance'); @@ -1218,7 +1218,7 @@ export { ValidateEmail, Wallet_Activate, Wallet_GetOnfidoSDKToken, - Wallet_TransferBalance, + TransferWalletBalance, GetLocalCurrency, GetCurrencyList, Policy_Create, diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 07ed01811b14..6abd9ab576ce 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -130,7 +130,7 @@ function transferWalletBalance(paymentMethod) { }; Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {loading: true}); - API.Wallet_TransferBalance(parameters) + API.TransferWalletBalance(parameters) .then((response) => { if (response.jsonCode !== 200) { throw new Error(response.message); diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index fe6f22449be2..aa5ef065e321 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -43,7 +43,7 @@ const ChooseTransferAccountPage = (props) => { * @param {String} paymentType */ const navigateToAddPaymentMethodPage = () => { - if (props.filterType === CONST.PAYMENT_METHODS.DEBIT_CARD) { + if (props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) { Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD); return; } From 7751d73d13c17a9743c89ccada76780c28f522f3 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Sat, 15 Jan 2022 10:29:06 +0530 Subject: [PATCH 14/19] select default account --- src/pages/settings/Payments/TransferBalancePage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 881270b8b00b..d32675553641 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -98,6 +98,8 @@ class TransferBalancePage extends React.Component { ]; PaymentMethods.resetWalletTransferData(); + const selectedAccount = this.getSelectedPaymentMethodAccount(); + PaymentMethods.saveWalletTransferAccountID(selectedAccount ? selectedAccount.methodID : ''); } /** From cd1ddbaad2b81e8f98700815bf13d54cfda5fc49 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 18 Jan 2022 23:10:28 +0530 Subject: [PATCH 15/19] Adopt changes from latest changes --- src/libs/PaymentUtils.js | 2 +- src/libs/actions/PaymentMethods.js | 8 ++++--- .../Payments/ChooseTransferAccountPage.js | 12 ++++++++--- .../settings/Payments/TransferBalancePage.js | 21 +++++++++++++------ 4 files changed, 30 insertions(+), 13 deletions(-) diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index f80ae10a13be..b0eb4cafd6d1 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -65,7 +65,7 @@ function formatPaymentMethods(bankAccountList, cardList, payPalMeUsername = '', combinedPaymentMethods.push({ title: card.addressName, description: formattedCardNumber, - methodID: card.cardNumber, + methodID: card.fundID, icon, iconSize, key: `card-${card.cardNumber}`, diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 4c308bd1ba61..500ecaef3928 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -211,6 +211,7 @@ function transferWalletBalance(paymentMethod) { function resetWalletTransferData() { Onyx.merge(ONYXKEYS.WALLET_TRANSFER, { + selectedAccountType: '', selectedAccountID: null, filterPaymentMethodType: null, loading: false, @@ -226,10 +227,11 @@ function saveWalletTransferAmount(transferAmount) { } /** + * @param {String} selectedAccountType * @param {String} selectedAccountID */ -function saveWalletTransferAccountID(selectedAccountID) { - Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountID}); +function saveWalletTransferAccountTypeAndID(selectedAccountType, selectedAccountID) { + Onyx.merge(ONYXKEYS.WALLET_TRANSFER, {selectedAccountType, selectedAccountID}); } /** @@ -256,7 +258,7 @@ export { transferWalletBalance, resetWalletTransferData, saveWalletTransferAmount, - saveWalletTransferAccountID, + saveWalletTransferAccountTypeAndID, saveWalletTransferMethodType, dismissWalletConfirmModal, }; diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index aa5ef065e321..b1d878340048 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -32,10 +32,16 @@ const ChooseTransferAccountPage = (props) => { /** * Go back to transfer balance screen with the selected bank account set * @param {Object} event Click event object - * @param {String} accountID of the selected account. + * @param {String} accountType of the selected account type + * @param {Object} account of the selected account data */ - const selectAccountAndNavigateBack = (event, accountID) => { - PaymentMethods.saveWalletTransferAccountID(accountID); + const selectAccountAndNavigateBack = (event, accountType, account) => { + PaymentMethods.saveWalletTransferAccountTypeAndID( + accountType, + accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT + ? account.bankAccountID + : account.fundID, + ); Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); }; diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index d32675553641..20919bae680c 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -3,7 +3,6 @@ import React from 'react'; import {View, ScrollView} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; -import lodashGet from 'lodash/get'; import ONYXKEYS from '../../../ONYXKEYS'; import HeaderWithCloseButton from '../../../components/HeaderWithCloseButton'; import ScreenWrapper from '../../../components/ScreenWrapper'; @@ -99,7 +98,14 @@ class TransferBalancePage extends React.Component { PaymentMethods.resetWalletTransferData(); const selectedAccount = this.getSelectedPaymentMethodAccount(); - PaymentMethods.saveWalletTransferAccountID(selectedAccount ? selectedAccount.methodID : ''); + if (!selectedAccount) { + return; + } + + PaymentMethods.saveWalletTransferAccountTypeAndID( + selectedAccount.accountType, + selectedAccount.methodID, + ); } /** @@ -110,10 +116,13 @@ class TransferBalancePage extends React.Component { const paymentMethods = PaymentUtils.formatPaymentMethods( this.props.bankAccountList, this.props.cardList, + '', + this.props.userWallet, ); - const accountID = this.props.walletTransfer.selectedAccountID || lodashGet(this.props, 'userWallet.walletLinkedAccountID', ''); - return _.find(paymentMethods, method => method.methodID === accountID); + return _.find(paymentMethods, method => (method.accountType === this.props.walletTransfer.selectedAccountType + && method.methodID === this.props.walletTransfer.selectedAccountID) + || method.isDefault); } /** @@ -135,7 +144,7 @@ class TransferBalancePage extends React.Component { render() { const selectedAccount = this.getSelectedPaymentMethodAccount(); - const selectedPaymentType = selectedAccount && selectedAccount.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT + const selectedPaymentType = selectedAccount && selectedAccount.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.WALLET.TRANSFER_METHOD_TYPE.ACH : CONST.WALLET.TRANSFER_METHOD_TYPE.INSTANT; @@ -194,7 +203,7 @@ class TransferBalancePage extends React.Component { ...styles.mrn5, ...styles.ph0, }} - onPress={() => this.navigateToChooseTransferAccount(selectedAccount.type)} + onPress={() => this.navigateToChooseTransferAccount(selectedAccount.accountType)} /> )} Date: Tue, 18 Jan 2022 23:16:24 +0530 Subject: [PATCH 16/19] fix: PaymentMethodlist filtering --- src/pages/settings/Payments/PaymentMethodList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index cb96b081113a..8a851e7dcf26 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -93,7 +93,7 @@ class PaymentMethodList extends Component { let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername, this.props.userWallet); if (!_.isEmpty(this.props.filterType)) { - combinedPaymentMethods = _.filter(combinedPaymentMethods, paymentMethod => paymentMethod.type === this.props.filterType); + combinedPaymentMethods = _.filter(combinedPaymentMethods, paymentMethod => paymentMethod.accountType === this.props.filterType); } combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({ From 8eacf333742ab080c90edfe627cd5d46da55e9a1 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 18 Jan 2022 23:22:23 +0530 Subject: [PATCH 17/19] more refactoring --- src/libs/actions/PaymentMethods.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 500ecaef3928..94a1b6cedb6f 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -184,10 +184,10 @@ function clearDebitCardFormErrorAndSubmit() { * Call the API to transfer wallet balance. * @param {Object} paymentMethod * @param {*} paymentMethod.methodID - * @param {String} paymentMethod.type + * @param {String} paymentMethod.accountType */ function transferWalletBalance(paymentMethod) { - const paymentMethodIDKey = paymentMethod.type === CONST.PAYMENT_METHODS.BANK_ACCOUNT + const paymentMethodIDKey = paymentMethod.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? CONST.PAYMENT_METHOD_ID_KEYS.BANK_ACCOUNT : CONST.PAYMENT_METHOD_ID_KEYS.DEBIT_CARD; const parameters = { From 39b6327f2042dcb5aab2193962e9d20c1722ac34 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 18 Jan 2022 23:41:18 +0530 Subject: [PATCH 18/19] preselect default account --- src/pages/settings/Payments/TransferBalancePage.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 20919bae680c..117a22a1cfa7 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -98,7 +98,10 @@ class TransferBalancePage extends React.Component { PaymentMethods.resetWalletTransferData(); const selectedAccount = this.getSelectedPaymentMethodAccount(); - if (!selectedAccount) { + + // Select the default payment account when page is opened, + // so that user can see that preselected on choose transfer account page + if (!selectedAccount || !selectedAccount.isDefault) { return; } From 0043cecd96658cd667603e2d431b7d39807dd9b7 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Fri, 21 Jan 2022 07:12:11 +0530 Subject: [PATCH 19/19] Fix code to get the selected Account --- src/pages/settings/Payments/TransferBalancePage.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/pages/settings/Payments/TransferBalancePage.js b/src/pages/settings/Payments/TransferBalancePage.js index 89635d9ecf73..52a2dfef84de 100644 --- a/src/pages/settings/Payments/TransferBalancePage.js +++ b/src/pages/settings/Payments/TransferBalancePage.js @@ -123,9 +123,13 @@ class TransferBalancePage extends React.Component { this.props.userWallet, ); - return _.find(paymentMethods, method => (method.accountType === this.props.walletTransfer.selectedAccountType - && method.methodID === this.props.walletTransfer.selectedAccountID) - || method.isDefault); + const defaultAccount = _.find(paymentMethods, method => method.isDefault); + const selectedAccount = _.find( + paymentMethods, + method => method.accountType === this.props.walletTransfer.selectedAccountType + && method.methodID === this.props.walletTransfer.selectedAccountID, + ); + return selectedAccount || defaultAccount; } /**