5 files changed, 126 insertions, 20 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b5c048ebd..b87c11fc4 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -8,6 +8,7 @@ import Form from '../../../lib/Form';
 import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 
 import { FRANZ_TRANSLATION } from '../../../config';
 
@@ -95,6 +96,8 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
+    isPremiumUser: PropTypes.bool.isRequired,
+    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -124,6 +127,8 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
+      isPremiumUser,
+      isSpellcheckerPremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -175,7 +180,16 @@ export default @observer class EditSettingsForm extends Component {
 
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
-            <Toggle field={form.$('enableSpellchecking')} />
+            {!isPremiumUser && isSpellcheckerPremiumFeature ? (
+              <PremiumFeatureContainer>
+                <Toggle
+                  field={form.$('enableSpellchecking')}
+                  disabled
+                />
+              </PremiumFeatureContainer>
+            ) : (
+              <Toggle field={form.$('enableSpellchecking')} />
+            )}
             <Toggle field={form.$('enableGPUAcceleration')} />
             <p className="settings__help">{intl.formatMessage(messages.enableGPUAccelerationInfo)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 5992e4204..8b8fd4f18 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -36,26 +36,25 @@ const messages = defineMessages({
     defaultMessage: '!!!The Franz Premium Supporter Account includes',
   },
   features: {
-    unlimitedServices: {
-      id: 'subscription.features.unlimitedServices',
-      defaultMessage: '!!!Add unlimited services',
-    },
     onpremise: {
-      id: 'subscription.features.onpremise',
-      defaultMessage: '!!!Add on-premise/hosted services like HipChat',
-    },
-    customServices: {
-      id: 'subscription.features.customServices',
-      defaultMessage: '!!!Add your custom services',
+      id: 'subscription.features.onpremise.mattermost',
+      defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
     },
     encryptedSync: {
       id: 'subscription.features.encryptedSync',
       defaultMessage: '!!!Encrypted session synchronization',
+    noInterruptions: {
+      id: 'subscription.features.noInterruptions',
+      defaultMessage: '!!!No app delays & nagging to upgrade license',
     },
     vpn: {
       id: 'subscription.features.vpn',
       defaultMessage: '!!!Proxy & VPN support',
     },
+    spellchecker: {
+      id: 'subscription.features.spellchecker',
+      defaultMessage: '!!!Support for Spellchecker',
+    },
     ads: {
       id: 'subscription.features.ads',
       defaultMessage: '!!!No ads, ever!',
@@ -170,16 +169,10 @@ export default @observer class SubscriptionForm extends Component {
                 <ul className="subscription__premium-features">
                   <li>{intl.formatMessage(messages.features.onpremise)}</li>
                   <li>
-                    {intl.formatMessage(messages.features.encryptedSync)}
-                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
-                  </li>
-                  <li>
-                    {intl.formatMessage(messages.features.customServices)}
-                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    {intl.formatMessage(messages.features.noInterruptions)}
                   </li>
                   <li>
-                    {intl.formatMessage(messages.features.vpn)}
-                    <span className="badge">{intl.formatMessage(messages.features.comingSoon)}</span>
+                    {intl.formatMessage(messages.features.spellchecker)}
                   </li>
                   <li>
                     {intl.formatMessage(messages.features.ads)}
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
new file mode 100644
index 000000000..113fe2221
--- /dev/null
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -0,0 +1,64 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import { oneOrManyChildElements } from '../../../prop-types';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  action: {
+    id: 'premiumFeature.button.upgradeAccount',
+    defaultMessage: '!!!Upgrade account',
+  },
+});
+
+export default @inject('actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      classes,
+      children,
+      actions,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.container}>
+        <div className={classes.titleContainer}>
+          <p className={classes.title}>Premium Feature</p>
+          <button
+            className={classes.actionButton}
+            type="button"
+            onClick={() => actions.ui.openSettings({ path: 'user' })}
+          >
+            {intl.formatMessage(messages.action)}
+          </button>
+        </div>
+        <div className={classes.content}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+}
+
+PremiumFeatureContainer.wrappedComponent.propTypes = {
+  children: oneOrManyChildElements.isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
+
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
new file mode 100644
index 000000000..16c40d0ec
--- /dev/null
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -0,0 +1,31 @@
+export default theme => ({
+  container: {
+    background: theme.colorSubscriptionContainerBackground,
+    border: theme.colorSubscriptionContainerBorder,
+    margin: [0, 0, 20, -20],
+    padding: 20,
+    'border-radius': theme.borderRadius,
+  },
+  titleContainer: {
+    display: 'flex',
+  },
+  title: {
+    'font-weight': 'bold',
+    color: theme.colorSubscriptionContainerTitle,
+  },
+  actionButton: {
+    background: theme.colorSubscriptionContainerActionButtonBackground,
+    color: theme.colorSubscriptionContainerActionButtonColor,
+    'margin-left': 'auto',
+    'border-radius': theme.borderRadiusSmall,
+    padding: [2, 4],
+    'font-size': 12,
+  },
+  content: {
+    opacity: 0.5,
+    'margin-top': 20,
+    '& :last-child': {
+      'margin-bottom': 0,
+    },
+  },
+});
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index f7c2ec955..78fb77cbe 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -9,11 +9,13 @@ export default @observer class Toggle extends Component {
     field: PropTypes.instanceOf(Field).isRequired,
     className: PropTypes.string,
     showLabel: PropTypes.bool,
+    disabled: PropTypes.bool,
   };
 
   static defaultProps = {
     className: '',
     showLabel: true,
+    disabled: false,
   };
 
   onChange(e) {
@@ -27,6 +29,7 @@ export default @observer class Toggle extends Component {
       field,
       className,
       showLabel,
+      disabled,
     } = this.props;
 
     if (field.value === '' && field.default !== '') {
@@ -38,6 +41,7 @@ export default @observer class Toggle extends Component {
         className={classnames([
           'franz-form__field',
           'franz-form__toggle-wrapper',
+          'franz-form__toggle-disabled',
           className,
         ])}
       >
@@ -55,7 +59,7 @@ export default @observer class Toggle extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => this.onChange(e)}
+            onChange={e => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}