web: create vault should be under pro

apps/web/src/dialogs/settings/vault-settings.tsx

@@ -20,10 +20,11 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { SettingsGroup } from "./types";
 import { useStore as useAppStore } from "../../stores/app-store";
 import { useStore as useNotesStore } from "../../stores/note-store";
-import { hashNavigate } from "../../navigation";
 import Vault from "../../common/vault";
 import { showToast } from "../../utils/toast";
 import { db } from "../../common/db";
+import { isUserPremium } from "../../hooks/use-is-user-premium";
+import { showBuyDialog } from "../../common/dialog-controller";
 
 export const VaultSettings: SettingsGroup[] = [
   {
@@ -35,11 +36,19 @@ export const VaultSettings: SettingsGroup[] = [
         key: "reminders",
         title: "Create vault",
         isHidden: () => useAppStore.getState().isVaultCreated,
+        onStateChange: (listener) =>
+          useAppStore.subscribe((s) => s.isVaultCreated, listener),
         components: [
           {
             type: "button",
             title: "Create",
-            action: () => hashNavigate("/vault/create"),
+            action: () => {
+              if (!isUserPremium()) showBuyDialog();
+              else
+                Vault.createVault().then((res) => {
+                  useAppStore.getState().setIsVaultCreated(res);
+                });
+            },
             variant: "secondary"
           }
         ]
@@ -53,7 +62,7 @@ export const VaultSettings: SettingsGroup[] = [
           {
             type: "button",
             title: "Change",
-            action: () => hashNavigate("/vault/create"),
+            action: () => Vault.changeVaultPassword(),
             variant: "secondary"
           }
         ]

apps/web/src/navigation/hash-routes.tsx

@@ -17,7 +17,6 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import Vault from "../common/vault";
 import {
   showAddReminderDialog,
   showBuyDialog,
@@ -37,7 +36,6 @@ import { closeOpenedDialog } from "../common/dialog-controller";
 import RouteContainer from "../components/route-container";
 import DiffViewer from "../components/diff-viewer";
 import Unlock from "../components/unlock";
-import { store as appStore } from "../stores/app-store";
 import { store as editorStore } from "../stores/editor-store";
 import { isMobile } from "../utils/dimensions";
 import {
@@ -123,14 +121,6 @@ const hashroutes = {
     closeOpenedDialog();
     return <DiffViewer noteId={noteId} />;
   },
-  "/vault/changePassword": () => {
-    Vault.changeVaultPassword();
-  },
-  "/vault/create": () => {
-    Vault.createVault().then((res) => {
-      appStore.setIsVaultCreated(res);
-    });
-  },
   "/buy": () => {
     showBuyDialog().then(afterAction);
   },