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>

14 files changed, 136 insertions, 133 deletions

diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index f679eeed0..7cf02c237 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -10,7 +10,6 @@ import injectSheet from 'react-jss';
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
 import serverlessLogin from '../../../helpers/serverless-helpers';
-import { TODOS_RECIPE_ID } from '../../../features/todos';
 
 const messages = defineMessages({
   welcome: {
@@ -171,7 +170,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter(service => service.recipe.id !== TODOS_RECIPE_ID).map(service => (
+        {services.filter(service => !service.isTodosService).map(service => (
           <ServiceView
             key={service.id}
             service={service}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 8a362d3c9..b7e007186 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -390,12 +390,10 @@ export default @observer class EditSettingsForm extends Component {
                         )}
                       </div>
                     )}
+                    <Hr />
                   </>
                 )}
 
-
-                <Hr />
-
                 <Toggle field={form.$('scheduledDNDEnabled')} />
                 {scheduledDNDEnabled && (
                   <>
diff --git a/src/config.js b/src/config.js
index 8930c755f..3a728b55e 100644
--- a/src/config.js
+++ b/src/config.js
@@ -62,19 +62,44 @@ export const SEARCH_ENGINE_URLS = {
   [SEARCH_ENGINE_DDG]: ({ searchTerm }) => `https://duckduckgo.com/?q=${searchTerm}`,
 };
 
+export const CUSTOM_TODO_SERVICE = 'isUsingCustomTodoService';
+
+const TODO_TODOIST_URL = 'https://todoist.com/app';
+const TODO_FRANZ_TODOS_URL = 'https://app.franztodos.com';
+const TODO_TICKTICK_URL = 'https://ticktick.com/signin';
+const TODO_MSTODO_URL = 'https://todo.microsoft.com/?app#';
+const TODO_HABITICA_URL = 'https://habitica.com/login';
+const TODO_NOZBE_URL = 'https://app.nozbe.com/#login';
+const TODO_RTM_URL = 'https://www.rememberthemilk.com/login/';
+const TODO_ANYDO_URL = 'https://desktop.any.do/';
+const TODO_GOOGLETASKS_URL = 'https://tasks.google.com/embed/?origin=https%3A%2F%2Fcalendar.google.com&fullWidth=1';
+
+export const TODO_SERVICE_RECIPE_IDS = {
+  [TODO_TODOIST_URL]: 'todoist',
+  [TODO_FRANZ_TODOS_URL]: 'franz-todos',
+  [TODO_TICKTICK_URL]: 'TickTick',
+  [TODO_MSTODO_URL]: 'mstodo',
+  [TODO_HABITICA_URL]: 'habitica',
+  [TODO_ANYDO_URL]: 'anydo',
+};
+
 export const TODO_APPS = {
-  'https://todoist.com/app': 'Todoist',
-  'https://app.franztodos.com': 'Franz Todo',
-  'https://ticktick.com/signin': 'TickTick',
-  'https://todo.microsoft.com/?app#': 'Microsoft To Do',
-  'https://habitica.com/login': 'Habitica',
-  'https://app.nozbe.com/#login': 'Nozbe',
-  'https://www.rememberthemilk.com/login/': 'Remember The Milk',
-  'https://desktop.any.do/': 'Any.do',
-  'https://tasks.google.com/embed/?origin=https%3A%2F%2Fcalendar.google.com&fullWidth=1': 'Google Tasks',
-  isUsingCustomTodoService: 'Other service',
+  [TODO_TODOIST_URL]: 'Todoist',
+  [TODO_FRANZ_TODOS_URL]: 'Franz Todo',
+  [TODO_TICKTICK_URL]: 'TickTick',
+  [TODO_MSTODO_URL]: 'Microsoft To Do',
+  [TODO_HABITICA_URL]: 'Habitica',
+  [TODO_NOZBE_URL]: 'Nozbe',
+  [TODO_RTM_URL]: 'Remember The Milk',
+  [TODO_ANYDO_URL]: 'Any.do',
+  [TODO_GOOGLETASKS_URL]: 'Google Tasks',
+  [CUSTOM_TODO_SERVICE]: 'Other service',
 };
 
+export const DEFAULT_TODO_SERVICE = TODO_FRANZ_TODOS_URL;
+export const DEFAULT_TODO_RECIPE_ID = TODO_SERVICE_RECIPE_IDS[DEFAULT_TODO_SERVICE];
+export const DEFAULT_TODO_SERVICE_NAME = TODO_APPS[DEFAULT_TODO_SERVICE];
+
 export const SIDEBAR_WIDTH = {
   35: 'Extremely slim sidebar',
   45: 'Very slim sidebar',
@@ -123,7 +148,7 @@ export const DEFAULT_APP_SETTINGS = {
 
   // Ferdi specific options
   server: LIVE_FERDI_API,
-  predefinedTodoServer: 'https://app.franztodos.com',
+  predefinedTodoServer: DEFAULT_TODO_SERVICE,
   autohideMenuBar: false,
   lockingFeatureEnabled: false,
   locked: false,
diff --git a/src/containers/auth/SetupAssistantScreen.js b/src/containers/auth/SetupAssistantScreen.js
index 960ed7e33..1c4fa6c22 100644
--- a/src/containers/auth/SetupAssistantScreen.js
+++ b/src/containers/auth/SetupAssistantScreen.js
@@ -3,11 +3,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { inject, observer } from 'mobx-react';
 
+import { DEFAULT_TODO_RECIPE_ID, DEFAULT_TODO_SERVICE_NAME } from '../../config';
 import { sleep } from '../../helpers/async-helpers';
 import SetupAssistant from '../../components/auth/SetupAssistant';
 import ServicesStore from '../../stores/ServicesStore';
 import RecipesStore from '../../stores/RecipesStore';
-import { TODOS_RECIPE_ID } from '../../features/todos';
 import UserStore from '../../stores/UserStore';
 
 export default @inject('stores', 'actions') @observer class SetupAssistantScreen extends Component {
@@ -82,11 +82,11 @@ export default @inject('stores', 'actions') @observer class SetupAssistantScreen
       await sleep(100);
     }
 
-    // Add Franz ToDos
+    // Add todo service
     await services._createService({
-      recipeId: TODOS_RECIPE_ID,
+      recipeId: DEFAULT_TODO_RECIPE_ID,
       serviceData: {
-        name: 'Franz ToDos',
+        name: DEFAULT_TODO_SERVICE_NAME,
       },
       redirect: false,
       skipCleanup: true,
diff --git a/src/features/appearance/index.js b/src/features/appearance/index.js
index 82a0971eb..b5648250e 100644
--- a/src/features/appearance/index.js
+++ b/src/features/appearance/index.js
@@ -93,10 +93,10 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
     }
   ` : `
     .sidebar {
-      width: ${width - 2}px !important;
+      width: ${width}px !important;
     }
     .tab-item {
-      width: ${width - 2}px !important;
+      width: ${width}px !important;
       height: ${width - 5 + iconSize}px !important;
     }
     .tab-item .tab-item__icon {
@@ -105,6 +105,9 @@ function generateServiceRibbonWidthStyle(widthStr, iconSizeStr, vertical) {
     .sidebar__button {
       font-size: ${width / 3}px !important;
     }
+    .todos__todos-panel--expanded {
+      width: calc(100% - ${300 + width}px) !important;
+    }
   `;
 }
 
@@ -156,6 +159,10 @@ function generateVerticalStyle(widthStr, alwaysShowWorkspaces) {
   .workspaces-drawer {
     maring-top: -${sidebarWidthStr} !important;
   }
+
+  .todos__todos-panel--expanded {
+    width: calc(100% - 300px) !important;
+  }
   `;
 }
 
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) {
diff --git a/src/helpers/url-helpers.js b/src/helpers/url-helpers.js
index 2f429a25c..972f9b79a 100644
--- a/src/helpers/url-helpers.js
+++ b/src/helpers/url-helpers.js
@@ -5,7 +5,12 @@ import { ALLOWED_PROTOCOLS } from '../config';
 const debug = require('debug')('Ferdi:Helpers:url');
 
 export function isValidExternalURL(url) {
-  const parsedUrl = new URL(url);
+  let parsedUrl;
+  try {
+    parsedUrl = new URL(url);
+  } catch (_) {
+    return false;
+  }
 
   const isAllowed = ALLOWED_PROTOCOLS.includes(parsedUrl.protocol);
 
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 2f998a2c2..b8ea986ce 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -1743,65 +1743,65 @@
         "defaultMessage": "!!!Welcome to Ferdi",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 18
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.welcome",
         "start": {
           "column": 11,
-          "line": 16
+          "line": 15
         }
       },
       {
         "defaultMessage": "!!!Get started",
         "end": {
           "column": 3,
-          "line": 23
+          "line": 22
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.getStarted",
         "start": {
           "column": 14,
-          "line": 20
+          "line": 19
         }
       },
       {
         "defaultMessage": "!!!Please login to use Ferdi.",
         "end": {
           "column": 3,
-          "line": 27
+          "line": 26
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.login",
         "start": {
           "column": 9,
-          "line": 24
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Use Ferdi without an Account",
         "end": {
           "column": 3,
-          "line": 31
+          "line": 30
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.serverless",
         "start": {
           "column": 14,
-          "line": 28
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
         "end": {
           "column": 3,
-          "line": 35
+          "line": 34
         },
         "file": "src/components/services/content/Services.js",
         "id": "services.serverInfo",
         "start": {
           "column": 14,
-          "line": 32
+          "line": 31
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/services/content/Services.json b/src/i18n/messages/src/components/services/content/Services.json
index 3c40b11ab..6a5eb052e 100644
--- a/src/i18n/messages/src/components/services/content/Services.json
+++ b/src/i18n/messages/src/components/services/content/Services.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Welcome to Ferdi",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 16,
+      "line": 15,
       "column": 11
     },
     "end": {
-      "line": 19,
+      "line": 18,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Get started",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 20,
+      "line": 19,
       "column": 14
     },
     "end": {
-      "line": 23,
+      "line": 22,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Please login to use Ferdi.",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 24,
+      "line": 23,
       "column": 9
     },
     "end": {
-      "line": 27,
+      "line": 26,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Use Ferdi without an Account",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 28,
+      "line": 27,
       "column": 14
     },
     "end": {
-      "line": 31,
+      "line": 30,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.",
     "file": "src/components/services/content/Services.js",
     "start": {
-      "line": 32,
+      "line": 31,
       "column": 14
     },
     "end": {
-      "line": 35,
+      "line": 34,
       "column": 3
     }
   }
diff --git a/src/models/Service.js b/src/models/Service.js
index 0d1dff431..d0c6a7103 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -4,7 +4,7 @@ import { webContents } from '@electron/remote';
 import normalizeUrl from 'normalize-url';
 import path from 'path';
 
-import { TODOS_RECIPE_ID, todosStore } from '../features/todos';
+import { todosStore } from '../features/todos';
 import { isValidExternalURL } from '../helpers/url-helpers';
 import UserAgent from './UserAgent';
 
@@ -184,8 +184,12 @@ export default class Service {
     };
   }
 
+  @computed get isTodosService() {
+    return this.recipe.id === todosStore.todoRecipeId;
+  }
+
   get webview() {
-    if (this.recipe.id === TODOS_RECIPE_ID) {
+    if (this.isTodosService) {
       return todosStore.webview;
     }
 
@@ -243,7 +247,6 @@ export default class Service {
     return this.recipe.partition || `persist:service-${this.id}`;
   }
 
-
   initializeWebViewEvents({ handleIPCMessage, openWindow, stores }) {
     const webviewWebContents = webContents.fromId(this.webview.getWebContentsId());
 
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 48b128966..752f287e8 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -21,7 +21,6 @@ import { workspaceStore } from '../features/workspaces';
 import { serviceLimitStore } from '../features/serviceLimit';
 import { RESTRICTION_TYPES } from '../models/Service';
 import { KEEP_WS_LOADED_USID } from '../config';
-import { TODOS_RECIPE_ID } from '../features/todos';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 
 const debug = require('debug')('Ferdi:ServiceStore');
@@ -279,11 +278,11 @@ export default class ServicesStore extends Store {
   }
 
   @computed get isTodosServiceAdded() {
-    return this.allDisplayed.find(service => service.recipe.id === TODOS_RECIPE_ID && service.isEnabled) || null;
+    return this.allDisplayed.find(service => service.isTodosService && service.isEnabled) || false;
   }
 
   @computed get isTodosServiceActive() {
-    return this.active && this.active.recipe.id === TODOS_RECIPE_ID;
+    return this.active && this.active.isTodosService;
   }
 
   one(id) {
@@ -484,7 +483,7 @@ export default class ServicesStore extends Store {
     this._awake({ serviceId: service.id });
     service.lastUsed = Date.now();
 
-    if (this.active.recipe.id === TODOS_RECIPE_ID && !this.stores.todos.settings.isFeatureEnabledByUser) {
+    if (this.isTodosServiceActive && !this.stores.todos.settings.isFeatureEnabledByUser) {
       this.actions.todos.toggleTodosFeatureVisibility();
     }
 
@@ -718,7 +717,7 @@ export default class ServicesStore extends Store {
     service.resetMessageCount();
     service.lostRecipeConnection = false;
 
-    if (service.recipe.id === TODOS_RECIPE_ID) {
+    if (service.isTodosService) {
       return this.actions.todos.reload();
     }
 
@@ -805,7 +804,7 @@ export default class ServicesStore extends Store {
 
   @action _openDevTools({ serviceId }) {
     const service = this.one(serviceId);
-    if (service.recipe.id === TODOS_RECIPE_ID) {
+    if (service.isTodosService) {
       this.actions.todos.openDevTools();
     } else {
       service.webview.openDevTools();