17 files changed, 981 insertions, 52 deletions

diff --git a/src/features/announcements/actions.js b/src/features/announcements/actions.js
new file mode 100644
index 000000000..bab496314
--- /dev/null
+++ b/src/features/announcements/actions.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const announcementActions = createActionsFromDefinitions({
+  show: {
+    targetVersion: PropTypes.string,
+  },
+}, PropTypes.checkPropTypes);
+
+export default announcementActions;
diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js
new file mode 100644
index 000000000..a581bd8de
--- /dev/null
+++ b/src/features/announcements/api.js
@@ -0,0 +1,33 @@
+import { remote } from 'electron';
+import Request from '../../stores/lib/Request';
+import { API, API_VERSION } from '../../environment';
+
+const debug = require('debug')('Franz:feature:announcements:api');
+
+export const announcementsApi = {
+  async getCurrentVersion() {
+    debug('getting current version of electron app');
+    return Promise.resolve(remote.app.getVersion());
+  },
+
+  async getChangelog(version) {
+    debug('fetching release changelog from Github');
+    const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`;
+    const request = await window.fetch(url, { method: 'GET' });
+    if (!request.ok) return null;
+    const data = await request.json();
+    return data.body;
+  },
+
+  async getAnnouncement(version) {
+    debug('fetching release announcement from api');
+    const url = `${API}/${API_VERSION}/announcements/${version}`;
+    const response = await window.fetch(url, { method: 'GET' });
+    if (!response.ok) return null;
+    return response.json();
+  },
+};
+
+export const getCurrentVersionRequest = new Request(announcementsApi, 'getCurrentVersion');
+export const getChangelogRequest = new Request(announcementsApi, 'getChangelog');
+export const getAnnouncementRequest = new Request(announcementsApi, 'getAnnouncement');
diff --git a/src/features/announcements/components/AnnouncementScreen.js b/src/features/announcements/components/AnnouncementScreen.js
new file mode 100644
index 000000000..e7c5fe395
--- /dev/null
+++ b/src/features/announcements/components/AnnouncementScreen.js
@@ -0,0 +1,286 @@
+import React, { Component } from 'react';
+import marked from 'marked';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { Button } from '@meetfranz/forms';
+
+import { announcementsStore } from '../index';
+import UIStore from '../../../stores/UIStore';
+import { gaEvent } from '../../../lib/analytics';
+
+const renderer = new marked.Renderer();
+
+renderer.link = (href, title, text) => `<a target="_blank" href="${href}" title="${title}">${text}</a>`;
+
+const markedOptions = { sanitize: true, renderer };
+
+const messages = defineMessages({
+  headline: {
+    id: 'feature.announcements.changelog.headline',
+    defaultMessage: '!!!Changes in Franz {version}',
+  },
+});
+
+const smallScreen = '1000px';
+
+const styles = theme => ({
+  container: {
+    background: theme.colorBackground,
+    position: 'absolute',
+    top: 0,
+    zIndex: 140,
+    width: '100%',
+    height: '100%',
+    overflowY: 'auto',
+  },
+  headline: {
+    color: theme.colorHeadline,
+    margin: [25, 0, 40],
+    // 'max-width': 500,
+    'text-align': 'center',
+    'line-height': '1.3em',
+  },
+  announcement: {
+    height: 'auto',
+
+    [`@media(min-width: ${smallScreen})`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      height: '100vh',
+    },
+  },
+  main: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+    justifyContent: 'center',
+
+    '& h1': {
+      margin: [40, 0, 15],
+      fontSize: 70,
+      color: theme.styleTypes.primary.accent,
+      textAlign: 'center',
+
+      [`@media(min-width: ${smallScreen})`]: {
+        marginTop: 0,
+      },
+    },
+    '& h2': {
+      fontSize: 30,
+      fontWeight: 300,
+      color: theme.colorText,
+      textAlign: 'center',
+      marginBottom: 60,
+    },
+  },
+  mainBody: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    width: 'calc(100% - 80px)',
+    height: 'auto',
+    margin: '0 auto',
+    [`@media(min-width: ${smallScreen})`]: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+    },
+  },
+  mainImage: {
+    minWidth: 250,
+    maxWidth: 400,
+    margin: '0 auto',
+    marginBottom: 40,
+    '& img': {
+      width: '100%',
+    },
+    [`@media(min-width: ${smallScreen})`]: {
+      margin: 0,
+    },
+  },
+  mainText: {
+    height: 'auto',
+    maxWidth: 600,
+    textAlign: 'center',
+    '& p': {
+      lineHeight: '1.5em',
+    },
+    [`@media(min-width: ${smallScreen})`]: {
+      textAlign: 'left',
+    },
+  },
+  mainCtaButton: {
+    textAlign: 'center',
+    marginTop: 40,
+    [`@media(min-width: ${smallScreen})`]: {
+      textAlign: 'left',
+    },
+  },
+  spotlight: {
+    height: 'auto',
+    background: theme.announcements.spotlight.background,
+    padding: [40, 0],
+    marginTop: 80,
+    [`@media(min-width: ${smallScreen})`]: {
+      marginTop: 0,
+      justifyContent: 'center',
+      alignItems: 'flex-start',
+      display: 'flex',
+      flexDirection: 'row',
+    },
+  },
+  spotlightTopicContainer: {
+    textAlign: 'center',
+    marginBottom: 20,
+
+    [`@media(min-width: ${smallScreen})`]: {
+      marginBottom: 0,
+      minWidth: 250,
+      maxWidth: 330,
+      width: '100%',
+      textAlign: 'right',
+      marginRight: 60,
+    },
+  },
+  spotlightContentContainer: {
+    textAlign: 'center',
+    [`@media(min-width: ${smallScreen})`]: {
+      height: 'auto',
+      maxWidth: 600,
+      paddingRight: 40,
+      textAlign: 'left',
+    },
+    '& p': {
+      lineHeight: '1.5em',
+    },
+  },
+  spotlightTopic: {
+    fontSize: 20,
+    marginBottom: 5,
+    letterSpacing: 0,
+    fontWeight: 100,
+  },
+  spotlightSubject: {
+    fontSize: 20,
+  },
+  changelog: {
+    padding: [0, 60],
+    maxWidth: 700,
+    margin: [100, 'auto'],
+    height: 'auto',
+
+    '& h3': {
+      fontSize: '24px',
+      margin: '1.5em 0 1em 0',
+    },
+    '& li': {
+      marginBottom: '1em',
+      lineHeight: '1.4em',
+    },
+    '& div': {
+      height: 'auto',
+    },
+  },
+});
+
+
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class AnnouncementScreen extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes, stores } = this.props;
+    const { intl } = this.context;
+    const { changelog, announcement } = announcementsStore;
+    const themeImage = stores.ui.isDarkThemeActive ? 'dark' : 'light';
+    return (
+      <div className={classes.container}>
+        {announcement && (
+          <div className={classes.announcement}>
+            <div className={classes.main}>
+              <h1>{announcement.main.headline}</h1>
+              <h2>{announcement.main.subHeadline}</h2>
+              <div className={classes.mainBody}>
+                <div className={classes.mainImage}>
+                  <img
+                    src={announcement.main.image[themeImage]}
+                    alt=""
+                  />
+                </div>
+                <div className={classes.mainText}>
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: marked(announcement.main.text, markedOptions),
+                    }}
+                  />
+                  <div className={classes.mainCtaButton}>
+                    <Button
+                      label={announcement.main.cta.label}
+                      onClick={() => {
+                        const { analytics } = announcement.main.cta;
+                        window.location.href = `#${announcement.main.cta.href}`;
+                        gaEvent(analytics.category, analytics.action, announcement.main.cta.label);
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            {announcement.spotlight && (
+              <div className={classes.spotlight}>
+                <div className={classes.spotlightTopicContainer}>
+                  <h2 className={classes.spotlightTopic}>{announcement.spotlight.title}</h2>
+                  <h3 className={classes.spotlightSubject}>{announcement.spotlight.subject}</h3>
+                </div>
+                <div className={classes.spotlightContentContainer}>
+                  <div
+                    dangerouslySetInnerHTML={{
+                      __html: marked(announcement.spotlight.text, markedOptions),
+                    }}
+                  />
+                  <div className={classes.mainCtaButton}>
+                    <Button
+                      label={announcement.spotlight.cta.label}
+                      onClick={() => {
+                        const { analytics } = announcement.spotlight.cta;
+                        window.location.href = `#${announcement.spotlight.cta.href}`;
+                        gaEvent(analytics.category, analytics.action, announcement.spotlight.cta.label);
+                      }}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {changelog && (
+          <div className={classes.changelog}>
+            <h1 className={classes.headline}>
+              {intl.formatMessage(messages.headline, {
+                version: announcementsStore.targetVersion,
+              })}
+            </h1>
+            <div
+              dangerouslySetInnerHTML={{
+                __html: marked(changelog, markedOptions),
+              }}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export default AnnouncementScreen;
diff --git a/src/features/announcements/index.js b/src/features/announcements/index.js
new file mode 100644
index 000000000..f14e7c9a5
--- /dev/null
+++ b/src/features/announcements/index.js
@@ -0,0 +1,36 @@
+import { reaction } from 'mobx';
+import { AnnouncementsStore } from './store';
+
+const debug = require('debug')('Franz:feature:announcements');
+
+export const GA_CATEGORY_ANNOUNCEMENTS = 'Announcements';
+
+export const announcementsStore = new AnnouncementsStore();
+
+export const ANNOUNCEMENTS_ROUTES = {
+  TARGET: '/announcements/:id',
+};
+
+export default function initAnnouncements(stores, actions) {
+  // const { features } = stores;
+
+  // Toggle workspace feature
+  reaction(
+    () => (
+      true
+      // features.features.isAnnouncementsEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `announcements` feature');
+        announcementsStore.start(stores, actions);
+      } else if (announcementsStore.isFeatureActive) {
+        debug('Disabling `announcements` feature');
+        announcementsStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
new file mode 100644
index 000000000..ad78a0979
--- /dev/null
+++ b/src/features/announcements/store.js
@@ -0,0 +1,144 @@
+import {
+  action,
+  computed,
+  observable,
+} from 'mobx';
+import semver from 'semver';
+import localStorage from 'mobx-localstorage';
+
+import { FeatureStore } from '../utils/FeatureStore';
+import { ANNOUNCEMENTS_ROUTES, GA_CATEGORY_ANNOUNCEMENTS } from '.';
+import { getAnnouncementRequest, getChangelogRequest, getCurrentVersionRequest } from './api';
+import { announcementActions } from './actions';
+import { createActionBindings } from '../utils/ActionBinding';
+import { createReactions } from '../../stores/lib/Reaction';
+import { gaEvent } from '../../lib/analytics';
+import { matchRoute } from '../../helpers/routing-helpers';
+
+const LOCAL_STORAGE_KEY = 'announcements';
+
+const debug = require('debug')('Franz:feature:announcements:store');
+
+export class AnnouncementsStore extends FeatureStore {
+  @observable targetVersion = null;
+
+  @observable isFeatureActive = false;
+
+  @computed get changelog() {
+    return getChangelogRequest.result;
+  }
+
+  @computed get announcement() {
+    if (!this.stores || !getAnnouncementRequest.result) return null;
+    const { locale, defaultLocale } = this.stores.app;
+    const announcement = getAnnouncementRequest.result;
+    // User locale
+    if (announcement[locale]) return announcement[locale];
+    // Default locale
+    if (announcement[defaultLocale]) return announcement[defaultLocale];
+    // No locales specified
+    return announcement;
+  }
+
+  @computed get areNewsAvailable() {
+    const isChangelogAvailable = getChangelogRequest.wasExecuted && !!this.changelog;
+    const isAnnouncementAvailable = getAnnouncementRequest.wasExecuted && !!this.announcement;
+    return isChangelogAvailable || isAnnouncementAvailable;
+  }
+
+  @computed get settings() {
+    return localStorage.getItem(LOCAL_STORAGE_KEY) || {};
+  }
+
+  @computed get lastSeenAnnouncementVersion() {
+    return this.settings.lastSeenAnnouncementVersion || null;
+  }
+
+  @computed get currentVersion() {
+    return getCurrentVersionRequest.result;
+  }
+
+  @computed get isNewUser() {
+    return this.stores.settings.stats.appStarts <= 1;
+  }
+
+  async start(stores, actions) {
+    debug('AnnouncementsStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    getCurrentVersionRequest.execute();
+
+    this._registerActions(createActionBindings([
+      [announcementActions.show, this._showAnnouncement],
+    ]));
+
+    this._reactions = createReactions([
+      this._showAnnouncementOnRouteMatch,
+      this._showAnnouncementToUsersWhoUpdatedApp,
+      this._fetchAnnouncements,
+    ]);
+    this._registerReactions(this._reactions);
+    this.isFeatureActive = true;
+  }
+
+  stop() {
+    super.stop();
+    debug('AnnouncementsStore::stop');
+    this.isFeatureActive = false;
+  }
+
+  // ======= HELPERS ======= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem(LOCAL_STORAGE_KEY, {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // ======= ACTIONS ======= //
+
+  @action _showAnnouncement = ({ targetVersion } = {}) => {
+    const { router } = this.stores;
+    this.targetVersion = targetVersion || this.currentVersion;
+    this._updateSettings({
+      lastSeenAnnouncementVersion: this.currentVersion,
+    });
+    const targetRoute = `/announcements/${this.targetVersion}`;
+    if (router.location.pathname !== targetRoute) {
+      this.stores.router.push(targetRoute);
+    }
+    gaEvent(GA_CATEGORY_ANNOUNCEMENTS, 'show');
+  };
+
+  // ======= REACTIONS ========
+
+  _showAnnouncementToUsersWhoUpdatedApp = () => {
+    const { announcement, isNewUser } = this;
+    // Check if there is an announcement and don't show announcements to new users
+    if (!announcement || isNewUser) return;
+
+    // Check if the user has already used current version (= has seen the announcement)
+    const { currentVersion, lastSeenAnnouncementVersion } = this;
+    if (semver.gt(currentVersion, lastSeenAnnouncementVersion || '0.0.0')) {
+      debug(`${currentVersion} > ${lastSeenAnnouncementVersion}: announcement is shown`);
+      this._showAnnouncement();
+    }
+  };
+
+  _fetchAnnouncements = () => {
+    const targetVersion = this.targetVersion || this.currentVersion;
+    if (!targetVersion) return;
+    getChangelogRequest.reset().execute(targetVersion);
+    getAnnouncementRequest.reset().execute(targetVersion);
+  };
+
+  _showAnnouncementOnRouteMatch = () => {
+    const { router } = this.stores;
+    const match = matchRoute(ANNOUNCEMENTS_ROUTES.TARGET, router.location.pathname);
+    if (match) {
+      const targetVersion = match.id;
+      this._showAnnouncement({ targetVersion });
+    }
+  }
+}
diff --git a/src/features/settingsWS/actions.js b/src/features/settingsWS/actions.js
new file mode 100755
index 000000000..631670c8a
--- /dev/null
+++ b/src/features/settingsWS/actions.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const settingsWSActions = createActionsFromDefinitions({
+  greet: {
+    name: PropTypes.string.isRequired,
+  },
+}, PropTypes.checkPropTypes);
+
+export default settingsWSActions;
diff --git a/src/features/settingsWS/index.js b/src/features/settingsWS/index.js
new file mode 100755
index 000000000..2064d2973
--- /dev/null
+++ b/src/features/settingsWS/index.js
@@ -0,0 +1,29 @@
+import { reaction } from 'mobx';
+import { SettingsWSStore } from './store';
+
+const debug = require('debug')('Franz:feature:settingsWS');
+
+export const settingsStore = new SettingsWSStore();
+
+export default function initSettingsWebSocket(stores, actions) {
+  const { features } = stores;
+
+  // Toggle SettingsWebSocket feature
+  reaction(
+    () => (
+      features.features.isSettingsWSEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `settingsWS` feature');
+        settingsStore.start(stores, actions);
+      } else if (settingsStore) {
+        debug('Disabling `settingsWS` feature');
+        settingsStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/settingsWS/state.js b/src/features/settingsWS/state.js
new file mode 100755
index 000000000..7b16b2b6e
--- /dev/null
+++ b/src/features/settingsWS/state.js
@@ -0,0 +1,13 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  isFeatureActive: false,
+};
+
+export const settingsWSState = observable(defaultState);
+
+export function resetState() {
+  Object.assign(settingsWSState, defaultState);
+}
+
+export default settingsWSState;
diff --git a/src/features/settingsWS/store.js b/src/features/settingsWS/store.js
new file mode 100755
index 000000000..167a70d10
--- /dev/null
+++ b/src/features/settingsWS/store.js
@@ -0,0 +1,130 @@
+import { observable } from 'mobx';
+import WebSocket from 'ws';
+import ms from 'ms';
+
+import { FeatureStore } from '../utils/FeatureStore';
+import { createReactions } from '../../stores/lib/Reaction';
+import { WS_API } from '../../environment';
+
+const debug = require('debug')('Franz:feature:settingsWS:store');
+
+export class SettingsWSStore extends FeatureStore {
+  stores = null;
+
+  actions = null;
+
+  ws = null;
+
+  pingTimeout = null;
+
+  reconnectTimeout = null;
+
+  @observable connected = false;
+
+  start(stores, actions) {
+    this.stores = stores;
+    this.actions = actions;
+
+    this._registerReactions(createReactions([
+      this._initialize.bind(this),
+      this._reconnect.bind(this),
+      this._close.bind(this),
+    ]));
+  }
+
+  connect() {
+    try {
+      const wsURL = `${WS_API}/ws/${this.stores.user.data.id}`;
+      debug('Setting up WebSocket to', wsURL);
+
+      this.ws = new WebSocket(wsURL);
+
+      this.ws.on('open', () => {
+        debug('Opened WebSocket');
+        this.send({
+          action: 'authorize',
+          token: this.stores.user.authToken,
+        });
+
+        this.connected = true;
+
+        this.heartbeat();
+      });
+
+      this.ws.on('message', (data) => {
+        const resp = JSON.parse(data);
+        debug('Received message', resp);
+
+        if (resp.id) {
+          this.stores.user.getUserInfoRequest.patch((result) => {
+            if (!result) return;
+
+            debug('Patching user object with new values');
+            Object.assign(result, resp);
+          });
+        }
+      });
+
+      this.ws.on('ping', this.heartbeat.bind(this));
+    } catch (err) {
+      console.err(err);
+    }
+  }
+
+  heartbeat() {
+    debug('Heartbeat');
+    clearTimeout(this.pingTimeout);
+
+    this.pingTimeout = setTimeout(() => {
+      debug('Terminating connection, reconnecting in 35');
+      this.ws.terminate();
+
+      this.connected = false;
+    }, ms('35s'));
+  }
+
+  send(data) {
+    if (this.ws && this.ws.readyState === 1) {
+      this.ws.send(JSON.stringify(data));
+      debug('Sending data', data);
+    } else {
+      debug('WebSocket is not initialized');
+    }
+  }
+
+  // Reactions
+
+  _initialize() {
+    if (this.stores.user.data.id && !this.ws) {
+      this.connect();
+    }
+  }
+
+  _reconnect() {
+    if (!this.connected) {
+      debug('Trying to reconnect in 30s');
+      this.reconnectTimeout = setInterval(() => {
+        debug('Trying to reconnect');
+        this.connect();
+      }, ms('30s'));
+    } else {
+      debug('Clearing reconnect interval');
+      clearInterval(this.reconnectTimeout);
+    }
+  }
+
+  _close() {
+    if (!this.stores.user.isLoggedIn) {
+      debug('Stopping reactions');
+      this._stopReactions();
+
+      if (this.ws) {
+        debug('Terminating connection');
+        this.ws.terminate();
+        this.ws = null;
+      }
+    }
+  }
+}
+
+export default SettingsWSStore;
diff --git a/src/features/shareFranz/index.js b/src/features/shareFranz/index.js
index 3a8ec95d3..87deacef4 100644
--- a/src/features/shareFranz/index.js
+++ b/src/features/shareFranz/index.js
@@ -35,7 +35,7 @@ export default function initialize(stores) {
     () => stores.user.isLoggedIn,
     () => {
       setTimeout(() => {
-        if (stores.settings.stats.appStarts % 30 === 0) {
+        if (stores.settings.stats.appStarts % 50 === 0) {
           if (delayAppState.isDelayAppScreenVisible) {
             debug('Delaying share modal by 5 minutes');
             setTimeout(() => showModal(), ms('5m'));
diff --git a/src/features/utils/ActionBinding.js b/src/features/utils/ActionBinding.js
new file mode 100644
index 000000000..497aa071b
--- /dev/null
+++ b/src/features/utils/ActionBinding.js
@@ -0,0 +1,29 @@
+export default class ActionBinding {
+  action;
+
+  isActive = false;
+
+  constructor(action) {
+    this.action = action;
+  }
+
+  start() {
+    if (!this.isActive) {
+      const { action } = this;
+      action[0].listen(action[1]);
+      this.isActive = true;
+    }
+  }
+
+  stop() {
+    if (this.isActive) {
+      const { action } = this;
+      action[0].off(action[1]);
+      this.isActive = false;
+    }
+  }
+}
+
+export const createActionBindings = actions => (
+  actions.map(a => new ActionBinding(a))
+);
diff --git a/src/features/utils/FeatureStore.js b/src/features/utils/FeatureStore.js
index 66b66a104..0bc10e176 100644
--- a/src/features/utils/FeatureStore.js
+++ b/src/features/utils/FeatureStore.js
@@ -1,21 +1,40 @@
-import Reaction from '../../stores/lib/Reaction';
-
 export class FeatureStore {
-  _actions = null;
+  _actions = [];
+
+  _reactions = [];
+
+  stop() {
+    this._stopActions();
+    this._stopReactions();
+  }
+
+  // ACTIONS
+
+  _registerActions(actions) {
+    this._actions = actions;
+    this._startActions();
+  }
 
-  _reactions = null;
+  _startActions(actions = this._actions) {
+    actions.forEach(a => a.start());
+  }
+
+  _stopActions(actions = this._actions) {
+    actions.forEach(a => a.stop());
+  }
+
+  // REACTIONS
+
+  _registerReactions(reactions) {
+    this._reactions = reactions;
+    this._startReactions();
+  }
 
-  _listenToActions(actions) {
-    if (this._actions) this._actions.forEach(a => a[0].off(a[1]));
-    this._actions = [];
-    actions.forEach(a => this._actions.push(a));
-    this._actions.forEach(a => a[0].listen(a[1]));
+  _startReactions(reactions = this._reactions) {
+    reactions.forEach(r => r.start());
   }
 
-  _startReactions(reactions) {
-    if (this._reactions) this._reactions.forEach(r => r.stop());
-    this._reactions = [];
-    reactions.forEach(r => this._reactions.push(new Reaction(r)));
-    this._reactions.forEach(r => r.start());
+  _stopReactions(reactions = this._reactions) {
+    reactions.forEach(r => r.stop());
   }
 }
diff --git a/src/features/utils/FeatureStore.test.js b/src/features/utils/FeatureStore.test.js
new file mode 100644
index 000000000..92308bf52
--- /dev/null
+++ b/src/features/utils/FeatureStore.test.js
@@ -0,0 +1,92 @@
+import PropTypes from 'prop-types';
+import { observable } from 'mobx';
+import { FeatureStore } from './FeatureStore';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+import { createActionBindings } from './ActionBinding';
+import { createReactions } from '../../stores/lib/Reaction';
+
+const actions = createActionsFromDefinitions({
+  countUp: {},
+}, PropTypes.checkPropTypes);
+
+class TestFeatureStore extends FeatureStore {
+  @observable count = 0;
+
+  reactionInvokedCount = 0;
+
+  start() {
+    this._registerActions(createActionBindings([
+      [actions.countUp, this._countUp],
+    ]));
+    this._registerReactions(createReactions([
+      this._countReaction,
+    ]));
+  }
+
+  _countUp = () => {
+    this.count += 1;
+  };
+
+  _countReaction = () => {
+    this.reactionInvokedCount += 1;
+  }
+}
+
+describe('FeatureStore', () => {
+  let store = null;
+
+  beforeEach(() => {
+    store = new TestFeatureStore();
+  });
+
+  describe('registering actions', () => {
+    it('starts the actions', () => {
+      store.start();
+      actions.countUp();
+      expect(store.count).toBe(1);
+    });
+    it('starts the reactions', () => {
+      store.start();
+      actions.countUp();
+      expect(store.reactionInvokedCount).toBe(1);
+    });
+  });
+
+  describe('stopping the store', () => {
+    it('stops the actions', () => {
+      store.start();
+      actions.countUp();
+      store.stop();
+      actions.countUp();
+      expect(store.count).toBe(1);
+    });
+    it('stops the reactions', () => {
+      store.start();
+      actions.countUp();
+      store.stop();
+      store.count += 1;
+      expect(store.reactionInvokedCount).toBe(1);
+    });
+  });
+
+  describe('toggling the store', () => {
+    it('restarts the actions correctly', () => {
+      store.start();
+      actions.countUp();
+      store.stop();
+      actions.countUp();
+      store.start();
+      actions.countUp();
+      expect(store.count).toBe(2);
+    });
+    it('restarts the reactions correctly', () => {
+      store.start();
+      actions.countUp();
+      store.stop();
+      actions.countUp();
+      store.start();
+      actions.countUp();
+      expect(store.count).toBe(2);
+    });
+  });
+});
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index 2c00ea63c..cddbb2b04 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -7,7 +7,7 @@ import injectSheet from 'react-jss';
 import Form from '../../../lib/Form';
 import { required } from '../../../helpers/validation-helpers';
 import { gaEvent } from '../../../lib/analytics';
-import { GA_CATEGORY_WORKSPACES } from '../index';
+import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
 
 const messages = defineMessages({
   submitButton: {
@@ -82,7 +82,7 @@ class CreateWorkspaceForm extends Component {
           {...form.$('name').bind()}
           showLabel={false}
           onEnterKey={this.submitForm.bind(this, form)}
-          focus
+          focus={workspaceStore.isUserAllowedToUseFeature}
         />
         <Button
           className={classes.submitButton}
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index bba4485ff..e602ebd5a 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
@@ -36,6 +36,14 @@ const messages = defineMessages({
     id: 'settings.workspace.form.servicesInWorkspaceHeadline',
     defaultMessage: '!!!Services in this Workspace',
   },
+  noServicesAdded: {
+    id: 'settings.services.noServicesAdded',
+    defaultMessage: '!!!You haven\'t added any services yet.',
+  },
+  discoverServices: {
+    id: 'settings.services.discoverServices',
+    defaultMessage: '!!!Discover services',
+  },
 });
 
 const styles = () => ({
@@ -150,14 +158,29 @@ class EditWorkspaceForm extends Component {
           </div>
           <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
           <div className={classes.serviceList}>
-            {services.map(s => (
-              <WorkspaceServiceListItem
-                key={s.id}
-                service={s}
-                isInWorkspace={workspaceServices.includes(s.id)}
-                onToggle={() => this.toggleService(s)}
-              />
-            ))}
+            {services.length === 0 ? (
+              <div className="align-middle settings__empty-state">
+                {/* ===== Empty state ===== */}
+                <p className="settings__empty-text">
+                  <span className="emoji">
+                    <img src="./assets/images/emoji/sad.png" alt="" />
+                  </span>
+                  {intl.formatMessage(messages.noServicesAdded)}
+                </p>
+                <Link to="/settings/recipes" className="button">{intl.formatMessage(messages.discoverServices)}</Link>
+              </div>
+            ) : (
+              <Fragment>
+                {services.map(s => (
+                  <WorkspaceServiceListItem
+                    key={s.id}
+                    service={s}
+                    isInWorkspace={workspaceServices.includes(s.id)}
+                    onToggle={() => this.toggleService(s)}
+                  />
+                ))}
+              </Fragment>
+            )}
           </div>
         </div>
         <div className="settings__controls">
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index dd4381a15..09c98ab8c 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -170,18 +170,32 @@ class WorkspacesDashboard extends Component {
                     {intl.formatMessage(messages.workspacesRequestFailed)}
                   </Infobox>
                 ) : (
-                  <table className={classes.table}>
-                    {/* ===== Workspaces list ===== */}
-                    <tbody>
-                      {workspaces.map(workspace => (
-                        <WorkspaceItem
-                          key={workspace.id}
-                          workspace={workspace}
-                          onItemClick={w => onWorkspaceClick(w)}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
+                  <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>
             )}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index ea601700e..51a7f3651 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -14,6 +14,8 @@ import {
   updateWorkspaceRequest,
 } from './api';
 import { WORKSPACES_ROUTES } from './index';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
 
 const debug = require('debug')('Franz:feature:workspaces:store');
 
@@ -51,37 +53,78 @@ export default class WorkspacesStore extends FeatureStore {
     return getUserWorkspacesRequest.wasExecuted && this.workspaces.length > 0;
   }
 
+  @computed get isUserAllowedToUseFeature() {
+    return !this.isPremiumUpgradeRequired;
+  }
+
+  @computed get isAnyWorkspaceActive() {
+    return !!this.activeWorkspace;
+  }
+
+  // ========== PRIVATE PROPERTIES ========= //
+
+  _wasDrawerOpenBeforeSettingsRoute = null;
+
+  _freeUserActions = [];
+
+  _premiumUserActions = [];
+
+  _allActions = [];
+
+  _freeUserReactions = [];
+
+  _premiumUserReactions = [];
+
+  _allReactions = [];
+
+  // ========== PUBLIC API ========= //
+
   start(stores, actions) {
     debug('WorkspacesStore::start');
     this.stores = stores;
     this.actions = actions;
 
-    this._listenToActions([
+    // ACTIONS
+
+    this._freeUserActions = createActionBindings([
+      [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
+      [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
+    ]);
+    this._premiumUserActions = createActionBindings([
       [workspaceActions.edit, this._edit],
       [workspaceActions.create, this._create],
       [workspaceActions.delete, this._delete],
       [workspaceActions.update, this._update],
       [workspaceActions.activate, this._setActiveWorkspace],
       [workspaceActions.deactivate, this._deactivateActiveWorkspace],
-      [workspaceActions.toggleWorkspaceDrawer, this._toggleWorkspaceDrawer],
-      [workspaceActions.openWorkspaceSettings, this._openWorkspaceSettings],
     ]);
+    this._allActions = this._freeUserActions.concat(this._premiumUserActions);
+    this._registerActions(this._allActions);
 
-    this._startReactions([
-      this._setWorkspaceBeingEditedReaction,
-      this._setActiveServiceOnWorkspaceSwitchReaction,
+    // REACTIONS
+
+    this._freeUserReactions = createReactions([
+      this._stopPremiumActionsAndReactions,
+      this._openDrawerWithSettingsReaction,
       this._setFeatureEnabledReaction,
       this._setIsPremiumFeatureReaction,
-      this._activateLastUsedWorkspaceReaction,
-      this._openDrawerWithSettingsReaction,
       this._cleanupInvalidServiceReferences,
     ]);
+    this._premiumUserReactions = createReactions([
+      this._setActiveServiceOnWorkspaceSwitchReaction,
+      this._activateLastUsedWorkspaceReaction,
+      this._setWorkspaceBeingEditedReaction,
+    ]);
+    this._allReactions = this._freeUserReactions.concat(this._premiumUserReactions);
+
+    this._registerReactions(this._allReactions);
 
     getUserWorkspacesRequest.execute();
     this.isFeatureActive = true;
   }
 
   stop() {
+    super.stop();
     debug('WorkspacesStore::stop');
     this.isFeatureActive = false;
     this.activeWorkspace = null;
@@ -104,9 +147,7 @@ export default class WorkspacesStore extends FeatureStore {
     return workspace.services.map(id => services.one(id)).filter(s => !!s);
   }
 
-  // ========== PRIVATE ========= //
-
-  _wasDrawerOpenBeforeSettingsRoute = null;
+  // ========== PRIVATE METHODS ========= //
 
   _getWorkspaceById = id => this.workspaces.find(w => w.id === id);
 
@@ -192,6 +233,14 @@ export default class WorkspacesStore extends FeatureStore {
     this.actions.ui.openSettings({ path: 'workspaces' });
   };
 
+  @action reorderServicesOfActiveWorkspace = async ({ oldIndex, newIndex }) => {
+    const { activeWorkspace } = this;
+    const { services } = activeWorkspace;
+    // Move services from the old to the new position
+    services.splice(newIndex, 0, services.splice(oldIndex, 1)[0]);
+    await updateWorkspaceRequest.execute(activeWorkspace);
+  };
+
   // Reactions
 
   _setFeatureEnabledReaction = () => {
@@ -218,13 +267,15 @@ export default class WorkspacesStore extends FeatureStore {
   _setActiveServiceOnWorkspaceSwitchReaction = () => {
     if (!this.isFeatureActive) return;
     if (this.activeWorkspace) {
-      const services = this.stores.services.allDisplayed;
-      const activeService = services.find(s => s.isActive);
+      const activeService = this.stores.services.active;
       const workspaceServices = this.getWorkspaceServices(this.activeWorkspace);
       if (workspaceServices.length <= 0) return;
       const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
       if (!isActiveServiceInWorkspace) {
-        this.actions.service.setActive({ serviceId: workspaceServices[0].id });
+        this.actions.service.setActive({
+          serviceId: workspaceServices[0].id,
+          keepActiveRoute: true,
+        });
       }
     }
   };
@@ -273,4 +324,14 @@ export default class WorkspacesStore extends FeatureStore {
       getUserWorkspacesRequest.execute();
     }
   };
+
+  _stopPremiumActionsAndReactions = () => {
+    if (!this.isUserAllowedToUseFeature) {
+      this._stopActions(this._premiumUserActions);
+      this._stopReactions(this._premiumUserReactions);
+    } else {
+      this._startActions(this._premiumUserActions);
+      this._startReactions(this._premiumUserReactions);
+    }
+  }
 }