From fbff4ed90b0137088b1bb92e95f32fc1bfa7bb3e Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 2 May 2019 11:27:23 +0200
Subject: Add custom recipe limitation

---
 src/containers/settings/RecipesScreen.js | 40 ++++++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

(limited to 'src/containers')

diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index eda5ae54c..57e879f42 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -1,7 +1,9 @@
+import { remote, shell } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { autorun } from 'mobx';
 import { inject, observer } from 'mobx-react';
+import path from 'path';
 
 import RecipePreviewsStore from '../../stores/RecipePreviewsStore';
 import RecipeStore from '../../stores/RecipesStore';
@@ -10,6 +12,11 @@ import UserStore from '../../stores/UserStore';
 
 import RecipesDashboard from '../../components/settings/recipes/RecipesDashboard';
 import ErrorBoundary from '../../components/util/ErrorBoundary';
+import { FRANZ_DEV_DOCS } from '../../config';
+import { gaEvent } from '../../lib/analytics';
+import { communityRecipesStore } from '../../features/communityRecipes';
+
+const { app } = remote;
 
 export default @inject('stores', 'actions') @observer class RecipesScreen extends Component {
   static propTypes = {
@@ -67,9 +74,16 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
 
   render() {
     const {
-      recipePreviews, recipes, services, user,
+      recipePreviews,
+      recipes,
+      services,
+      user,
     } = this.props.stores;
-    const { showAddServiceInterface } = this.props.actions.service;
+
+    const {
+      app: appActions,
+      service: serviceActions,
+    } = this.props.actions;
 
     const { filter } = this.props.params;
     let recipeFilter;
@@ -77,7 +91,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
     if (filter === 'all') {
       recipeFilter = recipePreviews.all;
     } else if (filter === 'dev') {
-      recipeFilter = recipePreviews.dev;
+      recipeFilter = communityRecipesStore.communityRecipes;
     } else {
       recipeFilter = recipePreviews.featured;
     }
@@ -89,6 +103,8 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
       || recipes.installRecipeRequest.isExecuting
       || recipePreviews.searchRecipePreviewsRequest.isExecuting;
 
+    const recipeDirectory = path.join(app.getPath('userData'), 'recipes', 'dev');
+
     return (
       <ErrorBoundary>
         <RecipesDashboard
@@ -97,12 +113,23 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
           addedServiceCount={services.all.length}
           isPremium={user.data.isPremium}
           hasLoadedRecipes={recipePreviews.featuredRecipePreviewsRequest.wasExecuted}
-          showAddServiceInterface={showAddServiceInterface}
+          showAddServiceInterface={serviceActions.showAddServiceInterface}
           searchRecipes={e => this.searchRecipes(e)}
           resetSearch={() => this.resetSearch()}
           searchNeedle={this.state.needle}
           serviceStatus={services.actionStatus}
-          devRecipesCount={recipePreviews.dev.length}
+          recipeFilter={filter}
+          recipeDirectory={recipeDirectory}
+          openRecipeDirectory={() => {
+            shell.openItem(recipeDirectory);
+            gaEvent('Recipe', 'open-recipe-folder', 'Open Folder');
+          }}
+          openDevDocs={() => {
+            appActions.openExternalUrl({ url: FRANZ_DEV_DOCS });
+            gaEvent('Recipe', 'open-dev-docs', 'Developer Documentation');
+          }}
+          isCommunityRecipesPremiumFeature={communityRecipesStore.isCommunityRecipesPremiumFeature}
+          isUserPremiumUser={user.isPremium}
         />
       </ErrorBoundary>
     );
@@ -117,6 +144,9 @@ RecipesScreen.wrappedComponent.propTypes = {
     user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
     service: PropTypes.shape({
       showAddServiceInterface: PropTypes.func.isRequired,
     }).isRequired,
-- 
cgit v1.2.3-70-g09d2


From 2887eee3935e75640fc45111a904e78496dab62e Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 17 Jun 2019 16:52:46 +0200
Subject: Rename feature flags

---
 src/components/settings/recipes/RecipesDashboard.js  |  8 ++++----
 src/components/settings/services/EditServiceForm.js  | 12 ++++++------
 src/components/settings/settings/EditSettingsForm.js |  8 +++++---
 src/config.js                                        |  6 +++---
 src/containers/settings/EditServiceScreen.js         |  4 ++--
 src/containers/settings/EditSettingsScreen.js        |  6 +++---
 src/containers/settings/RecipesScreen.js             |  2 +-
 src/features/communityRecipes/index.js               |  4 ++--
 src/features/communityRecipes/store.js               |  2 +-
 src/features/serviceProxy/index.js                   |  8 ++++----
 src/features/spellchecker/index.js                   |  8 ++++----
 src/features/workspaces/store.js                     |  6 +++---
 src/stores/ServicesStore.js                          |  4 ++--
 13 files changed, 40 insertions(+), 38 deletions(-)

(limited to 'src/containers')

diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index ed4a429db..75e60b7ec 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -118,7 +118,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
     openRecipeDirectory: PropTypes.func.isRequired,
     openDevDocs: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
-    isCommunityRecipesPremiumFeature: PropTypes.bool.isRequired,
+    isCommunityRecipesIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -145,7 +145,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
       openRecipeDirectory,
       openDevDocs,
       classes,
-      isCommunityRecipesPremiumFeature,
+      isCommunityRecipesIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -218,7 +218,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 <>
                   <H2>
                     {intl.formatMessage(messages.headlineCustomRecipes)}
-                    {isCommunityRecipesPremiumFeature && (
+                    {isCommunityRecipesIncludedInCurrentPlan && (
                       <ProBadge className={classes.proBadge} />
                     )}
                   </H2>
@@ -247,7 +247,7 @@ export default @injectSheet(styles) @observer class RecipesDashboard extends Com
                 </>
               )}
               <PremiumFeatureContainer
-                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesPremiumFeature}
+                condition={(recipeFilter === 'dev' && communityRecipes.length > 0) && isCommunityRecipesIncludedInCurrentPlan}
               >
                 {recipeFilter === 'dev' && communityRecipes.length > 0 && (
                   <H3>{intl.formatMessage(messages.headlineCommunityRecipes)}</H3>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index c089a1582..5cde0db8e 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -130,8 +130,8 @@ export default @observer class EditServiceForm extends Component {
     isSaving: PropTypes.bool.isRequired,
     isDeleting: PropTypes.bool.isRequired,
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
-    isProxyPremiumFeature: PropTypes.bool.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -194,8 +194,8 @@ export default @observer class EditServiceForm extends Component {
       isDeleting,
       onDelete,
       isProxyFeatureEnabled,
-      isProxyPremiumFeature,
-      isSpellcheckerPremiumFeature,
+      isServiceProxyIncludedInCurrentPlan,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -345,7 +345,7 @@ export default @observer class EditServiceForm extends Component {
             </div>
 
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <div className="settings__settings-group">
@@ -355,7 +355,7 @@ export default @observer class EditServiceForm extends Component {
 
             {isProxyFeatureEnabled && (
               <PremiumFeatureContainer
-                condition={isProxyPremiumFeature}
+                condition={!isServiceProxyIncludedInCurrentPlan}
                 gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
               >
                 <div className="settings__settings-group">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index efd453356..6d0811b1b 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -100,7 +100,7 @@ export default @observer class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
-    isSpellcheckerPremiumFeature: PropTypes.bool.isRequired,
+    isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -130,7 +130,7 @@ export default @observer class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       cacheSize,
-      isSpellcheckerPremiumFeature,
+      isSpellcheckerIncludedInCurrentPlan,
     } = this.props;
     const { intl } = this.context;
 
@@ -143,6 +143,8 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
+    console.log('isSpellcheckerIncludedInCurrentPlan', isSpellcheckerIncludedInCurrentPlan);
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -173,7 +175,7 @@ export default @observer class EditSettingsForm extends Component {
             <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
-              condition={isSpellcheckerPremiumFeature}
+              condition={!isSpellcheckerIncludedInCurrentPlan}
               gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
diff --git a/src/config.js b/src/config.js
index 544f94fde..3c8b0f0d0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -45,16 +45,16 @@ export const DEFAULT_APP_SETTINGS = {
 };
 
 export const DEFAULT_FEATURES_CONFIG = {
-  isSpellcheckerPremiumFeature: false,
+  isSpellcheckerIncludedInCurrentPlan: true,
   needToWaitToProceed: false,
   needToWaitToProceedConfig: {
     delayOffset: ms('1h'),
     wait: ms('10s'),
   },
   isServiceProxyEnabled: false,
-  isServiceProxyPremiumFeature: true,
+  isServiceProxyIncludedInCurrentPlan: false,
   isAnnouncementsEnabled: true,
-  isWorkspacePremiumFeature: true,
+  isWorkspaceIncludedInCurrentPlan: true,
   isWorkspaceEnabled: false,
 };
 
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index 870ca4ecd..e4ff03bb3 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -330,8 +330,8 @@ export default @inject('stores', 'actions') @observer class EditServiceScreen ex
           onSubmit={d => this.onSubmit(d)}
           onDelete={() => this.deleteService()}
           isProxyFeatureEnabled={proxyFeature.isEnabled}
-          isProxyPremiumFeature={proxyFeature.isPremium}
-          isSpellcheckerPremiumFeature={spellcheckerFeature.isPremium}
+          isServiceProxyIncludedInCurrentPlan={proxyFeature.isIncludedInCurrentPlan}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerFeature.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 97c1fa3b1..67d52f102 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -159,8 +159,8 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         },
         enableSpellchecking: {
           label: intl.formatMessage(messages.enableSpellchecking),
-          value: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : settings.all.app.enableSpellchecking,
-          default: !this.props.stores.user.data.isPremium && spellcheckerConfig.isPremium ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
+          value: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : settings.all.app.enableSpellchecking,
+          default: !this.props.stores.user.data.isPremium && !spellcheckerConfig.isIncludedInCurrentPlan ? false : DEFAULT_APP_SETTINGS.enableSpellchecking,
         },
         spellcheckerLanguage: {
           label: intl.formatMessage(globalMessages.spellcheckerLanguage),
@@ -223,7 +223,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           cacheSize={cacheSize}
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
-          isSpellcheckerPremiumFeature={spellcheckerConfig.isPremium}
+          isSpellcheckerIncludedInCurrentPlan={spellcheckerConfig.isIncludedInCurrentPlan}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/settings/RecipesScreen.js b/src/containers/settings/RecipesScreen.js
index 57e879f42..132820b6f 100644
--- a/src/containers/settings/RecipesScreen.js
+++ b/src/containers/settings/RecipesScreen.js
@@ -128,7 +128,7 @@ export default @inject('stores', 'actions') @observer class RecipesScreen extend
             appActions.openExternalUrl({ url: FRANZ_DEV_DOCS });
             gaEvent('Recipe', 'open-dev-docs', 'Developer Documentation');
           }}
-          isCommunityRecipesPremiumFeature={communityRecipesStore.isCommunityRecipesPremiumFeature}
+          isCommunityRecipesIncludedInCurrentPlan={communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan}
           isUserPremiumUser={user.isPremium}
         />
       </ErrorBoundary>
diff --git a/src/features/communityRecipes/index.js b/src/features/communityRecipes/index.js
index 78e87855e..4d050f90e 100644
--- a/src/features/communityRecipes/index.js
+++ b/src/features/communityRecipes/index.js
@@ -15,11 +15,11 @@ export default function initCommunityRecipes(stores, actions) {
   // Toggle communityRecipe premium status
   reaction(
     () => (
-      features.features.isCommunityRecipesPremiumFeature
+      features.features.isCommunityRecipesIncludedInCurrentPlan
     ),
     (isPremiumFeature) => {
       debug('Community recipes is premium feature: ', isPremiumFeature);
-      communityRecipesStore.isCommunityRecipesPremiumFeature = isPremiumFeature;
+      communityRecipesStore.isCommunityRecipesIncludedInCurrentPlan = isPremiumFeature;
     },
     {
       fireImmediately: true,
diff --git a/src/features/communityRecipes/store.js b/src/features/communityRecipes/store.js
index 165b753e8..4d45c3b33 100644
--- a/src/features/communityRecipes/store.js
+++ b/src/features/communityRecipes/store.js
@@ -4,7 +4,7 @@ import { FeatureStore } from '../utils/FeatureStore';
 const debug = require('debug')('Franz:feature:communityRecipes:store');
 
 export class CommunityRecipesStore extends FeatureStore {
-  @observable isCommunityRecipesPremiumFeature = false;
+  @observable isCommunityRecipesIncludedInCurrentPlan = false;
 
   start(stores, actions) {
     debug('start');
diff --git a/src/features/serviceProxy/index.js b/src/features/serviceProxy/index.js
index 4bea327ad..55c600de4 100644
--- a/src/features/serviceProxy/index.js
+++ b/src/features/serviceProxy/index.js
@@ -9,17 +9,17 @@ const debug = require('debug')('Franz:feature:serviceProxy');
 
 export const config = observable({
   isEnabled: DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled,
-  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature,
+  isPremium: DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `serviceProxy` feature');
 
   autorun(() => {
-    const { isServiceProxyEnabled, isServiceProxyPremiumFeature } = stores.features.features;
+    const { isServiceProxyEnabled, isServiceProxyIncludedInCurrentPlan } = stores.features.features;
 
     config.isEnabled = isServiceProxyEnabled !== undefined ? isServiceProxyEnabled : DEFAULT_FEATURES_CONFIG.isServiceProxyEnabled;
-    config.isPremium = isServiceProxyPremiumFeature !== undefined ? isServiceProxyPremiumFeature : DEFAULT_FEATURES_CONFIG.isServiceProxyPremiumFeature;
+    config.isIncludedInCurrentPlan = isServiceProxyIncludedInCurrentPlan !== undefined ? isServiceProxyIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isServiceProxyIncludedInCurrentPlan;
 
     const services = stores.services.enabled;
     const isPremiumUser = stores.user.data.isPremium;
@@ -30,7 +30,7 @@ export default function init(stores) {
     services.forEach((service) => {
       const s = session.fromPartition(`persist:service-${service.id}`);
 
-      if (config.isEnabled && (isPremiumUser || !config.isPremium)) {
+      if (config.isEnabled && (isPremiumUser || !config.isIncludedInCurrentPlan)) {
         const serviceProxyConfig = proxySettings[service.id];
 
         if (serviceProxyConfig && serviceProxyConfig.isEnabled && serviceProxyConfig.host) {
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index 79a2172b4..a07f9f63a 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -5,18 +5,18 @@ import { DEFAULT_FEATURES_CONFIG } from '../../config';
 const debug = require('debug')('Franz:feature:spellchecker');
 
 export const config = observable({
-  isPremium: DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature,
+  isIncludedInCurrentPlan: DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan,
 });
 
 export default function init(stores) {
   debug('Initializing `spellchecker` feature');
 
   autorun(() => {
-    const { isSpellcheckerPremiumFeature } = stores.features.features;
+    const { isSpellcheckerIncludedInCurrentPlan } = stores.features.features;
 
-    config.isPremium = isSpellcheckerPremiumFeature !== undefined ? isSpellcheckerPremiumFeature : DEFAULT_FEATURES_CONFIG.isSpellcheckerPremiumFeature;
+    config.isIncludedInCurrentPlan = isSpellcheckerIncludedInCurrentPlan !== undefined ? isSpellcheckerIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan;
 
-    if (!stores.user.data.isPremium && config.isPremium && stores.settings.app.enableSpellchecking) {
+    if (!stores.user.data.isPremium && config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index 07b16ff23..e1adc9cab 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -251,9 +251,9 @@ export default class WorkspacesStore extends FeatureStore {
   _setIsPremiumFeatureReaction = () => {
     const { features, user } = this.stores;
     const { isPremium } = user.data;
-    const { isWorkspacePremiumFeature } = features.features;
-    this.isPremiumFeature = isWorkspacePremiumFeature;
-    this.isPremiumUpgradeRequired = isWorkspacePremiumFeature && !isPremium;
+    const { isWorkspaceIncludedInCurrentPlan } = features.features;
+    this.isPremiumFeature = isWorkspaceIncludedInCurrentPlan;
+    this.isPremiumUpgradeRequired = isWorkspaceIncludedInCurrentPlan && !isPremium;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 4cffea110..513295b5e 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -701,10 +701,10 @@ export default class ServicesStore extends Store {
       }
 
       if (service.isUsingCustomUrl) {
-        service.isServiceAccessRestricted = features.isCustomUrlPremiumFeature;
+        service.isServiceAccessRestricted = features.isCustomUrlIncludedInCurrentPlan;
         service.restrictionType = RESTRICTION_TYPES.CUSTOM_URL;
 
-        if (features.isCustomUrlPremiumFeature) {
+        if (features.isCustomUrlIncludedInCurrentPlan) {
           debug('Restricting access to server due to custom url');
         }
       }
-- 
cgit v1.2.3-70-g09d2


From 268db27162e8d2cd0252b1be9bf69006cf6323ca Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 4 Jul 2019 15:54:27 +0200
Subject: Add trial onboarding during signup

---
 package-lock.json                                  |  15 +-
 package.json                                       |   1 +
 packages/theme/src/themes/dark/index.ts            |  10 +
 packages/theme/src/themes/default/index.ts         |  10 +
 src/actions/user.js                                |   3 +
 src/api/UserApi.js                                 |   4 +
 src/api/server/ServerApi.js                        |  18 +-
 src/components/auth/Pricing.js                     | 246 +++++++++++++--------
 src/components/services/content/Services.js        |  80 +++++--
 src/components/ui/FeatureItem.js                   |  36 +++
 src/components/ui/FeatureList.js                   |  89 ++++++++
 src/containers/auth/PricingScreen.js               |  40 +++-
 src/containers/layout/AppLayoutContainer.js        |   4 +
 src/i18n/messages/src/components/auth/Pricing.json | 101 +++++++--
 .../src/components/services/content/Services.json  |   8 +-
 .../messages/src/components/ui/FeatureList.json    | 132 +++++++++++
 src/stores/UserStore.js                            |  19 +-
 src/styles/auth.scss                               |   2 +-
 src/styles/reset.scss                              |   1 -
 19 files changed, 671 insertions(+), 148 deletions(-)
 create mode 100644 src/components/ui/FeatureItem.js
 create mode 100644 src/components/ui/FeatureList.js
 create mode 100644 src/i18n/messages/src/components/ui/FeatureList.json

(limited to 'src/containers')

diff --git a/package-lock.json b/package-lock.json
index b4d86c5e1..13646552b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "franz",
-  "version": "5.2.0-beta.3",
+  "version": "5.2.0-beta.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -16748,6 +16748,14 @@
         "react-transition-group": "^1.2.0"
       }
     },
+    "react-confetti": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-3.1.0.tgz",
+      "integrity": "sha512-T1DKt09C9rrf2BJ0OxFu8saPohFalOJfOgci11/ePz6DxbY+0cd/3CMimxj/ZITl7jQWnmC/bNWBgGheke3WZQ==",
+      "requires": {
+        "tween-functions": "^1.2.0"
+      }
+    },
     "react-dom": {
       "version": "16.6.3",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.6.3.tgz",
@@ -19899,6 +19907,11 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "tween-functions": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/tween-functions/-/tween-functions-1.2.0.tgz",
+      "integrity": "sha1-GuOlDnxguz3vd06scHrLynO7w/8="
+    },
     "tweetnacl": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
diff --git a/package.json b/package.json
index 7bf1f8a4a..98c7f547f 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,7 @@
     "prop-types": "^15.5.10",
     "react": "16.6.3",
     "react-addons-css-transition-group": "15.6.2",
+    "react-confetti": "3.1.0",
     "react-dom": "16.6.3",
     "react-dropzone": "7.0.1",
     "react-electron-web-view": "^2.0.1",
diff --git a/packages/theme/src/themes/dark/index.ts b/packages/theme/src/themes/dark/index.ts
index bd9f001e8..1ea46cd1a 100644
--- a/packages/theme/src/themes/dark/index.ts
+++ b/packages/theme/src/themes/dark/index.ts
@@ -118,3 +118,13 @@ export const announcements = merge({}, defaultStyles.announcements, {
     background: legacyStyles.darkThemeGrayDark,
   },
 });
+
+// Signup
+export const signup = merge({}, defaultStyles.signup, {
+  pricing: {
+    feature: {
+      background: legacyStyles.darkThemeGrayLight,
+      border: color(legacyStyles.darkThemeGrayLight).lighten(0.2).hex(),
+    },
+  },
+});
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 0f02fa3c8..0d99bc4be 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -207,3 +207,13 @@ export const announcements = {
     background: legacyStyles.themeGrayLightest,
   },
 };
+
+// Signup
+export const signup = {
+  pricing: {
+    feature: {
+      background: legacyStyles.themeGrayLightest,
+      border: legacyStyles.themeGrayLighter,
+    },
+  },
+};
diff --git a/src/actions/user.js b/src/actions/user.js
index ccf1fa56a..5d7d9a899 100644
--- a/src/actions/user.js
+++ b/src/actions/user.js
@@ -17,6 +17,9 @@ export default {
   retrievePassword: {
     email: PropTypes.string.isRequired,
   },
+  activateTrial: {
+    planId: PropTypes.string.isRequired,
+  },
   invite: {
     invites: PropTypes.array.isRequired,
   },
diff --git a/src/api/UserApi.js b/src/api/UserApi.js
index edfb88988..8ba8cd1e9 100644
--- a/src/api/UserApi.js
+++ b/src/api/UserApi.js
@@ -25,6 +25,10 @@ export default class UserApi {
     return this.server.retrievePassword(email);
   }
 
+  activateTrial(data) {
+    return this.server.activateTrial(data);
+  }
+
   invite(data) {
     return this.server.inviteUser(data);
   }
diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index a9ce202ff..f2568d597 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -77,6 +77,22 @@ export default class ServerApi {
     return u.token;
   }
 
+  async activateTrial(data) {
+    const request = await sendAuthRequest(`${API_URL}/payment/trial`, {
+      method: 'POST',
+      body: JSON.stringify(data),
+    });
+    if (!request.ok) {
+      throw request;
+    }
+    const trial = await request.json();
+
+    console.log(trial);
+
+    debug('ServerApi::signup resolves', trial);
+    return true;
+  }
+
   async inviteUser(data) {
     const request = await sendAuthRequest(`${API_URL}/invite`, {
       method: 'POST',
@@ -469,7 +485,7 @@ export default class ServerApi {
         return services;
       }
     } catch (err) {
-      throw (new Error('ServerApi::getLegacyServices no config found'));
+      console.error('ServerApi::getLegacyServices no config found');
     }
 
     return [];
diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 7ab14f429..d20779025 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -1,40 +1,107 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
-// import { Link } from 'react-router';
+import injectSheet from 'react-jss';
+import { H2, Loader } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureItem } from '../ui/FeatureItem';
+import FeatureList from '../ui/FeatureList';
 
-// import Button from '../ui/Button';
-import Loader from '../ui/Loader';
-import Appear from '../ui/effects/Appear';
-import SubscriptionForm from '../../containers/subscription/SubscriptionFormScreen';
 
 const messages = defineMessages({
   headline: {
-    id: 'pricing.headline',
-    defaultMessage: '!!!Support Franz',
+    id: 'pricing.trial.headline',
+    defaultMessage: '!!!Franz Professional',
+  },
+  personalOffer: {
+    id: 'pricing.trial.subheadline',
+    defaultMessage: '!!!Your personal welcome offer:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  monthlySupportLabel: {
-    id: 'pricing.support.label',
-    defaultMessage: '!!!Select your support plan',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  submitButtonLabel: {
-    id: 'pricing.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
+  activationError: {
+    id: 'pricing.trial.error',
+    defaultMessage: '!!!Sorry, we could not activate your trial!',
   },
-  skipPayment: {
-    id: 'pricing.link.skipPayment',
-    defaultMessage: '!!!I don\'t want to support the development of Franz.',
+  ctaAccept: {
+    id: 'pricing.trial.cta.accept',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+  },
+  ctaSkip: {
+    id: 'pricing.trial.cta.skip',
+    defaultMessage: '!!!Continue to Franz',
+  },
+  featuresHeadline: {
+    id: 'pricing.trial.features.headline',
+    defaultMessage: '!!!Franz Professional includes:',
   },
 });
 
-export default @observer class Signup extends Component {
+const styles = theme => ({
+  container: {
+    position: 'relative',
+    marginLeft: -150,
+  },
+  welcomeOffer: {
+    textAlign: 'center',
+    fontWeight: 'bold',
+  },
+  keyTerms: {
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    zIndex: 20,
+  },
+  featureContainer: {
+    width: 300,
+    position: 'absolute',
+    left: 'calc(100% / 2 + 225px)',
+    top: 155,
+    background: theme.signup.pricing.feature.background,
+    height: 'auto',
+    padding: 20,
+    borderTopRightRadius: theme.borderRadius,
+    borderBottomRightRadius: theme.borderRadius,
+    zIndex: 10,
+  },
+  featureItem: {
+    borderBottom: [1, 'solid', theme.signup.pricing.feature.border],
+  },
+  cta: {
+    marginTop: 40,
+    width: '100%',
+  },
+  skipLink: {
+    textAlign: 'center',
+    marginTop: 10,
+  },
+  error: {
+    margin: [20, 0, 0],
+    color: theme.styleTypes.danger.accent,
+  },
+});
+
+export default @observer @injectSheet(styles) class Signup extends Component {
   static propTypes = {
-    donor: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    isLoadingUser: PropTypes.bool.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
-    skipAction: PropTypes.func.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isLoadingRequiredData: PropTypes.bool.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    trialActivationError: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
@@ -43,70 +110,37 @@ export default @observer class Signup extends Component {
 
   render() {
     const {
-      donor,
-      isLoading,
-      isLoadingUser,
-      onCloseSubscriptionWindow,
-      skipAction,
+      onSubmit,
+      isLoadingRequiredData,
+      isActivatingTrial,
+      trialActivationError,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
     return (
-      <div className="auth__scroll-container">
-        <div className="auth__container auth__container--signup">
+      <div className={classnames('auth__scroll-container', classes.container)}>
+        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
           <form className="franz-form auth__form">
-            <img
-              src="./assets/images/sm.png"
-              className="auth__logo auth__logo--sm"
-              alt=""
-            />
+            {isLoadingRequiredData ? <Loader /> : (
+              <img
+                src="./assets/images/sm.png"
+                className="auth__logo auth__logo--sm"
+                alt=""
+              />
+            )}
+            <p className={classes.welcomeOffer}>{intl.formatMessage(messages.personalOffer)}</p>
             <h1>{intl.formatMessage(messages.headline)}</h1>
             <div className="auth__letter">
-              {isLoadingUser && (
-                <p>Loading</p>
-              )}
-              {!isLoadingUser && (
-                donor.amount ? (
-                  <span>
-                    <p>
-                      Thank you so much for your previous donation of
-                      {' '}
-                      <strong>
-                        $
-                        {donor.amount}
-                      </strong>
-                      .
-                      <br />
-                      Your support allowed us to get where we are today.
-                      <br />
-                    </p>
-                    <p>
-                      As an early supporter, you get
-                      {' '}
-                      <strong>a lifetime premium supporter license</strong>
-                      {' '}
-                      without any
-                      additional charges.
-                    </p>
-                    <p>
-                      However, If you want to keep supporting us, you are more than welcome to subscribe to a plan.
-                      <br />
-                      <br />
-                    </p>
-                  </span>
-                ) : (
-                  <span>
-                    <p>
-                      We built Franz with a lot of effort, manpower and love,
-                      to bring you the best messaging experience.
-                      <br />
-                    </p>
-                    <p>
-                      Getting a Franz Premium Supporter License will allow us to keep improving Franz for you.
-                    </p>
-                  </span>
-                )
-              )}
+              <p>
+                We built Franz with a lot of effort, manpower and love,
+                to boost up your messaging experience.
+                <br />
+              </p>
+              <p>
+                Get the free 14 day Franz Professional trial and see your communication evolving.
+                <br />
+              </p>
               <p>
                 Thanks for being a hero.
               </p>
@@ -114,20 +148,48 @@ export default @observer class Signup extends Component {
                 <strong>Stefan Malzner</strong>
               </p>
             </div>
-            <Loader loaded={!isLoading}>
-              <Appear transitionName="slideDown">
-                <span className="label">{intl.formatMessage(messages.monthlySupportLabel)}</span>
-                <SubscriptionForm
-                  onCloseWindow={onCloseSubscriptionWindow}
-                  showSkipOption
-                  skipAction={skipAction}
-                  hideInfo={Boolean(donor.amount)}
-                  skipButtonLabel={intl.formatMessage(messages.skipPayment)}
-                />
-              </Appear>
-            </Loader>
+            <div className={classes.keyTerms}>
+              <H2>
+                {intl.formatMessage(messages.noStringsAttachedHeadline)}
+              </H2>
+              <ul className={classes.keyTermsList}>
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+                <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+              </ul>
+            </div>
+            {trialActivationError && (
+              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            )}
+            <Button
+              label={intl.formatMessage(messages.ctaAccept)}
+              className={classes.cta}
+              onClick={onSubmit}
+              busy={isActivatingTrial}
+              disabled={isLoadingRequiredData || isActivatingTrial}
+            />
+            <p className={classes.skipLink}>
+              <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/services/content/Services.js b/src/components/services/content/Services.js
index 48de0ebaa..7f1624003 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -18,7 +21,16 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 0,
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -28,6 +40,8 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -38,6 +52,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -48,29 +74,47 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
 
     return (
       <div className="services">
         {services.length === 0 && (
-          <Appear
-            timeout={1500}
-            transitionName="slideUp"
-          >
-            <div className="services__no-service">
-              <img src="./assets/images/logo.svg" alt="" />
-              <h1>{intl.formatMessage(messages.welcome)}</h1>
-              <Appear
-                timeout={300}
-                transitionName="slideUp"
-              >
-                <Link to="/settings/recipes" className="button">
-                  {intl.formatMessage(messages.getStarted)}
-                </Link>
-              </Appear>
-            </div>
-          </Appear>
+          <>
+            {userHasCompletedSignup && (
+              <div className={classes.confettiContainer}>
+                <Confetti
+                  width={window.width}
+                  height={window.height}
+                  numberOfPieces={showConfetti ? 200 : 0}
+                />
+              </div>
+            )}
+            <Appear
+              timeout={1500}
+              transitionName="slideUp"
+            >
+              <div className="services__no-service">
+                <img src="./assets/images/logo.svg" alt="" />
+                <h1>{intl.formatMessage(messages.welcome)}</h1>
+                <Appear
+                  timeout={300}
+                  transitionName="slideUp"
+                >
+                  <Link to="/settings/recipes" className="button">
+                    {intl.formatMessage(messages.getStarted)}
+                  </Link>
+                </Appear>
+              </div>
+            </Appear>
+          </>
         )}
         {services.map(service => (
           <ServiceView
diff --git a/src/components/ui/FeatureItem.js b/src/components/ui/FeatureItem.js
new file mode 100644
index 000000000..a63f5f7b5
--- /dev/null
+++ b/src/components/ui/FeatureItem.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  featureItem: {
+    borderBottom: [1, 'solid', theme.legacyStyles.themeGrayDark],
+    padding: [8, 0],
+    display: 'flex',
+    alignItems: 'center',
+  },
+  featureIcon: {
+    fill: theme.brandSuccess,
+    marginRight: 10,
+  },
+});
+
+export const FeatureItem = injectSheet(styles)(({
+  classes, className, name, icon,
+}) => (
+  <li className={classnames({
+    [classes.featureItem]: true,
+    [className]: className,
+  })}
+  >
+    {icon ? (
+      <span className={classes.featureIcon}>{icon}</span>
+    ) : (
+      <Icon icon="mdiCheckCircle" className={classes.featureIcon} size={1.5} />
+    )}
+    {name}
+  </li>
+));
+
+export default FeatureItem;
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
new file mode 100644
index 000000000..62944ad75
--- /dev/null
+++ b/src/components/ui/FeatureList.js
@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { FeatureItem } from './FeatureItem';
+
+const messages = defineMessages({
+  unlimitedServices: {
+    id: 'pricing.features.unlimitedServices',
+    defaultMessage: '!!!Add unlimited services',
+  },
+  spellchecker: {
+    id: 'pricing.features.spellchecker',
+    defaultMessage: '!!!Spellchecker support',
+  },
+  workspaces: {
+    id: 'pricing.features.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  customWebsites: {
+    id: 'pricing.features.customWebsites',
+    defaultMessage: '!!!Add Custom Websites',
+  },
+  onPremise: {
+    id: 'pricing.features.onPremise',
+    defaultMessage: '!!!On-premise & other Hosted Services',
+  },
+  thirdPartyServices: {
+    id: 'pricing.features.thirdPartyServices',
+    defaultMessage: '!!!Install 3rd party services',
+  },
+  serviceProxies: {
+    id: 'pricing.features.serviceProxies',
+    defaultMessage: '!!!Service Proxies',
+  },
+  teamManagement: {
+    id: 'pricing.features.teamManagement',
+    defaultMessage: '!!!Team Management',
+  },
+  appDelays: {
+    id: 'pricing.features.appDelays',
+    defaultMessage: '!!!No Waiting Screens',
+  },
+  adFree: {
+    id: 'pricing.features.adFree',
+    defaultMessage: '!!!Forever ad-free',
+  },
+});
+
+export class FeatureList extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    featureClassName: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+    featureClassName: '',
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      className,
+      featureClassName,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <ul className={className}>
+        <FeatureItem name={intl.formatMessage(messages.unlimitedServices)} 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>
+    );
+  }
+}
+
+export default FeatureList;
diff --git a/src/containers/auth/PricingScreen.js b/src/containers/auth/PricingScreen.js
index 8d179a170..af1651931 100644
--- a/src/containers/auth/PricingScreen.js
+++ b/src/containers/auth/PricingScreen.js
@@ -5,7 +5,6 @@ import { RouterStore } from 'mobx-react-router';
 
 import Pricing from '../../components/auth/Pricing';
 import UserStore from '../../stores/UserStore';
-import PaymentStore from '../../stores/PaymentStore';
 
 import { globalError as globalErrorPropType } from '../../prop-types';
 
@@ -14,20 +13,40 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
     error: globalErrorPropType.isRequired,
   };
 
+  async submit() {
+    const {
+      actions,
+      stores,
+    } = this.props;
+
+    const { activateTrialRequest } = stores.user;
+    const { defaultTrialPlan } = stores.features.features;
+
+    actions.user.activateTrial({ planId: defaultTrialPlan });
+    await activateTrialRequest._promise;
+
+    if (!activateTrialRequest.isError) {
+      stores.router.push('/');
+      stores.user.hasCompletedSignup = true;
+    }
+  }
+
   render() {
-    const { actions, stores, error } = this.props;
+    const {
+      error,
+      stores,
+    } = this.props;
 
-    const nextStepRoute = stores.user.legacyServices.length ? stores.user.importRoute : stores.user.inviteRoute;
+    const { getUserInfoRequest, activateTrialRequest } = stores.user;
+    const { featuresRequest } = stores.features;
 
     return (
       <Pricing
-        donor={stores.user.data.donor || {}}
-        onSubmit={actions.user.signup}
-        onCloseSubscriptionWindow={() => this.props.stores.router.push(nextStepRoute)}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        isLoadingUser={stores.user.getUserInfoRequest.isExecuting}
+        onSubmit={this.submit.bind(this)}
+        isLoadingRequiredData={(getUserInfoRequest.isExecuting || !getUserInfoRequest.wasExecuted) || (featuresRequest.isExecuting || !featuresRequest.wasExecuted)}
+        isActivatingTrial={activateTrialRequest.isExecuting}
+        trialActivationError={activateTrialRequest.isError}
         error={error}
-        skipAction={() => this.props.stores.router.push(nextStepRoute)}
       />
     );
   }
@@ -36,12 +55,11 @@ export default @inject('stores', 'actions') @observer class PricingScreen extend
 PricingScreen.wrappedComponent.propTypes = {
   actions: PropTypes.shape({
     user: PropTypes.shape({
-      signup: PropTypes.func.isRequired,
+      activateTrial: PropTypes.func.isRequired,
     }).isRequired,
   }).isRequired,
   stores: PropTypes.shape({
     user: PropTypes.instanceOf(UserStore).isRequired,
-    payment: PropTypes.instanceOf(PaymentStore).isRequired,
     router: PropTypes.instanceOf(RouterStore).isRequired,
   }).isRequired,
 };
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index cf3da71e8..b4e32cffa 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -10,6 +10,7 @@ import FeaturesStore from '../../stores/FeaturesStore';
 import UIStore from '../../stores/UIStore';
 import NewsStore from '../../stores/NewsStore';
 import SettingsStore from '../../stores/SettingsStore';
+import UserStore from '../../stores/UserStore';
 import RequestStore from '../../stores/RequestStore';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
 
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       settings,
       globalError,
       requests,
+      user,
     } = this.props.stores;
 
     const {
@@ -125,6 +127,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         reload={reload}
         openSettings={openSettings}
         update={updateService}
+        userHasCompletedSignup={user.hasCompletedSignup}
       />
     );
 
@@ -166,6 +169,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     ui: PropTypes.instanceOf(UIStore).isRequired,
     news: PropTypes.instanceOf(NewsStore).isRequired,
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
   }).isRequired,
diff --git a/src/i18n/messages/src/components/auth/Pricing.json b/src/i18n/messages/src/components/auth/Pricing.json
index f711a55b4..f15617ca5 100644
--- a/src/i18n/messages/src/components/auth/Pricing.json
+++ b/src/i18n/messages/src/components/auth/Pricing.json
@@ -1,53 +1,118 @@
 [
   {
-    "id": "pricing.headline",
-    "defaultMessage": "!!!Support Franz",
+    "id": "pricing.trial.headline",
+    "defaultMessage": "!!!Franz Professional",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 13,
+      "line": 15,
       "column": 12
     },
     "end": {
-      "line": 16,
+      "line": 18,
       "column": 3
     }
   },
   {
-    "id": "pricing.support.label",
-    "defaultMessage": "!!!Select your support plan",
+    "id": "pricing.trial.subheadline",
+    "defaultMessage": "!!!Your personal welcome offer:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 17,
-      "column": 23
+      "line": 19,
+      "column": 17
     },
     "end": {
-      "line": 20,
+      "line": 22,
       "column": 3
     }
   },
   {
-    "id": "pricing.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 21,
+      "line": 23,
+      "column": 29
+    },
+    "end": {
+      "line": 26,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 27,
+      "column": 16
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 31,
       "column": 21
     },
     "end": {
-      "line": 24,
+      "line": 34,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.error",
+    "defaultMessage": "!!!Sorry, we could not activate your trial!",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 35,
+      "column": 19
+    },
+    "end": {
+      "line": 38,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.accept",
+    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 39,
+      "column": 13
+    },
+    "end": {
+      "line": 42,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.cta.skip",
+    "defaultMessage": "!!!Continue to Franz",
+    "file": "src/components/auth/Pricing.js",
+    "start": {
+      "line": 43,
+      "column": 11
+    },
+    "end": {
+      "line": 46,
       "column": 3
     }
   },
   {
-    "id": "pricing.link.skipPayment",
-    "defaultMessage": "!!!I don't want to support the development of Franz.",
+    "id": "pricing.trial.features.headline",
+    "defaultMessage": "!!!Franz Professional includes:",
     "file": "src/components/auth/Pricing.js",
     "start": {
-      "line": 25,
-      "column": 15
+      "line": 47,
+      "column": 20
     },
     "end": {
-      "line": 28,
+      "line": 50,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 884ab0c90..eb466c0ac 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome to Franz",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 11,
+      "line": 14,
       "column": 11
     },
     "end": {
-      "line": 14,
+      "line": 17,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Get started",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 15,
+      "line": 18,
       "column": 14
     },
     "end": {
-      "line": 18,
+      "line": 21,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/FeatureList.json b/src/i18n/messages/src/components/ui/FeatureList.json
new file mode 100644
index 000000000..497e299a4
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/FeatureList.json
@@ -0,0 +1,132 @@
+[
+  {
+    "id": "pricing.features.unlimitedServices",
+    "defaultMessage": "!!!Add unlimited services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 8,
+      "column": 21
+    },
+    "end": {
+      "line": 11,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.spellchecker",
+    "defaultMessage": "!!!Spellchecker support",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 12,
+      "column": 16
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.workspaces",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 16,
+      "column": 14
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.customWebsites",
+    "defaultMessage": "!!!Add Custom Websites",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 20,
+      "column": 18
+    },
+    "end": {
+      "line": 23,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.onPremise",
+    "defaultMessage": "!!!On-premise & other Hosted Services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 24,
+      "column": 13
+    },
+    "end": {
+      "line": 27,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.thirdPartyServices",
+    "defaultMessage": "!!!Install 3rd party services",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 28,
+      "column": 22
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.serviceProxies",
+    "defaultMessage": "!!!Service Proxies",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 32,
+      "column": 18
+    },
+    "end": {
+      "line": 35,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.teamManagement",
+    "defaultMessage": "!!!Team Management",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 36,
+      "column": 18
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.appDelays",
+    "defaultMessage": "!!!No Waiting Screens",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 40,
+      "column": 13
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.features.adFree",
+    "defaultMessage": "!!!Forever ad-free",
+    "file": "src/components/ui/FeatureList.js",
+    "start": {
+      "line": 44,
+      "column": 10
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index b5423af3b..6d746254e 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -37,6 +37,8 @@ export default class UserStore extends Store {
 
   @observable passwordRequest = new Request(this.api.user, 'password');
 
+  @observable activateTrialRequest = new Request(this.api.user, 'activateTrial');
+
   @observable inviteRequest = new Request(this.api.user, 'invite');
 
   @observable getUserInfoRequest = new CachedRequest(this.api.user, 'getInfo');
@@ -57,7 +59,7 @@ export default class UserStore extends Store {
 
   @observable accountType;
 
-  @observable hasCompletedSignup = null;
+  @observable hasCompletedSignup = false;
 
   @observable userData = {};
 
@@ -77,6 +79,7 @@ export default class UserStore extends Store {
     this.actions.user.retrievePassword.listen(this._retrievePassword.bind(this));
     this.actions.user.logout.listen(this._logout.bind(this));
     this.actions.user.signup.listen(this._signup.bind(this));
+    this.actions.user.activateTrial.listen(this._activateTrial.bind(this));
     this.actions.user.invite.listen(this._invite.bind(this));
     this.actions.user.update.listen(this._update.bind(this));
     this.actions.user.resetStatus.listen(this._resetStatus.bind(this));
@@ -199,6 +202,20 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
+  @action async _activateTrial({ planId }) {
+    debug('activate trial', planId);
+
+    this.activateTrialRequest.execute({
+      plan: planId,
+    });
+
+    await this.activateTrialRequest._promise;
+
+    this.stores.features.featuresRequest.invalidate({ immediately: true });
+
+    gaEvent('User', 'activateTrial');
+  }
+
   @action async _invite({ invites }) {
     const data = invites.filter(invite => invite.email !== '');
 
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index 0a075036a..154a71a36 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -9,7 +9,7 @@
   }
 
   .auth__logo.auth__logo--sm {
-    border: 4px solid $dark-theme-black;
+    border: none;
     box-shadow: 0 0 6px rgba($dark-theme-black, .5);
   }
 
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index f46ede4a2..d87ce652a 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -51,7 +51,6 @@ button {
   padding: 0;
 
   &:focus { outline: 0; }
-  .theme__dark & { color: $dark-theme-gray-smoke; }
 }
 
 html {
-- 
cgit v1.2.3-70-g09d2


From 76559f2895012803aed3256ce521b9cfff2f63b8 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 5 Aug 2019 13:24:35 +0200
Subject: WIP: add option to activate trial

---
 src/api/server/ServerApi.js                        |   2 -
 src/components/TrialActivationInfoBar.js           |  94 +++++++
 src/components/layout/AppLayout.js                 |  37 ++-
 src/components/services/content/Services.js        |  61 ++---
 .../settings/account/AccountDashboard.js           | 134 ++++++----
 .../settings/settings/EditSettingsForm.js          |   2 -
 src/containers/layout/AppLayoutContainer.js        |   2 +
 src/features/delayApp/Component.js                 |  43 +++-
 src/features/delayApp/index.js                     |   2 +-
 src/i18n/locales/defaultMessages.json              | 284 ++++++++++++++++++---
 src/i18n/locales/en-US.json                        |  29 ++-
 .../src/components/TrialActivationInfoBar.json     |  15 ++
 .../messages/src/components/layout/AppLayout.json  |  12 +-
 .../messages/src/features/delayApp/Component.json  |  40 ++-
 src/models/User.js                                 |  14 +-
 src/stores/UserStore.js                            |  21 ++
 src/styles/recipes.scss                            |   1 +
 17 files changed, 630 insertions(+), 163 deletions(-)
 create mode 100644 src/components/TrialActivationInfoBar.js
 create mode 100644 src/i18n/messages/src/components/TrialActivationInfoBar.json

(limited to 'src/containers')

diff --git a/src/api/server/ServerApi.js b/src/api/server/ServerApi.js
index f2568d597..f56c7b6e4 100644
--- a/src/api/server/ServerApi.js
+++ b/src/api/server/ServerApi.js
@@ -87,8 +87,6 @@ export default class ServerApi {
     }
     const trial = await request.json();
 
-    console.log(trial);
-
     debug('ServerApi::signup resolves', trial);
     return true;
   }
diff --git a/src/components/TrialActivationInfoBar.js b/src/components/TrialActivationInfoBar.js
new file mode 100644
index 000000000..acdf51d08
--- /dev/null
+++ b/src/components/TrialActivationInfoBar.js
@@ -0,0 +1,94 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { defineMessages, intlShape } from 'react-intl';
+import ms from 'ms';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import InfoBar from './ui/InfoBar';
+
+const messages = defineMessages({
+  message: {
+    id: 'infobar.trialActivated',
+    defaultMessage: '!!!Your trial was successfully activated. Happy messaging!',
+  },
+});
+
+const styles = {
+  notification: {
+    height: 'auto',
+    position: 'absolute',
+    top: -50,
+    transition: 'top 0.3s',
+    zIndex: 300,
+    width: 'calc(100% - 300px)',
+  },
+  show: {
+    top: 0,
+  },
+};
+
+@injectSheet(styles)
+class TrialActivationInfoBar extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    showing: false,
+    removed: false,
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        showing: true,
+      });
+    }, 0);
+
+    setTimeout(() => {
+      this.setState({
+        showing: false,
+      });
+    }, ms('6s'));
+
+    setTimeout(() => {
+      this.setState({
+        removed: true,
+      });
+    }, ms('7s'));
+  }
+
+  render() {
+    const { classes } = this.props;
+    const { showing, removed } = this.state;
+    const { intl } = this.context;
+
+    if (removed) return null;
+
+    return (
+      <div
+        className={classnames({
+          [classes.notification]: true,
+          [classes.show]: showing,
+        })}
+      >
+        <InfoBar
+          type="primary"
+          position="top"
+          sticky
+        >
+          <span className="mdi mdi-information" />
+          {intl.formatMessage(messages.message)}
+        </InfoBar>
+      </div>
+    );
+  }
+}
+
+export default TrialActivationInfoBar;
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index ebb9849ea..1976f5a50 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -17,6 +17,7 @@ import { isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
+import TrialActivationInfoBar from '../TrialActivationInfoBar';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -57,7 +58,6 @@ class AppLayout extends Component {
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
-    // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
@@ -69,6 +69,7 @@ class AppLayout extends Component {
     retryRequiredRequests: PropTypes.func.isRequired,
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -88,7 +89,6 @@ class AppLayout extends Component {
       sidebar,
       services,
       children,
-      // isOnline,
       news,
       showServicesUpdatedInfoBar,
       appUpdateIsDownloaded,
@@ -101,6 +101,7 @@ class AppLayout extends Component {
       retryRequiredRequests,
       areRequiredRequestsLoading,
       isDelayAppScreenVisible,
+      hasActivatedTrial,
     } = this.props;
 
     const { intl } = this.context;
@@ -125,26 +126,20 @@ class AppLayout extends Component {
                   <span dangerouslySetInnerHTML={createMarkup(item.message)} />
                 </InfoBar>
               ))}
-              {/* {!isOnline && (
-                <InfoBar
-                  type="danger"
-                  sticky
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                </InfoBar>
-              )} */}
+              {hasActivatedTrial && (
+                <TrialActivationInfoBar />
+              )}
               {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
-                <InfoBar
-                  type="danger"
-                  ctaLabel="Try again"
-                  ctaLoading={areRequiredRequestsLoading}
-                  sticky
-                  onClick={retryRequiredRequests}
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(messages.requiredRequestsFailed)}
-                </InfoBar>
+              <InfoBar
+                type="danger"
+                ctaLabel="Try again"
+                ctaLoading={areRequiredRequestsLoading}
+                sticky
+                onClick={retryRequiredRequests}
+              >
+                <span className="mdi mdi-flash" />
+                {intl.formatMessage(messages.requiredRequestsFailed)}
+              </InfoBar>
               )}
               {showServicesUpdatedInfoBar && (
                 <InfoBar
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 7f1624003..b71ddd8e6 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -26,7 +26,8 @@ const styles = {
   confettiContainer: {
     position: 'absolute',
     width: '100%',
-    zIndex: 0,
+    zIndex: 9999,
+    pointerEvents: 'none',
   },
 };
 
@@ -41,6 +42,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
     userHasCompletedSignup: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
   };
 
@@ -75,6 +77,7 @@ export default @observer @injectSheet(styles) class Services extends Component {
       openSettings,
       update,
       userHasCompletedSignup,
+      hasActivatedTrial,
       classes,
     } = this.props;
 
@@ -84,37 +87,37 @@ export default @observer @injectSheet(styles) class Services extends Component {
 
     const { intl } = this.context;
 
+    console.log('hasActivatedTrial', hasActivatedTrial, (userHasCompletedSignup || hasActivatedTrial));
+
     return (
       <div className="services">
+        {(userHasCompletedSignup || hasActivatedTrial) && (
+          <div className={classes.confettiContainer}>
+            <Confetti
+              width={window.width}
+              height={window.height}
+              numberOfPieces={showConfetti ? 200 : 0}
+            />
+          </div>
+        )}
         {services.length === 0 && (
-          <>
-            {userHasCompletedSignup && (
-              <div className={classes.confettiContainer}>
-                <Confetti
-                  width={window.width}
-                  height={window.height}
-                  numberOfPieces={showConfetti ? 200 : 0}
-                />
-              </div>
-            )}
-            <Appear
-              timeout={1500}
-              transitionName="slideUp"
-            >
-              <div className="services__no-service">
-                <img src="./assets/images/logo.svg" alt="" />
-                <h1>{intl.formatMessage(messages.welcome)}</h1>
-                <Appear
-                  timeout={300}
-                  transitionName="slideUp"
-                >
-                  <Link to="/settings/recipes" className="button">
-                    {intl.formatMessage(messages.getStarted)}
-                  </Link>
-                </Appear>
-              </div>
-            </Appear>
-          </>
+          <Appear
+            timeout={1500}
+            transitionName="slideUp"
+          >
+            <div className="services__no-service">
+              <img src="./assets/images/logo.svg" alt="" />
+              <h1>{intl.formatMessage(messages.welcome)}</h1>
+              <Appear
+                timeout={300}
+                transitionName="slideUp"
+              >
+                <Link to="/settings/recipes" className="button">
+                  {intl.formatMessage(messages.getStarted)}
+                </Link>
+              </Appear>
+            </div>
+          </Appear>
         )}
         {services.map(service => (
           <ServiceView
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 3f6964b6b..0366dc1ee 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -135,62 +135,96 @@ export default @observer class AccountDashboard extends Component {
           )}
 
           {!userInfoRequestFailed && (
-            <Fragment>
+            <>
               {!isLoading && (
-                <div className="account">
-                  <div className="account__box account__box--flex">
-                    <div className="account__avatar">
-                      <img
-                        src="./assets/images/logo.svg"
-                        alt=""
-                      />
-                    </div>
-                    <div className="account__info">
-                      <h2>
-                        <span className="username">{`${user.firstname} ${user.lastname}`}</span>
-                        {user.isPremium && (
-                          <>
-                            {' '}
-                            <ProBadge />
-                            <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span>
-                          </>
-                        )}
-                      </h2>
-                      {user.organization && `${user.organization}, `}
-                      {user.email}
-                      {user.isPremium && (
-                        <div className="manage-user-links">
-                          <Button
-                            label={intl.formatMessage(messages.accountEditButton)}
-                            className="franz-form__button--inverted"
-                            onClick={openEditAccount}
-                          />
-                          {user.isSubscriptionOwner && (
+                <>
+                  <div className="account">
+                    <div className="account__box account__box--flex">
+                      <div className="account__avatar">
+                        <img
+                          src="./assets/images/logo.svg"
+                          alt=""
+                        />
+                      </div>
+                      <div className="account__info">
+                        <h2>
+                          <span className="username">{`${user.firstname} ${user.lastname}`}</span>
+                          {user.isPremium && (
                             <>
-                              <Button
-                                label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                                className="franz-form__button--inverted"
-                                onClick={openBilling}
-                              />
-                              <Button
-                                label={intl.formatMessage(messages.invoicesButton)}
-                                className="franz-form__button--inverted"
-                                onClick={openInvoices}
-                              />
+                              {' '}
+                              <ProBadge />
+                              {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */}
                             </>
                           )}
-                        </div>
+                        </h2>
+                        <p>
+                          {user.organization && `${user.organization}, `}
+                          {user.email}
+                        </p>
+                        {user.isPremium && (
+                          <div className="manage-user-links">
+                            <Button
+                              label={intl.formatMessage(messages.accountEditButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openEditAccount}
+                            />
+                            {/* {user.isSubscriptionOwner && (
+                              <>
+                                <Button
+                                  label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                                  className="franz-form__button--inverted"
+                                  onClick={openBilling}
+                                />
+                                <Button
+                                  label={intl.formatMessage(messages.invoicesButton)}
+                                  className="franz-form__button--inverted"
+                                  onClick={openInvoices}
+                                />
+                              </>
+                            )} */}
+                          </div>
+                        )}
+                      </div>
+                      {!user.isPremium && (
+                        <Button
+                          label={intl.formatMessage(messages.accountEditButton)}
+                          className="franz-form__button--inverted"
+                          onClick={openEditAccount}
+                        />
                       )}
                     </div>
-                    {!user.isPremium && (
-                      <Button
-                        label={intl.formatMessage(messages.accountEditButton)}
-                        className="franz-form__button--inverted"
-                        onClick={openEditAccount}
-                      />
-                    )}
                   </div>
-                </div>
+                  {user.isSubscriptionOwner && (
+                    <div className="account">
+                      <div className="account__box">
+                        <h2>
+                          Your license: {user.team.plan}
+                        </h2>
+                        {user.team.isTrial && (
+                          <>
+                            <p>
+                              Trial ends in 14 days
+                            </p>
+                          </>
+                        )}
+                        {user.isPremium && (
+                          <div className="manage-user-links">
+                            <Button
+                              label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                              className="franz-form__button--inverted"
+                              onClick={openBilling}
+                            />
+                            <Button
+                              label={intl.formatMessage(messages.invoicesButton)}
+                              className="franz-form__button--inverted"
+                              onClick={openInvoices}
+                            />
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </>
               )}
 
               {!user.isPremium && (
@@ -227,7 +261,7 @@ export default @observer class AccountDashboard extends Component {
                   )}
                 </div>
               </div>
-            </Fragment>
+            </>
           )}
         </div>
         <ReactTooltip place="right" type="dark" effect="solid" />
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 6d0811b1b..3f9e0a6bc 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -143,8 +143,6 @@ export default @observer class EditSettingsForm extends Component {
       updateButtonLabelMessage = messages.buttonSearchForUpdate;
     }
 
-    console.log('isSpellcheckerIncludedInCurrentPlan', isSpellcheckerIncludedInCurrentPlan);
-
     return (
       <div className="settings__main">
         <div className="settings__header">
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index b4e32cffa..a14a98554 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -128,6 +128,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         openSettings={openSettings}
         update={updateService}
         userHasCompletedSignup={user.hasCompletedSignup}
+        hasActivatedTrial={user.hasActivatedTrial}
       />
     );
 
@@ -152,6 +153,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           retryRequiredRequests={retryRequiredRequests}
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
+          hasActivatedTrial={user.hasActivatedTrial}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff0f1f2f8..de5653f04 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -4,29 +4,39 @@ import { inject, observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
 
+import { Button } from '@meetfranz/forms';
 import { gaEvent } from '../../lib/analytics';
 
-import Button from '../../components/ui/Button';
+// import Button from '../../components/ui/Button';
 
 import { config } from '.';
 import styles from './styles';
+import UserStore from '../../stores/UserStore';
 
 const messages = defineMessages({
   headline: {
     id: 'feature.delayApp.headline',
     defaultMessage: '!!!Please purchase license to skip waiting',
   },
+  headlineTrial: {
+    id: 'feature.delayApp.trial.headline',
+    defaultMessage: '!!!Get the free Franz Professional 14 day trial and skip the line',
+  },
   action: {
-    id: 'feature.delayApp.action',
+    id: 'feature.delayApp.upgrade.action',
     defaultMessage: '!!!Get a Franz Supporter License',
   },
+  actionTrial: {
+    id: 'feature.delayApp.trial.action',
+    defaultMessage: '!!!Yes, I want the free 14 day trial of Franz Professional',
+  },
   text: {
     id: 'feature.delayApp.text',
     defaultMessage: '!!!Franz will continue in {seconds} seconds.',
   },
 });
 
-export default @inject('actions') @injectSheet(styles) @observer class DelayApp extends Component {
+export default @inject('stores', 'actions') @injectSheet(styles) @observer class DelayApp extends Component {
   static propTypes = {
     // eslint-disable-next-line
     classes: PropTypes.object.isRequired,
@@ -62,25 +72,37 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
   }
 
   handleCTAClick() {
-    const { actions } = this.props;
+    const { actions, stores } = this.props;
+    const { hadSubscription } = stores.user.data;
+    const { defaultTrialPlan } = stores.features.features;
+
+    if (!hadSubscription) {
+      console.log('directly activate trial');
+      actions.user.activateTrial({ planId: defaultTrialPlan });
 
-    actions.ui.openSettings({ path: 'user' });
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    } else {
+      actions.ui.openSettings({ path: 'user' });
 
-    gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+      gaEvent('DelayApp', 'subscribe_click', 'Delay App Feature');
+    }
   }
 
   render() {
-    const { classes } = this.props;
+    const { classes, stores } = this.props;
     const { intl } = this.context;
 
+    const { hadSubscription } = stores.user.data;
+
     return (
       <div className={`${classes.container}`}>
-        <h1 className={classes.headline}>{intl.formatMessage(messages.headline)}</h1>
+        <h1 className={classes.headline}>{intl.formatMessage(hadSubscription ? messages.headline : messages.headlineTrial)}</h1>
         <Button
-          label={intl.formatMessage(messages.action)}
+          label={intl.formatMessage(hadSubscription ? messages.action : messages.actionTrial)}
           className={classes.button}
           buttonType="inverted"
           onClick={this.handleCTAClick.bind(this)}
+          busy={stores.user.activateTrialRequest.isExecuting}
         />
         <p className="footnote">
           {intl.formatMessage(messages.text, {
@@ -93,6 +115,9 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 }
 
 DelayApp.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
   actions: PropTypes.shape({
     ui: PropTypes.shape({
       openSettings: PropTypes.func.isRequired,
diff --git a/src/features/delayApp/index.js b/src/features/delayApp/index.js
index 39fae3b20..627537de7 100644
--- a/src/features/delayApp/index.js
+++ b/src/features/delayApp/index.js
@@ -44,7 +44,7 @@ export default function init(stores) {
         config.delayDuration = globalConfig.wait !== undefined ? globalConfig.wait : DEFAULT_FEATURES_CONFIG.needToWaitToProceedConfig.wait;
 
         autorun(() => {
-          if (stores.services.all.length === 0) {
+          if (stores.services.allDisplayed.length === 0) {
             debug('seas', stores.services.all.length);
             shownAfterLaunch = true;
             return;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 3d11a372d..930f6752e 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -417,55 +417,120 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support Franz",
+        "defaultMessage": "!!!Franz Professional",
         "end": {
           "column": 3,
-          "line": 16
+          "line": 18
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.headline",
+        "id": "pricing.trial.headline",
         "start": {
           "column": 12,
-          "line": 13
+          "line": 15
         }
       },
       {
-        "defaultMessage": "!!!Select your support plan",
+        "defaultMessage": "!!!Your personal welcome offer:",
         "end": {
           "column": 3,
-          "line": 20
+          "line": 22
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.support.label",
+        "id": "pricing.trial.subheadline",
         "start": {
-          "column": 23,
-          "line": 17
+          "column": 17,
+          "line": 19
         }
       },
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 26
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.headline",
+        "start": {
+          "column": 29,
+          "line": 23
+        }
+      },
+      {
+        "defaultMessage": "!!!No credit card required",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.terms.noCreditCard",
+        "start": {
+          "column": 16,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+        "end": {
+          "column": 3,
+          "line": 34
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.submit.label",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 21
+          "line": 31
         }
       },
       {
-        "defaultMessage": "!!!I don't want to support the development of Franz.",
+        "defaultMessage": "!!!Sorry, we could not activate your trial!",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 38
         },
         "file": "src/components/auth/Pricing.js",
-        "id": "pricing.link.skipPayment",
+        "id": "pricing.trial.error",
         "start": {
-          "column": 15,
-          "line": 25
+          "column": 19,
+          "line": 35
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 42
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.accept",
+        "start": {
+          "column": 13,
+          "line": 39
+        }
+      },
+      {
+        "defaultMessage": "!!!Continue to Franz",
+        "end": {
+          "column": 3,
+          "line": 46
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.cta.skip",
+        "start": {
+          "column": 11,
+          "line": 43
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional includes:",
+        "end": {
+          "column": 3,
+          "line": 50
+        },
+        "file": "src/components/auth/Pricing.js",
+        "id": "pricing.trial.features.headline",
+        "start": {
+          "column": 20,
+          "line": 47
         }
       }
     ],
@@ -967,26 +1032,26 @@
         "defaultMessage": "!!!Welcome to Franz",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 17
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.welcome",
         "start": {
           "column": 11,
-          "line": 11
+          "line": 14
         }
       },
       {
         "defaultMessage": "!!!Get started",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 21
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.getStarted",
         "start": {
           "column": 14,
-          "line": 15
+          "line": 18
         }
       }
     ],
@@ -2804,6 +2869,141 @@
     ],
     "path": "src/components/subscription/SubscriptionPopup.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Add unlimited services",
+        "end": {
+          "column": 3,
+          "line": 11
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.unlimitedServices",
+        "start": {
+          "column": 21,
+          "line": 8
+        }
+      },
+      {
+        "defaultMessage": "!!!Spellchecker support",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.spellchecker",
+        "start": {
+          "column": 16,
+          "line": 12
+        }
+      },
+      {
+        "defaultMessage": "!!!Workspaces",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.workspaces",
+        "start": {
+          "column": 14,
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!Add Custom Websites",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.customWebsites",
+        "start": {
+          "column": 18,
+          "line": 20
+        }
+      },
+      {
+        "defaultMessage": "!!!On-premise & other Hosted Services",
+        "end": {
+          "column": 3,
+          "line": 27
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.onPremise",
+        "start": {
+          "column": 13,
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Install 3rd party services",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.thirdPartyServices",
+        "start": {
+          "column": 22,
+          "line": 28
+        }
+      },
+      {
+        "defaultMessage": "!!!Service Proxies",
+        "end": {
+          "column": 3,
+          "line": 35
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.serviceProxies",
+        "start": {
+          "column": 18,
+          "line": 32
+        }
+      },
+      {
+        "defaultMessage": "!!!Team Management",
+        "end": {
+          "column": 3,
+          "line": 39
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.teamManagement",
+        "start": {
+          "column": 18,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!No Waiting Screens",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.appDelays",
+        "start": {
+          "column": 13,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Forever ad-free",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/ui/FeatureList.js",
+        "id": "pricing.features.adFree",
+        "start": {
+          "column": 10,
+          "line": 44
+        }
+      }
+    ],
+    "path": "src/components/ui/FeatureList.json"
+  },
   {
     "descriptors": [
       {
@@ -3378,39 +3578,65 @@
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 16
+        }
+      },
+      {
+        "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+        "end": {
+          "column": 3,
+          "line": 23
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.headline",
+        "start": {
+          "column": 17,
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Get a Franz Supporter License",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 27
         },
         "file": "src/features/delayApp/Component.js",
-        "id": "feature.delayApp.action",
+        "id": "feature.delayApp.upgrade.action",
         "start": {
           "column": 10,
-          "line": 19
+          "line": 24
+        }
+      },
+      {
+        "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/features/delayApp/Component.js",
+        "id": "feature.delayApp.trial.action",
+        "start": {
+          "column": 15,
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 35
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.text",
         "start": {
           "column": 8,
-          "line": 23
+          "line": 32
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 0a8e04b21..4049e9400 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -2,9 +2,11 @@
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
   "feature.announcements.changelog.headline": "Changes in Franz {version}",
-  "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
+  "feature.delayApp.trial.action": "!!!Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.headline": "!!!Get the free Franz Professional 14 day trial and skip the line",
+  "feature.delayApp.upgrade.action": "!!!Get a Franz Supporter License",
   "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
@@ -104,10 +106,25 @@
   "password.submit.label": "Submit",
   "password.successInfo": "Please check your email",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
-  "pricing.headline": "Support Franz",
-  "pricing.link.skipPayment": "I don't want to support the development of Franz.",
-  "pricing.submit.label": "I want to support the development of Franz",
-  "pricing.support.label": "Select your support plan",
+  "pricing.features.adFree": "!!!Forever ad-free",
+  "pricing.features.appDelays": "!!!No Waiting Screens",
+  "pricing.features.customWebsites": "!!!Add Custom Websites",
+  "pricing.features.onPremise": "!!!On-premise & other Hosted Services",
+  "pricing.features.serviceProxies": "!!!Service Proxies",
+  "pricing.features.spellchecker": "!!!Spellchecker support",
+  "pricing.features.teamManagement": "!!!Team Management",
+  "pricing.features.thirdPartyServices": "!!!Install 3rd party services",
+  "pricing.features.unlimitedServices": "!!!Add unlimited services",
+  "pricing.features.workspaces": "!!!Workspaces",
+  "pricing.trial.cta.accept": "!!!Yes, upgrade my account to Franz Professional",
+  "pricing.trial.cta.skip": "!!!Continue to Franz",
+  "pricing.trial.error": "!!!Sorry, we could not activate your trial!",
+  "pricing.trial.features.headline": "!!!Franz Professional includes:",
+  "pricing.trial.headline": "!!!Franz Professional",
+  "pricing.trial.subheadline": "!!!Your personal welcome offer:",
+  "pricing.trial.terms.automaticTrialEnd": "!!!Your free trial ends automatically after 14 days",
+  "pricing.trial.terms.headline": "!!!No strings attached",
+  "pricing.trial.terms.noCreditCard": "!!!No credit card required",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -341,4 +358,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
+}
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/TrialActivationInfoBar.json b/src/i18n/messages/src/components/TrialActivationInfoBar.json
new file mode 100644
index 000000000..65dd964a6
--- /dev/null
+++ b/src/i18n/messages/src/components/TrialActivationInfoBar.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "infobar.trialActivated",
+    "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
+    "file": "src/components/TrialActivationInfoBar.js",
+    "start": {
+      "line": 11,
+      "column": 11
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 190c5dff7..b71889155 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": 26,
+      "line": 27,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 26
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/delayApp/Component.json b/src/i18n/messages/src/features/delayApp/Component.json
index bacd9444a..0d345a47b 100644
--- a/src/i18n/messages/src/features/delayApp/Component.json
+++ b/src/i18n/messages/src/features/delayApp/Component.json
@@ -4,24 +4,50 @@
     "defaultMessage": "!!!Please purchase license to skip waiting",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 15,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "feature.delayApp.action",
+    "id": "feature.delayApp.trial.headline",
+    "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 21,
+      "column": 17
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.upgrade.action",
     "defaultMessage": "!!!Get a Franz Supporter License",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 19,
+      "line": 25,
       "column": 10
     },
     "end": {
-      "line": 22,
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.delayApp.trial.action",
+    "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
+    "file": "src/features/delayApp/Component.js",
+    "start": {
+      "line": 29,
+      "column": 15
+    },
+    "end": {
+      "line": 32,
       "column": 3
     }
   },
@@ -30,11 +56,11 @@
     "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
     "file": "src/features/delayApp/Component.js",
     "start": {
-      "line": 23,
+      "line": 33,
       "column": 8
     },
     "end": {
-      "line": 26,
+      "line": 36,
       "column": 3
     }
   }
diff --git a/src/models/User.js b/src/models/User.js
index bec78fc16..0a2b1f62a 100644
--- a/src/models/User.js
+++ b/src/models/User.js
@@ -20,6 +20,10 @@ export default class User {
 
   @observable isSubscriptionOwner = false;
 
+  @observable hasSubscription = false;
+
+  @observable hadSubscription = false;
+
   @observable isPremium = false;
 
   @observable beta = false;
@@ -32,6 +36,9 @@ export default class User {
 
   @observable locale = false;
 
+  @observable team = {};
+
+
   constructor(data) {
     if (!data.id) {
       throw Error('User requires Id');
@@ -47,8 +54,13 @@ export default class User {
     this.beta = data.beta || this.beta;
     this.donor = data.donor || this.donor;
     this.isDonor = data.isDonor || this.isDonor;
-    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
     this.isMiner = data.isMiner || this.isMiner;
     this.locale = data.locale || this.locale;
+
+    this.isSubscriptionOwner = data.isSubscriptionOwner || this.isSubscriptionOwner;
+    this.hasSubscription = data.hasSubscription || this.hasSubscription;
+    this.hadSubscription = data.hadSubscription || this.hadSubscription;
+
+    this.team = data.team || this.team;
   }
 }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 6d746254e..e7516e6e6 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -2,12 +2,14 @@ import { observable, computed, action } from 'mobx';
 import moment from 'moment';
 import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
+import ms from 'ms';
 
 import { isDevMode } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
+import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Franz:UserStore');
 
@@ -61,6 +63,8 @@ export default class UserStore extends Store {
 
   @observable hasCompletedSignup = false;
 
+  @observable hasActivatedTrial = false;
+
   @observable userData = {};
 
   @observable actionStatus = [];
@@ -90,6 +94,7 @@ export default class UserStore extends Store {
     this.registerReactions([
       this._requireAuthenticatedUser,
       this._getUserData.bind(this),
+      this._resetTrialActivationState.bind(this),
     ]);
   }
 
@@ -211,7 +216,13 @@ export default class UserStore extends Store {
 
     await this.activateTrialRequest._promise;
 
+    this.hasActivatedTrial = true;
+
+    console.log('hasActivatedTrial', this.hasActivatedTrial);
+
     this.stores.features.featuresRequest.invalidate({ immediately: true });
+    this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
+
 
     gaEvent('User', 'activateTrial');
   }
@@ -335,6 +346,16 @@ export default class UserStore extends Store {
     }
   }
 
+  async _resetTrialActivationState() {
+    if (this.hasActivatedTrial) {
+      await sleep(ms('12s'));
+
+      console.log('resetting this.hasActivatedTrial', this.hasActivatedTrial);
+
+      this.hasActivatedTrial = false;
+    }
+  }
+
   // Helpers
   _parseToken(authToken) {
     try {
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
index 56a248e98..5bdc60a57 100644
--- a/src/styles/recipes.scss
+++ b/src/styles/recipes.scss
@@ -2,6 +2,7 @@
 
 .theme__dark .recipe-teaser {
   background-color: $dark-theme-gray-dark;
+  color: $dark-theme-text-color;
 
   &:hover { background-color: $dark-theme-gray; }
 }
-- 
cgit v1.2.3-70-g09d2


From 524d55f46e3834a84db17945eaa1c65891f06547 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 8 Aug 2019 19:50:17 +0200
Subject: Add option to subscribe to trial via account dashboard

---
 src/components/auth/Pricing.js                     |   2 +-
 .../settings/account/AccountDashboard.js           | 114 ++++---
 src/components/subscription/SubscriptionForm.js    | 238 ++++-----------
 src/config.js                                      |  24 ++
 .../subscription/SubscriptionFormScreen.js         |  18 +-
 src/helpers/plan-helpers.js                        |  43 +++
 src/i18n/locales/defaultMessages.json              | 328 ++++++++++++++++++---
 src/i18n/locales/en-US.json                        |  57 ++--
 .../settings/account/AccountDashboard.json         | 116 ++++++--
 .../components/subscription/SubscriptionForm.json  | 145 +--------
 src/i18n/messages/src/helpers/plan-helpers.json    |  80 +++++
 src/i18n/messages/src/helpers/pricing-helpers.json |  80 +++++
 src/stores/AppStore.js                             |   2 +
 src/styles/settings.scss                           |   1 +
 14 files changed, 780 insertions(+), 468 deletions(-)
 create mode 100644 src/helpers/plan-helpers.js
 create mode 100644 src/i18n/messages/src/helpers/plan-helpers.json
 create mode 100644 src/i18n/messages/src/helpers/pricing-helpers.json

(limited to 'src/containers')

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index d20779025..cbeaaa5d9 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -8,7 +8,7 @@ import classnames from 'classnames';
 
 import { Button } from '@meetfranz/forms';
 import { FeatureItem } from '../ui/FeatureItem';
-import FeatureList from '../ui/FeatureList';
+import { FeatureList } from '../ui/FeatureList';
 
 
 const messages = defineMessages({
diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 0366dc1ee..079d50380 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -1,14 +1,18 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
-import { ProBadge } from '@meetfranz/ui';
+import {
+  ProBadge, H2, H1, H3,
+} from '@meetfranz/ui';
+import moment from 'moment';
 
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import SubscriptionForm from '../../../containers/subscription/SubscriptionFormScreen';
+import { i18nPlanName } from '../../../helpers/plan-helpers';
 
 const messages = defineMessages({
   headline: {
@@ -20,8 +24,8 @@ const messages = defineMessages({
     defaultMessage: '!!!Your Subscription',
   },
   headlineUpgrade: {
-    id: 'settings.account.headlineUpgrade',
-    defaultMessage: '!!!Upgrade your Account',
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
   },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
@@ -71,6 +75,22 @@ const messages = defineMessages({
     id: 'settings.account.deleteEmailSent',
     defaultMessage: '!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!',
   },
+  trial: {
+    id: 'settings.account.trial',
+    defaultMessage: '!!!Free Trial',
+  },
+  yourLicense: {
+    id: 'settings.account.yourLicense',
+    defaultMessage: '!!!Your license:',
+  },
+  trialEndsIn: {
+    id: 'settings.account.trialEndsIn',
+    defaultMessage: '!!!Your free trial ends in {duration}.',
+  },
+  trialUpdateBillingInformation: {
+    id: 'settings.account.trialUpdateBillingInfo',
+    defaultMessage: '!!!Please update your billing info to continue using {license} after your trial period.',
+  },
 });
 
 export default @observer class AccountDashboard extends Component {
@@ -110,6 +130,13 @@ export default @observer class AccountDashboard extends Component {
     } = this.props;
     const { intl } = this.context;
 
+    let planName = '';
+
+    if (user.team && user.team.plan) {
+      planName = i18nPlanName(user.team.plan, intl);
+      console.log(planName);
+    }
+
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -147,7 +174,7 @@ export default @observer class AccountDashboard extends Component {
                         />
                       </div>
                       <div className="account__info">
-                        <h2>
+                        <H1>
                           <span className="username">{`${user.firstname} ${user.lastname}`}</span>
                           {user.isPremium && (
                             <>
@@ -156,7 +183,7 @@ export default @observer class AccountDashboard extends Component {
                               {/* <span className="badge badge--premium">{intl.formatMessage(messages.accountTypePremium)}</span> */}
                             </>
                           )}
-                        </h2>
+                        </H1>
                         <p>
                           {user.organization && `${user.organization}, `}
                           {user.email}
@@ -197,54 +224,61 @@ export default @observer class AccountDashboard extends Component {
                   {user.isSubscriptionOwner && (
                     <div className="account">
                       <div className="account__box">
-                        <h2>
-                          Your license: {user.team.plan}
-                        </h2>
+                        <H2>
+                          {intl.formatMessage(messages.yourLicense)}
+                        </H2>
+                        <H3>
+                          {planName}
+                          {user.team.isTrial && (
+                            <>
+                              {' – '}
+                              {intl.formatMessage(messages.trial)}
+                            </>
+                          )}
+                        </H3>
                         {user.team.isTrial && (
                           <>
                             <p>
-                              Trial ends in 14 days
+                              {intl.formatMessage(messages.trialEndsIn, {
+                                duration: moment.duration(moment().diff(user.team.trialEnd)).humanize(),
+                              })}
+                            </p>
+                            <p>
+                              {intl.formatMessage(messages.trialUpdateBillingInformation, {
+                                license: planName,
+                              })}
                             </p>
                           </>
                         )}
-                        {user.isPremium && (
-                          <div className="manage-user-links">
-                            <Button
-                              label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
-                              className="franz-form__button--inverted"
-                              onClick={openBilling}
-                            />
-                            <Button
-                              label={intl.formatMessage(messages.invoicesButton)}
-                              className="franz-form__button--inverted"
-                              onClick={openInvoices}
-                            />
-                          </div>
-                        )}
+                        <div className="manage-user-links">
+                          <Button
+                            label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
+                            className="franz-form__button--inverted"
+                            onClick={openBilling}
+                          />
+                          <Button
+                            label={intl.formatMessage(messages.invoicesButton)}
+                            className="franz-form__button--inverted"
+                            onClick={openInvoices}
+                          />
+                        </div>
                       </div>
                     </div>
                   )}
-                </>
-              )}
-
-              {!user.isPremium && (
-                isLoadingPlans ? (
-                  <Loader />
-                ) : (
-                  <div className="account franz-form">
-                    <div className="account__box">
-                      <h2>{intl.formatMessage(messages.headlineUpgrade)}</h2>
-                      <SubscriptionForm
-                        onCloseWindow={onCloseSubscriptionWindow}
-                      />
+                  {!user.isPremium && (
+                    <div className="account franz-form">
+                      <div className="account__box">
+                        <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2>
+                        <SubscriptionForm />
+                      </div>
                     </div>
-                  </div>
-                )
+                  )}
+                </>
               )}
 
               <div className="account franz-form">
                 <div className="account__box">
-                  <h2>{intl.formatMessage(messages.headlineDangerZone)}</h2>
+                  <H2>{intl.formatMessage(messages.headlineDangerZone)}</H2>
                   {!isDeleteAccountSuccessful && (
                   <div className="account__subscription">
                     <p>{intl.formatMessage(messages.deleteInfo)}</p>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 50f1e0522..0c630f047 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,214 +1,94 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
 
-import Form from '../../lib/Form';
-import Radio from '../ui/Radio';
-import Button from '../ui/Button';
-import Loader from '../ui/Loader';
+import { H3 } from '@meetfranz/ui';
 
-import { required } from '../../helpers/validation-helpers';
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.submit.label',
-    defaultMessage: '!!!Support the development of Franz',
-  },
-  paymentSessionError: {
-    id: 'subscription.paymentSessionError',
-    defaultMessage: '!!!Could not initialize payment form',
-  },
-  typeFree: {
-    id: 'subscription.type.free',
-    defaultMessage: '!!!free',
-  },
-  typeMonthly: {
-    id: 'subscription.type.month',
-    defaultMessage: '!!!month',
-  },
-  typeYearly: {
-    id: 'subscription.type.year',
-    defaultMessage: '!!!year',
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
   },
   includedFeatures: {
-    id: 'subscription.includedFeatures',
-    defaultMessage: '!!!The Franz Premium Supporter Account includes',
-  },
-  onpremise: {
-    id: 'subscription.features.onpremise.mattermost',
-    defaultMessage: '!!!Add on-premise/hosted services like Mattermost',
-  },
-  noInterruptions: {
-    id: 'subscription.features.noInterruptions',
-    defaultMessage: '!!!No app delays & nagging to upgrade license',
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
   },
-  proxy: {
-    id: 'subscription.features.proxy',
-    defaultMessage: '!!!Proxy support for services',
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
   },
-  spellchecker: {
-    id: 'subscription.features.spellchecker',
-    defaultMessage: '!!!Support for Spellchecker',
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
   },
-  workspaces: {
-    id: 'subscription.features.workspaces',
-    defaultMessage: '!!!Organize your services in workspaces',
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
   },
-  ads: {
-    id: 'subscription.features.ads',
-    defaultMessage: '!!!No ads, ever!',
-  },
-  comingSoon: {
-    id: 'subscription.features.comingSoon',
-    defaultMessage: '!!!coming soon',
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
   },
-  euTaxInfo: {
-    id: 'subscription.euTaxInfo',
-    defaultMessage: '!!!EU residents: local sales tax may apply',
+  keyTerms: {
+    marginTop: 20,
   },
 });
 
-export default @observer class SubscriptionForm extends Component {
+export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    plan: MobxPropTypes.objectOrObservableObject.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-    handlePayment: PropTypes.func.isRequired,
-    retryPlanRequest: PropTypes.func.isRequired,
-    isCreatingHostedPage: PropTypes.bool.isRequired,
-    error: PropTypes.bool.isRequired,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static contextTypes = {
     intl: intlShape,
   };
 
-  componentWillMount() {
-    this.form = this.prepareForm();
-  }
-
-  prepareForm() {
-    const { intl } = this.context;
-
-    const form = {
-      fields: {
-        paymentTier: {
-          value: 'year',
-          validators: [required],
-          options: [{
-            value: 'month',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'month')
-              ? `${this.props.plan.month.price} / ${intl.formatMessage(messages.typeMonthly)}`
-              : 'monthly'}`,
-          }, {
-            value: 'year',
-            label: `€ ${Object.hasOwnProperty.call(this.props.plan, 'year')
-              ? `${this.props.plan.year.price} / ${intl.formatMessage(messages.typeYearly)}`
-              : 'yearly'}`,
-          }],
-        },
-      },
-    };
-
-    if (this.props.showSkipOption) {
-      form.fields.paymentTier.options.unshift({
-        value: 'skip',
-        label: `€ 0 / ${intl.formatMessage(messages.typeFree)}`,
-      });
-    }
-
-    return new Form(form, this.context.intl);
-  }
-
   render() {
     const {
-      isLoading,
-      isCreatingHostedPage,
-      handlePayment,
-      retryPlanRequest,
-      error,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
+      isActivatingTrial,
+      activateTrial,
+      classes,
     } = this.props;
     const { intl } = this.context;
 
-    if (error) {
-      return (
-        <Button
-          label="Reload"
-          onClick={retryPlanRequest}
-          isLoaded={!isLoading}
-        />
-      );
-    }
+    console.log('isActivatingTrial', isActivatingTrial);
 
     return (
-      <Loader loaded={!isLoading}>
-        <Radio field={this.form.$('paymentTier')} showLabel={false} className="paymentTiers" />
-        {!hideInfo && (
-          <div className="subscription__premium-info">
-            <p>
-              <strong>{intl.formatMessage(messages.includedFeatures)}</strong>
-            </p>
-            <div className="subscription">
-              <ul className="subscription__premium-features">
-                <li>{intl.formatMessage(messages.onpremise)}</li>
-                <li>
-                  {intl.formatMessage(messages.noInterruptions)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.spellchecker)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.proxy)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.workspaces)}
-                </li>
-                <li>
-                  {intl.formatMessage(messages.ads)}
-                </li>
-              </ul>
-            </div>
+      <>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
           </div>
-        )}
-        <Fragment>
-          {error.code === 'no-payment-session' && (
-            <p className="error-message center">{intl.formatMessage(messages.paymentSessionError)}</p>
-          )}
-        </Fragment>
-        {showSkipOption && this.form.$('paymentTier').value === 'skip' ? (
-          <Button
-            label={skipButtonLabel}
-            className="auth__button"
-            onClick={skipAction}
-          />
-        ) : (
-          <Button
-            label={intl.formatMessage(messages.submitButtonLabel)}
-            className="auth__button"
-            loaded={!isCreatingHostedPage}
-            onClick={() => handlePayment(this.form.$('paymentTier').value)}
-          />
-        )}
-        {this.form.$('paymentTier').value !== 'skip' && (
-          <p className="legal">
-            {intl.formatMessage(messages.euTaxInfo)}
-          </p>
-        )}
-      </Loader>
+        </div>
+      </>
     );
   }
 }
diff --git a/src/config.js b/src/config.js
index 3c8b0f0d0..edcae9df1 100644
--- a/src/config.js
+++ b/src/config.js
@@ -84,3 +84,27 @@ export const ALLOWED_PROTOCOLS = [
   'http:',
   'ftp:',
 ];
+
+export const PLANS = {
+  PERSONAL_MONTHLY: 'PERSONAL_MONTHLY',
+  PERSONAL_YEARLY: 'PERSONAL_YEARLY',
+  PRO_MONTHLY: 'PRO_MONTHLY',
+  PRO_YEARLY: 'PRO_YEARLY',
+  LEGACY: 'LEGACY',
+  FREE: 'FREE',
+};
+
+export const PLANS_MAPPING = {
+  'franz-personal-monthly': PLANS.PERSONAL_MONTHLY,
+  'franz-personal-yearly': PLANS.PERSONAL_YEARLY,
+  'franz-pro-monthly': PLANS.PRO_MONTHLY,
+  'franz-pro-yearly': PLANS.PRO_YEARLY,
+  'franz-supporter-license': PLANS.LEGACY,
+  'franz-supporter-license-x1': PLANS.LEGACY,
+  'franz-supporter-license-x2': PLANS.LEGACY,
+  'franz-supporter-license-year': PLANS.LEGACY,
+  'franz-supporter-license-year-x1': PLANS.LEGACY,
+  'franz-supporter-license-year-x2': PLANS.LEGACY,
+  'franz-supporter-license-year-2019': PLANS.LEGACY,
+  free: PLANS.FREE,
+};
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index aa1166f5e..7486cc498 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -74,28 +74,14 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
 
   render() {
     const {
-      content,
       actions,
       stores,
-      showSkipOption,
-      skipAction,
-      skipButtonLabel,
-      hideInfo,
     } = this.props;
     return (
       <SubscriptionForm
         plan={stores.payment.plan}
-        isLoading={stores.payment.plansRequest.isExecuting}
-        retryPlanRequest={() => stores.payment.plansRequest.reload()}
-        isCreatingHostedPage={stores.payment.createHostedPageRequest.isExecuting}
-        handlePayment={price => this.handlePayment(price)}
-        content={content}
-        error={stores.payment.plansRequest.isError}
-        showSkipOption={showSkipOption}
-        skipAction={skipAction}
-        skipButtonLabel={skipButtonLabel}
-        hideInfo={hideInfo}
-        openExternalUrl={actions.app.openExternalUrl}
+        activateTrial={() => actions.user.activateTrial({ planId: stores.features.features.defaultTrialPlan })}
+        isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
       />
     );
   }
diff --git a/src/helpers/plan-helpers.js b/src/helpers/plan-helpers.js
new file mode 100644
index 000000000..37a4457af
--- /dev/null
+++ b/src/helpers/plan-helpers.js
@@ -0,0 +1,43 @@
+import { defineMessages } from 'react-intl';
+import { PLANS_MAPPING, PLANS } from '../config';
+
+const messages = defineMessages({
+  [PLANS.PRO_YEARLY]: {
+    id: 'pricing.plan.pro-yearly',
+    defaultMessage: '!!!Franz Professional Yearly',
+  },
+  [PLANS.PRO_MONTHLY]: {
+    id: 'pricing.plan.pro-monthly',
+    defaultMessage: '!!!Franz Professional Monthly',
+  },
+  [PLANS.PERSONAL_YEARLY]: {
+    id: 'pricing.plan.personal-yearly',
+    defaultMessage: '!!!Franz Personal Yearly',
+  },
+  [PLANS.PERSONAL_MONTHLY]: {
+    id: 'pricing.plan.personal-monthly',
+    defaultMessage: '!!!Franz Personal Monthly',
+  },
+  [PLANS.FREE]: {
+    id: 'pricing.plan.free',
+    defaultMessage: '!!!Franz Free',
+  },
+  [PLANS.LEGACY]: {
+    id: 'pricing.plan.legacy',
+    defaultMessage: '!!!Franz Premium',
+  },
+});
+
+export function i18nPlanName(planId, intl) {
+  if (!planId) {
+    throw new Error('planId is required');
+  }
+
+  if (!intl) {
+    throw new Error('intl context is required');
+  }
+
+  const plan = PLANS_MAPPING[planId];
+
+  return intl.formatMessage(messages[plan]);
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 930f6752e..836fe3b24 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -734,39 +734,39 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 34
+          "line": 35
         }
       }
     ],
@@ -1242,195 +1242,247 @@
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 19
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Your Subscription",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 23
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineSubscription",
         "start": {
           "column": 24,
-          "line": 18
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Upgrade your Account",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineUpgrade",
         "start": {
           "column": 19,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!Danger Zone",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineDangerZone",
         "start": {
           "column": 22,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Manage your subscription",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.manageSubscription.label",
         "start": {
           "column": 33,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Basic Account",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 43
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 47
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 42
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 51
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 46
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 55
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 50
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 59
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 54
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 63
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 67
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 62
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 71
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 66
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 75
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 70
+          "line": 72
+        }
+      },
+      {
+        "defaultMessage": "!!!Free Trial",
+        "end": {
+          "column": 3,
+          "line": 79
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trial",
+        "start": {
+          "column": 9,
+          "line": 76
+        }
+      },
+      {
+        "defaultMessage": "!!!Your license:",
+        "end": {
+          "column": 3,
+          "line": 83
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.yourLicense",
+        "start": {
+          "column": 15,
+          "line": 80
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends in {duration}.",
+        "end": {
+          "column": 3,
+          "line": 87
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialEndsIn",
+        "start": {
+          "column": 15,
+          "line": 84
+        }
+      },
+      {
+        "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+        "end": {
+          "column": 3,
+          "line": 91
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.trialUpdateBillingInfo",
+        "start": {
+          "column": 33,
+          "line": 88
         }
       }
     ],
@@ -2869,6 +2921,24 @@
     ],
     "path": "src/components/subscription/SubscriptionPopup.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Your trial was successfully activated. Happy messaging!",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/components/TrialActivationInfoBar.js",
+        "id": "infobar.trialActivated",
+        "start": {
+          "column": 11,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/components/TrialActivationInfoBar.json"
+  },
   {
     "descriptors": [
       {
@@ -3578,65 +3648,65 @@
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!Get the free Franz Professional 14 day trial and skip the line",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.trial.headline",
         "start": {
           "column": 17,
-          "line": 20
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Get a Franz Supporter License",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.upgrade.action",
         "start": {
           "column": 10,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Yes, I want the free 14 day trial of Franz Professional",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.trial.action",
         "start": {
           "column": 15,
-          "line": 28
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Franz will continue in {seconds} seconds.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "src/features/delayApp/Component.js",
         "id": "feature.delayApp.text",
         "start": {
           "column": 8,
-          "line": 32
+          "line": 33
         }
       }
     ],
@@ -4181,6 +4251,172 @@
     ],
     "path": "src/features/workspaces/components/WorkspaceSwitchingIndicator.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz Professional Yearly",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.pro-yearly",
+        "start": {
+          "column": 22,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Monthly",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.pro-monthly",
+        "start": {
+          "column": 23,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Yearly",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.personal-yearly",
+        "start": {
+          "column": 27,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Monthly",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.personal-monthly",
+        "start": {
+          "column": 28,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/helpers/plan-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/helpers/plan-helpers.json"
+  },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Franz Professional Yearly",
+        "end": {
+          "column": 3,
+          "line": 8
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-yearly",
+        "start": {
+          "column": 22,
+          "line": 5
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Monthly",
+        "end": {
+          "column": 3,
+          "line": 12
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.pro-monthly",
+        "start": {
+          "column": 23,
+          "line": 9
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Yearly",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-yearly",
+        "start": {
+          "column": 27,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Personal Monthly",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.personal-monthly",
+        "start": {
+          "column": 28,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Free",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.free",
+        "start": {
+          "column": 16,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Premium",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/helpers/pricing-helpers.js",
+        "id": "pricing.plan.legacy",
+        "start": {
+          "column": 18,
+          "line": 25
+        }
+      }
+    ],
+    "path": "src/helpers/pricing-helpers.json"
+  },
   {
     "descriptors": [
       {
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 4049e9400..eb0027424 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -4,9 +4,9 @@
   "feature.announcements.changelog.headline": "Changes in Franz {version}",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
-  "feature.delayApp.trial.action": "!!!Yes, I want the free 14 day trial of Franz Professional",
-  "feature.delayApp.trial.headline": "!!!Get the free Franz Professional 14 day trial and skip the line",
-  "feature.delayApp.upgrade.action": "!!!Get a Franz Supporter License",
+  "feature.delayApp.trial.action": "Yes, I want the free 14 day trial of Franz Professional",
+  "feature.delayApp.trial.headline": "Get the free Franz Professional 14 day trial and skip the line",
+  "feature.delayApp.upgrade.action": "Get a Franz Supporter License",
   "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
@@ -30,6 +30,7 @@
   "infobar.buttonReloadServices": "Reload services",
   "infobar.requiredRequestsFailed": "Could not load services and user information",
   "infobar.servicesUpdated": "Your services have been updated.",
+  "infobar.trialActivated": "Your trial was successfully activated. Happy messaging!",
   "infobar.updateAvailable": "A new update for Franz is available.",
   "invite.email.label": "Email address",
   "invite.headline.friends": "Invite 3 of your friends or colleagues",
@@ -106,25 +107,31 @@
   "password.submit.label": "Submit",
   "password.successInfo": "Please check your email",
   "premiumFeature.button.upgradeAccount": "Upgrade account",
-  "pricing.features.adFree": "!!!Forever ad-free",
-  "pricing.features.appDelays": "!!!No Waiting Screens",
-  "pricing.features.customWebsites": "!!!Add Custom Websites",
-  "pricing.features.onPremise": "!!!On-premise & other Hosted Services",
-  "pricing.features.serviceProxies": "!!!Service Proxies",
-  "pricing.features.spellchecker": "!!!Spellchecker support",
-  "pricing.features.teamManagement": "!!!Team Management",
-  "pricing.features.thirdPartyServices": "!!!Install 3rd party services",
-  "pricing.features.unlimitedServices": "!!!Add unlimited services",
-  "pricing.features.workspaces": "!!!Workspaces",
-  "pricing.trial.cta.accept": "!!!Yes, upgrade my account to Franz Professional",
-  "pricing.trial.cta.skip": "!!!Continue to Franz",
-  "pricing.trial.error": "!!!Sorry, we could not activate your trial!",
-  "pricing.trial.features.headline": "!!!Franz Professional includes:",
-  "pricing.trial.headline": "!!!Franz Professional",
-  "pricing.trial.subheadline": "!!!Your personal welcome offer:",
-  "pricing.trial.terms.automaticTrialEnd": "!!!Your free trial ends automatically after 14 days",
-  "pricing.trial.terms.headline": "!!!No strings attached",
-  "pricing.trial.terms.noCreditCard": "!!!No credit card required",
+  "pricing.features.adFree": "Forever ad-free",
+  "pricing.features.appDelays": "No Waiting Screens",
+  "pricing.features.customWebsites": "Add Custom Websites",
+  "pricing.features.onPremise": "On-premise & other Hosted Services",
+  "pricing.features.serviceProxies": "Service Proxies",
+  "pricing.features.spellchecker": "Spellchecker support",
+  "pricing.features.teamManagement": "Team Management",
+  "pricing.features.thirdPartyServices": "Install 3rd party services",
+  "pricing.features.unlimitedServices": "Add unlimited services",
+  "pricing.features.workspaces": "Workspaces",
+  "pricing.plan.free": "Franz Free",
+  "pricing.plan.legacy": "Franz Premium",
+  "pricing.plan.personal-monthly": "Franz Personal Monthly",
+  "pricing.plan.personal-yearly": "Franz Personal Yearly",
+  "pricing.plan.pro-monthly": "Franz Professional Monthly",
+  "pricing.plan.pro-yearly": "Franz Professional Yearly",
+  "pricing.trial.cta.accept": "Yes, upgrade my account to Franz Professional",
+  "pricing.trial.cta.skip": "Continue to Franz",
+  "pricing.trial.error": "Sorry, we could not activate your trial!",
+  "pricing.trial.features.headline": "Franz Professional includes:",
+  "pricing.trial.headline": "Franz Professional",
+  "pricing.trial.subheadline": "Your personal welcome offer:",
+  "pricing.trial.terms.automaticTrialEnd": "Your free trial ends automatically after 14 days",
+  "pricing.trial.terms.headline": "No strings attached",
+  "pricing.trial.terms.noCreditCard": "No credit card required",
   "service.crashHandler.action": "Reload {name}",
   "service.crashHandler.autoReload": "Trying to automatically restore {name} in {seconds} seconds",
   "service.crashHandler.headline": "Oh no!",
@@ -162,9 +169,13 @@
   "settings.account.invoiceDownload": "Download",
   "settings.account.manageSubscription.label": "Manage your subscription",
   "settings.account.successInfo": "Your changes have been saved",
+  "settings.account.trial": "Free Trial",
+  "settings.account.trialEndsIn": "Your free trial ends in {duration}.",
+  "settings.account.trialUpdateBillingInfo": "Please update your billing info to continue using {license} after your trial period.",
   "settings.account.tryReloadServices": "Try again",
   "settings.account.tryReloadUserInfoRequest": "Try again",
   "settings.account.userInfoRequestFailed": "Could not load user information",
+  "settings.account.yourLicense": "Your license:",
   "settings.app.buttonClearAllCache": "Clear cache",
   "settings.app.buttonInstallUpdate": "Restart & install update",
   "settings.app.buttonSearchForUpdate": "Check for updates",
@@ -358,4 +369,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 4969db910..1e21bad69 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 14,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,24 +17,24 @@
     "defaultMessage": "!!!Your Subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 18,
+      "line": 22,
       "column": 24
     },
     "end": {
-      "line": 21,
+      "line": 25,
       "column": 3
     }
   },
   {
-    "id": "settings.account.headlineUpgrade",
-    "defaultMessage": "!!!Upgrade your Account",
+    "id": "settings.account.headlineTrialUpgrade",
+    "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 22,
+      "line": 26,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!Danger Zone",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 26,
+      "line": 30,
       "column": 22
     },
     "end": {
-      "line": 29,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage your subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 30,
+      "line": 34,
       "column": 33
     },
     "end": {
-      "line": 33,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 45,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 46,
       "column": 21
     },
     "end": {
-      "line": 45,
+      "line": 49,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 50,
       "column": 18
     },
     "end": {
-      "line": 49,
+      "line": 53,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 54,
       "column": 19
     },
     "end": {
-      "line": 53,
+      "line": 57,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 25
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -147,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -160,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 17
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -173,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 14
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -186,11 +186,63 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 19
     },
     "end": {
-      "line": 73,
+      "line": 77,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trial",
+    "defaultMessage": "!!!Free Trial",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 78,
+      "column": 9
+    },
+    "end": {
+      "line": 81,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.yourLicense",
+    "defaultMessage": "!!!Your license:",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 82,
+      "column": 15
+    },
+    "end": {
+      "line": 85,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialEndsIn",
+    "defaultMessage": "!!!Your free trial ends in {duration}.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 86,
+      "column": 15
+    },
+    "end": {
+      "line": 89,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.trialUpdateBillingInfo",
+    "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 90,
+      "column": 33
+    },
+    "end": {
+      "line": 93,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/SubscriptionForm.json b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
index f98eb986f..224a78c4c 100644
--- a/src/i18n/messages/src/components/subscription/SubscriptionForm.json
+++ b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
@@ -1,7 +1,7 @@
 [
   {
-    "id": "subscription.submit.label",
-    "defaultMessage": "!!!Support the development of Franz",
+    "id": "subscription.cta.activateTrial",
+    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
       "line": 14,
@@ -13,12 +13,12 @@
     }
   },
   {
-    "id": "subscription.paymentSessionError",
-    "defaultMessage": "!!!Could not initialize payment form",
+    "id": "subscription.includedProFeatures",
+    "defaultMessage": "!!!The Franz Professional Plan includes:",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
       "line": 18,
-      "column": 23
+      "column": 20
     },
     "end": {
       "line": 21,
@@ -26,12 +26,12 @@
     }
   },
   {
-    "id": "subscription.type.free",
-    "defaultMessage": "!!!free",
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
       "line": 22,
-      "column": 12
+      "column": 29
     },
     "end": {
       "line": 25,
@@ -39,12 +39,12 @@
     }
   },
   {
-    "id": "subscription.type.month",
-    "defaultMessage": "!!!month",
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
       "line": 26,
-      "column": 15
+      "column": 16
     },
     "end": {
       "line": 29,
@@ -52,133 +52,16 @@
     }
   },
   {
-    "id": "subscription.type.year",
-    "defaultMessage": "!!!year",
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
       "line": 30,
-      "column": 14
+      "column": 21
     },
     "end": {
       "line": 33,
       "column": 3
     }
-  },
-  {
-    "id": "subscription.includedFeatures",
-    "defaultMessage": "!!!The Franz Premium Supporter Account includes",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 34,
-      "column": 20
-    },
-    "end": {
-      "line": 37,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.onpremise.mattermost",
-    "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 38,
-      "column": 13
-    },
-    "end": {
-      "line": 41,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.noInterruptions",
-    "defaultMessage": "!!!No app delays & nagging to upgrade license",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 42,
-      "column": 19
-    },
-    "end": {
-      "line": 45,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.proxy",
-    "defaultMessage": "!!!Proxy support for services",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 46,
-      "column": 9
-    },
-    "end": {
-      "line": 49,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.spellchecker",
-    "defaultMessage": "!!!Support for Spellchecker",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 50,
-      "column": 16
-    },
-    "end": {
-      "line": 53,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.workspaces",
-    "defaultMessage": "!!!Organize your services in workspaces",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 54,
-      "column": 14
-    },
-    "end": {
-      "line": 57,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.ads",
-    "defaultMessage": "!!!No ads, ever!",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 58,
-      "column": 7
-    },
-    "end": {
-      "line": 61,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.features.comingSoon",
-    "defaultMessage": "!!!coming soon",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 62,
-      "column": 14
-    },
-    "end": {
-      "line": 65,
-      "column": 3
-    }
-  },
-  {
-    "id": "subscription.euTaxInfo",
-    "defaultMessage": "!!!EU residents: local sales tax may apply",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 66,
-      "column": 13
-    },
-    "end": {
-      "line": 69,
-      "column": 3
-    }
   }
 ]
\ No newline at end of file
diff --git a/src/i18n/messages/src/helpers/plan-helpers.json b/src/i18n/messages/src/helpers/plan-helpers.json
new file mode 100644
index 000000000..de27dfcfd
--- /dev/null
+++ b/src/i18n/messages/src/helpers/plan-helpers.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": "pricing.plan.pro-yearly",
+    "defaultMessage": "!!!Franz Professional Yearly",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 22
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.pro-monthly",
+    "defaultMessage": "!!!Franz Professional Monthly",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 23
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-yearly",
+    "defaultMessage": "!!!Franz Personal Yearly",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 27
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-monthly",
+    "defaultMessage": "!!!Franz Personal Monthly",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 28
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 21,
+      "column": 16
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/plan-helpers.js",
+    "start": {
+      "line": 25,
+      "column": 18
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/helpers/pricing-helpers.json b/src/i18n/messages/src/helpers/pricing-helpers.json
new file mode 100644
index 000000000..4030a3e3b
--- /dev/null
+++ b/src/i18n/messages/src/helpers/pricing-helpers.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": "pricing.plan.pro-yearly",
+    "defaultMessage": "!!!Franz Professional Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 5,
+      "column": 22
+    },
+    "end": {
+      "line": 8,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.pro-monthly",
+    "defaultMessage": "!!!Franz Professional Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 9,
+      "column": 23
+    },
+    "end": {
+      "line": 12,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-yearly",
+    "defaultMessage": "!!!Franz Personal Yearly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 13,
+      "column": 27
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.personal-monthly",
+    "defaultMessage": "!!!Franz Personal Monthly",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 17,
+      "column": 28
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.free",
+    "defaultMessage": "!!!Franz Free",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 21,
+      "column": 16
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.plan.legacy",
+    "defaultMessage": "!!!Franz Premium",
+    "file": "src/helpers/pricing-helpers.js",
+    "start": {
+      "line": 25,
+      "column": 18
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 72c4b4d0b..55ee52b18 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -334,6 +334,8 @@ export default class AppStore extends Store {
       this.locale = this._getDefaultLocale();
     }
 
+    moment.locale(this.locale);
+
     debug(`Set locale to "${this.locale}"`);
   }
 
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 1baff8b54..0955aaa0c 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -360,6 +360,7 @@
     .account__subscription-button { margin-left: auto; }
     .franz-form__button { white-space: nowrap; }
     div { height: auto; }
+    [data-type="franz-button"] div { height: 100% }
 
     .invoices {
       width: 100%;
-- 
cgit v1.2.3-70-g09d2


From 478b5fc6574765072eafd4fa074ae832e67627bf Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 19 Aug 2019 12:11:38 +0200
Subject: Add trial / subscription handling

---
 .../settings/account/AccountDashboard.js           |  12 +-
 src/components/settings/team/TeamDashboard.js      |  10 +-
 src/components/subscription/SubscriptionForm.js    |  52 ++--
 src/components/subscription/SubscriptionPopup.js   |   6 +-
 src/components/subscription/TrialForm.js           |  99 ++++++
 .../subscription/SubscriptionFormScreen.js         |  83 ++----
 .../subscription/SubscriptionPopupScreen.js        |   3 +-
 src/features/workspaces/store.js                   |   4 +-
 src/i18n/locales/defaultMessages.json              | 332 ++++++++-------------
 src/i18n/locales/en-US.json                        |  26 +-
 .../settings/account/AccountDashboard.json         |  77 ++---
 .../components/subscription/SubscriptionForm.json  |  51 ++--
 .../src/components/subscription/TrialForm.json     |  80 +++++
 src/stores/UserStore.js                            |   2 -
 14 files changed, 423 insertions(+), 414 deletions(-)
 create mode 100644 src/components/subscription/TrialForm.js
 create mode 100644 src/i18n/messages/src/components/subscription/TrialForm.json

(limited to 'src/containers')

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 079d50380..6d10487e8 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -23,10 +23,6 @@ const messages = defineMessages({
     id: 'settings.account.headlineSubscription',
     defaultMessage: '!!!Your Subscription',
   },
-  headlineUpgrade: {
-    id: 'settings.account.headlineTrialUpgrade',
-    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
-  },
   headlineDangerZone: {
     id: 'settings.account.headlineDangerZone',
     defaultMessage: '!!Danger Zone',
@@ -97,10 +93,8 @@ export default @observer class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
     isLoading: PropTypes.bool.isRequired,
-    isLoadingPlans: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
     retryUserInfoRequest: PropTypes.func.isRequired,
-    onCloseSubscriptionWindow: PropTypes.func.isRequired,
     deleteAccount: PropTypes.func.isRequired,
     isLoadingDeleteAccount: PropTypes.bool.isRequired,
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
@@ -117,10 +111,8 @@ export default @observer class AccountDashboard extends Component {
     const {
       user,
       isLoading,
-      isLoadingPlans,
       userInfoRequestFailed,
       retryUserInfoRequest,
-      onCloseSubscriptionWindow,
       deleteAccount,
       isLoadingDeleteAccount,
       isDeleteAccountSuccessful,
@@ -134,7 +126,6 @@ export default @observer class AccountDashboard extends Component {
 
     if (user.team && user.team.plan) {
       planName = i18nPlanName(user.team.plan, intl);
-      console.log(planName);
     }
 
     return (
@@ -221,7 +212,7 @@ export default @observer class AccountDashboard extends Component {
                       )}
                     </div>
                   </div>
-                  {user.isSubscriptionOwner && (
+                  {user.isPremium && user.isSubscriptionOwner && (
                     <div className="account">
                       <div className="account__box">
                         <H2>
@@ -268,7 +259,6 @@ export default @observer class AccountDashboard extends Component {
                   {!user.isPremium && (
                     <div className="account franz-form">
                       <div className="account__box">
-                        <H2>{intl.formatMessage(messages.headlineUpgrade)}</H2>
                         <SubscriptionForm />
                       </div>
                     </div>
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 82c517fcb..990ee52e7 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -133,13 +133,13 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
                         </div>
                         <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
                       </div>
-                      <Button
-                        label={intl.formatMessage(messages.manageButton)}
-                        onClick={openTeamManagement}
-                        className={classes.cta}
-                      />
                     </>
                   </PremiumFeatureContainer>
+                  <Button
+                    label={intl.formatMessage(messages.manageButton)}
+                    onClick={openTeamManagement}
+                    className={classes.cta}
+                  />
                 </>
               )}
             </>
diff --git a/src/components/subscription/SubscriptionForm.js b/src/components/subscription/SubscriptionForm.js
index 0c630f047..641368734 100644
--- a/src/components/subscription/SubscriptionForm.js
+++ b/src/components/subscription/SubscriptionForm.js
@@ -1,35 +1,30 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
+import { defineMessages, intlShape, IntlProvider } from 'react-intl';
 import injectSheet from 'react-jss';
 
-import { H3 } from '@meetfranz/ui';
+import { H3, H2 } from '@meetfranz/ui';
 
 import { Button } from '@meetfranz/forms';
 import { FeatureList } from '../ui/FeatureList';
-import { FeatureItem } from '../ui/FeatureItem';
 
 const messages = defineMessages({
   submitButtonLabel: {
-    id: 'subscription.cta.activateTrial',
-    defaultMessage: '!!!Yes, upgrade my account to Franz Professional',
+    id: 'subscription.cta.choosePlan',
+    defaultMessage: '!!!Choose your plan',
   },
-  includedFeatures: {
-    id: 'subscription.includedProFeatures',
-    defaultMessage: '!!!The Franz Professional Plan includes:',
-  },
-  noStringsAttachedHeadline: {
-    id: 'pricing.trial.terms.headline',
-    defaultMessage: '!!!No strings attached',
+  teaserHeadline: {
+    id: 'settings.account.headlineUpgradeAccount',
+    defaultMessage: '!!!Upgrade your account and get the full Franz experience',
   },
-  noCreditCard: {
-    id: 'pricing.trial.terms.noCreditCard',
-    defaultMessage: '!!!No credit card required',
+  teaserText: {
+    id: 'subscription.teaser.intro',
+    defaultMessage: '!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!',
   },
-  automaticTrialEnd: {
-    id: 'pricing.trial.terms.automaticTrialEnd',
-    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  includedFeatures: {
+    id: 'subscription.teaser.includedFeatures',
+    defaultMessage: '!!!Paid Franz Plans include:',
   },
 });
 
@@ -37,14 +32,11 @@ const styles = () => ({
   activateTrialButton: {
     margin: [40, 0, 50],
   },
-  keyTerms: {
-    marginTop: 20,
-  },
 });
 
 export default @observer @injectSheet(styles) class SubscriptionForm extends Component {
   static propTypes = {
-    activateTrial: PropTypes.func.isRequired,
+    selectPlan: PropTypes.func.isRequired,
     isActivatingTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
   };
@@ -56,28 +48,20 @@ export default @observer @injectSheet(styles) class SubscriptionForm extends Com
   render() {
     const {
       isActivatingTrial,
-      activateTrial,
+      selectPlan,
       classes,
     } = this.props;
     const { intl } = this.context;
 
-    console.log('isActivatingTrial', isActivatingTrial);
-
     return (
       <>
-        <H3 className={classes.keyTerms}>
-          {intl.formatMessage(messages.noStringsAttachedHeadline)}
-        </H3>
-        <ul>
-          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
-          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
-        </ul>
-
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <p>{intl.formatMessage(messages.teaserText)}</p>
         <Button
           label={intl.formatMessage(messages.submitButtonLabel)}
           className={classes.activateTrialButton}
           busy={isActivatingTrial}
-          onClick={activateTrial}
+          onClick={selectPlan}
           stretch
         />
         <div className="subscription__premium-info">
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 0f6f0260f..9404e9c19 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -43,7 +43,7 @@ export default @observer class SubscriptionPopup extends Component {
 
     setTimeout(() => {
       this.props.closeWindow();
-    }, ms('4s'));
+    }, ms('1s'));
   }
 
   render() {
@@ -61,8 +61,8 @@ export default @observer class SubscriptionPopup extends Component {
             autosize
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
-            // onNewWindow={(event, url, frameName, options) =>
-            //   openWindow({ event, url, frameName, options })}
+            // webpreferences="allowpopups"
+            // onNewWindow={(event, url, frameName, options) => console.log(event, url)}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
new file mode 100644
index 000000000..9c512b5f2
--- /dev/null
+++ b/src/components/subscription/TrialForm.js
@@ -0,0 +1,99 @@
+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 { H3, H2 } from '@meetfranz/ui';
+
+import { Button } from '@meetfranz/forms';
+import { FeatureList } from '../ui/FeatureList';
+import { FeatureItem } from '../ui/FeatureItem';
+
+const messages = defineMessages({
+  submitButtonLabel: {
+    id: 'subscription.cta.activateTrial',
+    defaultMessage: '!!!Yes, start the free Franz Professional trial',
+  },
+  teaserHeadline: {
+    id: 'settings.account.headlineTrialUpgrade',
+    defaultMessage: '!!!Get the free 14 day Franz Professional Trial',
+  },
+  includedFeatures: {
+    id: 'subscription.includedProFeatures',
+    defaultMessage: '!!!The Franz Professional Plan includes:',
+  },
+  noStringsAttachedHeadline: {
+    id: 'pricing.trial.terms.headline',
+    defaultMessage: '!!!No strings attached',
+  },
+  noCreditCard: {
+    id: 'pricing.trial.terms.noCreditCard',
+    defaultMessage: '!!!No credit card required',
+  },
+  automaticTrialEnd: {
+    id: 'pricing.trial.terms.automaticTrialEnd',
+    defaultMessage: '!!!Your free trial ends automatically after 14 days',
+  },
+});
+
+const styles = () => ({
+  activateTrialButton: {
+    margin: [40, 0, 50],
+  },
+  keyTerms: {
+    marginTop: 20,
+  },
+});
+
+export default @observer @injectSheet(styles) class TrialForm extends Component {
+  static propTypes = {
+    activateTrial: PropTypes.func.isRequired,
+    isActivatingTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      isActivatingTrial,
+      activateTrial,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    console.log('isActivatingTrial', isActivatingTrial);
+
+    return (
+      <>
+        <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
+        <H3 className={classes.keyTerms}>
+          {intl.formatMessage(messages.noStringsAttachedHeadline)}
+        </H3>
+        <ul>
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.noCreditCard)} />
+          <FeatureItem icon="👉" name={intl.formatMessage(messages.automaticTrialEnd)} />
+        </ul>
+
+        <Button
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          className={classes.activateTrialButton}
+          busy={isActivatingTrial}
+          onClick={activateTrial}
+          stretch
+        />
+        <div className="subscription__premium-info">
+          <H3>
+            {intl.formatMessage(messages.includedFeatures)}
+          </H3>
+          <div className="subscription">
+            <FeatureList />
+          </div>
+        </div>
+      </>
+    );
+  }
+}
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 7486cc498..587889e7f 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -1,4 +1,3 @@
-import { remote } from 'electron';
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
@@ -6,70 +5,31 @@ import { inject, observer } from 'mobx-react';
 import PaymentStore from '../../stores/PaymentStore';
 
 import SubscriptionForm from '../../components/subscription/SubscriptionForm';
-
-const { BrowserWindow } = remote;
+import TrialForm from '../../components/subscription/TrialForm';
 
 export default @inject('stores', 'actions') @observer class SubscriptionFormScreen extends Component {
-  static propTypes = {
-    onCloseWindow: PropTypes.func,
-    content: PropTypes.node,
-    showSkipOption: PropTypes.bool,
-    skipAction: PropTypes.func,
-    skipButtonLabel: PropTypes.string,
-    hideInfo: PropTypes.bool,
-  }
-
-  static defaultProps = {
-    onCloseWindow: () => null,
-    content: '',
-    showSkipOption: false,
-    skipAction: () => null,
-    skipButtonLabel: '',
-    hideInfo: false,
-  }
-
-  async handlePayment(plan) {
+  async openBrowser() {
     const {
       actions,
       stores,
-      onCloseWindow,
     } = this.props;
 
-    const interval = plan;
+    const {
+      user,
+      features,
+    } = stores;
+
+    let hostedPageURL = user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    const url = new URL(hostedPageURL);
+    const params = new URLSearchParams(url.search.slice(1));
 
-    const { id } = stores.payment.plan[interval];
-    actions.payment.createHostedPage({
-      planId: id,
-    });
+    params.append('authToken', user.authToken);
 
-    const hostedPage = await stores.payment.createHostedPageRequest;
+    hostedPageURL = `${url.origin}${url.pathname}?${params.toString()}`;
 
-    if (hostedPage.url) {
-      if (hostedPage.legacyCheckoutFlow) {
-        const paymentWindow = new BrowserWindow({
-          parent: remote.getCurrentWindow(),
-          modal: true,
-          title: '🔒 Franz Supporter License',
-          width: 600,
-          height: window.innerHeight - 100,
-          maxWidth: 600,
-          minWidth: 600,
-          webPreferences: {
-            nodeIntegration: true,
-            webviewTag: true,
-          },
-        });
-        paymentWindow.loadURL(`file://${__dirname}/../../index.html#/payment/${encodeURIComponent(hostedPage.url)}`);
+    actions.app.openExternalUrl({ url: hostedPageURL });
 
-        paymentWindow.on('closed', () => {
-          onCloseWindow();
-        });
-      } else {
-        actions.app.openExternalUrl({
-          url: hostedPage.url,
-        });
-      }
-    }
+    console.log('hostedPage', hostedPageURL);
   }
 
   render() {
@@ -77,8 +37,21 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       actions,
       stores,
     } = this.props;
+
+    const { data: user } = stores.user;
+
+    if (user.hadSubscription) {
+      return (
+        <SubscriptionForm
+          plan={stores.payment.plan}
+          selectPlan={() => this.openBrowser()}
+          isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
+        />
+      );
+    }
+
     return (
-      <SubscriptionForm
+      <TrialForm
         plan={stores.payment.plan}
         activateTrial={() => actions.user.activateTrial({ planId: stores.features.features.defaultTrialPlan })}
         isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
diff --git a/src/containers/subscription/SubscriptionPopupScreen.js b/src/containers/subscription/SubscriptionPopupScreen.js
index f76d6c5a6..0de5a87c4 100644
--- a/src/containers/subscription/SubscriptionPopupScreen.js
+++ b/src/containers/subscription/SubscriptionPopupScreen.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
 import SubscriptionPopup from '../../components/subscription/SubscriptionPopup';
+import { isDevMode } from '../../environment';
 
 
 export default @inject('stores', 'actions') @observer class SubscriptionPopupScreen extends Component {
@@ -13,7 +14,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionPopupScr
   completeCheck(event) {
     const { url } = event;
 
-    if ((url.includes('recurly') && url.includes('confirmation')) || (url.includes('meetfranz') && url.includes('success'))) {
+    if ((url.includes('recurly') && url.includes('confirmation')) || ((url.includes('meetfranz') || isDevMode) && url.includes('success'))) {
       this.setState({
         complete: true,
       });
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index caa73619e..e44569be9 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -256,8 +256,8 @@ export default class WorkspacesStore extends FeatureStore {
     const { features, user } = this.stores;
     const { isPremium } = user.data;
     const { isWorkspaceIncludedInCurrentPlan } = features.features;
-    this.isPremiumFeature = isWorkspaceIncludedInCurrentPlan;
-    this.isPremiumUpgradeRequired = isWorkspaceIncludedInCurrentPlan && !isPremium;
+    this.isPremiumFeature = !isWorkspaceIncludedInCurrentPlan;
+    this.isPremiumUpgradeRequired = !isWorkspaceIncludedInCurrentPlan && !isPremium;
   };
 
   _setWorkspaceBeingEditedReaction = () => {
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index bdb1def11..e3c50f259 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1242,247 +1242,234 @@
         "defaultMessage": "!!!Account",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 21
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Your Subscription",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 25
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineSubscription",
         "start": {
           "column": 24,
-          "line": 20
-        }
-      },
-      {
-        "defaultMessage": "!!!Upgrade your Account",
-        "end": {
-          "column": 3,
-          "line": 27
-        },
-        "file": "src/components/settings/account/AccountDashboard.js",
-        "id": "settings.account.headlineUpgrade",
-        "start": {
-          "column": 19,
-          "line": 24
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!Danger Zone",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 29
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineDangerZone",
         "start": {
           "column": 22,
-          "line": 28
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Manage your subscription",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 33
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.manageSubscription.label",
         "start": {
           "column": 33,
-          "line": 32
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Basic Account",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 37
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 36
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 41
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 40
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 45
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 44
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 49
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 48
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 53
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 52
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 57
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 56
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 61
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 60
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 65
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 64
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 69
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 68
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 75
+          "line": 73
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 72
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!Free Trial",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 77
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trial",
         "start": {
           "column": 9,
-          "line": 76
+          "line": 74
         }
       },
       {
         "defaultMessage": "!!!Your license:",
         "end": {
           "column": 3,
-          "line": 83
+          "line": 81
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.yourLicense",
         "start": {
           "column": 15,
-          "line": 80
+          "line": 78
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends in {duration}.",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 85
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialEndsIn",
         "start": {
           "column": 15,
-          "line": 84
+          "line": 82
         }
       },
       {
         "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 89
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialUpdateBillingInfo",
         "start": {
           "column": 33,
-          "line": 88
+          "line": 86
         }
       }
     ],
@@ -2706,220 +2693,173 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Support the development of Franz",
+        "defaultMessage": "!!!Choose your plan",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 16
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.submit.label",
+        "id": "subscription.cta.choosePlan",
         "start": {
           "column": 21,
-          "line": 14
-        }
-      },
-      {
-        "defaultMessage": "!!!Could not initialize payment form",
-        "end": {
-          "column": 3,
-          "line": 21
-        },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.paymentSessionError",
-        "start": {
-          "column": 23,
-          "line": 18
-        }
-      },
-      {
-        "defaultMessage": "!!!free",
-        "end": {
-          "column": 3,
-          "line": 25
-        },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.free",
-        "start": {
-          "column": 12,
-          "line": 22
+          "line": 13
         }
       },
       {
-        "defaultMessage": "!!!month",
+        "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 20
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.month",
+        "id": "settings.account.headlineUpgradeAccount",
         "start": {
-          "column": 15,
-          "line": 26
+          "column": 18,
+          "line": 17
         }
       },
       {
-        "defaultMessage": "!!!year",
+        "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 24
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.type.year",
+        "id": "subscription.teaser.intro",
         "start": {
           "column": 14,
-          "line": 30
+          "line": 21
         }
       },
       {
-        "defaultMessage": "!!!The Franz Premium Supporter Account includes",
+        "defaultMessage": "!!!Paid Franz Plans include:",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 28
         },
         "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.includedFeatures",
+        "id": "subscription.teaser.includedFeatures",
         "start": {
           "column": 20,
-          "line": 34
-        }
-      },
-      {
-        "defaultMessage": "!!!Add on-premise/hosted services like Mattermost",
-        "end": {
-          "column": 3,
-          "line": 41
-        },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.onpremise.mattermost",
-        "start": {
-          "column": 13,
-          "line": 38
+          "line": 25
         }
-      },
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionForm.json"
+  },
+  {
+    "descriptors": [
       {
-        "defaultMessage": "!!!No app delays & nagging to upgrade license",
+        "defaultMessage": "!!!Cancel",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 14
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.noInterruptions",
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonCancel",
         "start": {
-          "column": 19,
-          "line": 42
+          "column": 16,
+          "line": 11
         }
       },
       {
-        "defaultMessage": "!!!Proxy support for services",
+        "defaultMessage": "!!!Done",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 18
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.proxy",
+        "file": "src/components/subscription/SubscriptionPopup.js",
+        "id": "subscriptionPopup.buttonDone",
         "start": {
-          "column": 9,
-          "line": 46
+          "column": 14,
+          "line": 15
         }
-      },
+      }
+    ],
+    "path": "src/components/subscription/SubscriptionPopup.json"
+  },
+  {
+    "descriptors": [
       {
-        "defaultMessage": "!!!Support for Spellchecker",
+        "defaultMessage": "!!!Yes, start the free Franz Professional trial",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 17
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.spellchecker",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.activateTrial",
         "start": {
-          "column": 16,
-          "line": 50
+          "column": 21,
+          "line": 14
         }
       },
       {
-        "defaultMessage": "!!!Organize your services in workspaces",
+        "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 21
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.workspaces",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "settings.account.headlineTrialUpgrade",
         "start": {
-          "column": 14,
-          "line": 54
+          "column": 18,
+          "line": 18
         }
       },
       {
-        "defaultMessage": "!!!No ads, ever!",
+        "defaultMessage": "!!!The Franz Professional Plan includes:",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 25
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.ads",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.includedProFeatures",
         "start": {
-          "column": 7,
-          "line": 58
+          "column": 20,
+          "line": 22
         }
       },
       {
-        "defaultMessage": "!!!coming soon",
+        "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 29
         },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.features.comingSoon",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.headline",
         "start": {
-          "column": 14,
-          "line": 62
+          "column": 29,
+          "line": 26
         }
       },
       {
-        "defaultMessage": "!!!EU residents: local sales tax may apply",
-        "end": {
-          "column": 3,
-          "line": 69
-        },
-        "file": "src/components/subscription/SubscriptionForm.js",
-        "id": "subscription.euTaxInfo",
-        "start": {
-          "column": 13,
-          "line": 66
-        }
-      }
-    ],
-    "path": "src/components/subscription/SubscriptionForm.json"
-  },
-  {
-    "descriptors": [
-      {
-        "defaultMessage": "!!!Cancel",
+        "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
-          "line": 14
+          "line": 33
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonCancel",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.noCreditCard",
         "start": {
           "column": 16,
-          "line": 11
+          "line": 30
         }
       },
       {
-        "defaultMessage": "!!!Done",
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 37
         },
-        "file": "src/components/subscription/SubscriptionPopup.js",
-        "id": "subscriptionPopup.buttonDone",
+        "file": "src/components/subscription/TrialForm.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
-          "column": 14,
-          "line": 15
+          "column": 21,
+          "line": 34
         }
       }
     ],
-    "path": "src/components/subscription/SubscriptionPopup.json"
+    "path": "src/components/subscription/TrialForm.json"
   },
   {
     "descriptors": [
@@ -4254,81 +4194,55 @@
   {
     "descriptors": [
       {
-        "defaultMessage": "!!!Franz Professional Yearly",
+        "defaultMessage": "!!!Franz Professional",
         "end": {
           "column": 3,
           "line": 8
         },
         "file": "src/helpers/plan-helpers.js",
-        "id": "pricing.plan.pro-yearly",
+        "id": "pricing.plan.pro",
         "start": {
-          "column": 22,
+          "column": 15,
           "line": 5
         }
       },
       {
-        "defaultMessage": "!!!Franz Professional Monthly",
+        "defaultMessage": "!!!Franz Personal",
         "end": {
           "column": 3,
           "line": 12
         },
         "file": "src/helpers/plan-helpers.js",
-        "id": "pricing.plan.pro-monthly",
+        "id": "pricing.plan.personal",
         "start": {
-          "column": 23,
+          "column": 20,
           "line": 9
         }
       },
-      {
-        "defaultMessage": "!!!Franz Personal Yearly",
-        "end": {
-          "column": 3,
-          "line": 16
-        },
-        "file": "src/helpers/plan-helpers.js",
-        "id": "pricing.plan.personal-yearly",
-        "start": {
-          "column": 27,
-          "line": 13
-        }
-      },
-      {
-        "defaultMessage": "!!!Franz Personal Monthly",
-        "end": {
-          "column": 3,
-          "line": 20
-        },
-        "file": "src/helpers/plan-helpers.js",
-        "id": "pricing.plan.personal-monthly",
-        "start": {
-          "column": 28,
-          "line": 17
-        }
-      },
       {
         "defaultMessage": "!!!Franz Free",
         "end": {
           "column": 3,
-          "line": 24
+          "line": 16
         },
         "file": "src/helpers/plan-helpers.js",
         "id": "pricing.plan.free",
         "start": {
           "column": 16,
-          "line": 21
+          "line": 13
         }
       },
       {
         "defaultMessage": "!!!Franz Premium",
         "end": {
           "column": 3,
-          "line": 28
+          "line": 20
         },
         "file": "src/helpers/plan-helpers.js",
         "id": "pricing.plan.legacy",
         "start": {
           "column": 18,
-          "line": 25
+          "line": 17
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index a4c828f92..57785b74a 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -123,7 +123,11 @@
   "pricing.plan.free": "Franz Free",
   "pricing.plan.legacy": "Franz Premium",
   "pricing.plan.personal": "Franz Personal",
+  "pricing.plan.personal-monthly": "Franz Personal Monthly",
+  "pricing.plan.personal-yearly": "Franz Personal Yearly",
   "pricing.plan.pro": "Franz Professional",
+  "pricing.plan.pro-monthly": "Franz Professional Monthly",
+  "pricing.plan.pro-yearly": "Franz Professional Yearly",
   "pricing.trial.cta.accept": "Yes, upgrade my account to Franz Professional",
   "pricing.trial.cta.skip": "Continue to Franz",
   "pricing.trial.error": "Sorry, we could not activate your trial!",
@@ -166,7 +170,8 @@
   "settings.account.headlinePassword": "Change password",
   "settings.account.headlineProfile": "Update profile",
   "settings.account.headlineSubscription": "Your subscription",
-  "settings.account.headlineUpgrade": "Upgrade your account & support Franz",
+  "settings.account.headlineTrialUpgrade": "Get the free 14 day Franz Professional Trial",
+  "settings.account.headlineUpgradeAccount": "Upgrade your account & get the full Franz experience",
   "settings.account.invoiceDownload": "Download",
   "settings.account.manageSubscription.label": "Manage your subscription",
   "settings.account.successInfo": "Your changes have been saved",
@@ -327,20 +332,11 @@
   "signup.link.login": "Already have an account, sign in?",
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
-  "subscription.euTaxInfo": "EU residents: local sales tax may apply",
-  "subscription.features.ads": "No ads, ever!",
-  "subscription.features.comingSoon": "coming soon",
-  "subscription.features.noInterruptions": "No app delays & nagging to upgrade license",
-  "subscription.features.onpremise.mattermost": "Add on-premise/hosted services like Mattermost",
-  "subscription.features.proxy": "Proxy support for services",
-  "subscription.features.spellchecker": "Support for spellchecker",
-  "subscription.features.workspaces": "Organize your services in workspaces",
-  "subscription.includedFeatures": "Paid Franz Premium Supporter Account includes",
-  "subscription.paymentSessionError": "Could not initialize payment form",
-  "subscription.submit.label": "I want to support the development of Franz",
-  "subscription.type.free": "free",
-  "subscription.type.month": "month",
-  "subscription.type.year": "year",
+  "subscription.cta.activateTrial": "Yes, start the free Franz Professional trial",
+  "subscription.cta.choosePlan": "Choose your plan",
+  "subscription.includedProFeatures": "The Franz Professional Plan includes:",
+  "subscription.teaser.includedFeatures": "Paid Franz Plans include:",
+  "subscription.teaser.intro": "Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
   "subscriptionPopup.buttonCancel": "Cancel",
   "subscriptionPopup.buttonDone": "Done",
   "tabs.item.deleteService": "Delete service",
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 1e21bad69..68d3e6dd1 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -25,29 +25,16 @@
       "column": 3
     }
   },
-  {
-    "id": "settings.account.headlineTrialUpgrade",
-    "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
-    "file": "src/components/settings/account/AccountDashboard.js",
-    "start": {
-      "line": 26,
-      "column": 19
-    },
-    "end": {
-      "line": 29,
-      "column": 3
-    }
-  },
   {
     "id": "settings.account.headlineDangerZone",
     "defaultMessage": "!!Danger Zone",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 30,
+      "line": 26,
       "column": 22
     },
     "end": {
-      "line": 33,
+      "line": 29,
       "column": 3
     }
   },
@@ -56,11 +43,11 @@
     "defaultMessage": "!!!Manage your subscription",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 30,
       "column": 33
     },
     "end": {
-      "line": 37,
+      "line": 33,
       "column": 3
     }
   },
@@ -69,11 +56,11 @@
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 34,
       "column": 20
     },
     "end": {
-      "line": 41,
+      "line": 37,
       "column": 3
     }
   },
@@ -82,11 +69,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 38,
       "column": 22
     },
     "end": {
-      "line": 45,
+      "line": 41,
       "column": 3
     }
   },
@@ -95,11 +82,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 42,
       "column": 21
     },
     "end": {
-      "line": 49,
+      "line": 45,
       "column": 3
     }
   },
@@ -108,11 +95,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 46,
       "column": 18
     },
     "end": {
-      "line": 53,
+      "line": 49,
       "column": 3
     }
   },
@@ -121,11 +108,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 50,
       "column": 19
     },
     "end": {
-      "line": 57,
+      "line": 53,
       "column": 3
     }
   },
@@ -134,11 +121,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 54,
       "column": 25
     },
     "end": {
-      "line": 61,
+      "line": 57,
       "column": 3
     }
   },
@@ -147,11 +134,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 58,
       "column": 28
     },
     "end": {
-      "line": 65,
+      "line": 61,
       "column": 3
     }
   },
@@ -160,11 +147,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 62,
       "column": 17
     },
     "end": {
-      "line": 69,
+      "line": 65,
       "column": 3
     }
   },
@@ -173,11 +160,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 66,
       "column": 14
     },
     "end": {
-      "line": 73,
+      "line": 69,
       "column": 3
     }
   },
@@ -186,11 +173,11 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 74,
+      "line": 70,
       "column": 19
     },
     "end": {
-      "line": 77,
+      "line": 73,
       "column": 3
     }
   },
@@ -199,11 +186,11 @@
     "defaultMessage": "!!!Free Trial",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 78,
+      "line": 74,
       "column": 9
     },
     "end": {
-      "line": 81,
+      "line": 77,
       "column": 3
     }
   },
@@ -212,11 +199,11 @@
     "defaultMessage": "!!!Your license:",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 82,
+      "line": 78,
       "column": 15
     },
     "end": {
-      "line": 85,
+      "line": 81,
       "column": 3
     }
   },
@@ -225,11 +212,11 @@
     "defaultMessage": "!!!Your free trial ends in {duration}.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 86,
+      "line": 82,
       "column": 15
     },
     "end": {
-      "line": 89,
+      "line": 85,
       "column": 3
     }
   },
@@ -238,11 +225,11 @@
     "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 90,
+      "line": 86,
       "column": 33
     },
     "end": {
-      "line": 93,
+      "line": 89,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/SubscriptionForm.json b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
index 224a78c4c..6d235254e 100644
--- a/src/i18n/messages/src/components/subscription/SubscriptionForm.json
+++ b/src/i18n/messages/src/components/subscription/SubscriptionForm.json
@@ -1,66 +1,53 @@
 [
   {
-    "id": "subscription.cta.activateTrial",
-    "defaultMessage": "!!!Yes, upgrade my account to Franz Professional",
+    "id": "subscription.cta.choosePlan",
+    "defaultMessage": "!!!Choose your plan",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 14,
+      "line": 13,
       "column": 21
     },
     "end": {
-      "line": 17,
+      "line": 16,
       "column": 3
     }
   },
   {
-    "id": "subscription.includedProFeatures",
-    "defaultMessage": "!!!The Franz Professional Plan includes:",
+    "id": "settings.account.headlineUpgradeAccount",
+    "defaultMessage": "!!!Upgrade your account and get the full Franz experience",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 18,
-      "column": 20
-    },
-    "end": {
-      "line": 21,
-      "column": 3
-    }
-  },
-  {
-    "id": "pricing.trial.terms.headline",
-    "defaultMessage": "!!!No strings attached",
-    "file": "src/components/subscription/SubscriptionForm.js",
-    "start": {
-      "line": 22,
-      "column": 29
+      "line": 17,
+      "column": 18
     },
     "end": {
-      "line": 25,
+      "line": 20,
       "column": 3
     }
   },
   {
-    "id": "pricing.trial.terms.noCreditCard",
-    "defaultMessage": "!!!No credit card required",
+    "id": "subscription.teaser.intro",
+    "defaultMessage": "!!!Franz 5 comes with a wide range of new features to boost up your everyday communication - batteries included. Check out our new plans and find out which one suits you most!",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 26,
-      "column": 16
+      "line": 21,
+      "column": 14
     },
     "end": {
-      "line": 29,
+      "line": 24,
       "column": 3
     }
   },
   {
-    "id": "pricing.trial.terms.automaticTrialEnd",
-    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "id": "subscription.teaser.includedFeatures",
+    "defaultMessage": "!!!Paid Franz Plans include:",
     "file": "src/components/subscription/SubscriptionForm.js",
     "start": {
-      "line": 30,
-      "column": 21
+      "line": 25,
+      "column": 20
     },
     "end": {
-      "line": 33,
+      "line": 28,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/subscription/TrialForm.json b/src/i18n/messages/src/components/subscription/TrialForm.json
new file mode 100644
index 000000000..da1f01518
--- /dev/null
+++ b/src/i18n/messages/src/components/subscription/TrialForm.json
@@ -0,0 +1,80 @@
+[
+  {
+    "id": "subscription.cta.activateTrial",
+    "defaultMessage": "!!!Yes, start the free Franz Professional trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 14,
+      "column": 21
+    },
+    "end": {
+      "line": 17,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.account.headlineTrialUpgrade",
+    "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 18,
+      "column": 18
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "subscription.includedProFeatures",
+    "defaultMessage": "!!!The Franz Professional Plan includes:",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 22,
+      "column": 20
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.headline",
+    "defaultMessage": "!!!No strings attached",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 26,
+      "column": 29
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.noCreditCard",
+    "defaultMessage": "!!!No credit card required",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 30,
+      "column": 16
+    },
+    "end": {
+      "line": 33,
+      "column": 3
+    }
+  },
+  {
+    "id": "pricing.trial.terms.automaticTrialEnd",
+    "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 34,
+      "column": 21
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index e7516e6e6..03679a163 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -350,8 +350,6 @@ export default class UserStore extends Store {
     if (this.hasActivatedTrial) {
       await sleep(ms('12s'));
 
-      console.log('resetting this.hasActivatedTrial', this.hasActivatedTrial);
-
       this.hasActivatedTrial = false;
     }
   }
-- 
cgit v1.2.3-70-g09d2


From 7344f362eb6fdcf26a1b45c98bd35ddd9e56521e Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 19 Aug 2019 12:40:41 +0200
Subject: remove console logs

---
 src/components/services/content/Services.js        |  2 --
 src/components/subscription/SubscriptionPopup.js   |  2 --
 src/components/subscription/TrialForm.js           |  2 --
 src/containers/settings/TeamScreen.js              |  1 -
 .../subscription/SubscriptionFormScreen.js         |  2 --
 src/features/basicAuth/Component.js                |  1 -
 src/index.js                                       | 29 ----------------------
 src/stores/UserStore.js                            |  2 --
 8 files changed, 41 deletions(-)

(limited to 'src/containers')

diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index b71ddd8e6..73c27bfb6 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -87,8 +87,6 @@ export default @observer @injectSheet(styles) class Services extends Component {
 
     const { intl } = this.context;
 
-    console.log('hasActivatedTrial', hasActivatedTrial, (userHasCompletedSignup || hasActivatedTrial));
-
     return (
       <div className="services">
         {(userHasCompletedSignup || hasActivatedTrial) && (
diff --git a/src/components/subscription/SubscriptionPopup.js b/src/components/subscription/SubscriptionPopup.js
index 9404e9c19..12ef8a6e9 100644
--- a/src/components/subscription/SubscriptionPopup.js
+++ b/src/components/subscription/SubscriptionPopup.js
@@ -61,8 +61,6 @@ export default @observer class SubscriptionPopup extends Component {
             autosize
             src={encodeURI(url)}
             onDidNavigate={completeCheck}
-            // webpreferences="allowpopups"
-            // onNewWindow={(event, url, frameName, options) => console.log(event, url)}
           />
         </div>
         <div className="subscription-popup__toolbar franz-form">
diff --git a/src/components/subscription/TrialForm.js b/src/components/subscription/TrialForm.js
index 9c512b5f2..81b1c713c 100644
--- a/src/components/subscription/TrialForm.js
+++ b/src/components/subscription/TrialForm.js
@@ -65,8 +65,6 @@ export default @observer @injectSheet(styles) class TrialForm extends Component
     } = this.props;
     const { intl } = this.context;
 
-    console.log('isActivatingTrial', isActivatingTrial);
-
     return (
       <>
         <H2>{intl.formatMessage(messages.teaserHeadline)}</H2>
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index c69d5ad08..b7b1b78cb 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -14,7 +14,6 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
     const { actions, stores } = this.props;
 
     const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
-    console.log(url);
 
     actions.app.openExternalUrl({ url });
   }
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 587889e7f..14f898ca6 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -28,8 +28,6 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
     hostedPageURL = `${url.origin}${url.pathname}?${params.toString()}`;
 
     actions.app.openExternalUrl({ url: hostedPageURL });
-
-    console.log('hostedPage', hostedPageURL);
   }
 
   render() {
diff --git a/src/features/basicAuth/Component.js b/src/features/basicAuth/Component.js
index a8252acb7..ba9ae2273 100644
--- a/src/features/basicAuth/Component.js
+++ b/src/features/basicAuth/Component.js
@@ -27,7 +27,6 @@ export default @injectSheet(styles) @observer class BasicAuthModal extends Compo
     e.preventDefault();
 
     const values = Form.values();
-    console.log('form submit', values);
 
     sendCredentials(values.user, values.password);
     resetState();
diff --git a/src/index.js b/src/index.js
index 55592c328..d9d51fd5b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -105,35 +105,6 @@ if (!gotTheLock) {
     }
   });
 }
-// const isSecondInstance = app.makeSingleInstance((argv) => {
-//   if (mainWindow) {
-//     if (mainWindow.isMinimized()) mainWindow.restore();
-//     mainWindow.focus();
-
-//     if (process.platform === 'win32') {
-//       // Keep only command line / deep linked arguments
-//       const url = argv.slice(1);
-
-//       if (url) {
-//         handleDeepLink(mainWindow, url.toString());
-//       }
-//     }
-//   }
-
-//   if (argv.includes('--reset-window')) {
-//     // Needs to be delayed to not interfere with mainWindow.restore();
-//     setTimeout(() => {
-//       debug('Resetting windows via Task');
-//       mainWindow.setPosition(DEFAULT_WINDOW_OPTIONS.x + 100, DEFAULT_WINDOW_OPTIONS.y + 100);
-//       mainWindow.setSize(DEFAULT_WINDOW_OPTIONS.width, DEFAULT_WINDOW_OPTIONS.height);
-//     }, 1);
-//   }
-// });
-
-// if (isSecondInstance) {
-//   console.log('An instance of Franz is already running. Exiting...');
-//   app.exit();
-// }
 
 // Fix Unity indicator issue
 // https://github.com/electron/electron/issues/9046
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 03679a163..5d0037b3c 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -218,8 +218,6 @@ export default class UserStore extends Store {
 
     this.hasActivatedTrial = true;
 
-    console.log('hasActivatedTrial', this.hasActivatedTrial);
-
     this.stores.features.featuresRequest.invalidate({ immediately: true });
     this.stores.user.getUserInfoRequest.invalidate({ immediately: true });
 
-- 
cgit v1.2.3-70-g09d2


From bf386622630711eb70aea0cfe172201bab01d899 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 2 Sep 2019 11:29:38 +0200
Subject: Add "see all options"

---
 src/config.js                                      |  2 +-
 .../subscription/SubscriptionFormScreen.js         |  3 +-
 src/i18n/locales/defaultMessages.json              | 74 +++++++++++-----------
 src/i18n/locales/en-US.json                        |  1 +
 .../src/components/subscription/TrialForm.json     | 33 +++++++---
 .../src/features/shareFranz/Component.json         | 28 ++++----
 6 files changed, 78 insertions(+), 63 deletions(-)

(limited to 'src/containers')

diff --git a/src/config.js b/src/config.js
index cce187b30..c0b5fe954 100644
--- a/src/config.js
+++ b/src/config.js
@@ -19,7 +19,7 @@ export const DEV_WS_API = 'wss://dev.franzinfra.com';
 export const LIVE_WS_API = 'wss://api.franzinfra.com';
 
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
-// export const DEV_API_WEBSITE = 'https://meetfranz.com';
+// export const DEV_API_WEBSITE = 'https://meetfranz.com';t
 export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 14f898ca6..5508c120c 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -19,7 +19,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       features,
     } = stores;
 
-    let hostedPageURL = user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
     const url = new URL(hostedPageURL);
     const params = new URLSearchParams(url.search.slice(1));
 
@@ -52,6 +52,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       <TrialForm
         plan={stores.payment.plan}
         activateTrial={() => actions.user.activateTrial({ planId: stores.features.features.defaultTrialPlan })}
+        showAllOptions={() => this.openBrowser()}
         isActivatingTrial={stores.user.activateTrialRequest.isExecuting || stores.user.getUserInfoRequest.isExecuting}
       />
     );
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 742fc94cf..7691aba84 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -590,19 +590,6 @@
           "line": 30
         }
       },
-      {
-        "defaultMessage": "!!!Company",
-        "end": {
-          "column": 3,
-          "line": 37
-        },
-        "file": "src/components/auth/Signup.js",
-        "id": "signup.company.label",
-        "start": {
-          "column": 16,
-          "line": 34
-        }
-      },
       {
         "defaultMessage": "!!!Password",
         "end": {
@@ -2794,68 +2781,81 @@
         }
       },
       {
-        "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
+        "defaultMessage": "!!!See all options",
         "end": {
           "column": 3,
           "line": 21
         },
         "file": "src/components/subscription/TrialForm.js",
+        "id": "subscription.cta.allOptions",
+        "start": {
+          "column": 20,
+          "line": 18
+        }
+      },
+      {
+        "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
+        "end": {
+          "column": 3,
+          "line": 25
+        },
+        "file": "src/components/subscription/TrialForm.js",
         "id": "settings.account.headlineTrialUpgrade",
         "start": {
           "column": 18,
-          "line": 18
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!The Franz Professional Plan includes:",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 29
         },
         "file": "src/components/subscription/TrialForm.js",
         "id": "subscription.includedProFeatures",
         "start": {
           "column": 20,
-          "line": 22
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!No strings attached",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 33
         },
         "file": "src/components/subscription/TrialForm.js",
         "id": "pricing.trial.terms.headline",
         "start": {
           "column": 29,
-          "line": 26
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!No credit card required",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 37
         },
         "file": "src/components/subscription/TrialForm.js",
         "id": "pricing.trial.terms.noCreditCard",
         "start": {
           "column": 16,
-          "line": 30
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends automatically after 14 days",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 41
         },
         "file": "src/components/subscription/TrialForm.js",
         "id": "pricing.trial.terms.automaticTrialEnd",
         "start": {
           "column": 21,
-          "line": 34
+          "line": 38
         }
       }
     ],
@@ -3707,91 +3707,91 @@
         "defaultMessage": "!!!Franz is better together!",
         "end": {
           "column": 3,
-          "line": 18
+          "line": 19
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.headline",
         "start": {
           "column": 12,
-          "line": 15
+          "line": 16
         }
       },
       {
         "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 23
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.text",
         "start": {
           "column": 8,
-          "line": 19
+          "line": 20
         }
       },
       {
         "defaultMessage": "!!!Share as email",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 27
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.email",
         "start": {
           "column": 16,
-          "line": 23
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Share on Facebook",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 31
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.facebook",
         "start": {
           "column": 19,
-          "line": 27
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Share on Twitter",
         "end": {
           "column": 3,
-          "line": 34
+          "line": 35
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.action.twitter",
         "start": {
           "column": 18,
-          "line": 31
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
         "end": {
           "column": 3,
-          "line": 38
+          "line": 39
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.email",
         "start": {
           "column": 18,
-          "line": 35
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
         "end": {
           "column": 3,
-          "line": 42
+          "line": 43
         },
         "file": "src/features/shareFranz/Component.js",
         "id": "feature.shareFranz.shareText.twitter",
         "start": {
           "column": 20,
-          "line": 39
+          "line": 40
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 7947de937..02204020f 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -332,6 +332,7 @@
   "signup.password.label": "Password",
   "signup.submit.label": "Create account",
   "subscription.cta.activateTrial": "Yes, start the free Franz Professional trial",
+  "subscription.cta.allOptions": "See all options",
   "subscription.cta.choosePlan": "Choose your plan",
   "subscription.includedProFeatures": "The Franz Professional Plan includes:",
   "subscription.teaser.includedFeatures": "Paid Franz Plans include:",
diff --git a/src/i18n/messages/src/components/subscription/TrialForm.json b/src/i18n/messages/src/components/subscription/TrialForm.json
index da1f01518..8b387ba36 100644
--- a/src/i18n/messages/src/components/subscription/TrialForm.json
+++ b/src/i18n/messages/src/components/subscription/TrialForm.json
@@ -12,16 +12,29 @@
       "column": 3
     }
   },
+  {
+    "id": "subscription.cta.allOptions",
+    "defaultMessage": "!!!See all options",
+    "file": "src/components/subscription/TrialForm.js",
+    "start": {
+      "line": 18,
+      "column": 20
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
   {
     "id": "settings.account.headlineTrialUpgrade",
     "defaultMessage": "!!!Get the free 14 day Franz Professional Trial",
     "file": "src/components/subscription/TrialForm.js",
     "start": {
-      "line": 18,
+      "line": 22,
       "column": 18
     },
     "end": {
-      "line": 21,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +43,11 @@
     "defaultMessage": "!!!The Franz Professional Plan includes:",
     "file": "src/components/subscription/TrialForm.js",
     "start": {
-      "line": 22,
+      "line": 26,
       "column": 20
     },
     "end": {
-      "line": 25,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +56,11 @@
     "defaultMessage": "!!!No strings attached",
     "file": "src/components/subscription/TrialForm.js",
     "start": {
-      "line": 26,
+      "line": 30,
       "column": 29
     },
     "end": {
-      "line": 29,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +69,11 @@
     "defaultMessage": "!!!No credit card required",
     "file": "src/components/subscription/TrialForm.js",
     "start": {
-      "line": 30,
+      "line": 34,
       "column": 16
     },
     "end": {
-      "line": 33,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +82,11 @@
     "defaultMessage": "!!!Your free trial ends automatically after 14 days",
     "file": "src/components/subscription/TrialForm.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 21
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/shareFranz/Component.json b/src/i18n/messages/src/features/shareFranz/Component.json
index 34a43d5a0..79b425b15 100644
--- a/src/i18n/messages/src/features/shareFranz/Component.json
+++ b/src/i18n/messages/src/features/shareFranz/Component.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Franz is better together!",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 15,
+      "line": 16,
       "column": 12
     },
     "end": {
-      "line": 18,
+      "line": 19,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 19,
+      "line": 20,
       "column": 8
     },
     "end": {
-      "line": 22,
+      "line": 23,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Share as email",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 23,
+      "line": 24,
       "column": 16
     },
     "end": {
-      "line": 26,
+      "line": 27,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Share on Facebook",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 27,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 30,
+      "line": 31,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Share on Twitter",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 31,
+      "line": 32,
       "column": 18
     },
     "end": {
-      "line": 34,
+      "line": 35,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 35,
+      "line": 36,
       "column": 18
     },
     "end": {
-      "line": 38,
+      "line": 39,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!! I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
     "file": "src/features/shareFranz/Component.js",
     "start": {
-      "line": 39,
+      "line": 40,
       "column": 20
     },
     "end": {
-      "line": 42,
+      "line": 43,
       "column": 3
     }
   }
-- 
cgit v1.2.3-70-g09d2


From a7e2742d9269c098c37cc84b81ca9ef4863ec93a Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Mon, 2 Sep 2019 11:47:32 +0200
Subject: Add CTA for pro upgrade

---
 .../settings/account/AccountDashboard.js           | 11 ++++
 src/containers/settings/AccountScreen.js           |  3 +-
 .../subscription/SubscriptionFormScreen.js         |  7 +--
 src/i18n/locales/defaultMessages.json              | 69 +++++++++++++---------
 src/i18n/locales/en-US.json                        |  1 +
 .../settings/account/AccountDashboard.json         | 69 +++++++++++++---------
 src/stores/UserStore.js                            | 11 +++-
 7 files changed, 107 insertions(+), 64 deletions(-)

(limited to 'src/containers')

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index c9eb8aeda..900a83a78 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -31,6 +31,10 @@ const messages = defineMessages({
     id: 'settings.account.manageSubscription.label',
     defaultMessage: '!!!Manage your subscription',
   },
+  upgradeAccountToPro: {
+    id: 'settings.account.upgradeToPro.label',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
   accountTypeBasic: {
     id: 'settings.account.accountType.basic',
     defaultMessage: '!!!Basic Account',
@@ -100,6 +104,7 @@ export default @observer class AccountDashboard extends Component {
     isDeleteAccountSuccessful: PropTypes.bool.isRequired,
     openEditAccount: PropTypes.func.isRequired,
     openBilling: PropTypes.func.isRequired,
+    upgradeToPro: PropTypes.func.isRequired,
     openInvoices: PropTypes.func.isRequired,
   };
 
@@ -118,6 +123,7 @@ export default @observer class AccountDashboard extends Component {
       isDeleteAccountSuccessful,
       openEditAccount,
       openBilling,
+      upgradeToPro,
       openInvoices,
     } = this.props;
     const { intl } = this.context;
@@ -228,6 +234,11 @@ export default @observer class AccountDashboard extends Component {
                           </>
                         )}
                         <div className="manage-user-links">
+                          <Button
+                            label={intl.formatMessage(messages.upgradeAccountToPro)}
+                            className="franz-form__button--primary"
+                            onClick={upgradeToPro}
+                          />
                           <Button
                             label={intl.formatMessage(messages.manageSubscriptionButtonLabel)}
                             className="franz-form__button--inverted"
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 66076504f..f9eae4957 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -26,7 +26,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
   handleWebsiteLink(route) {
     const { actions, stores } = this.props;
 
-    const url = `${WEBSITE}${route}?authToken=${stores.user.authToken}&utm_source=app&utm_medium=account_dashboard`;
+    const url = stores.user.getAuthURL(`${WEBSITE}${route}?utm_source=app&utm_medium=account_dashboard`);
 
     actions.app.openExternalUrl({ url });
   }
@@ -51,6 +51,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')}
           openBilling={() => this.handleWebsiteLink('/user/billing')}
           openInvoices={() => this.handleWebsiteLink('/user/invoices')}
         />
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index 5508c120c..e9e457084 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -20,12 +20,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
     } = stores;
 
     let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
-    const url = new URL(hostedPageURL);
-    const params = new URLSearchParams(url.search.slice(1));
-
-    params.append('authToken', user.authToken);
-
-    hostedPageURL = `${url.origin}${url.pathname}?${params.toString()}`;
+    hostedPageURL = user.getAuthURL(hostedPageURL);
 
     actions.app.openExternalUrl({ url: hostedPageURL });
   }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 7691aba84..1a571c904 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1278,185 +1278,198 @@
         }
       },
       {
-        "defaultMessage": "!!!Basic Account",
+        "defaultMessage": "!!!Upgrade to Franz Professional",
         "end": {
           "column": 3,
           "line": 37
         },
         "file": "src/components/settings/account/AccountDashboard.js",
+        "id": "settings.account.upgradeToPro.label",
+        "start": {
+          "column": 23,
+          "line": 34
+        }
+      },
+      {
+        "defaultMessage": "!!!Basic Account",
+        "end": {
+          "column": 3,
+          "line": 41
+        },
+        "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.basic",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 38
         }
       },
       {
         "defaultMessage": "!!!Premium Supporter Account",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 45
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.accountType.premium",
         "start": {
           "column": 22,
-          "line": 38
+          "line": 42
         }
       },
       {
         "defaultMessage": "!!!Edit Account",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 49
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.account.editButton",
         "start": {
           "column": 21,
-          "line": 42
+          "line": 46
         }
       },
       {
         "defaultMessage": "!!Invoices",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 53
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.headlineInvoices",
         "start": {
           "column": 18,
-          "line": 46
+          "line": 50
         }
       },
       {
         "defaultMessage": "!!!Download",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 57
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.invoiceDownload",
         "start": {
           "column": 19,
-          "line": 50
+          "line": 54
         }
       },
       {
         "defaultMessage": "!!!Could not load user information",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 61
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.userInfoRequestFailed",
         "start": {
           "column": 25,
-          "line": 54
+          "line": 58
         }
       },
       {
         "defaultMessage": "!!!Try again",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 65
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.tryReloadUserInfoRequest",
         "start": {
           "column": 28,
-          "line": 58
+          "line": 62
         }
       },
       {
         "defaultMessage": "!!!Delete account",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 69
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteAccount",
         "start": {
           "column": 17,
-          "line": 62
+          "line": 66
         }
       },
       {
         "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 73
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteInfo",
         "start": {
           "column": 14,
-          "line": 66
+          "line": 70
         }
       },
       {
         "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
         "end": {
           "column": 3,
-          "line": 73
+          "line": 77
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.deleteEmailSent",
         "start": {
           "column": 19,
-          "line": 70
+          "line": 74
         }
       },
       {
         "defaultMessage": "!!!Free Trial",
         "end": {
           "column": 3,
-          "line": 77
+          "line": 81
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trial",
         "start": {
           "column": 9,
-          "line": 74
+          "line": 78
         }
       },
       {
         "defaultMessage": "!!!Your Franz License:",
         "end": {
           "column": 3,
-          "line": 81
+          "line": 85
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.yourLicense",
         "start": {
           "column": 15,
-          "line": 78
+          "line": 82
         }
       },
       {
         "defaultMessage": "!!!Your free trial ends in {duration}.",
         "end": {
           "column": 3,
-          "line": 85
+          "line": 89
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialEndsIn",
         "start": {
           "column": 15,
-          "line": 82
+          "line": 86
         }
       },
       {
         "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
         "end": {
           "column": 3,
-          "line": 89
+          "line": 93
         },
         "file": "src/components/settings/account/AccountDashboard.js",
         "id": "settings.account.trialUpdateBillingInfo",
         "start": {
           "column": 33,
-          "line": 86
+          "line": 90
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 02204020f..82a9c0fb4 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -180,6 +180,7 @@
   "settings.account.trialUpdateBillingInfo": "Please update your billing info to continue using {license} after your trial period.",
   "settings.account.tryReloadServices": "Try again",
   "settings.account.tryReloadUserInfoRequest": "Try again",
+  "settings.account.upgradeToPro.label": "Upgrade to Franz Professional",
   "settings.account.userInfoRequestFailed": "Could not load user information",
   "settings.account.yourLicense": "Your Franz License",
   "settings.app.buttonClearAllCache": "Clear cache",
diff --git a/src/i18n/messages/src/components/settings/account/AccountDashboard.json b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
index 72cf7e0f3..06d53e41d 100644
--- a/src/i18n/messages/src/components/settings/account/AccountDashboard.json
+++ b/src/i18n/messages/src/components/settings/account/AccountDashboard.json
@@ -51,16 +51,29 @@
       "column": 3
     }
   },
+  {
+    "id": "settings.account.upgradeToPro.label",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/settings/account/AccountDashboard.js",
+    "start": {
+      "line": 34,
+      "column": 23
+    },
+    "end": {
+      "line": 37,
+      "column": 3
+    }
+  },
   {
     "id": "settings.account.accountType.basic",
     "defaultMessage": "!!!Basic Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   },
@@ -69,11 +82,11 @@
     "defaultMessage": "!!!Premium Supporter Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 38,
+      "line": 42,
       "column": 22
     },
     "end": {
-      "line": 41,
+      "line": 45,
       "column": 3
     }
   },
@@ -82,11 +95,11 @@
     "defaultMessage": "!!!Edit Account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 42,
+      "line": 46,
       "column": 21
     },
     "end": {
-      "line": 45,
+      "line": 49,
       "column": 3
     }
   },
@@ -95,11 +108,11 @@
     "defaultMessage": "!!Invoices",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 46,
+      "line": 50,
       "column": 18
     },
     "end": {
-      "line": 49,
+      "line": 53,
       "column": 3
     }
   },
@@ -108,11 +121,11 @@
     "defaultMessage": "!!!Download",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 50,
+      "line": 54,
       "column": 19
     },
     "end": {
-      "line": 53,
+      "line": 57,
       "column": 3
     }
   },
@@ -121,11 +134,11 @@
     "defaultMessage": "!!!Could not load user information",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 54,
+      "line": 58,
       "column": 25
     },
     "end": {
-      "line": 57,
+      "line": 61,
       "column": 3
     }
   },
@@ -134,11 +147,11 @@
     "defaultMessage": "!!!Try again",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 58,
+      "line": 62,
       "column": 28
     },
     "end": {
-      "line": 61,
+      "line": 65,
       "column": 3
     }
   },
@@ -147,11 +160,11 @@
     "defaultMessage": "!!!Delete account",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 62,
+      "line": 66,
       "column": 17
     },
     "end": {
-      "line": 65,
+      "line": 69,
       "column": 3
     }
   },
@@ -160,11 +173,11 @@
     "defaultMessage": "!!!If you don't need your Franz account any longer, you can delete your account and all related data here.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 66,
+      "line": 70,
       "column": 14
     },
     "end": {
-      "line": 69,
+      "line": 73,
       "column": 3
     }
   },
@@ -173,11 +186,11 @@
     "defaultMessage": "!!!You have received an email with a link to confirm your account deletion. Your account and data cannot be restored!",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 70,
+      "line": 74,
       "column": 19
     },
     "end": {
-      "line": 73,
+      "line": 77,
       "column": 3
     }
   },
@@ -186,11 +199,11 @@
     "defaultMessage": "!!!Free Trial",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 74,
+      "line": 78,
       "column": 9
     },
     "end": {
-      "line": 77,
+      "line": 81,
       "column": 3
     }
   },
@@ -199,11 +212,11 @@
     "defaultMessage": "!!!Your Franz License:",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 78,
+      "line": 82,
       "column": 15
     },
     "end": {
-      "line": 81,
+      "line": 85,
       "column": 3
     }
   },
@@ -212,11 +225,11 @@
     "defaultMessage": "!!!Your free trial ends in {duration}.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 82,
+      "line": 86,
       "column": 15
     },
     "end": {
-      "line": 85,
+      "line": 89,
       "column": 3
     }
   },
@@ -225,11 +238,11 @@
     "defaultMessage": "!!!Please update your billing info to continue using {license} after your trial period.",
     "file": "src/components/settings/account/AccountDashboard.js",
     "start": {
-      "line": 86,
+      "line": 90,
       "column": 33
     },
     "end": {
-      "line": 89,
+      "line": 93,
       "column": 3
     }
   }
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 5d0037b3c..e23106462 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -4,7 +4,7 @@ import jwt from 'jsonwebtoken';
 import localStorage from 'mobx-localstorage';
 import ms from 'ms';
 
-import { isDevMode } from '../environment';
+import { isDevMode, WEBSITE } from '../environment';
 import Store from './lib/Store';
 import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
@@ -381,6 +381,15 @@ export default class UserStore extends Store {
     }
   }
 
+  getAuthURL(url) {
+    const parsedUrl = new URL(url);
+    const params = new URLSearchParams(parsedUrl.search.slice(1));
+
+    params.append('authToken', this.authToken);
+
+    return `${parsedUrl.origin}${parsedUrl.pathname}?${params.toString()}`;
+  }
+
   async _migrateUserLocale() {
     await this.getUserInfoRequest._promise;
 
-- 
cgit v1.2.3-70-g09d2


From c6dda35baf7eb9a7d89bf224c38973a1b6171c14 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Wed, 4 Sep 2019 15:37:56 +0200
Subject: bugfixing & polishing

---
 packages/theme/src/themes/dark/index.ts            |   2 +
 packages/theme/src/themes/default/index.ts         |   2 +
 src/assets/images/workspaces/teaser_dark.png       | Bin 0 -> 179047 bytes
 src/assets/images/workspaces/teaser_light.png      | Bin 0 -> 182321 bytes
 .../settings/account/AccountDashboard.js           |  19 ++-
 .../settings/recipes/RecipesDashboard.js           |   4 +-
 src/components/subscription/TrialForm.js           |   3 +-
 src/components/ui/ActivateTrialButton/index.js     | 115 ++++++++++++++++++
 src/components/ui/FeatureItem.js                   |   2 +-
 src/components/ui/PremiumFeatureContainer/index.js |  22 +++-
 src/config.js                                      |   4 +-
 src/containers/settings/AccountScreen.js           |   1 +
 src/features/todos/components/TodosWebview.js      |  14 +--
 src/features/todos/containers/TodosScreen.js       |   6 -
 src/features/todos/store.js                        |   3 +-
 .../workspaces/components/WorkspacesDashboard.js   |  50 ++++++--
 src/features/workspaces/store.js                   |   5 +-
 src/helpers/plan-helpers.js                        |  10 ++
 src/i18n/locales/defaultMessages.json              | 133 +++++++++++++++------
 src/i18n/locales/en-US.json                        |   2 +
 .../components/ui/ActivateTrialButton/index.json   |  54 +++++++++
 .../ui/PremiumFeatureContainer/index.json          |   4 +-
 .../features/todos/components/TodosWebview.json    |  12 +-
 .../workspaces/components/WorkspacesDashboard.json |  32 ++---
 src/stores/UserStore.js                            |  22 ++++
 25 files changed, 415 insertions(+), 106 deletions(-)
 create mode 100644 src/assets/images/workspaces/teaser_dark.png
 create mode 100644 src/assets/images/workspaces/teaser_light.png
 create mode 100644 src/components/ui/ActivateTrialButton/index.js
 create mode 100644 src/i18n/messages/src/components/ui/ActivateTrialButton/index.json

(limited to 'src/containers')

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


From 24d0223fee38c36ec19d9c662579dba7d787f8b4 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 5 Sep 2019 09:49:25 +0200
Subject: polishing

---
 src/assets/images/workspaces/teaser_dark.png       | Bin 179047 -> 0 bytes
 src/assets/images/workspaces/teaser_light.png      | Bin 182321 -> 0 bytes
 src/components/settings/team/TeamDashboard.js      |  62 ++++++--
 src/components/ui/UpgradeButton/index.js           |  90 +++++++++++
 src/config.js                                      |   2 +-
 src/containers/settings/TeamScreen.js              |   1 +
 .../subscription/SubscriptionFormScreen.js         |   2 +-
 src/environment.js                                 |   6 +-
 src/features/todos/components/TodosWebview.js      |   8 +-
 src/features/todos/store.js                        |  18 ++-
 .../workspaces/components/WorkspacesDashboard.js   | 167 +++++++++++----------
 .../workspaces/containers/WorkspacesScreen.js      |  13 +-
 src/i18n/globalMessages.js                         |   4 +
 src/i18n/locales/defaultMessages.json              |  67 ++++++---
 src/i18n/locales/en-US.json                        |   4 +-
 .../components/settings/team/TeamDashboard.json    |  24 +--
 .../src/components/ui/UpgradeButton/index.json     |  15 ++
 src/i18n/messages/src/i18n/globalMessages.json     |  13 ++
 src/stores/UIStore.js                              |   1 -
 src/stores/UserStore.js                            |   4 +-
 20 files changed, 360 insertions(+), 141 deletions(-)
 delete mode 100644 src/assets/images/workspaces/teaser_dark.png
 delete mode 100644 src/assets/images/workspaces/teaser_light.png
 create mode 100644 src/components/ui/UpgradeButton/index.js
 create mode 100644 src/i18n/messages/src/components/ui/UpgradeButton/index.json

(limited to 'src/containers')

diff --git a/src/assets/images/workspaces/teaser_dark.png b/src/assets/images/workspaces/teaser_dark.png
deleted file mode 100644
index 5b6d7334b..000000000
Binary files a/src/assets/images/workspaces/teaser_dark.png and /dev/null differ
diff --git a/src/assets/images/workspaces/teaser_light.png b/src/assets/images/workspaces/teaser_light.png
deleted file mode 100644
index 635af43fa..000000000
Binary files a/src/assets/images/workspaces/teaser_light.png and /dev/null differ
diff --git a/src/components/settings/team/TeamDashboard.js b/src/components/settings/team/TeamDashboard.js
index 990ee52e7..51a3f375d 100644
--- a/src/components/settings/team/TeamDashboard.js
+++ b/src/components/settings/team/TeamDashboard.js
@@ -5,10 +5,14 @@ import { defineMessages, intlShape } from 'react-intl';
 import ReactTooltip from 'react-tooltip';
 import injectSheet from 'react-jss';
 
+import { Badge } from '@meetfranz/ui';
 import Loader from '../../ui/Loader';
 import Button from '../../ui/Button';
 import Infobox from '../../ui/Infobox';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
+import globalMessages from '../../../i18n/globalMessages';
+import ActivateTrialButton from '../../ui/ActivateTrialButton';
+import UpgradeButton from '../../ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -40,6 +44,7 @@ const messages = defineMessages({
 const styles = {
   cta: {
     margin: [40, 'auto'],
+    height: 'auto',
   },
   container: {
     display: 'flex',
@@ -69,6 +74,17 @@ const styles = {
       order: 1,
     },
   },
+  headline: {
+    marginBottom: 0,
+  },
+  proRequired: {
+    margin: [10, 0, 40],
+    height: 'auto',
+  },
+  buttonContainer: {
+    display: 'flex',
+    height: 'auto',
+  },
 };
 
 
@@ -79,6 +95,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
     retryUserInfoRequest: PropTypes.func.isRequired,
     openTeamManagement: PropTypes.func.isRequired,
     classes: PropTypes.object.isRequired,
+    isProUser: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -91,6 +108,7 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
       userInfoRequestFailed,
       retryUserInfoRequest,
       openTeamManagement,
+      isProUser,
       classes,
     } = this.props;
     const { intl } = this.context;
@@ -123,23 +141,35 @@ export default @injectSheet(styles) @observer class TeamDashboard extends Compon
             <>
               {!isLoading && (
                 <>
-                  <PremiumFeatureContainer>
-                    <>
-                      <h1>{intl.formatMessage(messages.contentHeadline)}</h1>
-                      <div className={classes.container}>
-                        <div className={classes.content}>
-                          <p>{intl.formatMessage(messages.intro)}</p>
-                          <p>{intl.formatMessage(messages.copy)}</p>
-                        </div>
-                        <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                  <>
+                    <h1 className={classes.headline}>{intl.formatMessage(messages.contentHeadline)}</h1>
+                    {!isProUser && (
+                      <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+                    )}
+                    <div className={classes.container}>
+                      <div className={classes.content}>
+                        <p>{intl.formatMessage(messages.intro)}</p>
+                        <p>{intl.formatMessage(messages.copy)}</p>
                       </div>
-                    </>
-                  </PremiumFeatureContainer>
-                  <Button
-                    label={intl.formatMessage(messages.manageButton)}
-                    onClick={openTeamManagement}
-                    className={classes.cta}
-                  />
+                      <img className={classes.image} src="https://cdn.franzinfra.com/announcements/assets/teams.png" alt="Franz for Teams" />
+                    </div>
+                    <div className={classes.buttonContainer}>
+                      {!isProUser ? (
+                        <UpgradeButton
+                          className={classes.cta}
+                          gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                          requiresPro
+                          short
+                        />
+                      ) : (
+                        <Button
+                          label={intl.formatMessage(messages.manageButton)}
+                          onClick={openTeamManagement}
+                          className={classes.cta}
+                        />
+                      )}
+                    </div>
+                  </>
                 </>
               )}
             </>
diff --git a/src/components/ui/UpgradeButton/index.js b/src/components/ui/UpgradeButton/index.js
new file mode 100644
index 000000000..4aa494e38
--- /dev/null
+++ b/src/components/ui/UpgradeButton/index.js
@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
+
+import { Button } from '@meetfranz/forms';
+import { gaEvent } from '../../../lib/analytics';
+
+import UserStore from '../../../stores/UserStore';
+import ActivateTrialButton from '../ActivateTrialButton';
+
+const messages = defineMessages({
+  upgradeToPro: {
+    id: 'global.upgradeButton.upgradeToPro',
+    defaultMessage: '!!!Upgrade to Franz Professional',
+  },
+});
+
+@inject('stores', 'actions') @observer
+class UpgradeButton extends Component {
+  static propTypes = {
+    // eslint-disable-next-line
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
+    requiresPro: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    className: '',
+    gaEventInfo: null,
+    requiresPro: false,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  handleCTAClick() {
+    const { actions, gaEventInfo } = this.props;
+
+    actions.ui.openSettings({ path: 'user' });
+    if (gaEventInfo) {
+      const { category, event } = gaEventInfo;
+      gaEvent(category, event, 'Upgrade Account');
+    }
+  }
+
+  render() {
+    const { stores, requiresPro } = this.props;
+    const { intl } = this.context;
+
+    const { isPremium, isPersonal } = stores.user;
+
+    if (isPremium && isPersonal && requiresPro) {
+      return (
+        <Button
+          label={intl.formatMessage(messages.upgradeToPro)}
+          onClick={this.handleCTAClick.bind(this)}
+          className={this.props.className}
+          buttonType="inverted"
+        />
+      );
+    }
+
+    if (!isPremium) {
+      return <ActivateTrialButton {...this.props} />;
+    }
+
+    return null;
+  }
+}
+
+export default UpgradeButton;
+
+UpgradeButton.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    user: PropTypes.instanceOf(UserStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    ui: PropTypes.shape({
+      openSettings: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/config.js b/src/config.js
index fba739ddd..78a92d948 100644
--- a/src/config.js
+++ b/src/config.js
@@ -20,7 +20,7 @@ export const LIVE_WS_API = 'wss://api.franzinfra.com';
 
 export const LOCAL_API_WEBSITE = 'http://localhost:3333';
 // export const DEV_API_WEBSITE = 'https://meetfranz.com';t
-export const DEV_API_WEBSITE = 'http://hash-3ac3ccd2472269cf585c58a4f6973d86f3c9e7bd.franzstaging.com/'; // TODO: revert me
+export const DEV_API_WEBSITE = 'http://hash-58883791519ef6288c952316bdce7fb462283893.franzstaging.com/'; // TODO: revert me
 export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
diff --git a/src/containers/settings/TeamScreen.js b/src/containers/settings/TeamScreen.js
index b7b1b78cb..f600c9947 100644
--- a/src/containers/settings/TeamScreen.js
+++ b/src/containers/settings/TeamScreen.js
@@ -30,6 +30,7 @@ export default @inject('stores', 'actions') @observer class TeamScreen extends C
           userInfoRequestFailed={user.getUserInfoRequest.wasExecuted && user.getUserInfoRequest.isError}
           retryUserInfoRequest={() => this.reloadData()}
           openTeamManagement={() => this.handleWebsiteLink('/user/team')}
+          isProUser={user.isPro}
         />
       </ErrorBoundary>
     );
diff --git a/src/containers/subscription/SubscriptionFormScreen.js b/src/containers/subscription/SubscriptionFormScreen.js
index e9e457084..726b10628 100644
--- a/src/containers/subscription/SubscriptionFormScreen.js
+++ b/src/containers/subscription/SubscriptionFormScreen.js
@@ -19,7 +19,7 @@ export default @inject('stores', 'actions') @observer class SubscriptionFormScre
       features,
     } = stores;
 
-    let hostedPageURL = !user.data.hadSubscription ? features.features.planSelectionURL : features.features.subscribeURL;
+    let hostedPageURL = features.features.planSelectionURL;
     hostedPageURL = user.getAuthURL(hostedPageURL);
 
     actions.app.openExternalUrl({ url: hostedPageURL });
diff --git a/src/environment.js b/src/environment.js
index 707449e09..2c247618f 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -36,9 +36,11 @@ let wsApi;
 let web;
 let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
-  api = LIVE_API;
+  // api = LIVE_API;
+  api = DEV_API;
   wsApi = LIVE_WS_API;
-  web = LIVE_API_WEBSITE;
+  // web = LIVE_API_WEBSITE;
+  web = DEV_API_WEBSITE;
   todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 9a50f7e8d..fa530daed 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -9,7 +9,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
-import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -116,7 +116,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -286,10 +286,10 @@ class TodosWebview extends Component {
           ) : (
             <Appear>
               <div className={classes.premiumContainer}>
-                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+                <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
                 <p>{intl.formatMessage(messages.premiumInfo)}</p>
                 <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-                <ActivateTrialButton
+                <UpgradeButton
                   className={classes.premiumCTA}
                   gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
                   short
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 56e117c6c..5c6abff4c 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -30,7 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
-    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
+    if (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
@@ -61,6 +61,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -146,4 +147,19 @@ export default class TodoStore extends FeatureStore {
 
     this.isFeatureEnabled = isTodosEnabled;
   };
+
+  _firstLaunchReaction = () => {
+    const { stats } = this.stores.settings.all;
+
+    // Hide todos layer on first app start but show on second
+    if (stats.appStarts <= 1) {
+      this._updateSettings({
+        isTodosPanelVisible: false,
+      });
+    } else if (stats.appStarts <= 2) {
+      this._updateSettings({
+        isTodosPanelVisible: true,
+      });
+    }
+  };
 }
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
index 059a681de..fc636dd95 100644
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import injectSheet from 'react-jss';
-import { Infobox } from '@meetfranz/ui';
+import { Infobox, Badge } from '@meetfranz/ui';
 
 import Loader from '../../../components/ui/Loader';
 import WorkspaceItem from './WorkspaceItem';
@@ -11,9 +11,9 @@ import CreateWorkspaceForm from './CreateWorkspaceForm';
 import Request from '../../../stores/lib/Request';
 import Appear from '../../../components/ui/effects/Appear';
 import { workspaceStore } from '../index';
-import PremiumFeatureContainer from '../../../components/ui/PremiumFeatureContainer';
 import UIStore from '../../../stores/UIStore';
-import ActivateTrialButton from '../../../components/ui/ActivateTrialButton';
+import globalMessages from '../../../i18n/globalMessages';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const messages = defineMessages({
   headline: {
@@ -64,23 +64,24 @@ const styles = theme => ({
     height: 'auto',
   },
   premiumAnnouncement: {
-    padding: 20,
-    // backgroundColor: '#3498db',
-    marginLeft: -20,
-    marginBottom: 40,
-    paddingBottom: 40,
     height: 'auto',
+  },
+  premiumAnnouncementContainer: {
     display: 'flex',
-    borderBottom: [1, 'solid', theme.inputBackground],
+  },
+  announcementHeadline: {
+    marginBottom: 0,
   },
   teaserImage: {
-    width: 200,
-    height: '100%',
-    float: 'left',
-    margin: [-8, 0, 0, -20],
+    width: 250,
+    margin: [-8, 0, 0, 20],
+    alignSelf: 'center',
   },
   upgradeCTA: {
-    marginTop: 20,
+    margin: [40, 'auto'],
+  },
+  proRequired: {
+    margin: [10, 0, 40],
   },
 });
 
@@ -95,6 +96,8 @@ class WorkspacesDashboard extends Component {
     onCreateWorkspaceSubmit: PropTypes.func.isRequired,
     onWorkspaceClick: PropTypes.func.isRequired,
     workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+    isPersonalUser: PropTypes.bool.isRequired,
+    onUpgradeAccount: PropTypes.func.isRequired,
   };
 
   static contextTypes = {
@@ -152,76 +155,80 @@ class WorkspacesDashboard extends Component {
 
           {workspaceStore.isPremiumUpgradeRequired && (
             <div className={classes.premiumAnnouncement}>
-              <img src={`./assets/images/workspaces/teaser_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
-              <div>
-                <h2>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h2>
-                <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
-                <ActivateTrialButton
-                  className={classes.upgradeCTA}
-                  gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
-                  short
-                />
+
+              <h1 className={classes.announcementHeadline}>{intl.formatMessage(messages.workspaceFeatureHeadline)}</h1>
+              <Badge className={classes.proRequired}>{intl.formatMessage(globalMessages.proRequired)}</Badge>
+              <div className={classes.premiumAnnouncementContainer}>
+                <div className={classes.premiumAnnouncementContent}>
+                  <p>{intl.formatMessage(messages.workspaceFeatureInfo)}</p>
+                  <UpgradeButton
+                    className={classes.upgradeCTA}
+                    gaEventInfo={{ category: 'Workspaces', event: 'upgrade' }}
+                    short
+                    requiresPro
+                  />
+                </div>
+                <img src={`https://cdn.franzinfra.com/announcements/assets/workspaces_${this.props.stores.ui.isDarkThemeActive ? 'dark' : 'light'}.png`} className={classes.teaserImage} alt="" />
               </div>
             </div>
           )}
 
-          <PremiumFeatureContainer
-            condition={() => workspaceStore.isPremiumUpgradeRequired}
-            gaEventInfo={{ category: 'User', event: 'upgrade', label: 'workspaces' }}
-          >
-            {/* ===== Create workspace form ===== */}
-            <div className={classes.createForm}>
-              <CreateWorkspaceForm
-                isSubmitting={createWorkspaceRequest.isExecuting}
-                onSubmit={onCreateWorkspaceSubmit}
-              />
-            </div>
-            {getUserWorkspacesRequest.isExecuting ? (
-              <Loader />
-            ) : (
-              <Fragment>
-                {/* ===== Workspace could not be loaded error ===== */}
-                {getUserWorkspacesRequest.error ? (
-                  <Infobox
-                    icon="alert"
-                    type="danger"
-                    ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
-                    ctaLoading={getUserWorkspacesRequest.isExecuting}
-                    ctaOnClick={getUserWorkspacesRequest.retry}
-                  >
-                    {intl.formatMessage(messages.workspacesRequestFailed)}
-                  </Infobox>
-                ) : (
-                  <Fragment>
-                    {workspaces.length === 0 ? (
-                      <div className="align-middle settings__empty-state">
-                        {/* ===== Workspaces empty state ===== */}
-                        <p className="settings__empty-text">
-                          <span className="emoji">
-                            <img src="./assets/images/emoji/sad.png" alt="" />
-                          </span>
-                          {intl.formatMessage(messages.noServicesAdded)}
-                        </p>
-                      </div>
-                    ) : (
-                      <table className={classes.table}>
-                        {/* ===== Workspaces list ===== */}
-                        <tbody>
-                          {workspaces.map(workspace => (
-                            <WorkspaceItem
-                              key={workspace.id}
-                              workspace={workspace}
-                              onItemClick={w => onWorkspaceClick(w)}
-                            />
-                          ))}
-                        </tbody>
-                      </table>
-                    )}
-                  </Fragment>
-                )}
-              </Fragment>
-            )}
-          </PremiumFeatureContainer>
+          {!workspaceStore.isPremiumUpgradeRequired && (
+            <>
+              {/* ===== Create workspace form ===== */}
+              <div className={classes.createForm}>
+                <CreateWorkspaceForm
+                  isSubmitting={createWorkspaceRequest.isExecuting}
+                  onSubmit={onCreateWorkspaceSubmit}
+                />
+              </div>
+              {getUserWorkspacesRequest.isExecuting ? (
+                <Loader />
+              ) : (
+                <Fragment>
+                  {/* ===== Workspace could not be loaded error ===== */}
+                  {getUserWorkspacesRequest.error ? (
+                    <Infobox
+                      icon="alert"
+                      type="danger"
+                      ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
+                      ctaLoading={getUserWorkspacesRequest.isExecuting}
+                      ctaOnClick={getUserWorkspacesRequest.retry}
+                    >
+                      {intl.formatMessage(messages.workspacesRequestFailed)}
+                    </Infobox>
+                  ) : (
+                    <Fragment>
+                      {workspaces.length === 0 ? (
+                        <div className="align-middle settings__empty-state">
+                          {/* ===== Workspaces empty state ===== */}
+                          <p className="settings__empty-text">
+                            <span className="emoji">
+                              <img src="./assets/images/emoji/sad.png" alt="" />
+                            </span>
+                            {intl.formatMessage(messages.noServicesAdded)}
+                          </p>
+                        </div>
+                      ) : (
+                        <table className={classes.table}>
+                          {/* ===== Workspaces list ===== */}
+                          <tbody>
+                            {workspaces.map(workspace => (
+                              <WorkspaceItem
+                                key={workspace.id}
+                                workspace={workspace}
+                                onItemClick={w => onWorkspaceClick(w)}
+                              />
+                            ))}
+                          </tbody>
+                        </table>
+                      )}
+                    </Fragment>
+                  )}
+                </Fragment>
+              )}
+            </>
+          )}
         </div>
       </div>
     );
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
index 2ab565fa1..5fbb0c31d 100644
--- a/src/features/workspaces/containers/WorkspacesScreen.js
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -10,29 +10,38 @@ import {
   getUserWorkspacesRequest,
   updateWorkspaceRequest,
 } from '../api';
+import UserStore from '../../../stores/UserStore';
 
-@inject('actions') @observer
+@inject('stores', 'actions') @observer
 class WorkspacesScreen extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      user: PropTypes.instanceOf(UserStore),
+    }).isRequired,
     actions: PropTypes.shape({
       workspace: PropTypes.shape({
         edit: PropTypes.func.isRequired,
       }),
+      ui: PropTypes.shape({
+        openSettings: PropTypes.func.isRequired,
+      }),
     }).isRequired,
   };
 
   render() {
-    const { actions } = this.props;
+    const { stores, actions } = this.props;
     return (
       <ErrorBoundary>
         <WorkspacesDashboard
           workspaces={workspaceStore.workspaces}
+          isPersonalUser={stores.user.isPersonal}
           getUserWorkspacesRequest={getUserWorkspacesRequest}
           createWorkspaceRequest={createWorkspaceRequest}
           deleteWorkspaceRequest={deleteWorkspaceRequest}
           updateWorkspaceRequest={updateWorkspaceRequest}
           onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
           onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
+          onUpgradeAccount={() => actions.ui.openSettings({ path: 'user' })}
         />
       </ErrorBoundary>
     );
diff --git a/src/i18n/globalMessages.js b/src/i18n/globalMessages.js
index 1b5ece223..af8479c59 100644
--- a/src/i18n/globalMessages.js
+++ b/src/i18n/globalMessages.js
@@ -25,4 +25,8 @@ export default defineMessages({
     id: 'global.spellchecking.autodetect.short',
     defaultMessage: '!!!Automatic',
   },
+  proRequired: {
+    id: 'global.franzProRequired',
+    defaultMessage: '!!!Franz Professional Required',
+  },
 });
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 367184c01..b03512fe1 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2530,78 +2530,78 @@
         "defaultMessage": "!!!Team",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 21
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.headline",
         "start": {
           "column": 12,
-          "line": 14
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 25
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.contentHeadline",
         "start": {
           "column": 19,
-          "line": 18
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 29
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.intro",
         "start": {
           "column": 9,
-          "line": 22
+          "line": 26
         }
       },
       {
         "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 33
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.copy",
         "start": {
           "column": 8,
-          "line": 26
+          "line": 30
         }
       },
       {
         "defaultMessage": "!!!Manage your Team on meetfranz.com",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 37
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.manageAction",
         "start": {
           "column": 16,
-          "line": 30
+          "line": 34
         }
       },
       {
         "defaultMessage": "!!!Upgrade your Account",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 41
         },
         "file": "src/components/settings/team/TeamDashboard.js",
         "id": "settings.team.upgradeAction",
         "start": {
           "column": 17,
-          "line": 34
+          "line": 38
         }
       }
     ],
@@ -3102,6 +3102,24 @@
     ],
     "path": "src/components/ui/PremiumFeatureContainer/index.json"
   },
+  {
+    "descriptors": [
+      {
+        "defaultMessage": "!!!Upgrade to Franz Professional",
+        "end": {
+          "column": 3,
+          "line": 17
+        },
+        "file": "src/components/ui/UpgradeButton/index.js",
+        "id": "global.upgradeButton.upgradeToPro",
+        "start": {
+          "column": 16,
+          "line": 14
+        }
+      }
+    ],
+    "path": "src/components/ui/UpgradeButton/index.json"
+  },
   {
     "descriptors": [
       {
@@ -3873,39 +3891,39 @@
         "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
         "end": {
           "column": 3,
-          "line": 22
+          "line": 21
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.info",
         "start": {
           "column": 15,
-          "line": 19
+          "line": 18
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 26
+          "line": 25
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.upgrade",
         "start": {
           "column": 14,
-          "line": 23
+          "line": 22
         }
       },
       {
         "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
         "end": {
           "column": 3,
-          "line": 30
+          "line": 29
         },
         "file": "src/features/todos/components/TodosWebview.js",
         "id": "feature.todos.premium.rollout",
         "start": {
           "column": 15,
-          "line": 27
+          "line": 26
         }
       }
     ],
@@ -4594,6 +4612,19 @@
           "column": 39,
           "line": 24
         }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Required",
+        "end": {
+          "column": 3,
+          "line": 31
+        },
+        "file": "src/i18n/globalMessages.js",
+        "id": "global.franzProRequired",
+        "start": {
+          "column": 15,
+          "line": 28
+        }
       }
     ],
     "path": "src/i18n/globalMessages.json"
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index f11d5ca91..0fe1da81e 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -21,11 +21,13 @@
   "feature.todos.premium.rollout": "Franz Todos will be available to everyone soon.",
   "feature.todos.premium.upgrade": "Upgrade Account",
   "global.api.unhealthy": "Can't connect to Franz online services",
+  "global.franzProRequired": "Franz Professional Required",
   "global.notConnectedToTheInternet": "You are not connected to the internet.",
   "global.spellchecker.useDefault": "Use System Default ({default})",
   "global.spellchecking.autodetect": "Detect language automatically",
   "global.spellchecking.autodetect.short": "Automatic",
   "global.spellchecking.language": "Spell checking language",
+  "global.upgradeButton.upgradeToPro": "Upgrade to Franz Professional",
   "import.headline": "Import your Franz 4 services",
   "import.notSupportedHeadline": "Services not yet supported in Franz 5",
   "import.skip.label": "I want to add services manually",
@@ -376,4 +378,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/components/settings/team/TeamDashboard.json b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
index 6bccc25ff..6ef3789c4 100644
--- a/src/i18n/messages/src/components/settings/team/TeamDashboard.json
+++ b/src/i18n/messages/src/components/settings/team/TeamDashboard.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Team",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 14,
+      "line": 18,
       "column": 12
     },
     "end": {
-      "line": 17,
+      "line": 21,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Franz for Teams",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 18,
+      "line": 22,
       "column": 19
     },
     "end": {
-      "line": 21,
+      "line": 25,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!You and your team use Franz? You can now manage Premium subscriptions for as many colleagues, friends or family members as you want, all from within one account.",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 22,
+      "line": 26,
       "column": 9
     },
     "end": {
-      "line": 25,
+      "line": 29,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Franz for Teams gives you the option to invite co-workers to your team by sending them email invitations and manage their subscriptions in your account’s preferences. Don’t waste time setting up subscriptions for every team member individually, forget about multiple invoices and different billing cycles - one team to rule them all!",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 26,
+      "line": 30,
       "column": 8
     },
     "end": {
-      "line": 29,
+      "line": 33,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Manage your Team on meetfranz.com",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 30,
+      "line": 34,
       "column": 16
     },
     "end": {
-      "line": 33,
+      "line": 37,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Upgrade your Account",
     "file": "src/components/settings/team/TeamDashboard.js",
     "start": {
-      "line": 34,
+      "line": 38,
       "column": 17
     },
     "end": {
-      "line": 37,
+      "line": 41,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/ui/UpgradeButton/index.json b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
new file mode 100644
index 000000000..87e0bc913
--- /dev/null
+++ b/src/i18n/messages/src/components/ui/UpgradeButton/index.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "global.upgradeButton.upgradeToPro",
+    "defaultMessage": "!!!Upgrade to Franz Professional",
+    "file": "src/components/ui/UpgradeButton/index.js",
+    "start": {
+      "line": 14,
+      "column": 16
+    },
+    "end": {
+      "line": 17,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/i18n/globalMessages.json b/src/i18n/messages/src/i18n/globalMessages.json
index 28001614f..f4fd5b8b0 100644
--- a/src/i18n/messages/src/i18n/globalMessages.json
+++ b/src/i18n/messages/src/i18n/globalMessages.json
@@ -76,5 +76,18 @@
       "line": 27,
       "column": 3
     }
+  },
+  {
+    "id": "global.franzProRequired",
+    "defaultMessage": "!!!Franz Professional Required",
+    "file": "src/i18n/globalMessages.js",
+    "start": {
+      "line": 28,
+      "column": 15
+    },
+    "end": {
+      "line": 31,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 2c785111f..9680c5bcc 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -46,7 +46,6 @@ export default class UIStore extends Store {
   // Actions
   @action _openSettings({ path = '/settings' }) {
     const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
-    console.log(settingsPath);
     this.stores.router.push(settingsPath);
   }
 
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 7ac7d2375..d44208923 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -168,9 +168,9 @@ export default class UserStore extends Store {
   }
 
   @computed get isPro() {
-    if (!this.team.plan && this.isPremium) return true;
+    if ((!this.team.plan || this.team.state !== 'expired') && this.isPremium) return true;
 
-    if (!this.team.plan) return false;
+    if ((!this.team.plan || this.team.state === 'expired')) return false;
     const plan = getPlan(this.team.plan);
 
     return plan === PLANS.PRO;
-- 
cgit v1.2.3-70-g09d2


From 4152b7f78687105e759912626ba3c055e70bc304 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Thu, 5 Sep 2019 11:14:51 +0200
Subject: Fix isPro state

---
 src/components/settings/account/AccountDashboard.js |  4 +++-
 src/containers/settings/AccountScreen.js            |  1 +
 src/environment.js                                  | 12 ++++++------
 src/stores/UserStore.js                             |  6 +++++-
 4 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'src/containers')

diff --git a/src/components/settings/account/AccountDashboard.js b/src/components/settings/account/AccountDashboard.js
index 4fd1e8163..ac2594604 100644
--- a/src/components/settings/account/AccountDashboard.js
+++ b/src/components/settings/account/AccountDashboard.js
@@ -97,6 +97,7 @@ const messages = defineMessages({
 class AccountDashboard extends Component {
   static propTypes = {
     user: MobxPropTypes.observableObject.isRequired,
+    isPremiumOverrideUser: PropTypes.bool.isRequired,
     isProUser: PropTypes.bool.isRequired,
     isLoading: PropTypes.bool.isRequired,
     userInfoRequestFailed: PropTypes.bool.isRequired,
@@ -117,6 +118,7 @@ class AccountDashboard extends Component {
   render() {
     const {
       user,
+      isPremiumOverrideUser,
       isProUser,
       isLoading,
       userInfoRequestFailed,
@@ -213,7 +215,7 @@ class AccountDashboard extends Component {
                           {intl.formatMessage(messages.yourLicense)}
                         </H2>
                         <p>
-                          {planName}
+                          {isPremiumOverrideUser ? 'Franz Premium' : planName}
                           {user.team.isTrial && (
                             <>
                               {' – '}
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 2b5eba91c..9c74cf2ab 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -42,6 +42,7 @@ export default @inject('stores', 'actions') @observer class AccountScreen extend
       <ErrorBoundary>
         <AccountDashboard
           user={user.data}
+          isPremiumOverrideUser={user.isPremiumOverride}
           isProUser={user.isPro}
           isLoading={isLoadingUserInfo}
           isLoadingPlans={isLoadingPlans}
diff --git a/src/environment.js b/src/environment.js
index 9ec2acf9f..4be2c7d70 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -1,12 +1,12 @@
 import isDev from 'electron-is-dev';
 
 import {
-  // LIVE_API,
+  LIVE_API,
   DEV_API,
   LOCAL_API,
   LOCAL_API_WEBSITE,
   DEV_API_WEBSITE,
-  // LIVE_API_WEBSITE,
+  LIVE_API_WEBSITE,
   LIVE_WS_API,
   LOCAL_WS_API,
   DEV_WS_API,
@@ -36,11 +36,11 @@ let wsApi;
 let web;
 let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
-  // api = LIVE_API;
-  api = DEV_API;
+  api = LIVE_API;
+  // api = DEV_API;
   wsApi = LIVE_WS_API;
-  // web = LIVE_API_WEBSITE;
-  web = DEV_API_WEBSITE;
+  web = LIVE_API_WEBSITE;
+  // web = DEV_API_WEBSITE;
   todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index d44208923..365336cbf 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -160,6 +160,10 @@ export default class UserStore extends Store {
     return !!this.data.isPremium;
   }
 
+  @computed get isPremiumOverride() {
+    return (!this.team.plan && this.isPremium) || (this.team.state === 'expired' && this.isPremium);
+  }
+
   @computed get isPersonal() {
     if (!this.team.plan) return false;
     const plan = getPlan(this.team.plan);
@@ -168,7 +172,7 @@ export default class UserStore extends Store {
   }
 
   @computed get isPro() {
-    if ((!this.team.plan || this.team.state !== 'expired') && this.isPremium) return true;
+    if (this.isPremiumOverride) return true;
 
     if ((!this.team.plan || this.team.state === 'expired')) return false;
     const plan = getPlan(this.team.plan);
-- 
cgit v1.2.3-70-g09d2


From 5d03b91dd789ffd6d3d5753c223b4b6412887220 Mon Sep 17 00:00:00 2001
From: Stefan Malzner <stefan@adlk.io>
Date: Sat, 7 Sep 2019 00:53:10 +0200
Subject: feat(Todos): Add option to disable todos

---
 .../settings/settings/EditSettingsForm.js          |   5 ++
 src/containers/settings/EditSettingsScreen.js      |  41 ++++++++-
 src/features/todos/actions.js                      |   1 +
 src/features/todos/index.js                        |   1 +
 src/features/todos/store.js                        |  19 +++-
 src/i18n/locales/defaultMessages.json              | 100 ++++++++++++++++-----
 src/i18n/locales/en-US.json                        |   3 +-
 .../containers/settings/EditSettingsScreen.json    |  61 ++++++++-----
 8 files changed, 177 insertions(+), 54 deletions(-)

(limited to 'src/containers')

diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 3f9e0a6bc..ff30daed2 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -101,6 +101,7 @@ export default @observer class EditSettingsForm extends Component {
     onClearAllCache: PropTypes.func.isRequired,
     cacheSize: PropTypes.string.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isTodosEnabled: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -131,6 +132,7 @@ export default @observer class EditSettingsForm extends Component {
       onClearAllCache,
       cacheSize,
       isSpellcheckerIncludedInCurrentPlan,
+      isTodosEnabled,
     } = this.props;
     const { intl } = this.context;
 
@@ -162,6 +164,9 @@ export default @observer class EditSettingsForm extends Component {
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
+            {isTodosEnabled && (
+              <Toggle field={form.$('enableTodos')} />
+            )}
 
             {/* Appearance */}
             <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
diff --git a/src/containers/settings/EditSettingsScreen.js b/src/containers/settings/EditSettingsScreen.js
index 67d52f102..65b5a45df 100644
--- a/src/containers/settings/EditSettingsScreen.js
+++ b/src/containers/settings/EditSettingsScreen.js
@@ -6,6 +6,7 @@ import { defineMessages, intlShape } from 'react-intl';
 import AppStore from '../../stores/AppStore';
 import SettingsStore from '../../stores/SettingsStore';
 import UserStore from '../../stores/UserStore';
+import TodosStore from '../../features/todos/store';
 import Form from '../../lib/Form';
 import { APP_LOCALES, SPELLCHECKER_LOCALES } from '../../i18n/languages';
 import { DEFAULT_APP_SETTINGS } from '../../config';
@@ -17,6 +18,7 @@ import EditSettingsForm from '../../components/settings/settings/EditSettingsFor
 import ErrorBoundary from '../../components/util/ErrorBoundary';
 
 import globalMessages from '../../i18n/globalMessages';
+import { DEFAULT_IS_FEATURE_ENABLED_BY_USER } from '../../features/todos';
 
 const messages = defineMessages({
   autoLaunchOnStart: {
@@ -67,6 +69,10 @@ const messages = defineMessages({
     id: 'settings.app.form.beta',
     defaultMessage: '!!!Include beta versions',
   },
+  enableTodos: {
+    id: 'settings.app.form.enableTodos',
+    defaultMessage: '!!!Enable Franz Todos',
+  },
 });
 
 export default @inject('stores', 'actions') @observer class EditSettingsScreen extends Component {
@@ -75,7 +81,13 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
   };
 
   onSubmit(settingsData) {
-    const { app, settings, user } = this.props.actions;
+    const { todos } = this.props.stores;
+    const {
+      app,
+      settings,
+      user,
+      todos: todosActions,
+    } = this.props.actions;
 
     app.launchOnStartup({
       enable: settingsData.autoLaunchOnStart,
@@ -105,10 +117,16 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
         locale: settingsData.locale,
       },
     });
+
+    if (todos.isFeatureActive) {
+      todosActions.toggleTodosFeatureVisibility();
+    }
   }
 
   prepareForm() {
-    const { app, settings, user } = this.props.stores;
+    const {
+      app, settings, user, todos,
+    } = this.props.stores;
     const { intl } = this.context;
 
     const locales = getSelectOptions({
@@ -192,16 +210,28 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
       },
     };
 
+    if (todos.isFeatureActive) {
+      config.fields.enableTodos = {
+        label: intl.formatMessage(messages.enableTodos),
+        value: todos.settings.isFeatureEnabledByUser,
+        default: DEFAULT_IS_FEATURE_ENABLED_BY_USER,
+      };
+    }
+
     return new Form(config);
   }
 
   render() {
+    const {
+      app,
+      todos,
+    } = this.props.stores;
     const {
       updateStatus,
       cacheSize,
       updateStatusTypes,
       isClearingAllCache,
-    } = this.props.stores.app;
+    } = app;
     const {
       checkForUpdates,
       installUpdate,
@@ -224,6 +254,7 @@ export default @inject('stores', 'actions') @observer class EditSettingsScreen e
           isClearingAllCache={isClearingAllCache}
           onClearAllCache={clearAllCache}
           isSpellcheckerIncludedInCurrentPlan={spellcheckerConfig.isIncludedInCurrentPlan}
+          isTodosEnabled={todos.isFeatureActive}
         />
       </ErrorBoundary>
     );
@@ -235,6 +266,7 @@ EditSettingsScreen.wrappedComponent.propTypes = {
     app: PropTypes.instanceOf(AppStore).isRequired,
     user: PropTypes.instanceOf(UserStore).isRequired,
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
+    todos: PropTypes.instanceOf(TodosStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     app: PropTypes.shape({
@@ -249,5 +281,8 @@ EditSettingsScreen.wrappedComponent.propTypes = {
     user: PropTypes.shape({
       update: PropTypes.func.isRequired,
     }).isRequired,
+    todos: PropTypes.shape({
+      toggleTodosFeatureVisibility: PropTypes.func.isRequired,
+    }).isRequired,
   }).isRequired,
 };
diff --git a/src/features/todos/actions.js b/src/features/todos/actions.js
index dc63d5fcd..1ccc9a592 100644
--- a/src/features/todos/actions.js
+++ b/src/features/todos/actions.js
@@ -6,6 +6,7 @@ export const todoActions = createActionsFromDefinitions({
     width: PropTypes.number.isRequired,
   },
   toggleTodosPanel: {},
+  toggleTodosFeatureVisibility: {},
   setTodosWebview: {
     webview: PropTypes.instanceOf(Element).isRequired,
   },
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
index 9b6ab00a0..7388aebaf 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.js
@@ -8,6 +8,7 @@ export const GA_CATEGORY_TODOS = 'Todos';
 export const DEFAULT_TODOS_WIDTH = 300;
 export const TODOS_MIN_WIDTH = 200;
 export const DEFAULT_TODOS_VISIBLE = true;
+export const DEFAULT_IS_FEATURE_ENABLED_BY_USER = true;
 
 export const TODOS_ROUTES = {
   TARGET: '/todos',
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 003c69a5b..05eef4ec1 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -11,7 +11,7 @@ import { FeatureStore } from '../utils/FeatureStore';
 import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
 import {
-  DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE, TODOS_ROUTES,
+  DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH, DEFAULT_TODOS_VISIBLE, TODOS_ROUTES, DEFAULT_IS_FEATURE_ENABLED_BY_USER,
 } from '.';
 import { IPC } from './constants';
 import { state as delayAppState } from '../delayApp';
@@ -33,7 +33,7 @@ export default class TodoStore extends FeatureStore {
 
   @computed get isTodosPanelForceHidden() {
     const { isAnnouncementShown } = this.stores.announcements;
-    return delayAppState.isDelayAppScreenVisible || isAnnouncementShown;
+    return delayAppState.isDelayAppScreenVisible || !this.settings.isFeatureEnabledByUser || isAnnouncementShown;
   }
 
   @computed get isTodosPanelVisible() {
@@ -60,6 +60,7 @@ export default class TodoStore extends FeatureStore {
       [todoActions.setTodosWebview, this._setTodosWebview],
       [todoActions.handleHostMessage, this._handleHostMessage],
       [todoActions.handleClientMessage, this._handleClientMessage],
+      [todoActions.toggleTodosFeatureVisibility, this._toggleTodosFeatureVisibility],
     ]));
 
     // REACTIONS
@@ -74,6 +75,12 @@ export default class TodoStore extends FeatureStore {
     this._registerReactions(this._allReactions);
 
     this.isFeatureActive = true;
+
+    if (this.settings.isFeatureEnabledByUser === undefined) {
+      this._updateSettings({
+        isFeatureEnabledByUser: DEFAULT_IS_FEATURE_ENABLED_BY_USER,
+      });
+    }
   }
 
   @action stop() {
@@ -128,6 +135,14 @@ export default class TodoStore extends FeatureStore {
     }
   };
 
+  @action _toggleTodosFeatureVisibility = () => {
+    debug('_toggleTodosFeatureVisibility');
+
+    this._updateSettings({
+      isFeatureEnabledByUser: !this.settings.isFeatureEnabledByUser,
+    });
+  };
+
   // Todos client message handlers
 
   _onTodosClientInitialized = () => {
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 70111f72b..44a49317e 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2945,6 +2945,45 @@
           "column": 20,
           "line": 25
         }
+      },
+      {
+        "defaultMessage": "!!!No strings attached",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "pricing.trial.terms.headline",
+        "start": {
+          "column": 29,
+          "line": 29
+        }
+      },
+      {
+        "defaultMessage": "!!!No credit card required",
+        "end": {
+          "column": 3,
+          "line": 36
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "pricing.trial.terms.noCreditCard",
+        "start": {
+          "column": 16,
+          "line": 33
+        }
+      },
+      {
+        "defaultMessage": "!!!Your free trial ends automatically after 14 days",
+        "end": {
+          "column": 3,
+          "line": 40
+        },
+        "file": "src/components/ui/ActivateTrialButton/index.js",
+        "id": "pricing.trial.terms.automaticTrialEnd",
+        "start": {
+          "column": 21,
+          "line": 37
+        }
       }
     ],
     "path": "src/components/ui/ActivateTrialButton/index.json"
@@ -3375,156 +3414,169 @@
         "defaultMessage": "!!!Launch Franz on start",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 27
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.autoLaunchOnStart",
         "start": {
           "column": 21,
-          "line": 22
+          "line": 24
         }
       },
       {
         "defaultMessage": "!!!Open in background",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 31
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.autoLaunchInBackground",
         "start": {
           "column": 26,
-          "line": 26
+          "line": 28
         }
       },
       {
         "defaultMessage": "!!!Keep Franz in background when closing the window",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 35
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.runInBackground",
         "start": {
           "column": 19,
-          "line": 30
+          "line": 32
         }
       },
       {
         "defaultMessage": "!!!Show Franz in system tray",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 39
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableSystemTray",
         "start": {
           "column": 20,
-          "line": 34
+          "line": 36
         }
       },
       {
         "defaultMessage": "!!!Minimize Franz to system tray",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 43
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.minimizeToSystemTray",
         "start": {
           "column": 24,
-          "line": 38
+          "line": 40
         }
       },
       {
         "defaultMessage": "!!!Language",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 47
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.language",
         "start": {
           "column": 12,
-          "line": 42
+          "line": 44
         }
       },
       {
         "defaultMessage": "!!!Dark Mode",
         "end": {
           "column": 3,
-          "line": 49
+          "line": 51
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.darkMode",
         "start": {
           "column": 12,
-          "line": 46
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Display disabled services tabs",
         "end": {
           "column": 3,
-          "line": 53
+          "line": 55
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showDisabledServices",
         "start": {
           "column": 24,
-          "line": 50
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Show unread message badge when notifications are disabled",
         "end": {
           "column": 3,
-          "line": 57
+          "line": 59
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.showMessagesBadgesWhenMuted",
         "start": {
           "column": 29,
-          "line": 54
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Enable spell checking",
         "end": {
           "column": 3,
-          "line": 61
+          "line": 63
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableSpellchecking",
         "start": {
           "column": 23,
-          "line": 58
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Enable GPU Acceleration",
         "end": {
           "column": 3,
-          "line": 65
+          "line": 67
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.enableGPUAcceleration",
         "start": {
           "column": 25,
-          "line": 62
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Include beta versions",
         "end": {
           "column": 3,
-          "line": 69
+          "line": 71
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
         "id": "settings.app.form.beta",
         "start": {
           "column": 8,
-          "line": 66
+          "line": 68
+        }
+      },
+      {
+        "defaultMessage": "!!!Enable Franz Todos",
+        "end": {
+          "column": 3,
+          "line": 75
+        },
+        "file": "src/containers/settings/EditSettingsScreen.js",
+        "id": "settings.app.form.enableTodos",
+        "start": {
+          "column": 15,
+          "line": 72
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index addb4064c..9e63fdbca 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -206,6 +206,7 @@
   "settings.app.form.enableGPUAcceleration": "Enable GPU Acceleration",
   "settings.app.form.enableSpellchecking": "Enable spell checking",
   "settings.app.form.enableSystemTray": "Show Franz in system tray",
+  "settings.app.form.enableTodos": "Enable Franz Todos",
   "settings.app.form.language": "Language",
   "settings.app.form.minimizeToSystemTray": "Minimize Franz to system tray",
   "settings.app.form.runInBackground": "Keep Franz in background when closing the window",
@@ -378,4 +379,4 @@
   "workspaceDrawer.workspaceFeatureInfo": "<p>Franz Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time.</p><p>You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.</p>",
   "workspaceDrawer.workspacesSettingsTooltip": "Edit workspaces settings",
   "workspaces.switchingIndicator.switchingTo": "Switching to"
-}
\ No newline at end of file
+}
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index d3b413540..2b666e7e9 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Launch Franz on start",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 22,
+      "line": 24,
       "column": 21
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Open in background",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 26
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Keep Franz in background when closing the window",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 19
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Show Franz in system tray",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 20
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Minimize Franz to system tray",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 38,
+      "line": 40,
       "column": 24
     },
     "end": {
-      "line": 41,
+      "line": 43,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Language",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 42,
+      "line": 44,
       "column": 12
     },
     "end": {
-      "line": 45,
+      "line": 47,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!Dark Mode",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 46,
+      "line": 48,
       "column": 12
     },
     "end": {
-      "line": 49,
+      "line": 51,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Display disabled services tabs",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 50,
+      "line": 52,
       "column": 24
     },
     "end": {
-      "line": 53,
+      "line": 55,
       "column": 3
     }
   },
@@ -108,11 +108,11 @@
     "defaultMessage": "!!!Show unread message badge when notifications are disabled",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 54,
+      "line": 56,
       "column": 29
     },
     "end": {
-      "line": 57,
+      "line": 59,
       "column": 3
     }
   },
@@ -121,11 +121,11 @@
     "defaultMessage": "!!!Enable spell checking",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 58,
+      "line": 60,
       "column": 23
     },
     "end": {
-      "line": 61,
+      "line": 63,
       "column": 3
     }
   },
@@ -134,11 +134,11 @@
     "defaultMessage": "!!!Enable GPU Acceleration",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 62,
+      "line": 64,
       "column": 25
     },
     "end": {
-      "line": 65,
+      "line": 67,
       "column": 3
     }
   },
@@ -147,11 +147,24 @@
     "defaultMessage": "!!!Include beta versions",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
-      "line": 66,
+      "line": 68,
       "column": 8
     },
     "end": {
-      "line": 69,
+      "line": 71,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.app.form.enableTodos",
+    "defaultMessage": "!!!Enable Franz Todos",
+    "file": "src/containers/settings/EditSettingsScreen.js",
+    "start": {
+      "line": 72,
+      "column": 15
+    },
+    "end": {
+      "line": 75,
       "column": 3
     }
   }
-- 
cgit v1.2.3-70-g09d2