21 files changed, 44 insertions, 415 deletions

diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
deleted file mode 100644
index 8f4d21f64..000000000
--- a/src/components/ui/ActivateTrialButton/index.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-import classnames from 'classnames';
-
-import { Button } from '@meetfranz/forms';
-
-import UserStore from '../../../stores/UserStore';
-import UIStore from '../../../stores/UIStore';
-
-const messages = defineMessages({
-  action: {
-    id: 'feature.delayApp.upgrade.action',
-    defaultMessage: '!!!Get a Franz Supporter License',
-  },
-  actionTrial: {
-    id: 'feature.delayApp.trial.action',
-    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
-  },
-  shortAction: {
-    id: 'feature.delayApp.upgrade.actionShort',
-    defaultMessage: '!!!Upgrade account',
-  },
-  shortActionTrial: {
-    id: 'feature.delayApp.trial.actionShort',
-    defaultMessage: '!!!Activate the free Franz Professional trial',
-  },
-  noStringsAttachedHeadline: {
-    id: 'pricing.trial.terms.headline',
-    defaultMessage: '!!!No strings attached',
-  },
-  noCreditCard: {
-    id: 'pricing.trial.terms.noCreditCard',
-    defaultMessage: '!!!No credit card required',
-  },
-  automaticTrialEnd: {
-    id: 'pricing.trial.terms.automaticTrialEnd',
-    defaultMessage: '!!!Your free trial ends automatically after 14 days',
-  },
-});
-
-@inject('stores', 'actions') @observer
-class ActivateTrialButton extends Component {
-  static propTypes = {
-    className: PropTypes.string,
-    short: PropTypes.bool,
-    gaEventInfo: PropTypes.shape({
-      category: PropTypes.string.isRequired,
-      event: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    }),
-  };
-
-  static defaultProps = {
-    className: '',
-    short: false,
-    gaEventInfo: null,
-  }
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  handleCTAClick() {
-    const { actions } = this.props;
-
-    actions.ui.openSettings({ path: 'user' });
-  }
-
-  render() {
-    const { stores, className, short } = this.props;
-    const { intl } = this.context;
-
-    const { hadSubscription } = stores.user.data;
-
-    let label;
-    if (hadSubscription) {
-      label = short ? messages.shortAction : messages.action;
-    } else {
-      label = short ? messages.shortActionTrial : messages.actionTrial;
-    }
-
-    return (
-      <Button
-        label={intl.formatMessage(label)}
-        className={classnames({
-          [className]: className,
-        })}
-        buttonType="inverted"
-        onClick={this.handleCTAClick.bind(this)}
-        busy={stores.user.activateTrialRequest.isExecuting}
-      />
-    );
-  }
-}
-
-export default ActivateTrialButton;
-
-ActivateTrialButton.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-  }).isRequired,
-};
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index a7f6f4545..31d7ca249 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -37,7 +37,7 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         step: prevState.step === textList.length - 1 ? 0 : prevState.step + 1,
       }));
     }, 2500);
diff --git a/src/components/ui/AppLoader/styles.js b/src/components/ui/AppLoader/styles.js
index 755a56b40..9891e0387 100644
--- a/src/components/ui/AppLoader/styles.js
+++ b/src/components/ui/AppLoader/styles.js
@@ -1,3 +1,9 @@
+let sloganTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  sloganTransition = 'opacity 1s ease';
+}
+
 export default {
   component: {
     color: '#FFF',
@@ -5,7 +11,7 @@ export default {
   slogan: {
     display: 'block',
     opacity: 0,
-    transition: 'opacity 1s ease',
+    transition: sloganTransition,
     position: 'absolute',
     textAlign: 'center',
     width: '100%',
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 4926df470..646cf56ca 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -4,7 +4,7 @@ import { Icon } from '@meetfranz/ui';
 import classnames from 'classnames';
 import { mdiCheckCircle } from '@mdi/js';
 
-const styles = theme => ({
+const styles = (theme) => ({
   featureItem: {
     borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index 72c799819..cf2664830 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { FeatureItem } from './FeatureItem';
-import { PLANS } from '../../config';
 
 const messages = defineMessages({
   availableRecipes: {
     id: 'pricing.features.recipes',
-    defaultMessage: '!!!Choose from more than 70 Services',
+    defaultMessage: '!!!Choose from more than 70 Services', // TODO: Make this dynamic
   },
   accountSync: {
     id: 'pricing.features.accountSync',
@@ -22,14 +21,6 @@ const messages = defineMessages({
     id: 'pricing.features.unlimitedServices',
     defaultMessage: '!!!Add unlimited services',
   },
-  upToThreeServices: {
-    id: 'pricing.features.upToThreeServices',
-    defaultMessage: '!!!Add up to 3 services',
-  },
-  upToSixServices: {
-    id: 'pricing.features.upToSixServices',
-    defaultMessage: '!!!Add up to 6 services',
-  },
   spellchecker: {
     id: 'pricing.features.spellchecker',
     defaultMessage: '!!!Spellchecker support',
@@ -58,31 +49,17 @@ const messages = defineMessages({
     id: 'pricing.features.teamManagement',
     defaultMessage: '!!!Team Management',
   },
-  appDelays: {
-    id: 'pricing.features.appDelays',
-    defaultMessage: '!!!No Waiting Screens',
-  },
-  adFree: {
-    id: 'pricing.features.adFree',
-    defaultMessage: '!!!Forever ad-free',
-  },
-  appDelayEnabled: {
-    id: 'pricing.features.appDelaysEnabled',
-    defaultMessage: '!!!Occasional Waiting Screens',
-  },
 });
 
 export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
-    plan: PropTypes.oneOf(Object.keys(PLANS)),
   };
 
   static defaultProps = {
     className: '',
     featureClassName: '',
-    plan: false,
   }
 
   static contextTypes = {
@@ -93,53 +70,29 @@ export class FeatureList extends Component {
     const {
       className,
       featureClassName,
-      plan,
     } = this.props;
     const { intl } = this.context;
 
-    const features = [];
-    if (plan === PLANS.FREE) {
-      features.push(
-        messages.appDelayEnabled,
-        messages.upToThreeServices,
-        messages.availableRecipes,
-        messages.accountSync,
-        messages.desktopNotifications,
-      );
-    } else if (plan === PLANS.PERSONAL) {
-      features.push(
-        messages.upToSixServices,
-        messages.spellchecker,
-        messages.appDelays,
-        messages.adFree,
-      );
-    } else if (plan === PLANS.PRO) {
-      features.push(
-        messages.unlimitedServices,
-        messages.workspaces,
-        messages.customWebsites,
-        // messages.onPremise,
-        messages.thirdPartyServices,
-        // messages.serviceProxies,
-      );
-    } else {
-      features.push(
-        messages.unlimitedServices,
-        messages.spellchecker,
-        messages.workspaces,
-        messages.customWebsites,
-        messages.onPremise,
-        messages.thirdPartyServices,
-        messages.serviceProxies,
-        messages.teamManagement,
-        messages.appDelays,
-        messages.adFree,
-      );
-    }
+    const features = [
+      messages.availableRecipes,
+      messages.accountSync,
+      messages.desktopNotifications,
+
+      messages.spellchecker,
+
+      messages.workspaces,
+      messages.customWebsites,
+      messages.thirdPartyServices,
+
+      messages.unlimitedServices,
+      messages.onPremise,
+      messages.serviceProxies,
+      messages.teamManagement,
+    ];
 
     return (
       <ul className={className}>
-        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
+        {features.map((feature) => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
       </ul>
     );
   }
diff --git a/src/components/ui/ImageUpload.js b/src/components/ui/ImageUpload.js
index 059610aec..bb4ea0565 100644
--- a/src/components/ui/ImageUpload.js
+++ b/src/components/ui/ImageUpload.js
@@ -26,16 +26,13 @@ export default @observer class ImageUpload extends Component {
 
   dropzoneRef = null;
 
-  imgPath = null;
-
   onDrop(acceptedFiles) {
     const { field } = this.props;
 
     acceptedFiles.forEach((file) => {
-      this.imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
-
+      const imgPath = isWindows ? file.path.replace(/\\/g, '/') : file.path;
       this.setState({
-        path: this.imgPath,
+        path: imgPath,
       });
 
       this.props.field.onDrop(file);
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index 7930d98b4..fd14b7018 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -48,7 +48,7 @@ export default @inject('stores') @observer class Link extends Component {
         href={router.history.createHref(to)}
         className={linkClasses}
         style={style}
-        onClick={e => this.onClick(e)}
+        onClick={(e) => this.onClick(e)}
       >
         {children}
       </a>
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index c2bebf9bb..f32c075ce 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     zIndex: 500,
     position: 'absolute',
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
deleted file mode 100644
index 1e100f9d8..000000000
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ /dev/null
@@ -1,101 +0,0 @@
-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';
-import FeaturesStore from '../../../stores/FeaturesStore';
-import UIStore from '../../../stores/UIStore';
-
-const messages = defineMessages({
-  action: {
-    id: 'premiumFeature.button.upgradeAccount',
-    defaultMessage: '!!!Upgrade account',
-  },
-});
-
-@inject('stores', 'actions') @injectSheet(styles) @observer
-class PremiumFeatureContainer extends Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    condition: PropTypes.oneOfType([
-      PropTypes.bool,
-      PropTypes.func,
-    ]),
-    gaEventInfo: PropTypes.shape({
-      category: PropTypes.string.isRequired,
-      event: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    }),
-  };
-
-  static defaultProps = {
-    condition: null,
-    gaEventInfo: null,
-  };
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  render() {
-    const {
-      classes,
-      children,
-      actions,
-      condition,
-      stores,
-    } = this.props;
-
-    const { intl } = this.context;
-
-    let showWrapper = !!condition;
-
-    if (condition === null) {
-      showWrapper = !stores.user.data.isPremium;
-    } else if (typeof condition === 'function') {
-      showWrapper = condition({
-        isPremium: stores.user.data.isPremium,
-        features: stores.features.features,
-      });
-    }
-
-    return showWrapper ? (
-      <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,
-    features: PropTypes.instanceOf(FeaturesStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-  }).isRequired,
-};
-
-export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
deleted file mode 100644
index 41881e044..000000000
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export default theme => ({
-  container: {
-    background: theme.colorSubscriptionContainerBackground,
-    border: theme.colorSubscriptionContainerBorder,
-    margin: [0, 0, 20, -20],
-    padding: 20,
-    'border-radius': theme.borderRadius,
-    pointerEvents: 'none',
-    height: 'auto',
-  },
-  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: [4, 8],
-    'font-size': 12,
-    pointerEvents: 'initial',
-  },
-  content: {
-    opacity: 0.5,
-    'margin-top': 20,
-    '& > :last-child': {
-      'margin-bottom': 0,
-    },
-  },
-});
diff --git a/src/components/ui/Radio.js b/src/components/ui/Radio.js
index ba13aca63..e77714eb7 100644
--- a/src/components/ui/Radio.js
+++ b/src/components/ui/Radio.js
@@ -54,7 +54,7 @@ export default @observer class Radio extends Component {
           </label>
         )}
         <div className="franz-form__radio-wrapper">
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <label
               key={type.value}
               htmlFor={`${field.id}-${type.value}`}
diff --git a/src/components/ui/SearchInput.js b/src/components/ui/SearchInput.js
index 78d6aae8b..0b25734dd 100644
--- a/src/components/ui/SearchInput.js
+++ b/src/components/ui/SearchInput.js
@@ -96,7 +96,7 @@ export default @observer class SearchInput extends Component {
             type="text"
             placeholder={placeholder}
             value={value}
-            onChange={e => this.onChange(e)}
+            onChange={(e) => this.onChange(e)}
             ref={(ref) => { this.input = ref; }}
           />
         </label>
diff --git a/src/components/ui/Select.js b/src/components/ui/Select.js
index b4511433c..e7a5eafa8 100644
--- a/src/components/ui/Select.js
+++ b/src/components/ui/Select.js
@@ -82,7 +82,7 @@ export default @observer class Select extends Component {
           </label>
         )}
         <select
-          onChange={multiple ? e => this.multipleChange(e) : field.onChange}
+          onChange={multiple ? (e) => this.multipleChange(e) : field.onChange}
           id={field.id}
           defaultValue={selected}
           className="franz-form__select"
@@ -90,7 +90,7 @@ export default @observer class Select extends Component {
           multiple={multiple}
           ref={this.element}
         >
-          {field.options.map(type => (
+          {field.options.map((type) => (
             <option
               key={type.value}
               value={type.value}
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
index 0b9155a4e..b2dadeac3 100644
--- a/src/components/ui/ServiceIcon.js
+++ b/src/components/ui/ServiceIcon.js
@@ -6,7 +6,7 @@ import classnames from 'classnames';
 
 import ServiceModel from '../../models/Service';
 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     height: 'auto',
   },
diff --git a/src/components/ui/Slider.js b/src/components/ui/Slider.js
index b00a6a3f8..f344449a0 100644
--- a/src/components/ui/Slider.js
+++ b/src/components/ui/Slider.js
@@ -53,7 +53,7 @@ export default @observer class Slider extends Component {
               value={field.value}
               min="1"
               max="100"
-              onChange={e => (!disabled ? this.onChange(e) : null)}
+              onChange={(e) => (!disabled ? this.onChange(e) : null)}
             />
           </div>
 
diff --git a/src/components/ui/Tabs/TabItem.js b/src/components/ui/Tabs/TabItem.js
index 546b05a4e..d0ef4e798 100644
--- a/src/components/ui/Tabs/TabItem.js
+++ b/src/components/ui/Tabs/TabItem.js
@@ -1,17 +1,15 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 
 import { oneOrManyChildElements } from '../../../prop-types';
 
 export default class TabItem extends Component {
   static propTypes = {
     children: oneOrManyChildElements.isRequired,
-  }
+  };
 
   render() {
     const { children } = this.props;
 
-    return (
-      <>{children}</>
-    );
+    return <>{children}</>;
   }
 }
diff --git a/src/components/ui/Tabs/Tabs.js b/src/components/ui/Tabs/Tabs.js
index e68dc3a1d..56c76f215 100644
--- a/src/components/ui/Tabs/Tabs.js
+++ b/src/components/ui/Tabs/Tabs.js
@@ -28,7 +28,7 @@ class Tab extends Component {
 
   render() {
     const { children: childElements } = this.props;
-    const children = childElements.filter(c => !!c);
+    const children = childElements.filter((c) => !!c);
 
     if (children.length === 1) {
       return <div>{children}</div>;
diff --git a/src/components/ui/Toggle.js b/src/components/ui/Toggle.js
index 78fb77cbe..14330e5c7 100644
--- a/src/components/ui/Toggle.js
+++ b/src/components/ui/Toggle.js
@@ -59,7 +59,7 @@ export default @observer class Toggle extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/ToggleRaw.js b/src/components/ui/ToggleRaw.js
index dcaf664e1..4700127d4 100644
--- a/src/components/ui/ToggleRaw.js
+++ b/src/components/ui/ToggleRaw.js
@@ -64,7 +64,7 @@ export default @observer class ToggleRaw extends Component {
             name={field.name}
             value={field.name}
             checked={field.value}
-            onChange={e => (!disabled ? this.onChange(e) : null)}
+            onChange={(e) => (!disabled ? this.onChange(e) : null)}
           />
         </label>
         {field.error && <div className={field.error}>{field.error}</div>}
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
deleted file mode 100644
index eade46cfd..000000000
--- a/src/components/ui/UpgradeButton/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { inject, observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-
-import { Button } from '@meetfranz/forms';
-
-import UserStore from '../../../stores/UserStore';
-import ActivateTrialButton from '../ActivateTrialButton';
-import UIStore from '../../../stores/UIStore';
-
-const messages = defineMessages({
-  upgradeToPro: {
-    id: 'global.upgradeButton.upgradeToPro',
-    defaultMessage: '!!!Upgrade to Franz Professional',
-  },
-});
-
-@inject('stores', 'actions') @observer
-class UpgradeButton extends Component {
-  static propTypes = {
-    // eslint-disable-next-line
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    gaEventInfo: PropTypes.shape({
-      category: PropTypes.string.isRequired,
-      event: PropTypes.string.isRequired,
-      label: PropTypes.string,
-    }),
-    requiresPro: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    className: '',
-    gaEventInfo: null,
-    requiresPro: false,
-  }
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  handleCTAClick() {
-    const { actions } = this.props;
-
-    actions.ui.openSettings({ path: 'user' });
-  }
-
-  render() {
-    const { stores, requiresPro } = this.props;
-    const { intl } = this.context;
-
-    const { isPremium, isPersonal } = stores.user;
-
-    if (isPremium && isPersonal && requiresPro) {
-      return (
-        <Button
-          label={intl.formatMessage(messages.upgradeToPro)}
-          onClick={this.handleCTAClick.bind(this)}
-          className={this.props.className}
-          buttonType="inverted"
-        />
-      );
-    }
-
-    if (!isPremium) {
-      return <ActivateTrialButton {...this.props} />;
-    }
-
-    return null;
-  }
-}
-
-export default UpgradeButton;
-
-UpgradeButton.wrappedComponent.propTypes = {
-  stores: PropTypes.shape({
-    user: PropTypes.instanceOf(UserStore).isRequired,
-  }).isRequired,
-  actions: PropTypes.shape({
-    ui: PropTypes.instanceOf(UIStore).isRequired,
-  }).isRequired,
-};
diff --git a/src/components/ui/WebviewLoader/styles.js b/src/components/ui/WebviewLoader/styles.js
index dbd75db8a..5d58011fe 100644
--- a/src/components/ui/WebviewLoader/styles.js
+++ b/src/components/ui/WebviewLoader/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     background: theme.colorWebviewLoaderBackground,
     padding: 20,