Merge branch 'master' of https://github.com/meetfranz/franz into franz-5.3.0

3 files changed, 144 insertions, 7 deletions

diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
new file mode 100644
index 000000000..4b8d926aa
--- /dev/null
+++ b/src/components/services/content/ServiceRestricted.js
@@ -0,0 +1,78 @@
+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';
+import { RESTRICTION_TYPES } from '../../../models/Service';
+
+const messages = defineMessages({
+  headlineServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.headline',
+    defaultMessage: '!!!You have reached your service limit.',
+  },
+  textServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.text',
+    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
+  },
+  headlineCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.headline',
+    defaultMessage: '!!!Franz Professional Plan required',
+  },
+  textCustomUrl: {
+    id: 'service.restrictedHandler.customUrl.text',
+    defaultMessage: '!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted 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,
+    type: PropTypes.number.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  countdownInterval = null;
+
+  countdownIntervalTimeout = 1000;
+
+  render() {
+    const {
+      name,
+      upgrade,
+      type,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="services__info-layer">
+        {type === RESTRICTION_TYPES.SERVICE_LIMIT && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineServiceLimit)}</h1>
+            <p>{intl.formatMessage(messages.textServiceLimit, { count: serviceLimitStore.serviceLimit })}</p>
+          </>
+        )}
+        {type === RESTRICTION_TYPES.CUSTOM_URL && (
+          <>
+            <h1>{intl.formatMessage(messages.headlineCustomUrl)}</h1>
+            <p>{intl.formatMessage(messages.textCustomUrl)}</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..f65f51346 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}
+                upgrade={upgrade}
+                type={service.restrictionType}
+              />
+            ) : (
+              <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 5fad070f0..1afbaabc4 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { Link } from 'react-router';
 import { defineMessages, intlShape } from 'react-intl';
+import Confetti from 'react-confetti';
+import ms from 'ms';
+import injectSheet from 'react-jss';
 
 import ServiceView from './ServiceView';
 import Appear from '../../ui/effects/Appear';
@@ -26,7 +29,17 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class Services extends Component {
+
+const styles = {
+  confettiContainer: {
+    position: 'absolute',
+    width: '100%',
+    zIndex: 9999,
+    pointerEvents: 'none',
+  },
+};
+
+export default @observer @injectSheet(styles) class Services extends Component {
   static propTypes = {
     services: MobxPropTypes.arrayOrObservableArray,
     setWebviewReference: PropTypes.func.isRequired,
@@ -36,6 +49,9 @@ export default @observer class Services extends Component {
     reload: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
+    userHasCompletedSignup: PropTypes.bool.isRequired,
+    hasActivatedTrial: PropTypes.bool.isRequired,
+    classes: PropTypes.object.isRequired,
   };
 
   static defaultProps = {
@@ -46,6 +62,18 @@ export default @observer class Services extends Component {
     intl: intlShape,
   };
 
+  state = {
+    showConfetti: true,
+  }
+
+  componentDidMount() {
+    window.setTimeout(() => {
+      this.setState({
+        showConfetti: false,
+      });
+    }, ms('8s'));
+  }
+
   render() {
     const {
       services,
@@ -56,12 +84,29 @@ export default @observer class Services extends Component {
       reload,
       openSettings,
       update,
+      userHasCompletedSignup,
+      hasActivatedTrial,
+      classes,
     } = this.props;
+
+    const {
+      showConfetti,
+    } = this.state;
+
     const { intl } = this.context;
     const isLoggedIn = Boolean(localStorage.getItem('authToken'));
 
     return (
       <div className="services">
+        {(userHasCompletedSignup || hasActivatedTrial) && (
+          <div className={classes.confettiContainer}>
+            <Confetti
+              width={window.width}
+              height={window.height}
+              numberOfPieces={showConfetti ? 200 : 0}
+            />
+          </div>
+        )}
         {services.length === 0 && (
           <Appear
             timeout={1500}
@@ -104,6 +149,7 @@ export default @observer class Services extends Component {
               },
               redirect: false,
             })}
+            upgrade={() => openSettings({ path: 'user' })}
           />
         ))}
       </div>