add workspace premium notice to dashboard

19 files changed, 230 insertions, 83 deletions

diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
index 6571e9441..2bc7d2711 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.js
@@ -9,6 +9,10 @@ export const createActionsFromDefinitions = (actionDefinitions, validate) => {
     actions[actionName] = action;
     action.listeners = [];
     action.listen = listener => action.listeners.push(listener);
+    action.off = (listener) => {
+      const { listeners } = action;
+      listeners.splice(listeners.indexOf(listener), 1);
+    };
     action.notify = params => action.listeners.forEach(listener => listener(params));
   });
   return actions;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 4fa5e79de..327f76392 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -90,7 +90,7 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {workspaceStore.isFeatureActive ? (
+        {workspaceStore.isFeatureEnabled ? (
           <button
             type="button"
             onClick={() => {
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index a0eb7d796..dc3c1d6f1 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -69,7 +69,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
-        {workspaceStore.isFeatureActive ? (
+        {workspaceStore.isFeatureEnabled ? (
           <Link
             to="/settings/workspaces"
             className="settings-navigation__link"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 21616b5de..4ba2eb844 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -341,14 +341,20 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer condition={isSpellcheckerPremiumFeature}>
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+            >
               <div className="settings__settings-group">
                 <Select field={form.$('spellcheckerLanguage')} />
               </div>
             </PremiumFeatureContainer>
 
             {isProxyFeatureEnabled && (
-              <PremiumFeatureContainer condition={isProxyPremiumFeature}>
+              <PremiumFeatureContainer
+                condition={isProxyPremiumFeature}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
+              >
                 <div className="settings__settings-group">
                   <h3>
                     {intl.formatMessage(messages.headlineProxy)}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a92e559f3..8429d0ecb 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -170,6 +170,7 @@ export default @observer class EditSettingsForm extends Component {
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
                 <Toggle
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..615ed0a79 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -26,7 +27,7 @@ export default theme => ({
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },
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;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 659b1b361..1747e1976 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2535,13 +2535,13 @@
         "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/components/ui/PremiumFeatureContainer/index.js",
         "id": "premiumFeature.button.upgradeAccount",
         "start": {
           "column": 10,
-          "line": 14
+          "line": 15
         }
       }
     ],
@@ -3388,78 +3388,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 20
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 24
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 19
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 28
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 23
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 32
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 27
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 36
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 31
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 40
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 35
+          "line": 37
+        }
+      },
+      {
+        "defaultMessage": "!!!Info about workspace feature",
+        "end": {
+          "column": 3,
+          "line": 44
+        },
+        "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+        "id": "settings.workspaces.workspaceFeatureInfo",
+        "start": {
+          "column": 24,
+          "line": 41
+        }
+      },
+      {
+        "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
+        "end": {
+          "column": 3,
+          "line": 48
+        },
+        "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+        "id": "settings.workspaces.workspaceFeatureHeadline",
+        "start": {
+          "column": 28,
+          "line": 45
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 5f7254317..987262c35 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -254,6 +254,8 @@
   "settings.workspaces.noWorkspacesAdded": "You haven't added any workspaces yet.",
   "settings.workspaces.tryReloadWorkspaces": "Try again",
   "settings.workspaces.updatedInfo": "Your changes have been saved",
+  "settings.workspaces.workspaceFeatureHeadline": "Less is More: Introducing Franz Workspaces",
+  "settings.workspaces.workspaceFeatureInfo": "Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.",
   "settings.workspaces.workspacesRequestFailed": "Could not load your workspaces",
   "sidebar.addNewService": "Add new service",
   "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
diff --git a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
index 582d546fa..320d3ca3e 100644
--- a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
+++ b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Upgrade account",
     "file": "src/components/ui/PremiumFeatureContainer/index.js",
     "start": {
-      "line": 14,
+      "line": 15,
       "column": 10
     },
     "end": {
-      "line": 17,
+      "line": 18,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index a957358c8..ef8f1bebc 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 15,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 19,
+      "line": 21,
       "column": 19
     },
     "end": {
-      "line": 22,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 23,
+      "line": 25,
       "column": 27
     },
     "end": {
-      "line": 26,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 27,
+      "line": 29,
       "column": 23
     },
     "end": {
-      "line": 30,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 31,
+      "line": 33,
       "column": 15
     },
     "end": {
-      "line": 34,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,37 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 35,
+      "line": 37,
       "column": 15
     },
     "end": {
-      "line": 38,
+      "line": 40,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.workspaces.workspaceFeatureInfo",
+    "defaultMessage": "!!!Info about workspace feature",
+    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+    "start": {
+      "line": 41,
+      "column": 24
+    },
+    "end": {
+      "line": 44,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.workspaces.workspaceFeatureHeadline",
+    "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
+    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
+    "start": {
+      "line": 45,
+      "column": 28
+    },
+    "end": {
+      "line": 48,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index d19aa9d6e..a4e41c17c 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -323,7 +323,7 @@ const _templateFactory = intl => [
   {
     label: intl.formatMessage(menuItems.workspaces),
     submenu: [],
-    visible: workspaceStore.isFeatureActive,
+    visible: workspaceStore.isFeatureEnabled,
   },
   {
     label: intl.formatMessage(menuItems.window),
@@ -732,7 +732,7 @@ export default class FranzMenu {
       tpl[3].submenu = serviceTpl;
     }
 
-    if (workspaceStore.isFeatureActive) {
+    if (workspaceStore.isFeatureEnabled) {
       tpl[4].submenu = this.workspacesMenu();
     }
 
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 2bda82e17..52e38ad96 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -1,4 +1,4 @@
-import { computed, observable, reaction } from 'mobx';
+import { computed, observable, reaction, runInAction } from 'mobx';
 
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
@@ -17,8 +17,11 @@ export default class FeaturesStore extends Store {
 
   @observable featuresRequest = new CachedRequest(this.api.features, 'features');
 
+  @observable features = Object.assign({}, DEFAULT_FEATURES_CONFIG);
+
   async setup() {
     this.registerReactions([
+      this._updateFeatures,
       this._monitorLoginStatus.bind(this),
     ]);
 
@@ -37,13 +40,16 @@ export default class FeaturesStore extends Store {
     return this.defaultFeaturesRequest.execute().result || DEFAULT_FEATURES_CONFIG;
   }
 
-  @computed get features() {
+  _updateFeatures = () => {
+    const features = Object.assign({}, DEFAULT_FEATURES_CONFIG);
     if (this.stores.user.isLoggedIn) {
-      return Object.assign({}, DEFAULT_FEATURES_CONFIG, this.featuresRequest.execute().result);
+      const requestResult = this.featuresRequest.execute().result;
+      Object.assign(features, requestResult);
     }
-
-    return DEFAULT_FEATURES_CONFIG;
-  }
+    runInAction('FeaturesStore::_updateFeatures', () => {
+      this.features = features;
+    });
+  };
 
   _monitorLoginStatus() {
     if (this.stores.user.isLoggedIn) {