feat: lock other premium features

apps/web/src/app.js

@@ -4,10 +4,7 @@ import { Flex, Box } from "rebass";
 import ThemeProvider from "./components/theme-provider";
 import { useStore } from "./stores/app-store";
 import { useStore as useEditorStore } from "./stores/editor-store";
-import {
-  store as userstore,
-  useStore as useUserStore,
-} from "./stores/user-store";
+import { useStore as useUserStore } from "./stores/user-store";
 import { useStore as useNotesStore } from "./stores/note-store";
 import Animated from "./components/animated";
 import NavigationMenu from "./components/navigationmenu";
@@ -20,6 +17,7 @@ import {
   shouldAddBackupReminder,
   shouldAddSignupReminder,
 } from "./common/reminders";
+import { isUserPremium } from "./common";
 import { EV } from "notes-core/common";
 import useTablet from "./utils/use-tablet";
 import { showBuyDialog } from "./components/dialogs/buy-dialog";
@@ -61,8 +59,7 @@ function App() {
   useEffect(() => {
     EV.subscribe("user:checkStatus", async (type) => {
       //return { type, result: true };
-      const subStatus = userstore.get().user?.subscription?.status;
-      if (subStatus && subStatus >= 1 && subStatus <= 3) {
+      if (isUserPremium()) {
         return { type, result: true };
       } else {
         await showBuyDialog();

apps/web/src/common/index.js

@@ -13,6 +13,7 @@ import download from "../utils/download";
 import { Text } from "rebass";
 import { showLoadingDialog } from "../components/dialogs/loadingdialog";
 import Config from "../utils/config";
+import { store as userstore } from "../stores/user-store";
 
 export const db = new Database(StorageInterface, EventSource);
 db.host("http://localhost:4100");
@@ -99,3 +100,8 @@ export async function createBackup() {
   );
   await showToast("success", "Backup created!");
 }
+
+export function isUserPremium() {
+  const subStatus = userstore.get().user?.subscription?.status;
+  return subStatus && subStatus >= 1 && subStatus <= 3;
+}

apps/web/src/components/accent-item/index.js

@@ -2,17 +2,24 @@ import React from "react";
 import { Flex } from "rebass";
 import * as Icon from "../icons";
 import { useStore as useThemeStore } from "../../stores/theme-store";
+import { isUserPremium } from "../../common";
+import { showBuyDialog } from "../dialogs/buy-dialog";
 
 function AccentItem(props) {
   const { code, label } = props;
-  const setAccent = useThemeStore(store => store.setAccent);
-  const accent = useThemeStore(store => store.accent);
+  const setAccent = useThemeStore((store) => store.setAccent);
+  const accent = useThemeStore((store) => store.accent);
 
   return (
     <Flex
       variant="rowCenter"
       sx={{ position: "relative" }}
-      onClick={() => setAccent(code)}
+      onClick={async () => {
+        if (isUserPremium()) setAccent(code);
+        else {
+          await showBuyDialog();
+        }
+      }}
       key={label}
     >
       {code === accent && (
@@ -20,7 +27,7 @@ function AccentItem(props) {
           sx={{
             position: "absolute",
             zIndex: 1,
-            cursor: "pointer"
+            cursor: "pointer",
           }}
           color="static"
           size={20}

apps/web/src/views/settings.js

@@ -9,7 +9,12 @@ import accents from "../theme/accents";
 import { showLogInDialog } from "../components/dialogs/logindialog";
 import { showLogoutConfirmation } from "../components/dialogs/confirm";
 import useSystemTheme from "../utils/use-system-theme";
-import { createBackup, db, SUBSCRIPTION_STATUS } from "../common";
+import {
+  createBackup,
+  db,
+  isUserPremium,
+  SUBSCRIPTION_STATUS,
+} from "../common";
 import { usePersistentState } from "../utils/hooks";
 import dayjs from "dayjs";
 import { showRecoveryKeyDialog } from "../components/dialogs/recoverykeydialog";
@@ -233,6 +238,7 @@ function Settings(props) {
           title="Follow system theme"
           onTip="Switch app theme according to system"
           offTip="Keep app theme independent"
+          premium
           onToggled={toggleFollowSystemTheme}
           isToggled={followSystemTheme}
         />
@@ -297,6 +303,7 @@ function Settings(props) {
           onTip="All backups will be encrypted"
           offTip="Backups will not be encrypted"
           onToggled={toggleEncryptBackups}
+          premium
           isToggled={encryptBackups}
         />
 
@@ -377,14 +384,19 @@ function TextWithTip({ text, tip, sx }) {
 }
 
 function ToggleItem(props) {
-  const { title, onTip, offTip, isToggled, onToggled, onlyIf } = props;
+  const { title, onTip, offTip, isToggled, onToggled, onlyIf, premium } = props;
 
   if (onlyIf === false) return null;
   return (
     <Flex
       justifyContent="space-between"
       alignItems="center"
-      onClick={onToggled}
+      onClick={async () => {
+        if (isUserPremium() || !premium) onToggled();
+        else {
+          await showBuyDialog();
+        }
+      }}
       py={2}
       sx={{
         cursor: "pointer",