Merge branch 'develop' into i18n

3 files changed, 26 insertions, 18 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d8d96ba85..fa530daed 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -7,9 +7,9 @@ import { Icon } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
 
 import { mdiChevronRight, mdiCheckAll } from '@mdi/js';
-import { Button } from '@meetfranz/forms';
 import * as environment from '../../../environment';
 import Appear from '../../../components/ui/effects/Appear';
+import UpgradeButton from '../../../components/ui/UpgradeButton';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 const CLOSE_TODOS_BUTTON_SIZE = 35;
@@ -70,7 +70,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 +94,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),
@@ -116,7 +116,7 @@ const styles = theme => ({
     alignItems: 'center',
     width: '80%',
     maxWidth: 300,
-    margin: [-50, 'auto', 0],
+    margin: [0, 'auto'],
     textAlign: 'center',
   },
   premiumIcon: {
@@ -143,7 +143,6 @@ class TodosWebview extends Component {
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
     isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
-    upgradeAccount: PropTypes.func.isRequired,
   };
 
   state = {
@@ -235,7 +234,6 @@ class TodosWebview extends Component {
       isVisible,
       togglePanel,
       isTodosIncludedInCurrentPlan,
-      upgradeAccount,
     } = this.props;
 
     const {
@@ -288,14 +286,13 @@ 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>
-                <Button
-                  label={intl.formatMessage(messages.upgradeCTA)}
+                <UpgradeButton
                   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..5c6abff4c 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 (delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
@@ -60,6 +61,7 @@ export default class TodoStore extends FeatureStore {
 
     this._allReactions = createReactions([
       this._setFeatureEnabledReaction,
+      this._firstLaunchReaction,
     ]);
 
     this._registerReactions(this._allReactions);
@@ -145,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,
+      });
+    }
+  };
 }