Merge pull request #6086 from Expensify/nmurray-cp-fix-iou-navigation

[CP Stg] Only navigate to Onfido if we're in the Send Money flow (cherry picked from commit bdecb8f)
Expensify · Oct 27, 2021 · b1cf4ef · b1cf4ef
1 parent d72387f
commit b1cf4ef
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js
@@ -2,16 +2,10 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {View} from 'react-native';
 import _ from 'underscore';
-import {withOnyx} from 'react-native-onyx';
 import styles from '../styles/styles';
 import Button from './Button';
 import ButtonWithDropdown from './ButtonWithDropdown';
 import PopoverMenu from './PopoverMenu';
-import ONYXKEYS from '../ONYXKEYS';
-import CONST from '../CONST';
-import userWalletPropTypes from '../pages/EnablePayments/userWalletPropTypes';
-import Navigation from '../libs/Navigation/Navigation';
-import ROUTES from '../ROUTES';
 
 const propTypes = {
     /** Text to display for the menu header */
@@ -30,17 +24,14 @@ const propTypes = {
     isDisabled: PropTypes.bool,
 
     /** Menu options to display */
-    /** [{text: 'Pay with Expensify', icon: Wallet}, {text: 'PayPal', icon: PayPal}, {text: 'Venmo', icon: Venmo}] */
+    /** e.g. [{text: 'Pay with Expensify', icon: Wallet}, {text: 'PayPal', icon: PayPal}, {text: 'Venmo', icon: Venmo}] */
     options: PropTypes.arrayOf(PropTypes.shape({
         text: PropTypes.string.isRequired,
         icon: PropTypes.elementType,
         iconWidth: PropTypes.number,
         iconHeight: PropTypes.number,
         iconDescription: PropTypes.string,
     })).isRequired,
-
-    /** The user's current wallet status and step */
-    userWallet: userWalletPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -60,12 +51,6 @@ class ButtonWithMenu extends PureComponent {
         };
     }
 
-    componentDidMount() {
-        if (!this.props.userWallet.tierName || this.props.userWallet.tierName === CONST.WALLET.TIER_NAME.SILVER) {
-            Navigation.navigate(ROUTES.IOU_ENABLE_PAYMENTS);
-        }
-    }
-
     setMenuVisibility(isMenuVisible) {
         this.setState({isMenuVisible});
     }
@@ -120,8 +105,4 @@ class ButtonWithMenu extends PureComponent {
 ButtonWithMenu.propTypes = propTypes;
 ButtonWithMenu.defaultProps = defaultProps;
 
-export default withOnyx({
-    userWallet: {
-        key: ONYXKEYS.USER_WALLET,
-    },
-})(ButtonWithMenu);
+export default ButtonWithMenu;
diff --git a/src/pages/iou/IOUModal.js b/src/pages/iou/IOUModal.js
@@ -26,6 +26,8 @@ import Tooltip from '../../components/Tooltip';
 import CONST from '../../CONST';
 import KeyboardAvoidingView from '../../components/KeyboardAvoidingView';
 import * as PersonalDetails from '../../libs/actions/PersonalDetails';
+import userWalletPropTypes from '../EnablePayments/userWalletPropTypes';
+import ROUTES from '../../ROUTES';
 
 /**
  * IOU modal for requesting money and splitting bills.
@@ -77,6 +79,9 @@ const propTypes = {
         avatar: PropTypes.string,
     }).isRequired,
 
+    /** The user's current wallet status and step */
+    userWallet: userWalletPropTypes.userWallet,
+
     ...withLocalizePropTypes,
 };
 
@@ -89,6 +94,7 @@ const defaultProps = {
         localCurrencyCode: CONST.CURRENCY.USD,
     },
     iouType: CONST.IOU.IOU_TYPE.REQUEST,
+    userWallet: {},
 };
 
 // Determines type of step to display within Modal, value provides the title for that page.
@@ -116,6 +122,8 @@ class IOUModal extends Component {
             payPalMeAddress: lodashGet(personalDetails, 'payPalMeAddress', ''),
             phoneNumber: lodashGet(personalDetails, 'phoneNumber', ''),
         }));
+        this.isSendRequest = props.iouType === CONST.IOU.IOU_TYPE.SEND;
+        this.hasGoldWallet = props.userWallet.tierName && props.userWallet.tiername === CONST.WALLET.TIER_NAME.GOLD;
 
         this.state = {
             currentStepIndex: 0,
@@ -173,7 +181,7 @@ class IOUModal extends Component {
                     currency: this.props.iou.selectedCurrencyCode,
                 },
             );
-            if (this.props.iouType === CONST.IOU.IOU_TYPE.SEND) {
+            if (this.isSendRequest) {
                 return this.props.translate('iou.send', {
                     amount: formattedAmount,
                 });
@@ -185,7 +193,7 @@ class IOUModal extends Component {
             );
         }
         if (currentStepIndex === 0) {
-            if (this.props.iouType === CONST.IOU.IOU_TYPE.SEND) {
+            if (this.isSendRequest) {
                 return this.props.translate('iou.sendMoney');
             }
             return this.props.translate(this.props.hasMultipleParticipants ? 'iou.splitBill' : 'iou.requestMoney');
@@ -241,6 +249,12 @@ class IOUModal extends Component {
     createTransaction(splits) {
         const reportID = lodashGet(this.props, 'route.params.reportID', '');
 
+        // If the user is trying to send money, then they need to upgrade to a GOLD wallet
+        if (this.isSendRequest && !this.hasGoldWallet) {
+            Navigation.navigate(ROUTES.IOU_ENABLE_PAYMENTS);
+            return;
+        }
+
         // Only splits from a group DM has a reportID
         // Check if reportID is a number
         if (splits && CONST.REGEX.NUMBER.test(reportID)) {
@@ -390,5 +404,8 @@ export default compose(
         myPersonalDetails: {
             key: ONYXKEYS.MY_PERSONAL_DETAILS,
         },
+        userWallet: {
+            key: ONYXKEYS.USER_WALLET,
+        },
     }),
 )(IOUModal);