add workspace premium notice to dashboard

6 files changed, 32 insertions, 7 deletions

diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 4fa5e79de..327f76392 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -90,7 +90,7 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
-        {workspaceStore.isFeatureActive ? (
+        {workspaceStore.isFeatureEnabled ? (
           <button
             type="button"
             onClick={() => {
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index a0eb7d796..dc3c1d6f1 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -69,7 +69,7 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
-        {workspaceStore.isFeatureActive ? (
+        {workspaceStore.isFeatureEnabled ? (
           <Link
             to="/settings/workspaces"
             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/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
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..615ed0a79 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -26,7 +27,7 @@ export default theme => ({
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },