add workspace premium notice to dashboard

2 files changed, 34 insertions, 9 deletions

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 />
           ) : (