Restrict services with customURL when not premium user

7 files changed, 145 insertions, 44 deletions

diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
index 9fb7d0961..4b8d926aa 100644
--- a/src/components/services/content/ServiceRestricted.js
+++ b/src/components/services/content/ServiceRestricted.js
@@ -5,16 +5,25 @@ 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({
-  headline: {
-    id: 'service.restrictedHandler.headline',
+  headlineServiceLimit: {
+    id: 'service.restrictedHandler.serviceLimit.headline',
     defaultMessage: '!!!You have reached your service limit.',
   },
-  text: {
-    id: 'service.restrictedHandler.text',
+  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',
@@ -25,6 +34,7 @@ export default @observer class ServiceRestricted extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     upgrade: PropTypes.func.isRequired,
+    type: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -36,13 +46,27 @@ export default @observer class ServiceRestricted extends Component {
   countdownIntervalTimeout = 1000;
 
   render() {
-    const { name, upgrade } = this.props;
+    const {
+      name,
+      upgrade,
+      type,
+    } = 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>
+        {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"
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 18279fd06..f65f51346 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -133,8 +133,8 @@ export default @observer class ServiceView extends Component {
             {service.isServiceAccessRestricted ? (
               <ServiceRestricted
                 name={service.recipe.name}
-                webview={service.webview}
                 upgrade={upgrade}
+                type={service.restrictionType}
               />
             ) : (
               <ServiceWebview
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 533944fd0..c2363923f 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -897,39 +897,65 @@
         "defaultMessage": "!!!You have reached your service limit.",
         "end": {
           "column": 3,
-          "line": 13
+          "line": 14
         },
         "file": "src/components/services/content/ServiceRestricted.js",
-        "id": "service.restrictedHandler.headline",
+        "id": "service.restrictedHandler.serviceLimit.headline",
         "start": {
-          "column": 12,
-          "line": 10
+          "column": 24,
+          "line": 11
         }
       },
       {
         "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
         "end": {
           "column": 3,
-          "line": 17
+          "line": 18
         },
         "file": "src/components/services/content/ServiceRestricted.js",
-        "id": "service.restrictedHandler.text",
+        "id": "service.restrictedHandler.serviceLimit.text",
         "start": {
-          "column": 8,
-          "line": 14
+          "column": 20,
+          "line": 15
+        }
+      },
+      {
+        "defaultMessage": "!!!Franz Professional Plan required",
+        "end": {
+          "column": 3,
+          "line": 22
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.headline",
+        "start": {
+          "column": 21,
+          "line": 19
+        }
+      },
+      {
+        "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+        "end": {
+          "column": 3,
+          "line": 26
+        },
+        "file": "src/components/services/content/ServiceRestricted.js",
+        "id": "service.restrictedHandler.customUrl.text",
+        "start": {
+          "column": 17,
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!Upgrade Account",
         "end": {
           "column": 3,
-          "line": 21
+          "line": 30
         },
         "file": "src/components/services/content/ServiceRestricted.js",
         "id": "service.restrictedHandler.action",
         "start": {
           "column": 10,
-          "line": 18
+          "line": 27
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index d83ce37b0..e921d8958 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -120,8 +120,10 @@
   "service.errorHandler.message": "Error",
   "service.errorHandler.text": "{name} has failed to load.",
   "service.restrictedHandler.action": "Upgrade Account",
-  "service.restrictedHandler.headline": "You have reached your service limit.",
-  "service.restrictedHandler.text": "Please upgrade your account to use more than {count} services.",
+  "service.restrictedHandler.customUrl.headline": "Franz Professional Plan required",
+  "service.restrictedHandler.customUrl.text": "Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+  "service.restrictedHandler.serviceLimit.headline": "You have reached your service limit.",
+  "service.restrictedHandler.serviceLimit.text": "Please upgrade your account to use more than {count} services.",
   "service.webviewLoader.loading": "Loading",
   "services.getStarted": "Get started",
   "services.welcome": "Welcome to Franz",
diff --git a/src/i18n/messages/src/components/services/content/ServiceRestricted.json b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
index 30ecd4d75..c1984afe3 100644
--- a/src/i18n/messages/src/components/services/content/ServiceRestricted.json
+++ b/src/i18n/messages/src/components/services/content/ServiceRestricted.json
@@ -1,27 +1,53 @@
 [
   {
-    "id": "service.restrictedHandler.headline",
+    "id": "service.restrictedHandler.serviceLimit.headline",
     "defaultMessage": "!!!You have reached your service limit.",
     "file": "src/components/services/content/ServiceRestricted.js",
     "start": {
-      "line": 10,
-      "column": 12
+      "line": 11,
+      "column": 24
     },
     "end": {
-      "line": 13,
+      "line": 14,
       "column": 3
     }
   },
   {
-    "id": "service.restrictedHandler.text",
+    "id": "service.restrictedHandler.serviceLimit.text",
     "defaultMessage": "!!!Please upgrade your account to use more than {count} services.",
     "file": "src/components/services/content/ServiceRestricted.js",
     "start": {
-      "line": 14,
-      "column": 8
+      "line": 15,
+      "column": 20
+    },
+    "end": {
+      "line": 18,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.headline",
+    "defaultMessage": "!!!Franz Professional Plan required",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 19,
+      "column": 21
+    },
+    "end": {
+      "line": 22,
+      "column": 3
+    }
+  },
+  {
+    "id": "service.restrictedHandler.customUrl.text",
+    "defaultMessage": "!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.",
+    "file": "src/components/services/content/ServiceRestricted.js",
+    "start": {
+      "line": 23,
+      "column": 17
     },
     "end": {
-      "line": 17,
+      "line": 26,
       "column": 3
     }
   },
@@ -30,11 +56,11 @@
     "defaultMessage": "!!!Upgrade Account",
     "file": "src/components/services/content/ServiceRestricted.js",
     "start": {
-      "line": 18,
+      "line": 27,
       "column": 10
     },
     "end": {
-      "line": 21,
+      "line": 30,
       "column": 3
     }
   }
diff --git a/src/models/Service.js b/src/models/Service.js
index fa3648a39..848a84aa2 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -4,6 +4,11 @@ import normalizeUrl from 'normalize-url';
 
 const debug = require('debug')('Franz:Service');
 
+export const RESTRICTION_TYPES = {
+  SERVICE_LIMIT: 0,
+  CUSTOM_URL: 1,
+};
+
 export default class Service {
   id = '';
 
@@ -59,6 +64,12 @@ export default class Service {
 
   @observable errorMessage = '';
 
+  @observable isUsingCustomUrl = false;
+
+  @observable isServiceAccessRestricted = false;
+
+  @observable restrictionType = null;
+
   constructor(data, recipe) {
     if (!data) {
       console.error('Service config not valid');
@@ -104,8 +115,6 @@ export default class Service {
 
     this.recipe = recipe;
 
-    this.isServiceAccessRestricted = false;
-
     autorun(() => {
       if (!this.isEnabled) {
         this.webview = null;
@@ -113,6 +122,10 @@ export default class Service {
         this.unreadDirectMessageCount = 0;
         this.unreadIndirectMessageCount = 0;
       }
+
+      if (this.recipe.hasCustomUrl && this.customUrl) {
+        this.isUsingCustomUrl = true;
+      }
     });
   }
 
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 79d1a0ea1..4cffea110 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -14,6 +14,7 @@ import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent, statsEvent } from '../lib/analytics';
 import { workspaceStore } from '../features/workspaces';
 import { serviceLimitStore } from '../features/serviceLimit';
+import { RESTRICTION_TYPES } from '../models/Service';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -76,6 +77,7 @@ export default class ServicesStore extends Store {
       this._saveActiveService.bind(this),
       this._logoutReaction.bind(this),
       this._handleMuteSettings.bind(this),
+      this._restrictServiceAccess.bind(this),
     ]);
 
     // Just bind this
@@ -93,11 +95,6 @@ export default class ServicesStore extends Store {
       () => this.stores.settings.app.spellcheckerLanguage,
       () => this._shareSettingsWithServiceProcess(),
     );
-
-    reaction(
-      () => this.all,
-      () => this._restrictServiceAccess(),
-    );
   }
 
   @computed get all() {
@@ -690,17 +687,30 @@ export default class ServicesStore extends Store {
   }
 
   _restrictServiceAccess() {
-    const services = this.all;
+    const { features } = this.stores.features;
     const { userHasReachedServiceLimit, serviceLimit } = this.stores.serviceLimit;
 
-    if (userHasReachedServiceLimit) {
-      services.map((service, index) => {
-        console.log('restrictServiceAcceess', index >= serviceLimit);
+    this.all.map((service, index) => {
+      if (userHasReachedServiceLimit) {
         service.isServiceAccessRestricted = index >= serviceLimit;
+        service.restrictionType = RESTRICTION_TYPES.SERVICE_LIMIT;
 
-        return service;
-      });
-    }
+        if (index >= serviceLimit) {
+          debug('Restricting access to server due to service limit');
+        }
+      }
+
+      if (service.isUsingCustomUrl) {
+        service.isServiceAccessRestricted = features.isCustomUrlPremiumFeature;
+        service.restrictionType = RESTRICTION_TYPES.CUSTOM_URL;
+
+        if (features.isCustomUrlPremiumFeature) {
+          debug('Restricting access to server due to custom url');
+        }
+      }
+
+      return service;
+    });
   }
 
   // Helper