From 96b73ddda86b086d3f12809e88916cf3baa7f21f Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Mon, 21 Nov 2022 15:23:43 -0800 Subject: [PATCH 1/9] remove use of payment method get --- src/pages/ReimbursementAccount/EnableStep.js | 64 +++----------------- 1 file changed, 7 insertions(+), 57 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 7c0b58bf01570..7fc188db2e1ef 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -14,9 +14,7 @@ import CONST from '../../CONST'; 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 confettiPop from '../../../assets/images/confetti-pop.gif'; import Icon from '../../components/Icon'; import Section from '../../components/Section'; @@ -28,62 +26,23 @@ import {withNetwork} from '../../components/OnyxProvider'; import networkPropTypes from '../../components/networkPropTypes'; const propTypes = { - /** Are we loading payment methods? */ - isLoadingPaymentMethods: PropTypes.bool, - /** Information about the network */ network: networkPropTypes.isRequired, - /** List of bank accounts */ - bankAccountList: PropTypes.objectOf(bankAccountPropTypes), - ...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 + const reimbursementAccount = this.props.reimbursementAccount.achData || {}; + const {icon, iconSize} = getBankIcon(reimbursementAccount.bankName); + const formattedBankAccountNumber = reimbursementAccount.accountNumber ? `${this.props.translate('paymentMethodList.accountLastFour')} ${ - account.accountNumber.slice(-4) + reimbursementAccount.accountNumber.slice(-4) }` : ''; - const bankName = account.addressName; + const bankName = reimbursementAccount.addressName; const menuItems = [{ title: this.props.translate('workspace.bankAccount.disconnectBankAccount'), icon: Expensicons.Close, @@ -146,25 +105,16 @@ class EnableStep extends React.Component { } 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); From ff3a28c70fc08e0fa4a7bdcccc0855dfb58c331d Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Mon, 21 Nov 2022 15:52:36 -0800 Subject: [PATCH 2/9] lint --- src/pages/ReimbursementAccount/EnableStep.js | 146 +++++++++---------- 1 file changed, 67 insertions(+), 79 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 7fc188db2e1ef..c495e1ecdfa71 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, Image} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import styles from '../../styles/styles'; @@ -14,7 +12,6 @@ import CONST from '../../CONST'; import * as Expensicons from '../../components/Icon/Expensicons'; import MenuItem from '../../components/MenuItem'; import getBankIcon from '../../components/Icon/BankIcons'; -import FullScreenLoadingIndicator from '../../components/FullscreenLoadingIndicator'; import confettiPop from '../../../assets/images/confetti-pop.gif'; import Icon from '../../components/Icon'; import Section from '../../components/Section'; @@ -22,93 +19,84 @@ 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 = { - /** Information about the network */ - network: networkPropTypes.isRequired, - ...withLocalizePropTypes, }; -class EnableStep extends React.Component { - render() { - const isUsingExpensifyCard = this.props.user.isUsingExpensifyCard; - const reimbursementAccount = this.props.reimbursementAccount.achData || {}; - const {icon, iconSize} = getBankIcon(reimbursementAccount.bankName); - const formattedBankAccountNumber = reimbursementAccount.accountNumber - ? `${this.props.translate('paymentMethodList.accountLastFour')} ${ - reimbursementAccount.accountNumber.slice(-4) - }` - : ''; - const bankName = reimbursementAccount.addressName; - const menuItems = [{ - title: this.props.translate('workspace.bankAccount.disconnectBankAccount'), - icon: Expensicons.Close, - onPress: BankAccounts.requestResetFreePlanBankAccount, - }]; - if (!isUsingExpensifyCard) { - menuItems.unshift({ - title: this.props.translate('workspace.bankAccount.addWorkEmail'), - icon: Expensicons.Mail, - onPress: () => { - Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL); - User.subscribeToExpensifyCardUpdates(); - }, - shouldShowRightIcon: true, - }); - } - - return ( - - Navigation.goBack()} - /> - -
(!isUsingExpensifyCard ? : )} - menuItems={menuItems} - > - - - {!isUsingExpensifyCard - ? this.props.translate('workspace.bankAccount.accountDescriptionNoCards') - : this.props.translate('workspace.bankAccount.accountDescriptionWithCards')} - -
- {this.props.user.isCheckingDomain && ( - - {this.props.translate('workspace.card.checkingDomain')} - - )} - - - ); +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; + const menuItems = [{ + title: props.translate('workspace.bankAccount.disconnectBankAccount'), + icon: Expensicons.Close, + onPress: BankAccounts.requestResetFreePlanBankAccount, + }]; + if (!isUsingExpensifyCard) { + menuItems.unshift({ + title: props.translate('workspace.bankAccount.addWorkEmail'), + icon: Expensicons.Mail, + onPress: () => { + Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL); + User.subscribeToExpensifyCardUpdates(); + }, + shouldShowRightIcon: true, + }); } -} + return ( + + Navigation.goBack()} + /> + +
(!isUsingExpensifyCard ? : )} + menuItems={menuItems} + > + + + {!isUsingExpensifyCard + ? props.translate('workspace.bankAccount.accountDescriptionNoCards') + : props.translate('workspace.bankAccount.accountDescriptionWithCards')} + +
+ {props.user.isCheckingDomain && ( + + {props.translate('workspace.card.checkingDomain')} + + )} + + + ); +}; EnableStep.propTypes = propTypes; export default compose( withLocalize, - withNetwork(), withOnyx({ reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, From f08b577d16485a58d02c10da0bb720bb2c101a8d Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Mon, 21 Nov 2022 15:59:34 -0800 Subject: [PATCH 3/9] lint 2 --- src/pages/ReimbursementAccount/EnableStep.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index c495e1ecdfa71..49a538021add6 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -24,7 +24,7 @@ const propTypes = { ...withLocalizePropTypes, }; -const EnableStep = props => { +const EnableStep = (props) => { const isUsingExpensifyCard = props.user.isUsingExpensifyCard; const reimbursementAccount = props.reimbursementAccount.achData || {}; const {icon, iconSize} = getBankIcon(reimbursementAccount.bankName); @@ -93,6 +93,7 @@ const EnableStep = props => { ); }; +EnableStep.displayName = 'EnableStep'; EnableStep.propTypes = propTypes; export default compose( From 457648e043ae076ac278cb3744e14a694ad7389b Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Tue, 22 Nov 2022 20:44:46 -0800 Subject: [PATCH 4/9] remove getpaymentmethods --- src/libs/actions/PaymentMethods.js | 31 ------------------------------ 1 file changed, 31 deletions(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index c49a34852c1d4..033c4ae5e9c3e 100644 --- a/src/libs/actions/PaymentMethods.js +++ b/src/libs/actions/PaymentMethods.js @@ -51,36 +51,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 +349,6 @@ function deletePaymentCard(fundID) { export { deletePayPalMe, deletePaymentCard, - getPaymentMethods, addPaymentCard, openPaymentsPage, makeDefaultPaymentMethod, From 1530691db1ecea8616547e5290f689b70d08a4ec Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Wed, 23 Nov 2022 11:33:14 -0800 Subject: [PATCH 5/9] fix lint --- src/libs/actions/PaymentMethods.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/libs/actions/PaymentMethods.js b/src/libs/actions/PaymentMethods.js index 033c4ae5e9c3e..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'; From 5fb6c0c608e597aab4958aa273cda6ed7b04915c Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Wed, 23 Nov 2022 11:53:44 -0800 Subject: [PATCH 6/9] add props --- src/pages/ReimbursementAccount/EnableStep.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 49a538021add6..17c363cdf9c31 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -14,6 +14,8 @@ import MenuItem from '../../components/MenuItem'; import getBankIcon from '../../components/Icon/BankIcons'; import confettiPop from '../../../assets/images/confetti-pop.gif'; import Icon from '../../components/Icon'; +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'; @@ -21,9 +23,20 @@ import * as Link from '../../libs/actions/Link'; import * as User from '../../libs/actions/User'; const propTypes = { + /** Bank account currently in setup */ + reimbursementAccount: reimbursementAccountPropTypes.isRequired, + + /* Onyx Props */ + user: userPropTypes.isRequired, + ...withLocalizePropTypes, }; +const defaultProps = { + reimbursementAccount: {}, + user: {}, +}; + const EnableStep = (props) => { const isUsingExpensifyCard = props.user.isUsingExpensifyCard; const reimbursementAccount = props.reimbursementAccount.achData || {}; @@ -93,6 +106,7 @@ const EnableStep = (props) => { ); }; +EnableStep.defaultProps = defaultProps; EnableStep.displayName = 'EnableStep'; EnableStep.propTypes = propTypes; From c64016f1bfe02b753708ec681d69dd726e8e1e70 Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Wed, 23 Nov 2022 15:30:37 -0800 Subject: [PATCH 7/9] clean up --- src/pages/ReimbursementAccount/EnableStep.js | 26 +------------------- 1 file changed, 1 insertion(+), 25 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 1c27e591a0cfd..d64f8f5ba5c3c 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import styles from '../../styles/styles'; @@ -15,8 +14,6 @@ import Button from '../../components/Button'; import * as Expensicons from '../../components/Icon/Expensicons'; import MenuItem from '../../components/MenuItem'; import getBankIcon from '../../components/Icon/BankIcons'; -import confettiPop from '../../../assets/images/confetti-pop.gif'; -import Icon from '../../components/Icon'; import reimbursementAccountPropTypes from './reimbursementAccountPropTypes'; import userPropTypes from '../settings/userPropTypes'; import Section from '../../components/Section'; @@ -35,11 +32,6 @@ const propTypes = { ...withLocalizePropTypes, }; -const defaultProps = { - reimbursementAccount: {}, - user: {}, -}; - const EnableStep = (props) => { const isUsingExpensifyCard = props.user.isUsingExpensifyCard; const reimbursementAccount = props.reimbursementAccount.achData || {}; @@ -50,22 +42,7 @@ const EnableStep = (props) => { }` : ''; const bankName = reimbursementAccount.addressName; - const menuItems = [{ - title: props.translate('workspace.bankAccount.disconnectBankAccount'), - icon: Expensicons.Close, - onPress: BankAccounts.requestResetFreePlanBankAccount, - }]; - if (!isUsingExpensifyCard) { - menuItems.unshift({ - title: props.translate('workspace.bankAccount.addWorkEmail'), - icon: Expensicons.Mail, - onPress: () => { - Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL); - User.subscribeToExpensifyCardUpdates(); - }, - shouldShowRightIcon: true, - }); - } + return ( { ); }; -EnableStep.defaultProps = defaultProps; EnableStep.displayName = 'EnableStep'; EnableStep.propTypes = propTypes; From 62791dc8f3dad4fe55c26d881285cf9012fcb28f Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Fri, 25 Nov 2022 12:21:08 -0800 Subject: [PATCH 8/9] add scroll view --- src/pages/ReimbursementAccount/EnableStep.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index d64f8f5ba5c3c..3ba45ec779b52 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import styles from '../../styles/styles'; import themeColors from '../../styles/themes/default'; @@ -53,7 +53,7 @@ const EnableStep = (props) => { shouldShowBackButton onBackButtonPress={() => Navigation.goBack()} /> - +
{ {props.translate('workspace.card.checkingDomain')} )} - + ); }; From 03689ec81c6309ececf9fee9ce7e32dc6a631a9e Mon Sep 17 00:00:00 2001 From: Kosuke Tseng Date: Fri, 25 Nov 2022 12:41:36 -0800 Subject: [PATCH 9/9] lint --- src/pages/ReimbursementAccount/EnableStep.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 3e95317f8b0f3..637ce767b0ec8 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -1,5 +1,4 @@ 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';