Merge branch 'develop' of https://github.com/meetfranz/franz into develop

2 files changed, 24 insertions, 8 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 143955a7b..c06183e37 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;
@@ -17,7 +17,7 @@ const CLOSE_TODOS_BUTTON_SIZE = 35;
 const messages = defineMessages({
   premiumInfo: {
     id: 'feature.todos.premium.info',
-    defaultMessage: '!!!The Franz Todos Preview is currently only available for Franz Premium accounts.',
+    defaultMessage: '!!!Franz Todos are available to premium users now!',
   },
   upgradeCTA: {
     id: 'feature.todos.premium.upgrade',
@@ -25,7 +25,7 @@ const messages = defineMessages({
   },
   rolloutInfo: {
     id: 'feature.todos.premium.rollout',
-    defaultMessage: '!!!Franz Todos will be available to everyone soon.',
+    defaultMessage: '!!!Everyone else will have to wait a little longer.',
   },
 });
 
@@ -112,7 +112,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -281,10 +281,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 170408ebb..aebe0dcbe 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;
@@ -62,6 +62,7 @@ export default class TodoStore extends FeatureStore {
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
       this._updateTodosConfig,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -156,5 +157,20 @@ export default class TodoStore extends FeatureStore {
   _updateTodosConfig = () => {
     // Resend the config if any part changes in Franz:
     this._onTodosClientInitialized();
-  }
+  };
+
+  _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,
+      });
+    }
+  };
 }