Merge branch 'update/monetization' into develop

9 files changed, 187 insertions, 50 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4b20fc480..3ababe54a 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -5,7 +5,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
 
 import InfoBar from '../ui/InfoBar';
-import { component as DelayApp } from '../../features/delayApp';
+import { Component as DelayApp } from '../../features/delayApp';
 import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index ede519fd6..06c7074dd 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -180,11 +180,9 @@ export default @observer class AccountDashboard extends Component {
                         <span className="badge badge--success">{intl.formatMessage(messages.accountTypeEnterprise)}</span>
                       )}
                     </div>
-                    {!user.isSSO && (
-                      <Link to="/settings/user/edit" className="button">
-                        {intl.formatMessage(messages.accountEditButton)}
-                      </Link>
-                    )}
+                    <Link to="/settings/user/edit" className="button">
+                      {intl.formatMessage(messages.accountEditButton)}
+                    </Link>
                     {user.emailValidated}
                   </div>
                 </div>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index d8b410aaf..b86d94ac7 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -43,20 +43,17 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
 
   render() {
     const { serviceCount } = this.props;
-    const { features } = this.props.stores.features;
     const { intl } = this.context;
 
     return (
       <div className="settings-navigation">
-        {features.userCanManageServices && (
-          <Link
-            to="/settings/recipes"
-            className="settings-navigation__link"
-            activeClassName="is-active"
-          >
-            {intl.formatMessage(messages.availableServices)}
-          </Link>
-        )}
+        <Link
+          to="/settings/recipes"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.availableServices)}
+        </Link>
         <Link
           to="/settings/services"
           className="settings-navigation__link"
@@ -97,11 +94,3 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   }
 }
 
-SettingsNavigation.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    features: PropTypes.shape({
-      features: PropTypes.object.isRequired,
-    }).isRequired,
-  }).isRequired,
-};
-
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 777a95fcf..47772efae 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -15,6 +15,8 @@ import Toggle from '../../ui/Toggle';
 import Button from '../../ui/Button';
 import ImageUpload from '../../ui/ImageUpload';
 
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+
 const messages = defineMessages({
   saveService: {
     id: 'settings.service.form.saveButton',
@@ -92,6 +94,14 @@ const messages = defineMessages({
     id: 'settings.service.form.iconUpload',
     defaultMessage: '!!!Drop your image, or click here',
   },
+  headlineProxy: {
+    id: 'settings.service.form.proxy.headline',
+    defaultMessage: '!!!Proxy Settings',
+  },
+  proxyInfo: {
+    id: 'settings.service.form.proxy.info',
+    defaultMessage: '!!!Proxy settings will not be synchronized with the Franz servers.',
+  },
 });
 
 export default @observer class EditServiceForm extends Component {
@@ -106,13 +116,14 @@ export default @observer class EditServiceForm extends Component {
       return null;
     },
     user: PropTypes.instanceOf(User).isRequired,
-    userCanManageServices: PropTypes.bool.isRequired,
     action: PropTypes.string.isRequired,
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     onDelete: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
+    isProxyFeatureEnabled: PropTypes.bool.isRequired,
+    isProxyFeaturePremiumFeature: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -169,11 +180,12 @@ export default @observer class EditServiceForm extends Component {
       service,
       action,
       user,
-      userCanManageServices,
       form,
       isSaving,
       isDeleting,
       onDelete,
+      isProxyFeatureEnabled,
+      isProxyFeaturePremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -318,6 +330,33 @@ export default @observer class EditServiceForm extends Component {
                 />
               </div>
             </div>
+
+            {isProxyFeatureEnabled && (
+              <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
+                <div className="settings__settings-group">
+                  <h3>
+                    {intl.formatMessage(messages.headlineProxy)}
+                    <span className="badge badge--success">beta</span>
+                  </h3>
+                  <Toggle field={form.$('proxy.isEnabled')} />
+                  {form.$('proxy.isEnabled').value && (
+                    <div>
+                      <Input field={form.$('proxy.host')} />
+                      <Input field={form.$('proxy.user')} />
+                      <Input
+                        field={form.$('proxy.password')}
+                        showPasswordToggle
+                      />
+                      <p>
+                        <span className="mdi mdi-information" />
+                        {intl.formatMessage(messages.proxyInfo)}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </PremiumFeatureContainer>
+            )}
+
             {recipe.message && (
               <p className="settings__message">
                 <span className="mdi mdi-information" />
@@ -328,7 +367,7 @@ export default @observer class EditServiceForm extends Component {
         </div>
         <div className="settings__controls">
           {/* Delete Button */}
-          {action === 'edit' && userCanManageServices && deleteButton}
+          {action === 'edit' && deleteButton}
 
           {/* Save Button */}
           {isSaving || isValidatingCustomUrl ? (
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index b5c048ebd..280449ead 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,7 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
+    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -124,6 +126,7 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
+      isSpellcheckerPremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -175,7 +178,14 @@ export default @observer class EditSettingsForm extends Component {
 
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
-            <Toggle field={form.$('enableSpellchecking')} />
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+            >
+              <Toggle
+                field={form.$('enableSpellchecking')}
+                disabled
+              />
+            </PremiumFeatureContainer>
             <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..12965e307 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -36,26 +36,22 @@ 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 +166,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..73984be94
--- /dev/null
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -0,0 +1,76 @@
+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 UserStore from '../../../stores/UserStore';
+
+import styles from './styles';
+
+const messages = defineMessages({
+  action: {
+    id: 'premiumFeature.button.upgradeAccount',
+    defaultMessage: '!!!Upgrade account',
+  },
+});
+
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    condition: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    condition: true,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      classes,
+      children,
+      actions,
+      condition,
+      stores,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return !stores.user.data.isPremium && !!condition ? (
+      <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>
+    ) : children;
+  }
+}
+
+PremiumFeatureContainer.wrappedComponent.propTypes = {
+  children: oneOrManyChildElements.isRequired,
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).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>}