diff --git a/src/components/AddPlaidBankAccount.js b/src/components/AddPlaidBankAccount.js index 96fa3dee7559..8baf4a7a9670 100644 --- a/src/components/AddPlaidBankAccount.js +++ b/src/components/AddPlaidBankAccount.js @@ -50,6 +50,9 @@ const propTypes = { /** Are we adding a withdrawal account? */ allowDebit: PropTypes.bool, + /** Any error we want to show? */ + errorText: PropTypes.string, + ...withLocalizePropTypes, }; @@ -69,6 +72,7 @@ const defaultProps = { plaidLinkOAuthToken: '', allowDebit: false, bankAccountID: 0, + errorText: '', }; class AddPlaidBankAccount extends React.Component { @@ -192,6 +196,7 @@ class AddPlaidBankAccount extends React.Component { label: this.props.translate('bankAccount.chooseAnAccount'), } : {}} value={selectedPlaidBankAccount.plaidAccountID} + errorText={this.props.errorText} /> diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js index a5f59ded8036..8f756409c9ee 100644 --- a/src/components/KYCWall/BaseKYCWall.js +++ b/src/components/KYCWall/BaseKYCWall.js @@ -135,6 +135,10 @@ class KYCWall extends React.Component { onItemSelected={(item) => { this.setState({shouldShowAddPaymentMenu: false}); if (item === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { + // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data + PaymentMethods.clearPersonalBankAccount(); + PaymentMethods.clearPlaid(); + Navigation.navigate(this.props.addBankAccountRoute); } else if (item === CONST.PAYMENT_METHODS.DEBIT_CARD) { Navigation.navigate(this.props.addDebitCardRoute); diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js index a323893a1fc6..ac611fde7210 100644 --- a/src/components/MenuItem.js +++ b/src/components/MenuItem.js @@ -37,6 +37,7 @@ const defaultProps = { iconFill: undefined, focused: false, disabled: false, + isPending: false, isSelected: false, subtitle: undefined, iconType: 'icon', @@ -76,7 +77,7 @@ const MenuItem = (props) => { > {({hovered, pressed}) => ( <> - + {(props.icon && props.iconType === CONST.ICON_TYPE_ICON) && ( `Transfer${amount ? ` ${amount}` : ''}`, @@ -588,6 +588,8 @@ export default { chooseAccountLabel: 'Account', successTitle: 'Personal bank account added!', successMessage: 'Congrats, your bank account is set up and ready to receive reimbursements.', + passwordRequired: 'Please enter a password', + plaidBankAccountRequired: 'Please select a bank account', }, attachmentView: { unknownFilename: 'Unknown filename', diff --git a/src/languages/es.js b/src/languages/es.js index 9fee9c421a5a..bc8e6323415d 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -588,6 +588,8 @@ export default { chooseAccountLabel: 'Cuenta', successTitle: '¡Cuenta bancaria personal añadida!', successMessage: 'Enhorabuena, tu cuenta bancaria está lista para recibir reembolsos.', + passwordRequired: 'Por favor introduce tu contraseña', + plaidBankAccountRequired: 'Por favor seleccione una cuenta bancaria', }, attachmentView: { unknownFilename: 'Archivo desconocido', diff --git a/src/libs/PaymentUtils.js b/src/libs/PaymentUtils.js index a74a9be3c46a..7abd2810832e 100644 --- a/src/libs/PaymentUtils.js +++ b/src/libs/PaymentUtils.js @@ -85,7 +85,7 @@ function calculateWalletTransferBalanceFee(currentBalance, methodType) { } export { - hasExpensifyPaymentMethod, - formatPaymentMethods, calculateWalletTransferBalanceFee, + formatPaymentMethods, + hasExpensifyPaymentMethod, }; diff --git a/src/libs/actions/BankAccounts.js b/src/libs/actions/BankAccounts.js index f1fad43a63a9..da124ce72556 100644 --- a/src/libs/actions/BankAccounts.js +++ b/src/libs/actions/BankAccounts.js @@ -4,6 +4,9 @@ import * as API from '../API'; import ONYXKEYS from '../../ONYXKEYS'; import * as Localize from '../Localize'; import DateUtils from '../DateUtils'; +import Navigation from '../Navigation/Navigation'; +import ROUTES from '../../ROUTES'; +import * as NetworkStore from '../Network/NetworkStore'; export { setupWithdrawalAccount, @@ -31,10 +34,6 @@ export { acceptWalletTerms, } from './Wallet'; -function clearPersonalBankAccount() { - Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {}); -} - function clearPlaid() { Onyx.set(ONYXKEYS.PLAID_DATA, {}); Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, ''); @@ -116,7 +115,6 @@ function connectBankAccountWithPlaid(bankAccountID, selectedPlaidBankAccount) { * * @param {Object} account * @param {String} password - * @TODO offline pattern for this command will have to be added later once the pattern B design doc is complete */ function addPersonalBankAccount(account, password) { const commandName = 'AddPersonalBankAccount'; @@ -131,6 +129,7 @@ function addPersonalBankAccount(account, password) { plaidAccountID: account.plaidAccountID, plaidAccessToken: account.plaidAccessToken, password, + isPending: true, }; const onyxData = { @@ -139,8 +138,10 @@ function addPersonalBankAccount(account, password) { onyxMethod: CONST.ONYX.METHOD.MERGE, key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, value: { + errors: null, + errorFields: null, + selectedPlaidAccountID: parameters.plaidAccountID, isLoading: true, - error: '', }, }, ], @@ -150,10 +151,19 @@ function addPersonalBankAccount(account, password) { key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, value: { isLoading: false, - error: '', shouldShowSuccess: true, }, }, + { + onyxMethod: CONST.ONYX.METHOD.SET, + key: ONYXKEYS.PLAID_DATA, + value: {}, + }, + { + onyxMethod: CONST.ONYX.METHOD.SET, + key: ONYXKEYS.PLAID_LINK_TOKEN, + value: '', + }, ], failureData: [ { @@ -161,12 +171,52 @@ function addPersonalBankAccount(account, password) { key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, value: { isLoading: false, - error: Localize.translateLocal('paymentsPage.addBankAccountFailure'), }, }, ], }; + if (NetworkStore.isOffline()) { + // If offline, Optimistically go to the list of bank accounts + Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); + + // And build Onyx Data for pattern B + onyxData.optimisticData = onyxData.optimisticData.concat({ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.BANK_ACCOUNT_LIST, + value: { + 0: { + title: account.addressName, + description: `${Localize.translateLocal('paymentMethodList.accountLastFour')} ${account.accountNumber.slice(-4)}`, + methodID: 0, + key: 'bankAccount-0', + accountType: CONST.PAYMENT_METHODS.BANK_ACCOUNT, + accountData: {...account, bankAccountID: 0}, + errors: null, + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD, + }, + }, + }); + onyxData.successData = onyxData.successData.concat({ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.BANK_ACCOUNT_LIST, + value: { + 0: null, + }, + }); + onyxData.failureData = onyxData.failureData.concat({ + onyxMethod: CONST.ONYX.METHOD.MERGE, + key: ONYXKEYS.BANK_ACCOUNT_LIST, + value: { + 0: { + errors: { + [DateUtils.getMicroseconds()]: Localize.translateLocal('paymentsPage.addBankAccountFailure'), + }, + }, + }, + }); + } + API.write(commandName, parameters, onyxData); } @@ -178,7 +228,11 @@ function deletePaymentBankAccount(bankAccountID) { { onyxMethod: CONST.ONYX.METHOD.MERGE, key: `${ONYXKEYS.BANK_ACCOUNT_LIST}`, - value: {[bankAccountID]: {pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE}}, + value: { + [bankAccountID]: { + pendingAction: CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + }, + }, }, ], }); @@ -295,7 +349,6 @@ export { addPersonalBankAccount, connectBankAccountManually, deletePaymentBankAccount, - clearPersonalBankAccount, clearPlaid, clearOnfido, updatePersonalInformationForBankAccount, diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 017bdf785f49..7e8842cfd5bf 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -370,6 +370,46 @@ function deletePaymentCard(fundID) { }); } +function navigateToAddPaymentMethodPage(paymentType, allowPaypalPaymentTypes = true) { + // We don't always show Paypal as an option + if (paymentType === CONST.PAYMENT_METHODS.PAYPAL && allowPaypalPaymentTypes) { + Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME); + return; + } + + if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) { + Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD); + return; + } + + if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { + // If we are adding a new bank account and starting over, clear all plaid data, tokens, and saved personal bank account data + this.clearPersonalBankAccount(); + this.clearPlaid(); + + Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); + return; + } + + throw new Error('Invalid payment method type selected'); +} + +function clearBankAccountPendingAdd() { + Onyx.merge(ONYXKEYS.BANK_ACCOUNT_LIST, { + 0: null, + }); +} + +function clearPersonalBankAccount() { + Onyx.set(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {}); + clearBankAccountPendingAdd(); +} + +function clearPlaid() { + Onyx.set(ONYXKEYS.PLAID_DATA, {}); + Onyx.set(ONYXKEYS.PLAID_LINK_TOKEN, ''); +} + export { deletePayPalMe, deletePaymentCard, @@ -390,5 +430,9 @@ export { clearDeletePaymentMethodError, clearAddPaymentMethodError, clearWalletError, + navigateToAddPaymentMethodPage, + clearPersonalBankAccount, + clearBankAccountPendingAdd, + clearPlaid, clearWalletTermsError, }; diff --git a/src/libs/actions/ReimbursementAccount/errors.js b/src/libs/actions/ReimbursementAccount/errors.js index 3427524711c2..1bdeefb9f2e2 100644 --- a/src/libs/actions/ReimbursementAccount/errors.js +++ b/src/libs/actions/ReimbursementAccount/errors.js @@ -12,6 +12,14 @@ function setPersonalBankAccountFormValidationErrorFields(errorFields) { Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errorFields}); } +/** + * Clear validation messages from personal bank account + */ +function resetPersonalBankAccountErrors() { + setPersonalBankAccountFormValidationErrorFields({}); + Onyx.merge(ONYXKEYS.PERSONAL_BANK_ACCOUNT, {errors: null}); +} + /** * Set the current fields with errors. * @@ -49,4 +57,5 @@ export { setPersonalBankAccountFormValidationErrorFields, showBankAccountFormValidationError, resetReimbursementAccount, + resetPersonalBankAccountErrors, }; diff --git a/src/libs/actions/ReimbursementAccount/index.js b/src/libs/actions/ReimbursementAccount/index.js index 5bc9e3ea562a..563c01e686e1 100644 --- a/src/libs/actions/ReimbursementAccount/index.js +++ b/src/libs/actions/ReimbursementAccount/index.js @@ -9,6 +9,7 @@ export {goToWithdrawalAccountSetupStep, navigateToBankAccountRoute} from './navi export { setBankAccountFormValidationErrors, setPersonalBankAccountFormValidationErrorFields, + resetPersonalBankAccountErrors, resetReimbursementAccount, showBankAccountFormValidationError, } from './errors'; diff --git a/src/pages/AddPersonalBankAccountPage.js b/src/pages/AddPersonalBankAccountPage.js index 17bc7cea68a2..53184c67c213 100644 --- a/src/pages/AddPersonalBankAccountPage.js +++ b/src/pages/AddPersonalBankAccountPage.js @@ -3,7 +3,6 @@ import React from 'react'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; 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'; @@ -19,22 +18,22 @@ import * as Illustrations from '../components/Icon/Illustrations'; import Icon from '../components/Icon'; import defaultTheme from '../styles/themes/default'; import Button from '../components/Button'; -import FixedFooter from '../components/FixedFooter'; import FormScrollView from '../components/FormScrollView'; -import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton'; import FormHelper from '../libs/FormHelper'; import * as ReimbursementAccount from '../libs/actions/ReimbursementAccount'; import TextInput from '../components/TextInput'; import canFocusInputOnScreenFocus from '../libs/canFocusInputOnScreenFocus/index.native'; +import personalBankAccountPropTypes from '../components/personalBankAccountPropTypes'; +import {withNetwork} from '../components/OnyxProvider'; +import FormAlertWithSubmitButton from '../components/FormAlertWithSubmitButton'; +import * as PaymentMethods from '../libs/actions/PaymentMethods'; +import FixedFooter from '../components/FixedFooter'; import ROUTES from '../ROUTES'; +import * as ErrorUtils from '../libs/ErrorUtils'; const propTypes = { ...withLocalizePropTypes, - personalBankAccount: PropTypes.shape({ - error: PropTypes.string, - shouldShowSuccess: PropTypes.bool, - isLoading: PropTypes.bool, - }), + personalBankAccount: personalBankAccountPropTypes, }; const defaultProps = { @@ -55,7 +54,6 @@ class AddPersonalBankAccountPage extends React.Component { this.submit = this.submit.bind(this); this.state = { - selectedPlaidBankAccount: undefined, password: '', }; @@ -63,10 +61,11 @@ class AddPersonalBankAccountPage extends React.Component { errorPath: 'personalBankAccount.errorFields', setErrors: errorFields => ReimbursementAccount.setPersonalBankAccountFormValidationErrorFields(errorFields), }); - } - componentDidMount() { - BankAccounts.clearPersonalBankAccount(); + this.errorTranslationKeys = { + selectedBank: 'addPersonalBankAccountPage.plaidBankAccountRequired', + password: 'addPersonalBankAccountPage.passwordRequired', + }; } /** @@ -101,11 +100,11 @@ class AddPersonalBankAccountPage extends React.Component { */ validate() { const errors = {}; - if (_.isUndefined(this.state.selectedPlaidBankAccount)) { + if (_.isEmpty(lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {}))) { errors.selectedBank = true; } - if (this.props.isPasswordRequired && _.isEmpty(this.state.password)) { + if (_.isEmpty(this.state.password)) { errors.password = true; } @@ -114,23 +113,29 @@ class AddPersonalBankAccountPage extends React.Component { } submit() { + ReimbursementAccount.resetPersonalBankAccountErrors(); if (!this.validate()) { return; } - BankAccounts.addPersonalBankAccount(this.state.selectedPlaidBankAccount, this.state.password); + BankAccounts.addPersonalBankAccount(this.props.plaidData.selectedPlaidBankAccount, this.state.password); } render() { + const selectedPlaidBankAccount = lodashGet(this.props, 'plaidData.selectedPlaidBankAccount', {}); + const hasPlaidBankAccounts = !_.isEmpty(lodashGet(this.props, 'plaidData.bankAccounts')); const shouldShowSuccess = lodashGet(this.props, 'personalBankAccount.shouldShowSuccess', false); - const error = lodashGet(this.props, 'personalBankAccount.error', ''); const isLoading = lodashGet(this.props, 'personalBankAccount.isLoading', false); + const error = ErrorUtils.getLatestErrorMessage(this.props.personalBankAccount); return ( { + PaymentMethods.clearPersonalBankAccount(); + Navigation.goBack(); + }} shouldShowBackButton onBackButtonPress={Navigation.goBack} /> @@ -163,44 +168,51 @@ class AddPersonalBankAccountPage extends React.Component { ) : ( - - - { - this.setState({ - selectedPlaidBankAccount: params.selectedPlaidBankAccount, - }); - }} - onExitPlaid={Navigation.goBack} - receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} - /> - {!_.isUndefined(this.state.selectedPlaidBankAccount) && ( - - this.setState({password: text})} - errorText={this.getErrorText('password')} - hasError={this.getErrors().password} - /> - - )} - - {!_.isUndefined(this.state.selectedPlaidBankAccount) && ( + <> + + + { + this.clearError('selectedBank'); + BankAccounts.updatePlaidData({selectedPlaidBankAccount: params.selectedPlaidBankAccount}); + }} + onExitPlaid={Navigation.goBack} + receivedRedirectURI={getPlaidOAuthReceivedRedirectURI()} + selectedPlaidAccountID={selectedPlaidBankAccount.plaidAccountID} + errorText={this.getErrors().selectedBank ? this.getErrorText('selectedBank') : ''} + /> + {hasPlaidBankAccounts && ( + + { + this.setState({password: text}); + this.clearError('password'); + }} + errorText={this.getErrorText('password')} + hasError={this.getErrors().password} + /> + + )} + + + {hasPlaidBankAccounts && ( )} - + )} ); @@ -212,7 +224,11 @@ AddPersonalBankAccountPage.defaultProps = defaultProps; export default compose( withLocalize, + withNetwork(), withOnyx({ + plaidData: { + key: ONYXKEYS.PLAID_DATA, + }, personalBankAccount: { key: ONYXKEYS.PERSONAL_BANK_ACCOUNT, }, diff --git a/src/pages/ReimbursementAccount/plaidDataPropTypes.js b/src/pages/ReimbursementAccount/plaidDataPropTypes.js index ae4f3b896b4c..7bafaebf4ebc 100644 --- a/src/pages/ReimbursementAccount/plaidDataPropTypes.js +++ b/src/pages/ReimbursementAccount/plaidDataPropTypes.js @@ -18,6 +18,9 @@ export default PropTypes.shape({ /** Name of account */ addressName: PropTypes.string, + /** Name of the bank */ + bankName: PropTypes.string, + /** Is the account a savings account? */ isSavings: PropTypes.bool, @@ -34,3 +37,4 @@ export default PropTypes.shape({ plaidAccessToken: PropTypes.string, })), }); + diff --git a/src/pages/settings/InitialSettingsPage.js b/src/pages/settings/InitialSettingsPage.js index b70beb2a9e33..94dacb3c0932 100755 --- a/src/pages/settings/InitialSettingsPage.js +++ b/src/pages/settings/InitialSettingsPage.js @@ -162,7 +162,8 @@ class InitialSettingsPage extends React.Component { translationKey: 'common.payments', icon: Expensicons.Wallet, action: () => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS); }, - brickRoadIndicator: PaymentMethods.hasPaymentMethodError(this.props.bankAccountList, this.props.cardList) || !_.isEmpty(this.props.userWallet.errors) + brickRoadIndicator: PaymentMethods.hasPaymentMethodError(this.props.bankAccountList, this.props.cardList) + || !_.isEmpty(this.props.userWallet.errors) || !_.isEmpty(this.props.walletTerms.errors) ? 'error' : null, }, { diff --git a/src/pages/settings/Payments/ChooseTransferAccountPage.js b/src/pages/settings/Payments/ChooseTransferAccountPage.js index 99d0b1fe2623..b6cf9e63196c 100644 --- a/src/pages/settings/Payments/ChooseTransferAccountPage.js +++ b/src/pages/settings/Payments/ChooseTransferAccountPage.js @@ -44,17 +44,6 @@ const ChooseTransferAccountPage = (props) => { Navigation.navigate(ROUTES.SETTINGS_PAYMENTS_TRANSFER_BALANCE); }; - /** - * @param {String} paymentType - */ - const navigateToAddPaymentMethodPage = () => { - if (props.walletTransfer.filterPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) { - Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD); - return; - } - Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); - }; - return ( { /> ({ ...paymentMethod, - onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID), + onPress: e => this.props.onPress( + e, + paymentMethod.accountType, + paymentMethod.accountData, + paymentMethod.isDefault, + paymentMethod.methodID, + paymentMethod.pendingAction, + paymentMethod.errors, + ), iconFill: this.isPaymentMethodActive(paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null, wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, })); @@ -167,11 +175,13 @@ class PaymentMethodList extends Component { * @return {React.Component} */ renderItem({item}) { + const isPendingAdd = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD; + return ( this.dismissError(item)} pendingAction={item.pendingAction} - errors={item.errors} + errors={!isPendingAdd ? item.errors : {}} errorRowStyles={styles.ph6} > ); diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index ef6bf593440f..8c8c05737c1e 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -55,7 +55,6 @@ class BasePaymentsPage extends React.Component { }; this.paymentMethodPressed = this.paymentMethodPressed.bind(this); - this.addPaymentMethodTypePressed = this.addPaymentMethodTypePressed.bind(this); this.hideAddPaymentMenu = this.hideAddPaymentMenu.bind(this); this.hideDefaultDeleteMenu = this.hideDefaultDeleteMenu.bind(this); this.makeDefaultPaymentMethod = this.makeDefaultPaymentMethod.bind(this); @@ -123,8 +122,10 @@ class BasePaymentsPage extends React.Component { * @param {String} account * @param {Boolean} isDefault * @param {String|Number} methodID + * @param {String} pendingAction + * @param {Object} errors */ - paymentMethodPressed(nativeEvent, accountType, account, isDefault, methodID) { + paymentMethodPressed(nativeEvent, accountType, account, isDefault, methodID, pendingAction, errors) { const position = getClickedTargetLocation(nativeEvent.currentTarget); this.setState({ addPaymentMethodButton: nativeEvent.currentTarget, @@ -141,6 +142,16 @@ class BasePaymentsPage extends React.Component { type: CONST.PAYMENT_METHODS.PAYPAL, }; } else if (accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { + // If the bank account is pending creation, direct the user to complete setting up their personal bank account + if (pendingAction) { + const hasPendingAddError = pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && !_.isEmpty(errors); + if (hasPendingAddError) { + PaymentMethods.clearBankAccountPendingAdd(); + Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); + } + return; + } + formattedSelectedPaymentMethod = { title: account.addressName, icon: account.icon, @@ -173,32 +184,6 @@ class BasePaymentsPage extends React.Component { this.setPositionAddPaymentMenu(position); } - /** - * Navigate to the appropriate payment type addition screen - * - * @param {String} paymentType - */ - addPaymentMethodTypePressed(paymentType) { - this.hideAddPaymentMenu(); - - if (paymentType === CONST.PAYMENT_METHODS.PAYPAL) { - Navigation.navigate(ROUTES.SETTINGS_ADD_PAYPAL_ME); - return; - } - - if (paymentType === CONST.PAYMENT_METHODS.DEBIT_CARD) { - Navigation.navigate(ROUTES.SETTINGS_ADD_DEBIT_CARD); - return; - } - - if (paymentType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) { - Navigation.navigate(ROUTES.SETTINGS_ADD_BANK_ACCOUNT); - return; - } - - throw new Error('Invalid payment method type selected'); - } - fetchData() { PaymentMethods.openPaymentsPage(); } @@ -329,7 +314,10 @@ class BasePaymentsPage extends React.Component { bottom: this.state.anchorPositionBottom, right: this.state.anchorPositionRight - 10, }} - onItemSelected={method => this.addPaymentMethodTypePressed(method)} + onItemSelected={(item) => { + this.hideAddPaymentMenu(); + PaymentMethods.navigateToAddPaymentMethodPage(item); + }} />