4 files changed, 38 insertions, 4 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 953f702f8..993b0a44a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -2,8 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
+import { ProBadge } from '@meetfranz/ui';
 
 import Link from '../../ui/Link';
+import { workspaceStore } from '../../../features/workspaces';
+import UIStore from '../../../stores/UIStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -14,6 +17,10 @@ const messages = defineMessages({
     id: 'settings.navigation.yourServices',
     defaultMessage: '!!!Your services',
   },
+  yourWorkspaces: {
+    id: 'settings.navigation.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
   account: {
     id: 'settings.navigation.account',
     defaultMessage: '!!!Account',
@@ -34,7 +41,11 @@ const messages = defineMessages({
 
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
     serviceCount: PropTypes.number.isRequired,
+    workspaceCount: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -42,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount } = this.props;
+    const { serviceCount, workspaceCount, stores } = this.props;
+    const { isDarkThemeActive } = stores.ui;
     const { intl } = this.context;
 
     return (
@@ -63,6 +75,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
+        {workspaceStore.isFeatureEnabled ? (
+          <Link
+            to="/settings/workspaces"
+            className="settings-navigation__link"
+            activeClassName="is-active"
+          >
+            {intl.formatMessage(messages.yourWorkspaces)}
+            {' '}
+            {workspaceStore.isPremiumUpgradeRequired ? (
+              <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} />
+            ) : (
+              <span className="badge">{workspaceCount}</span>
+            )}
+          </Link>
+        ) : null}
         <Link
           to="/settings/user"
           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/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a12df7372..53bae12df 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -65,7 +65,7 @@ export default @observer class ServicesDashboard extends Component {
 
   static defaultProps = {
     searchNeedle: '',
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
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