From e27135c66ca422aa621b27f2401c3fdf804fa711 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 15 Feb 2022 14:47:42 -1000 Subject: [PATCH 1/2] Only show Default badge when multiple payment methods exist --- .../settings/Payments/PaymentMethodList.js | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index f4b4c3caff23..6d10e4bf15f8 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -97,11 +97,26 @@ class PaymentMethodList extends Component { } /** - * Take all of the different payment methods and create a list that can be easily digested by renderItem - * + * @param {Boolean} isDefault + * @returns {*} + */ + getDefaultBadgeText(isDefault = false) { + if (!isDefault) { + return null; + } + + const paymentMethods = this.getFilteredPaymentMethods(); + if (paymentMethods.length <= 1) { + return null; + } + + return this.props.translate('paymentMethodList.defaultPaymentMethod'); + } + + /** * @returns {Array} */ - createPaymentMethodList() { + getFilteredPaymentMethods() { let combinedPaymentMethods = PaymentUtils.formatPaymentMethods(this.props.bankAccountList, this.props.cardList, this.props.payPalMeUsername, this.props.userWallet); if (!_.isEmpty(this.props.filterType)) { @@ -116,6 +131,17 @@ class PaymentMethodList extends Component { wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, })); + return combinedPaymentMethods; + } + + /** + * Take all of the different payment methods and create a list that can be easily digested by renderItem + * + * @returns {Array} + */ + createPaymentMethodList() { + const combinedPaymentMethods = this.getFilteredPaymentMethods(); + // If we have not added any payment methods, show a default empty state if (_.isEmpty(combinedPaymentMethods)) { combinedPaymentMethods.push({ @@ -172,7 +198,7 @@ class PaymentMethodList extends Component { iconFill={item.iconFill} iconHeight={item.iconSize} iconWidth={item.iconSize} - badgeText={item.isDefault ? this.props.translate('paymentMethodList.defaultPaymentMethod') : null} + badgeText={this.getDefaultBadgeText(item.isDefault)} wrapperStyle={item.wrapperStyle} shouldShowSelectedState={this.props.shouldShowSelectedState} isSelected={this.props.selectedMethodID === item.methodID} From 961cf5d4fd57381b717747a7d9ba9c0126b6a193 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Tue, 15 Feb 2022 14:52:27 -1000 Subject: [PATCH 2/2] dont use paypal as a defaultable method --- src/pages/settings/Payments/PaymentMethodList.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 6d10e4bf15f8..9d01deefe9a6 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -105,8 +105,12 @@ class PaymentMethodList extends Component { return null; } - const paymentMethods = this.getFilteredPaymentMethods(); - if (paymentMethods.length <= 1) { + 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; }