feat: show all themes and premium icon if not entitled (#854)

app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx

@@ -1,58 +1,94 @@
 import { WebApplication } from '@/ui_models/application';
-import { SNTheme } from '@standardnotes/snjs';
+import { FeatureStatus } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
+import { useMemo } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
+import { Icon } from '../Icon';
+import { usePremiumModal } from '../Premium';
 import { Switch } from '../Switch';
+import { ThemeItem } from './QuickSettingsMenu';
 
 type Props = {
-  theme: SNTheme;
+  item: ThemeItem;
   application: WebApplication;
   onBlur: (event: { relatedTarget: EventTarget | null }) => void;
 };
 
 export const ThemesMenuButton: FunctionComponent<Props> = ({
   application,
-  theme,
+  item,
   onBlur,
 }) => {
+  const premiumModal = usePremiumModal();
+
+  const isThirdPartyTheme = useMemo(
+    () => application.isThirdPartyFeature(item.identifier),
+    [application, item.identifier]
+  );
+  const isEntitledToTheme = useMemo(
+    () =>
+      application.getFeatureStatus(item.identifier) === FeatureStatus.Entitled,
+    [application, item.identifier]
+  );
+  const canActivateTheme = useMemo(
+    () => isEntitledToTheme || isThirdPartyTheme,
+    [isEntitledToTheme, isThirdPartyTheme]
+  );
+
   const toggleTheme: JSXInternal.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
-    if (theme.isLayerable() || !theme.active) {
-      application.toggleTheme(theme);
+
+    if (item.component && canActivateTheme) {
+      const themeIsLayerableOrNotActive =
+        item.component.isLayerable() || !item.component.active;
+
+      if (themeIsLayerableOrNotActive) {
+        application.toggleTheme(item.component);
+      }
+    } else {
+      premiumModal.activate(`${item.name} theme`);
     }
   };
 
   return (
     <button
-      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${
-        theme.isLayerable() ? `justify-start` : `justify-between`
-      }`}
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between`}
       onClick={toggleTheme}
       onBlur={onBlur}
     >
-      {theme.isLayerable() ? (
+      {item.component?.isLayerable() ? (
         <>
-          <Switch className="px-0 mr-2" checked={theme.active} />
-          {theme.package_info.name}
+          <div className="flex items-center">
+            <Switch className="px-0 mr-2" checked={item.component?.active} />
+            {item.name}
+          </div>
+          {!canActivateTheme && <Icon type="premium-feature" />}
         </>
       ) : (
         <>
           <div className="flex items-center">
             <div
               className={`pseudo-radio-btn ${
-                theme.active ? 'pseudo-radio-btn--checked' : ''
+                item.component?.active ? 'pseudo-radio-btn--checked' : ''
               } mr-2`}
             ></div>
-            <span className={theme.active ? 'font-semibold' : undefined}>
-              {theme.package_info.name}
+            <span
+              className={item.component?.active ? 'font-semibold' : undefined}
+            >
+              {item.name}
             </span>
           </div>
-          <div
-            className="w-5 h-5 rounded-full"
-            style={{
-              backgroundColor: theme.package_info?.dock_icon?.background_color,
-            }}
-          ></div>
+          {item.component && canActivateTheme ? (
+            <div
+              className="w-5 h-5 rounded-full"
+              style={{
+                backgroundColor:
+                  item.component.package_info?.dock_icon?.background_color,
+              }}
+            ></div>
+          ) : (
+            <Icon type="premium-feature" />
+          )}
         </>
       )}
     </button>