3 files changed, 100 insertions, 20 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 9dd313109..143955a7b 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -4,12 +4,31 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
 import { Icon } from '@meetfranz/ui';
+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';
 
 const OPEN_TODOS_BUTTON_SIZE = 45;
 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.',
+  },
+  upgradeCTA: {
+    id: 'feature.todos.premium.upgrade',
+    defaultMessage: '!!!Upgrade Account',
+  },
+  rolloutInfo: {
+    id: 'feature.todos.premium.rollout',
+    defaultMessage: '!!!Franz Todos will be available to everyone soon.',
+  },
+});
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -47,7 +66,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),
@@ -71,10 +90,10 @@ 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: 0,
+    opacity: ({ isTodosIncludedInCurrentPlan }) => (!isTodosIncludedInCurrentPlan ? 1 : 0),
     transition: 'opacity 0.5s',
     zIndex: 600,
     display: 'flex',
@@ -86,6 +105,26 @@ const styles = theme => ({
       fill: theme.todos.toggleButton.textColor,
     },
   },
+  premiumContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '80%',
+    maxWidth: 300,
+    margin: [-50, 'auto', 0],
+    textAlign: 'center',
+  },
+  premiumIcon: {
+    marginBottom: 40,
+    background: theme.styleTypes.primary.accent,
+    fill: theme.styleTypes.primary.contrast,
+    padding: 10,
+    borderRadius: 10,
+  },
+  premiumCTA: {
+    marginTop: 40,
+  },
 });
 
 @injectSheet(styles) @observer
@@ -99,6 +138,7 @@ class TodosWebview extends Component {
     resize: PropTypes.func.isRequired,
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
+    isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -106,6 +146,10 @@ class TodosWebview extends Component {
     width: 300,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   componentWillMount() {
     const { width } = this.props;
 
@@ -182,9 +226,19 @@ class TodosWebview extends Component {
 
   render() {
     const {
-      classes, isVisible, togglePanel,
+      classes,
+      isVisible,
+      togglePanel,
+      isTodosIncludedInCurrentPlan,
     } = this.props;
-    const { width, delta, isDragging } = this.state;
+
+    const {
+      width,
+      delta,
+      isDragging,
+    } = this.state;
+
+    const { intl } = this.context;
 
     return (
       <div
@@ -198,7 +252,7 @@ class TodosWebview extends Component {
           className={isVisible ? classes.closeTodosButton : classes.openTodosButton}
           type="button"
         >
-          <Icon icon={isVisible ? 'mdiChevronRight' : 'mdiCheckAll'} size={2} />
+          <Icon icon={isVisible ? mdiChevronRight : mdiCheckAll} size={2} />
         </button>
         <div
           className={classes.resizeHandler}
@@ -211,18 +265,33 @@ class TodosWebview extends Component {
             style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
           />
         )}
-        <Webview
-          className={classes.webview}
-          onDidAttach={() => {
-            const { setTodosWebview } = this.props;
-            setTodosWebview(this.webview);
-            this.startListeningToIpcMessages();
-          }}
-          partition="persist:todos"
-          preload="./features/todos/preload.js"
-          ref={(webview) => { this.webview = webview ? webview.view : null; }}
-          src={environment.TODOS_FRONTEND}
-        />
+        {isTodosIncludedInCurrentPlan ? (
+          <Webview
+            className={classes.webview}
+            onDidAttach={() => {
+              const { setTodosWebview } = this.props;
+              setTodosWebview(this.webview);
+              this.startListeningToIpcMessages();
+            }}
+            partition="persist:todos"
+            preload="./features/todos/preload.js"
+            ref={(webview) => { this.webview = webview ? webview.view : null; }}
+            src={environment.TODOS_FRONTEND}
+          />
+        ) : (
+          <Appear>
+            <div className={classes.premiumContainer}>
+              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={5} />
+              <p>{intl.formatMessage(messages.premiumInfo)}</p>
+              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
+              <ActivateTrialButton
+                className={classes.premiumCTA}
+                gaEventInfo={{ category: 'Todos', event: 'upgrade' }}
+                short
+              />
+            </div>
+          </Appear>
+        )}
       </div>
     );
   }
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index d071d0677..65afc985b 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
-import { observer } from 'mobx-react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
 
+import FeaturesStore from '../../../stores/FeaturesStore';
 import TodosWebview from '../components/TodosWebview';
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
 import { TODOS_MIN_WIDTH, todosStore } from '..';
 import { todoActions } from '../actions';
 
-@observer
+@inject('stores', 'actions') @observer
 class TodosScreen extends Component {
   render() {
     if (!todosStore || !todosStore.isFeatureActive) {
@@ -23,6 +25,7 @@ class TodosScreen extends Component {
           width={todosStore.width}
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
+          isTodosIncludedInCurrentPlan={this.props.stores.features.features.isTodosIncludedInCurrentPlan || false}
         />
       </ErrorBoundary>
     );
@@ -30,3 +33,9 @@ class TodosScreen extends Component {
 }
 
 export default TodosScreen;
+
+TodosScreen.wrappedComponent.propTypes = {
+  stores: PropTypes.shape({
+    features: PropTypes.instanceOf(FeaturesStore).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index 242b38bf7..170408ebb 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,6 +30,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
+    if (this.stores.services.all.length === 0 || delayAppState.isDelayAppScreenVisible) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;