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) {
+      case ApplicationEvent.SignedOut: {
         this.deactivateAllThemes();
         this.activeThemes = [];
         this.application?.removeValue(
           CACHED_THEMES_KEY,
           StorageValueModes.Nonwrapped
         );
-    } else if (event === ApplicationEvent.StorageReady) {
+        break;
+      }
+      case ApplicationEvent.StorageReady: {
         await this.activateCachedThemes();
-    } else if (event === ApplicationEvent.FeaturesUpdated) {
+        break;
+      }
+      case ApplicationEvent.FeaturesUpdated: {
         this.reloadThemeStatus();
-    } else if (event === ApplicationEvent.Launched) {
+        break;
+      }
+      case ApplicationEvent.Launched: {
         window
           .matchMedia('(prefers-color-scheme: dark)')
           .addEventListener('change', this.colorSchemeEventHandler);
-    } else if (event === ApplicationEvent.PreferencesChanged) {
+        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) {