Fix active Todos service behaviour (#1481)

* Return false instead of null in isTodosServiceAdded

* Resolve from TODOS_RECIPES_ID instead of hardcoded TODOS_RECIPE_ID

* Fix TodosWebview width toggling when isTodosServiceActive

* Add more todo service recipe IDs

* Refactor todos state management

* Moved todos service URL and recipe ID computation logic to todos/store
* Simplified TodosWebview by delegating to the store for the URL and
  removing the (unused) payment logic
* Made the todos service computation logic in the Service model depend
  on the logic in todos/store
* Made ServicesStore depend on the todos service logic from the Service
  model

* Todos appearance fixes

* Hide double horizontal rules if todo settings are hidden due to an
  added todo service
* Hide todos panel border when the panel is hidden or expanded
* Make expanded todos panel obey sidebar width and vertical style
  settings

* Make todos/store use isValidExternalURL

* Harden isValidExternalURL against malformed URLs

* Reduce todo URL string duplication in config.js

Co-authored-by: Kristóf Marussy <kristof@marussy.com>

4 files changed, 48 insertions, 81 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index 634ec4caa..03bb5efe8 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -1,47 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { observer, inject } from 'mobx-react';
+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 classnames from 'classnames';
 
-import { mdiCheckAll } from '@mdi/js';
-import SettingsStore from '../../../stores/SettingsStore';
-
-import Appear from '../../../components/ui/effects/Appear';
-import UpgradeButton from '../../../components/ui/UpgradeButton';
 import { TODOS_PARTITION_ID } from '..';
 
-// NOTE: https://stackoverflow.com/questions/5717093/check-if-a-javascript-string-is-a-url
-function validURL(str) {
-  let url;
-
-  try {
-    url = new URL(str);
-  } catch (_) {
-    return false;
-  }
-
-  return url.protocol === 'http:' || url.protocol === 'https:';
-}
-
-const messages = defineMessages({
-  premiumInfo: {
-    id: 'feature.todos.premium.info',
-    defaultMessage: '!!!Franz Todos are available to premium users now!',
-  },
-  upgradeCTA: {
-    id: 'feature.todos.premium.upgrade',
-    defaultMessage: '!!!Upgrade Account',
-  },
-  rolloutInfo: {
-    id: 'feature.todos.premium.rollout',
-    defaultMessage: '!!!Everyone else will have to wait a little longer.',
-  },
-});
-
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -96,10 +61,14 @@ const styles = theme => ({
     position: 'absolute',
     right: 0,
     zIndex: 0,
+    borderLeftWidth: 0,
+  },
+  hidden: {
+    borderLeftWidth: 0,
   },
 });
 
-@injectSheet(styles) @inject('stores') @observer
+@injectSheet(styles) @observer
 class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
@@ -111,10 +80,8 @@ class TodosWebview extends Component {
     width: PropTypes.number.isRequired,
     minWidth: PropTypes.number.isRequired,
     userAgent: PropTypes.string.isRequired,
-    isTodosIncludedInCurrentPlan: PropTypes.bool.isRequired,
-    stores: PropTypes.shape({
-      settings: PropTypes.instanceOf(SettingsStore).isRequired,
-    }).isRequired,
+    todoUrl: PropTypes.string.isRequired,
+    isTodoUrlValid: PropTypes.bool.isRequired,
   };
 
   state = {
@@ -122,10 +89,6 @@ class TodosWebview extends Component {
     width: 300,
   };
 
-  static contextTypes = {
-    intl: intlShape,
-  };
-
   componentWillMount() {
     const { width } = this.props;
 
@@ -209,8 +172,8 @@ class TodosWebview extends Component {
       isTodosServiceActive,
       isVisible,
       userAgent,
-      isTodosIncludedInCurrentPlan,
-      stores,
+      todoUrl,
+      isTodoUrlValid,
     } = this.props;
 
     const {
@@ -219,29 +182,20 @@ class TodosWebview extends Component {
       isDragging,
     } = this.state;
 
-    const { intl } = this.context;
-
-    const isUsingPredefinedTodoServer = stores.settings.all.app.predefinedTodoServer !== 'isUsingCustomTodoService';
-    const todoUrl = isUsingPredefinedTodoServer
-      ? stores.settings.all.app.predefinedTodoServer
-      : stores.settings.all.app.customTodoServer;
-    let isTodoUrlValid = true;
-    if (isUsingPredefinedTodoServer === false) {
-      isTodoUrlValid = validURL(todoUrl);
+    let displayedWidth = isVisible ? width : 0;
+    if (isTodosServiceActive) {
+      displayedWidth = null;
     }
 
-    const todosPanelStyle = {
-      width: isVisible ? width : 0,
-      borderLeftWidth: isVisible ? '1px' : 0,
-    };
-
     return (
       <div
         className={classnames({
           [classes.root]: true,
           [classes.isTodosServiceActive]: isTodosServiceActive,
+          'todos__todos-panel--expanded': isTodosServiceActive,
+          [classes.hidden]: !isVisible,
         })}
-        style={todosPanelStyle}
+        style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
         ref={(node) => { this.node = node; }}
         id="todos-panel"
@@ -257,9 +211,7 @@ class TodosWebview extends Component {
             style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
           />
         )}
-        {isTodosIncludedInCurrentPlan ? (
-          isTodoUrlValid
-          && (
+        {isTodoUrlValid && (
           <Webview
             className={classes.webview}
             onDidAttach={() => {
@@ -273,20 +225,6 @@ class TodosWebview extends Component {
             useragent={userAgent}
             src={todoUrl}
           />
-          )
-        ) : (
-          <Appear>
-            <div className={classes.premiumContainer}>
-              <Icon icon={mdiCheckAll} className={classes.premiumIcon} size={4} />
-              <p>{intl.formatMessage(messages.premiumInfo)}</p>
-              <p>{intl.formatMessage(messages.rolloutInfo)}</p>
-              <UpgradeButton
-                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 631893f93..96147d5ab 100644
--- a/src/features/todos/containers/TodosScreen.js
+++ b/src/features/todos/containers/TodosScreen.js
@@ -28,7 +28,8 @@ class TodosScreen extends Component {
           minWidth={TODOS_MIN_WIDTH}
           resize={width => todoActions.resize({ width })}
           userAgent={todosStore.userAgent}
-          isTodosIncludedInCurrentPlan
+          todoUrl={todosStore.todoUrl}
+          isTodoUrlValid={todosStore.isTodoUrlValid}
         />
       </ErrorBoundary>
     );
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
index ebd2c60ef..b6d13e5e1 100644
--- a/src/features/todos/index.js
+++ b/src/features/todos/index.js
@@ -9,7 +9,6 @@ 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_RECIPE_ID = 'franz-todos';
 export const TODOS_PARTITION_ID = 'persist:todos';
 
 export const TODOS_ROUTES = {
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index af8519d9c..4febd7bb1 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -7,6 +7,8 @@ import {
 import localStorage from 'mobx-localstorage';
 
 import { todoActions } from './actions';
+import { CUSTOM_TODO_SERVICE, TODO_SERVICE_RECIPE_IDS } from '../../config';
+import { isValidExternalURL } from '../../helpers/url-helpers';
 import { FeatureStore } from '../utils/FeatureStore';
 import { createReactions } from '../../stores/lib/Reaction';
 import { createActionBindings } from '../utils/ActionBinding';
@@ -21,6 +23,8 @@ import UserAgent from '../../models/UserAgent';
 const debug = require('debug')('Ferdi:feature:todos:store');
 
 export default class TodoStore extends FeatureStore {
+  @observable stores = null;
+
   @observable isFeatureEnabled = false;
 
   @observable isFeatureActive = false;
@@ -59,6 +63,31 @@ export default class TodoStore extends FeatureStore {
     return this.userAgentModel.userAgent;
   }
 
+  @computed get isUsingPredefinedTodoServer() {
+    return this.stores && this.stores.settings.app.predefinedTodoServer !== CUSTOM_TODO_SERVICE;
+  }
+
+  @computed get todoUrl() {
+    if (!this.stores) {
+      return null;
+    }
+    return this.isUsingPredefinedTodoServer
+      ? this.stores.settings.app.predefinedTodoServer
+      : this.stores.settings.app.customTodoServer;
+  }
+
+  @computed get isTodoUrlValid() {
+    return !this.isUsingPredefinedTodoServer || isValidExternalURL(this.todoUrl);
+  }
+
+  @computed get todoRecipeId() {
+    if (this.isFeatureEnabledByUser && this.isUsingPredefinedTodoServer
+        && this.todoUrl in TODO_SERVICE_RECIPE_IDS) {
+      return TODO_SERVICE_RECIPE_IDS[this.todoUrl];
+    }
+    return null;
+  }
+
   // ========== PUBLIC API ========= //
 
   @action start(stores, actions) {