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

2022-02-08 20:25:12 +05:30
parent 7f5f0d9d17
commit 139853a491
7 changed files with 405 additions and 340 deletions
--- a/app/assets/javascripts/components/QuickSettingsMenu/FocusModeSwitch.tsx
+++ b/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)}
-      />
    </>
  );
 };
--- a/app/assets/javascripts/components/QuickSettingsMenu/QuickSettingsMenu.tsx
+++ b/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(
-        ContentType.Theme
-      ) as SNTheme[];
-      setThemes(themes.sort(sortThemes));
+      const themes = (
+        application.getDisplayableItems(ContentType.Theme) as SNTheme[]
+      )
+        .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(
-      themesMenuRef as any,
-      setThemesMenuOpen
-    );
+    const [closeOnBlur] = useCloseOnBlur(themesMenuRef, setThemesMenuOpen);

    const toggleThemesMenu = () => {
      if (!themesMenuOpen && themesButtonRef.current) {
@@ -224,9 +261,9 @@ export const QuickSettingsMenu: FunctionComponent<MenuProps> = observer(
    };

    const toggleDefaultTheme = () => {
-      const activeTheme = themes.find(
-        (theme) => theme.active && !theme.isLayerable()
-      );
+      const activeTheme = themes
+        .map((item) => item.component)
+        .find((theme) => theme?.active && !theme.isLayerable());
      if (activeTheme) application.toggleTheme(activeTheme);
    };

@@ -244,56 +281,54 @@ 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}
+          <Disclosure open={themesMenuOpen} onChange={toggleThemesMenu}>
+            <DisclosureButton
+              onKeyDown={handleBtnKeyDown}
+              onBlur={closeOnBlur}
+              ref={themesButtonRef}
+              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+            >
+              <div className="flex items-center">
+                <Icon type="themes" className="color-neutral mr-2" />
+                Themes
+              </div>
+              <Icon type="chevron-right" className="color-neutral" />
+            </DisclosureButton>
+            <DisclosurePanel
+              onBlur={closeOnBlur}
+              ref={themesMenuRef}
+              onKeyDown={handlePanelKeyDown}
+              style={{
+                ...themesMenuPosition,
+              }}
+              className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
+            >
+              <div className="px-3 my-1 font-semibold color-text uppercase">
+                Themes
+              </div>
+              <button
+                className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
+                onClick={toggleDefaultTheme}
                onBlur={closeOnBlur}
-                ref={themesButtonRef}
-                className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
+                ref={defaultThemeButtonRef}
              >
-                <div className="flex items-center">
-                  <Icon type="themes" className="color-neutral mr-2" />
-                  Themes
-                </div>
-                <Icon type="chevron-right" className="color-neutral" />
-              </DisclosureButton>
-              <DisclosurePanel
-                onBlur={closeOnBlur}
-                ref={themesMenuRef}
-                onKeyDown={handlePanelKeyDown}
-                style={{
-                  ...themesMenuPosition,
-                }}
-                className={`${MENU_CLASSNAME} fixed sn-dropdown--animated`}
-              >
-                <div className="px-3 my-1 font-semibold color-text uppercase">
-                  Themes
-                </div>
-                <button
-                  className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none"
-                  onClick={toggleDefaultTheme}
+                <div
+                  className={`pseudo-radio-btn ${
+                    defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
+                  } mr-2`}
+                ></div>
+                Default
+              </button>
+              {themes.map((theme) => (
+                <ThemesMenuButton
+                  item={theme}
+                  application={application}
+                  key={theme.component?.uuid ?? theme.identifier}
                  onBlur={closeOnBlur}
-                  ref={defaultThemeButtonRef}
-                >
-                  <div
-                    className={`pseudo-radio-btn ${
-                      defaultThemeOn ? 'pseudo-radio-btn--checked' : ''
-                    } mr-2`}
-                  ></div>
-                  Default
-                </button>
-                {themes.map((theme) => (
-                  <ThemesMenuButton
-                    theme={theme}
-                    application={application}
-                    key={theme.uuid}
-                    onBlur={closeOnBlur}
-                  />
-                ))}
-              </DisclosurePanel>
-            </Disclosure>
-          ) : null}
+                />
+              ))}
+            </DisclosurePanel>
+          </Disclosure>
          {toggleableComponents.map((component) => (
            <button
              className="sn-dropdown-item justify-between focus:bg-info-backdrop focus:shadow-none"
--- a/app/assets/javascripts/components/QuickSettingsMenu/ThemesMenuButton.tsx
+++ b/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>