Merge tag 'v5.1.0'

# Conflicts:
#	README.md
#	src/components/layout/AppLayout.js

25 files changed, 747 insertions, 364 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index a1641bc4a..d0476ef04 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -3,14 +3,20 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
+import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
+import { Component as ShareFranz } from '../../features/shareFranz';
 import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import AnnouncementScreen from '../../features/announcements/components/AnnouncementScreen';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import { workspaceStore } from '../../features/workspaces';
+import { announcementActions } from '../../features/announcements/actions';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -43,18 +49,30 @@ const messages = defineMessages({
   },
 });
 
-export default
-@observer
+const styles = theme => ({
+  appContent: {
+    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    transition: 'transform 0.5s ease',
+    transform() {
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
+    },
+  },
+});
+
+@injectSheet(styles) @observer
 class AppLayout extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
     sidebar: PropTypes.element.isRequired,
+    workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
     // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
+    nextAppReleaseVersion: PropTypes.string,
     removeNewsItem: PropTypes.func.isRequired,
     reloadServicesAfterUpdate: PropTypes.func.isRequired,
     installAppUpdate: PropTypes.func.isRequired,
@@ -63,10 +81,13 @@ class AppLayout extends Component {
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
+    isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    isAnnouncementVisible: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
     children: [],
+    nextAppReleaseVersion: null,
   };
 
   static contextTypes = {
@@ -75,7 +96,9 @@ class AppLayout extends Component {
 
   render() {
     const {
+      classes,
       isFullScreen,
+      workspacesDrawer,
       sidebar,
       services,
       children,
@@ -83,6 +106,7 @@ class AppLayout extends Component {
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
+      nextAppReleaseVersion,
       removeNewsItem,
       reloadServicesAfterUpdate,
       installAppUpdate,
@@ -91,6 +115,8 @@ class AppLayout extends Component {
       retryRequiredRequests,
       areRequiredRequestsLoading,
       darkMode,
+      isDelayAppScreenVisible,
+      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -99,29 +125,23 @@ class AppLayout extends Component {
       <ErrorBoundary>
         <div className={darkMode ? 'theme__dark' : ''}>
           <div className="app">
-            {isWindows && !isFullScreen && (
-              <TitleBar
-                menu={window.franz.menu.template}
-                icon="assets/images/logo.svg"
-              />
-            )}
-            <div className="app__content">
+            {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
               {sidebar}
               <div className="app__service">
-                {news.length > 0
-                  && news.map(item => (
-                    <InfoBar
-                      key={item.id}
-                      position="top"
-                      type={item.type}
-                      sticky={item.sticky}
-                      onHide={() => removeNewsItem({ newsId: item.id })}
-                    >
-                      <span
-                        dangerouslySetInnerHTML={createMarkup(item.message)}
-                      />
-                    </InfoBar>
-                  ))}
+                <WorkspaceSwitchingIndicator />
+                {news.length > 0 && news.map(item => (
+                  <InfoBar
+                    key={item.id}
+                    position="top"
+                    type={item.type}
+                    sticky={item.sticky}
+                    onHide={() => removeNewsItem({ newsId: item.id })}
+                  >
+                    <span dangerouslySetInnerHTML={createMarkup(item.message)} />
+                  </InfoBar>
+                ))}
                 {/* {!isOnline && (
                   <InfoBar
                     type="danger"
@@ -164,12 +184,18 @@ class AppLayout extends Component {
                     <span className="mdi mdi-information" />
                     {intl.formatMessage(messages.updateAvailable)}
                     {' '}
-                    <a href="https://meetfranz.com/changelog" target="_blank">
+                    <button
+                      className="info-bar__inline-button"
+                      type="button"
+                      onClick={() => announcementActions.show({ targetVersion: nextAppReleaseVersion })}
+                    >
                       <u>{intl.formatMessage(messages.changelog)}</u>
-                    </a>
+                    </button>
                   </InfoBar>
                 )}
                 <BasicAuth />
+                <ShareFranz />
+                {isAnnouncementVisible && (<AnnouncementScreen />)}
                 {services}
               </div>
             </div>
@@ -180,3 +206,5 @@ class AppLayout extends Component {
     );
   }
 }
+
+export default AppLayout;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 609a3b604..36c1f2e39 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -6,6 +6,8 @@ import { observer } from 'mobx-react';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
+import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
+import { gaEvent } from '../../lib/analytics';
 
 const messages = defineMessages({
   settings: {
@@ -24,6 +26,14 @@ const messages = defineMessages({
     id: 'sidebar.unmuteApp',
     defaultMessage: '!!!Enable notifications & audio',
   },
+  openWorkspaceDrawer: {
+    id: 'sidebar.openWorkspaceDrawer',
+    defaultMessage: '!!!Open workspace drawer',
+  },
+  closeWorkspaceDrawer: {
+    id: 'sidebar.closeWorkspaceDrawer',
+    defaultMessage: '!!!Close workspace drawer',
+  },
 });
 
 export default @observer class Sidebar extends Component {
@@ -31,7 +41,9 @@ export default @observer class Sidebar extends Component {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
-  }
+    isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
+    toggleWorkspaceDrawer: PropTypes.func.isRequired,
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -53,9 +65,23 @@ export default @observer class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
+  updateToolTip() {
+    this.disableToolTip();
+    setTimeout(this.enableToolTip.bind(this));
+  }
+
   render() {
-    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
+    const {
+      openSettings,
+      toggleMuteApp,
+      isAppMuted,
+      isWorkspaceDrawerOpen,
+      toggleWorkspaceDrawer,
+    } = this.props;
     const { intl } = this.context;
+    const workspaceToggleMessage = (
+      isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
+    );
 
     return (
       <div className="sidebar">
@@ -64,9 +90,26 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
+        {workspaceStore.isFeatureEnabled ? (
+          <button
+            type="button"
+            onClick={() => {
+              toggleWorkspaceDrawer();
+              this.updateToolTip();
+              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
+            }}
+            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+          >
+            <i className="mdi mdi-view-grid" />
+          </button>
+        ) : null}
         <button
           type="button"
-          onClick={toggleMuteApp}
+          onClick={() => {
+            toggleMuteApp();
+            this.updateToolTip();
+          }}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
         >
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
new file mode 100644
index 000000000..13148b9b3
--- /dev/null
+++ b/src/components/services/content/ServiceView.js
@@ -0,0 +1,139 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { autorun } from 'mobx';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+
+import ServiceModel from '../../../models/Service';
+import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
+import WebviewLoader from '../../ui/WebviewLoader';
+import WebviewCrashHandler from './WebviewCrashHandler';
+import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
+import ServiceDisabled from './ServiceDisabled';
+import ServiceWebview from './ServiceWebview';
+
+export default @observer class ServiceView extends Component {
+  static propTypes = {
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    setWebviewReference: PropTypes.func.isRequired,
+    detachService: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    edit: PropTypes.func.isRequired,
+    enable: PropTypes.func.isRequired,
+    isActive: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    isActive: false,
+  };
+
+  state = {
+    forceRepaint: false,
+    targetUrl: '',
+    statusBarVisible: false,
+  };
+
+  autorunDisposer = null;
+
+  forceRepaintTimeout = null;
+
+  componentDidMount() {
+    this.autorunDisposer = autorun(() => {
+      if (this.props.service.isActive) {
+        this.setState({ forceRepaint: true });
+        this.forceRepaintTimeout = setTimeout(() => {
+          this.setState({ forceRepaint: false });
+        }, 100);
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer();
+    clearTimeout(this.forceRepaintTimeout);
+  }
+
+  updateTargetUrl = (event) => {
+    let visible = true;
+    if (event.url === '' || event.url === '#') {
+      visible = false;
+    }
+    this.setState({
+      targetUrl: event.url,
+      statusBarVisible: visible,
+    });
+  };
+
+  render() {
+    const {
+      detachService,
+      service,
+      setWebviewReference,
+      reload,
+      edit,
+      enable,
+    } = this.props;
+
+    const webviewClasses = classnames({
+      services__webview: true,
+      'services__webview-wrapper': true,
+      'is-active': service.isActive,
+      'services__webview--force-repaint': this.state.forceRepaint,
+    });
+
+    let statusBar = null;
+    if (this.state.statusBarVisible) {
+      statusBar = (
+        <StatusBarTargetUrl text={this.state.targetUrl} />
+      );
+    }
+
+    return (
+      <div className={webviewClasses}>
+        {service.isActive && service.isEnabled && (
+          <Fragment>
+            {service.hasCrashed && (
+              <WebviewCrashHandler
+                name={service.recipe.name}
+                webview={service.webview}
+                reload={reload}
+              />
+            )}
+            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+              <WebviewLoader
+                loaded={false}
+                name={service.name}
+              />
+            )}
+            {service.isError && (
+              <WebviewErrorHandler
+                name={service.recipe.name}
+                errorMessage={service.errorMessage}
+                reload={reload}
+                edit={edit}
+              />
+            )}
+          </Fragment>
+        )}
+        {!service.isEnabled ? (
+          <Fragment>
+            {service.isActive && (
+              <ServiceDisabled
+                name={service.recipe.name}
+                webview={service.webview}
+                enable={enable}
+              />
+            )}
+          </Fragment>
+        ) : (
+          <ServiceWebview
+            service={service}
+            setWebviewReference={setWebviewReference}
+            detachService={detachService}
+          />
+        )}
+        {statusBar}
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index bb577e4cc..7252c695f 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -1,145 +1,50 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { autorun } from 'mobx';
 import { observer } from 'mobx-react';
-import Webview from 'react-electron-web-view';
-import classnames from 'classnames';
+import ElectronWebView from 'react-electron-web-view';
 
 import ServiceModel from '../../../models/Service';
-import StatusBarTargetUrl from '../../ui/StatusBarTargetUrl';
-import WebviewLoader from '../../ui/WebviewLoader';
-import WebviewCrashHandler from './WebviewCrashHandler';
-import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
-import ServiceDisabled from './ServiceDisabled';
 
-export default @observer class ServiceWebview extends Component {
+@observer
+class ServiceWebview extends Component {
   static propTypes = {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
-    reload: PropTypes.func.isRequired,
-    edit: PropTypes.func.isRequired,
-    enable: PropTypes.func.isRequired,
-    isActive: PropTypes.bool,
+    detachService: PropTypes.func.isRequired,
   };
 
-  static defaultProps = {
-    isActive: false,
-  };
-
-  state = {
-    forceRepaint: false,
-    targetUrl: '',
-    statusBarVisible: false,
-  };
-
-  autorunDisposer = null;
-
   webview = null;
 
-  componentDidMount() {
-    this.autorunDisposer = autorun(() => {
-      if (this.props.service.isActive) {
-        this.setState({ forceRepaint: true });
-        setTimeout(() => {
-          this.setState({ forceRepaint: false });
-        }, 100);
-      }
-    });
-  }
-
   componentWillUnmount() {
-    this.autorunDisposer();
-  }
-
-  updateTargetUrl = (event) => {
-    let visible = true;
-    if (event.url === '' || event.url === '#') {
-      visible = false;
-    }
-    this.setState({
-      targetUrl: event.url,
-      statusBarVisible: visible,
-    });
+    const { service, detachService } = this.props;
+    detachService({ service });
   }
 
   render() {
     const {
       service,
       setWebviewReference,
-      reload,
-      edit,
-      enable,
     } = this.props;
 
-    const webviewClasses = classnames({
-      services__webview: true,
-      'services__webview-wrapper': true,
-      'is-active': service.isActive,
-      'services__webview--force-repaint': this.state.forceRepaint,
-    });
-
-    let statusBar = null;
-    if (this.state.statusBarVisible) {
-      statusBar = (
-        <StatusBarTargetUrl text={this.state.targetUrl} />
-      );
-    }
-
     return (
-      <div className={webviewClasses}>
-        {service.isActive && service.isEnabled && (
-          <Fragment>
-            {service.hasCrashed && (
-              <WebviewCrashHandler
-                name={service.recipe.name}
-                webview={service.webview}
-                reload={reload}
-              />
-            )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && (
-              <WebviewLoader
-                loaded={false}
-                name={service.name}
-              />
-            )}
-            {service.isError && (
-              <WebviewErrorHandler
-                name={service.recipe.name}
-                errorMessage={service.errorMessage}
-                reload={reload}
-                edit={edit}
-              />
-            )}
-          </Fragment>
-        )}
-        {!service.isEnabled ? (
-          <Fragment>
-            {service.isActive && (
-              <ServiceDisabled
-                name={service.recipe.name}
-                webview={service.webview}
-                enable={enable}
-              />
-            )}
-          </Fragment>
-        ) : (
-          <Webview
-            ref={(element) => { this.webview = element; }}
-            autosize
-            src={service.url}
-            preload="./webview/recipe.js"
-            partition={`persist:service-${service.id}`}
-            onDidAttach={() => setWebviewReference({
-              serviceId: service.id,
-              webview: this.webview.view,
-            })}
-            onUpdateTargetUrl={this.updateTargetUrl}
-            useragent={service.userAgent}
-            allowpopups
-          />
-        )}
-        {statusBar}
-      </div>
+      <ElectronWebView
+        ref={(webview) => { this.webview = webview; }}
+        autosize
+        src={service.url}
+        preload="./webview/recipe.js"
+        partition={`persist:service-${service.id}`}
+        onDidAttach={() => {
+          setWebviewReference({
+            serviceId: service.id,
+            webview: this.webview.view,
+          });
+        }}
+        onUpdateTargetUrl={this.updateTargetUrl}
+        useragent={service.userAgent}
+        allowpopups
+      />
     );
   }
 }
+
+export default ServiceWebview;
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 54f16ba12..8f8c38a11 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -4,7 +4,7 @@ import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
 
-import Webview from './ServiceWebview';
+import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
 
 const messages = defineMessages({
@@ -22,6 +22,7 @@ export default @observer class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
+    detachService: PropTypes.func.isRequired,
     handleIPCMessage: PropTypes.func.isRequired,
     openWindow: PropTypes.func.isRequired,
     reload: PropTypes.func.isRequired,
@@ -42,6 +43,7 @@ export default @observer class Services extends Component {
       services,
       handleIPCMessage,
       setWebviewReference,
+      detachService,
       openWindow,
       reload,
       openSettings,
@@ -71,11 +73,12 @@ export default @observer class Services extends Component {
           </Appear>
         )}
         {services.map(service => (
-          <Webview
+          <ServiceView
             key={service.id}
             service={service}
             handleIPCMessage={handleIPCMessage}
             setWebviewReference={setWebviewReference}
+            detachService={detachService}
             openWindow={openWindow}
             reload={() => reload({ serviceId: service.id })}
             edit={() => openSettings({ path: `services/edit/${service.id}` })}
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index 42bc3c877..7a69dba87 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
 
 import Button from '../../ui/Button';
 
@@ -35,12 +36,12 @@ export default @observer class WebviewCrashHandler extends Component {
   };
 
   state = {
-    countdown: 10000,
+    countdown: ms('10s'),
   }
 
   countdownInterval = null;
 
-  countdownIntervalTimeout = 1000;
+  countdownIntervalTimeout = ms('1s');
 
 
   componentDidMount() {
@@ -75,7 +76,7 @@ export default @observer class WebviewCrashHandler extends Component {
         <p className="footnote">
           {intl.formatMessage(messages.autoReload, {
             name,
-            seconds: this.state.countdown / 1000,
+            seconds: this.state.countdown / ms('1s'),
           })}
         </p>
       </div>
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index dd5c2140f..5e8260ad0 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -19,7 +19,7 @@ export default @observer class TabBar extends Component {
     updateService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
-  }
+  };
 
   onSortEnd = ({ oldIndex, newIndex }) => {
     const {
@@ -45,7 +45,7 @@ export default @observer class TabBar extends Component {
         redirect: false,
       });
     }
-  }
+  };
 
   disableService({ serviceId }) {
     this.toggleService({ serviceId, isEnabled: false });
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 9c9543749..3f6964b6b 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import moment from 'moment';
+import { ProBadge } from '@meetfranz/ui';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
-import Link from '../../ui/Link';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
@@ -24,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineUpgrade',
     defaultMessage: '!!!Upgrade your Account',
   },
-  headlineInvoices: {
-    id: 'settings.account.headlineInvoices',
-    defaultMessage: '!!Invoices',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -44,14 +39,14 @@ const messages = defineMessages({
     id: 'settings.account.accountType.premium',
     defaultMessage: '!!!Premium Supporter Account',
   },
-  accountTypeEnterprise: {
-    id: 'settings.account.accountType.enterprise',
-    defaultMessage: '!!!Enterprise Account',
-  },
   accountEditButton: {
     id: 'settings.account.account.editButton',
     defaultMessage: '!!!Edit Account',
   },
+  invoicesButton: {
+    id: 'settings.account.headlineInvoices',
+    defaultMessage: '!!Invoices',
+  },
   invoiceDownload: {
     id: 'settings.account.invoiceDownload',
     defaultMessage: '!!!Download',
@@ -81,19 +76,17 @@ const messages = defineMessages({
 export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
-    orders: MobxPropTypes.arrayOrObservableArray.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingOrdersInfo: PropTypes.bool.isRequired,
     isLoadingPlans: PropTypes.bool.isRequired,
-    isCreatingPaymentDashboardUrl: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    openDashboard: PropTypes.func.isRequired,
-    openExternalUrl: PropTypes.func.isRequired,
     onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
+    openEditAccount: PropTypes.func.isRequired,
+    openBilling: PropTypes.func.isRequired,
+    openInvoices: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -103,12 +96,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
-      orders,
       isLoading,
-      isCreatingPaymentDashboardUrl,
-      openDashboard,
-      openExternalUrl,
-      isLoadingOrdersInfo,
       isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -116,6 +104,9 @@ export default @observer class AccountDashboard extends Component {
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
+      openEditAccount,
+      openBilling,
+      openInvoices,
     } = this.props;
     const { intl } = this.context;
 
@@ -153,116 +144,56 @@ export default @observer class AccountDashboard extends Component {
                         src="./assets/images/logo.svg"
                         alt=""
                       />
-                      {user.isPremium && (
-                        <span
-                          className="account__avatar-premium emoji"
-                          data-tip="Premium Supporter Account"
-                        >
-                          <img src="./assets/images/emoji/star.png" alt="" />
-                        </span>
-                      )}
                     </div>
                     <div className="account__info">
                       <h2>
-                        {`${user.firstname} ${user.lastname}`}
+                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                        {user.isPremium && (
+                          <>
+                            {' '}
+                            <ProBadge />
+                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
+                          </>
+                        )}
                       </h2>
                       {user.organization && `${user.organization}, `}
                       {user.email}
-                      <br />
-                      {!user.isEnterprise && !user.isPremium && (
-                        <span className="badge badge">{intl.formatMessage(messages.accountTypeBasic)}</span>
-                      )}
                       {user.isPremium && (
-                        <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
-                      )}
-                      {user.isEnterprise && (
-                        <span className="badge badge--success">{intl.formatMessage(messages.accountTypeEnterprise)}</span>
+                        <div className="manage-user-links">
+                          <Button
+                            label={intl.formatMessage(messages.accountEditButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openEditAccount}
+                          />
+                          {user.isSubscriptionOwner && (
+                            <>
+                              <Button
+                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                                className="franz-form__button--inverted"
+                                onClick={openBilling}
+                              />
+                              <Button
+                                label={intl.formatMessage(messages.invoicesButton)}
+                                className="franz-form__button--inverted"
+                                onClick={openInvoices}
+                              />
+                            </>
+                          )}
+                        </div>
                       )}
                     </div>
-                    <Link to="/settings/user/edit" className="button">
-                      {intl.formatMessage(messages.accountEditButton)}
-                    </Link>
-                    {user.emailValidated}
-                  </div>
-                </div>
-              )}
-
-              {user.isSubscriptionOwner && (
-                isLoadingOrdersInfo ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    {orders.length > 0 && (
-                      <Fragment>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineSubscription)}</h2>
-                          <div className="account__subscription">
-                            {orders[0].name}
-                            <span className="badge">{orders[0].price}</span>
-                            <Button
-                              label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                              className="account__subscription-button franz-form__button--inverted"
-                              loaded={!isCreatingPaymentDashboardUrl}
-                              onClick={() => openDashboard()}
-                            />
-                          </div>
-                        </div>
-                        <div className="account__box">
-                          <h2>{intl.formatMessage(messages.headlineInvoices)}</h2>
-                          <table className="invoices">
-                            <tbody>
-                              {orders.map(order => (
-                                <tr key={order.id}>
-                                  <td className="invoices__date">
-                                    {moment(order.date).format('DD.MM.YYYY')}
-                                  </td>
-                                  <td className="invoices__action">
-                                    <button
-                                      type="button"
-                                      onClick={() => openExternalUrl(order.invoiceUrl)}
-                                    >
-                                      {intl.formatMessage(messages.invoiceDownload)}
-                                    </button>
-                                  </td>
-                                </tr>
-                              ))}
-                            </tbody>
-                          </table>
-                        </div>
-                      </Fragment>
+                    {!user.isPremium && (
+                      <Button
+                        label={intl.formatMessage(messages.accountEditButton)}
+                        className="franz-form__button--inverted"
+                        onClick={openEditAccount}
+                      />
                     )}
                   </div>
-                )
-              )}
-
-              {user.isEnterprise && (
-                <div className="account">
-                  <div className="account__box">
-                    <h2>{user.company.name}</h2>
-                    <p>
-                      Technical contact:&nbsp;
-                      <Link
-                        className="link"
-                        target="_blank"
-                        to={`mailto:${user.company.contact.technical}?subject=Franz`}
-                      >
-                        {user.company.contact.technical}
-                      </Link>
-                      <br />
-                      General contact:&nbsp;
-                      <Link
-                        className="link"
-                        target="_blank"
-                        to={`mailto:${user.company.contact.default}?subject=Franz`}
-                      >
-                        {user.company.contact.default}
-                      </Link>
-                    </p>
-                  </div>
                 </div>
               )}
 
-              {!user.isEnterprise && !user.isPremium && (
+              {!user.isPremium && (
                 isLoadingPlans ? (
                   <Loader />
                 ) : (
@@ -277,27 +208,25 @@ export default @observer class AccountDashboard extends Component {
                 )
               )}
 
-              {!user.isEnterprise && (
-                <div className="account franz-form">
-                  <div className="account__box">
-                    <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
-                    {!isDeleteAccountSuccessful && (
-                      <div className="account__subscription">
-                        <p>{intl.formatMessage(messages.deleteInfo)}</p>
-                        <Button
-                          label={intl.formatMessage(messages.deleteAccount)}
-                          buttonType="danger"
-                          onClick={() => deleteAccount()}
-                          loaded={!isLoadingDeleteAccount}
-                        />
-                      </div>
-                    )}
-                    {isDeleteAccountSuccessful && (
-                      <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
-                    )}
+              <div className="account franz-form">
+                <div className="account__box">
+                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  {!isDeleteAccountSuccessful && (
+                  <div className="account__subscription">
+                    <p>{intl.formatMessage(messages.deleteInfo)}</p>
+                    <Button
+                      label={intl.formatMessage(messages.deleteAccount)}
+                      buttonType="danger"
+                      onClick={() => deleteAccount()}
+                      loaded={!isLoadingDeleteAccount}
+                    />
                   </div>
+                  )}
+                  {isDeleteAccountSuccessful && (
+                  <p>{intl.formatMessage(messages.deleteEmailSent)}</p>
+                  )}
                 </div>
-              )}
+              </div>
             </Fragment>
           )}
         </div>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 953f702f8..df4b3b3b2 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -2,8 +2,12 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
+import { ProBadge } from '@meetfranz/ui';
 
 import Link from '../../ui/Link';
+import { workspaceStore } from '../../../features/workspaces';
+import UIStore from '../../../stores/UIStore';
+import UserStore from '../../../stores/UserStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -14,10 +18,18 @@ const messages = defineMessages({
     id: 'settings.navigation.yourServices',
     defaultMessage: '!!!Your services',
   },
+  yourWorkspaces: {
+    id: 'settings.navigation.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
   account: {
     id: 'settings.navigation.account',
     defaultMessage: '!!!Account',
   },
+  team: {
+    id: 'settings.navigation.team',
+    defaultMessage: '!!!Manage Team',
+  },
   settings: {
     id: 'settings.navigation.settings',
     defaultMessage: '!!!Settings',
@@ -34,7 +46,12 @@ const messages = defineMessages({
 
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+      user: PropTypes.instanceOf(UserStore).isRequired,
+    }).isRequired,
     serviceCount: PropTypes.number.isRequired,
+    workspaceCount: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -42,7 +59,9 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount } = this.props;
+    const { serviceCount, workspaceCount, stores } = this.props;
+    const { isDarkThemeActive } = stores.ui;
+    const { router, user } = stores;
     const { intl } = this.context;
 
     return (
@@ -63,6 +82,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
+        {workspaceStore.isFeatureEnabled ? (
+          <Link
+            to="/settings/workspaces"
+            className="settings-navigation__link"
+            activeClassName="is-active"
+          >
+            {intl.formatMessage(messages.yourWorkspaces)}
+            {' '}
+            {workspaceStore.isPremiumUpgradeRequired ? (
+              <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} />
+            ) : (
+              <span className="badge">{workspaceCount}</span>
+            )}
+          </Link>
+        ) : null}
         <Link
           to="/settings/user"
           className="settings-navigation__link"
@@ -71,6 +105,16 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {intl.formatMessage(messages.account)}
         </Link>
         <Link
+          to="/settings/team"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.team)}
+          {!user.data.isPremium && (
+            <ProBadge inverted={!isDarkThemeActive && router.location.pathname === '/settings/team'} />
+          )}
+        </Link>
+        <Link
           to="/settings/app"
           className="settings-navigation__link"
           activeClassName="is-active"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 468d85c45..4ba2eb844 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -128,7 +128,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyFeaturePremiumFeature: PropTypes.bool.isRequired,
+    isProxyPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -191,7 +192,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyFeaturePremiumFeature,
+      isProxyPremiumFeature,
+      isSpellcheckerPremiumFeature,
     } = this.props;
     const { intl } = this.context;
 
@@ -339,14 +341,20 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer>
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+            >
               <div className="settings__settings-group">
                 <Select field={form.$('spellcheckerLanguage')} />
               </div>
             </PremiumFeatureContainer>
 
             {isProxyFeatureEnabled && (
-              <PremiumFeatureContainer condition={isProxyFeaturePremiumFeature}>
+              <PremiumFeatureContainer
+                condition={isProxyPremiumFeature}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
+              >
                 <div className="settings__settings-group">
                   <h3>
                     {intl.formatMessage(messages.headlineProxy)}
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a12df7372..53bae12df 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -65,7 +65,7 @@ export default @observer class ServicesDashboard extends Component {
 
   static defaultProps = {
     searchNeedle: '',
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a92e559f3..efd453356 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -81,6 +81,10 @@ const messages = defineMessages({
     id: 'settings.app.restartRequired',
     defaultMessage: '!!!Changes require restart',
   },
+  languageDisclaimer: {
+    id: 'settings.app.languageDisclaimer',
+    defaultMessage: '!!!Official translations are English & German. All other languages are community based translations.',
+  },
 });
 
 export default @observer class EditSettingsForm extends Component {
@@ -170,6 +174,7 @@ export default @observer class EditSettingsForm extends Component {
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
                 <Toggle
@@ -238,6 +243,10 @@ export default @observer class EditSettingsForm extends Component {
             {intl.formatMessage(messages.currentVersion)}
             {' '}
             {remote.app.getVersion()}
+            <p className="settings__message">
+              <span className="mdi mdi-information" />
+              {intl.formatMessage(messages.languageDisclaimer)}
+            </p>
           </form>
         </div>
       </div>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
new file mode 100644
index 000000000..82c517fcb
--- /dev/null
+++ b/src/components/settings/team/TeamDashboard.js
@@ -0,0 +1,152 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import ReactTooltip from 'react-tooltip';
+import injectSheet from 'react-jss';
+
+import Loader from '../../ui/Loader';
+import Button from '../../ui/Button';
+import Infobox from '../../ui/Infobox';
+import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.team.headline',
+    defaultMessage: '!!!Team',
+  },
+  contentHeadline: {
+    id: 'settings.team.contentHeadline',
+    defaultMessage: '!!!Franz for Teams',
+  },
+  intro: {
+    id: 'settings.team.intro',
+    defaultMessage: '!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.',
+  },
+  copy: {
+    id: 'settings.team.copy',
+    defaultMessage: '!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!',
+  },
+  manageButton: {
+    id: 'settings.team.manageAction',
+    defaultMessage: '!!!Manage your Team on meetfranz.com',
+  },
+  upgradeButton: {
+    id: 'settings.team.upgradeAction',
+    defaultMessage: '!!!Upgrade your Account',
+  },
+});
+
+const styles = {
+  cta: {
+    margin: [40, 'auto'],
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    height: 'auto',
+
+    '@media(min-width: 800px)': {
+      flexDirection: 'row',
+    },
+  },
+  content: {
+    height: 'auto',
+    order: 1,
+
+    '@media(min-width: 800px)': {
+      order: 0,
+    },
+  },
+  image: {
+    display: 'block',
+    height: 150,
+    order: 0,
+    margin: [0, 'auto', 40, 'auto'],
+
+    '@media(min-width: 800px)': {
+      marginLeft: 40,
+      order: 1,
+    },
+  },
+};
+
+
+export default @injectSheet(styles) @observer class TeamDashboard extends Component {
+  static propTypes = {
+    isLoading: PropTypes.bool.isRequired,
+    userInfoRequestFailed: PropTypes.bool.isRequired,
+    retryUserInfoRequest: PropTypes.func.isRequired,
+    openTeamManagement: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      isLoading,
+      userInfoRequestFailed,
+      retryUserInfoRequest,
+      openTeamManagement,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            {intl.formatMessage(messages.headline)}
+          </span>
+        </div>
+        <div className="settings__body">
+          {isLoading && (
+            <Loader />
+          )}
+
+          {!isLoading && userInfoRequestFailed && (
+            <Infobox
+              icon="alert"
+              type="danger"
+              ctaLabel={intl.formatMessage(messages.tryReloadUserInfoRequest)}
+              ctaLoading={isLoading}
+              ctaOnClick={retryUserInfoRequest}
+            >
+              {intl.formatMessage(messages.userInfoRequestFailed)}
+            </Infobox>
+          )}
+
+          {!userInfoRequestFailed && (
+            <>
+              {!isLoading && (
+                <>
+                  <PremiumFeatureContainer>
+                    <>
+                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
+                      <div className={classes.container}>
+                        <div className={classes.content}>
+                          <p>{intl.formatMessage(messages.intro)}</p>
+                          <p>{intl.formatMessage(messages.copy)}</p>
+                        </div>
+                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                      </div>
+                      <Button
+                        label={intl.formatMessage(messages.manageButton)}
+                        onClick={openTeamManagement}
+                        className={classes.cta}
+                      />
+                    </>
+                  </PremiumFeatureContainer>
+                </>
+              )}
+            </>
+          )}
+        </div>
+        <ReactTooltip place="right" type="dark" effect="solid" />
+      </div>
+    );
+  }
+}
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index 0e3ac6b10..a1a353e57 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -3,11 +3,10 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
-
-// import { Link } from 'react-router';
+import { Input } from '@meetfranz/forms';
 
 import Form from '../../../lib/Form';
-import Input from '../../ui/Input';
+// import Input from '../../ui/Input';
 import Button from '../../ui/Button';
 import Radio from '../../ui/Radio';
 import Infobox from '../../ui/Infobox';
@@ -39,13 +38,12 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class EditServiceForm extends Component {
+export default @observer class EditUserForm extends Component {
   static propTypes = {
     status: MobxPropTypes.observableArray.isRequired,
     form: PropTypes.instanceOf(Form).isRequired,
     onSubmit: PropTypes.func.isRequired,
     isSaving: PropTypes.bool.isRequired,
-    isEnterprise: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -68,7 +66,6 @@ export default @observer class EditServiceForm extends Component {
       // user,
       status,
       form,
-      isEnterprise,
       isSaving,
     } = this.props;
     const { intl } = this.context;
@@ -98,23 +95,21 @@ export default @observer class EditServiceForm extends Component {
             )}
             <h2>{intl.formatMessage(messages.headlineAccount)}</h2>
             <div className="grid__row">
-              <Input field={form.$('firstname')} focus />
-              <Input field={form.$('lastname')} />
+              <Input {...form.$('firstname').bind()} focus />
+              <Input {...form.$('lastname').bind()} />
             </div>
-            <Input field={form.$('email')} />
-            {!isEnterprise && (
-              <Radio field={form.$('accountType')} />
-            )}
-            {!isEnterprise && form.$('accountType').value === 'company' && (
+            <Input {...form.$('email').bind()} />
+            <Radio field={form.$('accountType')} />
+            {form.$('accountType').value === 'company' && (
               <Input field={form.$('organization')} />
             )}
             <h2>{intl.formatMessage(messages.headlinePassword)}</h2>
             <Input
-              field={form.$('oldPassword')}
+              {...form.$('oldPassword').bind()}
               showPasswordToggle
             />
             <Input
-              field={form.$('newPassword')}
+              {...form.$('newPassword').bind()}
               showPasswordToggle
               scorePassword
             />
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 90da8ddc3..50f1e0522 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -35,31 +35,33 @@ const messages = defineMessages({
     id: 'subscription.includedFeatures',
     defaultMessage: '!!!The Franz Premium Supporter Account includes',
   },
-  features: {
-    onpremise: {
-      id: 'subscription.features.onpremise.mattermost',
-      defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
-    },
-    noInterruptions: {
-      id: 'subscription.features.noInterruptions',
-      defaultMessage: '!!!No app delays & nagging to upgrade license',
-    },
-    proxy: {
-      id: 'subscription.features.proxy',
-      defaultMessage: '!!!Proxy support for services',
-    },
-    spellchecker: {
-      id: 'subscription.features.spellchecker',
-      defaultMessage: '!!!Support for Spellchecker',
-    },
-    ads: {
-      id: 'subscription.features.ads',
-      defaultMessage: '!!!No ads, ever!',
-    },
-    comingSoon: {
-      id: 'subscription.features.comingSoon',
-      defaultMessage: '!!!coming soon',
-    },
+  onpremise: {
+    id: 'subscription.features.onpremise.mattermost',
+    defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
+  },
+  noInterruptions: {
+    id: 'subscription.features.noInterruptions',
+    defaultMessage: '!!!No app delays & nagging to upgrade license',
+  },
+  proxy: {
+    id: 'subscription.features.proxy',
+    defaultMessage: '!!!Proxy support for services',
+  },
+  spellchecker: {
+    id: 'subscription.features.spellchecker',
+    defaultMessage: '!!!Support for Spellchecker',
+  },
+  workspaces: {
+    id: 'subscription.features.workspaces',
+    defaultMessage: '!!!Organize your services in workspaces',
+  },
+  ads: {
+    id: 'subscription.features.ads',
+    defaultMessage: '!!!No ads, ever!',
+  },
+  comingSoon: {
+    id: 'subscription.features.comingSoon',
+    defaultMessage: '!!!coming soon',
   },
   euTaxInfo: {
     id: 'subscription.euTaxInfo',
@@ -85,7 +87,7 @@ export default @observer class SubscriptionForm extends Component {
     showSkipOption: false,
     skipAction: () => null,
     skipButtonLabel: '',
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -162,18 +164,21 @@ export default @observer class SubscriptionForm extends Component {
             </p>
             <div className="subscription">
               <ul className="subscription__premium-features">
-                <li>{intl.formatMessage(messages.features.onpremise)}</li>
+                <li>{intl.formatMessage(messages.onpremise)}</li>
+                <li>
+                  {intl.formatMessage(messages.noInterruptions)}
+                </li>
                 <li>
-                  {intl.formatMessage(messages.features.noInterruptions)}
+                  {intl.formatMessage(messages.spellchecker)}
                 </li>
                 <li>
-                  {intl.formatMessage(messages.features.spellchecker)}
+                  {intl.formatMessage(messages.proxy)}
                 </li>
                 <li>
-                  {intl.formatMessage(messages.features.proxy)}
+                  {intl.formatMessage(messages.workspaces)}
                 </li>
                 <li>
-                  {intl.formatMessage(messages.features.ads)}
+                  {intl.formatMessage(messages.ads)}
                 </li>
               </ul>
             </div>
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index b5d7c4b2d..0f6f0260f 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import Webview from 'react-electron-web-view';
+import ms from 'ms';
 
 import Button from '../ui/Button';
 
@@ -42,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, 4000);
+    }, ms('4s'));
   }
 
   render() {
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 61053f6d1..b0c7fed7b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
-  }
+  };
 
   state = {
     step: 0,
-  }
+  };
 
   interval = null;
 
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 6ecf4d395..06dab1eb6 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
-  }
+  };
 
   static defaultProps = {
     className: null,
     spinnerColor: null,
     children: null,
-  }
+  };
 
   render() {
     const {
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index a33c6474a..0917ee9f0 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -13,6 +13,8 @@ export default @observer class Infobox extends Component {
     ctaLabel: PropTypes.string,
     ctaLoading: PropTypes.bool,
     dismissable: PropTypes.bool,
+    onDismiss: PropTypes.func,
+    onSeen: PropTypes.func,
   };
 
   static defaultProps = {
@@ -22,12 +24,19 @@ export default @observer class Infobox extends Component {
     ctaOnClick: () => null,
     ctaLabel: '',
     ctaLoading: false,
+    onDismiss: () => null,
+    onSeen: () => null,
   };
 
   state = {
     dismissed: false,
   };
 
+  componentDidMount() {
+    const { onSeen } = this.props;
+    if (onSeen) onSeen();
+  }
+
   render() {
     const {
       children,
@@ -37,6 +46,7 @@ export default @observer class Infobox extends Component {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      onDismiss,
     } = this.props;
 
     if (this.state.dismissed) {
@@ -76,9 +86,10 @@ export default @observer class Infobox extends Component {
         {dismissable && (
           <button
             type="button"
-            onClick={() => this.setState({
-              dismissed: true,
-            })}
+            onClick={() => {
+              this.setState({ dismissed: true });
+              if (onDismiss) onDismiss();
+            }}
             className="infobox__delete mdi mdi-close"
           />
         )}
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index d84e4c713..0b7154760 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -3,9 +3,12 @@ import ReactModal from 'react-modal';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import injectCSS from 'react-jss';
+import { Icon } from '@meetfranz/ui';
 
 import styles from './styles';
 
+// ReactModal.setAppElement('#root');
+
 export default @injectCSS(styles) class Modal extends Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
@@ -14,11 +17,15 @@ export default @injectCSS(styles) class Modal extends Component {
     isOpen: PropTypes.bool.isRequired,
     portal: PropTypes.string,
     close: PropTypes.func.isRequired,
+    shouldCloseOnOverlayClick: PropTypes.bool,
+    showClose: PropTypes.bool,
   }
 
   static defaultProps = {
     className: null,
     portal: 'modal-portal',
+    shouldCloseOnOverlayClick: false,
+    showClose: true,
   }
 
   render() {
@@ -29,6 +36,8 @@ export default @injectCSS(styles) class Modal extends Component {
       isOpen,
       portal,
       close,
+      shouldCloseOnOverlayClick,
+      showClose,
     } = this.props;
 
     return (
@@ -42,14 +51,17 @@ export default @injectCSS(styles) class Modal extends Component {
         overlayClassName={classes.overlay}
         portal={portal}
         onRequestClose={close}
+        shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
       >
-        {/* <button
-          type="button"
-          className={classnames({
-            [`${classes.close}`]: true,
-            'mdi mdi-close': true,
-          })}
-        /> */}
+        {showClose && close && (
+          <button
+            type="button"
+            className={classes.close}
+            onClick={close}
+          >
+            <Icon icon="mdiClose" size={1.5} />
+          </button>
+        )}
         <div className={classes.content}>
           {children}
         </div>
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index 56fecbf55..49b970c97 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -28,5 +28,6 @@ export default theme => ({
     position: 'absolute',
     top: 0,
     right: 0,
+    padding: 20,
   },
 });
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..41881e044 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -19,14 +20,14 @@ export default theme => ({
     color: theme.colorSubscriptionContainerActionButtonColor,
     'margin-left': 'auto',
     'border-radius': theme.borderRadiusSmall,
-    padding: [2, 4],
+    padding: [4, 8],
     'font-size': 12,
     pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
new file mode 100644
index 000000000..0b9155a4e
--- /dev/null
+++ b/src/components/ui/ServiceIcon.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import ServiceModel from '../../models/Service';
+
+const styles = theme => ({
+  root: {
+    height: 'auto',
+  },
+  icon: {
+    width: theme.serviceIcon.width,
+  },
+  isCustomIcon: {
+    width: theme.serviceIcon.isCustom.width,
+    border: theme.serviceIcon.isCustom.border,
+    borderRadius: theme.serviceIcon.isCustom.borderRadius,
+  },
+  isDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: '.5',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceIcon extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      service,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames([
+          classes.root,
+          className,
+        ])}
+      >
+        <img
+          src={service.icon}
+          className={classnames([
+            classes.icon,
+            service.isEnabled ? null : classes.isDisabled,
+            service.hasCustomIcon ? classes.isCustomIcon : null,
+          ])}
+          alt=""
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceIcon;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 3a3dbbe49..58b6b6f1b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,23 +2,35 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
-
 import styles from './styles';
 
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: '!!!Loading',
+  },
+});
+
 export default @observer @injectSheet(styles) class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
-  }
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
 
   render() {
     const { classes, name } = this.props;
+    const { intl } = this.context;
     return (
       <FullscreenLoader
         className={classes.component}
-        title={`Loading ${name}`}
+        title={`${intl.formatMessage(messages.loading)} ${name}`}
       />
     );
   }