15 files changed, 241 insertions, 31 deletions

diff --git a/.eslintrc b/.eslintrc
index 8e95ad4fd..948550306 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -13,6 +13,7 @@
     "react/jsx-filename-extension": [1, {
       "extensions": [".js", ".jsx"]
     }],
+    "react/forbid-prop-types": 1,
     "no-underscore-dangle": 0,
     "max-len": 0,
     "class-methods-use-this": 0,
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>}
diff --git a/src/config.js b/src/config.js
index ce946f00a..ebffacceb 100644
--- a/src/config.js
+++ b/src/config.js
@@ -23,6 +23,7 @@ export const DEFAULT_APP_SETTINGS = {
   beta: false,
   isAppMuted: false,
   enableGPUAcceleration: true,
+  serviceLimit: 5,
 };
 
 export const FRANZ_SERVICE_REQUEST = 'https://bit.ly/franz-service-request';
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index df6442eb8..2fb6bed5f 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -10,6 +10,7 @@ import Form from '../../lib/Form';
 import { APP_LOCALES } from '../../i18n/languages';
 import { gaPage } from '../../lib/analytics';
 import { DEFAULT_APP_SETTINGS } from '../../config';
+import { config as spellcheckerConfig } from '../../features/spellchecker';
 
 
 import EditSettingsForm from '../../components/settings/settings/EditSettingsForm';
@@ -161,8 +162,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          value: settings.all.app.enableSpellchecking,
-          default: DEFAULT_APP_SETTINGS.enableSpellchecking,
+          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremiumFeature ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         darkMode: {
           label: intl.formatMessage(messages.darkMode),
@@ -218,6 +219,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         cacheSize={cacheSize}
         isClearingAllCache={isClearingAllCache}
         onClearAllCache={clearAllCache}
+        isPremiumUser={this.props.stores.user.data.isPremium}
+        isSpellcheckerPremiumFeature={spellcheckerConfig.isPremiumFeature}
       />
     );
   }
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
new file mode 100644
index 000000000..2627c9d17
--- /dev/null
+++ b/src/features/spellchecker/index.js
@@ -0,0 +1,54 @@
+import { autorun, reaction } from 'mobx';
+
+const debug = require('debug')('Franz:feature:spellchecker');
+
+const DEFAULT_IS_PREMIUM_FEATURE = true;
+
+export const config = {
+  isPremiumFeature: DEFAULT_IS_PREMIUM_FEATURE,
+};
+
+export default function init(stores) {
+  reaction(
+    () => stores.features.features.needToWaitToProceed,
+    (enabled, r) => {
+      if (enabled) {
+        debug('Initializing `spellchecker` feature');
+
+        // Dispose the reaction to run this only once
+        r.dispose();
+
+        const { isSpellcheckerPremiumFeature } = stores.features.features;
+
+        config.isPremiumFeature = isSpellcheckerPremiumFeature || DEFAULT_IS_PREMIUM_FEATURE;
+
+        // reaction(
+        //   () => stores.settings.all.app.enableSpellchecking,
+        //   (enabled, r) => {
+        //     if (enabled) {
+        //       // debug('Initializing `spellchecker` feature');
+
+        //       // // Dispose the reaction to run this only once
+        //       // r.dispose();
+
+        //       // const { isSpellcheckerPremiumFeature } = stores.features.features;
+
+        //       // config.isPremiumFeature = isSpellcheckerPremiumFeature || DEFAULT_IS_PREMIUM_FEATURE;
+        //     }
+        //   },
+        // );
+
+        autorun(() => {
+          if (!stores.user.data.isPremium && config.isPremiumFeature) {
+            debug('Override settings.spellcheckerEnabled flag to false');
+
+            Object.assign(stores.settings.all.app, {
+              enableSpellchecker: false,
+            });
+          }
+        });
+      }
+    },
+  );
+}
+
diff --git a/src/features/spellchecker/styles.js b/src/features/spellchecker/styles.js
new file mode 100644
index 000000000..097368d9a
--- /dev/null
+++ b/src/features/spellchecker/styles.js
@@ -0,0 +1,26 @@
+export default (theme) => {
+  console.log(theme);
+  return ({
+    container: {
+      background: theme.colorBackground,
+      position: 'absolute',
+      top: 0,
+      width: '100%',
+      display: 'flex',
+      'flex-direction': 'column',
+      'align-items': 'center',
+      'justify-content': 'center',
+      'z-index': 150,
+    },
+    headline: {
+      color: theme.colorHeadline,
+      margin: [25, 0, 40],
+      'max-width': 500,
+      'text-align': 'center',
+      'line-height': '1.3em',
+    },
+    button: {
+      margin: [40, 0, 20],
+    },
+  });
+};
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 24e29df18..be2a38231 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -50,10 +50,12 @@
   "subscription.paymentSessionError": "Could not initialize payment form",
   "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
   "subscription.features.onpremise": "Add on-premise/hosted services like HipChat",
-  "subscription.features.customServices": "Private services for you and your team",
+  "subscription.features.onpremise.mattermost": "Add on-premise/hosted services like Mattermost",
   "subscription.features.encryptedSync": "Encrypted session synchronization",
   "subscription.features.vpn": "Proxy & VPN support",
   "subscription.features.ads": "No ads, ever!",
+  "subscription.features.spellchecker": "Support for spellchecker",
+  "subscription.features.noInterruptions": "No app delays & nagging to upgrade license",
   "subscription.features.comingSoon": "coming soon",
   "infobar.servicesUpdated": "Your services have been updated.",
   "infobar.updateAvailable": "A new update for Franz is available.",
@@ -252,5 +254,6 @@
   "validation.minLength": "{field} should be at least {length} characters long",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.action": "Get a Franz Supporter License",
-  "feature.delayApp.text": "Franz will continue in {seconds} seconds."
+  "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
+  "premiumFeature.button.upgradeAccount": "Upgrade account"
 }
diff --git a/src/models/Service.js b/src/models/Service.js
index 1bab8bd68..d04b34b7e 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -30,6 +30,10 @@ export default class Service {
   @observable hasCrashed = false;
   @observable isDarkModeEnabled = false;
 
+  // @observable proxy = {
+  //   isEnabled: false,
+  // };
+
   constructor(data, recipe) {
     if (!data) {
       console.error('Service config not valid');
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 9740d078f..dd4827221 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -4,6 +4,7 @@ import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
 
 import delayApp from '../features/delayApp';
+import spellchecker from '../features/spellchecker';
 
 export default class FeaturesStore extends Store {
   @observable defaultFeaturesRequest = new CachedRequest(this.api.features, 'default');
@@ -36,5 +37,6 @@ export default class FeaturesStore extends Store {
 
   _enableFeatures() {
     delayApp(this.stores, this.actions);
+    spellchecker(this.stores, this.actions);
   }
 }
diff --git a/src/theme/dark/index.js b/src/theme/dark/index.js
index e0e017c7c..496a51119 100644
--- a/src/theme/dark/index.js
+++ b/src/theme/dark/index.js
@@ -1,5 +1,6 @@
 import * as legacyStyles from '../default/legacy';
 
 export const colorBackground = legacyStyles.darkThemeGrayDarkest;
+export const colorBackgroundSubscriptionContainer = legacyStyles.themeBrandInfo;
 
 export const colorHeadline = legacyStyles.darkThemeTextColor;
diff --git a/src/theme/default/index.js b/src/theme/default/index.js
index f8b6e898d..8766fb609 100644
--- a/src/theme/default/index.js
+++ b/src/theme/default/index.js
@@ -1,12 +1,21 @@
 import * as legacyStyles from './legacy';
 
-/* legacy config, injected into sass */
-export const themeBrandPrimary = '#3498db';
-export const themeBrandSuccess = '#5cb85c';
-export const themeBrandInfo = '#5bc0de';
-export const themeBrandWarning = '#FF9F00';
-export const themeBrandDanger = '#d9534f';
+export const brandPrimary = '#3498db';
+export const brandSuccess = '#5cb85c';
+export const brandInfo = '#5bc0de';
+export const brandWarning = '#FF9F00';
+export const brandDanger = '#d9534f';
 
-export const colorBackground = legacyStyles.themeGrayLighter;
+export const borderRadius = legacyStyles.themeBorderRadius;
+export const borderRadiusSmall = legacyStyles.themeBorderRadiusSmall;
 
+export const colorBackground = legacyStyles.themeGrayLighter;
 export const colorHeadline = legacyStyles.themeGrayDark;
+
+// Subscription Container Component
+export const colorSubscriptionContainerBackground = 'none';
+export const colorSubscriptionContainerBorder = [1, 'solid', brandPrimary];
+export const colorSubscriptionContainerTitle = brandPrimary;
+export const colorSubscriptionContainerActionButtonBackground = brandPrimary;
+export const colorSubscriptionContainerActionButtonColor = '#FFF';
+