aboutsummaryrefslogtreecommitdiffstats
path: root/src/features/workspaces
diff options
context:
space:
mode:
authorLibravatar Vijay A <avijayr@protonmail.com>2021-07-17 20:32:22 +0530
committerLibravatar Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>2021-07-20 16:02:15 +0000
commit45373f655f68fdd0b320cde175b6108454ad4731 (patch)
treec1ccb0c73639d754b68a36a1977b74471fe4b566 /src/features/workspaces
parentNew Crowdin updates (#1668) (diff)
downloadferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.tar.gz
ferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.tar.zst
ferdium-app-45373f655f68fdd0b320cde175b6108454ad4731.zip
Removed Franz paid plans features:
- serviceLimit - planSelection - trialStatusBar and other Franz features that were for different tiers of subscription.
Diffstat (limited to 'src/features/workspaces')
-rw-r--r--src/features/workspaces/components/WorkspaceDrawer.js141
-rw-r--r--src/features/workspaces/components/WorkspacesDashboard.js129
-rw-r--r--src/features/workspaces/store.js47
3 files changed, 86 insertions, 231 deletions
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index bf7016e2f..3ddc9cf16 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -2,12 +2,11 @@ import React, { Component } from 'react';
2import PropTypes from 'prop-types'; 2import PropTypes from 'prop-types';
3import { observer } from 'mobx-react'; 3import { observer } from 'mobx-react';
4import injectSheet from 'react-jss'; 4import injectSheet from 'react-jss';
5import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl'; 5import { defineMessages, intlShape } from 'react-intl';
6import { H1, Icon, ProBadge } from '@meetfranz/ui'; 6import { H1, Icon } from '@meetfranz/ui';
7import { Button } from '@meetfranz/forms/lib';
8import ReactTooltip from 'react-tooltip'; 7import ReactTooltip from 'react-tooltip';
9 8
10import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js'; 9import { mdiPlusBox, mdiSettings } from '@mdi/js';
11import WorkspaceDrawerItem from './WorkspaceDrawerItem'; 10import WorkspaceDrawerItem from './WorkspaceDrawerItem';
12import { workspaceActions } from '../actions'; 11import { workspaceActions } from '../actions';
13import { workspaceStore } from '../index'; 12import { workspaceStore } from '../index';
@@ -29,22 +28,10 @@ const messages = defineMessages({
29 id: 'workspaceDrawer.workspaceFeatureInfo', 28 id: 'workspaceDrawer.workspaceFeatureInfo',
30 defaultMessage: '!!!Info about workspace feature', 29 defaultMessage: '!!!Info about workspace feature',
31 }, 30 },
32 premiumCtaButtonLabel: {
33 id: 'workspaceDrawer.premiumCtaButtonLabel',
34 defaultMessage: '!!!Create your first workspace',
35 },
36 reactivatePremiumAccount: {
37 id: 'workspaceDrawer.reactivatePremiumAccountLabel',
38 defaultMessage: '!!!Reactivate premium account',
39 },
40 addNewWorkspaceLabel: { 31 addNewWorkspaceLabel: {
41 id: 'workspaceDrawer.addNewWorkspaceLabel', 32 id: 'workspaceDrawer.addNewWorkspaceLabel',
42 defaultMessage: '!!!add new workspace', 33 defaultMessage: '!!!add new workspace',
43 }, 34 },
44 premiumFeatureBadge: {
45 id: 'workspaceDrawer.proFeatureBadge',
46 defaultMessage: '!!!Premium feature',
47 },
48}); 35});
49 36
50const styles = theme => ({ 37const styles = theme => ({
@@ -60,9 +47,6 @@ const styles = theme => ({
60 marginBottom: '25px', 47 marginBottom: '25px',
61 marginLeft: theme.workspaces.drawer.padding, 48 marginLeft: theme.workspaces.drawer.padding,
62 }, 49 },
63 headlineProBadge: {
64 marginRight: 15,
65 },
66 workspacesSettingsButton: { 50 workspacesSettingsButton: {
67 float: 'right', 51 float: 'right',
68 marginRight: theme.workspaces.drawer.padding, 52 marginRight: theme.workspaces.drawer.padding,
@@ -78,16 +62,6 @@ const styles = theme => ({
78 height: 'auto', 62 height: 'auto',
79 overflowY: 'auto', 63 overflowY: 'auto',
80 }, 64 },
81 premiumAnnouncement: {
82 padding: '20px',
83 paddingTop: '0',
84 height: 'auto',
85 },
86 premiumCtaButton: {
87 marginTop: '20px',
88 width: '100%',
89 color: 'white !important',
90 },
91 addNewWorkspaceLabel: { 65 addNewWorkspaceLabel: {
92 height: 'auto', 66 height: 'auto',
93 color: theme.workspaces.drawer.buttons.color, 67 color: theme.workspaces.drawer.buttons.color,
@@ -116,7 +90,6 @@ class WorkspaceDrawer extends Component {
116 static propTypes = { 90 static propTypes = {
117 classes: PropTypes.object.isRequired, 91 classes: PropTypes.object.isRequired,
118 getServicesForWorkspace: PropTypes.func.isRequired, 92 getServicesForWorkspace: PropTypes.func.isRequired,
119 onUpgradeAccountClick: PropTypes.func.isRequired,
120 }; 93 };
121 94
122 static contextTypes = { 95 static contextTypes = {
@@ -131,7 +104,6 @@ class WorkspaceDrawer extends Component {
131 const { 104 const {
132 classes, 105 classes,
133 getServicesForWorkspace, 106 getServicesForWorkspace,
134 onUpgradeAccountClick,
135 } = this.props; 107 } = this.props;
136 const { intl } = this.context; 108 const { intl } = this.context;
137 const { 109 const {
@@ -144,14 +116,6 @@ class WorkspaceDrawer extends Component {
144 return ( 116 return (
145 <div className={`${classes.drawer} workspaces-drawer`}> 117 <div className={`${classes.drawer} workspaces-drawer`}>
146 <H1 className={classes.headline}> 118 <H1 className={classes.headline}>
147 {workspaceStore.isPremiumUpgradeRequired && (
148 <span
149 className={classes.headlineProBadge}
150 data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`}
151 >
152 <ProBadge />
153 </span>
154 )}
155 {intl.formatMessage(messages.headline)} 119 {intl.formatMessage(messages.headline)}
156 <span 120 <span
157 className={classes.workspacesSettingsButton} 121 className={classes.workspacesSettingsButton}
@@ -167,75 +131,48 @@ class WorkspaceDrawer extends Component {
167 /> 131 />
168 </span> 132 </span>
169 </H1> 133 </H1>
170 {workspaceStore.isPremiumUpgradeRequired ? ( 134 <div className={classes.workspaces}>
171 <div className={classes.premiumAnnouncement}> 135 <WorkspaceDrawerItem
172 <FormattedHTMLMessage {...messages.workspaceFeatureInfo} /> 136 name={intl.formatMessage(messages.allServices)}
173 {workspaceStore.userHasWorkspaces ? ( 137 onClick={() => {
174 <Button 138 workspaceActions.deactivate();
175 className={classes.premiumCtaButton} 139 workspaceActions.toggleWorkspaceDrawer();
176 buttonType="primary" 140 }}
177 label={intl.formatMessage(messages.reactivatePremiumAccount)} 141 services={getServicesForWorkspace(null)}
178 icon={mdiStar} 142 isActive={actualWorkspace == null}
179 onClick={() => { 143 shortcutIndex={0}
180 onUpgradeAccountClick(); 144 />
181 }} 145 {workspaces.map((workspace, index) => (
182 />
183 ) : (
184 <Button
185 className={classes.premiumCtaButton}
186 buttonType="primary"
187 label={intl.formatMessage(messages.premiumCtaButtonLabel)}
188 icon={mdiPlusBox}
189 onClick={() => {
190 workspaceActions.openWorkspaceSettings();
191 }}
192 />
193 )}
194 </div>
195 ) : (
196 <div className={classes.workspaces}>
197 <WorkspaceDrawerItem 146 <WorkspaceDrawerItem
198 name={intl.formatMessage(messages.allServices)} 147 key={workspace.id}
148 name={workspace.name}
149 isActive={actualWorkspace === workspace}
199 onClick={() => { 150 onClick={() => {
200 workspaceActions.deactivate(); 151 if (actualWorkspace === workspace) return;
152 workspaceActions.activate({ workspace });
201 workspaceActions.toggleWorkspaceDrawer(); 153 workspaceActions.toggleWorkspaceDrawer();
202 }} 154 }}
203 services={getServicesForWorkspace(null)} 155 onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
204 isActive={actualWorkspace == null} 156 services={getServicesForWorkspace(workspace)}
205 shortcutIndex={0} 157 shortcutIndex={index + 1}
206 /> 158 />
207 {workspaces.map((workspace, index) => ( 159 ))}
208 <WorkspaceDrawerItem 160 <div
209 key={workspace.id} 161 className={classes.addNewWorkspaceLabel}
210 name={workspace.name} 162 onClick={() => {
211 isActive={actualWorkspace === workspace} 163 workspaceActions.openWorkspaceSettings();
212 onClick={() => { 164 }}
213 if (actualWorkspace === workspace) return; 165 >
214 workspaceActions.activate({ workspace }); 166 <Icon
215 workspaceActions.toggleWorkspaceDrawer(); 167 icon={mdiPlusBox}
216 }} 168 size={1}
217 onContextMenuEditClick={() => workspaceActions.edit({ workspace })} 169 className={classes.workspacesSettingsButtonIcon}
218 services={getServicesForWorkspace(workspace)} 170 />
219 shortcutIndex={index + 1} 171 <span>
220 /> 172 {intl.formatMessage(messages.addNewWorkspaceLabel)}
221 ))} 173 </span>
222 <div
223 className={classes.addNewWorkspaceLabel}
224 onClick={() => {
225 workspaceActions.openWorkspaceSettings();
226 }}
227 >
228 <Icon
229 icon={mdiPlusBox}
230 size={1}
231 className={classes.workspacesSettingsButtonIcon}
232 />
233 <span>
234 {intl.formatMessage(messages.addNewWorkspaceLabel)}
235 </span>
236 </div>
237 </div> 174 </div>
238 )} 175 </div>
239 <ReactTooltip place="right" type="dark" effect="solid" /> 176 <ReactTooltip place="right" type="dark" effect="solid" />
240 </div> 177 </div>
241 ); 178 );
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index cfaacd56e..0c2588c42 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,9 +1,9 @@
1import React, { Component, Fragment } from 'react'; 1import React, { Component } from 'react';
2import PropTypes from 'prop-types'; 2import PropTypes from 'prop-types';
3import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react'; 3import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
4import { defineMessages, intlShape } from 'react-intl'; 4import { defineMessages, intlShape } from 'react-intl';
5import injectSheet from 'react-jss'; 5import injectSheet from 'react-jss';
6import { Infobox, Badge } from '@meetfranz/ui'; 6import { Infobox } from '@meetfranz/ui';
7 7
8import { mdiCheckboxMarkedCircleOutline } from '@mdi/js'; 8import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
9import Loader from '../../../components/ui/Loader'; 9import Loader from '../../../components/ui/Loader';
@@ -11,10 +11,7 @@ import WorkspaceItem from './WorkspaceItem';
11import CreateWorkspaceForm from './CreateWorkspaceForm'; 11import CreateWorkspaceForm from './CreateWorkspaceForm';
12import Request from '../../../stores/lib/Request'; 12import Request from '../../../stores/lib/Request';
13import Appear from '../../../components/ui/effects/Appear'; 13import Appear from '../../../components/ui/effects/Appear';
14import { workspaceStore } from '../index';
15import UIStore from '../../../stores/UIStore'; 14import UIStore from '../../../stores/UIStore';
16import globalMessages from '../../../i18n/globalMessages';
17import UpgradeButton from '../../../components/ui/UpgradeButton';
18 15
19const messages = defineMessages({ 16const messages = defineMessages({
20 headline: { 17 headline: {
@@ -64,12 +61,6 @@ const styles = () => ({
64 appear: { 61 appear: {
65 height: 'auto', 62 height: 'auto',
66 }, 63 },
67 premiumAnnouncement: {
68 height: 'auto',
69 },
70 premiumAnnouncementContainer: {
71 display: 'flex',
72 },
73 announcementHeadline: { 64 announcementHeadline: {
74 marginBottom: 0, 65 marginBottom: 0,
75 }, 66 },
@@ -78,12 +69,6 @@ const styles = () => ({
78 margin: [-8, 0, 0, 20], 69 margin: [-8, 0, 0, 20],
79 alignSelf: 'center', 70 alignSelf: 'center',
80 }, 71 },
81 upgradeCTA: {
82 margin: [40, 'auto'],
83 },
84 proRequired: {
85 margin: [10, 0, 40],
86 },
87}); 72});
88 73
89@inject('stores') @injectSheet(styles) @observer 74@inject('stores') @injectSheet(styles) @observer
@@ -152,77 +137,53 @@ class WorkspacesDashboard extends Component {
152 </Appear> 137 </Appear>
153 )} 138 )}
154 139
155 {workspaceStore.isPremiumUpgradeRequired && ( 140 {/* ===== Create workspace form ===== */}
156 <div className={classes.premiumAnnouncement}> 141 <div className={classes.createForm}>
157 142 <CreateWorkspaceForm
158 <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1> 143 isSubmitting={createWorkspaceRequest.isExecuting}
159 <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge> 144 onSubmit={onCreateWorkspaceSubmit}
160 <div className={classes.premiumAnnouncementContainer}> 145 />
161 <div className={classes.premiumAnnouncementContent}> 146 </div>
162 <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p> 147 {getUserWorkspacesRequest.isExecuting ? (
163 <UpgradeButton 148 <Loader />
164 className={classes.upgradeCTA} 149 ) : (
165 gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
166 short
167 requiresPro
168 />
169 </div>
170 <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
171 </div>
172 </div>
173 )}
174
175 {!workspaceStore.isPremiumUpgradeRequired && (
176 <> 150 <>
177 {/* ===== Create workspace form ===== */} 151 {/* ===== Workspace could not be loaded error ===== */}
178 <div className={classes.createForm}> 152 {getUserWorkspacesRequest.error ? (
179 <CreateWorkspaceForm 153 <Infobox
180 isSubmitting={createWorkspaceRequest.isExecuting} 154 icon="alert"
181 onSubmit={onCreateWorkspaceSubmit} 155 type="danger"
182 /> 156 ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
183 </div> 157 ctaLoading={getUserWorkspacesRequest.isExecuting}
184 {getUserWorkspacesRequest.isExecuting ? ( 158 ctaOnClick={getUserWorkspacesRequest.retry}
185 <Loader /> 159 >
160 {intl.formatMessage(messages.workspacesRequestFailed)}
161 </Infobox>
186 ) : ( 162 ) : (
187 <> 163 <>
188 {/* ===== Workspace could not be loaded error ===== */} 164 {workspaces.length === 0 ? (
189 {getUserWorkspacesRequest.error ? ( 165 <div className="align-middle settings__empty-state">
190 <Infobox 166 {/* ===== Workspaces empty state ===== */}
191 icon="alert" 167 <p className="settings__empty-text">
192 type="danger" 168 <span className="emoji">
193 ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} 169 <img src="./assets/images/emoji/sad.png" alt="" />
194 ctaLoading={getUserWorkspacesRequest.isExecuting} 170 </span>
195 ctaOnClick={getUserWorkspacesRequest.retry} 171 {intl.formatMessage(messages.noServicesAdded)}
196 > 172 </p>
197 {intl.formatMessage(messages.workspacesRequestFailed)} 173 </div>
198 </Infobox>
199 ) : ( 174 ) : (
200 <> 175 <table className={classes.table}>
201 {workspaces.length === 0 ? ( 176 {/* ===== Workspaces list ===== */}
202 <div className="align-middle settings__empty-state"> 177 <tbody>
203 {/* ===== Workspaces empty state ===== */} 178 {workspaces.map(workspace => (
204 <p className="settings__empty-text"> 179 <WorkspaceItem
205 <span className="emoji"> 180 key={workspace.id}
206 <img src="./assets/images/emoji/sad.png" alt="" /> 181 workspace={workspace}
207 </span> 182 onItemClick={w => onWorkspaceClick(w)}
208 {intl.formatMessage(messages.noServicesAdded)} 183 />
209 </p> 184 ))}
210 </div> 185 </tbody>
211 ) : ( 186 </table>
212 <table className={classes.table}>
213 {/* ===== Workspaces list ===== */}
214 <tbody>
215 {workspaces.map(workspace => (
216 <WorkspaceItem
217 key={workspace.id}
218 workspace={workspace}
219 onItemClick={w => onWorkspaceClick(w)}
220 />
221 ))}
222 </tbody>
223 </table>
224 )}
225 </>
226 )} 187 )}
227 </> 188 </>
228 )} 189 )}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 632f3c299..8c73516bc 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -22,10 +22,6 @@ export default class WorkspacesStore extends FeatureStore {
22 22
23 @observable isFeatureActive = false; 23 @observable isFeatureActive = false;
24 24
25 @observable isPremiumFeature = false;
26
27 @observable isPremiumUpgradeRequired = false;
28
29 @observable activeWorkspace = null; 25 @observable activeWorkspace = null;
30 26
31 @observable nextWorkspace = null; 27 @observable nextWorkspace = null;
@@ -58,7 +54,6 @@ export default class WorkspacesStore extends FeatureStore {
58 54
59 @computed get isUserAllowedToUseFeature() { 55 @computed get isUserAllowedToUseFeature() {
60 return true; 56 return true;
61 // return !this.isPremiumUpgradeRequired;
62 } 57 }
63 58
64 @computed get isAnyWorkspaceActive() { 59 @computed get isAnyWorkspaceActive() {
@@ -69,16 +64,8 @@ export default class WorkspacesStore extends FeatureStore {
69 64
70 _wasDrawerOpenBeforeSettingsRoute = null; 65 _wasDrawerOpenBeforeSettingsRoute = null;
71 66
72 _freeUserActions = [];
73
74 _premiumUserActions = [];
75
76 _allActions = []; 67 _allActions = [];
77 68
78 _freeUserReactions = [];
79
80 _premiumUserReactions = [];
81
82 _allReactions = []; 69 _allReactions = [];
83 70
84 // ========== PUBLIC API ========= // 71 // ========== PUBLIC API ========= //
@@ -90,11 +77,9 @@ export default class WorkspacesStore extends FeatureStore {
90 77
91 // ACTIONS 78 // ACTIONS
92 79
93 this._freeUserActions = createActionBindings([ 80 this._allActions = createActionBindings([
94 [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer], 81 [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
95 [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings], 82 [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
96 ]);
97 this._premiumUserActions = createActionBindings([
98 [workspaceActions.edit, this._edit], 83 [workspaceActions.edit, this._edit],
99 [workspaceActions.create, this._create], 84 [workspaceActions.create, this._create],
100 [workspaceActions.delete, this._delete], 85 [workspaceActions.delete, this._delete],
@@ -106,27 +91,18 @@ export default class WorkspacesStore extends FeatureStore {
106 this._toggleKeepAllWorkspacesLoadedSetting, 91 this._toggleKeepAllWorkspacesLoadedSetting,
107 ], 92 ],
108 ]); 93 ]);
109 this._allActions = this._freeUserActions.concat(this._premiumUserActions);
110 this._registerActions(this._allActions); 94 this._registerActions(this._allActions);
111 95
112 // REACTIONS 96 // REACTIONS
113 97
114 this._freeUserReactions = createReactions([ 98 this._allReactions = createReactions([
115 this._disablePremiumFeatures,
116 this._openDrawerWithSettingsReaction, 99 this._openDrawerWithSettingsReaction,
117 this._setFeatureEnabledReaction, 100 this._setFeatureEnabledReaction,
118 this._setIsPremiumFeatureReaction,
119 this._cleanupInvalidServiceReferences, 101 this._cleanupInvalidServiceReferences,
120 ]);
121 this._premiumUserReactions = createReactions([
122 this._setActiveServiceOnWorkspaceSwitchReaction, 102 this._setActiveServiceOnWorkspaceSwitchReaction,
123 this._activateLastUsedWorkspaceReaction, 103 this._activateLastUsedWorkspaceReaction,
124 this._setWorkspaceBeingEditedReaction, 104 this._setWorkspaceBeingEditedReaction,
125 ]); 105 ]);
126 this._allReactions = this._freeUserReactions.concat(
127 this._premiumUserReactions,
128 );
129
130 this._registerReactions(this._allReactions); 106 this._registerReactions(this._allReactions);
131 107
132 getUserWorkspacesRequest.execute(); 108 getUserWorkspacesRequest.execute();
@@ -273,13 +249,6 @@ export default class WorkspacesStore extends FeatureStore {
273 this.isFeatureEnabled = isWorkspaceEnabled; 249 this.isFeatureEnabled = isWorkspaceEnabled;
274 }; 250 };
275 251
276 _setIsPremiumFeatureReaction = () => {
277 // const { features } = this.stores;
278 // const { isWorkspaceIncludedInCurrentPlan } = features.features;
279 // this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
280 // this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan;
281 };
282
283 _setWorkspaceBeingEditedReaction = () => { 252 _setWorkspaceBeingEditedReaction = () => {
284 const { pathname } = this.stores.router.location; 253 const { pathname } = this.stores.router.location;
285 const match = matchRoute('/settings/workspaces/edit/:id', pathname); 254 const match = matchRoute('/settings/workspaces/edit/:id', pathname);
@@ -357,16 +326,4 @@ export default class WorkspacesStore extends FeatureStore {
357 }); 326 });
358 }); 327 });
359 }; 328 };
360
361 _disablePremiumFeatures = () => {
362 if (!this.isUserAllowedToUseFeature) {
363 debug('_disablePremiumFeatures');
364 this._stopActions(this._premiumUserActions);
365 this._stopReactions(this._premiumUserReactions);
366 this.reset();
367 } else {
368 this._startActions(this._premiumUserActions);
369 this._startReactions(this._premiumUserReactions);
370 }
371 };
372} 329}