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

app/assets/javascripts/components/ApplicationView.tsx

@@ -23,6 +23,7 @@ import { NotesContextMenu } from '@/components/NotesContextMenu';
 import { PurchaseFlowWrapper } from '@/purchaseFlow/PurchaseFlowWrapper';
 import { render } from 'preact';
 import { PermissionsModal } from './PermissionsModal';
+import { PremiumModalProvider } from './Premium';
 
 type Props = {
   application: WebApplication;
@@ -196,6 +197,7 @@ export class ApplicationView extends PureComponent<Props, State> {
 
   render() {
     return (
+      <PremiumModalProvider state={this.appState.features}>
         <div className={this.platformString + ' main-ui-view sn-component'}>
           {!this.state.needsUnlock && this.state.launched && (
             <div
@@ -253,6 +255,7 @@ export class ApplicationView extends PureComponent<Props, State> {
             appState={this.appState}
           />
         </div>
+      </PremiumModalProvider>
     );
   }
 }

app/assets/javascripts/components/Navigation.tsx

@@ -6,7 +6,6 @@ import { ApplicationEvent, PrefKey } from '@standardnotes/snjs';
 import { observer } from 'mobx-react-lite';
 import { FunctionComponent } from 'preact';
 import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
-import { PremiumModalProvider } from './Premium';
 import {
   PanelSide,
   ResizeFinishCallback,
@@ -51,7 +50,6 @@ export const Navigation: FunctionComponent<Props> = observer(
     }, [appState]);
 
     return (
-      <PremiumModalProvider state={appState.features}>
       <div
         id="navigation"
         className="sn-component section app-column app-column-first"
@@ -86,7 +84,6 @@ export const Navigation: FunctionComponent<Props> = observer(
           />
         )}
       </div>
-      </PremiumModalProvider>
     );
   }
 );

app/assets/javascripts/components/NotesOptions/ChangeEditorOption.tsx

@@ -29,7 +29,6 @@ import {
 import { FunctionComponent } from 'preact';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { Icon } from '../Icon';
-import { PremiumModalProvider } from '../Premium';
 import { createEditorMenuGroups } from './changeEditor/createEditorMenuGroups';
 import { EditorAccordionMenu } from './changeEditor/EditorAccordionMenu';
 
@@ -273,7 +272,6 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
         }}
         className="sn-dropdown flex flex-col max-h-120 min-w-68 fixed overflow-y-auto"
       >
-        <PremiumModalProvider state={appState.features}>
         <EditorAccordionMenu
           application={application}
           closeOnBlur={closeOnBlur}
@@ -282,7 +280,6 @@ export const ChangeEditorOption: FunctionComponent<ChangeEditorOptionProps> = ({
           isOpen={changeEditorMenuOpen}
           selectComponent={selectComponent}
         />
-        </PremiumModalProvider>
       </DisclosurePanel>
     </Disclosure>
   );

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

@@ -1,10 +1,10 @@
 import { WebApplication } from '@/ui_models/application';
 import { FeatureStatus, FeatureIdentifier } from '@standardnotes/snjs';
 import { FunctionComponent } from 'preact';
-import { useCallback, useState } from 'preact/hooks';
+import { useCallback } from 'preact/hooks';
 import { JSXInternal } from 'preact/src/jsx';
 import { Icon } from '../Icon';
-import { PremiumFeaturesModal } from '../PremiumFeaturesModal';
+import { usePremiumModal } from '../Premium';
 import { Switch } from '../Switch';
 
 type Props = {
@@ -20,7 +20,7 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
   onClose,
   isEnabled,
 }) => {
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+  const premiumModal = usePremiumModal();
   const isEntitled =
     application.getFeatureStatus(FeatureIdentifier.FocusMode) ===
     FeatureStatus.Entitled;
@@ -33,10 +33,10 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
         onToggle(!isEnabled);
         onClose();
       } else {
-        setShowUpgradeModal(true);
+        premiumModal.activate('Focused Writing');
       }
     },
-    [isEntitled, isEnabled, onToggle, setShowUpgradeModal, onClose]
+    [isEntitled, onToggle, isEnabled, onClose, premiumModal]
   );
 
   return (
@@ -57,11 +57,6 @@ export const FocusModeSwitch: FunctionComponent<Props> = ({
           </div>
         )}
       </button>
-      <PremiumFeaturesModal
-        showModal={showUpgradeModal}
-        featureName="Focus Mode"
-        onClose={() => setShowUpgradeModal(false)}
-      />
     </>
   );
 };

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

@@ -9,6 +9,7 @@ import {
   ComponentArea,
   ContentType,
   FeatureIdentifier,
+  Features,
   SNComponent,
   SNTheme,
 } from '@standardnotes/snjs';
@@ -31,6 +32,12 @@ const focusModeAnimationDuration = 1255;
 const MENU_CLASSNAME =
   'sn-menu-border sn-dropdown min-w-80 max-h-120 max-w-xs flex flex-col py-2 overflow-y-auto';
 
+export type ThemeItem = {
+  name: string;
+  identifier: FeatureIdentifier;
+  component?: SNTheme;
+};
+
 type MenuProps = {
   appState: AppState;
   application: WebApplication;
@@ -72,7 +79,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       focusModeEnabled,
       setFocusModeEnabled,
     } = appState.quickSettingsMenu;
-    const [themes, setThemes] = useState<SNTheme[]>([]);
+    const [themes, setThemes] = useState<ThemeItem[]>([]);
     const [toggleableComponents, setToggleableComponents] = useState<
       SNComponent[]
     >([]);
@@ -96,12 +103,39 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     }, [focusModeEnabled]);
 
     const reloadThemes = useCallback(() => {
-      const themes = application.getDisplayableItems(
+      const themes = (
-        ContentType.Theme
+        application.getDisplayableItems(ContentType.Theme) as SNTheme[]
-      ) as SNTheme[];
+      )
-      setThemes(themes.sort(sortThemes));
+        .sort(sortThemes)
+        .map((item) => {
+          return {
+            name: item.name,
+            identifier: item.identifier,
+            component: item,
+          };
+        }) as ThemeItem[];
+
+      Features.filter(
+        (feature) =>
+          feature.content_type === ContentType.Theme && !feature.layerable
+      ).forEach((theme) => {
+        if (
+          themes.findIndex((item) => item.identifier === theme.identifier) ===
+          -1
+        ) {
+          themes.push({
+            name: theme.name as string,
+            identifier: theme.identifier,
+          });
+        }
+      });
+
+      setThemes(themes);
+
       setDefaultThemeOn(
-        !themes.find((theme) => theme.active && !theme.isLayerable())
+        !themes
+          .map((item) => item?.component)
+          .find((theme) => theme?.active && !theme.isLayerable())
       );
     }, [application]);
 
@@ -117,6 +151,12 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       setToggleableComponents(toggleableComponents);
     }, [application]);
 
+    useEffect(() => {
+      if (!themes.length) {
+        reloadThemes();
+      }
+    }, [reloadThemes, themes.length]);
+
     useEffect(() => {
       const cleanupItemStream = application.streamItems(
         ContentType.Theme,
@@ -153,10 +193,7 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
       prefsButtonRef.current?.focus();
     }, []);
 
-    const [closeOnBlur] = useCloseOnBlur(
+    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);
-      themesMenuRef as any,
-      setThemesMenuOpen
-    );
 
     const toggleThemesMenu = () => {
       if (!themesMenuOpen && themesButtonRef.current) {
@@ -224,9 +261,9 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
     };
 
     const toggleDefaultTheme = () => {
-      const activeTheme = themes.find(
+      const activeTheme = themes
-        (theme) => theme.active && !theme.isLayerable()
+        .map((item) => item.component)
-      );
+        .find((theme) => theme?.active && !theme.isLayerable());
       if (activeTheme) application.toggleTheme(activeTheme);
     };
 
@@ -244,7 +281,6 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
           <div className="px-3 mt-1 mb-2 font-semibold color-text uppercase">
             Quick Settings
           </div>
-          {themes && themes.length ? (
           <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
             <DisclosureButton
               onKeyDown={handleBtnKeyDown}
@@ -285,15 +321,14 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
               </button>
               {themes.map((theme) => (
                 <ThemesMenuButton
-                    theme={theme}
+                  item={theme}
                   application={application}
-                    key={theme.uuid}
+                  key={theme.component?.uuid ?? theme.identifier}
                   onBlur={closeOnBlur}
                 />
               ))}
             </DisclosurePanel>
           </Disclosure>
-          ) : null}
           {toggleableComponents.map((component) => (
             <button
               className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"

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 ${
+      className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between`}
-        theme.isLayerable() ? `justify-start` : `justify-between`
-      }`}
       onClick={toggleTheme}
       onBlur={onBlur}
     >
-      {theme.isLayerable() ? (
+      {item.component?.isLayerable() ? (
         <>
-          <Switch className="px-0 mr-2" checked={theme.active} />
+          <div className="flex items-center">
-          {theme.package_info.name}
+            <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}>
+            <span
-              {theme.package_info.name}
+              className={item.component?.active ? 'font-semibold' : undefined}
+            >
+              {item.name}
             </span>
           </div>
+          {item.component && canActivateTheme ? (
             <div
               className="w-5 h-5 rounded-full"
               style={{
-              backgroundColor: theme.package_info?.dock_icon?.background_color,
+                backgroundColor:
+                  item.component.package_info?.dock_icon?.background_color,
               }}
             ></div>
+          ) : (
+            <Icon type="premium-feature" />
+          )}
         </>
       )}
     </button>

app/assets/javascripts/preferences/panes/Appearance.tsx

@@ -1,5 +1,5 @@
 import { Dropdown, DropdownItem } from '@/components/Dropdown';
-import { PremiumModalProvider, usePremiumModal } from '@/components/Premium';
+import { usePremiumModal } from '@/components/Premium';
 import { sortThemes } from '@/components/QuickSettingsMenu/QuickSettingsMenu';
 import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
 import { Switch } from '@/components/Switch';
@@ -28,7 +28,8 @@ type Props = {
   application: WebApplication;
 };
 
-const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
+export const Appearance: FunctionComponent<Props> = observer(
+  ({ application }) => {
     const premiumModal = usePremiumModal();
     const isEntitledToMidnightTheme =
       application.getFeatureStatus(FeatureIdentifier.MidnightTheme) ===
@@ -46,12 +47,17 @@ const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
       () =>
         application.getPreference(
           PrefKey.AutoDarkThemeIdentifier,
-        isEntitledToMidnightTheme ? FeatureIdentifier.MidnightTheme : 'Default'
+          isEntitledToMidnightTheme
+            ? FeatureIdentifier.MidnightTheme
+            : 'Default'
         ) as string
     );
     const [useDeviceSettings, setUseDeviceSettings] = useState(
       () =>
-      application.getPreference(PrefKey.UseSystemColorScheme, false) as boolean
+        application.getPreference(
+          PrefKey.UseSystemColorScheme,
+          false
+        ) as boolean
     );
 
     useEffect(() => {
@@ -92,7 +98,10 @@ const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
     }, [application]);
 
     const toggleUseDeviceSettings = () => {
-    application.setPreference(PrefKey.UseSystemColorScheme, !useDeviceSettings);
+      application.setPreference(
+        PrefKey.UseSystemColorScheme,
+        !useDeviceSettings
+      );
       if (!application.getPreference(PrefKey.AutoLightThemeIdentifier)) {
         application.setPreference(
           PrefKey.AutoLightThemeIdentifier,
@@ -186,12 +195,5 @@ const AppearancePane: FunctionComponent<Props> = observer(({ application }) => {
         </PreferencesGroup>
       </PreferencesPane>
     );
-});
+  }
-
-export const Appearance: FunctionComponent<Props> = observer(
-  ({ application }) => (
-    <PremiumModalProvider state={application.getAppState().features}>
-      <AppearancePane application={application} />
-    </PremiumModalProvider>
-  )
 );