diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js index 9d01deefe9a6..f37ee134390c 100644 --- a/src/pages/settings/Payments/PaymentMethodList.js +++ b/src/pages/settings/Payments/PaymentMethodList.js @@ -130,7 +130,7 @@ class PaymentMethodList extends Component { combinedPaymentMethods = _.map(combinedPaymentMethods, paymentMethod => ({ ...paymentMethod, type: MENU_ITEM, - onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData), + onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData, paymentMethod.isDefault), iconFill: this.isPaymentMethodActive(paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null, wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null, })); diff --git a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js index 3afb26623110..3417b989392b 100644 --- a/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage/BasePaymentsPage.js @@ -40,6 +40,7 @@ class BasePaymentsPage extends React.Component { shouldShowDefaultDeleteMenu: false, shouldShowPasswordPrompt: false, shouldShowConfirmPopover: false, + isSelectedPaymentMethodDefault: false, selectedPaymentMethod: {}, formattedSelectedPaymentMethod: {}, anchorPositionTop: 0, @@ -112,8 +113,9 @@ class BasePaymentsPage extends React.Component { * @param {Object} nativeEvent * @param {String} accountType * @param {String} account + * @param {Boolean} isDefault */ - paymentMethodPressed(nativeEvent, accountType, account) { + paymentMethodPressed(nativeEvent, accountType, account, isDefault) { const position = getClickedElementLocation(nativeEvent); this.setState({ addPaymentMethodButton: nativeEvent, @@ -143,6 +145,7 @@ class BasePaymentsPage extends React.Component { }; } this.setState({ + isSelectedPaymentMethodDefault: isDefault, shouldShowDefaultDeleteMenu: true, selectedPaymentMethod: account, selectedPaymentMethodType: accountType, @@ -229,6 +232,7 @@ class BasePaymentsPage extends React.Component { render() { const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL; + const shouldShowMakeDefaultButton = !this.state.isSelectedPaymentMethodDefault && Permissions.canUseWallet(this.props.betas) && !isPayPalMeSelected; // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; @@ -318,7 +322,7 @@ class BasePaymentsPage extends React.Component { interactive={false} /> )} - {Permissions.canUseWallet(this.props.betas) && !isPayPalMeSelected && ( + {shouldShowMakeDefaultButton && ( { this.setState({ @@ -356,7 +360,7 @@ class BasePaymentsPage extends React.Component { style={[ styles.button, styles.buttonDanger, - Permissions.canUseWallet(this.props.betas) && !isPayPalMeSelected && styles.mt4, + shouldShowMakeDefaultButton && styles.mt4, styles.alignSelfCenter, styles.w100, ]}