diff --git a/src/components/ButtonWithMenu.js b/src/components/ButtonWithMenu.js index 0b6fd5664196..24b214f90c4a 100644 --- 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,7 +24,7 @@ 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, @@ -38,9 +32,6 @@ const propTypes = { 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 index b636908d2b37..2957a4c2895e 100755 --- 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);