bugfixing & polishing

23 files changed, 411 insertions, 106 deletions

diff --git a/src/assets/images/workspaces/teaser_dark.png b/src/assets/images/workspaces/teaser_dark.png
new file mode 100644
index 000000000..5b6d7334b
--- /dev/null
+++ b/src/assets/images/workspaces/teaser_dark.png
diff --git a/src/assets/images/workspaces/teaser_light.png b/src/assets/images/workspaces/teaser_light.png
new file mode 100644
index 000000000..635af43fa
--- /dev/null
+++ b/src/assets/images/workspaces/teaser_light.png
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 900a83a78..4fd1e8163 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -93,9 +93,11 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AccountDashboard extends Component {
+@observer
+class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
@@ -115,6 +117,7 @@ export default @observer class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isProUser,
       isLoading,
       userInfoRequestFailed,
       retryUserInfoRequest,
@@ -234,11 +237,13 @@ export default @observer class AccountDashboard extends Component {
                           </>
                         )}
                         <div className="manage-user-links">
-                          <Button
-                            label={intl.formatMessage(messages.upgradeAccountToPro)}
-                            className="franz-form__button--primary"
-                            onClick={upgradeToPro}
-                          />
+                          {!isProUser && (
+                            <Button
+                              label={intl.formatMessage(messages.upgradeAccountToPro)}
+                              className="franz-form__button--primary"
+                              onClick={upgradeToPro}
+                            />
+                          )}
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
@@ -290,3 +295,5 @@ export default @observer class AccountDashboard extends Component {
     );
   }
 }
+
+export default AccountDashboard;
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 75e60b7ec..08988024a 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -218,7 +218,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 <>
                   <H2>
                     {intl.formatMessage(messages.headlineCustomRecipes)}
-                    {isCommunityRecipesIncludedInCurrentPlan && (
+                    {!isCommunityRecipesIncludedInCurrentPlan && (
                       <ProBadge className={classes.proBadge} />
                     )}
                   </H2>
@@ -247,7 +247,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 </>
               )}
               <PremiumFeatureContainer
-                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesIncludedInCurrentPlan}
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && !isCommunityRecipesIncludedInCurrentPlan}
               >
                 {recipeFilter === 'dev' && communityRecipes.length > 0 && (
                   <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 9fe1c93b7..9ed548f16 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -41,7 +41,7 @@ const messages = defineMessages({
   },
 });
 
-const styles = () => ({
+const styles = theme => ({
   activateTrialButton: {
     margin: [40, 0, 10],
   },
@@ -49,6 +49,7 @@ const styles = () => ({
     margin: [0, 0, 40],
     background: 'none',
     border: 'none',
+    color: theme.colorText,
   },
   keyTerms: {
     marginTop: 20,
diff --git a/src/components/ui/ActivateTrialButton/index.js b/src/components/ui/ActivateTrialButton/index.js
new file mode 100644
index 000000000..c3e5f4a6f
--- /dev/null
+++ b/src/components/ui/ActivateTrialButton/index.js
@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+
+const messages = defineMessages({
+  action: {
+    id: 'feature.delayApp.upgrade.action',
+    defaultMessage: '!!!Get a Franz Supporter License',
+  },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
+  shortAction: {
+    id: 'feature.delayApp.upgrade.actionShort',
+    defaultMessage: '!!!Upgrade account',
+  },
+  shortActionTrial: {
+    id: 'feature.delayApp.trial.actionShort',
+    defaultMessage: '!!!Activate the free Franz Professional trial',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class ActivateTrialButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    short: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    className: '',
+    short: false,
+    gaEventInfo: null,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, stores, gaEventInfo } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    let label = '';
+    if (!hadSubscription) {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+
+      label = 'Start Trial';
+    } else {
+      actions.ui.openSettings({ path: 'user' });
+
+      label = 'Upgrade Account';
+    }
+
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, label);
+    }
+  }
+
+  render() {
+    const { stores, className, short } = this.props;
+    const { intl } = this.context;
+
+    const { hadSubscription } = stores.user.data;
+
+    let label;
+    if (hadSubscription) {
+      label = short ? messages.shortAction : messages.action;
+    } else {
+      label = short ? messages.shortActionTrial : messages.actionTrial;
+    }
+
+    return (
+      <Button
+        label={intl.formatMessage(label)}
+        className={classnames({
+          [className]: className,
+        })}
+        buttonType="inverted"
+        onClick={this.handleCTAClick.bind(this)}
+        busy={stores.user.activateTrialRequest.isExecuting}
+      />
+    );
+  }
+}
+
+export default ActivateTrialButton;
+
+ActivateTrialButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 53616f2eb..7c482c4d4 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -6,7 +6,7 @@ import { mdiCheckCircle } from '@mdi/js';
 
 const styles = theme => ({
   featureItem: {
-    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    borderBottom: [1, 'solid', theme.defaultContentBorder],
     padding: [8, 0],
     display: 'flex',
     alignItems: 'center',
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 3c1e0fac3..8d2746e22 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -10,6 +10,7 @@ import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
 import { gaEvent } from '../../../lib/analytics';
+import { FeatureStore } from '../../../features/utils/FeatureStore';
 
 const messages = defineMessages({
   action: {
@@ -22,7 +23,10 @@ const messages = defineMessages({
 class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
-    condition: PropTypes.bool,
+    condition: PropTypes.oneOfType([
+      PropTypes.bool,
+      PropTypes.func,
+    ]),
     gaEventInfo: PropTypes.shape({
       category: PropTypes.string.isRequired,
       event: PropTypes.string.isRequired,
@@ -31,7 +35,7 @@ class PremiumFeatureContainer extends Component {
   };
 
   static defaultProps = {
-    condition: true,
+    condition: null,
     gaEventInfo: null,
   };
 
@@ -51,7 +55,18 @@ class PremiumFeatureContainer extends Component {
 
     const { intl } = this.context;
 
-    return !stores.user.data.isPremium && !!condition ? (
+    let showWrapper = !!condition;
+
+    if (condition === null) {
+      showWrapper = !stores.user.data.isPremium;
+    } else if (typeof condition === 'function') {
+      showWrapper = condition({
+        isPremium: stores.user.data.isPremium,
+        features: stores.features.features,
+      });
+    }
+
+    return showWrapper ? (
       <div className={classes.container}>
         <div className={classes.titleContainer}>
           <p className={classes.title}>Premium Feature</p>
@@ -81,6 +96,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
   children: oneOrManyChildElements.isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeatureStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
diff --git a/src/config.js b/src/config.js
index 405cc5253..fba739ddd 100644
--- a/src/config.js
+++ b/src/config.js
@@ -91,8 +91,8 @@ export const ALLOWED_PROTOCOLS = [
 ];
 
 export const PLANS = {
-  PERSONAL: 'PERSONAL_MONTHLY',
-  PRO: 'PRO_MONTHLY',
+  PERSONAL: 'PERSONAL',
+  PRO: 'PRO',
   LEGACY: 'LEGACY',
   FREE: 'FREE',
 };
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index f9eae4957..2b5eba91c 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -42,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
+          isProUser={user.isPro}
           isLoading={isLoadingUserInfo}
           isLoadingPlans={isLoadingPlans}
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d8d96ba85..9cf925444 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -10,6 +10,7 @@ import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
 import { Button } from '@meetfranz/forms';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
+import ActivateTrialButton from '../../../components/ui/activateTrialButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -70,7 +71,7 @@ const styles = theme => ({
     height: OPEN_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: props => (props.width + (props.isVisible ? -OPEN_TODOS_BUTTON_SIZE / 2 : 0)),
     borderRadius: OPEN_TODOS_BUTTON_SIZE / 2,
     opacity: props => (props.isVisible ? 0 : 1),
@@ -94,7 +95,7 @@ const styles = theme => ({
     height: CLOSE_TODOS_BUTTON_SIZE,
     background: theme.todos.toggleButton.background,
     position: 'absolute',
-    bottom: 80,
+    bottom: 120,
     right: ({ width }) => (width + -CLOSE_TODOS_BUTTON_SIZE / 2),
     borderRadius: CLOSE_TODOS_BUTTON_SIZE / 2,
     opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
@@ -143,7 +144,6 @@ class TodosWebview extends Component {
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
     isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
-    upgradeAccount: PropTypes.func.isRequired,
   };
 
   state = {
@@ -235,7 +235,6 @@ class TodosWebview extends Component {
       isVisible,
       togglePanel,
       isTodosIncludedInCurrentPlan,
-      upgradeAccount,
     } = this.props;
 
     const {
@@ -291,11 +290,10 @@ class TodosWebview extends Component {
                 <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
                 <p>{intl.formatMessage(messages.premiumInfo)}</p>
                 <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <Button
-                  label={intl.formatMessage(messages.upgradeCTA)}
+                <ActivateTrialButton
                   className={classes.premiumCTA}
-                  onClick={upgradeAccount}
-                  buttonType="inverted"
+                  gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                  short
                 />
               </div>
             </Appear>
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index 7f3688828..65afc985b 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -26,7 +26,6 @@ class TodosScreen extends Component {
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
           isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false}
-          upgradeAccount={() => this.props.actions.ui.openSettings({ path: 'user' })}
         />
       </ErrorBoundary>
     );
@@ -39,9 +38,4 @@ TodosScreen.wrappedComponent.propTypes = {
   stores: PropTypes.shape({
     features: PropTypes.instanceOf(FeaturesStore).isRequired,
   }).isRequired,
-  actions: PropTypes.shape({
-    ui: PropTypes.shape({
-      openSettings: PropTypes.func.isRequired,
-    }).isRequired,
-  }).isRequired,
 };
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 7da3b7f49..56e117c6c 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -12,6 +12,7 @@ import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
 import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE } from '.';
 import { IPC } from './constants';
+import { state as delayAppState } from '../delayApp';
 
 const debug = require('debug')('Franz:feature:todos:store');
 
@@ -29,7 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
-    if (this.stores.services.all.length === 0) return false;
+    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 09c98ab8c..9e06a78e3 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox } from '@meetfranz/ui';
@@ -12,6 +12,8 @@ import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
 import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
+import UIStore from '../../../stores/UIStore';
+import ActivateTrialButton from '../../../components/ui/activateTrialButton';
 
 const messages = defineMessages({
   headline: {
@@ -62,17 +64,27 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: '20px',
-    backgroundColor: '#3498db',
-    marginLeft: '-20px',
-    marginBottom: '20px',
+    padding: 20,
+    // backgroundColor: '#3498db',
+    marginLeft: -20,
+    marginBottom: 40,
+    paddingBottom: 40,
     height: 'auto',
-    color: 'white',
-    borderRadius: theme.borderRadius,
+    display: 'flex',
+    borderBottom: [1, 'solid', theme.inputBackground],
+  },
+  teaserImage: {
+    width: 200,
+    height: '100%',
+    float: 'left',
+    margin: [-8, 0, 0, -20],
+  },
+  upgradeCTA: {
+    marginTop: 20,
   },
 });
 
-@injectSheet(styles) @observer
+@inject('stores') @injectSheet(styles) @observer
 class WorkspacesDashboard extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -100,7 +112,9 @@ class WorkspacesDashboard extends Component {
       onWorkspaceClick,
       workspaces,
     } = this.props;
+
     const { intl } = this.context;
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -138,13 +152,21 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-              <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+              <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
+              <div>
+                <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
+                <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                <ActivateTrialButton
+                  className={classes.upgradeCTA}
+                  gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                  short
+                />
+              </div>
             </div>
           )}
 
           <PremiumFeatureContainer
-            condition={workspaceStore.isPremiumFeature}
+            condition={() => workspaceStore.isPremiumUpgradeRequired}
             gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
           >
             {/* ===== Create workspace form ===== */}
@@ -207,3 +229,9 @@ class WorkspacesDashboard extends Component {
 }
 
 export default WorkspacesDashboard;
+
+WorkspacesDashboard.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    ui: PropTypes.instanceOf(UIStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index e44569be9..4a1f80b4e 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -253,11 +253,10 @@ export default class WorkspacesStore extends FeatureStore {
   };
 
   _setIsPremiumFeatureReaction = () => {
-    const { features, user } = this.stores;
-    const { isPremium } = user.data;
+    const { features } = this.stores;
     const { isWorkspaceIncludedInCurrentPlan } = features.features;
     this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
-    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan && !isPremium;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
index 19392585e..e0f1fd89a 100644
--- a/src/helpers/plan-helpers.js
+++ b/src/helpers/plan-helpers.js
@@ -33,3 +33,13 @@ export function i18nPlanName(planId, intl) {
 
   return intl.formatMessage(messages[plan]);
 }
+
+export function getPlan(planId) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return plan;
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index dabe2f11f..367184c01 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2895,6 +2895,63 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Get a Franz Supporter License",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.action",
+        "start": {
+          "column": 10,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.action",
+        "start": {
+          "column": 15,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade account",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.upgrade.actionShort",
+        "start": {
+          "column": 15,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Activate the free Franz Professional trial",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "feature.delayApp.trial.actionShort",
+        "start": {
+          "column": 20,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/components/ui/ActivateTrialButton/index.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Add unlimited services",
         "end": {
           "column": 3,
@@ -3033,13 +3090,13 @@
         "defaultMessage": "!!!Upgrade account",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/components/ui/PremiumFeatureContainer/index.js",
         "id": "premiumFeature.button.upgradeAccount",
         "start": {
           "column": 10,
-          "line": 15
+          "line": 16
         }
       }
     ],
@@ -3720,91 +3777,91 @@
         "defaultMessage": "!!!Franz is better together!",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 21
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 25
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.text",
         "start": {
           "column": 8,
-          "line": 20
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Share as email",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 29
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.email",
         "start": {
           "column": 16,
-          "line": 24
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Share on Facebook",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 33
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.facebook",
         "start": {
           "column": 19,
-          "line": 28
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Share on Twitter",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 37
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.twitter",
         "start": {
           "column": 18,
-          "line": 32
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 41
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.email",
         "start": {
           "column": 18,
-          "line": 36
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 45
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.twitter",
         "start": {
           "column": 20,
-          "line": 40
+          "line": 42
         }
       }
     ],
@@ -3816,39 +3873,39 @@
         "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 22
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.info",
         "start": {
           "column": 15,
-          "line": 18
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.upgrade",
         "start": {
           "column": 14,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.rollout",
         "start": {
           "column": 15,
-          "line": 26
+          "line": 27
         }
       }
     ],
@@ -4127,104 +4184,104 @@
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.headline",
         "start": {
           "column": 12,
-          "line": 17
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!You haven't added any workspaces yet.",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.noWorkspacesAdded",
         "start": {
           "column": 19,
-          "line": 21
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Could not load your workspaces",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 30
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspacesRequestFailed",
         "start": {
           "column": 27,
-          "line": 25
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 32
+          "line": 34
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.tryReloadWorkspaces",
         "start": {
           "column": 23,
-          "line": 29
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Your changes have been saved",
         "end": {
           "column": 3,
-          "line": 36
+          "line": 38
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.updatedInfo",
         "start": {
           "column": 15,
-          "line": 33
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Workspace has been deleted",
         "end": {
           "column": 3,
-          "line": 40
+          "line": 42
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.deletedInfo",
         "start": {
           "column": 15,
-          "line": 37
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 44
+          "line": 46
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 41
+          "line": 43
         }
       },
       {
         "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
         "end": {
           "column": 3,
-          "line": 48
+          "line": 50
         },
         "file": "src/features/workspaces/components/WorkspacesDashboard.js",
         "id": "settings.workspaces.workspaceFeatureHeadline",
         "start": {
           "column": 28,
-          "line": 45
+          "line": 47
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 32e9c743a..f11d5ca91 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -5,8 +5,10 @@
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
   "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.actionShort": "Activate the free Franz Professional trial",
   "feature.delayApp.trial.headline": "Get the free Franz Professional 14 day trial and skip the line",
   "feature.delayApp.upgrade.action": "Get a Franz Supporter License",
+  "feature.delayApp.upgrade.actionShort": "Upgrade account",
   "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
diff --git a/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
new file mode 100644
index 000000000..08c1a9293
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/ActivateTrialButton/index.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.delayApp.upgrade.action",
+    "defaultMessage": "!!!Get a Franz Supporter License",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 13,
+      "column": 10
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 17,
+      "column": 15
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.actionShort",
+    "defaultMessage": "!!!Upgrade account",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 21,
+      "column": 15
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.actionShort",
+    "defaultMessage": "!!!Activate the free Franz Professional trial",
+    "file": "src/components/ui/ActivateTrialButton/index.js",
+    "start": {
+      "line": 25,
+      "column": 20
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
index 320d3ca3e..0cde4cee5 100644
--- a/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
+++ b/src/i18n/messages/src/components/ui/PremiumFeatureContainer/index.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Upgrade account",
     "file": "src/components/ui/PremiumFeatureContainer/index.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 10
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
index 2387112b4..7d26342b7 100644
--- a/src/i18n/messages/src/features/todos/components/TodosWebview.json
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 18,
+      "line": 19,
       "column": 15
     },
     "end": {
-      "line": 21,
+      "line": 22,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Upgrade Account",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 14
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
     "file": "src/features/todos/components/TodosWebview.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 15
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index ef8f1bebc..7eb4fab50 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 17,
+      "line": 19,
       "column": 12
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!You haven't added any workspaces yet.",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 21,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 24,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load your workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 25,
+      "line": 27,
       "column": 27
     },
     "end": {
-      "line": 28,
+      "line": 30,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 29,
+      "line": 31,
       "column": 23
     },
     "end": {
-      "line": 32,
+      "line": 34,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Your changes have been saved",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 33,
+      "line": 35,
       "column": 15
     },
     "end": {
-      "line": 36,
+      "line": 38,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Workspace has been deleted",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 37,
+      "line": 39,
       "column": 15
     },
     "end": {
-      "line": 40,
+      "line": 42,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 41,
+      "line": 43,
       "column": 24
     },
     "end": {
-      "line": 44,
+      "line": 46,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Less is More: Introducing Franz Workspaces",
     "file": "src/features/workspaces/components/WorkspacesDashboard.js",
     "start": {
-      "line": 45,
+      "line": 47,
       "column": 28
     },
     "end": {
-      "line": 48,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index f3dfbdbf0..7ac7d2375 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -10,6 +10,8 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
 import { sleep } from '../helpers/async-helpers';
+import { getPlan } from '../helpers/plan-helpers';
+import { PLANS } from '../config';
 
 const debug = require('debug')('Franz:UserStore');
 
@@ -150,10 +152,30 @@ export default class UserStore extends Store {
     return this.getUserInfoRequest.execute().result || {};
   }
 
+  @computed get team() {
+    return this.data.team || null;
+  }
+
   @computed get isPremium() {
     return !!this.data.isPremium;
   }
 
+  @computed get isPersonal() {
+    if (!this.team.plan) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PERSONAL;
+  }
+
+  @computed get isPro() {
+    if (!this.team.plan && this.isPremium) return true;
+
+    if (!this.team.plan) return false;
+    const plan = getPlan(this.team.plan);
+
+    return plan === PLANS.PRO;
+  }
+
   @computed get legacyServices() {
     return this.getLegacyServicesRequest.execute() || {};
   }