add workspace premium notice to dashboard

6 files changed, 98 insertions, 40 deletions

diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index abc8274cf..67f0fc5e6 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -55,7 +55,7 @@ export default function init(stores) {
 
             setVisibility(true);
             gaPage('/delayApp');
-            gaEvent('delayApp', 'show', 'Delay App Feature');
+            gaEvent('DelayApp', 'show', 'Delay App Feature');
 
             timeLastDelay = moment();
             shownAfterLaunch = true;
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
new file mode 100644
index 000000000..66b66a104
--- /dev/null
+++ b/src/features/utils/FeatureStore.js
@@ -0,0 +1,21 @@
+import Reaction from '../../stores/lib/Reaction';
+
+export class FeatureStore {
+  _actions = null;
+
+  _reactions = null;
+
+  _listenToActions(actions) {
+    if (this._actions) this._actions.forEach(a => a[0].off(a[1]));
+    this._actions = [];
+    actions.forEach(a => this._actions.push(a));
+    this._actions.forEach(a => a[0].listen(a[1]));
+  }
+
+  _startReactions(reactions) {
+    if (this._reactions) this._reactions.forEach(r => r.stop());
+    this._reactions = [];
+    reactions.forEach(r => this._reactions.push(new Reaction(r)));
+    this._reactions.forEach(r => r.start());
+  }
+}
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index a8f07d0d5..0be2d528f 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -30,7 +30,6 @@ const styles = () => ({
   },
   submitButton: {
     height: 'inherit',
-    marginTop: '3px',
   },
 });
 
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 52c3afdcf..1fad1f71d 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -10,6 +10,8 @@ import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
+import { workspaceStore } from '../index';
+import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
 
 const messages = defineMessages({
   headline: {
@@ -36,6 +38,14 @@ const messages = defineMessages({
     id: 'settings.workspaces.deletedInfo',
     defaultMessage: '!!!Workspace has been deleted',
   },
+  workspaceFeatureInfo: {
+    id: 'settings.workspaces.workspaceFeatureInfo',
+    defaultMessage: '!!!Info about workspace feature',
+  },
+  workspaceFeatureHeadline: {
+    id: 'settings.workspaces.workspaceFeatureHeadline',
+    defaultMessage: '!!!Less is More: Introducing Franz Workspaces',
+  },
 });
 
 const styles = () => ({
@@ -46,6 +56,12 @@ const styles = () => ({
   appear: {
     height: 'auto',
   },
+  premiumAnnouncement: {
+    padding: '20px',
+    backgroundColor: '#3498db',
+    marginLeft: '-20px',
+    height: 'auto',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -112,14 +128,24 @@ class WorkspacesDashboard extends Component {
             </Appear>
           )}
 
-          {/* ===== Create workspace form ===== */}
-          <div className={classes.createForm}>
-            <CreateWorkspaceForm
-              isSubmitting={createWorkspaceRequest.isExecuting}
-              onSubmit={onCreateWorkspaceSubmit}
-            />
-          </div>
-
+          <PremiumFeatureContainer
+            condition={workspaceStore.isPremiumFeature}
+            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
+          >
+            {/* ===== Create workspace form ===== */}
+            <div className={classes.createForm}>
+              <CreateWorkspaceForm
+                isSubmitting={createWorkspaceRequest.isExecuting}
+                onSubmit={onCreateWorkspaceSubmit}
+              />
+            </div>
+          </PremiumFeatureContainer>
+          {workspaceStore.isUpgradeToPremiumRequired && (
+            <div className={classes.premiumAnnouncement}>
+              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
+              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+            </div>
+          )}
           {getUserWorkspacesRequest.isExecuting ? (
             <Loader />
           ) : (
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
index 89999ab0f..524a83e3c 100644
--- a/src/features/workspaces/index.js
+++ b/src/features/workspaces/index.js
@@ -4,11 +4,12 @@ import { resetApiRequests } from './api';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
-export const GA_CATEGORY_WORKSPACES = 'workspaces';
+export const GA_CATEGORY_WORKSPACES = 'Workspaces';
 
 export const workspaceStore = new WorkspacesStore();
 
 export default function initWorkspaces(stores, actions) {
+  stores.workspaces = workspaceStore;
   const { features, user } = stores;
 
   // Toggle workspace feature
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index f7df7b29c..62bf3efb4 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -3,9 +3,9 @@ import {
   observable,
   action,
 } from 'mobx';
-import Reaction from '../../stores/lib/Reaction';
 import { matchRoute } from '../../helpers/routing-helpers';
 import { workspaceActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
 import {
   createWorkspaceRequest,
   deleteWorkspaceRequest,
@@ -15,7 +15,11 @@ import {
 
 const debug = require('debug')('Franz:feature:workspaces:store');
 
-export default class WorkspacesStore {
+export default class WorkspacesStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isPremiumFeature = true;
+
   @observable isFeatureActive = false;
 
   @observable activeWorkspace = null;
@@ -33,36 +37,39 @@ export default class WorkspacesStore {
     return getUserWorkspacesRequest.result || [];
   }
 
-  constructor() {
-    // Wire-up action handlers
-    workspaceActions.edit.listen(this._edit);
-    workspaceActions.create.listen(this._create);
-    workspaceActions.delete.listen(this._delete);
-    workspaceActions.update.listen(this._update);
-    workspaceActions.activate.listen(this._setActiveWorkspace);
-    workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
-    workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
-    workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
-
-    // Register and start reactions
-    this._registerReactions([
-      this._updateWorkspaceBeingEdited,
-      this._updateActiveServiceOnWorkspaceSwitch,
-    ]);
+  @computed get isUpgradeToPremiumRequired() {
+    return this.isFeatureEnabled && !this.isFeatureActive;
   }
 
   start(stores, actions) {
     debug('WorkspacesStore::start');
     this.stores = stores;
     this.actions = actions;
-    this._reactions.forEach(r => r.start());
-    this.isFeatureActive = true;
+
+    this._listenToActions([
+      [workspaceActions.edit, this._edit],
+      [workspaceActions.create, this._create],
+      [workspaceActions.delete, this._delete],
+      [workspaceActions.update, this._update],
+      [workspaceActions.activate, this._setActiveWorkspace],
+      [workspaceActions.deactivate, this._deactivateActiveWorkspace],
+      [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
+      [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
+    ]);
+
+    this._startReactions([
+      this._setWorkspaceBeingEditedReaction,
+      this._setActiveServiceOnWorkspaceSwitchReaction,
+      this._setFeatureEnabledReaction,
+      this._setIsPremiumFeatureReaction,
+    ]);
+
     getUserWorkspacesRequest.execute();
+    this.isFeatureActive = true;
   }
 
   stop() {
     debug('WorkspacesStore::stop');
-    this._reactions.forEach(r => r.stop());
     this.isFeatureActive = false;
     this.activeWorkspace = null;
     this.nextWorkspace = null;
@@ -85,12 +92,6 @@ export default class WorkspacesStore {
 
   // ========== PRIVATE ========= //
 
-  _reactions = [];
-
-  _registerReactions(reactions) {
-    reactions.forEach(r => this._reactions.push(new Reaction(r)));
-  }
-
   _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
   // Actions
@@ -164,7 +165,17 @@ export default class WorkspacesStore {
 
   // Reactions
 
-  _updateWorkspaceBeingEdited = () => {
+  _setFeatureEnabledReaction = () => {
+    const { isWorkspaceEnabled } = this.stores.features.features;
+    this.isFeatureEnabled = isWorkspaceEnabled;
+  };
+
+  _setIsPremiumFeatureReaction = () => {
+    const { isWorkspacePremiumFeature } = this.stores.features.features;
+    this.isPremiumFeature = isWorkspacePremiumFeature;
+  };
+
+  _setWorkspaceBeingEditedReaction = () => {
     const { pathname } = this.stores.router.location;
     const match = matchRoute('/settings/workspaces/edit/:id', pathname);
     if (match) {
@@ -172,7 +183,7 @@ export default class WorkspacesStore {
     }
   };
 
-  _updateActiveServiceOnWorkspaceSwitch = () => {
+  _setActiveServiceOnWorkspaceSwitchReaction = () => {
     if (!this.isFeatureActive) return;
     if (this.activeWorkspace) {
       const services = this.stores.services.allDisplayed;