diff --git a/app/javascript/gabsocial/features/group_create.js b/app/javascript/gabsocial/features/group_create.js index 025b1e9b..88e1a2f7 100644 --- a/app/javascript/gabsocial/features/group_create.js +++ b/app/javascript/gabsocial/features/group_create.js @@ -18,9 +18,14 @@ import { setGroup, resetEditor, } from '../actions/group_editor' -import { closeModal } from '../actions/modal' +import { + openModal, + closeModal, +} from '../actions/modal' import { fetchGroup } from '../actions/groups' import { fetchGroupCategories } from '../actions/group_categories' +import { me } from '../initial_state' +import { MODAL_PRO_UPGRADE } from '../constants' import ColumnIndicator from '../components/column_indicator' import Button from '../components/button' import Divider from '../components/divider' @@ -70,11 +75,17 @@ class GroupCreate extends ImmutablePureComponent { handleSubmit = (e) => { e.preventDefault() + + // if not pro and not admin of group show pro upgrade modal + if (!this.props.isPro && !this.props.isAdmin) { + this.props.onOpenProUpgradeModal() + return + } + if (this.props.onClose) this.props.onClose() this.props.onSubmit(this.context.router.history) } - render() { const { group, @@ -100,12 +111,25 @@ class GroupCreate extends ImmutablePureComponent { groupId, categories, isAdmin, + isPro, } = this.props if (!group && groupId) { return } else if ((!group && error) || (groupId && !isAdmin)) { return + } else if (!isPro && !groupId) { + return + You must be a GabPRO member to create a group. + + + )} /> } const memberCount = group ? group.get('member_count') : 0 @@ -298,6 +322,7 @@ const mapStateToProps = (state, { params }) => { isPrivate: state.getIn(['group_editor', 'isPrivate']), isVisible: state.getIn(['group_editor', 'isVisible']), categories: state.getIn(['group_categories', 'items']), + isPro: state.getIn(['accounts', me, 'is_pro']), } } @@ -341,7 +366,10 @@ const mapDispatchToProps = (dispatch) => ({ }, onFetchGroupCategories() { dispatch(fetchGroupCategories()) - } + }, + onOpenProUpgradeModal() { + dispatch(openModal(MODAL_PRO_UPGRADE)) + }, }) GroupCreate.propTypes = { @@ -362,6 +390,7 @@ GroupCreate.propTypes = { onResetEditor: PropTypes.func.isRequired, onSetGroup: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, + onOpenProUpgradeModal: PropTypes.func.isRequired, isSubmitting: PropTypes.bool, isAdmin: PropTypes.bool, onClose: PropTypes.func, diff --git a/app/javascript/gabsocial/pages/groups_page.js b/app/javascript/gabsocial/pages/groups_page.js index a48465d7..3f3379ac 100644 --- a/app/javascript/gabsocial/pages/groups_page.js +++ b/app/javascript/gabsocial/pages/groups_page.js @@ -8,6 +8,8 @@ import Text from '../components/text' import DefaultLayout from '../layouts/default_layout' import GroupsCollection from '../features/groups_collection' import WrappedBundle from '../features/ui/util/wrapped_bundle' +import { openModal } from '../actions/modal' +import { MODAL_PRO_UPGRADE } from '../constants' import { GroupsPanel, LinkFooter, @@ -15,6 +17,10 @@ import { class GroupsPage extends React.PureComponent { + handleOpenProUpgradeModal = () => { + this.props.dispatch(openModal(MODAL_PRO_UPGRADE)) + } + render() { const { activeTab, @@ -66,7 +72,8 @@ class GroupsPage extends React.PureComponent { { title: 'Create', icon: 'add', - to: '/groups/create', + to: isPro ? '/groups/create' : undefined, + onClick: isPro ? undefined : this.handleOpenProUpgradeModal, }, ]} tabs={tabs}