Synchronize with Franz 5.6.0 (#1033)

Co-authored-by: FranzBot <i18n@meetfranz.com>
Co-authored-by: vantezzen <hello@vantezzen.io>
Co-authored-by: Makazzz <makazzzpro@live.ca>
Co-authored-by: Stefan Malzner <stefan@adlk.io>
Co-authored-by: Amine Mouafik <amine@mouafik.fr>

11 files changed, 461 insertions, 94 deletions

diff --git a/src/components/auth/Pricing.js b/src/components/auth/Pricing.js
index 593cb9c4b..4f5a76c8a 100644
--- a/src/components/auth/Pricing.js
+++ b/src/components/auth/Pricing.js
@@ -67,6 +67,15 @@ const messages = defineMessages({
 });
 
 const styles = theme => ({
+  root: {
+    width: '500px !important',
+    textAlign: 'center',
+    padding: 20,
+    zIndex: 100,
+
+    '& h1': {
+    },
+  },
   container: {
     position: 'relative',
     marginLeft: -150,
@@ -86,8 +95,8 @@ const styles = theme => ({
   featureContainer: {
     width: 300,
     position: 'absolute',
-    left: 'calc(100% / 2 + 225px)',
-    top: 155,
+    left: 'calc(100% / 2 + 250px)',
+    marginTop: 20,
     background: theme.signup.pricing.feature.background,
     height: 'auto',
     padding: 20,
@@ -174,8 +183,8 @@ export default @injectSheet(styles) @observer class Signup extends Component {
     const [intPart, fractionPart] = (price).toString().split('.');
 
     return (
-      <div className={classnames('auth__scroll-container', classes.container)}>
-        <div className={classnames('auth__container', 'auth__container--signup', classes.content)}>
+      <>
+        <div className={classnames('auth__container', classes.root, classes.container)}>
           <form className="franz-form auth__form">
             {isLoadingRequiredData ? <Loader /> : (
               <img
@@ -212,7 +221,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               <p className={classnames(classes.price, classes.trialPrice)}>
                 <span className={classes.figure}>
                   {currency}
-                  0
+                0
                 </span>
                 <sup>00</sup>
               </p>
@@ -234,7 +243,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               </ul>
             </div>
             {trialActivationError && (
-              <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
+            <p className={classes.error}>{intl.formatMessage(messages.activationError)}</p>
             )}
             <Button
               label={intl.formatMessage(!canSkipTrial ? messages.ctaStart : messages.ctaAccept)}
@@ -244,9 +253,9 @@ export default @injectSheet(styles) @observer class Signup extends Component {
               disabled={isLoadingRequiredData || isActivatingTrial}
             />
             {canSkipTrial && (
-              <p className={classes.skipLink}>
-                <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
-              </p>
+            <p className={classes.skipLink}>
+              <a href="#/">{intl.formatMessage(messages.ctaSkip)}</a>
+            </p>
             )}
           </form>
         </div>
@@ -256,7 +265,7 @@ export default @injectSheet(styles) @observer class Signup extends Component {
           </H2>
           <FeatureList />
         </div>
-      </div>
+      </>
     );
   }
 }
diff --git a/src/components/auth/SetupAssistant.js b/src/components/auth/SetupAssistant.js
new file mode 100644
index 000000000..e03cf9101
--- /dev/null
+++ b/src/components/auth/SetupAssistant.js
@@ -0,0 +1,319 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import { Input, Button } from '@meetfranz/forms';
+import { Badge } from '@meetfranz/ui';
+import Modal from '../ui/Modal';
+import Infobox from '../ui/Infobox';
+import Appear from '../ui/effects/Appear';
+
+import { CDN_URL } from '../../config';
+
+const SLACK_ID = 'slack';
+
+const messages = defineMessages({
+  headline: {
+    id: 'setupAssistant.headline',
+    defaultMessage: '!!!Let\'s get started',
+  },
+  subHeadline: {
+    id: 'setupAssistant.subheadline',
+    defaultMessage: '!!!Choose from our most used services and get back on top of your messaging now.',
+  },
+  submitButtonLabel: {
+    id: 'setupAssistant.submit.label',
+    defaultMessage: '!!!Let\'s go',
+  },
+  inviteSuccessInfo: {
+    id: 'invite.successInfo',
+    defaultMessage: '!!!Invitations sent successfully',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    width: '500px !important',
+    textAlign: 'center',
+    padding: 20,
+
+    '& h1': {
+    },
+  },
+  servicesGrid: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  serviceContainer: {
+    background: theme.colorBackground,
+    position: 'relative',
+    width: '32%',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    padding: 20,
+    borderRadius: theme.borderRadius,
+    marginBottom: 10,
+    opacity: 0.5,
+    transition: 'all 0.25s',
+    border: [3, 'solid', 'transparent'],
+
+    '& h2': {
+      margin: [10, 0, 0],
+      color: theme.colorText,
+    },
+
+    '&:hover': {
+      border: [3, 'solid', theme.brandPrimary],
+      '& $serviceIcon': {
+      },
+    },
+
+  },
+  selected: {
+    border: [3, 'solid', theme.brandPrimary],
+    background: `${theme.brandPrimary}47`,
+    opacity: 1,
+  },
+  serviceIcon: {
+    width: 50,
+    transition: 'all 0.25s',
+  },
+
+  slackModalContent: {
+    textAlign: 'center',
+
+    '& img': {
+      width: 50,
+      marginBottom: 20,
+    },
+  },
+  modalActionContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  ctaCancel: {
+    background: 'none !important',
+  },
+  slackBadge: {
+    position: 'absolute',
+    bottom: 4,
+    height: 'auto',
+    padding: '0px 4px',
+    borderRadius: theme.borderRadiusSmall,
+    margin: 0,
+    display: 'flex',
+    overflow: 'hidden',
+  },
+  clearSlackWorkspace: {
+    background: theme.inputPrefixColor,
+    marginLeft: 5,
+    height: '100%',
+    color: theme.colorText,
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginRight: -4,
+    padding: [0, 5],
+  },
+});
+
+@injectSheet(styles) @observer
+class SetupAssistant extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+    isInviteSuccessful: PropTypes.bool,
+    services: PropTypes.object.isRequired,
+    isSettingUpServices: PropTypes.bool.isRequired,
+  };
+
+  static defaultProps = {
+    isInviteSuccessful: false,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  state = {
+    services: [{
+      id: 'whatsapp',
+    }, {
+      id: 'messenger',
+    }, {
+      id: 'gmail',
+    }],
+    isSlackModalOpen: false,
+    slackWorkspace: '',
+  };
+
+  slackWorkspaceHandler() {
+    const { slackWorkspace = '', services } = this.state;
+
+    const sanitizedWorkspace = slackWorkspace.trim().replace(/^https?:\/\//, '');
+
+    if (sanitizedWorkspace) {
+      const index = services.findIndex(s => s.id === SLACK_ID);
+
+      if (index === -1) {
+        const newServices = services;
+        newServices.push({ id: SLACK_ID, team: sanitizedWorkspace });
+        this.setState({ services: newServices });
+      }
+    }
+
+    this.setState({
+      isSlackModalOpen: false,
+      slackWorkspace: sanitizedWorkspace,
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const {
+      classes, isInviteSuccessful, onSubmit, services, isSettingUpServices,
+    } = this.props;
+    const { isSlackModalOpen, slackWorkspace, services: addedServices } = this.state;
+
+    return (
+      <div className={`auth__container ${classes.root}`}>
+        {this.state.showSuccessInfo && isInviteSuccessful && (
+          <Appear>
+            <Infobox
+              type="success"
+              icon="checkbox-marked-circle-outline"
+              dismissable
+            >
+              {intl.formatMessage(messages.inviteSuccessInfo)}
+            </Infobox>
+          </Appear>
+        )}
+
+        <img
+          src="./assets/images/logo.svg"
+          className="auth__logo"
+          alt=""
+        />
+        <h1>
+          {intl.formatMessage(messages.headline)}
+        </h1>
+        <h2>
+          {intl.formatMessage(messages.subHeadline)}
+        </h2>
+        <div className={classnames('grid', classes.servicesGrid)}>
+          {Object.keys(services).map((id) => {
+            const service = services[id];
+            return (
+              <button
+                className={classnames({
+                  [classes.serviceContainer]: true,
+                  [classes.selected]: this.state.services.findIndex(s => s.id === id) !== -1,
+                })}
+                key={id}
+                onClick={() => {
+                  const index = this.state.services.findIndex(s => s.id === id);
+                  if (index === -1) {
+                    if (id === SLACK_ID) {
+                      this.setState({ isSlackModalOpen: true });
+                    } else {
+                      addedServices.push({ id });
+                    }
+                  } else {
+                    addedServices.splice(index, 1);
+                    if (id === SLACK_ID) {
+                      this.setState({
+                        slackWorkspace: '',
+                      });
+                    }
+                  }
+
+                  this.setState({ services: addedServices });
+                }}
+                type="button"
+              >
+                <img
+                  src={`${CDN_URL}/recipes/dist/${id}/src/icon.svg`}
+                  className={classes.serviceIcon}
+                  alt=""
+                />
+                <h2>
+                  {service.name}
+                </h2>
+                {id === SLACK_ID && slackWorkspace && (
+                  <Badge type="secondary" className={classes.slackBadge}>
+                    {slackWorkspace}
+                    <button
+                      type="button"
+                      className={classes.clearSlackWorkspace}
+                      onClick={() => {
+                        this.setState({
+                          slackWorkspace: '',
+                        });
+                      }}
+                    >
+                      x
+                    </button>
+                  </Badge>
+                )}
+              </button>
+            );
+          })}
+        </div>
+        <Modal
+          isOpen={isSlackModalOpen}
+          // isBlocking={false}
+          close={() => this.setState({ isSlackModalOpen: false })}
+        >
+          <div className={classes.slackModalContent}>
+            <img src={`${CDN_URL}/recipes/dist/slack/src/icon.svg`} alt="" />
+            <h1>Create your first Slack workspace</h1>
+            <form onSubmit={(e) => {
+              e.preventDefault();
+              this.slackWorkspaceHandler();
+            }}
+            >
+              <Input
+                suffix=".slack.com"
+                placeholder="workspace-url"
+                onChange={e => this.setState({ slackWorkspace: e.target.value })}
+                value={slackWorkspace}
+              />
+              <div className={classes.modalActionContainer}>
+                <Button
+                  type="submit"
+                  label="Save"
+                />
+                <Button
+                  type="link"
+                  buttonType="secondary"
+                  label="Cancel"
+                  className={classes.ctaCancel}
+                  onClick={() => this.setState({ slackWorkspace: '' })}
+                />
+              </div>
+            </form>
+          </div>
+        </Modal>
+        <Button
+          type="button"
+          className="auth__button"
+            // disabled={!atLeastOneEmailAddress}
+          label={intl.formatMessage(messages.submitButtonLabel)}
+          onClick={() => onSubmit(this.state.services)}
+          busy={isSettingUpServices}
+          disabled={isSettingUpServices || addedServices.length === 0}
+        />
+      </div>
+    );
+  }
+}
+
+export default SetupAssistant;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 90bbe86e9..a47e74db0 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -60,6 +60,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
     isAppMuted: PropTypes.bool.isRequired,
     isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
     toggleWorkspaceDrawer: PropTypes.func.isRequired,
+    isTodosServiceActive: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -96,6 +97,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
       toggleWorkspaceDrawer,
       stores,
       actions,
+      isTodosServiceActive,
     } = this.props;
     const { intl } = this.context;
     const todosToggleMessage = (
@@ -140,6 +142,7 @@ export default @inject('stores', 'actions') @observer class Sidebar extends Comp
                   todoActions.toggleTodosPanel();
                   this.updateToolTip();
                 }}
+                disblaed={isTodosServiceActive}
                 className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
                 data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
               >
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index d91016c71..444d5fea4 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { autorun, reaction } from 'mobx';
+import { autorun } from 'mobx';
 import { observer, inject } from 'mobx-react';
 import classnames from 'classnames';
 
@@ -27,11 +27,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     stores: PropTypes.shape({
       settings: PropTypes.instanceOf(SettingsStore).isRequired,
     }).isRequired,
-    actions: PropTypes.shape({
-      service: PropTypes.shape({
-        setHibernation: PropTypes.func.isRequired,
-      }).isRequired,
-    }).isRequired,
+    isSpellcheckerEnabled: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -50,12 +46,6 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
 
   forceRepaintTimeout = null;
 
-  constructor(props) {
-    super(props);
-
-    this.startHibernationTimer = this.startHibernationTimer.bind(this);
-  }
-
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
       if (this.props.service.isActive) {
@@ -65,32 +55,6 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
         }, 100);
       }
     });
-
-    reaction(
-      () => this.props.service.isActive,
-      () => {
-        if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
-          // Service is inactive - start hibernation countdown
-          this.startHibernationTimer();
-        } else {
-          if (this.hibernationTimer) {
-            // Service is active but we have an active hibernation timer: Clear timeout
-            clearTimeout(this.hibernationTimer);
-          }
-
-          // Service is active, wake up service from hibernation
-          this.props.actions.service.setHibernation({
-            serviceId: this.props.service.id,
-            hibernating: false,
-          });
-        }
-      },
-    );
-
-    // Start hibernation counter if we are in background
-    if (!this.props.service.isActive && this.props.stores.settings.all.app.hibernate) {
-      this.startHibernationTimer();
-    }
   }
 
   componentWillUnmount() {
@@ -110,19 +74,6 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
     });
   };
 
-  startHibernationTimer() {
-    const timerDuration = (Number(this.props.stores.settings.all.app.hibernationStrategy) || 300) * 1000;
-
-    const hibernationTimer = setTimeout(() => {
-      this.props.actions.service.setHibernation({
-        serviceId: this.props.service.id,
-        hibernating: true,
-      });
-    }, timerDuration);
-
-    this.hibernationTimer = hibernationTimer;
-  }
-
   render() {
     const {
       detachService,
@@ -132,6 +83,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
       edit,
       enable,
       stores,
+      isSpellcheckerEnabled,
     } = this.props;
 
     const {
@@ -193,22 +145,19 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           </Fragment>
         ) : (
           <>
-            {(!service.isHibernating || service.disableHibernation) ? (
+            {(!service.isHibernating || service.isHibernationEnabled) ? (
               <>
                 {showNavBar && (
                   <WebControlsScreen service={service} />
                 )}
-                <ServiceWebview
-                  service={service}
-                  setWebviewReference={setWebviewReference}
-                  detachService={detachService}
-                />
-                {/* {service.lostRecipeConnection && (
-                  <ConnectionLostBanner
-                    name={service.name}
-                    reload={reload}
+                {!service.isHibernating && (
+                  <ServiceWebview
+                    service={service}
+                    setWebviewReference={setWebviewReference}
+                    detachService={detachService}
+                    isSpellcheckerEnabled={isSpellcheckerEnabled}
                   />
-                )} */}
+                )}
               </>
             ) : (
               <div>
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 2e3354279..4edbde5e2 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -15,6 +15,7 @@ class ServiceWebview extends Component {
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     setWebviewReference: PropTypes.func.isRequired,
     detachService: PropTypes.func.isRequired,
+    isSpellcheckerEnabled: PropTypes.bool.isRequired,
   };
 
   @observable webview = null;
@@ -55,6 +56,7 @@ class ServiceWebview extends Component {
     const {
       service,
       setWebviewReference,
+      isSpellcheckerEnabled,
     } = this.props;
 
     const preloadScript = path.join(__dirname, '../../../', 'webview', 'recipe.js');
@@ -70,7 +72,7 @@ class ServiceWebview extends Component {
         autosize
         src={service.url}
         preload={preloadScript}
-        partition={`persist:service-${service.id}`}
+        partition={service.partition}
         onDidAttach={() => {
           setWebviewReference({
             serviceId: service.id,
@@ -81,6 +83,7 @@ class ServiceWebview extends Component {
         useragent={service.userAgent}
         disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
         allowpopups
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}`}
       />
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index da2ee0b9e..f679eeed0 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -10,6 +10,7 @@ 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: {
@@ -58,6 +59,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     hasActivatedTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired,
+    isSpellcheckerEnabled: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -111,6 +113,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       userHasCompletedSignup,
       hasActivatedTrial,
       classes,
+      isSpellcheckerEnabled,
     } = this.props;
 
     const {
@@ -168,7 +171,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.map(service => (
+        {services.filter(service => service.recipe.id !== TODOS_RECIPE_ID).map(service => (
           <ServiceView
             key={service.id}
             service={service}
@@ -186,6 +189,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
               redirect: false,
             })}
             upgrade={() => openSettings({ path: 'user' })}
+            isSpellcheckerEnabled={isSpellcheckerEnabled}
           />
         ))}
       </div>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index efa5fa60c..479f151a6 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -5,9 +5,14 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import classnames from 'classnames';
 import { SortableElement } from 'react-sortable-hoc';
+import injectSheet from 'react-jss';
+import ms from 'ms';
 
+import { observable, autorun } from 'mobx';
 import ServiceModel from '../../../models/Service';
-import { ctrlKey } from '../../../environment';
+import { ctrlKey, cmdKey } from '../../../environment';
+
+const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Franz:Service');
 
 const { Menu } = remote;
 
@@ -50,9 +55,38 @@ const messages = defineMessages({
   },
 });
 
-@observer
-class TabItem extends Component {
+const styles = {
+  pollIndicator: {
+    position: 'absolute',
+    bottom: 2,
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    background: 'gray',
+    transition: 'background 0.5s',
+  },
+  pollIndicatorPoll: {
+    left: 2,
+  },
+  pollIndicatorAnswer: {
+    left: 14,
+  },
+  polled: {
+    background: 'yellow !important',
+    transition: 'background 0.1s',
+  },
+  pollAnswered: {
+    background: 'green !important',
+    transition: 'background 0.1s',
+  },
+  stale: {
+    background: 'red !important',
+  },
+};
+
+@injectSheet(styles) @observer class TabItem extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     service: PropTypes.instanceOf(ServiceModel).isRequired,
     clickHandler: PropTypes.func.isRequired,
     shortcutIndex: PropTypes.number.isRequired,
@@ -71,8 +105,33 @@ class TabItem extends Component {
     intl: intlShape,
   };
 
+  @observable isPolled = false;
+
+  @observable isPollAnswered = false;
+
+  componentDidMount() {
+    const { service } = this.props;
+
+    if (IS_SERVICE_DEBUGGING_ENABLED) {
+      autorun(() => {
+        if (Date.now() - service.lastPoll < ms('0.2s')) {
+          this.isPolled = true;
+
+          setTimeout(() => { this.isPolled = false; }, ms('1s'));
+        }
+
+        if (Date.now() - service.lastPollAnswer < ms('0.2s')) {
+          this.isPollAnswered = true;
+
+          setTimeout(() => { this.isPollAnswered = false; }, ms('1s'));
+        }
+      });
+    }
+  }
+
   render() {
     const {
+      classes,
       service,
       clickHandler,
       shortcutIndex,
@@ -97,6 +156,7 @@ class TabItem extends Component {
     }, {
       label: intl.formatMessage(messages.reload),
       click: reload,
+      accelerator: `${cmdKey}+R`,
     }, {
       label: intl.formatMessage(messages.edit),
       click: () => openSettings({
@@ -141,7 +201,7 @@ class TabItem extends Component {
                 •
             </span>
           )}
-          {service.isHibernating && !service.disableHibernation && (
+          {service.isHibernating && !service.isHibernationEnabled && (
             <span className="tab-item__message-count hibernating">
               •
             </span>
@@ -153,6 +213,7 @@ class TabItem extends Component {
     return (
       <li
         className={classnames({
+          [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
@@ -168,6 +229,24 @@ class TabItem extends Component {
           alt=""
         />
         {notificationBadge}
+        {IS_SERVICE_DEBUGGING_ENABLED && (
+          <>
+            <div
+              className={classnames({
+                [classes.pollIndicator]: true,
+                [classes.pollIndicatorPoll]: true,
+                [classes.polled]: this.isPolled,
+              })}
+            />
+            <div
+              className={classnames({
+                [classes.pollIndicator]: true,
+                [classes.pollIndicatorAnswer]: true,
+                [classes.pollAnswered]: this.isPollAnswered,
+              })}
+            />
+          </>
+        )}
       </li>
     );
   }
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index f1e70ce59..80f60b3e1 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -20,7 +20,6 @@ import Select from '../../ui/Select';
 import PremiumFeatureContainer from '../../ui/PremiumFeatureContainer';
 import LimitReachedInfobox from '../../../features/serviceLimit/components/LimitReachedInfobox';
 import { serviceLimitStore } from '../../../features/serviceLimit';
-
 import { isMac } from '../../../environment';
 
 const messages = defineMessages({
@@ -96,9 +95,9 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
-  disableHibernationInfo: {
-    id: 'settings.service.form.disableHibernationInfo',
-    defaultMessage: '!!!You currently have hibernation enabled but you can disable hibernation for individual services using this option.',
+  isHibernationEnabledInfo: {
+    id: 'settings.service.form.isHibernatedEnabledInfo',
+    defaultMessage: '!!!When enabled, a service will be shut down after a period of time to save system resources.',
   },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
@@ -375,9 +374,9 @@ export default @observer class EditServiceForm extends Component {
                   <Toggle field={form.$('isEnabled')} />
                   {isHibernationFeatureActive && (
                     <>
-                      <Toggle field={form.$('disableHibernation')} />
+                      <Toggle field={form.$('isHibernationEnabled')} />
                       <p className="settings__help">
-                        {intl.formatMessage(messages.disableHibernationInfo)}
+                        {intl.formatMessage(messages.isHibernationEnabledInfo)}
                       </p>
                     </>
                   )}
@@ -409,7 +408,7 @@ export default @observer class EditServiceForm extends Component {
                 gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
               >
                 <div className="settings__settings-group">
-                  <Select field={form.$('spellcheckerLanguage')} multiple />
+                  <Select field={form.$('spellcheckerLanguage')} />
                 </div>
               </PremiumFeatureContainer>
             )}
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index cd772214f..f20c38bc9 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -173,6 +173,8 @@ export default @observer class EditSettingsForm extends Component {
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
     isNightlyEnabled: PropTypes.bool.isRequired,
     openProcessManager: PropTypes.func.isRequired,
+    hasAddedTodosAsService: PropTypes.bool.isRequired,
+    isOnline: PropTypes.bool.isRequired,
   };
 
   static contextTypes = {
@@ -227,6 +229,8 @@ export default @observer class EditSettingsForm extends Component {
       openProcessManager,
       isTodosActivated,
       isNightlyEnabled,
+      hasAddedTodosAsService,
+      isOnline,
     } = this.props;
     const { intl } = this.context;
 
@@ -346,7 +350,7 @@ export default @observer class EditSettingsForm extends Component {
 
                 <Hr />
 
-                {isTodosEnabled && (
+                {isTodosEnabled && !hasAddedTodosAsService && (
                   <>
                     <Toggle field={form.$('enableTodos')} />
                     {isTodosActivated && (
@@ -535,10 +539,10 @@ export default @observer class EditSettingsForm extends Component {
                     <Toggle
                       field={form.$('enableSpellchecking')}
                     />
-                    {form.$('enableSpellchecking').value && !isMac && (
-                      <Select field={form.$('spellcheckerLanguage')} multiple />
+                    {!isMac && form.$('enableSpellchecking').value && (
+                      <Select field={form.$('spellcheckerLanguage')} />
                     )}
-                    {form.$('enableSpellchecking').value && isMac && (
+                    {isMac && form.$('enableSpellchecking').value && (
                       <p>{intl.formatMessage(messages.spellCheckerLanguageInfo)}</p>
                     )}
                   </Fragment>
@@ -625,7 +629,7 @@ export default @observer class EditSettingsForm extends Component {
                     buttonType="secondary"
                     label={intl.formatMessage(updateButtonLabelMessage)}
                     onClick={checkForUpdates}
-                    disabled={!automaticUpdates || isCheckingForUpdates || isUpdateAvailable}
+                    disabled={!automaticUpdates || isCheckingForUpdates || isUpdateAvailable || !isOnline}
                     loaded={!isCheckingForUpdates || !isUpdateAvailable}
                   />
                 )}
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index dbc2a9078..72c799819 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -76,7 +76,7 @@ export class FeatureList extends Component {
   static propTypes = {
     className: PropTypes.string,
     featureClassName: PropTypes.string,
-    plan: PropTypes.oneOf(Object.values(PLANS)),
+    plan: PropTypes.oneOf(Object.keys(PLANS)),
   };
 
   static defaultProps = {
diff --git a/src/components/ui/Modal/index.js b/src/components/ui/Modal/index.js
index 0af521452..a9fa0cd1b 100644
--- a/src/components/ui/Modal/index.js
+++ b/src/components/ui/Modal/index.js
@@ -41,8 +41,6 @@ export default @injectCSS(styles) class Modal extends Component {
       showClose,
     } = this.props;
 
-    const appRoot = document.getElementById('root');
-
     return (
       <ReactModal
         isOpen={isOpen}
@@ -55,7 +53,7 @@ export default @injectCSS(styles) class Modal extends Component {
         portal={portal}
         onRequestClose={close}
         shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-        appElement={appRoot}
+        appElement={document.getElementById('root')}
       >
         {showClose && close && (
           <button