Skip to content
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

Migrate PaymentMethodList from class to functional component #20217

Merged
merged 6 commits into from
Jun 8, 2023
Merged

Migrate PaymentMethodList from class to functional component #20217

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a9f0e7
Migration to functional component WIP
aldo-expensify Jun 5, 2023
4431241
Refactor from class component to Functional component
aldo-expensify Jun 5, 2023
c8f9da3
Fix watching props warnings
aldo-expensify Jun 5, 2023
b430ef9
Merge branch 'main' of github.com:Expensify/App into aldo_payment-met…
aldo-expensify Jun 5, 2023
82545a6
Update comment
aldo-expensify Jun 8, 2023
02e9d77
Remove empty space
aldo-expensify Jun 8, 2023
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
213 changes: 101 additions & 112 deletions src/pages/settings/Payments/PaymentMethodList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import _ from 'underscore';
import React, {Component} from 'react';
import React, {useCallback, useMemo} from 'react';
import PropTypes from 'prop-types';
import {FlatList} from 'react-native';
import lodashGet from 'lodash/get';
Expand Down Expand Up @@ -87,47 +87,66 @@ const defaultProps = {
listHeaderComponent: null,
};

class PaymentMethodList extends Component {
constructor(props) {
super(props);
/**
* Dismisses the error on the payment method
* @param {Object} item
*/
function dismissError(item) {
const paymentList = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.CARD_LIST;
const paymentID = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? lodashGet(item, ['accountData', 'bankAccountID'], '') : lodashGet(item, ['accountData', 'fundID'], '');

if (!paymentID) {
Log.info('Unable to clear payment method error: ', item);
return;
}

this.renderItem = this.renderItem.bind(this);
if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
PaymentMethods.clearDeletePaymentMethodError(paymentList, paymentID);
} else {
PaymentMethods.clearAddPaymentMethodError(paymentList, paymentID);
}
}

/**
* @param {Boolean} isDefault
* @returns {*}
*/
getDefaultBadgeText(isDefault = false) {
if (!isDefault) {
return null;
}
/**
* @param {Array} filteredPaymentMethods
* @param {Boolean} isDefault
* @returns {Boolean}
*/
function shouldShowDefaultBadge(filteredPaymentMethods, isDefault = false) {
if (!isDefault) {
return false;
}

const defaultablePaymentMethodCount = _.reduce(
this.getFilteredPaymentMethods(),
(count, method) => (method.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT || method.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD ? count + 1 : count),
0,
);
if (defaultablePaymentMethodCount <= 1) {
return null;
}
const defaultablePaymentMethodCount = _.filter(
filteredPaymentMethods,
(method) => method.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT || method.accountType === CONST.PAYMENT_METHODS.DEBIT_CARD,
).length;
return defaultablePaymentMethodCount > 1;
}

return this.props.translate('paymentMethodList.defaultPaymentMethod');
}
/**
* @param {String} actionPaymentMethodType
* @param {String|Number} activePaymentMethodID
* @param {String} paymentMethod
* @return {Boolean}
*/
function isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod) {
return paymentMethod.accountType === actionPaymentMethodType && paymentMethod.methodID === activePaymentMethodID;
}
function PaymentMethodList(props) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed that we're following the style guide 🎉

https://github.com/Expensify/App/blob/main/contributingGuides/STYLE.md#should-i-declare-my-components-with-arrow-functions-const-or-the-function-keyword

const {actionPaymentMethodType, activePaymentMethodID, bankAccountList, cardList, filterType, network, onPress, payPalMeData, shouldShowSelectedState, selectedMethodID, translate} =
props;
Comment on lines +137 to +138
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deconstructing props to avoid this type of warning:

Screenshot 2023-06-05 at 12 54 12 PM


/**
* @returns {Array}
*/
getFilteredPaymentMethods() {
const filteredPaymentMethods = useMemo(() => {
// Hide any billing cards that are not P2P debit cards for now because you cannot make them your default method, or delete them
const filteredCardList = _.filter(this.props.cardList, (card) => card.accountData.additionalData.isP2PDebitCard);
let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, filteredCardList, this.props.payPalMeData);
const filteredCardList = _.filter(cardList, (card) => card.accountData.additionalData.isP2PDebitCard);
let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(bankAccountList, filteredCardList, payPalMeData);

if (!_.isEmpty(this.props.filterType)) {
combinedPaymentMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === this.props.filterType);
if (!_.isEmpty(filterType)) {
combinedPaymentMethods = _.filter(combinedPaymentMethods, (paymentMethod) => paymentMethod.accountType === filterType);
}

if (!this.props.network.isOffline) {
if (!network.isOffline) {
combinedPaymentMethods = _.filter(
combinedPaymentMethods,
(paymentMethod) => paymentMethod.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE || !_.isEmpty(paymentMethod.errors),
Expand All @@ -136,44 +155,23 @@ class PaymentMethodList extends Component {

combinedPaymentMethods = _.map(combinedPaymentMethods, (paymentMethod) => ({
...paymentMethod,
onPress: (e) => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
iconFill: this.isPaymentMethodActive(paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
onPress: (e) => onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault, paymentMethod.methodID),
iconFill: isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
wrapperStyle: isPaymentMethodActive(actionPaymentMethodType, activePaymentMethodID, paymentMethod)
? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)]
: null,
disabled: paymentMethod.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
}));

return combinedPaymentMethods;
}

/**
* Dismisses the error on the payment method
* @param {Object} item
*/
dismissError(item) {
const paymentList = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? ONYXKEYS.BANK_ACCOUNT_LIST : ONYXKEYS.CARD_LIST;
const paymentID = item.accountType === CONST.PAYMENT_METHODS.BANK_ACCOUNT ? lodashGet(item, ['accountData', 'bankAccountID'], '') : lodashGet(item, ['accountData', 'fundID'], '');

if (!paymentID) {
Log.info('Unable to clear payment method error: ', item);
return;
}

if (item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) {
PaymentMethods.clearDeletePaymentMethodError(paymentList, paymentID);
} else {
PaymentMethods.clearAddPaymentMethodError(paymentList, paymentID);
}
}
}, [actionPaymentMethodType, activePaymentMethodID, bankAccountList, cardList, filterType, network, onPress, payPalMeData]);

/**
* @param {Object} paymentMethod
* @param {String|Number} paymentMethod.methodID
* @param {String} paymentMethod.accountType
* @return {Boolean}
* Render placeholder when there are no payments methods
*
* @return {React.Component}
*/
isPaymentMethodActive(paymentMethod) {
return paymentMethod.accountType === this.props.actionPaymentMethodType && paymentMethod.methodID === this.props.activePaymentMethodID;
}
const renderListEmptyComponent = useCallback(() => <Text style={[styles.popoverMenuItem]}>{translate('paymentMethodList.addFirstPaymentMethod')}</Text>, [translate]);

/**
* Create a menuItem for each passed paymentMethod
Expand All @@ -183,10 +181,10 @@ class PaymentMethodList extends Component {
*
* @return {React.Component}
*/
renderItem({item}) {
return (
const renderItem = useCallback(
({item}) => (
<OfflineWithFeedback
onClose={() => this.dismissError(item)}
onClose={() => dismissError(item)}
pendingAction={item.pendingAction}
errors={item.errors}
errorRowStyles={styles.ph6}
Expand All @@ -200,59 +198,50 @@ class PaymentMethodList extends Component {
iconFill={item.iconFill}
iconHeight={item.iconSize}
iconWidth={item.iconSize}
badgeText={this.getDefaultBadgeText(item.isDefault)}
badgeText={shouldShowDefaultBadge(filteredPaymentMethods, item.isDefault) ? translate('paymentMethodList.defaultPaymentMethod') : null}
wrapperStyle={item.wrapperStyle}
shouldShowSelectedState={this.props.shouldShowSelectedState}
isSelected={this.props.selectedMethodID === item.methodID}
shouldShowSelectedState={shouldShowSelectedState}
isSelected={selectedMethodID === item.methodID}
/>
</OfflineWithFeedback>
);
}

/**
* Show add first payment copy when payment methods are
*
* @return {React.Component}
*/
renderListEmptyComponent() {
return <Text style={[styles.popoverMenuItem]}>{this.props.translate('paymentMethodList.addFirstPaymentMethod')}</Text>;
}

render() {
return (
<>
<FlatList
data={this.getFilteredPaymentMethods()}
renderItem={this.renderItem}
keyExtractor={(item) => item.key}
ListEmptyComponent={this.renderListEmptyComponent()}
ListHeaderComponent={this.props.listHeaderComponent}
/>
{this.props.shouldShowAddPaymentMethodButton && (
<FormAlertWrapper>
{(isOffline) => (
<Button
text={this.props.translate('paymentMethodList.addPaymentMethod')}
icon={Expensicons.CreditCard}
onPress={(e) => this.props.onPress(e)}
isDisabled={this.props.isLoadingPaymentMethods || isOffline}
style={[styles.mh4, styles.buttonCTA]}
iconStyles={[styles.buttonCTAIcon]}
key="addPaymentMethodButton"
success
shouldShowRightIcon
large
/>
)}
</FormAlertWrapper>
)}
</>
);
}
),
[shouldShowSelectedState, selectedMethodID, filteredPaymentMethods, translate],
);

return (
<>
<FlatList
data={filteredPaymentMethods}
renderItem={renderItem}
keyExtractor={(item) => item.key}
ListEmptyComponent={renderListEmptyComponent(translate)}
ListHeaderComponent={props.listHeaderComponent}
/>
{props.shouldShowAddPaymentMethodButton && (
<FormAlertWrapper>
{(isOffline) => (
<Button
text={translate('paymentMethodList.addPaymentMethod')}
icon={Expensicons.CreditCard}
onPress={props.onPress}
isDisabled={props.isLoadingPaymentMethods || isOffline}
style={[styles.mh4, styles.buttonCTA]}
iconStyles={[styles.buttonCTAIcon]}
key="addPaymentMethodButton"
success
shouldShowRightIcon
large
/>
)}
</FormAlertWrapper>
)}
</>
);
}

PaymentMethodList.propTypes = propTypes;
PaymentMethodList.defaultProps = defaultProps;
PaymentMethodList.displayName = 'PaymentMethodList';

export default compose(
withLocalize,
Expand Down