fix: check if user is entitled to theme before activating it (#867)

app/assets/javascripts/services/themeManager.ts

@@ -69,26 +69,51 @@ export class ThemeManager extends ApplicationService {
 
   async onAppEvent(event: ApplicationEvent) {
     super.onAppEvent(event);
-    if (event === ApplicationEvent.SignedOut) {
+    switch (event) {
-      this.deactivateAllThemes();
+      case ApplicationEvent.SignedOut: {
-      this.activeThemes = [];
+        this.deactivateAllThemes();
-      this.application?.removeValue(
+        this.activeThemes = [];
-        CACHED_THEMES_KEY,
+        this.application?.removeValue(
-        StorageValueModes.Nonwrapped
+          CACHED_THEMES_KEY,
-      );
+          StorageValueModes.Nonwrapped
-    } else if (event === ApplicationEvent.StorageReady) {
+        );
-      await this.activateCachedThemes();
+        break;
-    } else if (event === ApplicationEvent.FeaturesUpdated) {
+      }
-      this.reloadThemeStatus();
+      case ApplicationEvent.StorageReady: {
-    } else if (event === ApplicationEvent.Launched) {
+        await this.activateCachedThemes();
-      window
+        break;
-        .matchMedia('(prefers-color-scheme: dark)')
+      }
-        .addEventListener('change', this.colorSchemeEventHandler);
+      case ApplicationEvent.FeaturesUpdated: {
-    } else if (event === ApplicationEvent.PreferencesChanged) {
+        this.reloadThemeStatus();
-      const prefersDarkColorScheme = window.matchMedia(
+        break;
-        '(prefers-color-scheme: dark)'
+      }
-      );
+      case ApplicationEvent.Launched: {
-      this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
+        window
+          .matchMedia('(prefers-color-scheme: dark)')
+          .addEventListener('change', this.colorSchemeEventHandler);
+        break;
+      }
+      case ApplicationEvent.PreferencesChanged: {
+        const prefersDarkColorScheme = window.matchMedia(
+          '(prefers-color-scheme: dark)'
+        );
+        this.setThemeAsPerColorScheme(prefersDarkColorScheme.matches);
+        break;
+      }
+      case ApplicationEvent.LocalDataLoaded: {
+        const themes = this.application.getDisplayableItems(
+          ContentType.Theme
+        ) as SNTheme[];
+        themes.forEach((theme) => {
+          if (
+            theme.active &&
+            this.application.getFeatureStatus(theme.identifier) !==
+              FeatureStatus.Entitled
+          ) {
+            this.application.toggleTheme(theme);
+          }
+        });
+      }
     }
   }
 
@@ -181,6 +206,12 @@ export class ThemeManager extends ApplicationService {
     if (this.activeThemes.find((uuid) => uuid === theme.uuid)) {
       return;
     }
+    if (
+      this.application.getFeatureStatus(theme.identifier) !==
+      FeatureStatus.Entitled
+    ) {
+      return;
+    }
     this.activeThemes.push(theme.uuid);
     const url = this.application.componentManager.urlForComponent(theme);
     if (!url) {