Improve serviceLimit implementation

5 files changed, 16 insertions, 6 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index df4b3b3b2..4696b82eb 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -8,6 +8,7 @@ import Link from '../../ui/Link';
 import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
 import UserStore from '../../../stores/UserStore';
+import { serviceLimitStore } from '../../../features/serviceLimit';
 
 const messages = defineMessages({
   availableServices: {
@@ -80,7 +81,12 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
         >
           {intl.formatMessage(messages.yourServices)}
           {' '}
-          <span className="badge">{serviceCount}</span>
+          <span className="badge">
+            {serviceCount}
+            {serviceLimitStore.serviceLimit !== 0 && (
+              `/${serviceLimitStore.serviceLimit}`
+            )}
+          </span>
         </Link>
         {workspaceStore.isFeatureEnabled ? (
           <Link
diff --git a/src/features/serviceLimit/components/LimitReachedInfobox.js b/src/features/serviceLimit/components/LimitReachedInfobox.js
index ee0d7cb27..fc54dcf85 100644
--- a/src/features/serviceLimit/components/LimitReachedInfobox.js
+++ b/src/features/serviceLimit/components/LimitReachedInfobox.js
@@ -26,6 +26,10 @@ const styles = theme => ({
     borderRadius: 0,
     marginBottom: 0,
 
+    '& > div': {
+      marginBottom: 0,
+    },
+
     '& button': {
       color: theme.styleTypes.primary.contrast,
     },
diff --git a/src/features/serviceLimit/index.js b/src/features/serviceLimit/index.js
index 76f996195..92ad8bb98 100644
--- a/src/features/serviceLimit/index.js
+++ b/src/features/serviceLimit/index.js
@@ -15,7 +15,7 @@ export default function initServiceLimit(stores, actions) {
   // Toggle serviceLimit feature
   reaction(
     () => (
-      features.features.hasServiceLimit
+      features.features.isServiceLimitEnabled
     ),
     (isEnabled) => {
       if (isEnabled) {
diff --git a/src/features/serviceLimit/store.js b/src/features/serviceLimit/store.js
index 752f71371..9836c5f51 100644
--- a/src/features/serviceLimit/store.js
+++ b/src/features/serviceLimit/store.js
@@ -24,12 +24,12 @@ export class ServiceLimitStore extends FeatureStore {
   @computed get userHasReachedServiceLimit() {
     if (!this.isServiceLimitEnabled) return false;
 
-    const { user } = this.stores;
-
-    return !user.isPremium && this.serviceCount >= this.serviceLimit;
+    return this.serviceLimit !== 0 && this.serviceCount >= this.serviceLimit;
   }
 
   @computed get serviceLimit() {
+    if (!this.isServiceLimitEnabled || this.stores.features.features.serviceLimitCount === 0) return 0;
+
     return this.stores.features.features.serviceLimitCount || DEFAULT_SERVICE_LIMIT;
   }
 
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index a821dbe39..eded7b79b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -5,7 +5,7 @@
   "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
-  "feature.serviceLimit.limitReached": "You have added {amount} of {limit} services. Please upgrade your account to add more services.",
+  "feature.serviceLimit.limitReached": "You have added {amount} out of {limit} services that are included in your plan. Please upgrade your account to add more services.",
   "feature.shareFranz.action.email": "Send as email",
   "feature.shareFranz.action.facebook": "Share on Facebook",
   "feature.shareFranz.action.twitter": "Share on Twitter",