Add "service limit reached" screen

3 files changed, 74 insertions, 6 deletions

diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
new file mode 100644
index 000000000..9fb7d0961
--- /dev/null
+++ b/src/components/services/content/ServiceRestricted.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+
+import { serviceLimitStore } from '../../../features/serviceLimit';
+import Button from '../../ui/Button';
+
+const messages = defineMessages({
+  headline: {
+    id: 'service.restrictedHandler.headline',
+    defaultMessage: '!!!You have reached your service limit.',
+  },
+  text: {
+    id: 'service.restrictedHandler.text',
+    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
+  },
+  action: {
+    id: 'service.restrictedHandler.action',
+    defaultMessage: '!!!Upgrade Account',
+  },
+});
+
+export default @observer class ServiceRestricted extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    upgrade: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  countdownInterval = null;
+
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const { name, upgrade } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        <h1>{intl.formatMessage(messages.headline)}</h1>
+        <p>{intl.formatMessage(messages.text, { count: serviceLimitStore.serviceLimit })}</p>
+        <Button
+          label={intl.formatMessage(messages.action, { name })}
+          buttonType="inverted"
+          onClick={() => upgrade()}
+        />
+      </div>
+    );
+  }
+}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 13148b9b3..18279fd06 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -10,6 +10,7 @@ import WebviewLoader from '../../ui/WebviewLoader';
 import WebviewCrashHandler from './WebviewCrashHandler';
 import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
+import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
 
 export default @observer class ServiceView extends Component {
@@ -21,6 +22,7 @@ export default @observer class ServiceView extends Component {
     edit: PropTypes.func.isRequired,
     enable: PropTypes.func.isRequired,
     isActive: PropTypes.bool,
+    upgrade: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
@@ -72,6 +74,7 @@ export default @observer class ServiceView extends Component {
       reload,
       edit,
       enable,
+      upgrade,
     } = this.props;
 
     const webviewClasses = classnames({
@@ -99,7 +102,7 @@ export default @observer class ServiceView extends Component {
                 reload={reload}
               />
             )}
-            {service.isEnabled && service.isLoading && service.isFirstLoad && (
+            {service.isEnabled && service.isLoading && service.isFirstLoad && !service.isServiceAccessRestricted && (
               <WebviewLoader
                 loaded={false}
                 name={service.name}
@@ -126,11 +129,21 @@ export default @observer class ServiceView extends Component {
             )}
           </Fragment>
         ) : (
-          <ServiceWebview
-            service={service}
-            setWebviewReference={setWebviewReference}
-            detachService={detachService}
-          />
+          <>
+            {service.isServiceAccessRestricted ? (
+              <ServiceRestricted
+                name={service.recipe.name}
+                webview={service.webview}
+                upgrade={upgrade}
+              />
+            ) : (
+              <ServiceWebview
+                service={service}
+                setWebviewReference={setWebviewReference}
+                detachService={detachService}
+              />
+            )}
+          </>
         )}
         {statusBar}
       </div>
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 8f8c38a11..48de0ebaa 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -89,6 +89,7 @@ export default @observer class Services extends Component {
               },
               redirect: false,
             })}
+            upgrade={() => openSettings({ path: 'user' })}
           />
         ))}
       </div>