Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

24 files changed, 1028 insertions, 112 deletions

diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
index 2884fb06f..91348029f 100644
--- a/src/features/announcements/store.js
+++ b/src/features/announcements/store.js
@@ -62,6 +62,11 @@ export class AnnouncementsStore extends FeatureStore {
     return this.stores.settings.stats.appStarts <= 1;
   }
 
+  @computed get isAnnouncementShown() {
+    const { router } = this.stores;
+    return router.location.pathname.includes('/announcements');
+  }
+
   async start(stores, actions) {
     debug('AnnouncementsStore::start');
     this.stores = stores;
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a8252acb7..ba9ae2273 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -27,7 +27,6 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
     e.preventDefault();
 
     const values = Form.values();
-    console.log('form submit', values);
 
     sendCredentials(values.user, values.password);
     resetState();
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.js
new file mode 100644
index 000000000..4d050f90e
--- /dev/null
+++ b/src/features/communityRecipes/index.js
@@ -0,0 +1,28 @@
+import { reaction } from 'mobx';
+import { CommunityRecipesStore } from './store';
+
+const debug = require('debug')('Franz:feature:communityRecipes');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+export const communityRecipesStore = new CommunityRecipesStore();
+
+export default function initCommunityRecipes(stores, actions) {
+  const { features } = stores;
+
+  communityRecipesStore.start(stores, actions);
+
+  // Toggle communityRecipe premium status
+  reaction(
+    () => (
+      features.features.isCommunityRecipesIncludedInCurrentPlan
+    ),
+    (isPremiumFeature) => {
+      debug('Community recipes is premium feature: ', isPremiumFeature);
+      communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan = isPremiumFeature;
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
new file mode 100644
index 000000000..4d45c3b33
--- /dev/null
+++ b/src/features/communityRecipes/store.js
@@ -0,0 +1,31 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+
+const debug = require('debug')('Franz:feature:communityRecipes:store');
+
+export class CommunityRecipesStore extends FeatureStore {
+  @observable isCommunityRecipesIncludedInCurrentPlan = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+  }
+
+  stop() {
+    debug('stop');
+    super.stop();
+  }
+
+  @computed get communityRecipes() {
+    if (!this.stores) return [];
+
+    return this.stores.recipePreviews.dev.map((r) => {
+      r.isDevRecipe = !!r.author.find(a => a.email === this.stores.user.data.email);
+
+      return r;
+    });
+  }
+}
+
+export default CommunityRecipesStore;
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ba50652e8..c61cb06c9 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,19 +4,28 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import Button from '../../components/ui/Button';
+import { Button } from '@meetfranz/forms';
 
 import { config } from '.';
 import styles from './styles';
+import UserStore from '../../stores/UserStore';
 
 const messages = defineMessages({
   headline: {
     id: 'feature.delayApp.headline',
     defaultMessage: '!!!Please purchase license to skip waiting',
   },
+  headlineTrial: {
+    id: 'feature.delayApp.trial.headline',
+    defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line',
+  },
   action: {
-    id: 'feature.delayApp.action',
-    defaultMessage: '!!!Get a Ferdi Supporter License',
+    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',
   },
   text: {
     id: 'feature.delayApp.text',
@@ -24,7 +33,7 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component {
   static propTypes = {
     // eslint-disable-next-line
     classes: PropTypes.object.isRequired,
@@ -60,23 +69,32 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
   }
 
   handleCTAClick() {
-    const { actions } = this.props;
-
-    actions.ui.openSettings({ path: 'user' });
+    const { actions, stores } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+    }
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
 
+    const { hadSubscription } = stores.user.data;
+
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1>
+        <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1>
         <Button
-          label={intl.formatMessage(messages.action)}
+          label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)}
           className={classes.button}
           buttonType="inverted"
           onClick={this.handleCTAClick.bind(this)}
+          busy={stores.user.activateTrialRequest.isExecuting}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
@@ -89,6 +107,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 }
 
 DelayApp.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index c753eeffe..4f793f16c 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -43,14 +43,16 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.all.length === 0) {
-            debug('seas', stores.services.all.length);
+          const { isAnnouncementShown } = stores.announcements;
+          if (stores.services.allDisplayed.length === 0 || isAnnouncementShown) {
             shownAfterLaunch = true;
+            setVisibility(false);
             return;
           }
 
           const diff = moment().diff(timeLastDelay);
-          if ((stores.app.isFocused && diff >= config.delayOffset) || !shownAfterLaunch) {
+          const itsTimeToWait = diff >= config.delayOffset;
+          if (!isAnnouncementShown && ((stores.app.isFocused && itsTimeToWait) || !shownAfterLaunch)) {
             debug(`App will be delayed for ${config.delayDuration / 1000}s`);
 
             setVisibility(true);
@@ -63,6 +65,8 @@ export default function init(stores) {
 
               setVisibility(false);
             }, config.delayDuration + 1000); // timer needs to be able to hit 0
+          } else {
+            setVisibility(false);
           }
         });
       } else {
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js
new file mode 100644
index 000000000..19285a4eb
--- /dev/null
+++ b/src/features/serviceLimit/components/LimitReachedInfobox.js
@@ -0,0 +1,79 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { Infobox } from '@meetfranz/ui';
+
+import { gaEvent } from '../../../lib/analytics';
+
+const messages = defineMessages({
+  limitReached: {
+    id: 'feature.serviceLimit.limitReached',
+    defaultMessage: '!!!You have added {amount} of {limit} services. Please upgrade your account to add more services.',
+  },
+  action: {
+    id: 'premiumFeature.button.upgradeAccount',
+    defaultMessage: '!!!Upgrade account',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    height: 'auto',
+    background: theme.styleTypes.warning.accent,
+    color: theme.styleTypes.warning.contrast,
+    borderRadius: 0,
+    marginBottom: 0,
+
+    '& > div': {
+      marginBottom: 0,
+    },
+
+    '& button': {
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+});
+
+
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class LimitReachedInfobox extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    stores: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes, stores, actions } = this.props;
+    const { intl } = this.context;
+
+    const {
+      serviceLimit,
+    } = stores;
+
+    if (!serviceLimit.userHasReachedServiceLimit) return null;
+
+    return (
+      <Infobox
+        icon="mdiInformation"
+        type="warning"
+        className={classes.container}
+        ctaLabel={intl.formatMessage(messages.action)}
+        ctaOnClick={() => {
+          actions.ui.openSettings({ path: 'user' });
+          gaEvent('Service Limit', 'upgrade', 'Upgrade account');
+        }}
+      >
+        {intl.formatMessage(messages.limitReached, { amount: serviceLimit.serviceCount, limit: serviceLimit.serviceLimit })}
+      </Infobox>
+    );
+  }
+}
+
+export default LimitReachedInfobox;
diff --git a/src/features/serviceLimit/index.js b/src/features/serviceLimit/index.js
new file mode 100644
index 000000000..92ad8bb98
--- /dev/null
+++ b/src/features/serviceLimit/index.js
@@ -0,0 +1,33 @@
+import { reaction } from 'mobx';
+import { ServiceLimitStore } from './store';
+
+const debug = require('debug')('Franz:feature:serviceLimit');
+
+export const DEFAULT_SERVICE_LIMIT = 3;
+
+let store = null;
+
+export const serviceLimitStore = new ServiceLimitStore();
+
+export default function initServiceLimit(stores, actions) {
+  const { features } = stores;
+
+  // Toggle serviceLimit feature
+  reaction(
+    () => (
+      features.features.isServiceLimitEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `serviceLimit` feature');
+        store = serviceLimitStore.start(stores, actions);
+      } else if (store) {
+        debug('Disabling `serviceLimit` feature');
+        serviceLimitStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/serviceLimit/store.js b/src/features/serviceLimit/store.js
new file mode 100644
index 000000000..9836c5f51
--- /dev/null
+++ b/src/features/serviceLimit/store.js
@@ -0,0 +1,41 @@
+import { computed, observable } from 'mobx';
+import { FeatureStore } from '../utils/FeatureStore';
+import { DEFAULT_SERVICE_LIMIT } from '.';
+
+const debug = require('debug')('Franz:feature:serviceLimit:store');
+
+export class ServiceLimitStore extends FeatureStore {
+  @observable isServiceLimitEnabled = false;
+
+  start(stores, actions) {
+    debug('start');
+    this.stores = stores;
+    this.actions = actions;
+
+    this.isServiceLimitEnabled = true;
+  }
+
+  stop() {
+    super.stop();
+
+    this.isServiceLimitEnabled = false;
+  }
+
+  @computed get userHasReachedServiceLimit() {
+    if (!this.isServiceLimitEnabled) return false;
+
+    return this.serviceLimit !== 0 && this.serviceCount >= this.serviceLimit;
+  }
+
+  @computed get serviceLimit() {
+    if (!this.isServiceLimitEnabled || this.stores.features.features.serviceLimitCount === 0) return 0;
+
+    return this.stores.features.features.serviceLimitCount || DEFAULT_SERVICE_LIMIT;
+  }
+
+  @computed get serviceCount() {
+    return this.stores.services.all.length;
+  }
+}
+
+export default ServiceLimitStore;
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index 4bea327ad..55c600de4 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -9,17 +9,17 @@ const debug = require('debug')('Franz:feature:serviceProxy');
 
 export const config = observable({
   isEnabled: DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled,
-  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature,
+  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `serviceProxy` feature');
 
   autorun(() => {
-    const { isServiceProxyEnabled, isServiceProxyPremiumFeature } = stores.features.features;
+    const { isServiceProxyEnabled, isServiceProxyIncludedInCurrentPlan } = stores.features.features;
 
     config.isEnabled = isServiceProxyEnabled !== undefined ? isServiceProxyEnabled : DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled;
-    config.isPremium = isServiceProxyPremiumFeature !== undefined ? isServiceProxyPremiumFeature : DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature;
+    config.isIncludedInCurrentPlan = isServiceProxyIncludedInCurrentPlan !== undefined ? isServiceProxyIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan;
 
     const services = stores.services.enabled;
     const isPremiumUser = stores.user.data.isPremium;
@@ -30,7 +30,7 @@ export default function init(stores) {
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
-      if (config.isEnabled && (isPremiumUser || !config.isPremium)) {
+      if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) {
         const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
diff --git a/src/features/shareFranz/Component.js b/src/features/shareFranz/Component.js
index 2e66acaf3..405fb0ab5 100644
--- a/src/features/shareFranz/Component.js
+++ b/src/features/shareFranz/Component.js
@@ -6,6 +6,9 @@ import { defineMessages, intlShape } from 'react-intl';
 import { Button } from '@meetfranz/forms';
 import { H1, Icon } from '@meetfranz/ui';
 
+import {
+  mdiHeart, mdiEmail, mdiFacebookBox, mdiTwitter,
+} from '@mdi/js';
 import Modal from '../../components/ui/Modal';
 import { state } from '.';
 import ServicesStore from '../../stores/ServicesStore';
@@ -74,7 +77,7 @@ const styles = theme => ({
   },
   cta: {
     background: theme.styleTypes.primary.contrast,
-    color: theme.styleTypes.primary.accent,
+    color: `${theme.styleTypes.primary.accent} !important`,
 
     '& svg': {
       fill: theme.styleTypes.primary.accent,
@@ -115,7 +118,7 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
         close={this.close.bind(this)}
       >
         <div className={classes.heartContainer}>
-          <Icon icon="mdiHeart" className={classes.heart} size={4} />
+          <Icon icon={mdiHeart} className={classes.heart} size={4} />
         </div>
         <H1 className={classes.headline}>
           {intl.formatMessage(messages.headline)}
@@ -125,21 +128,21 @@ export default @injectSheet(styles) @inject('stores') @observer class ShareFranz
           <Button
             label={intl.formatMessage(messages.actionsEmail)}
             className={classes.cta}
-            icon="mdiEmail"
+            icon={mdiEmail}
             href={`mailto:?subject=Meet the cool app Franz&body=${intl.formatMessage(messages.shareTextEmail, { count: serviceCount })}}`}
             target="_blank"
           />
           <Button
             label={intl.formatMessage(messages.actionsFacebook)}
             className={classes.cta}
-            icon="mdiFacebookBox"
+            icon={mdiFacebookBox}
             href="https://www.facebook.com/sharer/sharer.php?u=https://www.meetfranz.com?utm_source=facebook&utm_medium=referral&utm_campaign=share-button"
             target="_blank"
           />
           <Button
             label={intl.formatMessage(messages.actionsTwitter)}
             className={classes.cta}
-            icon="mdiTwitter"
+            icon={mdiTwitter}
             href={`http://twitter.com/intent/tweet?status=${intl.formatMessage(messages.shareTextTwitter, { count: serviceCount })}`}
             target="_blank"
           />
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 79a2172b4..a07f9f63a 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -5,18 +5,18 @@ import { DEFAULT_FEATURES_CONFIG } from '../../config';
 const debug = require('debug')('Franz:feature:spellchecker');
 
 export const config = observable({
-  isPremium: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
+  isIncludedInCurrentPlan: DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `spellchecker` feature');
 
   autorun(() => {
-    const { isSpellcheckerPremiumFeature } = stores.features.features;
+    const { isSpellcheckerIncludedInCurrentPlan } = stores.features.features;
 
-    config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+    config.isIncludedInCurrentPlan = isSpellcheckerIncludedInCurrentPlan !== undefined ? isSpellcheckerIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan;
 
-    if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
+    if (!stores.user.data.isPremium && config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
new file mode 100644
index 000000000..1ccc9a592
--- /dev/null
+++ b/src/features/todos/actions.js
@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions({
+  resize: {
+    width: PropTypes.number.isRequired,
+  },
+  toggleTodosPanel: {},
+  toggleTodosFeatureVisibility: {},
+  setTodosWebview: {
+    webview: PropTypes.instanceOf(Element).isRequired,
+  },
+  handleHostMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
+  handleClientMessage: {
+    action: PropTypes.string.isRequired,
+    data: PropTypes.object,
+  },
+}, PropTypes.checkPropTypes);
+
+export default todoActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
new file mode 100644
index 000000000..c06183e37
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,300 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import Webview from 'react-electron-web-view';
+import { Icon } from '@meetfranz/ui';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
+import * as environment from '../../../environment';
+import Appear from '../../../components/ui/effects/Appear';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
+
+const OPEN_TODOS_BUTTON_SIZE = 45;
+const CLOSE_TODOS_BUTTON_SIZE = 35;
+
+const messages = defineMessages({
+  premiumInfo: {
+    id: 'feature.todos.premium.info',
+    defaultMessage: '!!!Franz Todos are available to premium users now!',
+  },
+  upgradeCTA: {
+    id: 'feature.todos.premium.upgrade',
+    defaultMessage: '!!!Upgrade Account',
+  },
+  rolloutInfo: {
+    id: 'feature.todos.premium.rollout',
+    defaultMessage: '!!!Everyone else will have to wait a little longer.',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+
+    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
+
+    '&:hover $closeTodosButton': {
+      opacity: 1,
+    },
+    '& webview': {
+      height: '100%',
+    },
+  },
+  resizeHandler: {
+    position: 'absolute',
+    left: 0,
+    marginLeft: -5,
+    width: 10,
+    zIndex: 400,
+    cursor: 'col-resize',
+  },
+  dragIndicator: {
+    position: 'absolute',
+    left: 0,
+    width: 5,
+    zIndex: 400,
+    background: theme.todos.dragIndicator.background,
+
+  },
+  openTodosButton: {
+    width: OPEN_TODOS_BUTTON_SIZE,
+    height: OPEN_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 120,
+    right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
+    borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
+    opacity: props => (props.isVisible ? 0 : 1),
+    transition: 'right 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    borderTopRightRadius: props => (props.isVisible ? null : 0),
+    borderBottomRightRadius: props => (props.isVisible ? null : 0),
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+      transition: 'all 0.5s',
+    },
+  },
+  closeTodosButton: {
+    width: CLOSE_TODOS_BUTTON_SIZE,
+    height: CLOSE_TODOS_BUTTON_SIZE,
+    background: theme.todos.toggleButton.background,
+    position: 'absolute',
+    bottom: 120,
+    right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
+    borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
+    opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
+    transition: 'opacity 0.5s',
+    zIndex: 600,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: [0, 0, 10, theme.todos.toggleButton.shadowColor],
+
+    '& svg': {
+      fill: theme.todos.toggleButton.textColor,
+    },
+  },
+  premiumContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '80%',
+    maxWidth: 300,
+    margin: [0, 'auto'],
+    textAlign: 'center',
+  },
+  premiumIcon: {
+    marginBottom: 40,
+    background: theme.styleTypes.primary.accent,
+    fill: theme.styleTypes.primary.contrast,
+    padding: 10,
+    borderRadius: 10,
+  },
+  premiumCTA: {
+    marginTop: 40,
+  },
+});
+
+@injectSheet(styles) @observer
+class TodosWebview extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isVisible: PropTypes.bool.isRequired,
+    togglePanel: PropTypes.func.isRequired,
+    handleClientMessage: PropTypes.func.isRequired,
+    setTodosWebview: PropTypes.func.isRequired,
+    resize: PropTypes.func.isRequired,
+    width: PropTypes.number.isRequired,
+    minWidth: PropTypes.number.isRequired,
+    isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    isDragging: false,
+    width: 300,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  componentWillMount() {
+    const { width } = this.props;
+
+    this.setState({
+      width,
+    });
+  }
+
+  componentDidMount() {
+    this.node.addEventListener('mousemove', this.resizePanel.bind(this));
+    this.node.addEventListener('mouseup', this.stopResize.bind(this));
+    this.node.addEventListener('mouseleave', this.stopResize.bind(this));
+  }
+
+  startResize = (event) => {
+    this.setState({
+      isDragging: true,
+      initialPos: event.clientX,
+      delta: 0,
+    });
+  };
+
+  resizePanel(e) {
+    const { minWidth } = this.props;
+
+    const {
+      isDragging,
+      initialPos,
+    } = this.state;
+
+    if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
+      const delta = e.clientX - initialPos;
+
+      this.setState({
+        delta,
+      });
+    }
+  }
+
+  stopResize() {
+    const {
+      resize,
+      minWidth,
+    } = this.props;
+
+    const {
+      isDragging,
+      delta,
+      width,
+    } = this.state;
+
+    if (isDragging) {
+      let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta));
+
+      if (newWidth < minWidth) {
+        newWidth = minWidth;
+      }
+
+      this.setState({
+        isDragging: false,
+        delta: 0,
+        width: newWidth,
+      });
+
+      resize(newWidth);
+    }
+  }
+
+  startListeningToIpcMessages() {
+    const { handleClientMessage } = this.props;
+    if (!this.webview) return;
+    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+  }
+
+  render() {
+    const {
+      classes,
+      isVisible,
+      togglePanel,
+      isTodosIncludedInCurrentPlan,
+    } = this.props;
+
+    const {
+      width,
+      delta,
+      isDragging,
+    } = this.state;
+
+    const { intl } = this.context;
+
+    return (
+      <div
+        className={classes.root}
+        style={{ width: isVisible ? width : 0 }}
+        onMouseUp={() => this.stopResize()}
+        ref={(node) => { this.node = node; }}
+      >
+        <button
+          onClick={() => togglePanel()}
+          className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
+          type="button"
+        >
+          <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
+        </button>
+        <div
+          className={classes.resizeHandler}
+          style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+          onMouseDown={e => this.startResize(e)}
+        />
+        {isDragging && (
+          <div
+            className={classes.dragIndicator}
+            style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
+          />
+        )}
+        {isTodosIncludedInCurrentPlan ? (
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
+          />
+        ) : (
+          <Appear>
+            <div className={classes.premiumContainer}>
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
+              <p>{intl.formatMessage(messages.premiumInfo)}</p>
+              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
+              <UpgradeButton
+                className={classes.premiumCTA}
+                gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                short
+              />
+            </div>
+          </Appear>
+        )}
+      </div>
+    );
+  }
+}
+
+export default TodosWebview;
diff --git a/src/features/todos/constants.js b/src/features/todos/constants.js
new file mode 100644
index 000000000..2e8a431cc
--- /dev/null
+++ b/src/features/todos/constants.js
@@ -0,0 +1,4 @@
+export const IPC = {
+  TODOS_HOST_CHANNEL: 'TODOS_HOST_CHANNEL',
+  TODOS_CLIENT_CHANNEL: 'TODOS_CLIENT_CHANNEL',
+};
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
new file mode 100644
index 000000000..a5da0b014
--- /dev/null
+++ b/src/features/todos/containers/TodosScreen.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import FeaturesStore from '../../../stores/FeaturesStore';
+import TodosWebview from '../components/TodosWebview';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { TODOS_MIN_WIDTH, todosStore } from '..';
+import { todoActions } from '../actions';
+
+@inject('stores', 'actions') @observer
+class TodosScreen extends Component {
+  render() {
+    if (!todosStore || !todosStore.isFeatureActive || todosStore.isTodosPanelForceHidden) {
+      return null;
+    }
+
+    return (
+      <ErrorBoundary>
+        <TodosWebview
+          isVisible={todosStore.isTodosPanelVisible}
+          togglePanel={todoActions.toggleTodosPanel}
+          handleClientMessage={todoActions.handleClientMessage}
+          setTodosWebview={webview => todoActions.setTodosWebview({ webview })}
+          width={todosStore.width}
+          minWidth={TODOS_MIN_WIDTH}
+          resize={width => todoActions.resize({ width })}
+          isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default TodosScreen;
+
+TodosScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
new file mode 100644
index 000000000..7388aebaf
--- /dev/null
+++ b/src/features/todos/index.js
@@ -0,0 +1,39 @@
+import { reaction } from 'mobx';
+import TodoStore from './store';
+
+const debug = require('debug')('Franz:feature:todos');
+
+export const GA_CATEGORY_TODOS = 'Todos';
+
+export const DEFAULT_TODOS_WIDTH = 300;
+export const TODOS_MIN_WIDTH = 200;
+export const DEFAULT_TODOS_VISIBLE = true;
+export const DEFAULT_IS_FEATURE_ENABLED_BY_USER = true;
+
+export const TODOS_ROUTES = {
+  TARGET: '/todos',
+};
+
+export const todosStore = new TodoStore();
+
+export default function initTodos(stores, actions) {
+  stores.todos = todosStore;
+  const { features } = stores;
+
+  // Toggle todos feature
+  reaction(
+    () => features.features.isTodosEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `todos` feature');
+        todosStore.start(stores, actions);
+      } else if (todosStore.isFeatureActive) {
+        debug('Disabling `todos` feature');
+        todosStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/todos/preload.js b/src/features/todos/preload.js
new file mode 100644
index 000000000..6e38a2ef3
--- /dev/null
+++ b/src/features/todos/preload.js
@@ -0,0 +1,23 @@
+import { ipcRenderer } from 'electron';
+import { IPC } from './constants';
+
+const debug = require('debug')('Franz:feature:todos:preload');
+
+debug('Preloading Todos Webview');
+
+let hostMessageListener = () => {};
+
+window.franz = {
+  onInitialize(ipcHostMessageListener) {
+    hostMessageListener = ipcHostMessageListener;
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, { action: 'todos:initialized' });
+  },
+  sendToHost(message) {
+    ipcRenderer.sendToHost(IPC.TODOS_CLIENT_CHANNEL, message);
+  },
+};
+
+ipcRenderer.on(IPC.TODOS_HOST_CHANNEL, (event, message) => {
+  debug('Received host message', event, message);
+  hostMessageListener(message);
+});
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
new file mode 100644
index 000000000..05eef4ec1
--- /dev/null
+++ b/src/features/todos/store.js
@@ -0,0 +1,213 @@
+import { ThemeType } from '@meetfranz/theme';
+import {
+  computed,
+  action,
+  observable,
+} from 'mobx';
+import localStorage from 'mobx-localstorage';
+
+import { todoActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
+import {
+  DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE, TODOS_ROUTES, DEFAULT_IS_FEATURE_ENABLED_BY_USER,
+} from '.';
+import { IPC } from './constants';
+import { state as delayAppState } from '../delayApp';
+
+const debug = require('debug')('Franz:feature:todos:store');
+
+export default class TodoStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  webview = null;
+
+  @computed get width() {
+    const width = this.settings.width || DEFAULT_TODOS_WIDTH;
+
+    return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
+  }
+
+  @computed get isTodosPanelForceHidden() {
+    const { isAnnouncementShown } = this.stores.announcements;
+    return delayAppState.isDelayAppScreenVisible || !this.settings.isFeatureEnabledByUser || isAnnouncementShown;
+  }
+
+  @computed get isTodosPanelVisible() {
+    if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
+    return this.settings.isTodosPanelVisible;
+  }
+
+  @computed get settings() {
+    return localStorage.getItem('todos') || {};
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions) {
+    debug('TodoStore::start');
+    this.stores = stores;
+    this.actions = actions;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [todoActions.resize, this._resize],
+      [todoActions.toggleTodosPanel, this._toggleTodosPanel],
+      [todoActions.setTodosWebview, this._setTodosWebview],
+      [todoActions.handleHostMessage, this._handleHostMessage],
+      [todoActions.handleClientMessage, this._handleClientMessage],
+      [todoActions.toggleTodosFeatureVisibility, this._toggleTodosFeatureVisibility],
+    ]));
+
+    // REACTIONS
+
+    this._allReactions = createReactions([
+      this._setFeatureEnabledReaction,
+      this._updateTodosConfig,
+      this._firstLaunchReaction,
+      this._routeCheckReaction,
+    ]);
+
+    this._registerReactions(this._allReactions);
+
+    this.isFeatureActive = true;
+
+    if (this.settings.isFeatureEnabledByUser === undefined) {
+      this._updateSettings({
+        isFeatureEnabledByUser: DEFAULT_IS_FEATURE_ENABLED_BY_USER,
+      });
+    }
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TodoStore::stop');
+    this.reset();
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem('todos', {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // Actions
+
+  @action _resize = ({ width }) => {
+    this._updateSettings({
+      width,
+    });
+  };
+
+  @action _toggleTodosPanel = () => {
+    this._updateSettings({
+      isTodosPanelVisible: !this.isTodosPanelVisible,
+    });
+  };
+
+  @action _setTodosWebview = ({ webview }) => {
+    debug('_setTodosWebview', webview);
+    this.webview = webview;
+  };
+
+  @action _handleHostMessage = (message) => {
+    debug('_handleHostMessage', message);
+    if (message.action === 'todos:create') {
+      this.webview.send(IPC.TODOS_HOST_CHANNEL, message);
+    }
+  };
+
+  @action _handleClientMessage = (message) => {
+    debug('_handleClientMessage', message);
+    switch (message.action) {
+      case 'todos:initialized': this._onTodosClientInitialized(); break;
+      case 'todos:goToService': this._goToService(message.data); break;
+      default:
+        debug('Unknown client message reiceived', message);
+    }
+  };
+
+  @action _toggleTodosFeatureVisibility = () => {
+    debug('_toggleTodosFeatureVisibility');
+
+    this._updateSettings({
+      isFeatureEnabledByUser: !this.settings.isFeatureEnabledByUser,
+    });
+  };
+
+  // Todos client message handlers
+
+  _onTodosClientInitialized = () => {
+    const { authToken } = this.stores.user;
+    const { isDarkThemeActive } = this.stores.ui;
+    const { locale } = this.stores.app;
+    if (!this.webview) return;
+    this.webview.send(IPC.TODOS_HOST_CHANNEL, {
+      action: 'todos:configure',
+      data: {
+        authToken,
+        locale,
+        theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
+      },
+    });
+  };
+
+  _goToService = ({ url, serviceId }) => {
+    if (url) {
+      this.stores.services.one(serviceId).webview.loadURL(url);
+    }
+    this.actions.service.setActive({ serviceId });
+  };
+
+  // Reactions
+
+  _setFeatureEnabledReaction = () => {
+    const { isTodosEnabled } = this.stores.features.features;
+
+    this.isFeatureEnabled = isTodosEnabled;
+  };
+
+  _updateTodosConfig = () => {
+    // Resend the config if any part changes in Franz:
+    this._onTodosClientInitialized();
+  };
+
+  _firstLaunchReaction = () => {
+    const { stats } = this.stores.settings.all;
+
+    // Hide todos layer on first app start but show on second
+    if (stats.appStarts <= 1) {
+      this._updateSettings({
+        isTodosPanelVisible: false,
+      });
+    } else if (stats.appStarts <= 2) {
+      this._updateSettings({
+        isTodosPanelVisible: true,
+      });
+    }
+  };
+
+  _routeCheckReaction = () => {
+    const { pathname } = this.stores.router.location;
+
+    if (pathname === TODOS_ROUTES.TARGET) {
+      debug('Router is on todos route, show todos panel');
+      // todosStore.start(stores, actions);
+      this.stores.router.push('/');
+
+      if (!this.isTodosPanelVisible) {
+        this._updateSettings({
+          isTodosPanelVisible: true,
+        });
+      }
+    }
+  }
+}
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index cbc7372ca..f4ee89a14 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,6 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
+import { mdiPlusBox, mdiSettings } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
@@ -157,7 +158,7 @@ class WorkspaceDrawer extends Component {
             data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
           >
             <Icon
-              icon="mdiSettings"
+              icon={mdiSettings}
               size={1.5}
               className={classes.workspacesSettingsButtonIcon}
             />
@@ -181,7 +182,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.premiumCtaButtonLabel)}
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 onClick={() => {
                   workspaceActions.openWorkspaceSettings();
                 }}
@@ -220,7 +221,7 @@ class WorkspaceDrawer extends Component {
               }}
             >
               <Icon
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 size={1}
                 className={classes.workspacesSettingsButtonIcon}
               />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index c4a800a7b..a70d1d66f 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -21,11 +21,8 @@ const styles = theme => ({
     alignItems: 'flex-start',
     position: 'absolute',
     transition: 'width 0.5s ease',
-    width: '100%',
-    marginTop: '20px',
-  },
-  wrapperWhenDrawerIsOpen: {
     width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
+    marginTop: '20px',
   },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
@@ -64,14 +61,13 @@ class WorkspaceSwitchingIndicator extends Component {
   render() {
     const { classes, theme } = this.props;
     const { intl } = this.context;
-    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
+    const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
       <div
         className={classnames([
           classes.wrapper,
-          isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null,
         ])}
       >
         <div className={classes.component}>
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 9b51f2602..977b23999 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,9 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox } from '@meetfranz/ui';
+import { Infobox, Badge } from '@meetfranz/ui';
 
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -11,7 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
-import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
+import UIStore from '../../../stores/UIStore';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -48,7 +50,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = theme => ({
+const styles = () => ({
   table: {
     width: '100%',
     '& td': {
@@ -62,17 +64,28 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: '20px',
-    backgroundColor: '#3498db',
-    marginLeft: '-20px',
-    marginBottom: '20px',
     height: 'auto',
-    color: 'white',
-    borderRadius: theme.borderRadius,
+  },
+  premiumAnnouncementContainer: {
+    display: 'flex',
+  },
+  announcementHeadline: {
+    marginBottom: 0,
+  },
+  teaserImage: {
+    width: 250,
+    margin: [-8, 0, 0, 20],
+    alignSelf: 'center',
+  },
+  upgradeCTA: {
+    margin: [40, 'auto'],
+  },
+  proRequired: {
+    margin: [10, 0, 40],
   },
 });
 
-@injectSheet(styles) @observer
+@inject('stores') @injectSheet(styles) @observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -100,7 +113,9 @@ class WorkspacesDashboard extends Component {
       onWorkspaceClick,
       workspaces,
     } = this.props;
+
     const { intl } = this.context;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -138,68 +153,80 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+
+              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
+              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+              <div className={classes.premiumAnnouncementContainer}>
+                <div className={classes.premiumAnnouncementContent}>
+                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                  <UpgradeButton
+                    className={classes.upgradeCTA}
+                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                    short
+                    requiresPro
+                  />
+                </div>
+                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
+              </div>
             </div>
           )}
 
-          <PremiumFeatureContainer
-            condition={workspaceStore.isPremiumFeature}
-            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
-          >
-            {/* ===== Create workspace form ===== */}
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm
-                isSubmitting={createWorkspaceRequest.isExecuting}
-                onSubmit={onCreateWorkspaceSubmit}
-              />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {/* ===== Workspace could not be loaded error ===== */}
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <Fragment>
-                    {workspaces.length === 0 ? (
-                      <div className="align-middle settings__empty-state">
-                        {/* ===== Workspaces empty state ===== */}
-                        <p className="settings__empty-text">
-                          <span className="emoji">
-                            <img src="./assets/images/emoji/sad.png" alt="" />
-                          </span>
-                          {intl.formatMessage(messages.noServicesAdded)}
-                        </p>
-                      </div>
-                    ) : (
-                      <table className={classes.table}>
-                        {/* ===== Workspaces list ===== */}
-                        <tbody>
-                          {workspaces.map(workspace => (
-                            <WorkspaceItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              onItemClick={w => onWorkspaceClick(w)}
-                            />
-                          ))}
-                        </tbody>
-                      </table>
-                    )}
-                  </Fragment>
-                )}
-              </Fragment>
-            )}
-          </PremiumFeatureContainer>
+          {!workspaceStore.isPremiumUpgradeRequired && (
+            <>
+              {/* ===== Create workspace form ===== */}
+              <div className={classes.createForm}>
+                <CreateWorkspaceForm
+                  isSubmitting={createWorkspaceRequest.isExecuting}
+                  onSubmit={onCreateWorkspaceSubmit}
+                />
+              </div>
+              {getUserWorkspacesRequest.isExecuting ? (
+                <Loader />
+              ) : (
+                <Fragment>
+                  {/* ===== Workspace could not be loaded error ===== */}
+                  {getUserWorkspacesRequest.error ? (
+                    <Infobox
+                      icon="alert"
+                      type="danger"
+                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                      ctaLoading={getUserWorkspacesRequest.isExecuting}
+                      ctaOnClick={getUserWorkspacesRequest.retry}
+                    >
+                      {intl.formatMessage(messages.workspacesRequestFailed)}
+                    </Infobox>
+                  ) : (
+                    <Fragment>
+                      {workspaces.length === 0 ? (
+                        <div className="align-middle settings__empty-state">
+                          {/* ===== Workspaces empty state ===== */}
+                          <p className="settings__empty-text">
+                            <span className="emoji">
+                              <img src="./assets/images/emoji/sad.png" alt="" />
+                            </span>
+                            {intl.formatMessage(messages.noServicesAdded)}
+                          </p>
+                        </div>
+                      ) : (
+                        <table className={classes.table}>
+                          {/* ===== Workspaces list ===== */}
+                          <tbody>
+                            {workspaces.map(workspace => (
+                              <WorkspaceItem
+                                key={workspace.id}
+                                workspace={workspace}
+                                onItemClick={w => onWorkspaceClick(w)}
+                              />
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </Fragment>
+                  )}
+                </Fragment>
+              )}
+            </>
+          )}
         </div>
       </div>
     );
@@ -207,3 +234,9 @@ class WorkspacesDashboard extends Component {
 }
 
 export default WorkspacesDashboard;
+
+WorkspacesDashboard.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    ui: PropTypes.instanceOf(UIStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 2ab565fa1..affbd230d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -11,7 +11,7 @@ import {
   updateWorkspaceRequest,
 } from '../api';
 
-@inject('actions') @observer
+@inject('stores', 'actions') @observer
 class WorkspacesScreen extends Component {
   static propTypes = {
     actions: PropTypes.shape({
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a82f6895c..4a1f80b4e 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -253,11 +253,10 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _setIsPremiumFeatureReaction = () => {
-    const { features, user } = this.stores;
-    const { isPremium } = user.data;
-    const { isWorkspacePremiumFeature } = features.features;
-    this.isPremiumFeature = isWorkspacePremiumFeature;
-    this.isPremiumUpgradeRequired = isWorkspacePremiumFeature && !isPremium;
+    const { features } = this.stores;
+    const { isWorkspaceIncludedInCurrentPlan } = features.features;
+    this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan;
   };
 
   _setWorkspaceBeingEditedReaction = () => {