5 files changed, 146 insertions, 2 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
new file mode 100644
index 000000000..9609a65b1
--- /dev/null
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -0,0 +1,119 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import { intlShape, defineMessages } from 'react-intl';
+
+import {
+  mdiAlert,
+} from '@mdi/js';
+import { LIVE_API_WEBSITE } from '../../../config';
+// import { Button } from '@meetfranz/forms';
+
+const messages = defineMessages({
+  text: {
+    id: 'connectionLostBanner.message',
+    defaultMessage: '!!!Oh no! Franz lost the connection to {name}.',
+  },
+  moreInformation: {
+    id: 'connectionLostBanner.informationLink',
+    defaultMessage: '!!!What happened?',
+  },
+  cta: {
+    id: 'connectionLostBanner.cta',
+    defaultMessage: '!!!Reload Service',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    borderRadius: theme.borderRadius,
+    position: 'absolute',
+    zIndex: 300,
+    height: 50,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    bottom: 10,
+    right: 10,
+    justifyContent: 'center',
+    padding: 10,
+    fontSize: 12,
+  },
+  link: {
+    display: 'inline-flex',
+    opacity: 0.7,
+  },
+  button: {
+    transition: 'opacity 0.25s',
+    color: theme.colorText,
+    border: [1, 'solid', theme.colorText],
+    borderRadius: theme.borderRadiusSmall,
+    padding: 4,
+    fontSize: 12,
+    marginLeft: 15,
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+  },
+  icon: {
+    marginRight: 10,
+    fill: theme.styleTypes.danger.accent,
+  },
+});
+
+@injectSheet(styles) @observer
+class ConnectionLostBanner extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    reload: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  inputRef = React.createRef();
+
+  render() {
+    const {
+      classes,
+      name,
+      reload,
+    } = this.props;
+
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.root}>
+        <Icon
+          icon={mdiAlert}
+          className={classes.icon}
+        />
+        <p>
+          {intl.formatMessage(messages.text, { name })}
+          <br />
+          <a
+            href={`${LIVE_API_WEBSITE}/support#what-does-franz-lost-the-connection-to-service-mean`}
+            className={classes.link}
+          >
+            {intl.formatMessage(messages.moreInformation)}
+          </a>
+        </p>
+        <button
+          type="button"
+          className={classes.button}
+          onClick={reload}
+        >
+          {intl.formatMessage(messages.cta)}
+        </button>
+      </div>
+    );
+  }
+}
+
+export default ConnectionLostBanner;
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index f6832038a..d91016c71 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -193,7 +193,7 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           </Fragment>
         ) : (
           <>
-            {!service.isHibernating ? (
+            {(!service.isHibernating || service.disableHibernation) ? (
               <>
                 {showNavBar && (
                   <WebControlsScreen service={service} />
@@ -203,6 +203,12 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
                   setWebviewReference={setWebviewReference}
                   detachService={detachService}
                 />
+                {/* {service.lostRecipeConnection && (
+                  <ConnectionLostBanner
+                    name={service.name}
+                    reload={reload}
+                  />
+                )} */}
               </>
             ) : (
               <div>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 36338a910..ea7a66a62 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -145,7 +145,7 @@ class TabItem extends Component {
                 •
             </span>
           )}
-          {service.isHibernating && (
+          {service.isHibernating && !service.disableHibernation && (
             <span className="tab-item__message-count hibernating">
               •
             </span>
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index bb4f4a76f..4fd1f99ef 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -94,6 +94,10 @@ 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.',
+  },
   headlineNotifications: {
     id: 'settings.service.form.headlineNotifications',
     defaultMessage: '!!!Notifications',
@@ -154,6 +158,7 @@ export default @observer class EditServiceForm extends Component {
     isProxyFeatureEnabled: PropTypes.bool.isRequired,
     isServiceProxyIncludedInCurrentPlan: PropTypes.bool.isRequired,
     isSpellcheckerIncludedInCurrentPlan: PropTypes.bool.isRequired,
+    isHibernationFeatureActive: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -219,6 +224,7 @@ export default @observer class EditServiceForm extends Component {
       isProxyFeatureEnabled,
       isServiceProxyIncludedInCurrentPlan,
       isSpellcheckerIncludedInCurrentPlan,
+      isHibernationFeatureActive,
     } = this.props;
     const { intl } = this.context;
 
@@ -365,6 +371,14 @@ export default @observer class EditServiceForm extends Component {
                 <div className="settings__settings-group">
                   <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
                   <Toggle field={form.$('isEnabled')} />
+                  {isHibernationFeatureActive && (
+                    <>
+                      <Toggle field={form.$('disableHibernation')} />
+                      <p className="settings__help">
+                        {intl.formatMessage(messages.disableHibernationInfo)}
+                      </p>
+                    </>
+                  )}
                   <Toggle field={form.$('isDarkModeEnabled')} />
                   {form.$('isDarkModeEnabled').value
                     && (
diff --git a/src/components/ui/FeatureList.js b/src/components/ui/FeatureList.js
index f1039709c..dbc2a9078 100644
--- a/src/components/ui/FeatureList.js
+++ b/src/components/ui/FeatureList.js
@@ -66,6 +66,10 @@ const messages = defineMessages({
     id: 'pricing.features.adFree',
     defaultMessage: '!!!Forever ad-free',
   },
+  appDelayEnabled: {
+    id: 'pricing.features.appDelaysEnabled',
+    defaultMessage: '!!!Occasional Waiting Screens',
+  },
 });
 
 export class FeatureList extends Component {
@@ -96,6 +100,7 @@ export class FeatureList extends Component {
     const features = [];
     if (plan === PLANS.FREE) {
       features.push(
+        messages.appDelayEnabled,
         messages.upToThreeServices,
         messages.availableRecipes,
         messages.accountSync,