add workspace feature info in drawer for free users

3 files changed, 70 insertions, 28 deletions

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;
   }