Add "service limit reached" screen

1 files changed, 23 insertions, 1 deletions

diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index ee47bf6db..79d1a0ea1 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -93,13 +93,21 @@ export default class ServicesStore extends Store {
       () => this.stores.settings.app.spellcheckerLanguage,
       () => this._shareSettingsWithServiceProcess(),
     );
+
+    reaction(
+      () => this.all,
+      () => this._restrictServiceAccess(),
+    );
   }
 
   @computed get all() {
     if (this.stores.user.isLoggedIn) {
       const services = this.allServicesRequest.execute().result;
       if (services) {
-        return observable(services.slice().slice().sort((a, b) => a.order - b.order));
+        return observable(services.slice().slice().sort((a, b) => a.order - b.order).map((s, index) => {
+          s.index = index;
+          return s;
+        }));
       }
     }
     return [];
@@ -681,6 +689,20 @@ export default class ServicesStore extends Store {
     return serviceData;
   }
 
+  _restrictServiceAccess() {
+    const services = this.all;
+    const { userHasReachedServiceLimit, serviceLimit } = this.stores.serviceLimit;
+
+    if (userHasReachedServiceLimit) {
+      services.map((service, index) => {
+        console.log('restrictServiceAcceess', index >= serviceLimit);
+        service.isServiceAccessRestricted = index >= serviceLimit;
+
+        return service;
+      });
+    }
+  }
+
   // Helper
   _initializeServiceRecipeInWebview(serviceId) {
     const service = this.one(serviceId);