5 files changed, 59 insertions, 18 deletions

diff --git a/packages/ui/src/badge/ProBadge.tsx b/packages/ui/src/badge/ProBadge.tsx
index eb00e156d..612e23210 100644
--- a/packages/ui/src/badge/ProBadge.tsx
+++ b/packages/ui/src/badge/ProBadge.tsx
@@ -47,7 +47,6 @@ class ProBadgeComponent extends Component<IProps> {
           inverted && classes.invertedBadge,
           badgeClasses,
         ])}
-        data-type="franz-badge"
       >
         <Icon
           icon="mdiStar"
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index d48b55f12..64c98dc63 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import { defineMessages, FormattedHTMLMessage, intlShape } from 'react-intl';
-import { H1, Icon } from '@meetfranz/ui';
+import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
@@ -41,6 +41,10 @@ const messages = defineMessages({
     id: 'workspaceDrawer.addNewWorkspaceLabel',
     defaultMessage: '!!!add new workspace',
   },
+  premiumFeatureBadge: {
+    id: 'workspaceDrawer.proFeatureBadge',
+    defaultMessage: '!!!Premium feature',
+  },
 });
 
 const styles = theme => ({
@@ -54,6 +58,9 @@ const styles = theme => ({
     marginBottom: '25px',
     marginLeft: theme.workspaces.drawer.padding,
   },
+  headlineProBadge: {
+    marginRight: 15,
+  },
   workspacesSettingsButton: {
     float: 'right',
     marginRight: theme.workspaces.drawer.padding,
@@ -134,6 +141,14 @@ class WorkspaceDrawer extends Component {
     return (
       <div className={classes.drawer}>
         <H1 className={classes.headline}>
+          {workspaceStore.isPremiumUpgradeRequired && (
+            <span
+              className={classes.headlineProBadge}
+              data-tip={`${intl.formatMessage(messages.premiumFeatureBadge)}`}
+            >
+              <ProBadge />
+            </span>
+          )}
           {intl.formatMessage(messages.headline)}
           <span
             className={classes.workspacesSettingsButton}
@@ -203,24 +218,24 @@ class WorkspaceDrawer extends Component {
                 services={getServicesForWorkspace(workspace)}
               />
             ))}
+            <div
+              className={classes.addNewWorkspaceLabel}
+              onClick={() => {
+                workspaceActions.openWorkspaceSettings();
+                gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel');
+              }}
+            >
+              <Icon
+                icon="mdiPlusBox"
+                size={1}
+                className={classes.workspacesSettingsButtonIcon}
+              />
+              <span>
+                {intl.formatMessage(messages.addNewWorkspaceLabel)}
+              </span>
+            </div>
           </div>
         )}
-        <div
-          className={classes.addNewWorkspaceLabel}
-          onClick={() => {
-            workspaceActions.openWorkspaceSettings();
-            gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerAddLabel');
-          }}
-        >
-          <Icon
-            icon="mdiPlusBox"
-            size={1}
-            className={classes.workspacesSettingsButtonIcon}
-          />
-          <span>
-            {intl.formatMessage(messages.addNewWorkspaceLabel)}
-          </span>
-        </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
       </div>
     );
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 791c4dd53..11a23805c 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3412,6 +3412,19 @@
           "column": 24,
           "line": 40
         }
+      },
+      {
+        "defaultMessage": "!!!Premium feature",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.proFeatureBadge",
+        "start": {
+          "column": 23,
+          "line": 44
+        }
       }
     ],
     "path": "src/features/workspaces/components/WorkspaceDrawer.json"
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 6591af2e2..a2f460f67 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -311,6 +311,7 @@
   "workspaceDrawer.headline": "Workspaces",
   "workspaceDrawer.item.noServicesAddedYet": "No services added yet",
   "workspaceDrawer.premiumCtaButtonLabel": "Create your first workspace",
+  "workspaceDrawer.proFeatureBadge": "Premium feature",
   "workspaceDrawer.reactivatePremiumAccountLabel": "Reactivate premium account",
   "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>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index d347622d2..9f0935620 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -89,5 +89,18 @@
       "line": 43,
       "column": 3
     }
+  },
+  {
+    "id": "workspaceDrawer.proFeatureBadge",
+    "defaultMessage": "!!!Premium feature",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 44,
+      "column": 23
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file