Merge pull request #5928 from Expensify/jasper-sendMoneyKYCFlow

Navigate to the Enable Payments Flow from within the Send Money Flow

src/ROUTES.js

@@ -45,6 +45,7 @@ export default {
     getIouSplitRoute: reportID => `${IOU_BILL}/${reportID}`,
     getIOUSendRoute: reportID => `${IOU_SEND}/${reportID}`,
     IOU_BILL_CURRENCY: `${IOU_BILL_CURRENCY}/:reportID?`,
+    IOU_ENABLE_PAYMENTS: 'iou/enable-payments',
     IOU_REQUEST_CURRENCY: `${IOU_REQUEST_CURRENCY}/:reportID?`,
     IOU_SEND_CURRENCY: `${IOU_SEND_CURRENCY}/:reportID?`,
     getIouRequestCurrencyRoute: reportID => `${IOU_REQUEST_CURRENCY}/${reportID}`,

src/components/ButtonWithMenu.js

@@ -2,10 +2,16 @@ 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 */
@@ -32,6 +38,9 @@ const propTypes = {
         iconHeight: PropTypes.number,
         iconDescription: PropTypes.string,
     })).isRequired,
+
+    /** The user's current wallet status and step */
+    userWallet: userWalletPropTypes.isRequired,
 };
 
 const defaultProps = {
@@ -51,6 +60,12 @@ 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});
     }
@@ -105,4 +120,8 @@ class ButtonWithMenu extends PureComponent {
 ButtonWithMenu.propTypes = propTypes;
 ButtonWithMenu.defaultProps = defaultProps;
 
-export default ButtonWithMenu;
+export default withOnyx({
+    userWallet: {
+        key: ONYXKEYS.USER_WALLET,
+    },
+})(ButtonWithMenu);

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -33,7 +33,7 @@ import {getPolicyList} from '../../actions/Policy';
 import modalCardStyleInterpolator from './modalCardStyleInterpolator';
 import createCustomModalStackNavigator from './createCustomModalStackNavigator';
 import getOperatingSystem from '../../getOperatingSystem';
-import {fetchFreePlanVerifiedBankAccount} from '../../actions/BankAccounts';
+import {fetchFreePlanVerifiedBankAccount, fetchUserWallet} from '../../actions/BankAccounts';
 
 // Main drawer navigator
 import MainDrawerNavigator from './MainDrawerNavigator';
@@ -163,6 +163,7 @@ class AuthScreens extends React.Component {
         fetchCountryCodeByRequestIP();
         UnreadIndicatorUpdater.listenForReportChanges();
         fetchFreePlanVerifiedBankAccount();
+        fetchUserWallet();
 
         // Load policies, maybe creating a new policy first.
         Linking.getInitialURL()

src/libs/Navigation/AppNavigator/ModalStackNavigators.js

@@ -96,6 +96,10 @@ const IOUSendModalStackNavigator = createModalStackNavigator([{
 {
     Component: IOUCurrencySelection,
     name: 'IOU_Send_Currency',
+},
+{
+    Component: EnablePaymentsPage,
+    name: 'IOU_Enable_Payments',
 }]);
 
 const IOUDetailsModalStackNavigator = createModalStackNavigator([{

src/libs/Navigation/linkingConfig.js

@@ -166,6 +166,7 @@ export default {
             EnablePayments: {
                 screens: {
                     EnablePayments_Root: ROUTES.ENABLE_PAYMENTS,
+                    IOU_Enable_Payments: ROUTES.IOU_ENABLE_PAYMENTS,
                 },
             },
             WorkspaceInvite: {