Merge pull request #5796 from Expensify/marcaaron-preventTappableBankAccount

Prevent tappable bank account in EnableStep

(cherry picked from commit 7b82f4d)

Author: stitesExpensify

src/components/MenuItem.js

@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import React from 'react';
 import {
     View, Pressable,
@@ -19,7 +20,7 @@ const propTypes = {
 const defaultProps = {
     badgeText: undefined,
     shouldShowRightIcon: false,
-    wrapperStyle: {},
+    wrapperStyle: [],
     success: false,
     icon: undefined,
     iconWidth: undefined,
@@ -32,6 +33,8 @@ const defaultProps = {
     disabled: false,
     subtitle: undefined,
     iconType: 'icon',
+    onPress: () => {},
+    interactive: true,
 };
 
 const MenuItem = ({
@@ -52,6 +55,7 @@ const MenuItem = ({
     disabled,
     subtitle,
     iconType,
+    interactive,
 }) => (
     <Pressable
         onPress={(e) => {
@@ -63,8 +67,8 @@ const MenuItem = ({
         }}
         style={({hovered, pressed}) => ([
             styles.popoverMenuItem,
-            getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, success, disabled)),
-            wrapperStyle,
+            getButtonBackgroundColorStyle(getButtonState(focused || hovered, pressed, success, disabled, interactive)),
+            ..._.isArray(wrapperStyle) ? wrapperStyle : [wrapperStyle],
         ])}
         disabled={disabled}
     >
@@ -83,7 +87,7 @@ const MenuItem = ({
                                 width={iconWidth}
                                 height={iconHeight}
                                 fill={iconFill || getIconFillColor(
-                                    getButtonState(focused || hovered, pressed, success, disabled),
+                                    getButtonState(focused || hovered, pressed, success, disabled, interactive),
                                 )}
                             />
                         </View>
@@ -106,7 +110,7 @@ const MenuItem = ({
                             style={[
                                 styles.popoverMenuText,
                                 styles.ml3,
-                                (disabled ? styles.disabledText : undefined),
+                                (interactive && disabled ? styles.disabledText : undefined),
                             ]}
                             numberOfLines={1}
                         >
@@ -134,7 +138,7 @@ const MenuItem = ({
                         <View style={styles.popoverMenuIcon}>
                             <Icon
                                 src={iconRight}
-                                fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled))}
+                                fill={getIconFillColor(getButtonState(focused || hovered, pressed, success, disabled, interactive))}
                             />
                         </View>
                     )}

src/components/menuItemPropTypes.js

@@ -1,16 +1,17 @@
 import PropTypes from 'prop-types';
 import CONST from '../CONST';
+import stylePropTypes from '../styles/stylePropTypes';
 
 const propTypes = {
     /** Text to be shown as badge near the right end. */
     badgeText: PropTypes.string,
 
     /** Any additional styles to apply */
     // eslint-disable-next-line react/forbid-prop-types
-    wrapperStyle: PropTypes.object,
+    wrapperStyle: stylePropTypes,
 
     /** Function to fire when component is pressed */
-    onPress: PropTypes.func.isRequired,
+    onPress: PropTypes.func,
 
     /** Icon to display on the left side of component */
     icon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.string]),
@@ -53,6 +54,9 @@ const propTypes = {
 
     /** Flag to choose between avatar image or an icon */
     iconType: PropTypes.oneOf([CONST.ICON_TYPE_AVATAR, CONST.ICON_TYPE_ICON]),
+
+    /** Whether the menu item should be interactive at all */
+    interactive: PropTypes.bool,
 };
 
 export default propTypes;

src/libs/getButtonState.js

@@ -7,9 +7,14 @@ import CONST from '../CONST';
  * @param {Boolean} [isPressed]
  * @param {Boolean} [isComplete]
  * @param {Boolean} [isDisabled]
+ * @param {Boolean} [isInteractive]
  * @returns {String}
  */
-export default function (isActive = false, isPressed = false, isComplete = false, isDisabled = false) {
+export default function (isActive = false, isPressed = false, isComplete = false, isDisabled = false, isInteractive = true) {
+    if (!isInteractive) {
+        return CONST.BUTTON_STATES.DEFAULT;
+    }
+
     if (isDisabled) {
         return CONST.BUTTON_STATES.DISABLED;
     }

src/pages/ReimbursementAccount/EnableStep.js

@@ -95,8 +95,9 @@ class EnableStep extends React.Component {
                             icon={icon}
                             iconWidth={iconSize}
                             iconHeight={iconSize}
-                            onPress={() => {}}
-                            wrapperStyle={{paddingHorizontal: 0, marginBottom: 12}}
+                            disabled
+                            interactive={false}
+                            wrapperStyle={[styles.ph0, styles.mb3]}
                         />
                         <Text>
                             {!isUsingExpensifyCard