Add pre-launch notice

10 files changed, 234 insertions, 60 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 288c1906f..d8d96ba85 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 { Button } from '@meetfranz/forms';
 import * as environment from '../../../environment';
+import Appear from '../../../components/ui/effects/Appear';
 
 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,
@@ -78,7 +97,7 @@ const styles = theme => ({
     bottom: 80,
     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',
@@ -90,6 +109,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
@@ -103,6 +142,8 @@ class TodosWebview extends Component {
     resize: PropTypes.func.isRequired,
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
+    isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    upgradeAccount: PropTypes.func.isRequired,
   };
 
   state = {
@@ -110,6 +151,10 @@ class TodosWebview extends Component {
     width: 300,
   };
 
+  static contextTypes = {
+    intl: intlShape,
+  };
+
   componentWillMount() {
     const { width } = this.props;
 
@@ -186,9 +231,20 @@ class TodosWebview extends Component {
 
   render() {
     const {
-      classes, isVisible, togglePanel,
+      classes,
+      isVisible,
+      togglePanel,
+      isTodosIncludedInCurrentPlan,
+      upgradeAccount,
     } = this.props;
-    const { width, delta, isDragging } = this.state;
+
+    const {
+      width,
+      delta,
+      isDragging,
+    } = this.state;
+
+    const { intl } = this.context;
 
     return (
       <>
@@ -203,7 +259,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}
@@ -216,18 +272,34 @@ 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>
+                <Button
+                  label={intl.formatMessage(messages.upgradeCTA)}
+                  className={classes.premiumCTA}
+                  onClick={upgradeAccount}
+                  buttonType="inverted"
+                />
+              </div>
+            </Appear>
+          )}
         </div>
       </>
     );
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
index d071d0677..7f3688828 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,8 @@ class TodosScreen extends Component {
           width={todosStore.width}
           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>
     );
@@ -30,3 +34,14 @@ class TodosScreen extends Component {
 }
 
 export default TodosScreen;
+
+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 acf95df0d..7da3b7f49 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -29,6 +29,7 @@ export default class TodoStore extends FeatureStore {
   }
 
   @computed get isTodosPanelVisible() {
+    if (this.stores.services.all.length === 0) return false;
     if (this.settings.isTodosPanelVisible === undefined) return DEFAULT_TODOS_VISIBLE;
 
     return this.settings.isTodosPanelVisible;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index 684e50dd0..e7bc0b157 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -7,6 +7,7 @@ import { H1, Icon, ProBadge } from '@meetfranz/ui';
 import { Button } from '@meetfranz/forms/lib';
 import ReactTooltip from 'react-tooltip';
 
+import { mdiPlusBox, mdiSettings } from '@mdi/js';
 import WorkspaceDrawerItem from './WorkspaceDrawerItem';
 import { workspaceActions } from '../actions';
 import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../index';
@@ -159,7 +160,7 @@ class WorkspaceDrawer extends Component {
             data-tip={`${intl.formatMessage(messages.workspacesSettingsTooltip)}`}
           >
             <Icon
-              icon="mdiSettings"
+              icon={mdiSettings}
               size={1.5}
               className={classes.workspacesSettingsButtonIcon}
             />
@@ -184,7 +185,7 @@ class WorkspaceDrawer extends Component {
                 className={classes.premiumCtaButton}
                 buttonType="primary"
                 label={intl.formatMessage(messages.premiumCtaButtonLabel)}
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 onClick={() => {
                   workspaceActions.openWorkspaceSettings();
                   gaEvent(GA_CATEGORY_WORKSPACES, 'add', 'drawerPremiumCta');
@@ -227,7 +228,7 @@ class WorkspaceDrawer extends Component {
               }}
             >
               <Icon
-                icon="mdiPlusBox"
+                icon={mdiPlusBox}
                 size={1}
                 className={classes.workspacesSettingsButtonIcon}
               />
diff --git a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
index c4a800a7b..a70d1d66f 100644
--- a/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
+++ b/src/features/workspaces/components/WorkspaceSwitchingIndicator.js
@@ -21,11 +21,8 @@ const styles = theme => ({
     alignItems: 'flex-start',
     position: 'absolute',
     transition: 'width 0.5s ease',
-    width: '100%',
-    marginTop: '20px',
-  },
-  wrapperWhenDrawerIsOpen: {
     width: `calc(100% - ${theme.workspaces.drawer.width}px)`,
+    marginTop: '20px',
   },
   component: {
     background: 'rgba(20, 20, 20, 0.4)',
@@ -64,14 +61,13 @@ class WorkspaceSwitchingIndicator extends Component {
   render() {
     const { classes, theme } = this.props;
     const { intl } = this.context;
-    const { isSwitchingWorkspace, isWorkspaceDrawerOpen, nextWorkspace } = workspaceStore;
+    const { isSwitchingWorkspace, nextWorkspace } = workspaceStore;
     if (!isSwitchingWorkspace) return null;
     const nextWorkspaceName = nextWorkspace ? nextWorkspace.name : 'All services';
     return (
       <div
         className={classnames([
           classes.wrapper,
-          isWorkspaceDrawerOpen ? classes.wrapperWhenDrawerIsOpen : null,
         ])}
       >
         <div className={classes.component}>
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 62d56ad1f..dabe2f11f 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -3813,6 +3813,50 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+        "end": {
+          "column": 3,
+          "line": 21
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.info",
+        "start": {
+          "column": 15,
+          "line": 18
+        }
+      },
+      {
+        "defaultMessage": "!!!Upgrade Account",
+        "end": {
+          "column": 3,
+          "line": 25
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.upgrade",
+        "start": {
+          "column": 14,
+          "line": 22
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+        "end": {
+          "column": 3,
+          "line": 29
+        },
+        "file": "src/features/todos/components/TodosWebview.js",
+        "id": "feature.todos.premium.rollout",
+        "start": {
+          "column": 15,
+          "line": 26
+        }
+      }
+    ],
+    "path": "src/features/todos/components/TodosWebview.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Create workspace",
         "end": {
           "column": 3,
@@ -3943,104 +3987,104 @@
         "defaultMessage": "!!!Workspaces",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.headline",
         "start": {
           "column": 12,
-          "line": 16
+          "line": 17
         }
       },
       {
         "defaultMessage": "!!!All services",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 24
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.allServices",
         "start": {
           "column": 15,
-          "line": 20
+          "line": 21
         }
       },
       {
         "defaultMessage": "!!!Workspaces settings",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 28
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.workspacesSettingsTooltip",
         "start": {
           "column": 29,
-          "line": 24
+          "line": 25
         }
       },
       {
         "defaultMessage": "!!!Info about workspace feature",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 32
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.workspaceFeatureInfo",
         "start": {
           "column": 24,
-          "line": 28
+          "line": 29
         }
       },
       {
         "defaultMessage": "!!!Create your first workspace",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 36
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.premiumCtaButtonLabel",
         "start": {
           "column": 25,
-          "line": 32
+          "line": 33
         }
       },
       {
         "defaultMessage": "!!!Reactivate premium account",
         "end": {
           "column": 3,
-          "line": 39
+          "line": 40
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.reactivatePremiumAccountLabel",
         "start": {
           "column": 28,
-          "line": 36
+          "line": 37
         }
       },
       {
         "defaultMessage": "!!!add new workspace",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 44
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.addNewWorkspaceLabel",
         "start": {
           "column": 24,
-          "line": 40
+          "line": 41
         }
       },
       {
         "defaultMessage": "!!!Premium feature",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 48
         },
         "file": "src/features/workspaces/components/WorkspaceDrawer.js",
         "id": "workspaceDrawer.proFeatureBadge",
         "start": {
           "column": 23,
-          "line": 44
+          "line": 45
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 727eb2884..2bfe5a670 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -15,6 +15,9 @@
   "feature.shareFranz.shareText.email": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com",
   "feature.shareFranz.shareText.twitter": "I've added {count} services to Franz! Get the free app for WhatsApp, Messenger, Slack, Skype and co at www.meetfranz.com /cc @FranzMessenger",
   "feature.shareFranz.text": "Tell your friends and colleagues how awesome Franz is and help us to spread the word.",
+  "feature.todos.premium.info": "The Franz Todos Preview is currently only available for Franz Premium accounts.",
+  "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.notConnectedToTheInternet": "You are not connected to the internet.",
   "global.spellchecker.useDefault": "Use System Default ({default})",
@@ -371,4 +374,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/features/todos/components/TodosWebview.json b/src/i18n/messages/src/features/todos/components/TodosWebview.json
new file mode 100644
index 000000000..2387112b4
--- /dev/null
+++ b/src/i18n/messages/src/features/todos/components/TodosWebview.json
@@ -0,0 +1,41 @@
+[
+  {
+    "id": "feature.todos.premium.info",
+    "defaultMessage": "!!!The Franz Todos Preview is currently only available for Franz Premium accounts.",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 18,
+      "column": 15
+    },
+    "end": {
+      "line": 21,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.todos.premium.upgrade",
+    "defaultMessage": "!!!Upgrade Account",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 22,
+      "column": 14
+    },
+    "end": {
+      "line": 25,
+      "column": 3
+    }
+  },
+  {
+    "id": "feature.todos.premium.rollout",
+    "defaultMessage": "!!!Franz Todos will be available to everyone soon.",
+    "file": "src/features/todos/components/TodosWebview.js",
+    "start": {
+      "line": 26,
+      "column": 15
+    },
+    "end": {
+      "line": 29,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
index 9f0935620..2f340f1e9 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Workspaces",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 12
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!All services",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 20,
+      "line": 21,
       "column": 15
     },
     "end": {
-      "line": 23,
+      "line": 24,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Workspaces settings",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 24,
+      "line": 25,
       "column": 29
     },
     "end": {
-      "line": 27,
+      "line": 28,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Info about workspace feature",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 28,
+      "line": 29,
       "column": 24
     },
     "end": {
-      "line": 31,
+      "line": 32,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Create your first workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 32,
+      "line": 33,
       "column": 25
     },
     "end": {
-      "line": 35,
+      "line": 36,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Reactivate premium account",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 36,
+      "line": 37,
       "column": 28
     },
     "end": {
-      "line": 39,
+      "line": 40,
       "column": 3
     }
   },
@@ -82,11 +82,11 @@
     "defaultMessage": "!!!add new workspace",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 40,
+      "line": 41,
       "column": 24
     },
     "end": {
-      "line": 43,
+      "line": 44,
       "column": 3
     }
   },
@@ -95,11 +95,11 @@
     "defaultMessage": "!!!Premium feature",
     "file": "src/features/workspaces/components/WorkspaceDrawer.js",
     "start": {
-      "line": 44,
+      "line": 45,
       "column": 23
     },
     "end": {
-      "line": 47,
+      "line": 48,
       "column": 3
     }
   }
diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
index 9680c5bcc..2c785111f 100644
--- a/src/stores/UIStore.js
+++ b/src/stores/UIStore.js
@@ -46,6 +46,7 @@ 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);
   }