Merge https://github.com/meetfranz/franz into franz-5.4.0-release

author: vantezzen <hello@vantezzen.io> 2019-10-24 15:15:42 +0200
committer: vantezzen <hello@vantezzen.io> 2019-10-24 15:15:42 +0200
commit: 54f8b191a94bd78a85b046bbf21dd2245d3a6f3e (patch)
tree: ada5876f0e8a697ba4693bba07f5e0f31fea1fc9 /src
parent: Update submodules (diff)
parent: bump version to 5.4.0 (diff)
download: ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.gz
ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.zst
ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.zip
65 files changed, 2185 insertions, 165 deletions
diff --git a/src/actions/index.js b/src/actions/index.js
index 336344d76..9d3684edc 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -14,6 +14,8 @@ import requests from './requests';
 import announcements from '../features/announcements/actions';
 import workspaces from '../features/workspaces/actions';
 import todos from '../features/todos/actions';
+import planSelection from '../features/planSelection/actions';
+import trialStatusBar from '../features/trialStatusBar/actions';
 const actions = Object.assign({}, {
  service,
@@ -33,4 +35,6 @@ export default Object.assign(
  { announcements },
  { workspaces },
  { todos },
+  { planSelection },
+  { trialStatusBar },
 );
diff --git a/src/actions/payment.js b/src/actions/payment.js
index 2aaefc025..f61faf197 100644
--- a/src/actions/payment.js
+++ b/src/actions/payment.js
@@ -4,5 +4,9 @@ export default {
  createHostedPage: {
    planId: PropTypes.string.isRequired,
  },
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func,
+  },
  createDashboardUrl: {},
 };
diff --git a/src/actions/user.js b/src/actions/user.js
index 5d7d9a899..7061a367a 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -11,8 +11,10 @@ export default {
    lastname: PropTypes.string.isRequired,
    email: PropTypes.string.isRequired,
    password: PropTypes.string.isRequired,
-    accountType: PropTypes.string.isRequired,
+    accountType: PropTypes.string,
    company: PropTypes.string,
+    plan: PropTypes.string,
+    currency: PropTypes.string,
  },
  retrievePassword: {
    email: PropTypes.string.isRequired,
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index 02f6b389d..a5d636b4e 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -87,7 +87,7 @@ export default class ServerApi {
    }
    const trial = await request.json();
-    debug('ServerApi::signup resolves', trial);
+    debug('ServerApi::activateTrial resolves', trial);
    return true;
  }
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index aadb18d91..593cb9c4b 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -13,12 +13,20 @@ import { FeatureList } from '../ui/FeatureList';
 const messages = defineMessages({
  headline: {
-    id: 'pricing.trial.headline',
+    id: 'pricing.trial.headline.pro',
-    defaultMessage: '!!!Franz Professional',
+    defaultMessage: '!!!Hi {name}, welcome to Franz',
  },
-  personalOffer: {
+  specialTreat: {
-    id: 'pricing.trial.subheadline',
+    id: 'pricing.trial.intro.specialTreat',
-    defaultMessage: '!!!Your personal welcome offer:',
+    defaultMessage: '!!!We have a special treat for you.',
+  },
+  tryPro: {
+    id: 'pricing.trial.intro.tryPro',
+    defaultMessage: '!!!Enjoy the full Franz Professional experience completely free for 14 days.',
+  },
+  happyMessaging: {
+    id: 'pricing.trial.intro.happyMessaging',
+    defaultMessage: '!!!Happy messaging,',
  },
  noStringsAttachedHeadline: {
    id: 'pricing.trial.terms.headline',
@@ -32,13 +40,21 @@ const messages = defineMessages({
    id: 'pricing.trial.terms.automaticTrialEnd',
    defaultMessage: '!!!Your free trial ends automatically after 14 days',
  },
+  trialWorth: {
+    id: 'pricing.trial.terms.trialWorth',
+    defaultMessage: '!!!Free trial (normally {currency}{price} per month)',
+  },
  activationError: {
    id: 'pricing.trial.error',
    defaultMessage: '!!!Sorry, we could not activate your trial!',
  },
  ctaAccept: {
    id: 'pricing.trial.cta.accept',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    defaultMessage: '!!!Start my 14-day Franz Professional Trial ',
+  },
+  ctaStart: {
+    id: 'pricing.trial.cta.start',
+    defaultMessage: '!!!Start using Franz',
  },
  ctaSkip: {
    id: 'pricing.trial.cta.skip',
@@ -58,6 +74,7 @@ const styles = theme => ({
  welcomeOffer: {
    textAlign: 'center',
    fontWeight: 'bold',
+    marginBottom: '6 !important',
  },
  keyTerms: {
    textAlign: 'center',
@@ -93,6 +110,34 @@ const styles = theme => ({
    margin: [20, 0, 0],
    color: theme.styleTypes.danger.accent,
  },
+  priceContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    margin: [10, 0, 15],
+  },
+  price: {
+    '& sup': {
+      verticalAlign: 14,
+      fontSize: 20,
+    },
+  },
+  figure: {
+    fontSize: 40,
+  },
+  regularPrice: {
+    position: 'relative',
+    '&:before': {
+      content: '" "',
+      position: 'absolute',
+      width: '130%',
+      height: 1,
+      top: 14,
+      left: -12,
+      borderBottom: [3, 'solid', 'red'],
+      transform: 'rotateZ(-20deg)',
+    },
+  },
 });
 export default @injectSheet(styles) @observer class Signup extends Component {
@@ -101,7 +146,11 @@ export default @injectSheet(styles) @observer class Signup extends Component {
    isLoadingRequiredData: PropTypes.bool.isRequired,
    isActivatingTrial: PropTypes.bool.isRequired,
    trialActivationError: PropTypes.bool.isRequired,
+    canSkipTrial: PropTypes.bool.isRequired,
    classes: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    name: PropTypes.string.isRequired,
  };
  static contextTypes = {
@@ -114,10 +163,16 @@ export default @injectSheet(styles) @observer class Signup extends Component {
      isLoadingRequiredData,
      isActivatingTrial,
      trialActivationError,
+      canSkipTrial,
      classes,
+      currency,
+      price,
+      name,
    } = this.props;
    const { intl } = this.context;
+    const [intPart, fractionPart] = (price).toString().split('.');
    return (
      <div className={classnames('auth__scroll-container', classes.container)}>
        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
@@ -129,30 +184,51 @@ export default @injectSheet(styles) @observer class Signup extends Component {
                alt=""
              />
            )}
-            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
+            <h1>{intl.formatMessage(messages.headline, { name })}</h1>
-            <h1>{intl.formatMessage(messages.headline)}</h1>
            <div className="auth__letter">
              <p>
-                We built Franz with a lot of effort, manpower and love,
+                {intl.formatMessage(messages.specialTreat)}
-                to boost up your messaging experience.
                <br />
              </p>
              <p>
-                Get the free 14 day Franz Professional trial and see your communication evolving.
+                {intl.formatMessage(messages.tryPro)}
                <br />
              </p>
              <p>
-                Thanks for being a hero.
+                {intl.formatMessage(messages.happyMessaging)}
              </p>
              <p>
                <strong>Stefan Malzner</strong>
              </p>
            </div>
+            <div className={classes.priceContainer}>
+              <p className={classnames(classes.price, classes.regularPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  {intPart}
+                </span>
+                <sup>{fractionPart}</sup>
+              </p>
+              <p className={classnames(classes.price, classes.trialPrice)}>
+                <span className={classes.figure}>
+                  {currency}
+                  0
+                </span>
+                <sup>00</sup>
+              </p>
+            </div>
            <div className={classes.keyTerms}>
              <H2>
                {intl.formatMessage(messages.noStringsAttachedHeadline)}
              </H2>
              <ul className={classes.keyTermsList}>
+                <FeatureItem
+                  icon="👉"
+                  name={intl.formatMessage(messages.trialWorth, {
+                    currency,
+                    price,
+                  })}
+                />
                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
              </ul>
@@ -161,33 +237,23 @@ export default @injectSheet(styles) @observer class Signup extends Component {
              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
            )}
            <Button
-              label={intl.formatMessage(messages.ctaAccept)}
+              label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
              className={classes.cta}
              onClick={onSubmit}
              busy={isActivatingTrial}
              disabled={isLoadingRequiredData || isActivatingTrial}
            />
-            <p className={classes.skipLink}>
+            {canSkipTrial && (
-              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+              <p className={classes.skipLink}>
-            </p>
+                <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+              </p>
+            )}
          </form>
        </div>
        <div className={classes.featureContainer}>
          <H2>
            {intl.formatMessage(messages.featuresHeadline)}
          </H2>
-          {/* <ul className={classes.features}>
-            <FeatureItem name="Add unlimited services" className={classes.featureItem} />
-            <FeatureItem name="Spellchecker support" className={classes.featureItem} />
-            <FeatureItem name="Workspaces" className={classes.featureItem} />
-            <FeatureItem name="Add Custom Websites" className={classes.featureItem} />
-            <FeatureItem name="On-premise & other Hosted Services" className={classes.featureItem} />
-            <FeatureItem name="Install 3rd party services" className={classes.featureItem} />
-            <FeatureItem name="Service Proxies" className={classes.featureItem} />
-            <FeatureItem name="Team Management" className={classes.featureItem} />
-            <FeatureItem name="No Waiting Screens" className={classes.featureItem} />
-            <FeatureItem name="Forever ad-free" className={classes.featureItem} />
-          </ul> */}
          <FeatureList />
        </div>
      </div>
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 2b0719f92..80e6daf19 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -19,6 +19,8 @@ import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
 import TrialActivationInfoBar from '../TrialActivationInfoBar';
 import Todos from '../../features/todos/containers/TodosScreen';
+import PlanSelection from '../../features/planSelection/containers/PlanSelectionScreen';
+import TrialStatusBar from '../../features/trialStatusBar/containers/TrialStatusBarScreen';
 function createMarkup(HTMLString) {
  return { __html: HTMLString };
@@ -189,9 +191,11 @@ class AppLayout extends Component {
              <QuickSwitch />
              {services}
              {children}
+              <TrialStatusBar />
            </div>
            <Todos />
          </div>
+          <PlanSelection />
        </div>
      </ErrorBoundary>
    );
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index f588449f4..83dc34a52 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -109,6 +109,7 @@ class AccountDashboard extends Component {
    openBilling: PropTypes.func.isRequired,
    upgradeToPro: PropTypes.func.isRequired,
    openInvoices: PropTypes.func.isRequired,
+    onCloseSubscriptionWindow: PropTypes.func.isRequired,
  };
  static contextTypes = {
@@ -130,6 +131,7 @@ class AccountDashboard extends Component {
      openBilling,
      upgradeToPro,
      openInvoices,
+      onCloseSubscriptionWindow,
    } = this.props;
    const { intl } = this.context;
@@ -215,7 +217,9 @@ class AccountDashboard extends Component {
                          {intl.formatMessage(messages.yourLicense)}
                        </H2>
                        <p>
-                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
+                          Franz
+                          {' '}
+                          {isPremiumOverrideUser ? 'Premium' : planName}
                          {user.team.isTrial && (
                            <>
                              {' – '}
@@ -238,14 +242,16 @@ class AccountDashboard extends Component {
                            </p>
                          </>
                        )}
-                        <div className="manage-user-links">
+                        {!isProUser && (
-                          {!isProUser && (
+                          <div className="manage-user-links">
                            <Button
                              label={intl.formatMessage(messages.upgradeAccountToPro)}
                              className="franz-form__button--primary"
                              onClick={upgradeToPro}
                            />
-                          )}
+                          </div>
+                        )}
+                        <div className="manage-user-links">
                          <Button
                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                            className="franz-form__button--inverted"
@@ -263,7 +269,9 @@ class AccountDashboard extends Component {
                  {!user.isPremium && (
                    <div className="account franz-form">
                      <div className="account__box">
-                        <SubscriptionForm />
+                        <SubscriptionForm
+                          onCloseWindow={onCloseSubscriptionWindow}
+                        />
                      </div>
                    </div>
                  )}
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index effd04f7a..ec486e5d0 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -30,7 +30,8 @@ const messages = defineMessages({
 const styles = () => ({
  activateTrialButton: {
-    margin: [40, 0, 50],
+    margin: [40, 'auto', 50],
+    display: 'flex',
  },
 });
@@ -62,7 +63,6 @@ export default @injectSheet(styles) @observer class SubscriptionForm extends Com
          className={classes.activateTrialButton}
          busy={isActivatingTrial}
          onClick={selectPlan}
-          stretch
        />
        <div className="subscription__premium-info">
          <H3>
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 12ef8a6e9..12a51ad7b 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -59,8 +59,10 @@ export default @observer class SubscriptionPopup extends Component {
            className="subscription-popup__webview"
            autosize
+            allowpopups
            src={encodeURI(url)}
            onDidNavigate={completeCheck}
+            onDidNavigateInPage={completeCheck}
          />
        </div>
        <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 6ccdf20ae..d61b779ed 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -43,7 +43,8 @@ const messages = defineMessages({
 const styles = theme => ({
  activateTrialButton: {
-    margin: [40, 0, 10],
+    margin: [40, 'auto', 10],
+    display: 'flex',
  },
  allOptionsButton: {
    margin: [0, 0, 40],
@@ -93,7 +94,6 @@ export default @injectSheet(styles) @observer class TrialForm extends Component
          className={classes.activateTrialButton}
          busy={isActivatingTrial}
          onClick={activateTrial}
-          stretch
        />
        <Button
          label={intl.formatMessage(messages.allOptionsButton)}
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
index 7c482c4d4..4926df470 100644
--- a/src/components/ui/FeatureItem.js
+++ b/src/components/ui/FeatureItem.js
@@ -10,6 +10,7 @@ const styles = theme => ({
    padding: [8, 0],
    display: 'flex',
    alignItems: 'center',
+    textAlign: 'left',
  },
  featureIcon: {
    fill: theme.brandSuccess,
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index 62944ad75..7ba8b54d7 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -3,12 +3,33 @@ import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { FeatureItem } from './FeatureItem';
+import { PLANS } from '../../config';
 const messages = defineMessages({
+  availableRecipes: {
+    id: 'pricing.features.recipes',
+    defaultMessage: '!!!Choose from more than 70 Services',
+  },
+  accountSync: {
+    id: 'pricing.features.accountSync',
+    defaultMessage: '!!!Account Synchronisation',
+  },
+  desktopNotifications: {
+    id: 'pricing.features.desktopNotifications',
+    defaultMessage: '!!!Desktop Notifications',
+  },
  unlimitedServices: {
    id: 'pricing.features.unlimitedServices',
    defaultMessage: '!!!Add unlimited services',
  },
+  upToThreeServices: {
+    id: 'pricing.features.upToThreeServices',
+    defaultMessage: '!!!Add up to 3 services',
+  },
+  upToSixServices: {
+    id: 'pricing.features.upToSixServices',
+    defaultMessage: '!!!Add up to 6 services',
+  },
  spellchecker: {
    id: 'pricing.features.spellchecker',
    defaultMessage: '!!!Spellchecker support',
@@ -51,11 +72,13 @@ export class FeatureList extends Component {
  static propTypes = {
    className: PropTypes.string,
    featureClassName: PropTypes.string,
+    plan: PropTypes.oneOf(PLANS),
  };
  static defaultProps = {
    className: '',
    featureClassName: '',
+    plan: false,
  }
  static contextTypes = {
@@ -66,21 +89,52 @@ export class FeatureList extends Component {
    const {
      className,
      featureClassName,
+      plan,
    } = this.props;
    const { intl } = this.context;
+    const features = [];
+    if (plan === PLANS.FREE) {
+      features.push(
+        messages.upToThreeServices,
+        messages.availableRecipes,
+        messages.accountSync,
+        messages.desktopNotifications,
+      );
+    } else if (plan === PLANS.PERSONAL) {
+      features.push(
+        messages.upToSixServices,
+        messages.spellchecker,
+        messages.appDelays,
+        messages.adFree,
+      );
+    } else if (plan === PLANS.PRO) {
+      features.push(
+        messages.unlimitedServices,
+        messages.workspaces,
+        messages.customWebsites,
+        // messages.onPremise,
+        messages.thirdPartyServices,
+        // messages.serviceProxies,
+      );
+    } else {
+      features.push(
+        messages.unlimitedServices,
+        messages.spellchecker,
+        messages.workspaces,
+        messages.customWebsites,
+        messages.onPremise,
+        messages.thirdPartyServices,
+        messages.serviceProxies,
+        messages.teamManagement,
+        messages.appDelays,
+        messages.adFree,
+      );
+    }
    return (
      <ul className={className}>
-        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} className={featureClassName} />
+        {features.map(feature => <FeatureItem name={intl.formatMessage(feature)} className={featureClassName} />)}
-        <FeatureItem name={intl.formatMessage(messages.spellchecker)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.workspaces)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.customWebsites)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.onPremise)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.thirdPartyServices)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.serviceProxies)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.teamManagement)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.appDelays)} className={featureClassName} />
-        <FeatureItem name={intl.formatMessage(messages.adFree)} className={featureClassName} />
      </ul>
    );
  }
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 7ba353be3..611c50468 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -90,7 +90,7 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
  children: oneOrManyChildElements.isRequired,
  stores: PropTypes.shape({
    user: PropTypes.instanceOf(UserStore).isRequired,
-    features: PropTypes.instanceOf(FeatureStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
  }).isRequired,
  actions: PropTypes.shape({
    ui: PropTypes.shape({
diff --git a/src/config.js b/src/config.js
index e762f879f..761d26eea 100644
--- a/src/config.js
+++ b/src/config.js
@@ -125,10 +125,10 @@ export const ALLOWED_PROTOCOLS = [
 ];
 export const PLANS = {
-  PERSONAL: 'PERSONAL',
+  PERSONAL: 'personal',
-  PRO: 'PRO',
+  PRO: 'pro',
-  LEGACY: 'LEGACY',
+  LEGACY: 'legacy',
-  FREE: 'FREE',
+  FREE: 'free',
 };
 export const PLANS_MAPPING = {
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index af1651931..21c859c12 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -20,14 +20,19 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
    } = this.props;
    const { activateTrialRequest } = stores.user;
-    const { defaultTrialPlan } = stores.features.features;
+    const { defaultTrialPlan, canSkipTrial } = stores.features.anonymousFeatures;
-    actions.user.activateTrial({ planId: defaultTrialPlan });
+    if (!canSkipTrial) {
-    await activateTrialRequest._promise;
-    if (!activateTrialRequest.isError) {
      stores.router.push('/');
      stores.user.hasCompletedSignup = true;
+    } else {
+      actions.user.activateTrial({ planId: defaultTrialPlan });
+      await activateTrialRequest._promise;
+      if (!activateTrialRequest.isError) {
+        stores.router.push('/');
+        stores.user.hasCompletedSignup = true;
+      }
    }
  }
@@ -37,8 +42,17 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
      stores,
    } = this.props;
-    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { getUserInfoRequest, activateTrialRequest, data } = stores.user;
-    const { featuresRequest } = stores.features;
+    const { featuresRequest, features } = stores.features;
+    const { pricingConfig } = features;
+    let currency = '$';
+    let price = 5.99;
+    if (pricingConfig) {
+      ({ currency } = pricingConfig);
+      ({ price } = pricingConfig.plans.pro.yearly);
+    }
    return (
      <Pricing
@@ -46,7 +60,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
        isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
        isActivatingTrial={activateTrialRequest.isExecuting}
        trialActivationError={activateTrialRequest.isError}
+        canSkipTrial={features.canSkipTrial}
        error={error}
+        currency={currency}
+        price={price}
+        name={data.firstname}
      />
    );
  }
diff --git a/src/containers/auth/SignupScreen.js b/src/containers/auth/SignupScreen.js
index efc7ea4c1..f93498be2 100644
--- a/src/containers/auth/SignupScreen.js
+++ b/src/containers/auth/SignupScreen.js
@@ -4,6 +4,7 @@ import { inject, observer } from 'mobx-react';
 import Signup from '../../components/auth/Signup';
 import UserStore from '../../stores/UserStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 import { globalError as globalErrorPropType } from '../../prop-types';
@@ -12,11 +13,27 @@ export default @inject('stores', 'actions') @observer class SignupScreen extends
    error: globalErrorPropType.isRequired,
  };
+  onSignup(values) {
+    const { actions, stores } = this.props;
+    const { canSkipTrial, defaultTrialPlan, pricingConfig } = stores.features.anonymousFeatures;
+    if (!canSkipTrial) {
+      Object.assign(values, {
+        plan: defaultTrialPlan,
+        currency: pricingConfig.currencyID,
+      });
+    }
+    actions.user.signup(values);
+  }
  render() {
-    const { actions, stores, error } = this.props;
+    const { stores, error } = this.props;
    return (
      <Signup
-        onSubmit={actions.user.signup}
+        onSubmit={values => this.onSignup(values)}
        isSubmitting={stores.user.signupRequest.isExecuting}
        loginRoute={stores.user.loginRoute}
        error={error}
@@ -33,5 +50,6 @@ SignupScreen.wrappedComponent.propTypes = {
  }).isRequired,
  stores: PropTypes.shape({
    user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
  }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 95fbd109f..a4312d9de 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -24,6 +24,7 @@ import { state as delayAppState } from '../../features/delayApp';
 import { workspaceActions } from '../../features/workspaces/actions';
 import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 import { workspaceStore } from '../../features/workspaces';
+import WorkspacesStore from '../../features/workspaces/store';
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
  static defaultProps = {
@@ -41,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
      globalError,
      requests,
      user,
+      workspaces,
    } = this.props.stores;
    const {
@@ -79,7 +81,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
    const isLoadingServices = services.allServicesRequest.isExecuting
      && services.allServicesRequest.isExecutingFirstTime;
-    if (isLoadingFeatures || isLoadingServices) {
+    if (isLoadingFeatures || isLoadingServices || workspaces.isLoadingWorkspaces) {
      return (
        <ThemeProvider theme={ui.theme}>
          <AppLoader />
@@ -175,6 +177,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
    user: PropTypes.instanceOf(UserStore).isRequired,
    requests: PropTypes.instanceOf(RequestStore).isRequired,
    globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+    workspaces: PropTypes.instanceOf(WorkspacesStore).isRequired,
  }).isRequired,
  actions: PropTypes.shape({
    service: PropTypes.shape({
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 41cdeb79a..93ab44690 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -5,6 +5,7 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 import UserStore from '../../stores/UserStore';
 import AppStore from '../../stores/AppStore';
+import FeaturesStore from '../../stores/FeaturesStore';
 import AccountDashboard from '../../components/settings/account/AccountDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
@@ -12,8 +13,9 @@ import { WEBSITE } from '../../environment';
 export default @inject('stores', 'actions') @observer class AccountScreen extends Component {
  onCloseWindow() {
-    const { user } = this.props.stores;
+    const { user, features } = this.props.stores;
    user.getUserInfoRequest.invalidate({ immediately: true });
+    features.featuresRequest.invalidate({ immediately: true });
  }
  reloadData() {
@@ -39,12 +41,17 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
  }
  render() {
-    const { user, payment } = this.props.stores;
+    const { user, payment, features } = this.props.stores;
-    const { user: userActions } = this.props.actions;
+    const {
+      user: userActions,
+      payment: paymentActions,
+    } = this.props.actions;
    const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
    const isLoadingPlans = payment.plansRequest.isExecuting;
+    const { upgradeAccount } = paymentActions;
    return (
      <ErrorBoundary>
        <AccountDashboard
@@ -60,7 +67,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
          isLoadingDeleteAccount={user.deleteAccountRequest.isExecuting}
          isDeleteAccountSuccessful={user.deleteAccountRequest.wasExecuted && !user.deleteAccountRequest.isError}
          openEditAccount={() => this.handleWebsiteLink('/user/profile')}
-          upgradeToPro={() => this.handleWebsiteLink('/inapp/user/licenses')}
+          upgradeToPro={() => upgradeAccount({ planId: features.features.pricingConfig.plans.pro.yearly.id })}
          openBilling={() => this.handleWebsiteLink('/user/billing')}
          openInvoices={() => this.handleWebsiteLink('/user/invoices')}
        />
@@ -72,12 +79,14 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
 AccountScreen.wrappedComponent.propTypes = {
  stores: PropTypes.shape({
    user: PropTypes.instanceOf(UserStore).isRequired,
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
    payment: PropTypes.instanceOf(PaymentStore).isRequired,
    app: PropTypes.instanceOf(AppStore).isRequired,
  }).isRequired,
  actions: PropTypes.shape({
    payment: PropTypes.shape({
      createDashboardUrl: PropTypes.func.isRequired,
+      upgradeAccount: PropTypes.func.isRequired,
    }).isRequired,
    app: PropTypes.shape({
      openExternalUrl: PropTypes.func.isRequired,
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 726b10628..38e46a7ba 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { remote } from 'electron';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
@@ -7,11 +8,21 @@ import PaymentStore from '../../stores/PaymentStore';
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
 import TrialForm from '../../components/subscription/TrialForm';
+const { BrowserWindow } = remote;
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
+  static propTypes = {
+    onCloseWindow: PropTypes.func,
+  }
+  static defaultProps = {
+    onCloseWindow: () => null,
+  }
  async openBrowser() {
    const {
-      actions,
      stores,
+      onCloseWindow,
    } = this.props;
    const {
@@ -22,7 +33,24 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
    let hostedPageURL = features.features.planSelectionURL;
    hostedPageURL = user.getAuthURL(hostedPageURL);
-    actions.app.openExternalUrl({ url: hostedPageURL });
+    const paymentWindow = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Franz Supporter License',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+    paymentWindow.on('closed', () => {
+      onCloseWindow();
+    });
  }
  render() {
diff --git a/src/electron/Settings.js b/src/electron/Settings.js
index 95e3dcfa4..d4f0d25bf 100644
--- a/src/electron/Settings.js
+++ b/src/electron/Settings.js
@@ -47,7 +47,9 @@ export default class Settings {
  }
  _writeFile() {
-    outputJsonSync(this.settingsFile, this.store);
+    outputJsonSync(this.settingsFile, this.store, {
+      spaces: 2,
+    });
    debug('Write settings file', this.type, toJS(this.store));
  }
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index c61cb06c9..81f89bc52 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -21,7 +21,7 @@ const messages = defineMessages({
  },
  action: {
    id: 'feature.delayApp.upgrade.action',
-    defaultMessage: '!!!Get a Franz Supporter License',
+    defaultMessage: '!!!Upgrade Franz',
  },
  actionTrial: {
    id: 'feature.delayApp.trial.action',
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 5cc6c9506..51bd887a2 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import DelayAppComponent from './Component';
 import { DEFAULT_FEATURES_CONFIG } from '../../config';
+import { getUserWorkspacesRequest } from '../workspaces/api';
 const debug = require('debug')('Ferdi:feature:delayApp');
@@ -32,7 +33,13 @@ export default function init(stores) {
  };
  reaction(
-    () => stores.user.isLoggedIn && stores.services.allServicesRequest.wasExecuted && stores.features.features.needToWaitToProceed && !stores.user.data.isPremium,
+    () => (
+      stores.user.isLoggedIn
+      && stores.services.allServicesRequest.wasExecuted
+      && getUserWorkspacesRequest.wasExecuted
+      && stores.features.features.needToWaitToProceed
+      && !stores.user.data.isPremium
+    ),
    (isEnabled) => {
      if (isEnabled) {
        debug('Enabling `delayApp` feature');
diff --git a/src/features/planSelection/actions.js b/src/features/planSelection/actions.js
new file mode 100644
index 000000000..83f58bfd7
--- /dev/null
+++ b/src/features/planSelection/actions.js
@@ -0,0 +1,9 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+export const planSelectionActions = createActionsFromDefinitions({
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+export default planSelectionActions;
diff --git a/src/features/planSelection/api.js b/src/features/planSelection/api.js
new file mode 100644
index 000000000..734643f10
--- /dev/null
+++ b/src/features/planSelection/api.js
@@ -0,0 +1,26 @@
+import { sendAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
+import Request from '../../stores/lib/Request';
+const debug = require('debug')('Franz:feature:planSelection:api');
+export const planSelectionApi = {
+  downgrade: async () => {
+    const url = `${API}/${API_VERSION}/payment/downgrade`;
+    const options = {
+      method: 'PUT',
+    };
+    debug('downgrade UPDATE', url, options);
+    const result = await sendAuthRequest(url, options);
+    debug('downgrade RESULT', result);
+    if (!result.ok) throw result;
+    return result.ok;
+  },
+};
+export const downgradeUserRequest = new Request(planSelectionApi, 'downgrade');
+export const resetApiRequests = () => {
+  downgradeUserRequest.reset();
+};
diff --git a/src/features/planSelection/components/PlanItem.js b/src/features/planSelection/components/PlanItem.js
new file mode 100644
index 000000000..ec061377b
--- /dev/null
+++ b/src/features/planSelection/components/PlanItem.js
@@ -0,0 +1,207 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+import color from 'color';
+import { H2 } from '@meetfranz/ui';
+import { Button } from '@meetfranz/forms';
+import { mdiArrowRight } from '@mdi/js';
+const messages = defineMessages({
+  perMonth: {
+    id: 'subscription.interval.perMonth',
+    defaultMessage: '!!!per month',
+  },
+  perMonthPerUser: {
+    id: 'subscription.interval.perMonthPerUser',
+    defaultMessage: '!!!per month & user',
+  },
+  bestValue: {
+    id: 'subscription.bestValue',
+    defaultMessage: '!!!Best value',
+  },
+});
+const styles = theme => ({
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    borderRadius: theme.borderRadius,
+    flex: 1,
+    color: theme.styleTypes.primary.accent,
+    overflow: 'hidden',
+    textAlign: 'center',
+    '& h2': {
+      textAlign: 'center',
+      marginBottom: 10,
+      fontSize: 30,
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  currency: {
+    fontSize: 35,
+  },
+  priceWrapper: {
+    height: 50,
+    marginBottom: 0,
+  },
+  price: {
+    fontSize: 50,
+    '& sup': {
+      fontSize: 20,
+      verticalAlign: 20,
+    },
+  },
+  text: {
+    marginBottom: 'auto',
+  },
+  cta: {
+    background: theme.styleTypes.primary.accent,
+    color: theme.styleTypes.primary.contrast,
+    margin: [40, 'auto', 0, 'auto'],
+  },
+  divider: {
+    width: 40,
+    border: 0,
+    borderTop: [1, 'solid', theme.styleTypes.primary.contrast],
+    margin: [15, 'auto', 20],
+  },
+  header: {
+    padding: 20,
+    background: color(theme.styleTypes.primary.accent).darken(0.25).hex(),
+    color: theme.styleTypes.primary.contrast,
+    position: 'relative',
+  },
+  content: {
+    padding: [10, 20, 20],
+    background: '#EFEFEF',
+  },
+  simpleCTA: {
+    background: 'none',
+    color: theme.styleTypes.primary.accent,
+    '& svg': {
+      fill: theme.styleTypes.primary.accent,
+    },
+  },
+  bestValue: {
+    background: theme.styleTypes.success.accent,
+    color: theme.styleTypes.success.contrast,
+    right: -66,
+    top: -40,
+    height: 'auto',
+    position: 'absolute',
+    transform: 'rotateZ(45deg)',
+    textAlign: 'center',
+    padding: [5, 50],
+    transformOrigin: 'left bottom',
+    fontSize: 12,
+    boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
+  },
+});
+export default @observer @injectSheet(styles) class PlanItem extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    currency: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+    ctaLabel: PropTypes.string.isRequired,
+    simpleCTA: PropTypes.bool,
+    perUser: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
+    bestValue: PropTypes.bool,
+    className: PropTypes.string,
+    children: PropTypes.element,
+  };
+  static defaultProps = {
+    simpleCTA: false,
+    perUser: false,
+    children: null,
+    bestValue: false,
+    className: '',
+  }
+  static contextTypes = {
+    intl: intlShape,
+  };
+  render() {
+    const {
+      name,
+      text,
+      price,
+      currency,
+      classes,
+      upgrade,
+      ctaLabel,
+      simpleCTA,
+      perUser,
+      bestValue,
+      className,
+      children,
+    } = this.props;
+    const { intl } = this.context;
+    const priceParts = `${price}`.split('.');
+    return (
+      <div className={classnames({
+        [classes.root]: true,
+        [className]: className,
+      })}
+      >
+        <div className={classes.header}>
+          {bestValue && (
+            <div className={classes.bestValue}>
+              {intl.formatMessage(messages.bestValue)}
+            </div>
+          )}
+          <H2 className={classes.planName}>{name}</H2>
+          <p className={classes.text}>
+            {text}
+          </p>
+          <hr className={classes.divider} />
+          <p className={classes.priceWrapper}>
+            <span className={classes.currency}>{currency}</span>
+            <span className={classes.price}>
+              {priceParts[0]}
+              <sup>{priceParts[1]}</sup>
+            </span>
+          </p>
+          <p className={classes.interval}>
+            {intl.formatMessage(perUser ? messages.perMonthPerUser : messages.perMonth)}
+          </p>
+        </div>
+        <div className={classes.content}>
+          {children}
+          <Button
+            className={classnames({
+              [classes.cta]: true,
+              [classes.simpleCTA]: simpleCTA,
+            })}
+            icon={simpleCTA ? mdiArrowRight : null}
+            label={(
+              <>
+                {ctaLabel}
+              </>
+            )}
+            onClick={upgrade}
+          />
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/src/features/planSelection/components/PlanSelection.js b/src/features/planSelection/components/PlanSelection.js
new file mode 100644
index 000000000..b6bb9d32d
--- /dev/null
+++ b/src/features/planSelection/components/PlanSelection.js
@@ -0,0 +1,281 @@
+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 { H1, H2, Icon } from '@meetfranz/ui';
+import color from 'color';
+import { mdiRocket, mdiArrowRight } from '@mdi/js';
+import PlanItem from './PlanItem';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
+import { PLANS } from '../../../config';
+import { FeatureList } from '../../../components/ui/FeatureList';
+import Appear from '../../../components/ui/effects/Appear';
+import { gaPage } from '../../../lib/analytics';
+const messages = defineMessages({
+  welcome: {
+    id: 'feature.planSelection.fullscreen.welcome',
+    defaultMessage: '!!!Are you ready to choose, {name}',
+  },
+  subheadline: {
+    id: 'feature.planSelection.fullscreen.subheadline',
+    defaultMessage: '!!!It\'s time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.',
+  },
+  textFree: {
+    id: 'feature.planSelection.free.text',
+    defaultMessage: '!!!Basic functionality',
+  },
+  textPersonal: {
+    id: 'feature.planSelection.personal.text',
+    defaultMessage: '!!!More services, no waiting - ideal for personal use.',
+  },
+  textProfessional: {
+    id: 'feature.planSelection.pro.text',
+    defaultMessage: '!!!Unlimited services and professional features for you - and your team.',
+  },
+  ctaStayOnFree: {
+    id: 'feature.planSelection.cta.stayOnFree',
+    defaultMessage: '!!!Stay on Free',
+  },
+  ctaDowngradeFree: {
+    id: 'feature.planSelection.cta.ctaDowngradeFree',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  actionTrial: {
+    id: 'feature.planSelection.cta.trial',
+    defaultMessage: '!!!Start my free 14-days Trial',
+  },
+  shortActionPersonal: {
+    id: 'feature.planSelection.cta.upgradePersonal',
+    defaultMessage: '!!!Choose Personal',
+  },
+  shortActionPro: {
+    id: 'feature.planSelection.cta.upgradePro',
+    defaultMessage: '!!!Choose Professional',
+  },
+  fullFeatureList: {
+    id: 'feature.planSelection.fullFeatureList',
+    defaultMessage: '!!!Complete comparison of all plans',
+  },
+  pricesBasedOnAnnualPayment: {
+    id: 'feature.planSelection.pricesBasedOnAnnualPayment',
+    defaultMessage: '!!!All prices based on yearly payment',
+  },
+});
+const styles = theme => ({
+  root: {
+    background: theme.colorModalOverlayBackground,
+    width: '100%',
+    height: '100%',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999999,
+    overflowY: 'scroll',
+  },
+  container: {
+    width: '80%',
+    height: 'auto',
+    background: theme.styleTypes.primary.accent,
+    padding: 40,
+    borderRadius: theme.borderRadius,
+    maxWidth: 1000,
+    '& h1, & h2': {
+      textAlign: 'center',
+      color: theme.styleTypes.primary.contrast,
+    },
+  },
+  plans: {
+    display: 'flex',
+    margin: [40, 0, 0],
+    height: 'auto',
+    '& > div': {
+      margin: [0, 15],
+      flex: 1,
+      height: 'auto',
+      background: theme.styleTypes.primary.contrast,
+      boxShadow: [0, 2, 30, color('#000').alpha(0.1).rgb().string()],
+    },
+  },
+  bigIcon: {
+    background: theme.styleTypes.danger.accent,
+    width: 120,
+    height: 120,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: '100%',
+    justifyContent: 'center',
+    margin: [-100, 'auto', 20],
+    '& svg': {
+      width: '80px !important',
+      height: '80px !important',
+      filter: 'drop-shadow( 0px 2px 3px rgba(0, 0, 0, 0.3))',
+      fill: theme.styleTypes.danger.contrast,
+    },
+  },
+  headline: {
+    fontSize: 40,
+  },
+  subheadline: {
+    maxWidth: 660,
+    fontSize: 22,
+    lineHeight: 1.1,
+    margin: [0, 'auto'],
+  },
+  featureList: {
+    '& li': {
+      borderBottom: [1, 'solid', '#CECECE'],
+    },
+  },
+  footer: {
+    display: 'flex',
+    color: theme.styleTypes.primary.contrast,
+    marginTop: 20,
+    padding: [0, 15],
+  },
+  fullFeatureList: {
+    marginRight: 'auto',
+    textAlign: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: `${theme.styleTypes.primary.contrast} !important`,
+    '& svg': {
+      marginRight: 5,
+    },
+  },
+  scrollContainer: {
+    border: '1px solid red',
+    overflow: 'scroll-x',
+  },
+  featuredPlan: {
+    transform: 'scale(1.05)',
+  },
+  disclaimer: {
+    textAlign: 'right',
+    margin: [10, 15, 0, 0],
+  },
+});
+@injectSheet(styles) @observer
+class PlanSelection extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    firstname: PropTypes.string.isRequired,
+    plans: PropTypes.object.isRequired,
+    currency: PropTypes.string.isRequired,
+    subscriptionExpired: PropTypes.bool.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    stayOnFree: PropTypes.func.isRequired,
+    hadSubscription: PropTypes.bool.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+  componentDidMount() {
+    gaPage('/select-plan');
+  }
+  render() {
+    const {
+      classes,
+      firstname,
+      plans,
+      currency,
+      subscriptionExpired,
+      upgradeAccount,
+      stayOnFree,
+      hadSubscription,
+    } = this.props;
+    const { intl } = this.context;
+    return (
+      <Appear>
+        <div
+          className={classes.root}
+        >
+          <div className={classes.container}>
+            <div className={classes.bigIcon}>
+              <Icon icon={mdiRocket} />
+            </div>
+            <H1 className={classes.headline}>{intl.formatMessage(messages.welcome, { name: firstname })}</H1>
+            <H2 className={classes.subheadline}>{intl.formatMessage(messages.subheadline)}</H2>
+            <div className={classes.plans}>
+              <PlanItem
+                name={i18nPlanName(PLANS.FREE, intl)}
+                text={intl.formatMessage(messages.textFree)}
+                price={0}
+                currency={currency}
+                ctaLabel={intl.formatMessage(subscriptionExpired ? messages.ctaDowngradeFree : messages.ctaStayOnFree)}
+                upgrade={() => stayOnFree()}
+                simpleCTA
+              >
+                <FeatureList
+                  plan={PLANS.FREE}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.pro.yearly.id, intl)}
+                text={intl.formatMessage(messages.textProfessional)}
+                price={plans.pro.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPro : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.pro.yearly.id)}
+                className={classes.featuredPlan}
+                perUser
+                bestValue
+              >
+                <FeatureList
+                  plan={PLANS.PRO}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+              <PlanItem
+                name={i18nPlanName(plans.personal.yearly.id, intl)}
+                text={intl.formatMessage(messages.textPersonal)}
+                price={plans.personal.yearly.price}
+                currency={currency}
+                ctaLabel={intl.formatMessage(hadSubscription ? messages.shortActionPersonal : messages.actionTrial)}
+                upgrade={() => upgradeAccount(plans.personal.yearly.id)}
+              >
+                <FeatureList
+                  plan={PLANS.PERSONAL}
+                  className={classes.featureList}
+                />
+              </PlanItem>
+            </div>
+            <div className={classes.footer}>
+              <a
+                href="https://meetfranz.com/pricing"
+                target="_blank"
+                className={classes.fullFeatureList}
+              >
+                <Icon icon={mdiArrowRight} />
+                {intl.formatMessage(messages.fullFeatureList)}
+              </a>
+              {/* <p className={classes.disclaimer}> */}
+              {intl.formatMessage(messages.pricesBasedOnAnnualPayment)}
+              {/* </p> */}
+            </div>
+          </div>
+        </div>
+      </Appear>
+    );
+  }
+}
+export default PlanSelection;
diff --git a/src/features/planSelection/containers/PlanSelectionScreen.js b/src/features/planSelection/containers/PlanSelectionScreen.js
new file mode 100644
index 000000000..cb62f45d3
--- /dev/null
+++ b/src/features/planSelection/containers/PlanSelectionScreen.js
@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { remote } from 'electron';
+import { defineMessages, intlShape } from 'react-intl';
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import PlanSelection from '../components/PlanSelection';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { planSelectionStore, GA_CATEGORY_PLAN_SELECTION } from '..';
+import { gaEvent, gaPage } from '../../../lib/analytics';
+const { dialog, app } = remote;
+const messages = defineMessages({
+  dialogTitle: {
+    id: 'feature.planSelection.fullscreen.dialog.title',
+    defaultMessage: '!!!Downgrade your Franz Plan',
+  },
+  dialogMessage: {
+    id: 'feature.planSelection.fullscreen.dialog.message',
+    defaultMessage: '!!!You\'re about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.',
+  },
+  dialogCTADowngrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.downgrade',
+    defaultMessage: '!!!Downgrade to Free',
+  },
+  dialogCTAUpgrade: {
+    id: 'feature.planSelection.fullscreen.dialog.cta.upgrade',
+    defaultMessage: '!!!Choose Personal',
+  },
+});
+@inject('stores', 'actions') @observer
+class PlanSelectionScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+  upgradeAccount(planId) {
+    const { upgradeAccount } = this.props.actions.payment;
+    upgradeAccount({
+      planId,
+    });
+  }
+  render() {
+    if (!planSelectionStore || !planSelectionStore.isFeatureActive || !planSelectionStore.showPlanSelectionOverlay) {
+      return null;
+    }
+    const { intl } = this.context;
+    const { user, features } = this.props.stores;
+    const { plans, currency } = features.features.pricingConfig;
+    const { activateTrial } = this.props.actions.user;
+    const { downgradeAccount, hideOverlay } = this.props.actions.planSelection;
+    return (
+      <ErrorBoundary>
+        <PlanSelection
+          firstname={user.data.firstname}
+          plans={plans}
+          currency={currency}
+          upgradeAccount={(planId) => {
+            if (user.data.hadSubscription) {
+              this.upgradeAccount(planId);
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', planId);
+            } else {
+              activateTrial({
+                planId,
+              });
+            }
+          }}
+          stayOnFree={() => {
+            gaPage('/select-plan/downgrade');
+            const selection = dialog.showMessageBoxSync(app.mainWindow, {
+              type: 'question',
+              message: intl.formatMessage(messages.dialogTitle),
+              detail: intl.formatMessage(messages.dialogMessage, {
+                currency,
+                price: plans.personal.yearly.price,
+              }),
+              buttons: [
+                intl.formatMessage(messages.dialogCTADowngrade),
+                intl.formatMessage(messages.dialogCTAUpgrade),
+              ],
+            });
+            gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Stay on Free');
+            if (selection === 0) {
+              downgradeAccount();
+              hideOverlay();
+            } else {
+              this.upgradeAccount(plans.personal.yearly.id);
+              gaEvent(GA_CATEGORY_PLAN_SELECTION, 'SelectPlan', 'Downgrade');
+            }
+          }}
+          subscriptionExpired={user.team && user.team.state === 'expired' && !user.team.userHasDowngraded}
+          hadSubscription={user.data.hadSubscription}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+export default PlanSelectionScreen;
+PlanSelectionScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+    planSelection: PropTypes.shape({
+      downgradeAccount: PropTypes.func.isRequired,
+      hideOverlay: PropTypes.func.isRequired,
+    }),
+    user: PropTypes.shape({
+      activateTrial: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/features/planSelection/index.js b/src/features/planSelection/index.js
new file mode 100644
index 000000000..81189207a
--- /dev/null
+++ b/src/features/planSelection/index.js
@@ -0,0 +1,30 @@
+import { reaction } from 'mobx';
+import PlanSelectionStore from './store';
+const debug = require('debug')('Franz:feature:planSelection');
+export const GA_CATEGORY_PLAN_SELECTION = 'planSelection';
+export const planSelectionStore = new PlanSelectionStore();
+export default function initPlanSelection(stores, actions) {
+  stores.planSelection = planSelectionStore;
+  const { features } = stores;
+  // Toggle planSelection feature
+  reaction(
+    () => features.features.isPlanSelectionEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `planSelection` feature');
+        planSelectionStore.start(stores, actions);
+      } else if (planSelectionStore.isFeatureActive) {
+        debug('Disabling `planSelection` feature');
+        planSelectionStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/planSelection/store.js b/src/features/planSelection/store.js
new file mode 100644
index 000000000..448e323ff
--- /dev/null
+++ b/src/features/planSelection/store.js
@@ -0,0 +1,68 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+import { planSelectionActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+import { downgradeUserRequest } from './api';
+const debug = require('debug')('Franz:feature:planSelection:store');
+export default class PlanSelectionStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+  @observable isFeatureActive = false;
+  @observable hideOverlay = false;
+  @computed get showPlanSelectionOverlay() {
+    const { team, isPremium } = this.stores.user;
+    if (team && !this.hideOverlay && !isPremium) {
+      return team.state === 'expired' && !team.userHasDowngraded;
+    }
+    return false;
+  }
+  // ========== PUBLIC API ========= //
+  @action start(stores, actions, api) {
+    debug('PlanSelectionStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+    // ACTIONS
+    this._registerActions(createActionBindings([
+      [planSelectionActions.downgradeAccount, this._downgradeAccount],
+      [planSelectionActions.hideOverlay, this._hideOverlay],
+    ]));
+    this.isFeatureActive = true;
+  }
+  @action stop() {
+    super.stop();
+    debug('PlanSelectionStore::stop');
+    this.isFeatureActive = false;
+  }
+  // ========== PRIVATE METHODS ========= //
+  // Actions
+  @action _downgradeAccount = () => {
+    downgradeUserRequest.execute();
+  }
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+  @action _showOverlay = () => {
+    this.hideOverlay = false;
+  }
+}
diff --git a/src/features/shareFranz/index.js b/src/features/shareFranz/index.js
index 217e926f9..04e3684ae 100644
--- a/src/features/shareFranz/index.js
+++ b/src/features/shareFranz/index.js
@@ -2,6 +2,7 @@ import { observable, reaction } from 'mobx';
 import ms from 'ms';
 import { state as delayAppState } from '../delayApp';
+import { planSelectionStore } from '../planSelection';
 export { default as Component } from './Component';
@@ -31,7 +32,7 @@ export default function initialize(stores) {
    () => stores.user.isLoggedIn,
    () => {
      setTimeout(() => {
-        if (stores.settings.stats.appStarts % 50 === 0) {
+        if (stores.settings.stats.appStarts % 50 === 0 && !planSelectionStore.showPlanSelectionOverlay) {
          if (delayAppState.isDelayAppScreenVisible) {
            debug('Delaying share modal by 5 minutes');
            setTimeout(() => showModal(), ms('5m'));
diff --git a/src/features/trialStatusBar/actions.js b/src/features/trialStatusBar/actions.js
new file mode 100644
index 000000000..38df76458
--- /dev/null
+++ b/src/features/trialStatusBar/actions.js
@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+export const trialStatusBarActions = createActionsFromDefinitions({
+  upgradeAccount: {
+    planId: PropTypes.string.isRequired,
+    onCloseWindow: PropTypes.func.isRequired,
+  },
+  downgradeAccount: {},
+  hideOverlay: {},
+}, PropTypes.checkPropTypes);
+export default trialStatusBarActions;
diff --git a/src/features/trialStatusBar/components/ProgressBar.js b/src/features/trialStatusBar/components/ProgressBar.js
new file mode 100644
index 000000000..41b74d396
--- /dev/null
+++ b/src/features/trialStatusBar/components/ProgressBar.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.progressBar.background,
+    width: '25%',
+    maxWidth: 200,
+    height: 8,
+    display: 'flex',
+    alignItems: 'center',
+    borderRadius: theme.borderRadius,
+    overflow: 'hidden',
+  },
+  progress: {
+    background: theme.trialStatusBar.progressBar.progressIndicator,
+    width: ({ percent }) => `${percent}%`,
+    height: '100%',
+  },
+});
+@injectSheet(styles) @observer
+class ProgressBar extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+  render() {
+    const {
+      classes,
+    } = this.props;
+    return (
+      <div
+        className={classes.root}
+      >
+        <div className={classes.progress} />
+      </div>
+    );
+  }
+}
+export default ProgressBar;
diff --git a/src/features/trialStatusBar/components/TrialStatusBar.js b/src/features/trialStatusBar/components/TrialStatusBar.js
new file mode 100644
index 000000000..b8fe4acc9
--- /dev/null
+++ b/src/features/trialStatusBar/components/TrialStatusBar.js
@@ -0,0 +1,135 @@
+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 { Icon } from '@meetfranz/ui';
+import { mdiArrowRight, mdiWindowClose } from '@mdi/js';
+import classnames from 'classnames';
+import ProgressBar from './ProgressBar';
+const messages = defineMessages({
+  restTime: {
+    id: 'feature.trialStatusBar.restTime',
+    defaultMessage: '!!!Your Free Franz {plan} Trial ends in {time}.',
+  },
+  expired: {
+    id: 'feature.trialStatusBar.expired',
+    defaultMessage: '!!!Your free Franz {plan} Trial has expired, please upgrade your account.',
+  },
+  cta: {
+    id: 'feature.trialStatusBar.cta',
+    defaultMessage: '!!!Upgrade now',
+  },
+});
+const styles = theme => ({
+  root: {
+    background: theme.trialStatusBar.bar.background,
+    width: '100%',
+    height: 25,
+    order: 10,
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: 12,
+    padding: [0, 10],
+    justifyContent: 'flex-end',
+  },
+  ended: {
+    background: theme.styleTypes.warning.accent,
+    color: theme.styleTypes.warning.contrast,
+  },
+  message: {
+    marginLeft: 20,
+  },
+  action: {
+    marginLeft: 20,
+    fontSize: 12,
+    color: theme.colorText,
+    textDecoration: 'underline',
+    display: 'flex',
+    '& svg': {
+      margin: [1, 2, 0, 0],
+    },
+  },
+});
+@injectSheet(styles) @observer
+class TrialStatusBar extends Component {
+  static propTypes = {
+    planName: PropTypes.string.isRequired,
+    percent: PropTypes.number.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
+    hideOverlay: PropTypes.func.isRequired,
+    trialEnd: PropTypes.string.isRequired,
+    hasEnded: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+  static contextTypes = {
+    intl: intlShape,
+  };
+  render() {
+    const {
+      planName,
+      percent,
+      upgradeAccount,
+      hideOverlay,
+      trialEnd,
+      hasEnded,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+    return (
+      <div
+        className={classnames({
+          [classes.root]: true,
+          [classes.ended]: hasEnded,
+        })}
+      >
+        <ProgressBar
+          percent={percent}
+        />
+        {' '}
+        <span className={classes.message}>
+          {!hasEnded ? (
+            intl.formatMessage(messages.restTime, {
+              plan: planName,
+              time: trialEnd,
+            })
+          ) : (
+            intl.formatMessage(messages.expired, {
+              plan: planName,
+            })
+          )}
+        </span>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            upgradeAccount();
+          }}
+        >
+          <Icon icon={mdiArrowRight} />
+          {intl.formatMessage(messages.cta)}
+        </button>
+        <button
+          className={classes.action}
+          type="button"
+          onClick={() => {
+            hideOverlay();
+          }}
+        >
+          <Icon icon={mdiWindowClose} />
+        </button>
+      </div>
+    );
+  }
+}
+export default TrialStatusBar;
diff --git a/src/features/trialStatusBar/containers/TrialStatusBarScreen.js b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
new file mode 100644
index 000000000..e15a1204f
--- /dev/null
+++ b/src/features/trialStatusBar/containers/TrialStatusBarScreen.js
@@ -0,0 +1,109 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+import ms from 'ms';
+import { intlShape } from 'react-intl';
+import FeaturesStore from '../../../stores/FeaturesStore';
+import UserStore from '../../../stores/UserStore';
+import TrialStatusBar from '../components/TrialStatusBar';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import { trialStatusBarStore } from '..';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
+@inject('stores', 'actions') @observer
+class TrialStatusBarScreen extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+  state = {
+    showOverlay: true,
+    percent: 0,
+    restTime: '',
+    hasEnded: false,
+  };
+  percentInterval = null;
+  componentDidMount() {
+    this.percentInterval = setInterval(() => {
+      this.calculateRestTime();
+    }, ms('1m'));
+    this.calculateRestTime();
+  }
+  componentWillUnmount() {
+    clearInterval(this.percentInterval);
+  }
+  calculateRestTime() {
+    const { trialEndTime } = trialStatusBarStore;
+    const percent = Math.abs(100 - Math.abs(trialEndTime.asMilliseconds()) * 100 / ms('14d')).toFixed(2);
+    const restTime = trialEndTime.humanize();
+    const hasEnded = trialEndTime.asMilliseconds() > 0;
+    this.setState({
+      percent,
+      restTime,
+      hasEnded,
+    });
+  }
+  hideOverlay() {
+    this.setState({
+      showOverlay: false,
+    });
+  }
+  render() {
+    const { intl } = this.context;
+    const {
+      showOverlay,
+      percent,
+      restTime,
+      hasEnded,
+    } = this.state;
+    if (!trialStatusBarStore || !trialStatusBarStore.isFeatureActive || !showOverlay || !trialStatusBarStore.showTrialStatusBarOverlay) {
+      return null;
+    }
+    const { user } = this.props.stores;
+    const { upgradeAccount } = this.props.actions.payment;
+    const planName = i18nPlanName(user.team.plan, intl);
+    return (
+      <ErrorBoundary>
+        <TrialStatusBar
+          planName={planName}
+          percent={parseFloat(percent < 5 ? 5 : percent)}
+          trialEnd={restTime}
+          upgradeAccount={() => upgradeAccount({
+            planId: user.team.plan,
+          })}
+          hideOverlay={() => this.hideOverlay()}
+          hasEnded={hasEnded}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+export default TrialStatusBarScreen;
+TrialStatusBarScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    payment: PropTypes.shape({
+      upgradeAccount: PropTypes.func.isRequired,
+    }),
+  }).isRequired,
+};
diff --git a/src/features/trialStatusBar/index.js b/src/features/trialStatusBar/index.js
new file mode 100644
index 000000000..ec84cdfd7
--- /dev/null
+++ b/src/features/trialStatusBar/index.js
@@ -0,0 +1,30 @@
+import { reaction } from 'mobx';
+import TrialStatusBarStore from './store';
+const debug = require('debug')('Franz:feature:trialStatusBar');
+export const GA_CATEGORY_TRIAL_STATUS_BAR = 'trialStatusBar';
+export const trialStatusBarStore = new TrialStatusBarStore();
+export default function initTrialStatusBar(stores, actions) {
+  stores.trialStatusBar = trialStatusBarStore;
+  const { features } = stores;
+  // Toggle trialStatusBar feature
+  reaction(
+    () => features.features.isTrialStatusBarEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `trialStatusBar` feature');
+        trialStatusBarStore.start(stores, actions);
+      } else if (trialStatusBarStore.isFeatureActive) {
+        debug('Disabling `trialStatusBar` feature');
+        trialStatusBarStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/trialStatusBar/store.js b/src/features/trialStatusBar/store.js
new file mode 100644
index 000000000..89cf32392
--- /dev/null
+++ b/src/features/trialStatusBar/store.js
@@ -0,0 +1,72 @@
+import {
+  action,
+  observable,
+  computed,
+} from 'mobx';
+import moment from 'moment';
+import { trialStatusBarActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createActionBindings } from '../utils/ActionBinding';
+const debug = require('debug')('Franz:feature:trialStatusBar:store');
+export default class TrialStatusBarStore extends FeatureStore {
+  @observable isFeatureActive = false;
+  @observable isFeatureEnabled = false;
+  @computed get showTrialStatusBarOverlay() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+      if (team && !this.hideOverlay) {
+        return team.state !== 'expired' && team.isTrial;
+      }
+    }
+    return false;
+  }
+  @computed get trialEndTime() {
+    if (this.isFeatureActive) {
+      const { team } = this.stores.user;
+      if (team && !this.hideOverlay) {
+        return moment.duration(moment().diff(team.trialEnd));
+      }
+    }
+    return moment.duration();
+  }
+  // ========== PUBLIC API ========= //
+  @action start(stores, actions, api) {
+    debug('TrialStatusBarStore::start');
+    this.stores = stores;
+    this.actions = actions;
+    this.api = api;
+    // ACTIONS
+    this._registerActions(createActionBindings([
+      [trialStatusBarActions.hideOverlay, this._hideOverlay],
+    ]));
+    this.isFeatureActive = true;
+  }
+  @action stop() {
+    super.stop();
+    debug('TrialStatusBarStore::stop');
+    this.isFeatureActive = false;
+  }
+  // ========== PRIVATE METHODS ========= //
+  // Actions
+  @action _hideOverlay = () => {
+    this.hideOverlay = true;
+  }
+}
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index e991b9909..baa94f6b3 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,7 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
-import { mdiPlusBox, mdiSettings } from '@mdi/js';
+import { mdiPlusBox, mdiSettings, mdiStar } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { workspaceStore } from '../index';
@@ -51,6 +51,8 @@ const styles = theme => ({
  drawer: {
    background: theme.workspaces.drawer.background,
    width: `${theme.workspaces.drawer.width}px`,
+    display: 'flex',
+    flexDirection: 'column',
  },
  headline: {
    fontSize: '24px',
@@ -74,6 +76,7 @@ const styles = theme => ({
  },
  workspaces: {
    height: 'auto',
+    overflowY: 'scroll',
  },
  premiumAnnouncement: {
    padding: '20px',
@@ -88,7 +91,7 @@ const styles = theme => ({
  addNewWorkspaceLabel: {
    height: 'auto',
    color: theme.workspaces.drawer.buttons.color,
-    marginTop: 40,
+    margin: [40, 0],
    textAlign: 'center',
    '& > svg': {
      fill: theme.workspaces.drawer.buttons.color,
@@ -172,7 +175,7 @@ class WorkspaceDrawer extends Component {
                className={classes.premiumCtaButton}
                buttonType="primary"
                label={intl.formatMessage(messages.reactivatePremiumAccount)}
-                icon="mdiStar"
+                icon={mdiStar}
                onClick={() => {
                  onUpgradeAccountClick();
                }}
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 977b23999..b499e02a4 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -5,6 +5,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 import { Infobox, Badge } from '@meetfranz/ui';
+import { mdiCheckboxMarkedCircleOutline } from '@mdi/js';
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
 import CreateWorkspaceForm from './CreateWorkspaceForm';
@@ -128,7 +129,7 @@ class WorkspacesDashboard extends Component {
            <Appear className={classes.appear}>
              <Infobox
                type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                dismissable
                onUnmount={updateWorkspaceRequest.reset}
              >
@@ -142,7 +143,7 @@ class WorkspacesDashboard extends Component {
            <Appear className={classes.appear}>
              <Infobox
                type="success"
-                icon="mdiCheckboxMarkedCircleOutline"
+                icon={mdiCheckboxMarkedCircleOutline}
                dismissable
                onUnmount={deleteWorkspaceRequest.reset}
              >
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 949f8a792..5c90ff180 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -47,6 +47,11 @@ export default class WorkspacesStore extends FeatureStore {
    return getUserWorkspacesRequest.result || [];
  }
+  @computed get isLoadingWorkspaces() {
+    if (!this.isFeatureActive) return false;
+    return getUserWorkspacesRequest.isExecutingFirstTime;
+  }
  @computed get settings() {
    return localStorage.getItem('workspaces') || {};
  }
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
index e0f1fd89a..ee22e4471 100644
--- a/src/helpers/plan-helpers.js
+++ b/src/helpers/plan-helpers.js
@@ -4,19 +4,19 @@ import { PLANS_MAPPING, PLANS } from '../config';
 const messages = defineMessages({
  [PLANS.PRO]: {
    id: 'pricing.plan.pro',
-    defaultMessage: '!!!Franz Professional',
+    defaultMessage: '!!!Professional',
  },
  [PLANS.PERSONAL]: {
    id: 'pricing.plan.personal',
-    defaultMessage: '!!!Franz Personal',
+    defaultMessage: '!!!Personal',
  },
  [PLANS.FREE]: {
    id: 'pricing.plan.free',
-    defaultMessage: '!!!Franz Free',
+    defaultMessage: '!!!Free',
  },
  [PLANS.LEGACY]: {
    id: 'pricing.plan.legacy',
-    defaultMessage: '!!!Franz Premium',
+    defaultMessage: '!!!Premium',
  },
 });
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index 0885f6a20..c4c94bb32 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,7 +1,7 @@
 [
  {
-    "id": "pricing.trial.headline",
+    "id": "pricing.trial.headline.pro",
-    "defaultMessage": "!!!Franz Professional",
+    "defaultMessage": "!!!Hi {name}, welcome to Franz",
    "file": "src/components/auth/Pricing.js",
    "start": {
      "line": 15,
@@ -13,12 +13,12 @@
    }
  },
  {
-    "id": "pricing.trial.subheadline",
+    "id": "pricing.trial.intro.specialTreat",
-    "defaultMessage": "!!!Your personal welcome offer:",
+    "defaultMessage": "!!!We have a special treat for you.",
    "file": "src/components/auth/Pricing.js",
    "start": {
      "line": 19,
-      "column": 17
+      "column": 16
    },
    "end": {
      "line": 22,
@@ -26,15 +26,41 @@
    }
  },
  {
+    "id": "pricing.trial.intro.tryPro",
+    "defaultMessage": "!!!Enjoy the full Franz Professional experience completely free for 14 days.",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 23,
+      "column": 10
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.intro.happyMessaging",
+    "defaultMessage": "!!!Happy messaging,",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 18
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
    "id": "pricing.trial.terms.headline",
    "defaultMessage": "!!!No strings attached",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 23,
+      "line": 31,
      "column": 29
    },
    "end": {
-      "line": 26,
+      "line": 34,
      "column": 3
    }
  },
@@ -43,11 +69,11 @@
    "defaultMessage": "!!!No credit card required",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 27,
+      "line": 35,
      "column": 16
    },
    "end": {
-      "line": 30,
+      "line": 38,
      "column": 3
    }
  },
@@ -56,11 +82,24 @@
    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 31,
+      "line": 39,
      "column": 21
    },
    "end": {
-      "line": 34,
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.trialWorth",
+    "defaultMessage": "!!!Free trial (normally {currency}{price} per month)",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 14
+    },
+    "end": {
+      "line": 46,
      "column": 3
    }
  },
@@ -69,24 +108,37 @@
    "defaultMessage": "!!!Sorry, we could not activate your trial!",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 35,
+      "line": 47,
      "column": 19
    },
    "end": {
-      "line": 38,
+      "line": 50,
      "column": 3
    }
  },
  {
    "id": "pricing.trial.cta.accept",
-    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "defaultMessage": "!!!Start my 14-day Franz Professional Trial",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 39,
+      "line": 51,
      "column": 13
    },
    "end": {
-      "line": 42,
+      "line": 54,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.start",
+    "defaultMessage": "!!!Start using Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 55,
+      "column": 12
+    },
+    "end": {
+      "line": 58,
      "column": 3
    }
  },
@@ -95,11 +147,11 @@
    "defaultMessage": "!!!Continue to Ferdi",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 43,
+      "line": 59,
      "column": 11
    },
    "end": {
-      "line": 46,
+      "line": 62,
      "column": 3
    }
  },
@@ -108,11 +160,11 @@
    "defaultMessage": "!!!Franz Professional includes:",
    "file": "src/components/auth/Pricing.js",
    "start": {
-      "line": 47,
+      "line": 63,
      "column": 20
    },
    "end": {
-      "line": 50,
+      "line": 66,
      "column": 3
    }
  }
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 0625487b4..8b7fcf1b2 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
    "defaultMessage": "!!!Your services have been updated.",
    "file": "src/components/layout/AppLayout.js",
    "start": {
-      "line": 28,
+      "line": 30,
      "column": 19
    },
    "end": {
-      "line": 31,
+      "line": 33,
      "column": 3
    }
  },
@@ -17,11 +17,11 @@
    "defaultMessage": "!!!Reload services",
    "file": "src/components/layout/AppLayout.js",
    "start": {
-      "line": 32,
+      "line": 34,
      "column": 24
    },
    "end": {
-      "line": 35,
+      "line": 37,
      "column": 3
    }
  },
@@ -30,11 +30,11 @@
    "defaultMessage": "!!!Could not load services and user information",
    "file": "src/components/layout/AppLayout.js",
    "start": {
-      "line": 36,
+      "line": 38,
      "column": 26
    },
    "end": {
-      "line": 39,
+      "line": 41,
      "column": 3
    }
  },
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
index 497e299a4..3201115b3 100644
--- a/src/i18n/messages/src/components/ui/FeatureList.json
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -1,14 +1,79 @@
 [
  {
+    "id": "pricing.features.recipes",
+    "defaultMessage": "!!!Choose from more than 70 Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 9,
+      "column": 20
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.accountSync",
+    "defaultMessage": "!!!Account Synchronisation",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 13,
+      "column": 15
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.desktopNotifications",
+    "defaultMessage": "!!!Desktop Notifications",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 17,
+      "column": 24
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
    "id": "pricing.features.unlimitedServices",
    "defaultMessage": "!!!Add unlimited services",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 8,
+      "line": 21,
      "column": 21
    },
    "end": {
-      "line": 11,
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.upToThreeServices",
+    "defaultMessage": "!!!Add up to 3 services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 25,
+      "column": 21
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.upToSixServices",
+    "defaultMessage": "!!!Add up to 6 services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 29,
+      "column": 19
+    },
+    "end": {
+      "line": 32,
      "column": 3
    }
  },
@@ -17,11 +82,11 @@
    "defaultMessage": "!!!Spellchecker support",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 12,
+      "line": 33,
      "column": 16
    },
    "end": {
-      "line": 15,
+      "line": 36,
      "column": 3
    }
  },
@@ -30,11 +95,11 @@
    "defaultMessage": "!!!Workspaces",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 16,
+      "line": 37,
      "column": 14
    },
    "end": {
-      "line": 19,
+      "line": 40,
      "column": 3
    }
  },
@@ -43,11 +108,11 @@
    "defaultMessage": "!!!Add Custom Websites",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 20,
+      "line": 41,
      "column": 18
    },
    "end": {
-      "line": 23,
+      "line": 44,
      "column": 3
    }
  },
@@ -56,11 +121,11 @@
    "defaultMessage": "!!!On-premise & other Hosted Services",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 24,
+      "line": 45,
      "column": 13
    },
    "end": {
-      "line": 27,
+      "line": 48,
      "column": 3
    }
  },
@@ -69,11 +134,11 @@
    "defaultMessage": "!!!Install 3rd party services",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 28,
+      "line": 49,
      "column": 22
    },
    "end": {
-      "line": 31,
+      "line": 52,
      "column": 3
    }
  },
@@ -82,11 +147,11 @@
    "defaultMessage": "!!!Service Proxies",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 32,
+      "line": 53,
      "column": 18
    },
    "end": {
-      "line": 35,
+      "line": 56,
      "column": 3
    }
  },
@@ -95,11 +160,11 @@
    "defaultMessage": "!!!Team Management",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 36,
+      "line": 57,
      "column": 18
    },
    "end": {
-      "line": 39,
+      "line": 60,
      "column": 3
    }
  },
@@ -108,11 +173,11 @@
    "defaultMessage": "!!!No Waiting Screens",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 40,
+      "line": 61,
      "column": 13
    },
    "end": {
-      "line": 43,
+      "line": 64,
      "column": 3
    }
  },
@@ -121,11 +186,11 @@
    "defaultMessage": "!!!Forever ad-free",
    "file": "src/components/ui/FeatureList.js",
    "start": {
-      "line": 44,
+      "line": 65,
      "column": 10
    },
    "end": {
-      "line": 47,
+      "line": 68,
      "column": 3
    }
  }
diff --git a/src/i18n/messages/src/features/delayApp/Component.json b/src/i18n/messages/src/features/delayApp/Component.json
index 77fabf236..f1d6886f5 100644
--- a/src/i18n/messages/src/features/delayApp/Component.json
+++ b/src/i18n/messages/src/features/delayApp/Component.json
@@ -27,7 +27,7 @@
  },
  {
    "id": "feature.delayApp.upgrade.action",
-    "defaultMessage": "!!!Get a Franz Supporter License",
+    "defaultMessage": "!!!Upgrade Franz",
    "file": "src/features/delayApp/Component.js",
    "start": {
      "line": 22,
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanItem.json b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
new file mode 100644
index 000000000..5a94f32ee
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanItem.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "subscription.interval.perMonth",
+    "defaultMessage": "!!!per month",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 15,
+      "column": 12
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.interval.perMonthPerUser",
+    "defaultMessage": "!!!per month & user",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 19,
+      "column": 19
+    },
+    "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.bestValue",
+    "defaultMessage": "!!!Best value",
+    "file": "src/features/planSelection/components/PlanItem.js",
+    "start": {
+      "line": 23,
+      "column": 13
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanSelection.json b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
new file mode 100644
index 000000000..7f1de6cfd
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanSelection.json
@@ -0,0 +1,158 @@
+[
+  {
+    "id": "feature.planSelection.fullscreen.welcome",
+    "defaultMessage": "!!!Are you ready to choose, {name}",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 18,
+      "column": 11
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.subheadline",
+    "defaultMessage": "!!!It's time to make a choice. Franz works best on our Personal and Professional plans. Please have a look and choose the best one for you.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 22,
+      "column": 15
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.free.text",
+    "defaultMessage": "!!!Basic functionality",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 26,
+      "column": 12
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.personal.text",
+    "defaultMessage": "!!!More services, no waiting - ideal for personal use.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 30,
+      "column": 16
+    },
+    "end": {
+      "line": 33,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.pro.text",
+    "defaultMessage": "!!!Unlimited services and professional features for you - and your team.",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 34,
+      "column": 20
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.stayOnFree",
+    "defaultMessage": "!!!Stay on Free",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 38,
+      "column": 17
+    },
+    "end": {
+      "line": 41,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.ctaDowngradeFree",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 42,
+      "column": 20
+    },
+    "end": {
+      "line": 45,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.trial",
+    "defaultMessage": "!!!Start my free 14-days Trial",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 46,
+      "column": 15
+    },
+    "end": {
+      "line": 49,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.upgradePersonal",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 50,
+      "column": 23
+    },
+    "end": {
+      "line": 53,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.cta.upgradePro",
+    "defaultMessage": "!!!Choose Professional",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 54,
+      "column": 18
+    },
+    "end": {
+      "line": 57,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullFeatureList",
+    "defaultMessage": "!!!Complete comparison of all plans",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 58,
+      "column": 19
+    },
+    "end": {
+      "line": 61,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.pricesBasedOnAnnualPayment",
+    "defaultMessage": "!!!All prices based on yearly payment",
+    "file": "src/features/planSelection/components/PlanSelection.js",
+    "start": {
+      "line": 62,
+      "column": 30
+    },
+    "end": {
+      "line": 65,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json b/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json
new file mode 100644
index 000000000..015304a2e
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/components/PlanTeaser.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "subscription.interval.per",
+    "defaultMessage": "!!!per {interval}",
+    "file": "src/features/planSelection/components/PlanTeaser.js",
+    "start": {
+      "line": 16,
+      "column": 7
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.planItem.upgradeAccount",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/features/planSelection/components/PlanTeaser.js",
+    "start": {
+      "line": 20,
+      "column": 7
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
new file mode 100644
index 000000000..905c6e09a
--- /dev/null
+++ b/src/i18n/messages/src/features/planSelection/containers/PlanSelectionScreen.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.planSelection.fullscreen.dialog.title",
+    "defaultMessage": "!!!Downgrade your Franz Plan",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 17,
+      "column": 15
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.message",
+    "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 21,
+      "column": 17
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.cta.downgrade",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 25,
+      "column": 22
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.planSelection.fullscreen.dialog.cta.upgrade",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/planSelection/containers/PlanSelectionScreen.js",
+    "start": {
+      "line": 29,
+      "column": 20
+    },
+    "end": {
+      "line": 32,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
new file mode 100644
index 000000000..bf211a016
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/components/TrialStatusBar.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "feature.trialStatusBar.restTime",
+    "defaultMessage": "!!!Your Free Franz {plan} Trial ends in {time}.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 13,
+      "column": 12
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.expired",
+    "defaultMessage": "!!!Your free Franz {plan} Trial has expired, please upgrade your account.",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 17,
+      "column": 11
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.cta",
+    "defaultMessage": "!!!Upgrade now",
+    "file": "src/features/trialStatusBar/components/TrialStatusBar.js",
+    "start": {
+      "line": 21,
+      "column": 7
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
new file mode 100644
index 000000000..306cd0fee
--- /dev/null
+++ b/src/i18n/messages/src/features/trialStatusBar/containers/TrialStatusBarScreen.json
@@ -0,0 +1,54 @@
+[
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.title",
+    "defaultMessage": "!!!Downgrade your Franz Plan",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.message",
+    "defaultMessage": "!!!You're about to downgrade to our Free account. Are you sure? Click here instead to get more services and functionality for just {currency}{price} a month.",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 20,
+      "column": 17
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.downgrade",
+    "defaultMessage": "!!!Downgrade to Free",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 24,
+      "column": 22
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.trialStatusBar.fullscreen.dialog.cta.upgrade",
+    "defaultMessage": "!!!Choose Personal",
+    "file": "src/features/trialStatusBar/containers/TrialStatusBarScreen.js",
+    "start": {
+      "line": 28,
+      "column": 20
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  }
+]
+\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json b/src/i18n/messages/src/features/workspaces/components/WorkspacesDashboard.json
index 4111ba760..87b8942ce 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": 19,
+      "line": 20,
      "column": 12
    },
    "end": {
-      "line": 22,
+      "line": 23,
      "column": 3
    }
  },
@@ -17,11 +17,11 @@
    "defaultMessage": "!!!You haven't added any workspaces yet.",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 23,
+      "line": 24,
      "column": 19
    },
    "end": {
-      "line": 26,
+      "line": 27,
      "column": 3
    }
  },
@@ -30,11 +30,11 @@
    "defaultMessage": "!!!Could not load your workspaces",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 27,
+      "line": 28,
      "column": 27
    },
    "end": {
-      "line": 30,
+      "line": 31,
      "column": 3
    }
  },
@@ -43,11 +43,11 @@
    "defaultMessage": "!!!Try again",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 31,
+      "line": 32,
      "column": 23
    },
    "end": {
-      "line": 34,
+      "line": 35,
      "column": 3
    }
  },
@@ -56,11 +56,11 @@
    "defaultMessage": "!!!Your changes have been saved",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 35,
+      "line": 36,
      "column": 15
    },
    "end": {
-      "line": 38,
+      "line": 39,
      "column": 3
    }
  },
@@ -69,11 +69,11 @@
    "defaultMessage": "!!!Workspace has been deleted",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 39,
+      "line": 40,
      "column": 15
    },
    "end": {
-      "line": 42,
+      "line": 43,
      "column": 3
    }
  },
@@ -82,11 +82,11 @@
    "defaultMessage": "!!!Info about workspace feature",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 43,
+      "line": 44,
      "column": 24
    },
    "end": {
-      "line": 46,
+      "line": 47,
      "column": 3
    }
  },
@@ -95,11 +95,11 @@
    "defaultMessage": "!!!Less is More: Introducing Ferdi Workspaces",
    "file": "src/features/workspaces/components/WorkspacesDashboard.js",
    "start": {
-      "line": 47,
+      "line": 48,
      "column": 28
    },
    "end": {
-      "line": 50,
+      "line": 51,
      "column": 3
    }
  }
diff --git a/src/i18n/messages/src/helpers/plan-helpers.json b/src/i18n/messages/src/helpers/plan-helpers.json
index df8ee19e3..3f3e7e85d 100644
--- a/src/i18n/messages/src/helpers/plan-helpers.json
+++ b/src/i18n/messages/src/helpers/plan-helpers.json
@@ -1,7 +1,7 @@
 [
  {
    "id": "pricing.plan.pro",
-    "defaultMessage": "!!!Franz Professional",
+    "defaultMessage": "!!!Professional",
    "file": "src/helpers/plan-helpers.js",
    "start": {
      "line": 5,
@@ -14,7 +14,7 @@
  },
  {
    "id": "pricing.plan.personal",
-    "defaultMessage": "!!!Franz Personal",
+    "defaultMessage": "!!!Personal",
    "file": "src/helpers/plan-helpers.js",
    "start": {
      "line": 9,
@@ -27,7 +27,7 @@
  },
  {
    "id": "pricing.plan.free",
-    "defaultMessage": "!!!Franz Free",
+    "defaultMessage": "!!!Free",
    "file": "src/helpers/plan-helpers.js",
    "start": {
      "line": 13,
@@ -40,7 +40,7 @@
  },
  {
    "id": "pricing.plan.legacy",
-    "defaultMessage": "!!!Franz Premium",
+    "defaultMessage": "!!!Premium",
    "file": "src/helpers/plan-helpers.js",
    "start": {
      "line": 17,
diff --git a/src/index.js b/src/index.js
index a4880a25a..87aa6357b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -68,8 +68,15 @@ if (isWindows) {
  app.setAppUserModelId(appId);
 }
+// Initialize Settings
+const settings = new Settings('app', DEFAULT_APP_SETTINGS);
+const proxySettings = new Settings('proxy');
+// add `liftSingleInstanceLock` to settings.json to override the single instance lock
+const liftSingleInstanceLock = settings.get('liftSingleInstanceLock') || false;
 // Force single window
-const gotTheLock = app.requestSingleInstanceLock();
+const gotTheLock = liftSingleInstanceLock ? true : app.requestSingleInstanceLock();
 if (!gotTheLock) {
  app.quit();
 } else {
@@ -116,10 +123,6 @@ if (isLinux && ['Pantheon', 'Unity:Unity7'].indexOf(process.env.XDG_CURRENT_DESK
  process.env.XDG_CURRENT_DESKTOP = 'Unity';
 }
-// Initialize Settings
-const settings = new Settings('app', DEFAULT_APP_SETTINGS);
-const proxySettings = new Settings('proxy');
 // Disable GPU acceleration
 if (!settings.get('enableGPUAcceleration')) {
  debug('Disable GPU Acceleration');
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index f223283f9..d7398a126 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -730,7 +730,9 @@ export default class FranzMenu {
    // need to clone object so we don't modify computed (cached) object
    const serviceTpl = Object.assign([], this.serviceTpl());
-    if (window.ferdi === undefined) {
+    // Don't initialize when window.franz is undefined or when we are on a payment window route
+    if (window.ferdi === undefined || this.stores.router.location.pathname.startsWith('/payment/')) {
+      console.log('skipping menu init');
      return;
    }
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 1de46d2a3..32f546644 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -24,6 +24,10 @@ export default class FranzTouchBar {
  _build() {
    const currentWindow = remote.getCurrentWindow();
+    if (this.stores.router.location.pathname.startsWith('/payment/')) {
+      return;
+    }
    if (this.stores.user.isLoggedIn) {
      const { TouchBar } = remote;
      const { TouchBarButton, TouchBarSpacer } = TouchBar;
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 40d98cf42..6ce79f2e2 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -26,7 +26,9 @@ import { sleep } from '../helpers/async-helpers';
 const debug = require('debug')('Ferdi:AppStore');
-const { app, systemPreferences, screen } = remote;
+const {
+  app, systemPreferences, screen, powerMonitor,
+} = remote;
 const mainWindow = remote.getCurrentWindow();
@@ -35,6 +37,8 @@ const autoLauncher = new AutoLaunch({
  name: 'Ferdi',
 });
+const CATALINA_NOTIFICATION_HACK_KEY = '_temp_askedForCatalinaNotificationPermissions';
 export default class AppStore extends Store {
  updateStatusTypes = {
    CHECKING: 'CHECKING',
@@ -55,6 +59,8 @@ export default class AppStore extends Store {
  @observable isOnline = navigator.onLine;
  @observable authRequestFailed = false;
+  
+  @observable timeSuspensionStart;
  @observable timeOfflineStart;
@@ -76,6 +82,8 @@ export default class AppStore extends Store {
  dictionaries = [];
+  fetchDataInterval = null;
  constructor(...args) {
    super(...args);
@@ -97,6 +105,7 @@ export default class AppStore extends Store {
      this._setLocale.bind(this),
      this._muteAppHandler.bind(this),
      this._handleFullScreen.bind(this),
+      this._handleLogout.bind(this),
    ]);
  }
@@ -124,6 +133,12 @@ export default class AppStore extends Store {
    this._systemDND();
    setInterval(() => this._systemDND(), ms('5s'));
+    this.fetchDataInterval = setInterval(() => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+      this.stores.news.latestNewsRequest.invalidate({ immediately: true });
+    }, ms('10m'));
    // Check for updates once every 4 hours
    setInterval(() => this._checkForUpdates(), CHECK_INTERVAL);
    // Check for an update in 30s (need a delay to prevent Squirrel Installer lock file issues)
@@ -175,6 +190,40 @@ export default class AppStore extends Store {
      debug('Window is visible/focused', isVisible);
    });
+    powerMonitor.on('suspend', () => {
+      debug('System suspended starting timer');
+      this.timeSuspensionStart = moment();
+    });
+    powerMonitor.on('resume', () => {
+      debug('System resumed, last suspended on', this.timeSuspensionStart.toString());
+      if (this.timeSuspensionStart.add(10, 'm').isBefore(moment())) {
+        debug('Reloading services, user info and features');
+        setTimeout(() => {
+          window.location.reload();
+        }, ms('2s'));
+        statsEvent('resumed-app');
+      }
+    });
+    // macOS catalina notifications hack
+    // notifications got stuck after upgrade but forcing a notification
+    // via `new Notification` triggered the permission request
+    if (isMac && !localStorage.getItem(CATALINA_NOTIFICATION_HACK_KEY)) {
+      // eslint-disable-next-line no-new
+      new window.Notification('Welcome to Franz 5', {
+        body: 'Have a wonderful day & happy messaging.',
+      });
+      localStorage.setItem(CATALINA_NOTIFICATION_HACK_KEY, true);
+    }
+    statsEvent('app-start');
  }
  @computed get cacheSize() {
@@ -383,6 +432,12 @@ export default class AppStore extends Store {
    }
  }
+  _handleLogout() {
+    if (!this.stores.user.isLoggedIn) {
+      clearInterval(this.fetchDataInterval);
+    }
+  }
  // Helpers
  _appStartsCounter() {
    this.actions.settings.update({
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index 3d9542245..ab5d762c7 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -21,6 +21,8 @@ import serviceLimit from '../features/serviceLimit';
 import communityRecipes from '../features/communityRecipes';
 import todos from '../features/todos';
 import accentColor from '../features/accentColor';
+import planSelection from '../features/planSelection';
+import trialStatusBar from '../features/trialStatusBar';
 import { DEFAULT_FEATURES_CONFIG } from '../config';
@@ -67,6 +69,7 @@ export default class FeaturesStore extends Store {
    if (this.stores.user.isLoggedIn) {
      this.featuresRequest.invalidate({ immediately: true });
    } else {
+      this.defaultFeaturesRequest.execute();
      this.defaultFeaturesRequest.invalidate({ immediately: true });
    }
  }
@@ -85,5 +88,7 @@ export default class FeaturesStore extends Store {
    communityRecipes(this.stores, this.actions);
    todos(this.stores, this.actions);
    accentColor(this.stores, this.actions);
+    planSelection(this.stores, this.actions);
+    trialStatusBar(this.stores, this.actions);
  }
 }
diff --git a/src/stores/PaymentStore.js b/src/stores/PaymentStore.js
index 8579812ad..69e6eb9c3 100644
--- a/src/stores/PaymentStore.js
+++ b/src/stores/PaymentStore.js
@@ -1,9 +1,12 @@
 import { action, observable, computed } from 'mobx';
+import { remote } from 'electron';
 import Store from './lib/Store';
 import CachedRequest from './lib/CachedRequest';
 import Request from './lib/Request';
+const { BrowserWindow } = remote;
 export default class PaymentStore extends Store {
  @observable plansRequest = new CachedRequest(this.api.payment, 'plans');
@@ -13,6 +16,7 @@ export default class PaymentStore extends Store {
    super(...args);
    this.actions.payment.createHostedPage.listen(this._createHostedPage.bind(this));
+    this.actions.payment.upgradeAccount.listen(this._upgradeAccount.bind(this));
  }
  @computed get plan() {
@@ -27,4 +31,38 @@ export default class PaymentStore extends Store {
    return request;
  }
+  @action _upgradeAccount({ planId, onCloseWindow = () => null }) {
+    let hostedPageURL = this.stores.features.features.subscribeURL;
+    const parsedUrl = new URL(hostedPageURL);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+    params.set('plan', planId);
+    hostedPageURL = this.stores.user.getAuthURL(`${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`);
+    const win = new BrowserWindow({
+      parent: remote.getCurrentWindow(),
+      modal: true,
+      title: '🔒 Upgrade Your Franz Account',
+      width: 800,
+      height: window.innerHeight - 100,
+      maxWidth: 800,
+      minWidth: 600,
+      autoHideMenuBar: true,
+      webPreferences: {
+        nodeIntegration: true,
+        webviewTag: true,
+      },
+    });
+    win.loadURL(`file://${__dirname}/../index.html#/payment/${encodeURIComponent(hostedPageURL)}`);
+    win.on('closed', () => {
+      this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+      this.stores.features.featuresRequest.invalidate({ immediately: true });
+      onCloseWindow();
+    });
+  }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 185a6f0ae..934a8a6e0 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -1,4 +1,4 @@
-import { shell } from 'electron';
+import { shell, remote } from 'electron';
 import {
  action,
  reaction,
@@ -23,6 +23,8 @@ import { KEEP_WS_LOADED_USID } from '../config';
 const debug = require('debug')('Ferdi:ServiceStore');
+const { app } = remote;
 export default class ServicesStore extends Store {
  @observable allServicesRequest = new CachedRequest(this.api.services, 'all');
@@ -818,7 +820,9 @@ export default class ServicesStore extends Store {
    if (service.webview) {
      debug('Initialize recipe', service.recipe.id, service.name);
-      service.webview.send('initialize-recipe', service.shareWithWebview, service.recipe);
+      service.webview.send('initialize-recipe', Object.assign({
+        franzVersion: app.getVersion(),
+      }, service.shareWithWebview), service.recipe);
    }
  }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 03aa79606..d6a2e5fde 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -78,6 +78,8 @@ export default class UserStore extends Store {
  @observable logoutReason = null;
+  fetchUserInfoInterval = null;
  constructor(...args) {
    super(...args);
@@ -162,7 +164,7 @@ export default class UserStore extends Store {
  }
  @computed get isPremiumOverride() {
-    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+    return ((!this.team || !this.team.plan) && this.isPremium) || (this.team && this.team.state === 'expired' && this.isPremium);
  }
  @computed get isPersonal() {
@@ -201,7 +203,7 @@ export default class UserStore extends Store {
  }
  @action async _signup({
-    firstname, lastname, email, password, accountType, company,
+    firstname, lastname, email, password, accountType, company, plan, currency,
  }) {
    const authToken = await this.signupRequest.execute({
      firstname,
@@ -211,6 +213,8 @@ export default class UserStore extends Store {
      accountType,
      company,
      locale: this.stores.app.locale,
+      plan,
+      currency,
    });
    this.hasCompletedSignup = true;
diff --git a/src/stores/index.js b/src/stores/index.js
index 10dd56665..4eeef7982 100644
--- a/src/stores/index.js
+++ b/src/stores/index.js
@@ -15,6 +15,7 @@ import { announcementsStore } from '../features/announcements';
 import { serviceLimitStore } from '../features/serviceLimit';
 import { communityRecipesStore } from '../features/communityRecipes';
 import { todosStore } from '../features/todos';
+import { planSelectionStore } from '../features/planSelection';
 export default (api, actions, router) => {
  const stores = {};
@@ -37,6 +38,7 @@ export default (api, actions, router) => {
    serviceLimit: serviceLimitStore,
    communityRecipes: communityRecipesStore,
    todos: todosStore,
+    planSelection: planSelectionStore,
  });
  // Initialize all stores
  Object.keys(stores).forEach((name) => {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 753288b8d..324175d0b 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -373,7 +373,7 @@
    .account__subscription-button { margin-left: auto; }
    .franz-form__button { white-space: nowrap; }
    div { height: auto; }
-    [data-type="franz-button"] div { height: 100% }
+    [data-type="franz-button"] div { height: 20px }
    .invoices {
      width: 100%;
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
index fb4795d6c..14e05e65d 100644
--- a/src/styles/subscription-popup.scss
+++ b/src/styles/subscription-popup.scss
@@ -2,7 +2,10 @@
  height: 100%;
  &__content { height: calc(100% - 60px); }
-  &__webview { height: 100%; }
+  &__webview {
+    height: 100%;
+    background: #FFF;
+  }
  &__toolbar {
    background: $theme-gray-lightest;
diff --git a/src/webview/lib/RecipeWebview.js b/src/webview/lib/RecipeWebview.js
index 877e45e35..74d05fc2d 100644
--- a/src/webview/lib/RecipeWebview.js
+++ b/src/webview/lib/RecipeWebview.js
@@ -1,7 +1,8 @@
-// @flow
 const { ipcRenderer } = require('electron');
 const fs = require('fs-extra');
+const debug = require('debug')('Franz:Plugin:RecipeWebview');
 class RecipeWebview {
  constructor() {
    this.countCache = {
@@ -11,6 +12,8 @@ class RecipeWebview {
    ipcRenderer.on('poll', () => {
      this.loopFunc();
+      debug('Poll event');
    });
  }
@@ -50,8 +53,11 @@ class RecipeWebview {
      indirect: indirectInt > 0 ? indirectInt : 0,
    };
    ipcRenderer.sendToHost('messages', count);
    Object.assign(this.countCache, count);
+    debug('Sending badge count to host', count);
  }
  /**
@@ -67,6 +73,8 @@ class RecipeWebview {
      styles.innerHTML = data.toString();
      document.querySelector('head').appendChild(styles);
+      debug('Append styles', styles);
    });
  }
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index ddfd0e139..2bf8f757a 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -242,7 +242,9 @@ window.open = (url, frameName, features) => {
    return ipcRenderer.sendToHost('new-window', url);
  }
-  return originalWindowOpen(url, frameName, features);
+  if (url) {
+    return originalWindowOpen(url, frameName, features);
+  }
 };
 if (isDevMode) {
author	vantezzen <hello@vantezzen.io>	2019-10-24 15:15:42 +0200
committer	vantezzen <hello@vantezzen.io>	2019-10-24 15:15:42 +0200
commit	54f8b191a94bd78a85b046bbf21dd2245d3a6f3e (patch)
tree	ada5876f0e8a697ba4693bba07f5e0f31fea1fc9 /src
parent	Update submodules (diff)
parent	bump version to 5.4.0 (diff)
download	ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.gz ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.tar.zst ferdium-app-54f8b191a94bd78a85b046bbf21dd2245d3a6f3e.zip