add workspace feature info in drawer for free users

7 files changed, 137 insertions, 43 deletions

diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 94883ad17..79a2172b4 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -14,8 +14,6 @@ export default function init(stores) {
   autorun(() => {
     const { isSpellcheckerPremiumFeature } = stores.features.features;
 
-    console.log('isSpellcheckerPremiumFeature', isSpellcheckerPremiumFeature);
-
     config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
 
     if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 4d48c45ef..6eacafa68 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -2,8 +2,9 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
 import { H1, Icon } from '@meetfranz/ui';
+import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
@@ -24,6 +25,14 @@ const messages = defineMessages({
     id: 'workspaceDrawer.addWorkspaceTooltip',
     defaultMessage: '!!!Add workspace',
   },
+  workspaceFeatureInfo: {
+    id: 'workspaceDrawer.workspaceFeatureInfo',
+    defaultMessage: '!!!Info about workspace feature',
+  },
+  premiumCtaButtonLabel: {
+    id: 'workspaceDrawer.premiumCtaButtonLabel',
+    defaultMessage: '!!!Create your first workspace',
+  },
 });
 
 const styles = theme => ({
@@ -48,6 +57,19 @@ const styles = theme => ({
       fill: theme.workspaceDrawerAddButtonHoverColor,
     },
   },
+  workspaces: {
+    height: 'auto',
+  },
+  premiumAnnouncement: {
+    padding: '20px',
+    paddingTop: '0',
+    height: 'auto',
+  },
+  premiumCtaButton: {
+    marginTop: '20px',
+    width: '100%',
+    color: 'white !important',
+  },
 });
 
 @injectSheet(styles) @observer
@@ -84,7 +106,10 @@ class WorkspaceDrawer extends Component {
           {intl.formatMessage(messages.headline)}
           <span
             className={classes.addWorkspaceButton}
-            onClick={workspaceActions.openWorkspaceSettings}
+            onClick={() => {
+              workspaceActions.openWorkspaceSettings();
+              gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerHeadline');
+            }}
             data-tip={`${intl.formatMessage(messages.addWorkspaceTooltip)}`}
           >
             <Icon
@@ -94,29 +119,45 @@ class WorkspaceDrawer extends Component {
             />
           </span>
         </H1>
-        <div className={classes.workspaces}>
-          <WorkspaceDrawerItem
-            name={intl.formatMessage(messages.allServices)}
-            onClick={() => {
-              workspaceActions.deactivate();
-              gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer');
-            }}
-            services={getServicesForWorkspace(null)}
-            isActive={actualWorkspace == null}
-          />
-          {workspaces.map(workspace => (
+        {workspaceStore.isPremiumUpgradeRequired ? (
+          <div className={classes.premiumAnnouncement}>
+            <FormattedHTMLMessage {...messages.workspaceFeatureInfo} />
+            <Button
+              className={classes.premiumCtaButton}
+              buttonType="primary"
+              label={intl.formatMessage(messages.premiumCtaButtonLabel)}
+              icon="mdiPlusBox"
+              onClick={() => {
+                workspaceActions.openWorkspaceSettings();
+                gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta');
+              }}
+            />
+          </div>
+        ) : (
+          <div className={classes.workspaces}>
             <WorkspaceDrawerItem
-              key={workspace.id}
-              name={workspace.name}
-              isActive={actualWorkspace === workspace}
+              name={intl.formatMessage(messages.allServices)}
               onClick={() => {
-                workspaceActions.activate({ workspace });
+                workspaceActions.deactivate();
                 gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer');
               }}
-              services={getServicesForWorkspace(workspace)}
+              services={getServicesForWorkspace(null)}
+              isActive={actualWorkspace == null}
             />
-          ))}
-        </div>
+            {workspaces.map(workspace => (
+              <WorkspaceDrawerItem
+                key={workspace.id}
+                name={workspace.name}
+                isActive={actualWorkspace === workspace}
+                onClick={() => {
+                  workspaceActions.activate({ workspace });
+                  gaEvent(GA_CATEGORY_WORKSPACES, 'switch', 'drawer');
+                }}
+                services={getServicesForWorkspace(workspace)}
+              />
+            ))}
+          </div>
+        )}
         <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 1fad1f71d..b141dc960 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -51,7 +51,6 @@ const messages = defineMessages({
 const styles = () => ({
   createForm: {
     height: 'auto',
-    marginBottom: '20px',
   },
   appear: {
     height: 'auto',
@@ -60,6 +59,7 @@ const styles = () => ({
     padding: '20px',
     backgroundColor: '#3498db',
     marginLeft: '-20px',
+    marginBottom: '20px',
     height: 'auto',
   },
 });
@@ -128,6 +128,13 @@ class WorkspacesDashboard extends Component {
             </Appear>
           )}
 
+          {workspaceStore.isPremiumUpgradeRequired && (
+            <div className={classes.premiumAnnouncement}>
+              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
+              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+            </div>
+          )}
+
           <PremiumFeatureContainer
             condition={workspaceStore.isPremiumFeature}
             gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
@@ -140,12 +147,6 @@ class WorkspacesDashboard extends Component {
               />
             </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/store.js b/src/features/workspaces/store.js
index 62bf3efb4..712945bdc 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -37,7 +37,7 @@ export default class WorkspacesStore extends FeatureStore {
     return getUserWorkspacesRequest.result || [];
   }
 
-  @computed get isUpgradeToPremiumRequired() {
+  @computed get isPremiumUpgradeRequired() {
     return this.isFeatureEnabled && !this.isFeatureActive;
   }
 
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 1747e1976..a8f4a2cbf 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3326,39 +3326,65 @@
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.allServices",
         "start": {
           "column": 15,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Add workspace",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.addWorkspaceTooltip",
         "start": {
           "column": 23,
-          "line": 23
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Info about workspace feature",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.workspaceFeatureInfo",
+        "start": {
+          "column": 24,
+          "line": 28
+        }
+      },
+      {
+        "defaultMessage": "!!!Create your first workspace",
+        "end": {
+          "column": 3,
+          "line": 35
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.premiumCtaButton",
+        "start": {
+          "column": 20,
+          "line": 32
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 987262c35..981946d00 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -310,5 +310,7 @@
   "workspaceDrawer.allServices": "All services",
   "workspaceDrawer.headline": "Workspaces",
   "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
+  "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace",
+  "workspaceDrawer.workspaceFeatureInfo": "<p>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.</p><p>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.</p>",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index 7026708e2..acd304253 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!All services",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 15
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -30,11 +30,37 @@
     "defaultMessage": "!!!Add workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 23
     },
     "end": {
-      "line": 26,
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "workspaceDrawer.workspaceFeatureInfo",
+    "defaultMessage": "!!!Info about workspace feature",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 28,
+      "column": 24
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  },
+  {
+    "id": "workspaceDrawer.premiumCtaButtonLabel",
+    "defaultMessage": "!!!Create your first workspace",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 32,
+      "column": 25
+    },
+    "end": {
+      "line": 35,
       "column": 3
     }
   }