Skip to content

Remove use of getPaymentMethods() in EnableStep #12909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MariaHCD merged 11 commits into from
Dec 2, 2022
Merged

Remove use of getPaymentMethods() in EnableStep #12909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
96b73dd
remove use of payment method get
Nov 21, 2022
ff3a28c
lint
Nov 21, 2022
f08b577
lint 2
Nov 21, 2022
457648e
remove getpaymentmethods
Nov 23, 2022
1530691
fix lint
Nov 23, 2022
5fb6c0c
add props
Nov 23, 2022
8426603
merge main fix conflicts
Nov 23, 2022
c64016f
clean up
Nov 23, 2022
62791dc
add scroll view
Nov 25, 2022
6bad261
merge main fix conflicts again
Nov 25, 2022
03689ec
lint
Nov 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 0 additions & 32 deletions src/libs/actions/PaymentMethods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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: [
Expand Down Expand Up @@ -379,7 +348,6 @@ function deletePaymentCard(fundID) {
export {
deletePayPalMe,
deletePaymentCard,
getPaymentMethods,
addPaymentCard,
openPaymentsPage,
makeDefaultPaymentMethod,
Expand Down
212 changes: 80 additions & 132 deletions src/pages/ReimbursementAccount/EnableStep.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 (
<FullScreenLoadingIndicator />
);
}

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 (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<HeaderWithCloseButton
title={this.props.translate('workspace.common.bankAccount')}
onCloseButtonPress={Navigation.dismissModal}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
/>
<ScrollView style={[styles.flex1]}>
<Section
title={!isUsingExpensifyCard ? this.props.translate('workspace.bankAccount.oneMoreThing') : this.props.translate('workspace.bankAccount.allSet')}
icon={!isUsingExpensifyCard ? Illustrations.ConciergeNew : Illustrations.ThumbsUpStars}
>
<MenuItem
title={bankName}
description={formattedBankAccountNumber}
icon={icon}
iconWidth={iconSize}
iconHeight={iconSize}
disabled
interactive={false}
wrapperStyle={[styles.cardMenuItem, styles.mv3]}
iconFill={themeColors.success}
return (
<View style={[styles.flex1, styles.justifyContentBetween]}>
<HeaderWithCloseButton
title={props.translate('workspace.common.bankAccount')}
onCloseButtonPress={Navigation.dismissModal}
shouldShowGetAssistanceButton
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BANK_ACCOUNT}
shouldShowBackButton
onBackButtonPress={() => Navigation.goBack()}
/>
<ScrollView style={[styles.flex1]}>
<Section
title={!isUsingExpensifyCard ? props.translate('workspace.bankAccount.oneMoreThing') : props.translate('workspace.bankAccount.allSet')}
icon={!isUsingExpensifyCard ? Illustrations.ConciergeNew : Illustrations.ThumbsUpStars}
>
<MenuItem
title={bankName}
description={formattedBankAccountNumber}
icon={icon}
iconWidth={iconSize}
iconHeight={iconSize}
disabled
interactive={false}
wrapperStyle={[styles.cardMenuItem, styles.mv3]}
iconFill={themeColors.success}
/>
<Text style={[styles.mv3]}>
{!isUsingExpensifyCard
? props.translate('workspace.bankAccount.accountDescriptionNoCards')
: props.translate('workspace.bankAccount.accountDescriptionWithCards')}
</Text>
{!isUsingExpensifyCard && (
<Button
text={props.translate('workspace.bankAccount.addWorkEmail')}
onPress={() => {
Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
User.subscribeToExpensifyCardUpdates();
}}
icon={Expensicons.Mail}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
<Text style={[styles.mv3]}>
{!isUsingExpensifyCard
? this.props.translate('workspace.bankAccount.accountDescriptionNoCards')
: this.props.translate('workspace.bankAccount.accountDescriptionWithCards')}
</Text>
{!isUsingExpensifyCard && (
<Button
text={this.props.translate('workspace.bankAccount.addWorkEmail')}
onPress={() => {
Link.openOldDotLink(CONST.ADD_SECONDARY_LOGIN_URL);
User.subscribeToExpensifyCardUpdates();
}}
icon={Expensicons.Mail}
style={[styles.mt4]}
iconStyles={[styles.buttonCTAIcon]}
shouldShowRightIcon
large
success
/>
)}
<MenuItem
title={this.props.translate('workspace.bankAccount.disconnectBankAccount')}
icon={Expensicons.Close}
onPress={BankAccounts.requestResetFreePlanBankAccount}
iconFill={themeColors.success}
wrapperStyle={[styles.cardMenuItem, styles.mv3]}
/>
</Section>
{this.props.user.isCheckingDomain && (
<Text style={[styles.formError, styles.mh5]}>
{this.props.translate('workspace.card.checkingDomain')}
</Text>
)}
</ScrollView>
</View>
);
}
}
<MenuItem
title={props.translate('workspace.bankAccount.disconnectBankAccount')}
icon={Expensicons.Close}
onPress={BankAccounts.requestResetFreePlanBankAccount}
iconFill={themeColors.success}
wrapperStyle={[styles.cardMenuItem, styles.mv3]}
/>
</Section>
{props.user.isCheckingDomain && (
<Text style={[styles.formError, styles.mh5]}>
{props.translate('workspace.card.checkingDomain')}
</Text>
)}
</ScrollView>
</View>
);
};

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);