diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index c49a34852c1d4..66b593a328daf 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -3,7 +3,6 @@ import {createRef} from 'react'; import lodashGet from 'lodash/get'; import Onyx from 'react-native-onyx'; import ONYXKEYS from '../../ONYXKEYS'; -import * as DeprecatedAPI from '../deprecatedAPI'; import * as API from '../API'; import CONST from '../../CONST'; import Growl from '../Growl'; @@ -51,36 +50,6 @@ function cleanLocalReimbursementData(bankAccounts) { } } -/** - * Calls the API to get the user's bankAccountList, cardList, wallet, and payPalMe - * - * @returns {Promise} - */ -function getPaymentMethods() { - Onyx.set(ONYXKEYS.IS_LOADING_PAYMENT_METHODS, true); - return DeprecatedAPI.Get({ - returnValueList: 'bankAccountList, fundList, userWallet, nameValuePairs', - name: 'paypalMeAddress', - includeDeleted: false, - includeNotIssued: false, - excludeNotActivated: true, - }) - .then((response) => { - // Convert bank accounts/cards from an array of objects, to a map with the bankAccountID as the key - const bankAccounts = _.object(_.map(lodashGet(response, 'bankAccountList', []), bankAccount => [bankAccount.bankAccountID, bankAccount])); - const debitCards = _.object(_.map(lodashGet(response, 'fundList', []), fund => [fund.fundID, fund])); - cleanLocalReimbursementData(bankAccounts); - Onyx.multiSet({ - [ONYXKEYS.IS_LOADING_PAYMENT_METHODS]: false, - [ONYXKEYS.USER_WALLET]: lodashGet(response, 'userWallet', {}), - [ONYXKEYS.BANK_ACCOUNT_LIST]: bankAccounts, - [ONYXKEYS.CARD_LIST]: debitCards, - [ONYXKEYS.NVP_PAYPAL_ME_ADDRESS]: - lodashGet(response, ['nameValuePairs', CONST.NVP.PAYPAL_ME_ADDRESS], ''), - }); - }); -} - function openPaymentsPage() { const onyxData = { optimisticData: [ @@ -379,7 +348,6 @@ function deletePaymentCard(fundID) { export { deletePayPalMe, deletePaymentCard, - getPaymentMethods, addPaymentCard, openPaymentsPage, makeDefaultPaymentMethod, diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index dec318c77134c..637ce767b0ec8 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -1,6 +1,4 @@ -import _ from 'underscore'; import React from 'react'; -import PropTypes from 'prop-types'; import {View, ScrollView} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import styles from '../../styles/styles'; @@ -16,160 +14,110 @@ import Button from '../../components/Button'; import * as Expensicons from '../../components/Icon/Expensicons'; import MenuItem from '../../components/MenuItem'; import getBankIcon from '../../components/Icon/BankIcons'; -import * as PaymentMethods from '../../libs/actions/PaymentMethods'; -import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; -import bankAccountPropTypes from '../../components/bankAccountPropTypes'; +import reimbursementAccountPropTypes from './reimbursementAccountPropTypes'; +import userPropTypes from '../settings/userPropTypes'; import Section from '../../components/Section'; import * as Illustrations from '../../components/Icon/Illustrations'; import * as BankAccounts from '../../libs/actions/BankAccounts'; import * as Link from '../../libs/actions/Link'; import * as User from '../../libs/actions/User'; -import {withNetwork} from '../../components/OnyxProvider'; -import networkPropTypes from '../../components/networkPropTypes'; const propTypes = { - /** Are we loading payment methods? */ - isLoadingPaymentMethods: PropTypes.bool, + /** Bank account currently in setup */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, - /** Information about the network */ - network: networkPropTypes.isRequired, - - /** List of bank accounts */ - bankAccountList: PropTypes.objectOf(bankAccountPropTypes), + /* Onyx Props */ + user: userPropTypes.isRequired, ...withLocalizePropTypes, }; -const defaultProps = { - isLoadingPaymentMethods: true, - bankAccountList: {}, -}; - -class EnableStep extends React.Component { - componentDidMount() { - this.fetchData(); - } - - componentDidUpdate(prevProps) { - if (!prevProps.network.isOffline || this.props.network.isOffline) { - return; - } - - this.fetchData(); - } - - fetchData() { - PaymentMethods.getPaymentMethods(); - } - - render() { - if (this.props.isLoadingPaymentMethods || _.isEmpty(this.props.bankAccountList)) { - return ( - - ); - } - - const isUsingExpensifyCard = this.props.user.isUsingExpensifyCard; - const account = _.find(this.props.bankAccountList, bankAccount => bankAccount.bankAccountID === this.props.reimbursementAccount.achData.bankAccountID); - if (!account) { - // This shouldn't happen as we can only end up here if we have successfully added a bank account. - // But in case it does we'll throw here directly so it can be caught by the error boundary. - throw new Error('Account not found in EnableStep'); - } - - const {icon, iconSize} = getBankIcon(account.additionalData.bankName); - const formattedBankAccountNumber = account.accountNumber - ? `${this.props.translate('paymentMethodList.accountLastFour')} ${ - account.accountNumber.slice(-4) - }` - : ''; - const bankName = account.addressName; +const EnableStep = (props) => { + const isUsingExpensifyCard = props.user.isUsingExpensifyCard; + const reimbursementAccount = props.reimbursementAccount.achData || {}; + const {icon, iconSize} = getBankIcon(reimbursementAccount.bankName); + const formattedBankAccountNumber = reimbursementAccount.accountNumber + ? `${props.translate('paymentMethodList.accountLastFour')} ${ + reimbursementAccount.accountNumber.slice(-4) + }` + : ''; + const bankName = reimbursementAccount.addressName; - return ( - - Navigation.goBack()} - /> - -
- + Navigation.goBack()} + /> + +
+ + + {!isUsingExpensifyCard + ? props.translate('workspace.bankAccount.accountDescriptionNoCards') + : props.translate('workspace.bankAccount.accountDescriptionWithCards')} + + {!isUsingExpensifyCard && ( +
- {this.props.user.isCheckingDomain && ( - - {this.props.translate('workspace.card.checkingDomain')} - )} -
- - ); - } -} + +
+ {props.user.isCheckingDomain && ( + + {props.translate('workspace.card.checkingDomain')} + + )} +
+
+ ); +}; +EnableStep.displayName = 'EnableStep'; EnableStep.propTypes = propTypes; -EnableStep.defaultProps = defaultProps; export default compose( withLocalize, - withNetwork(), withOnyx({ - isLoadingPaymentMethods: { - key: ONYXKEYS.IS_LOADING_PAYMENT_METHODS, - initWithStoredValues: false, - }, - user: { - key: ONYXKEYS.USER, - }, reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - bankAccountList: { - key: ONYXKEYS.BANK_ACCOUNT_LIST, - initWithStoredValues: false, + user: { + key: ONYXKEYS.USER, }, }), )(EnableStep);