Merge pull request #7374 from parasharrajat/menu-highlight

Highlight the  💳 Payment Method on the PaymentMethod list when its menu is active

Author: marcochavezf

src/pages/settings/Payments/PaymentMethodList.js

@@ -60,6 +60,12 @@ const propTypes = {
         walletLinkedAccountType: PropTypes.string,
     }),
 
+    /** Type of active/highlighted payment method */
+    actionPaymentMethodType: PropTypes.oneOf([..._.values(CONST.PAYMENT_METHODS), '']),
+
+    /** ID of active/highlighted payment method */
+    activePaymentMethodID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
     /** ID of selected payment method */
     selectedMethodID: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -78,6 +84,8 @@ const defaultProps = {
     isAddPaymentMenuActive: false,
     shouldShowAddPaymentMethodButton: true,
     filterType: '',
+    actionPaymentMethodType: '',
+    activePaymentMethodID: '',
     selectedMethodID: '',
 };
 
@@ -104,6 +112,8 @@ class PaymentMethodList extends Component {
             ...paymentMethod,
             type: MENU_ITEM,
             onPress: e => this.props.onPress(e, paymentMethod.accountType, paymentMethod.accountData),
+            iconFill: this.isPaymentMethodActive(paymentMethod) ? StyleUtils.getIconFillColor(CONST.BUTTON_STATES.PRESSED) : null,
+            wrapperStyle: this.isPaymentMethodActive(paymentMethod) ? [StyleUtils.getButtonBackgroundColorStyle(CONST.BUTTON_STATES.PRESSED)] : null,
         }));
 
         // If we have not added any payment methods, show a default empty state
@@ -132,6 +142,16 @@ class PaymentMethodList extends Component {
         return combinedPaymentMethods;
     }
 
+    /**
+     * @param {Object} paymentMethod
+     * @param {String|Number} paymentMethod.methodID
+     * @param {String} paymentMethod.accountType
+     * @return {Boolean}
+     */
+    isPaymentMethodActive(paymentMethod) {
+        return paymentMethod.accountType === this.props.actionPaymentMethodType && paymentMethod.methodID === this.props.activePaymentMethodID;
+    }
+
     /**
      * Create a menuItem for each passed paymentMethod
      *

src/pages/settings/Payments/PaymentsPage.js

@@ -82,6 +82,18 @@ class PaymentsPage extends React.Component {
         PaymentMethods.getPaymentMethods();
     }
 
+    getSelectedPaymentMethodID() {
+        if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.PAYPAL) {
+            return CONST.PAYMENT_METHODS.PAYPAL;
+        }
+        if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.BANK_ACCOUNT) {
+            return this.state.selectedPaymentMethod.bankAccountID;
+        }
+        if (this.state.selectedPaymentMethodType === CONST.PAYMENT_METHODS.DEBIT_CARD) {
+            return this.state.selectedPaymentMethod.fundID;
+        }
+    }
+
     /**
      * Display the delete/default menu, or the add payment method menu
      *
@@ -247,6 +259,12 @@ class PaymentsPage extends React.Component {
                             style={[styles.flex4]}
                             isLoadingPayments={this.props.isLoadingPaymentMethods}
                             isAddPaymentMenuActive={this.state.shouldShowAddPaymentMenu}
+                            actionPaymentMethodType={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
+                                ? this.state.selectedPaymentMethodType
+                                : ''}
+                            activePaymentMethodID={this.state.shouldShowDefaultDeleteMenu || this.state.shouldShowPasswordPrompt || this.state.shouldShowConfirmPopover
+                                ? this.getSelectedPaymentMethodID()
+                                : ''}
                         />
                     </View>
                     <AddPaymentMethodMenu