Merge pull request #8914 from streetwriters/release/v3.3.5

web: bump version to 3.3.5

.github/actions/setup-node-with-cache/action.yml

@@ -7,7 +7,7 @@ runs:
     - name: Setup Node
       uses: actions/setup-node@v4
       with:
-        node-version: 20.x
+        node-version: 22.x
         cache: "npm"
         cache-dependency-path: |
           package-lock.json

.github/workflows/android.e2e.yml

@@ -47,6 +47,11 @@ jobs:
       - name: Install Detox CLI
         run: npm install detox-cli --global
 
+      - name: Check for typescript errors
+        run: |
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Detox build
         run: |
           yarn build:android

.github/workflows/android.publish.internal.yml

@@ -73,6 +73,12 @@ jobs:
       - name: CCache Stats Before Build
         run: ccache -sv
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 

.github/workflows/android.publish.yml

@@ -73,6 +73,12 @@ jobs:
       - name: CCache Stats Before Build
         run: ccache -sv
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: Build unsigned app bundle
         run: yarn release:android:bundle
 

.github/workflows/core.tests.yml

@@ -52,7 +52,6 @@ jobs:
           echo "USER_PASSWORD=${{ secrets.USER_PASSWORD }}" >> $GITHUB_ENV
           echo "USER_TOTP_SECRET=${{ secrets.USER_TOTP_SECRET }}" >> $GITHUB_ENV
           echo "USER_HASHED_PASSWORD=${{ secrets.USER_HASHED_PASSWORD }}" >> $GITHUB_ENV
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
 
       - name: Run all @notesnook/core tests
-        run: npx nx test:e2e @notesnook/core
+        run: npm run tx @notesnook/core:test:e2e

.github/workflows/desktop.publish.yml

@@ -65,17 +65,13 @@ jobs:
           npm i --cpu x64 sqlite-better-trigram
         working-directory: ./apps/desktop
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Generate desktop build (stable)
         if: ${{ inputs.release-track == 'stable' }}
-        run: npx nx build:desktop @notesnook/web
+        run: npm run tx @notesnook/web:build:desktop
 
       - name: Generate desktop build (beta)
         if: ${{ inputs.release-track == 'beta' }}
-        run: BETA=true npx nx build:desktop @notesnook/web
+        run: BETA=true npm run tx @notesnook/web:build:desktop
 
       - name: Build desktop bundle
         working-directory: ./apps/desktop
@@ -199,9 +195,9 @@ jobs:
           CSC_LINK: ${{ secrets.mac_certs }}
           CSC_KEY_PASSWORD: ${{ secrets.mac_certs_password }}
         run: |
-          npx nx run release --project @notesnook/desktop -- --variant=mas
+          npm run tx @notesnook/desktop:release -- --variant=mas
+          cd apps/desktop
           yarn electron-builder --config=electron-builder.config.js --mac mas --universal -p never
-        working-directory: ./apps/desktop
 
       - name: Build zip and dmg
         env:
@@ -212,13 +208,13 @@ jobs:
           APPLE_API_KEY_ID: ${{ secrets.api_key_id }}
           APPLE_API_ISSUER: ${{ secrets.api_key_issuer_id }}
         run: |
-          npx nx run release --project @notesnook/desktop
+          npm run tx @notesnook/desktop:release
+          cd apps/desktop
           if [ ${{ inputs.publish-github }} == true ]; then
             yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p always
           else
             yarn electron-builder --config=electron-builder.config.js --mac zip dmg --arm64 --x64 -p never
           fi
-        working-directory: ./apps/desktop
 
       - name: Deploy to Testflight
         if: inputs.publish-apple && steps.appstore.outputs.app-version-latest != steps.app_metadata.outputs.app_version
@@ -271,8 +267,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build snap
         if: inputs.publish-snap
@@ -339,8 +334,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       # - name: Build snap
       #   if: inputs.publish-snap
@@ -402,10 +396,13 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
+          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build
-        run: npx nx run release --project @notesnook/desktop
+        run: node scripts/execute.mjs @notesnook/desktop:release
 
       - name: Publish
         env:

.github/workflows/desktop.tests.yml

@@ -6,14 +6,14 @@ on:
     branches:
       - "master"
     paths:
-      - "app/desktop/**"
+      - "apps/desktop/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/desktop.tests.yml"
   pull_request:
     branches:
       - "master"
     paths:
-      - "app/desktop/**"
+      - "apps/desktop/**"
       # re-run workflow if workflow file changes
       - ".github/workflows/desktop.tests.yml"
 
@@ -33,12 +33,8 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Generate desktop build
-        run: npx nx build:desktop @notesnook/web
+        run: npm run tx @notesnook/web:build:desktop
 
       - name: Archive build artifact
         uses: actions/upload-artifact@v4
@@ -70,8 +66,7 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -114,8 +109,7 @@ jobs:
           npm run bootstrap -- --scope=desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -164,8 +158,7 @@ jobs:
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: npm run tx @notesnook/desktop:release
 
       - name: Build app
         run: |
@@ -211,11 +204,13 @@ jobs:
         run: |
           npm i --cpu arm64 sqlite-better-trigram
           npm i --cpu x64 sqlite-better-trigram
+
+          npm i --cpu arm64 sqlite3-fts5-html
+          npm i --cpu x64 sqlite3-fts5-html
         working-directory: ./apps/desktop
 
       - name: Build Electron wrapper
-        run: npx nx run release --project @notesnook/desktop
-        working-directory: ./apps/desktop
+        run: node scripts/execute.mjs @notesnook/desktop:release
 
       - name: Build app
         run: |

.github/workflows/editor.tests.yml

@@ -38,12 +38,8 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=editor
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Build editor
-        run: npx nx build @notesnook/editor
+        run: npm run tx @notesnook/editor:build
 
       - name: Run all @notesnook/editor tests
-        run: npx nx test @notesnook/editor
+        run: npm run tx @notesnook/editor:test

.github/workflows/ios.publish.yml

@@ -25,7 +25,7 @@ jobs:
           npm run bootstrap -- --scope=mobile
 
       - name: Build packages
-        run: npx nx run @notesnook/mobile:build
+        run: npm run tx @notesnook/mobile:build
 
       - name: ccache
         uses: hendrikmuhs/ccache-action@v1.2.11
@@ -64,6 +64,12 @@ jobs:
           bundle install
           RCT_NEW_ARCH_ENABLED=0 bundle exec pod install
 
+      - name: Check for typescript errors
+        run: |
+          npm run tx mobile:build
+          cd apps/mobile
+          npx tsc --noEmit
+
       - name: CCache Stats Before Build
         run: ccache -sv
 

.github/workflows/monograph.publish.yml

@@ -39,13 +39,13 @@ jobs:
           echo ::set-output name=app_version::$(cat package.json | jq -r .version)
 
       - name: Generate build
-        run: npx nx build @notesnook/monograph
+        run: npm run tx @notesnook/monograph:build
 
       # Setup Buildx
       - name: Docker Setup Buildx
         uses: docker/setup-buildx-action@v3
         with:
-          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+          platforms: linux/amd64,linux/arm64
 
       - name: Log in to Docker Hub
         uses: docker/login-action@v3
@@ -77,7 +77,7 @@ jobs:
           context: apps/monograph
           file: apps/monograph/Dockerfile
           push: true
-          platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v8
+          platforms: linux/amd64,linux/arm64
           tags: streetwriters/monograph:${{ steps.package_metadata.outputs.app_version }},streetwriters/monograph:latest
           cache-from: streetwriters/monograph:latest
 

.github/workflows/theme-builder.publish.yml

@@ -20,7 +20,6 @@ jobs:
 
       - name: Setup environment
         run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 

.github/workflows/vericrypt.publish.yml

@@ -20,7 +20,6 @@ jobs:
 
       - name: Setup environment
         run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 

.github/workflows/web.benchmarks.yml

@@ -27,10 +27,6 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Build
         run: npm run build:web
 

.github/workflows/web.publish.yml

@@ -30,7 +30,6 @@ jobs:
 
       - name: Setup environment
         run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_ACCOUNT_ID=${{ secrets.CLOUDFLARE_ACCOUNT_ID }}" >> $GITHUB_ENV
           echo "CLOUDFLARE_API_TOKEN=${{ secrets.CLOUDFLARE_API_TOKEN }}" >> $GITHUB_ENV
 

.github/workflows/web.tests.yml

@@ -49,10 +49,6 @@ jobs:
           npm ci --ignore-scripts --prefer-offline --no-audit
           npm run bootstrap -- --scope=web
 
-      - name: Setup environment
-        run: |
-          echo "NX_CLOUD_ACCESS_TOKEN=${{ secrets.NX_CLOUD_ACCESS_TOKEN }}" >> $GITHUB_ENV
-
       - name: Generate test build
         run: npm run build:test:web
 

.gitignore

@@ -12,3 +12,4 @@ site
 node_modules.backup
 .nx
 /*.patch
+.taskcache

README.md

@@ -27,7 +27,6 @@ Notesnook is built using the following technologies:
 3. React Native — For mobile apps we are using React Native
 4. Electron — For desktop app
 5. NPM — listed here because we **don't** use Yarn or PNPM or XYZ across any of our projects.
-6. Nx — maintaining monorepos is hard but Nx makes it easier.
 
 > **Note: Each project in the monorepo contains its own architecture details which you can refer to.**
 

apps/desktop/__tests__/utils.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import { execSync } from "child_process";
-import { cp, readFile, writeFile } from "fs/promises";
+import { cp } from "fs/promises";
 import { fileURLToPath } from "node:url";
 import path, { join, resolve } from "path";
 import { _electron as electron } from "playwright";
@@ -59,7 +59,8 @@ export async function buildAndLaunchApp(
   });
   const { app, page, configPath, userDataDir } = await launchApp(
     executablePath,
-    productName
+    productName,
+    options?.version
   );
   const ctx: AppContext = {
     app,
@@ -70,7 +71,8 @@ export async function buildAndLaunchApp(
     relaunch: async () => {
       const { app, page, configPath, userDataDir } = await launchApp(
         executablePath,
-        productName
+        productName,
+        options?.version
       );
       ctx.app = app;
       ctx.page = page;
@@ -81,7 +83,11 @@ export async function buildAndLaunchApp(
   return ctx;
 }
 
-async function launchApp(executablePath: string, packageName: string) {
+async function launchApp(
+  executablePath: string,
+  packageName: string,
+  version?: string
+) {
   const userDataDir = resolve(
     __dirname,
     "..",
@@ -99,7 +105,12 @@ async function launchApp(executablePath: string, packageName: string) {
             APPIMAGE: "true"
           }
         : (process.env as Record<string, string>)),
-      CUSTOM_USER_DATA_DIR: userDataDir
+      CUSTOM_USER_DATA_DIR: userDataDir,
+      ...(version
+        ? {
+            CUSTOM_APP_VERSION: version
+          }
+        : {})
     }
   });
 
@@ -147,33 +158,18 @@ export async function buildApp(version?: string) {
   }
 }
 
-async function copyBuild({
-  version,
-  outputDir
-}: {
-  version?: string;
-  outputDir: string;
-}) {
+async function copyBuild({ outputDir }: { outputDir: string }) {
   return process.platform === "win32"
-    ? await makeBuildCopyWindows(outputDir, productName, version)
+    ? await makeBuildCopyWindows(outputDir, productName)
     : process.platform === "darwin"
-    ? await makeBuildCopyMacOS(outputDir, productName, version)
-    : await makeBuildCopyLinux(outputDir, productName, version);
+    ? await makeBuildCopyMacOS(outputDir, productName)
+    : await makeBuildCopyLinux(outputDir, productName);
 }
 
-async function makeBuildCopyLinux(
-  outputDir: string,
-  productName: string,
-  version?: string
-) {
+async function makeBuildCopyLinux(outputDir: string, productName: string) {
   const platformDir =
     process.arch === "arm64" ? "linux-arm64-unpacked" : "linux-unpacked";
-  const appDir = await makeBuildCopy(
-    outputDir,
-    platformDir,
-    "resources",
-    version
-  );
+  const appDir = await makeBuildCopy(outputDir, platformDir);
   return resolve(
     __dirname,
     "..",
@@ -182,34 +178,16 @@ async function makeBuildCopyLinux(
   );
 }
 
-async function makeBuildCopyWindows(
-  outputDir: string,
-  productName: string,
-  version?: string
-) {
+async function makeBuildCopyWindows(outputDir: string, productName: string) {
   const platformDir =
     process.arch === "arm64" ? "win-arm64-unpacked" : "win-unpacked";
-  const appDir = await makeBuildCopy(
-    outputDir,
-    platformDir,
-    "resources",
-    version
-  );
+  const appDir = await makeBuildCopy(outputDir, platformDir);
   return resolve(__dirname, "..", appDir, `${productName}.exe`);
 }
 
-async function makeBuildCopyMacOS(
-  outputDir: string,
-  productName: string,
-  version?: string
-) {
+async function makeBuildCopyMacOS(outputDir: string, productName: string) {
   const platformDir = process.arch === "arm64" ? "mac-arm64" : "mac";
-  const appDir = await makeBuildCopy(
-    outputDir,
-    platformDir,
-    join(`${productName}.app`, "Contents", "Resources"),
-    version
-  );
+  const appDir = await makeBuildCopy(outputDir, platformDir);
   return resolve(
     __dirname,
     "..",
@@ -221,12 +199,7 @@ async function makeBuildCopyMacOS(
   );
 }
 
-async function makeBuildCopy(
-  outputDir: string,
-  platformDir: string,
-  resourcesDir: string,
-  version?: string
-) {
+async function makeBuildCopy(outputDir: string, platformDir: string) {
   const appDir = outputDir;
   await cp(join(SOURCE_DIR, platformDir), outputDir, {
     recursive: true,
@@ -236,14 +209,6 @@ async function makeBuildCopy(
     force: true
   });
 
-  const packageJsonPath = join(appDir, resourcesDir, "app", "package.json");
-
-  const packageJson = JSON.parse(await readFile(packageJsonPath, "utf-8"));
-  if (version) {
-    packageJson.version = version;
-    await writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2));
-  }
-
   return appDir;
 }
 

apps/desktop/electron-builder.config.js

@@ -47,7 +47,11 @@ module.exports = {
   copyright: `Copyright © ${year} Streetwriters (Private) Limited`,
   artifactName: "notesnook_${os}_${arch}.${ext}",
   generateUpdatesFilesForAllChannels: true,
-  asar: false,
+  asar: true,
+  asarUnpack: [
+    "node_modules/sqlite-better-trigram-@(linux|darwin|windows)-${arch}/**/*",
+    "node_modules/sqlite3-fts5-html-@(linux|darwin|windows)-${arch}/**/*"
+  ],
   files: [
     "!*.chunk.js.map",
     "!*.chunk.js.LICENSE.txt",

apps/desktop/package.json

@@ -2,7 +2,7 @@
   "name": "@notesnook/desktop",
   "productName": "Notesnook",
   "description": "Your private note taking space",
-  "version": "3.2.3",
+  "version": "3.3.5",
   "appAppleId": "1544027013",
   "private": true,
   "main": "./dist/cjs/index.js",
@@ -32,7 +32,7 @@
     "@notesnook/ui": "file:../../packages/ui",
     "@trpc/client": "10.45.2",
     "@trpc/server": "10.45.2",
-    "better-sqlite3-multiple-ciphers": "^11.10.0",
+    "better-sqlite3-multiple-ciphers": "^12.4.1",
     "electron-trpc": "0.7.1",
     "electron-updater": "^6.6.2",
     "icojs": "^0.19.5",
@@ -47,7 +47,7 @@
     "@types/node": "22.15.3",
     "@types/yargs": "^17.0.33",
     "chokidar": "^4.0.3",
-    "electron": "^34.0.0",
+    "electron": "^37.0.0",
     "electron-builder": "^26.0.12",
     "esbuild": "0.21.5",
     "node-abi": "^4.5.0",

apps/desktop/scripts/build.mjs

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+console.log("starting build...");
 import path from "path";
 import fs from "fs/promises";
 import { existsSync } from "fs";
@@ -26,6 +27,7 @@ import * as childProcess from "child_process";
 import { fileURLToPath } from "url";
 import { patchBetterSQLite3 } from "./patch-better-sqlite3.mjs";
 
+console.log("imports done...");
 const args = yargs(process.argv);
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -34,11 +36,22 @@ const skipTscBuild = args.skipTscBuild || false;
 
 const webAppPath = path.resolve(path.join(__dirname, "..", "..", "web"));
 
+console.log("loaded args", {
+  args,
+  __filename,
+  __dirname,
+  root,
+  skipTscBuild,
+  webAppPath
+});
 await fs.rm(path.join(root, "build"), { force: true, recursive: true });
 
+console.log("removed build folder");
+
 if (args.rebuild || !existsSync(path.join(webAppPath, "build"))) {
+  console.log("rebuilding...");
   await exec(
-    "npx nx build:desktop @notesnook/web",
+    "node scripts/execute.mjs @notesnook/web:build:desktop",
     path.join(__dirname, "..", "..", "..")
   );
 }

apps/desktop/src/api/sqlite-kysely.ts

@@ -123,15 +123,21 @@ export class SQLite {
       // fts5 API, we must wait decrypt the database before we can load
       // the extensions.
       if (!this.extensionsLoaded && (await this.isDatabaseReady())) {
-        const betterTrigram = require("sqlite-better-trigram");
-        const fts5Html = require("sqlite3-fts5-html");
-        betterTrigram.load(this.sqlite);
-        fts5Html.load(this.sqlite);
-        this.extensionsLoaded = true;
+        this.loadExtensions();
       }
     }
   }
 
+  private loadExtensions() {
+    this.sqlite?.loadExtension(
+      getExtensionPath("sqlite-better-trigram", "better-trigram")
+    );
+    this.sqlite?.loadExtension(
+      getExtensionPath("sqlite3-fts5-html", "fts5-html")
+    );
+    this.extensionsLoaded = true;
+  }
+
   async run<R>(
     sql: string,
     parameters?: SQLiteCompatibleType[]
@@ -175,3 +181,34 @@ export class SQLite {
     }
   }
 }
+
+function getExtensionPath(extensionName: string, entryPoint: string) {
+  const path = require("path");
+  const { statSync } = require("fs");
+
+  const os = process.platform === "win32" ? "windows" : process.platform;
+  const packageName = `${extensionName}-${os}-${process.arch}`;
+  const extensionSuffix =
+    process.platform === "win32"
+      ? "dll"
+      : process.platform === "darwin"
+      ? "dylib"
+      : "so";
+  let loadablePath = path.join(
+    require.resolve(extensionName),
+    "..",
+    "..",
+    packageName,
+    `${entryPoint}.${extensionSuffix}`
+  );
+
+  if (loadablePath.includes(".asar"))
+    loadablePath = loadablePath
+      .replace("electron.asar", "app.asar")
+      .replace(".asar", ".asar.unpacked");
+
+  if (!statSync(loadablePath, { throwIfNoEntry: false })) {
+    throw new Error(`${extensionName} not found at ${loadablePath}.`);
+  }
+  return loadablePath;
+}

apps/desktop/src/main.ts

@@ -18,7 +18,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 import "./overrides";
-import { app, BrowserWindow, nativeTheme, shell } from "electron";
+import { app, BrowserWindow, nativeTheme, shell, dialog } from "electron";
 import { isDevelopment } from "./utils";
 import { registerProtocol, PROTOCOL_URL } from "./utils/protocol";
 import { configureAutoUpdater } from "./utils/autoupdater";
@@ -182,6 +182,17 @@ async function createWindow() {
 app.once("ready", async () => {
   console.info("App ready. Opening window.");
 
+  if (app.runningUnderARM64Translation) {
+    console.log("App is running under ARM64 translation");
+    dialog.showMessageBoxSync({
+      message:
+        "Notesnook detected that it is running under ARM64 translation. For the best performance, please download the ARM64 build of Notesnook from our website.",
+      type: "warning",
+      buttons: ["Okay"],
+      title: "Degraded Performance Warning"
+    });
+  }
+
   if (config.customDns) enableCustomDns();
   else disableCustomDns();
 

apps/desktop/src/overrides.ts

@@ -19,6 +19,12 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { app } from "electron";
 import path from "path";
 
+const customVersion = process.env.CUSTOM_APP_VERSION;
+if (customVersion) {
+  app.getVersion = () => customVersion;
+  console.log("setting custom version:", customVersion);
+}
+
 if (process.env.CUSTOM_USER_DATA_DIR) {
   app.setPath(
     "appData",

apps/mobile/app/common/database/encryption.ts

@@ -94,7 +94,9 @@ export async function encryptDatabaseKeyWithPassword(appLockPassword: string) {
 }
 
 export async function restoreDatabaseKeyToKeyChain(appLockPassword: string) {
-  const databaseKeyCipher: Cipher = CipherStorage.getMap(DB_KEY_CIPHER);
+  const databaseKeyCipher: Cipher = CipherStorage.getMap(
+    DB_KEY_CIPHER
+  ) as Cipher;
   const databaseKey = (await decrypt(
     {
       password: appLockPassword
@@ -135,7 +137,9 @@ export async function clearAppLockVerificationCipher() {
 
 export async function validateAppLockPassword(appLockPassword: string) {
   try {
-    const appLockCipher: Cipher = CipherStorage.getMap(APPLOCK_CIPHER);
+    const appLockCipher: Cipher = CipherStorage.getMap(
+      APPLOCK_CIPHER
+    ) as Cipher;
     if (!appLockCipher) return true;
     const key = await Sodium.deriveKey(appLockPassword, appLockCipher.salt);
     const decrypted = await decrypt(key, appLockCipher);
@@ -159,7 +163,9 @@ export function clearDatabaseKey() {
 export async function getDatabaseKey(appLockPassword?: string) {
   if (DB_KEY) return DB_KEY;
   if (appLockPassword) {
-    const databaseKeyCipher: Cipher = CipherStorage.getMap("databaseKeyCipher");
+    const databaseKeyCipher: Cipher = CipherStorage.getMap(
+      "databaseKeyCipher"
+    ) as Cipher;
     const databaseKey = await decrypt(
       {
         password: appLockPassword
@@ -293,7 +299,7 @@ export async function deriveCryptoKey(data: SerializedKey) {
 
 export async function getCryptoKey() {
   try {
-    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER);
+    const keyCipher: Cipher = MMKV.getMap(USER_KEY_CIPHER) as Cipher;
     if (!keyCipher) {
       DatabaseLogger.info("User key cipher is null");
       return undefined;

apps/mobile/app/common/database/index.ts

@@ -16,7 +16,7 @@ GNU General Public License for more details.
 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 { database } from "@notesnook/common";
+import { database, getFeature, getFeatureLimit } from "@notesnook/common";
 import { logger as dbLogger, ICompressor } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import {
@@ -26,7 +26,6 @@ import {
 } from "@streetwriters/kysely";
 import { Platform } from "react-native";
 import * as Gzip from "react-native-gzip";
-import SettingsService from "../../services/settings";
 import EventSource from "../../utils/sse/even-source-ios";
 import AndroidEventSource from "../../utils/sse/event-source";
 import { FileStorage } from "../filesystem";
@@ -34,11 +33,24 @@ import { getDatabaseKey } from "./encryption";
 import "./logger";
 import { RNSqliteDriver } from "./sqlite.kysely";
 import { Storage } from "./storage";
+import SettingsService from "../../services/settings";
 
 export async function setupDatabase(password?: string) {
   const key = await getDatabaseKey(password);
   if (!key) throw new Error(strings.databaseSetupFailed());
 
+  // const base = `http://192.168.100.92`;
+
+  // database.host({
+  //   API_HOST: `${base}:5264`,
+  //   AUTH_HOST: `${base}:8264`,
+  //   SSE_HOST: `${base}:7264`,
+  //   ISSUES_HOST: `${base}:2624`,
+  //   SUBSCRIPTIONS_HOST: `${base}:9264`,
+  //   MONOGRAPH_HOST: `${base}:6264`,
+  //   NOTESNOOK_HOST: `${base}:8788`
+  // });
+
   database.host({
     API_HOST: "https://api.notesnook.com",
     AUTH_HOST: "https://auth.streetwriters.co",
@@ -46,6 +58,7 @@ export async function setupDatabase(password?: string) {
     SUBSCRIPTIONS_HOST: "https://subscriptions.streetwriters.co",
     ISSUES_HOST: "https://issues.streetwriters.co",
     MONOGRAPH_HOST: "https://monogr.ph",
+    NOTESNOOK_HOST: "https://notesnook.com",
     ...(SettingsService.getProperty("serverUrls") || {})
   });
 
@@ -73,6 +86,10 @@ export async function setupDatabase(password?: string) {
       tempStore: "memory",
       journalMode: Platform.OS === "ios" ? "DELETE" : "WAL",
       password: key
+    },
+    maxNoteVersions: async () => {
+      const limit = await getFeatureLimit(getFeature("maxNoteVersions"));
+      return typeof limit.caption === "number" ? limit.caption : undefined;
     }
   });
 }

apps/mobile/app/common/database/storage.ts

@@ -136,6 +136,12 @@ export const Storage: IStorage = {
   clear(): Promise<void> {
     return DefaultStorage.clear();
   },
+  generateCryptoKeyPair() {
+    throw new Error("Not implemented");
+  },
+  decryptAsymmetric() {
+    throw new Error("Not implemented");
+  },
   getAllKeys(): Promise<string[]> {
     return DefaultStorage.getAllKeys();
   },

apps/mobile/app/common/filesystem/upload.ts

@@ -74,21 +74,6 @@ export async function uploadFile(
       return true;
     }
 
-    const uploadUrlResponse = await fetch(url, {
-      method: "PUT",
-      headers
-    });
-
-    const uploadUrl = uploadUrlResponse.ok
-      ? await uploadUrlResponse.text()
-      : await uploadUrlResponse.json();
-
-    if (typeof uploadUrl !== "string") {
-      throw new Error(
-        uploadUrl.error || "Unable to resolve attachment upload url."
-      );
-    }
-
     DatabaseLogger.info(`Starting upload: ${filename}`);
 
     const uploadRequest = RNFetchBlob.config({
@@ -97,8 +82,9 @@ export async function uploadFile(
     })
       .fetch(
         "PUT",
-        uploadUrl,
+        url,
         {
+          ...headers,
           "content-type": ""
         },
         RNFetchBlob.wrap(filePath)

apps/mobile/app/components/announcements/announcement.js

@@ -25,10 +25,17 @@ import { useSelectionStore } from "../../stores/use-selection-store";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { getContainerBorder } from "../../utils/colors";
 import { DefaultAppStyles } from "../../utils/styles";
+import Heading from "../ui/typography/heading";
+import { AppFontSize } from "../../utils/size";
+import { Button } from "../ui/button";
+import { strings } from "@notesnook/intl";
 
 export const Announcement = ({ color }) => {
   const { colors } = useThemeColors();
-  const announcements = useMessageStore((state) => state.announcements);
+  const [announcements, remove] = useMessageStore((state) => [
+    state.announcements,
+    state.remove
+  ]);
   let announcement = announcements.length > 0 ? announcements[0] : null;
   const selectionMode = useSelectionStore((state) => state.selectionMode);
 
@@ -57,6 +64,38 @@ export const Announcement = ({ color }) => {
             marginTop: DefaultAppStyles.GAP_VERTICAL
           }}
         >
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "center",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.border,
+              paddingBottom: DefaultAppStyles.GAP_VERTICAL_SMALL
+            }}
+          >
+            <Heading color={colors.secondary.heading} size={AppFontSize.xxs}>
+              {strings.announcement()}
+            </Heading>
+
+            <Button
+              type="plain"
+              icon="close"
+              height={null}
+              onPress={() => {
+                remove(announcement.id);
+              }}
+              iconSize={20}
+              fontSize={AppFontSize.xs}
+              style={{
+                paddingVertical: 0,
+                paddingHorizontal: 0,
+                zIndex: 10
+              }}
+            />
+          </View>
+
           {announcement?.body
             .filter((item) => allowedOnPlatform(item.platforms))
             .map((item, index) =>

apps/mobile/app/components/announcements/cta.js

@@ -25,7 +25,6 @@ import { eSendEvent, presentSheet } from "../../services/event-manager";
 import { eCloseAnnouncementDialog } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
 import { sleep } from "../../utils/time";
-import { PricingPlans } from "../premium/pricing-plans";
 import SheetProvider from "../sheet-provider";
 import { Button } from "../ui/button";
 import { allowedOnPlatform, getStyle } from "./functions";
@@ -45,18 +44,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       Linking.openURL(item.data).catch(() => {
         /* empty */
       });
-    } else if (item.type === "promo") {
-      presentSheet({
-        component: (
-          <PricingPlans
-            marginTop={1}
-            promo={{
-              promoCode: item.data,
-              text: item.title
-            }}
-          />
-        )
-      });
     }
   };
   return (
@@ -64,7 +51,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
       style={{
         paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
-        flexDirection: inline ? "row" : "column"
+        flexDirection: inline ? "row" : "column",
+        gap: DefaultAppStyles.GAP_SMALL
       }}
     >
       <SheetProvider context="premium_cta" />
@@ -99,12 +87,10 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 fontSize={AppFontSize.sm}
                 type="plain"
                 onPress={() => onPress(item)}
-                width={null}
-                height={30}
                 style={{
+                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
                   alignSelf: "flex-start",
-                  paddingHorizontal: 0,
-                  marginLeft: 12
+                  paddingHorizontal: 0
                 }}
                 textStyle={{
                   textDecorationLine: "underline"
@@ -119,7 +105,6 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
               <Button
                 key={item.title}
                 title={item.title}
-                fontSize={AppFontSize.md}
                 buttonType={{
                   color: color ? color : colors.primary.accent,
                   text: color
@@ -129,10 +114,8 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                   opacity: 1
                 }}
                 onPress={() => onPress(item)}
-                width={250}
                 style={{
-                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
-                  borderRadius: 100
+                  width: "100%"
                 }}
               />
             ))}
@@ -149,7 +132,7 @@ export const Cta = ({ actions, style = {}, color, inline }) => {
                 height={30}
                 style={{
                   minWidth: "50%",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+                  width: "100%"
                 }}
                 textStyle={{
                   textDecorationLine: "underline"

apps/mobile/app/components/announcements/description.js

@@ -21,16 +21,17 @@ import React from "react";
 import { AppFontSize } from "../../utils/size";
 import Paragraph from "../ui/typography/paragraph";
 import { getStyle } from "./functions";
+import { DefaultAppStyles } from "../../utils/styles";
 
 export const Description = ({ text, style = {}, inline }) => {
   return (
     <Paragraph
       style={{
-        marginHorizontal: 12,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         textAlign: inline ? "left" : style?.textAlign
       }}
-      size={inline ? AppFontSize.sm : AppFontSize.md}
+      size={AppFontSize.sm}
     >
       {text}
     </Paragraph>

apps/mobile/app/components/announcements/index.js

@@ -33,6 +33,7 @@ import {
 import BaseDialog from "../dialog/base-dialog";
 import { allowedOnPlatform, renderItem } from "./functions";
 import { useCallback } from "react";
+import { DefaultAppStyles } from "../../utils/styles";
 
 /**
  * Test announcement
@@ -138,9 +139,9 @@ export const AnnouncementDialog = () => {
           maxHeight: DDS.isTab ? "90%" : "100%",
           borderRadius: DDS.isTab ? 10 : 0,
           overflow: "hidden",
-          marginBottom: DDS.isTab ? 20 : 0,
-          borderTopRightRadius: 10,
-          borderTopLeftRadius: 10
+          paddingVertical: DefaultAppStyles.GAP,
+          borderTopRightRadius: 15,
+          borderTopLeftRadius: 15
         }}
       >
         <FlatList

apps/mobile/app/components/announcements/title.js

@@ -27,10 +27,6 @@ import { getStyle } from "./functions";
 import { DefaultAppStyles } from "../../utils/styles";
 
 export const Title = ({ text, style = {}, inline }) => {
-  const announcements = useMessageStore((state) => state.announcements);
-  let announcement = announcements.length > 0 ? announcements[0] : null;
-  const remove = useMessageStore((state) => state.remove);
-
   return inline ? (
     <View
       style={{
@@ -42,46 +38,21 @@ export const Title = ({ text, style = {}, inline }) => {
     >
       <Heading
         style={{
-          marginHorizontal: DefaultAppStyles.GAP,
+          paddingHorizontal: DefaultAppStyles.GAP,
           marginTop: DefaultAppStyles.GAP_VERTICAL,
           ...getStyle(style),
           textAlign: inline ? "left" : style?.textAlign,
           flexShrink: 1
         }}
-        numberOfLines={1}
         size={inline ? AppFontSize.md : AppFontSize.xl}
       >
         {inline ? text?.toUpperCase() : text}
       </Heading>
-
-      <Button
-        type="plain"
-        icon="close"
-        height={null}
-        onPress={() => {
-          remove(announcement.id);
-        }}
-        hitSlop={{
-          left: 15,
-          top: 10,
-          bottom: 10,
-          right: 0
-        }}
-        iconSize={24}
-        fontSize={AppFontSize.xs}
-        style={{
-          borderRadius: 100,
-          paddingVertical: 0,
-          paddingHorizontal: 0,
-          marginRight: 12,
-          zIndex: 10
-        }}
-      />
     </View>
   ) : (
     <Heading
       style={{
-        marginHorizontal: DefaultAppStyles.GAP,
+        paddingHorizontal: DefaultAppStyles.GAP,
         ...getStyle(style),
         marginTop: style?.marginTop || DefaultAppStyles.GAP_VERTICAL
       }}

apps/mobile/app/components/app-lock/index.tsx

@@ -336,7 +336,6 @@ const AppLocked = () => {
                     borderRadius: 150,
                     marginBottom: 10
                   }}
-                  fontSize={AppFontSize.md}
                 />
               </>
             ) : null}

apps/mobile/app/components/auth/auth-modal.js

@@ -19,9 +19,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useRef, useState } from "react";
-import { Platform, View } from "react-native";
-import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import {
   eSubscribeEvent,
   eUnSubscribeEvent
@@ -31,9 +28,7 @@ import { eCloseLoginDialog, eOpenLoginDialog } from "../../utils/events";
 import { sleep } from "../../utils/time";
 import BaseDialog from "../dialog/base-dialog";
 import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import { hideAuth, initialAuthMode } from "./common";
+import { initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
 import { strings } from "@notesnook/intl";
@@ -51,7 +46,6 @@ const AuthModal = () => {
   const [visible, setVisible] = useState(false);
   const [currentAuthMode, setCurrentAuthMode] = useState(AuthMode.login);
   const actionSheetRef = useRef();
-  const insets = useGlobalSafeAreaInsets();
 
   useEffect(() => {
     eSubscribeEvent(eOpenLoginDialog, open);
@@ -99,81 +93,18 @@ const AuthModal = () => {
       centered={false}
       enableSheetKeyboardHandler
     >
-      <KeyboardAwareScrollView
-        style={{
-          width: "100%"
-        }}
-        enableAutomaticScroll={false}
-        keyboardShouldPersistTaps="handled"
-      >
-        {currentAuthMode !== AuthMode.login ? (
-          <Signup
-            changeMode={(mode) => setCurrentAuthMode(mode)}
-            trial={AuthMode.trialSignup === currentAuthMode}
-            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-          />
-        ) : (
-          <Login
-            welcome={initialAuthMode.current === AuthMode.welcomeSignup}
-            changeMode={(mode) => setCurrentAuthMode(mode)}
-          />
-        )}
-      </KeyboardAwareScrollView>
-
-      <View
-        style={{
-          position: "absolute",
-          paddingTop: Platform.OS === "android" ? 0 : insets.top,
-          top: 0,
-          zIndex: 999,
-          backgroundColor: colors.secondary.background,
-          width: "100%"
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            width: "100%",
-            height: 50,
-            justifyContent:
-              initialAuthMode.current !== AuthMode.welcomeSignup
-                ? "space-between"
-                : "flex-end"
-          }}
-        >
-          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
-            <IconButton
-              name="arrow-left"
-              onPress={() => {
-                hideAuth();
-              }}
-              color={colors.primary.paragraph}
-            />
-          )}
-
-          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
-            <Button
-              title={strings.skip()}
-              onPress={() => {
-                hideAuth();
-              }}
-              iconSize={16}
-              type="plain"
-              iconPosition="right"
-              icon="chevron-right"
-              height={25}
-              iconStyle={{
-                marginTop: 2
-              }}
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
-              }}
-            />
-          )}
-        </View>
-      </View>
+      {currentAuthMode !== AuthMode.login ? (
+        <Signup
+          changeMode={(mode) => setCurrentAuthMode(mode)}
+          trial={AuthMode.trialSignup === currentAuthMode}
+          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+        />
+      ) : (
+        <Login
+          welcome={initialAuthMode.current === AuthMode.welcomeSignup}
+          changeMode={(mode) => setCurrentAuthMode(mode)}
+        />
+      )}
 
       <Toast context="local" />
     </BaseDialog>

apps/mobile/app/components/auth/common.js

@@ -25,13 +25,18 @@ export const AuthMode = {
   login: 0,
   signup: 1,
   welcomeSignup: 2,
-  trialSignup: 3
+  welcomeLogin: 3,
+  trialSignup: 4
 };
 
 export const initialAuthMode = createRef(0);
-export function hideAuth() {
+export function hideAuth(context) {
   eSendEvent(eCloseLoginDialog);
-  if (initialAuthMode.current === AuthMode.welcomeSignup) {
+  if (
+    initialAuthMode.current === AuthMode.welcomeSignup ||
+    initialAuthMode.current === AuthMode.welcomeLogin ||
+    context === "intro"
+  ) {
     Navigation.replace("FluidPanelsView");
   } else {
     Navigation.goBack();

apps/mobile/app/components/auth/header.tsx

@@ -0,0 +1,78 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+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 { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
+import React from "react";
+import { View } from "react-native";
+import { Button } from "../ui/button";
+import { IconButton } from "../ui/icon-button";
+import { hideAuth } from "./common";
+export const AuthHeader = (props: { welcome?: boolean }) => {
+  const { colors } = useThemeColors();
+  const route = useRoute();
+
+  return (
+    <View
+      style={{
+        width: "100%"
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          alignItems: "center",
+          paddingHorizontal: 12,
+          width: "100%",
+          height: 50,
+          justifyContent: !props.welcome ? "space-between" : "flex-end"
+        }}
+      >
+        {props.welcome ? null : (
+          <IconButton
+            name="arrow-left"
+            onPress={() => {
+              hideAuth((route.params as any)?.context);
+            }}
+            color={colors.primary.paragraph}
+          />
+        )}
+
+        {!props.welcome ? null : (
+          <Button
+            title="Skip"
+            onPress={() => {
+              hideAuth();
+            }}
+            iconSize={16}
+            type="plain"
+            iconPosition="right"
+            icon="chevron-right"
+            height={25}
+            iconStyle={{
+              marginTop: 2
+            }}
+            style={{
+              paddingHorizontal: 6
+            }}
+          />
+        )}
+      </View>
+    </View>
+  );
+};

apps/mobile/app/components/auth/index.js

@@ -17,99 +17,29 @@ 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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
-import { View } from "react-native";
-import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
-import Navigation from "../../services/navigation";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { useNavigationFocus } from "../../hooks/use-navigation-focus";
 import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
 import { AuthMode, initialAuthMode } from "./common";
 import { Login } from "./login";
 import { Signup } from "./signup";
-import { useNavigationFocus } from "../../hooks/use-navigation-focus";
-import { DefaultAppStyles } from "../../utils/styles";
-import { useSettingStore } from "../../stores/use-setting-store";
+import { useThemeColors } from "@notesnook/theme";
 
 const Auth = ({ navigation, route }) => {
   const [currentAuthMode, setCurrentAuthMode] = useState(
     route?.params?.mode || AuthMode.login
   );
-  const deviceMode = useSettingStore((state) => state.deviceMode);
   const { colors } = useThemeColors();
-  const insets = useGlobalSafeAreaInsets();
   initialAuthMode.current = route?.params.mode || AuthMode.login;
   useNavigationFocus(navigation, {});
 
   return (
-    <View style={{ flex: 1 }}>
-      <View
-        style={{
-          position: "absolute",
-          paddingTop: insets.top,
-          top: 0,
-          zIndex: 999,
-          backgroundColor:
-            deviceMode === "mobile" ? colors.secondary.background : null,
-          width: "100%"
-        }}
-      >
-        <View
-          style={{
-            flexDirection: "row",
-            alignItems: "center",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            width: "100%",
-            height: 50,
-            justifyContent:
-              initialAuthMode.current !== AuthMode.welcomeSignup
-                ? "space-between"
-                : "flex-end"
-          }}
-        >
-          {initialAuthMode.current === AuthMode.welcomeSignup ? null : (
-            <IconButton
-              name="arrow-left"
-              onPress={() => {
-                if (initialAuthMode.current === 2) {
-                  Navigation.replace("FluidPanelsView");
-                } else {
-                  Navigation.goBack();
-                }
-              }}
-              color={colors.primary.paragraph}
-            />
-          )}
-
-          {initialAuthMode.current !== AuthMode.welcomeSignup ? null : (
-            <Button
-              title={strings.skip()}
-              onPress={() => {
-                if (initialAuthMode.current === 2) {
-                  Navigation.replace("FluidPanelsView");
-                } else {
-                  Navigation.goBack();
-                }
-              }}
-              iconSize={16}
-              type="plain"
-              iconPosition="right"
-              icon="chevron-right"
-              height={25}
-              iconStyle={{
-                marginTop: 2
-              }}
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP_SMALL
-              }}
-            />
-          )}
-        </View>
-      </View>
-
-      {currentAuthMode !== AuthMode.login ? (
+    <SafeAreaView
+      style={{ flex: 1, backgroundColor: colors.primary.background }}
+    >
+      {currentAuthMode !== AuthMode.login &&
+      currentAuthMode !== AuthMode.welcomeLogin ? (
         <Signup
           changeMode={(mode) => setCurrentAuthMode(mode)}
           trial={AuthMode.trialSignup === currentAuthMode}
@@ -123,7 +53,7 @@ const Auth = ({ navigation, route }) => {
       )}
 
       <Toast context="local" />
-    </View>
+    </SafeAreaView>
   );
 };
 

apps/mobile/app/components/auth/login.js

@@ -19,17 +19,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useEffect, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
 import { SheetManager } from "react-native-actions-sheet";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent } from "../../services/event-manager";
+import Navigation from "../../services/navigation";
+import PremiumService from "../../services/premium";
 import Sync from "../../services/sync";
 import { useUserStore } from "../../stores/use-user-store";
 import { eUserLoggedIn } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
-import SheetProvider from "../sheet-provider";
+import { Dialog } from "../dialog";
 import { Progress } from "../sheets/progress";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
@@ -37,9 +42,9 @@ import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { hideAuth } from "./common";
 import { ForgotPassword } from "./forgot-password";
+import { AuthHeader } from "./header";
 import { useLogin } from "./use-login";
-import { DefaultAppStyles } from "../../utils/styles";
-import { Dialog } from "../dialog";
+import SettingsService from "../../services/settings";
 
 const LoginSteps = {
   emailAuth: 1,
@@ -50,6 +55,7 @@ const LoginSteps = {
 export const Login = ({ changeMode }) => {
   const { colors } = useThemeColors();
   const [focused, setFocused] = useState(false);
+  const route = useRoute();
   const {
     step,
     setStep,
@@ -62,15 +68,24 @@ export const Login = ({ changeMode }) => {
     setError,
     login
   } = useLogin(async () => {
-    hideAuth();
     eSendEvent(eUserLoggedIn, true);
     await sleep(500);
-    Progress.present();
+    hideAuth();
     setTimeout(() => {
       if (!useUserStore.getState().syncing) {
         Sync.run("global", false, "full");
       }
     }, 5000);
+
+    if (!PremiumService.get() && !SettingsService.getProperty("serverUrls")) {
+      Navigation.navigate("PayWall", {
+        context: "signup",
+        state: route.params.state,
+        canGoBack: false
+      });
+    } else {
+      Progress.present();
+    }
   });
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
@@ -89,217 +104,227 @@ export const Login = ({ changeMode }) => {
 
   return (
     <>
+      <AuthHeader />
       <ForgotPassword />
       <Dialog context="two_factor_verify" />
-      <View
+      <KeyboardAwareScrollView
         style={{
-          borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
-          zIndex: 10,
-          width: "100%",
-          height: "100%",
-          alignSelf: "center"
+          width: "100%"
         }}
+        contentContainerStyle={{
+          minHeight: "90%"
+        }}
+        nestedScrollEnabled
+        enableAutomaticScroll={false}
+        keyboardShouldPersistTaps="handled"
       >
         <View
           style={{
-            justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            borderBottomColor: colors.primary.border,
-            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: isTablet ? 1 : null,
-            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: isTablet ? 20 : null,
-            marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "70%",
-            minHeight: height * 0.4
-          }}
-        >
-          <View
-            style={{
-              flexDirection: "row"
-            }}
-          >
-            <View
-              style={{
-                width: 100,
-                height: 5,
-                backgroundColor: colors.primary.accent,
-                borderRadius: 2,
-                marginRight: 7
-              }}
-            />
-
-            <View
-              style={{
-                width: 20,
-                height: 5,
-                backgroundColor: colors.secondary.background,
-                borderRadius: 2
-              }}
-            />
-          </View>
-          <Heading
-            style={{
-              marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
-            }}
-            extraBold
-            size={AppFontSize.xxl}
-          >
-            {strings.loginToYourAccount()}
-          </Heading>
-        </View>
-
-        <View
-          style={{
-            width: DDS.isTab
-              ? focused
-                ? "50%"
-                : "49.99%"
-              : focused
-              ? "100%"
-              : "99.9%",
+            borderRadius: DDS.isTab ? 5 : 0,
             backgroundColor: colors.primary.background,
-            alignSelf: "center",
-            paddingHorizontal: DefaultAppStyles.GAP
+            zIndex: 10,
+            width: "100%",
+            height: "100%",
+            alignSelf: "center"
           }}
         >
-          <Input
-            fwdRef={emailInputRef}
-            onChangeText={(value) => {
-              email.current = value;
+          <View
+            style={{
+              justifyContent: "flex-end",
+              paddingHorizontal: DefaultAppStyles.GAP,
+              borderBottomWidth: 0.8,
+              marginBottom: DefaultAppStyles.GAP_VERTICAL,
+              borderBottomColor: colors.primary.border,
+              alignSelf: isTablet ? "center" : undefined,
+              borderWidth: isTablet ? 1 : null,
+              borderColor: isTablet ? colors.primary.border : null,
+              borderRadius: isTablet ? 20 : null,
+              marginTop: isTablet ? 50 : null,
+              width: !isTablet ? null : "50%",
+              minHeight: height * 0.4
             }}
-            testID="input.email"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel="Next"
-            returnKeyType="next"
-            autoComplete="email"
-            validationType="email"
-            autoCorrect={false}
-            autoCapitalize="none"
-            errorMessage={strings.emailInvalid()}
-            placeholder={strings.email()}
-            defaultValue={email.current}
-            editable={step === LoginSteps.emailAuth && !loading}
-            onSubmit={() => {
-              if (step === LoginSteps.emailAuth) {
-                login();
-              } else {
-                passwordInputRef.current?.focus();
-              }
-            }}
-          />
-
-          {step === LoginSteps.passwordAuth && (
-            <>
-              <Input
-                fwdRef={passwordInputRef}
-                onChangeText={(value) => {
-                  password.current = value;
-                }}
-                testID="input.password"
-                returnKeyLabel={strings.done()}
-                returnKeyType="done"
-                secureTextEntry
-                autoComplete="password"
-                autoCapitalize="none"
-                autoCorrect={false}
-                placeholder={strings.password()}
-                marginBottom={0}
-                editable={!loading}
-                defaultValue={password.current}
-                onSubmit={() => login()}
-              />
-              <Button
-                title={strings.forgotPassword()}
+          >
+            <View
+              style={{
+                flexDirection: "row"
+              }}
+            >
+              <View
                 style={{
-                  alignSelf: "flex-end",
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
-                  paddingHorizontal: 0
+                  width: 100,
+                  height: 5,
+                  backgroundColor: colors.primary.accent,
+                  borderRadius: 2,
+                  marginRight: 7
                 }}
-                onPress={() => {
-                  if (loading) return;
-                  SheetManager.show("forgotpassword_sheet", email.current);
-                }}
-                textStyle={{
-                  textDecorationLine: "underline"
-                }}
-                fontSize={AppFontSize.xs}
-                type="plain"
               />
-            </>
-          )}
+
+              <View
+                style={{
+                  width: 20,
+                  height: 5,
+                  backgroundColor: colors.secondary.background,
+                  borderRadius: 2
+                }}
+              />
+            </View>
+            <Heading
+              style={{
+                marginBottom: 25,
+                marginTop: DefaultAppStyles.GAP_VERTICAL
+              }}
+              extraBold
+              size={AppFontSize.xxl}
+            >
+              {strings.loginToYourAccount()}
+            </Heading>
+          </View>
 
           <View
             style={{
-              marginTop: 25
+              width: DDS.isTab
+                ? focused
+                  ? "50%"
+                  : "49.99%"
+                : focused
+                ? "100%"
+                : "99.9%",
+              backgroundColor: colors.primary.background,
+              alignSelf: "center",
+              paddingHorizontal: DDS.isTab ? 0 : DefaultAppStyles.GAP,
+              gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <Button
-              loading={loading}
-              onPress={() => {
-                if (loading) return;
-                login();
+            <Input
+              fwdRef={emailInputRef}
+              onChangeText={(value) => {
+                email.current = value;
               }}
-              style={{
-                width: 250
+              testID="input.email"
+              onErrorCheck={(e) => setError(e)}
+              returnKeyLabel="Next"
+              returnKeyType="next"
+              autoComplete="email"
+              validationType="email"
+              marginBottom={0}
+              autoCorrect={false}
+              autoCapitalize="none"
+              errorMessage={strings.emailInvalid()}
+              placeholder={strings.email()}
+              defaultValue={email.current}
+              editable={step === LoginSteps.emailAuth && !loading}
+              onSubmit={() => {
+                if (step === LoginSteps.emailAuth) {
+                  login();
+                } else {
+                  passwordInputRef.current?.focus();
+                }
               }}
-              type="accent"
-              title={!loading ? strings.continue() : null}
             />
 
             {step === LoginSteps.passwordAuth && (
-              <Button
-                title={strings.cancelLogin()}
-                style={{
-                  alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  width: 250
-                }}
-                onPress={() => {
-                  if (loading) return;
-                  setStep(LoginSteps.emailAuth);
-                  setLoading(false);
-                }}
-                fontSize={AppFontSize.xs}
-                type="secondaryAccented"
-              />
+              <>
+                <Input
+                  fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  testID="input.password"
+                  returnKeyLabel={strings.done()}
+                  returnKeyType="done"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  placeholder={strings.password()}
+                  marginBottom={0}
+                  editable={!loading}
+                  defaultValue={password.current}
+                  onSubmit={() => login()}
+                />
+                <Button
+                  title={strings.forgotPassword()}
+                  style={{
+                    alignSelf: "flex-end",
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL,
+                    paddingHorizontal: 0
+                  }}
+                  onPress={() => {
+                    if (loading) return;
+                    SheetManager.show("forgotpassword_sheet", email.current);
+                  }}
+                  textStyle={{
+                    textDecorationLine: "underline"
+                  }}
+                  fontSize={AppFontSize.xs}
+                  type="plain"
+                />
+              </>
             )}
 
-            {!loading ? (
-              <TouchableOpacity
+            <View>
+              <Button
+                loading={loading}
                 onPress={() => {
                   if (loading) return;
-                  changeMode(1);
+                  login();
                 }}
-                activeOpacity={0.8}
                 style={{
-                  alignSelf: "center",
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  width: "100%"
                 }}
-              >
-                <Paragraph
-                  size={AppFontSize.xs}
-                  color={colors.secondary.paragraph}
+                type="accent"
+                title={!loading ? strings.continue() : null}
+                fontSize={AppFontSize.sm}
+              />
+
+              {step === LoginSteps.passwordAuth && (
+                <Button
+                  title={strings.cancelLogin()}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    width: "100%"
+                  }}
+                  onPress={() => {
+                    if (loading) return;
+                    setStep(LoginSteps.emailAuth);
+                    setLoading(false);
+                  }}
+                  type="secondaryAccented"
+                />
+              )}
+
+              {!loading ? (
+                <TouchableOpacity
+                  onPress={() => {
+                    if (loading) return;
+                    changeMode(1);
+                  }}
+                  activeOpacity={0.8}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: DefaultAppStyles.GAP_VERTICAL,
+                    paddingVertical: DefaultAppStyles.GAP_VERTICAL
+                  }}
                 >
-                  {strings.dontHaveAccount()}{" "}
                   <Paragraph
                     size={AppFontSize.xs}
-                    style={{ color: colors.primary.accent }}
+                    color={colors.secondary.paragraph}
                   >
-                    {strings.signUp()}
+                    {strings.dontHaveAccount()}{" "}
+                    <Paragraph
+                      size={AppFontSize.xs}
+                      style={{ color: colors.primary.accent }}
+                    >
+                      {strings.signUp()}
+                    </Paragraph>
                   </Paragraph>
-                </Paragraph>
-              </TouchableOpacity>
-            ) : null}
+                </TouchableOpacity>
+              ) : null}
+            </View>
           </View>
         </View>
-      </View>
+      </KeyboardAwareScrollView>
     </>
   );
 };

apps/mobile/app/components/auth/signup-context.ts

@@ -16,16 +16,12 @@ GNU General Public License for more details.
 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 React, { useContext } from "react";
 
-const path = require("path");
-module.exports = {
-  entry: ["./dist/index.global.js"],
-  mode: "production",
-  output: {
-    filename: "clipper.bundle.js",
-    path: path.resolve(
-      __dirname,
-      "../../apps/mobile/native/ios/extension.bundle"
-    )
-  }
-};
+export const SignupContext = React.createContext<{
+  signup?: () => Promise<boolean>;
+}>({
+  signup: undefined
+});
+
+export const useSignupContext = () => useContext(SignupContext);

apps/mobile/app/components/auth/signup.js

@@ -19,26 +19,36 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { useRoute } from "@react-navigation/native";
 import React, { useRef, useState } from "react";
 import { TouchableOpacity, View, useWindowDimensions } from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { ToastManager } from "../../services/event-manager";
 import { clearMessage, setEmailVerifyMessage } from "../../services/message";
-import PremiumService from "../../services/premium";
-import SettingsService from "../../services/settings";
+import Navigation from "../../services/navigation";
 import { useUserStore } from "../../stores/use-user-store";
 import { openLinkInBrowser } from "../../utils/functions";
 import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
+import { DefaultAppStyles } from "../../utils/styles";
+import { Loading } from "../loading";
 import { Button } from "../ui/button";
 import Input from "../ui/input";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
-import { hideAuth } from "./common";
-import { DefaultAppStyles } from "../../utils/styles";
+import { AuthHeader } from "./header";
+import { SignupContext } from "./signup-context";
+import SettingsService from "../../services/settings";
 
-export const Signup = ({ changeMode, trial }) => {
+const SignupSteps = {
+  signup: 0,
+  selectPlan: 1,
+  createAccount: 2
+};
+
+export const Signup = ({ changeMode, welcome }) => {
+  const [currentStep, setCurrentStep] = useState(SignupSteps.signup);
   const { colors } = useThemeColors();
   const email = useRef();
   const emailInputRef = useRef();
@@ -52,6 +62,8 @@ export const Signup = ({ changeMode, trial }) => {
   const setLastSynced = useUserStore((state) => state.setLastSynced);
   const { width, height } = useWindowDimensions();
   const isTablet = width > 600;
+  const route = useRoute();
+
   const validateInfo = () => {
     if (!password.current || !email.current || !confirmPassword.current) {
       ToastManager.show({
@@ -70,23 +82,26 @@ export const Signup = ({ changeMode, trial }) => {
   const signup = async () => {
     if (!validateInfo() || error) return;
     if (loading) return;
+
     setLoading(true);
     try {
+      setCurrentStep(SignupSteps.createAccount);
       await db.user.signup(email.current.toLowerCase(), password.current);
       let user = await db.user.getUser();
       setUser(user);
       setLastSynced(await db.lastSynced());
       clearMessage();
       setEmailVerifyMessage();
-      hideAuth();
-      SettingsService.setProperty("encryptedBackup", true);
-      await sleep(300);
-      if (trial) {
-        PremiumService.sheet(null, null, true);
-      } else {
-        PremiumService.showVerifyEmailDialog();
+      if (!SettingsService.getProperty("serverUrls")) {
+        Navigation.navigate("PayWall", {
+          canGoBack: false,
+          state: route.params.state,
+          context: "signup"
+        });
       }
+      return true;
     } catch (e) {
+      setCurrentStep(SignupSteps.signup);
       setLoading(false);
       ToastManager.show({
         heading: strings.signupFailed(),
@@ -94,214 +109,264 @@ export const Signup = ({ changeMode, trial }) => {
         type: "error",
         context: "local"
       });
+      return false;
     }
   };
 
   return (
-    <>
-      <View
-        style={{
-          borderRadius: DDS.isTab ? 5 : 0,
-          backgroundColor: colors.primary.background,
-          zIndex: 10,
-          width: "100%",
-          height: "100%",
-          alignSelf: "center"
-        }}
-      >
-        <View
-          style={{
-            justifyContent: "flex-end",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 0.8,
-            marginBottom: DefaultAppStyles.GAP_VERTICAL,
-            borderBottomColor: colors.primary.border,
-            alignSelf: isTablet ? "center" : undefined,
-            borderWidth: isTablet ? 1 : null,
-            borderColor: isTablet ? colors.primary.border : null,
-            borderRadius: isTablet ? 20 : null,
-            marginTop: isTablet ? 50 : null,
-            width: !isTablet ? null : "70%",
-            minHeight: height * 0.4
-          }}
-        >
-          <View
+    <SignupContext.Provider
+      value={{
+        signup: signup
+      }}
+    >
+      {currentStep === SignupSteps.signup ? (
+        <>
+          <AuthHeader welcome={welcome} />
+          <KeyboardAwareScrollView
             style={{
-              flexDirection: "row"
+              width: "100%"
             }}
+            contentContainerStyle={{
+              minHeight: "90%"
+            }}
+            nestedScrollEnabled
+            enableAutomaticScroll={false}
+            keyboardShouldPersistTaps="handled"
           >
             <View
               style={{
-                width: 100,
-                height: 5,
-                backgroundColor: colors.primary.accent,
-                borderRadius: 2,
-                marginRight: 7
+                borderRadius: DDS.isTab ? 5 : 0,
+                backgroundColor: colors.primary.background,
+                zIndex: 10,
+                width: "100%",
+                alignSelf: "center",
+                height: "100%"
               }}
-            />
-
-            <View
-              style={{
-                width: 20,
-                height: 5,
-                backgroundColor: colors.secondary.background,
-                borderRadius: 2
-              }}
-            />
-          </View>
-          <Heading
-            extraBold
-            style={{
-              marginBottom: 25,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
-            }}
-            size={AppFontSize.xxl}
-          >
-            {strings.createYourAccount()}
-          </Heading>
-        </View>
-
-        <View
-          style={{
-            width: DDS.isTab ? "50%" : "100%",
-            paddingHorizontal: DefaultAppStyles.GAP,
-            backgroundColor: colors.primary.background,
-            alignSelf: "center"
-          }}
-        >
-          <Input
-            fwdRef={emailInputRef}
-            onChangeText={(value) => {
-              email.current = value;
-            }}
-            testID="input.email"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.next()}
-            returnKeyType="next"
-            autoComplete="email"
-            validationType="email"
-            autoCorrect={false}
-            autoCapitalize="none"
-            errorMessage={strings.email()}
-            placeholder={strings.email()}
-            onSubmit={() => {
-              passwordInputRef.current?.focus();
-            }}
-          />
-
-          <Input
-            fwdRef={passwordInputRef}
-            onChangeText={(value) => {
-              password.current = value;
-            }}
-            testID="input.password"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.next()}
-            returnKeyType="next"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            validationType="password"
-            autoCorrect={false}
-            placeholder={strings.password()}
-            onSubmit={() => {
-              confirmPasswordInputRef.current?.focus();
-            }}
-          />
-
-          <Input
-            fwdRef={confirmPasswordInputRef}
-            onChangeText={(value) => {
-              confirmPassword.current = value;
-            }}
-            testID="input.confirmPassword"
-            onErrorCheck={(e) => setError(e)}
-            returnKeyLabel={strings.done()}
-            returnKeyType="done"
-            secureTextEntry
-            autoComplete="password"
-            autoCapitalize="none"
-            autoCorrect={false}
-            validationType="confirmPassword"
-            customValidator={() => password.current}
-            placeholder={strings.confirmPassword()}
-            marginBottom={12}
-            onSubmit={signup}
-          />
-
-          <Paragraph
-            style={{
-              marginBottom: 25
-            }}
-            size={AppFontSize.xxs}
-            color={colors.secondary.paragraph}
-          >
-            {strings.signupAgreement[0]()}
-            <Paragraph
-              size={AppFontSize.xxs}
-              onPress={() => {
-                openLinkInBrowser("https://notesnook.com/tos", colors);
-              }}
-              style={{
-                textDecorationLine: "underline"
-              }}
-              color={colors.primary.accent}
             >
-              {" "}
-              {strings.signupAgreement[1]()}
-            </Paragraph>{" "}
-            {strings.signupAgreement[2]()}
-            <Paragraph
-              size={AppFontSize.xxs}
-              onPress={() => {
-                openLinkInBrowser("https://notesnook.com/privacy", colors);
-              }}
-              style={{
-                textDecorationLine: "underline"
-              }}
-              color={colors.primary.accent}
-            >
-              {" "}
-              {strings.signupAgreement[3]()}
-            </Paragraph>{" "}
-            {strings.signupAgreement[4]()}
-          </Paragraph>
-
-          <Button
-            title={!loading ? strings.continue() : null}
-            type="accent"
-            loading={loading}
-            onPress={signup}
-            style={{
-              width: 250
-            }}
-          />
-
-          <TouchableOpacity
-            onPress={() => {
-              if (loading) return;
-              changeMode(0);
-            }}
-            activeOpacity={0.8}
-            style={{
-              alignSelf: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs} color={colors.secondary.paragraph}>
-              {strings.alreadyHaveAccount()}{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                style={{ color: colors.primary.accent }}
+              <View
+                style={{
+                  justifyContent: "flex-end",
+                  paddingHorizontal: 16,
+                  marginBottom: DefaultAppStyles.GAP_VERTICAL,
+                  borderBottomWidth: 0.8,
+                  borderBottomColor: colors.primary.border,
+                  alignSelf: isTablet ? "center" : undefined,
+                  borderWidth: isTablet ? 1 : null,
+                  borderColor: isTablet ? colors.primary.border : null,
+                  borderRadius: isTablet ? 20 : null,
+                  marginTop: isTablet ? 50 : null,
+                  width: !isTablet ? null : "50%",
+                  minHeight: height * 0.25
+                }}
               >
-                {strings.login()}
-              </Paragraph>
-            </Paragraph>
-          </TouchableOpacity>
-        </View>
-      </View>
-    </>
+                <View
+                  style={{
+                    flexDirection: "row"
+                  }}
+                >
+                  <View
+                    style={{
+                      width: 100,
+                      height: 5,
+                      backgroundColor: colors.primary.accent,
+                      borderRadius: 2,
+                      marginRight: 7
+                    }}
+                  />
+
+                  <View
+                    style={{
+                      width: 20,
+                      height: 5,
+                      backgroundColor: colors.secondary.background,
+                      borderRadius: 2
+                    }}
+                  />
+                </View>
+                <Heading
+                  extraBold
+                  style={{
+                    marginBottom: 25,
+                    marginTop: 10
+                  }}
+                  size={AppFontSize.xxl}
+                >
+                  {strings.createAccount()}
+                </Heading>
+              </View>
+
+              <View
+                style={{
+                  width: DDS.isTab ? "50%" : "100%",
+                  paddingHorizontal: DDS.isTab ? 0 : 16,
+                  backgroundColor: colors.primary.background,
+                  flexGrow: 1,
+                  alignSelf: "center"
+                }}
+              >
+                <Input
+                  fwdRef={emailInputRef}
+                  onChangeText={(value) => {
+                    email.current = value;
+                  }}
+                  defaultValue={email.current}
+                  testID="input.email"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Next"
+                  returnKeyType="next"
+                  autoComplete="email"
+                  validationType="email"
+                  autoCorrect={false}
+                  autoCapitalize="none"
+                  errorMessage={strings.emailInvalid()}
+                  placeholder={strings.email()}
+                  blurOnSubmit={false}
+                  onSubmit={() => {
+                    if (!email.current) return;
+                    passwordInputRef.current?.focus();
+                  }}
+                />
+
+                <Input
+                  fwdRef={passwordInputRef}
+                  onChangeText={(value) => {
+                    password.current = value;
+                  }}
+                  defaultValue={password.current}
+                  testID="input.password"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Next"
+                  returnKeyType="next"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  blurOnSubmit={false}
+                  validationType="password"
+                  autoCorrect={false}
+                  placeholder={strings.password()}
+                  onSubmit={() => {
+                    if (!password.current) return;
+                    confirmPasswordInputRef.current?.focus();
+                  }}
+                />
+
+                <Input
+                  fwdRef={confirmPasswordInputRef}
+                  onChangeText={(value) => {
+                    confirmPassword.current = value;
+                  }}
+                  defaultValue={confirmPassword.current}
+                  testID="input.confirmPassword"
+                  onErrorCheck={(e) => setError(e)}
+                  returnKeyLabel="Signup"
+                  returnKeyType="done"
+                  secureTextEntry
+                  autoComplete="password"
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                  blurOnSubmit={false}
+                  validationType="confirmPassword"
+                  customValidator={() => password.current}
+                  placeholder={strings.confirmPassword()}
+                  marginBottom={12}
+                  onSubmit={signup}
+                />
+
+                <Button
+                  title={!loading ? "Continue" : null}
+                  type="accent"
+                  loading={loading}
+                  onPress={() => {
+                    signup();
+                  }}
+                  width="100%"
+                />
+
+                <TouchableOpacity
+                  onPress={() => {
+                    if (loading) return;
+                    changeMode(0);
+                  }}
+                  activeOpacity={0.8}
+                  style={{
+                    alignSelf: "center",
+                    marginTop: 12,
+                    paddingVertical: 12
+                  }}
+                >
+                  <Paragraph
+                    size={AppFontSize.xs + 1}
+                    color={colors.secondary.paragraph}
+                  >
+                    {strings.alreadyHaveAccount()}{" "}
+                    <Paragraph
+                      size={AppFontSize.xs + 1}
+                      style={{ color: colors.primary.accent }}
+                    >
+                      {strings.login()}
+                    </Paragraph>
+                  </Paragraph>
+                </TouchableOpacity>
+              </View>
+
+              <View
+                style={{
+                  paddingHorizontal: DefaultAppStyles.GAP
+                }}
+              >
+                <Paragraph
+                  style={{
+                    marginBottom: 25,
+                    textAlign: "center"
+                  }}
+                  size={AppFontSize.xxs}
+                  color={colors.secondary.paragraph}
+                >
+                  {strings.signupAgreement[0]()}
+                  <Paragraph
+                    size={AppFontSize.xxs}
+                    onPress={() => {
+                      openLinkInBrowser("https://notesnook.com/tos", colors);
+                    }}
+                    style={{
+                      textDecorationLine: "underline"
+                    }}
+                    color={colors.primary.accent}
+                  >
+                    {" "}
+                    {strings.signupAgreement[1]()}
+                  </Paragraph>{" "}
+                  {strings.signupAgreement[2]()}
+                  <Paragraph
+                    size={AppFontSize.xxs}
+                    onPress={() => {
+                      openLinkInBrowser(
+                        "https://notesnook.com/privacy",
+                        colors
+                      );
+                    }}
+                    style={{
+                      textDecorationLine: "underline"
+                    }}
+                    color={colors.primary.accent}
+                  >
+                    {" "}
+                    {strings.signupAgreement[3]()}
+                  </Paragraph>{" "}
+                  {strings.signupAgreement[4]()}
+                </Paragraph>
+              </View>
+            </View>
+          </KeyboardAwareScrollView>
+        </>
+      ) : (
+        <>
+          <Loading
+            title={"Setting up your account..."}
+            description="Your account is almost ready, please wait..."
+          />
+        </>
+      )}
+    </SignupContext.Provider>
   );
 };

apps/mobile/app/components/auth/two-factor.js

@@ -136,6 +136,11 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
         backgroundColor: colors.primary.background,
         paddingTop: 60
       }}
+      onLayout={() => {
+        setTimeout(() => {
+          inputRef.current?.focus();
+        }, 500);
+      }}
     >
       <View
         style={{
@@ -206,13 +211,15 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
                 code.current = value;
                 //onNext();
               }}
+              cursorColor={colors.selected.accent}
+              selectionHandleColor={colors.selected.accent}
+              selectionColor={colors.selected.accent}
               onSubmitEditing={onNext}
-              caretHidden
               height={60}
               inputStyle={{
                 fontSize: AppFontSize.lg,
                 textAlign: "center",
-                letterSpacing: 10,
+                letterSpacing: 7,
                 width: 250
               }}
               keyboardType={
@@ -220,8 +227,6 @@ const TwoFactorVerification = ({ onMfaLogin, mfaInfo, onCancel }) => {
               }
               enablesReturnKeyAutomatically
               containerStyle={{
-                borderWidth: 0,
-                width: undefined,
                 minWidth: "50%"
               }}
               wrapperStyle={{

apps/mobile/app/components/auth/use-login.ts

@@ -17,16 +17,17 @@ 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 { strings } from "@notesnook/intl";
 import { useRef, useState } from "react";
+import { TextInput } from "react-native";
 import { db } from "../../common/database";
-import { eSendEvent, ToastManager } from "../../services/event-manager";
+import { ToastManager, eSendEvent } from "../../services/event-manager";
 import { clearMessage } from "../../services/message";
 import PremiumService from "../../services/premium";
 import SettingsService from "../../services/settings";
 import { useUserStore } from "../../stores/use-user-store";
 import { eCloseSimpleDialog } from "../../utils/events";
 import TwoFactorVerification from "./two-factor";
-import { strings } from "@notesnook/intl";
 
 export const LoginSteps = {
   emailAuth: 1,
@@ -34,15 +35,18 @@ export const LoginSteps = {
   passwordAuth: 3
 };
 
-export const useLogin = (onFinishLogin, sessionExpired = false) => {
+export const useLogin = (
+  onFinishLogin?: () => void,
+  sessionExpired = false
+) => {
   const [error, setError] = useState(false);
   const [loading, setLoading] = useState(false);
   const setUser = useUserStore((state) => state.setUser);
   const [step, setStep] = useState(LoginSteps.emailAuth);
-  const email = useRef();
-  const password = useRef();
-  const emailInputRef = useRef();
-  const passwordInputRef = useRef();
+  const email = useRef<string>();
+  const password = useRef<string>();
+  const emailInputRef = useRef<TextInput>(null);
+  const passwordInputRef = useRef<TextInput>(null);
 
   const validateInfo = () => {
     if (
@@ -69,11 +73,15 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       setLoading(true);
       switch (step) {
         case LoginSteps.emailAuth: {
+          if (!email.current) {
+            setLoading(false);
+            return;
+          }
           const mfaInfo = await db.user.authenticateEmail(email.current);
 
           if (mfaInfo) {
             TwoFactorVerification.present(
-              async (mfa, callback) => {
+              async (mfa: any, callback: (success: boolean) => void) => {
                 try {
                   const success = await db.user.authenticateMultiFactorCode(
                     mfa.code,
@@ -91,7 +99,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
                   callback && callback(false);
                 } catch (e) {
                   callback && callback(false);
-                  if (e.message === "invalid_grant") {
+                  if ((e as Error).message === "invalid_grant") {
                     eSendEvent(eCloseSimpleDialog, "two_factor_verify");
                     setLoading(false);
                     setStep(LoginSteps.emailAuth);
@@ -111,10 +119,14 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
           break;
         }
         case LoginSteps.passwordAuth: {
+          if (!email.current || !password.current) {
+            setLoading(false);
+            return;
+          }
           await db.user.authenticatePassword(
             email.current,
             password.current,
-            null,
+            undefined,
             sessionExpired
           );
           finishLogin();
@@ -123,11 +135,11 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
       }
       setLoading(false);
     } catch (e) {
-      finishWithError(e);
+      finishWithError(e as Error);
     }
   };
 
-  const finishWithError = async (e) => {
+  const finishWithError = async (e: Error) => {
     if (e.message === "invalid_grant") setStep(LoginSteps.emailAuth);
     setLoading(false);
     ToastManager.show({
@@ -146,7 +158,7 @@ export const useLogin = (onFinishLogin, sessionExpired = false) => {
     clearMessage();
     ToastManager.show({
       heading: strings.loginSuccess(),
-      message: strings.loginSuccessDesc(),
+      message: strings.loginSuccessDesc(user.email),
       type: "success",
       context: "global"
     });

apps/mobile/app/components/dialog-provider/index.js

@@ -31,37 +31,39 @@ import ResultDialog from "../dialogs/result";
 import { VaultDialog } from "../dialogs/vault";
 import ImagePreview from "../image-preview";
 import MergeConflicts from "../merge-conflicts";
-import PremiumDialog from "../premium";
-import { Expiring } from "../premium/expiring";
 import SheetProvider from "../sheet-provider";
 import RateAppSheet from "../sheets/rate-app";
 import RecoveryKeySheet from "../sheets/recovery-key";
 import Progress from "../dialogs/progress";
+import { useSettingStore } from "../../stores/use-setting-store";
 
 const DialogProvider = () => {
   const { colors } = useThemeColors();
+  const isAppLoading = useSettingStore((state) => state.isAppLoading);
 
   return (
     <>
       <AppLockPassword />
       <LoadingDialog />
-      <Dialog context="global" />
-      <PremiumDialog colors={colors} />
-      <AuthModal colors={colors} />
-      <MergeConflicts />
-      <RecoveryKeySheet colors={colors} />
       <SheetProvider />
       <SheetProvider context="sync_progress" />
-      <ResultDialog />
-      <VaultDialog colors={colors} />
-      <RateAppSheet />
-      <ImagePreview />
-      <Expiring />
-      <AnnouncementDialog />
-      <SessionExpired />
-      <PDFPreview />
-      <JumpToSectionDialog />
+      <Dialog context="global" />
       <Progress />
+
+      {isAppLoading ? null : (
+        <>
+          <MergeConflicts />
+          <RecoveryKeySheet colors={colors} />
+          <ResultDialog />
+          <VaultDialog colors={colors} />
+          <RateAppSheet />
+          <ImagePreview />
+          <AnnouncementDialog />
+          <SessionExpired />
+          <PDFPreview />
+          <JumpToSectionDialog />
+        </>
+      )}
     </>
   );
 };

apps/mobile/app/components/dialogs/attach-image-dialog/index.tsx

@@ -16,6 +16,9 @@ GNU General Public License for more details.
 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 { useIsFeatureAvailable } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import {
   Image,
@@ -25,15 +28,13 @@ import {
   View
 } from "react-native";
 import { Image as ImageType } from "react-native-image-crop-picker";
-import { useThemeColors } from "@notesnook/theme";
-import { presentSheet } from "../../../services/event-manager";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { presentSheet, ToastManager } from "../../../services/event-manager";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Notice } from "../../ui/notice";
 import Paragraph from "../../ui/typography/paragraph";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 export default function AttachImage({
   response,
@@ -44,6 +45,7 @@ export default function AttachImage({
   onAttach: ({ compress }: { compress: boolean }) => void;
   close: ((ctx?: string | undefined) => void) | undefined;
 }) {
+  const fullQualityImagesResult = useIsFeatureAvailable("fullQualityImages");
   const { colors } = useThemeColors();
   const [compress, setCompress] = useState(true);
 
@@ -104,21 +106,42 @@ export default function AttachImage({
           alignSelf: "center",
           marginBottom: DefaultAppStyles.GAP_VERTICAL,
           alignItems: "center",
-          width: "100%"
+          width: "100%",
+          opacity: fullQualityImagesResult?.isAllowed ? 1 : 0.5
         }}
         onPress={() => {
+          if (!fullQualityImagesResult?.isAllowed) {
+            ToastManager.show({
+              message: fullQualityImagesResult?.error,
+              type: "info",
+              context: "local"
+            });
+            return;
+          }
           setCompress(!compress);
         }}
       >
         <IconButton
           size={AppFontSize.lg}
           name={compress ? "checkbox-marked" : "checkbox-blank-outline"}
-          color={compress ? colors.primary.accent : colors.primary.icon}
+          color={
+            compress && fullQualityImagesResult?.isAllowed
+              ? colors.primary.accent
+              : colors.primary.icon
+          }
           style={{
             width: 25,
             height: 25
           }}
           onPress={() => {
+            if (!fullQualityImagesResult?.isAllowed) {
+              ToastManager.show({
+                message: fullQualityImagesResult?.error,
+                type: "info",
+                context: "local"
+              });
+              return;
+            }
             setCompress(!compress);
           }}
         />

apps/mobile/app/components/dialogs/pdf-preview/index.js

@@ -244,7 +244,7 @@ const PDFPreview = () => {
                       textAlign: "center",
                       marginRight: 4,
                       borderRadius: 3,
-                      fontFamily: "OpenSans-Regular"
+                      fontFamily: "Inter-Regular"
                     }}
                     selectTextOnFocus
                     keyboardType="decimal-pad"

apps/mobile/app/components/dialogs/result/index.js

@@ -135,7 +135,6 @@ const ResultDialog = () => {
               paddingHorizontal: DefaultAppStyles.GAP
             }}
             onPress={close}
-            fontSize={AppFontSize.md + 2}
           />
         </View>
       </View>

apps/mobile/app/components/intro/index.tsx

@@ -20,21 +20,22 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
-import { Linking, ScrollView, useWindowDimensions, View } from "react-native";
+import { Linking, useWindowDimensions, View } from "react-native";
 import { SwiperFlatList } from "react-native-swiper-flatlist";
 import useGlobalSafeAreaInsets from "../../hooks/use-global-safe-area-insets";
 import Navigation from "../../services/navigation";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
+import { AuthMode } from "../auth/common";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import SettingsService from "../../services/settings";
-import { AuthMode } from "../auth/common";
-import { DefaultAppStyles } from "../../utils/styles";
+import { SafeAreaView } from "react-native-safe-area-context";
 
 const Intro = () => {
   const { colors } = useThemeColors();
-  const { width, height } = useWindowDimensions();
+  const { width } = useWindowDimensions();
   const insets = useGlobalSafeAreaInsets();
   const isTablet = width > 600;
 
@@ -115,75 +116,102 @@ const Intro = () => {
   );
 
   return (
-    <ScrollView
-      testID="notesnook.splashscreen"
+    <SafeAreaView
       style={{
-        width: "100%",
+        flex: 1,
+        height: "100%",
         backgroundColor: colors.primary.background
       }}
     >
       <View
-        style={[
-          {
-            width: "100%",
-            backgroundColor: colors.secondary.background,
-            borderBottomWidth: 1,
-            borderBottomColor: colors.primary.border,
-            paddingTop: insets.top + 10,
-            paddingBottom: insets.top + 10,
-            minHeight: height * 0.7 - (insets.top + insets.bottom)
-          },
-          isTablet && {
-            width: width / 2,
-            alignSelf: "center",
-            borderWidth: 1,
-            borderColor: colors.primary.border,
-            borderRadius: 20,
-            marginTop: 50
-          }
-        ]}
+        testID="notesnook.splashscreen"
+        style={{
+          flex: 1
+        }}
       >
-        <SwiperFlatList
-          autoplay
-          autoplayDelay={10}
-          autoplayLoop={true}
-          index={0}
-          useReactNativeGestureHandler={true}
-          showPagination
-          data={strings.introData}
-          paginationActiveColor={colors.primary.accent}
-          paginationStyleItem={{
-            width: 10,
-            height: 5,
-            marginRight: 4,
-            marginLeft: 4
-          }}
-          paginationDefaultColor={colors.primary.border}
-          renderItem={renderItem}
-        />
+        <View
+          style={[
+            {
+              width: "100%",
+              borderBottomWidth: 1,
+              borderBottomColor: colors.primary.border,
+              paddingTop: insets.top + 10,
+              paddingBottom: insets.top + 10,
+              flexGrow: 1
+            },
+            isTablet && {
+              width: width / 2,
+              alignSelf: "center",
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              borderRadius: 20,
+              marginTop: 50
+            }
+          ]}
+        >
+          <SwiperFlatList
+            autoplay
+            autoplayDelay={10}
+            autoplayLoop={true}
+            index={0}
+            useReactNativeGestureHandler={true}
+            showPagination
+            data={strings.introData}
+            paginationActiveColor={colors.primary.accent}
+            paginationStyleItem={{
+              width: 10,
+              height: 5,
+              marginRight: 4,
+              marginLeft: 4
+            }}
+            paginationDefaultColor={colors.primary.border}
+            renderItem={renderItem}
+          />
+        </View>
       </View>
-
       <View
         style={{
-          width: "100%",
+          width: isTablet ? "50%" : "100%",
           justifyContent: "center",
-          minHeight: height * 0.3
+          gap: DefaultAppStyles.GAP_VERTICAL,
+          paddingHorizontal: isTablet ? 0 : DefaultAppStyles.GAP,
+          paddingVertical: DefaultAppStyles.GAP_VERTICAL,
+          flexShrink: 1,
+          alignSelf: "center"
         }}
       >
         <Button
-          width={250}
+          style={{
+            width: "100%"
+          }}
           onPress={async () => {
             SettingsService.set({ introCompleted: true });
             Navigation.push("Auth", {
               mode: AuthMode.welcomeSignup
             });
           }}
-          fontSize={AppFontSize.md}
           type="accent"
           title={strings.getStarted()}
         />
+
+        <Button
+          style={{
+            width: "100%"
+          }}
+          title={strings.iAlreadyHaveAnAccount()}
+          type="secondary"
+          onPress={() => {
+            SettingsService.set({
+              introCompleted: true
+            });
+            Navigation.push("Auth", {
+              mode: AuthMode.welcomeLogin,
+              context: "intro"
+            });
+          }}
+        />
       </View>
-    </ScrollView>
+    </SafeAreaView>
   );
 };
 

apps/mobile/app/components/list-items/headers/header.tsx

@@ -44,9 +44,8 @@ export const Header = React.memo(
   }: ListHeaderProps) => {
     const { colors } = useThemeColors();
     const announcements = useMessageStore((state) => state.announcements);
-    const selectionMode = useSelectionStore((state) => state.selectionMode);
 
-    return selectionMode ? null : (
+    return (
       <>
         {announcements.length !== 0 && !noAnnouncement ? (
           <Announcement color={color || colors.primary.accent} />

apps/mobile/app/components/list-items/notebook/wrapper.tsx

@@ -41,7 +41,7 @@ export const openNotebook = (item: Notebook | BaseTrashItem<Notebook>) => {
       positiveText: strings.restore(),
       negativeText: strings.delete(),
       positivePress: async () => {
-        if ((await db.trash.restore(item.id)) === false) return;
+        await db.trash.restore(item.id);
         Navigation.queueRoutesForUpdate();
         useSelectionStore.getState().setSelectionMode(undefined);
         ToastManager.show({

apps/mobile/app/components/list/reorderable-list.tsx

@@ -30,6 +30,10 @@ import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
 import { useSideBarDraggingStore } from "../side-menu/dragging-store";
 import { IconButton } from "../ui/icon-button";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
+import { strings } from "@notesnook/intl";
+import { ToastManager } from "../../services/event-manager";
 
 interface ReorderableListProps<T extends { id: string }>
   extends Omit<DraxListProps<T>, "renderItem" | "data" | "renderItemContent"> {
@@ -59,6 +63,9 @@ function ReorderableList<T extends { id: string }>({
   const [hiddenItemsState, setHiddenItems] = useState(hiddenItems);
   const dragging = useSideBarDraggingStore((state) => state.dragging);
   const listRef = useRef<FlatList | null>(null);
+  const customizableSidebarFeature = useIsFeatureAvailable(
+    "customizableSidebar"
+  );
 
   if (dragging) {
     fluidTabsRef.current?.lock();
@@ -125,6 +132,7 @@ function ReorderableList<T extends { id: string }>({
   );
 
   function getOrderedItems() {
+    if (!customizableSidebarFeature?.isAllowed) return data;
     const items: T[] = [];
     itemOrderState.forEach((id) => {
       const item = data.find((i) => i.id === id);
@@ -158,15 +166,39 @@ function ReorderableList<T extends { id: string }>({
           }
         }}
         longPressDelay={500}
-        onItemDragStart={() =>
+        onItemDragStart={async () => {
+          if (
+            customizableSidebarFeature &&
+            !customizableSidebarFeature?.isAllowed
+          ) {
+            ToastManager.show({
+              message: customizableSidebarFeature?.error,
+              type: "info",
+              actionText: strings.upgrade(),
+              func: () => PaywallSheet.present(customizableSidebarFeature)
+            });
+            return;
+          }
+
           useSideBarDraggingStore.setState({
             dragging: true
-          })
-        }
-        disableVirtualization
+          });
+        }}
         itemsDraggable={disableDefaultDrag ? dragging : true}
         lockItemDragsToMainAxis
-        onItemReorder={({ fromIndex, fromItem, toIndex, toItem }) => {
+        onItemReorder={async ({ fromIndex, fromItem, toIndex, toItem }) => {
+          if (
+            customizableSidebarFeature &&
+            !customizableSidebarFeature?.isAllowed
+          ) {
+            ToastManager.show({
+              message: customizableSidebarFeature.error,
+              type: "info",
+              actionText: strings.upgrade(),
+              func: () => PaywallSheet.present(customizableSidebarFeature)
+            });
+            return;
+          }
           const newOrder = getOrderedItems().map((item) => item.id);
           const element = newOrder.splice(fromIndex, 1)[0];
           if (toIndex === 0) {

apps/mobile/app/components/loading/index.tsx

@@ -0,0 +1,88 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+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 { useThemeColors } from "@notesnook/theme";
+import React from "react";
+import { View } from "react-native";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { ProgressBarComponent } from "../ui/svg/lazy";
+import Heading from "../ui/typography/heading";
+import Paragraph from "../ui/typography/paragraph";
+export const Loading = (props: {
+  title?: string;
+  description?: string;
+  icon?: string;
+}) => {
+  const { colors } = useThemeColors();
+  return (
+    <View
+      style={{
+        width: "100%",
+        height: "100%",
+        backgroundColor: colors.primary.background,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 16
+      }}
+    >
+      {props.icon ? (
+        <Icon name={props.icon} size={80} color={colors.primary.accent} />
+      ) : null}
+
+      {props.title ? (
+        <Heading
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.title}
+        </Heading>
+      ) : null}
+
+      {props.description ? (
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {props.description}
+        </Paragraph>
+      ) : null}
+
+      <View
+        style={{
+          flexDirection: "row",
+          width: 100,
+          marginTop: 15
+        }}
+      >
+        <ProgressBarComponent
+          height={5}
+          width={100}
+          animated={true}
+          useNativeDriver
+          indeterminate
+          indeterminateAnimationDuration={2000}
+          unfilledColor={colors.secondary.background}
+          color={colors.primary.accent}
+          borderWidth={0}
+        />
+      </View>
+    </View>
+  );
+};

apps/mobile/app/components/note-history/preview.js

@@ -117,7 +117,8 @@ export default function NotePreview({ session, content, note }) {
       {!session?.locked && !locked ? (
         <View
           style={{
-            flex: 1
+            flex: 1,
+            backgroundColor: colors.primary.background
           }}
         >
           <ReadonlyEditor

apps/mobile/app/components/premium/compact-features.js

@@ -1,96 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React from "react";
-import { FeatureBlock } from "./feature";
-import { ScrollView } from "react-native-actions-sheet";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const CompactFeatures = ({
-  vertical,
-  features = [],
-  maxHeight = 600,
-  scrollRef
-}) => {
-  let data = vertical
-    ? features
-    : [
-        {
-          highlight: "Everything",
-          content: "in basic",
-          icon: "emoticon-wink"
-        },
-        {
-          highlight: "Unlimited",
-          content: "notebooks",
-          icon: "notebook"
-        },
-        {
-          highlight: "File & image",
-          content: "attachments",
-          icon: "attachment"
-        },
-        {
-          highlight: "Instant",
-          content: "syncing",
-          icon: "sync"
-        },
-        {
-          highlight: "Private",
-          content: "vault",
-          icon: "shield"
-        },
-        {
-          highlight: "Daily, weekly & monthly",
-          content: "recurring reminders",
-          icon: "bell"
-        },
-        {
-          highlight: "Rich text",
-          content: "editing",
-          icon: "square-edit-outline"
-        },
-        {
-          highlight: "PDF & markdown",
-          content: "exports",
-          icon: "file"
-        },
-        {
-          highlight: "Encrypted",
-          content: "backups",
-          icon: "backup-restore"
-        }
-      ];
-
-  return (
-    <ScrollView
-      horizontal={!vertical}
-      showsHorizontalScrollIndicator={false}
-      style={{
-        width: "100%",
-        maxHeight: maxHeight,
-        paddingHorizontal: DefaultAppStyles.GAP
-      }}
-    >
-      {data.map((item) => (
-        <FeatureBlock key={item.highlight} vertical={vertical} {...item} />
-      ))}
-    </ScrollView>
-  );
-};

apps/mobile/app/components/premium/component.js

@@ -1,290 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 { useThemeColors } from "@notesnook/theme";
-import React, { useState } from "react";
-import { ActivityIndicator, Platform, ScrollView, View } from "react-native";
-import { LAUNCH_ROCKET } from "../../assets/images/assets";
-import { db } from "../../common/database";
-import { usePricing } from "../../hooks/use-pricing";
-import { DDS } from "../../services/device-detection";
-import { eSendEvent, presentSheet } from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import { useUserStore } from "../../stores/use-user-store";
-import { getElevationStyle } from "../../utils/elevation";
-import { eClosePremiumDialog, eCloseSheet } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth/common";
-import SheetProvider from "../sheet-provider";
-import { Toast } from "../toast";
-import { Button } from "../ui/button";
-import { IconButton } from "../ui/icon-button";
-import Seperator from "../ui/seperator";
-import { SvgView } from "../ui/svg";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { Walkthrough } from "../walkthroughs";
-import { features } from "./features";
-import { Group } from "./group";
-import { PricingPlans } from "./pricing-plans";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Component = ({ close, promo }) => {
-  const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
-  const userCanRequestTrial =
-    user && (!user.subscription || !user.subscription.expiry) ? true : false;
-  const [floatingButton, setFloatingButton] = useState(false);
-  const pricing = usePricing("monthly");
-
-  const onPress = async () => {
-    if (user) {
-      presentSheet({
-        context: "pricing_plans",
-        component: (
-          <PricingPlans showTrialOption={false} marginTop={1} promo={promo} />
-        )
-      });
-    } else {
-      close();
-      Navigation.navigate("Auth", {
-        mode: AuthMode.trialSignup
-      });
-    }
-  };
-
-  const onScroll = (event) => {
-    let contentSize = event.nativeEvent.contentSize.height;
-    contentSize = contentSize - event.nativeEvent.layoutMeasurement.height;
-    let yOffset = event.nativeEvent.contentOffset.y;
-    if (yOffset > 600 && yOffset < contentSize - 400) {
-      setFloatingButton(true);
-    } else {
-      setFloatingButton(false);
-    }
-  };
-
-  return (
-    <View
-      style={{
-        width: "100%",
-        backgroundColor: colors.primary.background,
-        justifyContent: "space-between",
-        borderRadius: 10,
-        maxHeight: "100%"
-      }}
-    >
-      <SheetProvider context="pricing_plans" />
-      <IconButton
-        onPress={() => {
-          close();
-        }}
-        style={{
-          position: "absolute",
-          right: DDS.isTab ? 30 : 15,
-          top: Platform.OS === "ios" ? 0 : 30,
-          zIndex: 10,
-          width: 50,
-          height: 50
-        }}
-        color={colors.primary.paragraph}
-        name="close"
-      />
-
-      <ScrollView
-        style={{
-          paddingHorizontal: DDS.isTab ? DDS.width / 5 : 0
-        }}
-        scrollEventThrottle={0}
-        keyboardDismissMode="none"
-        keyboardShouldPersistTaps="always"
-        onScroll={onScroll}
-      >
-        <View
-          key="top-banner"
-          style={{
-            width: "100%",
-            alignItems: "center",
-            height: 400,
-            justifyContent: "center"
-          }}
-        >
-          <SvgView
-            width={350}
-            height={350}
-            src={LAUNCH_ROCKET(colors.primary.accent)}
-          />
-        </View>
-
-        <Heading
-          key="heading"
-          size={AppFontSize.lg}
-          style={{
-            alignSelf: "center",
-            paddingTop: 20
-          }}
-        >
-          Notesnook{" "}
-          <Heading size={AppFontSize.lg} color={colors.primary.accent}>
-            Pro
-          </Heading>
-        </Heading>
-
-        {!pricing ? (
-          <ActivityIndicator
-            style={{
-              marginBottom: 20
-            }}
-            size={AppFontSize.md}
-            color={colors.primary.accent}
-          />
-        ) : (
-          <Paragraph
-            style={{
-              alignSelf: "center",
-              marginBottom: 20
-            }}
-            size={AppFontSize.md}
-          >
-            (
-            {Platform.OS === "android"
-              ? pricing.product?.subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].formattedPrice
-              : pricing.product?.localizedPrice}{" "}
-            / mo)
-          </Paragraph>
-        )}
-
-        <Paragraph
-          key="description"
-          size={AppFontSize.md}
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP,
-            textAlign: "center",
-            alignSelf: "center",
-            paddingBottom: 20,
-            width: "90%"
-          }}
-        >
-          Ready to take the next step on your private note taking journey?
-        </Paragraph>
-
-        {userCanRequestTrial ? (
-          <Button
-            key="calltoaction"
-            onPress={async () => {
-              try {
-                await db.user.activateTrial();
-                eSendEvent(eClosePremiumDialog);
-                eSendEvent(eCloseSheet);
-                await sleep(300);
-                Walkthrough.present("trialstarted", false, true);
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-            title="Try free for 14 days"
-            type="accent"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: 15,
-              borderRadius: 100
-            }}
-          />
-        ) : null}
-
-        <Button
-          key="calltoaction"
-          onPress={onPress}
-          title={
-            promo ? promo.text : user ? "See all plans" : "Sign up for free"
-          }
-          type={userCanRequestTrial ? "secondaryAccented" : "accent"}
-          width={250}
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP,
-            marginBottom: 15,
-            borderRadius: 100
-          }}
-        />
-
-        {!user || userCanRequestTrial ? (
-          <Paragraph
-            color={colors.secondary.paragraph}
-            size={AppFontSize.xs}
-            style={{
-              alignSelf: "center",
-              textAlign: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL,
-              maxWidth: "80%"
-            }}
-          >
-            {user
-              ? 'On clicking "Try free for 14 days", your free trial will be activated.'
-              : "After sign up you will be asked to activate your free trial."}{" "}
-            <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
-              No credit card is required.
-            </Paragraph>
-          </Paragraph>
-        ) : null}
-
-        <Seperator key="seperator_1" />
-
-        {features.map((item, index) => (
-          <Group key={item.title} item={item} index={index} />
-        ))}
-
-        <View
-          key="plans"
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP
-          }}
-        >
-          <PricingPlans showTrialOption={false} promo={promo} />
-        </View>
-      </ScrollView>
-
-      {floatingButton ? (
-        <Button
-          onPress={onPress}
-          title={
-            promo ? promo.text : user ? "See all plans" : "Sign up for free"
-          }
-          type="accent"
-          style={{
-            paddingHorizontal: DefaultAppStyles.GAP * 2,
-            position: "absolute",
-            borderRadius: 100,
-            bottom: 30,
-            ...getElevationStyle(10)
-          }}
-        />
-      ) : null}
-
-      <Toast context="local" />
-      <View
-        style={{
-          paddingBottom: 10
-        }}
-      />
-    </View>
-  );
-};

apps/mobile/app/components/premium/expiring.js

@@ -1,218 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React, { useEffect, useState } from "react";
-import { View } from "react-native";
-import { usePricing } from "../../hooks/use-pricing";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import PremiumService from "../../services/premium";
-import { useThemeColors } from "@notesnook/theme";
-import {
-  eOpenPremiumDialog,
-  eOpenResultDialog,
-  eOpenTrialEndingDialog
-} from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import BaseDialog from "../dialog/base-dialog";
-import DialogContainer from "../dialog/dialog-container";
-import { Button } from "../ui/button";
-import Seperator from "../ui/seperator";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { CompactFeatures } from "./compact-features";
-import { Offer } from "./offer";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Expiring = () => {
-  const { colors } = useThemeColors();
-  const [visible, setVisible] = useState(false);
-  const [status, setStatus] = useState({
-    title: "Your trial is ending soon",
-    offer: "Get 30% off",
-    extend: true
-  });
-  const pricing = usePricing("yearly");
-  const promo =
-    status.offer && pricing?.info
-      ? {
-          promoCode:
-            pricing?.info?.discount > 30
-              ? pricing.info.sku
-              : "com.streetwriters.notesnook.sub.yr.trialoffer",
-          text: `GET ${
-            pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-          }% OFF on yearly`,
-          discount: pricing?.info?.discount > 30 ? pricing?.info?.discount : 30
-        }
-      : null;
-
-  useEffect(() => {
-    eSubscribeEvent(eOpenTrialEndingDialog, open);
-    return () => {
-      eUnSubscribeEvent(eOpenTrialEndingDialog, open);
-    };
-  }, []);
-
-  const open = (status) => {
-    setStatus(status);
-    setVisible(true);
-  };
-
-  return (
-    visible && (
-      <BaseDialog
-        onRequestClose={() => {
-          setVisible(false);
-        }}
-      >
-        <DialogContainer>
-          <View
-            style={{
-              width: "100%",
-              alignItems: "center"
-            }}
-          >
-            <View
-              style={{
-                paddingHorizontal: DefaultAppStyles.GAP,
-                width: "100%"
-              }}
-            >
-              <Heading
-                textBreakStrategy="balanced"
-                style={{
-                  textAlign: "center",
-                  paddingTop: 18
-                }}
-              >
-                {status.title}
-              </Heading>
-              <Seperator />
-              <View
-                style={{
-                  width: "100%",
-                  alignItems: "center"
-                }}
-              >
-                {status.offer ? (
-                  <>
-                    <Offer padding={20} off={promo?.discount || 30} />
-                  </>
-                ) : (
-                  <>
-                    <Paragraph
-                      textBreakStrategy="balanced"
-                      style={{
-                        textAlign: "center",
-                        paddingTop: 0,
-                        paddingBottom: 20
-                      }}
-                      size={AppFontSize.md + 2}
-                    >
-                      Upgrade now to continue using all the pro features after
-                      your trial ends
-                    </Paragraph>
-                  </>
-                )}
-
-                <CompactFeatures />
-
-                <Paragraph
-                  onPress={async () => {
-                    setVisible(false);
-                    await sleep(300);
-                    eSendEvent(eOpenPremiumDialog, promo);
-                  }}
-                  size={AppFontSize.xs}
-                  style={{
-                    textDecorationLine: "underline",
-                    color: colors.secondary.paragraph,
-                    marginTop: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                >
-                  {"See what's included in Basic & Pro plans"}
-                </Paragraph>
-
-                <Seperator />
-              </View>
-            </View>
-
-            <View
-              style={{
-                backgroundColor: colors.secondary.background,
-                width: "100%",
-                borderBottomRightRadius: 10,
-                borderBottomLeftRadius: 10
-              }}
-            >
-              <Button
-                type="transparent"
-                title="Subscribe now"
-                onPress={async () => {
-                  setVisible(false);
-                  await sleep(300);
-                  PremiumService.sheet(
-                    null,
-                    promo?.discount > 30 ? null : promo
-                  );
-                }}
-                fontSize={AppFontSize.md + 2}
-                style={{
-                  marginBottom: status.extend ? 0 : 10,
-                  marginTop: DefaultAppStyles.GAP_VERTICAL,
-                  paddingHorizontal: DefaultAppStyles.GAP * 2
-                }}
-              />
-
-              {status.extend && (
-                <Button
-                  type="plain"
-                  title="Not sure yet? Extend trial for 7 days"
-                  textStyle={{
-                    textDecorationLine: "underline"
-                  }}
-                  onPress={async () => {
-                    setVisible(false);
-                    await sleep(300);
-                    eSendEvent(eOpenResultDialog, {
-                      title: "Your trial has been extended",
-                      paragraph:
-                        "Try out all features of Notesnook free for 7 more days. No limitations. No commitments.",
-                      button: "Continue"
-                    });
-                  }}
-                  fontSize={AppFontSize.xs}
-                  height={30}
-                  style={{
-                    marginBottom: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                />
-              )}
-            </View>
-          </View>
-        </DialogContainer>
-      </BaseDialog>
-    )
-  );
-};

apps/mobile/app/components/premium/feature.js

@@ -1,97 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React from "react";
-import { Text, View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeColors } from "@notesnook/theme";
-import { defaultBorderRadius, AppFontSize } from "../../utils/size";
-import Paragraph from "../ui/typography/paragraph";
-import { ProTag } from "./pro-tag";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const FeatureBlock = ({
-  vertical,
-  highlight,
-  content,
-  icon,
-  pro,
-  proTagBg
-}) => {
-  const { colors } = useThemeColors();
-
-  return vertical ? (
-    <View
-      style={{
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        marginBottom: DefaultAppStyles.GAP_VERTICAL,
-        backgroundColor: colors.secondary.background,
-        borderRadius: 10,
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL
-      }}
-    >
-      <Paragraph
-        style={{
-          flexWrap: "wrap",
-          marginLeft: 5,
-          flexShrink: 1
-        }}
-        size={AppFontSize.sm}
-      >
-        {content}
-      </Paragraph>
-    </View>
-  ) : (
-    <View
-      style={{
-        height: 100,
-        justifyContent: "center",
-        padding: DefaultAppStyles.GAP_SMALL,
-        marginRight: 10,
-        borderRadius: defaultBorderRadius,
-        minWidth: 100
-      }}
-    >
-      <Icon color={colors.primary.icon} name={icon} size={AppFontSize.xl} />
-      <Paragraph size={AppFontSize.md}>
-        <Text style={{ color: colors.primary.accent }}>{highlight}</Text>
-        {content ? "\n" + content : null}
-      </Paragraph>
-
-      {pro ? (
-        <>
-          <View style={{ height: 5 }} />
-          <ProTag width={50} size={AppFontSize.xs} background={proTagBg} />
-        </>
-      ) : (
-        <View
-          style={{
-            width: 30,
-            height: 3,
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
-            borderRadius: 100,
-            backgroundColor: colors.primary.accent
-          }}
-        />
-      )}
-    </View>
-  );
-};

apps/mobile/app/components/premium/features.js

@@ -1,318 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-export const features = [
-  {
-    title: "Focused on privacy",
-    detail:
-      "Everything you do in Notesnook stays private. We use XChaCha20-Poly1305-IETF and Argon2 to encrypt your notes.",
-    features: [
-      {
-        highlight: "Zero ads",
-        content: "& zero trackers",
-        icon: "billboard"
-      },
-      {
-        highlight: "On device",
-        content: "encryption",
-        icon: "cellphone"
-      },
-      {
-        highlight: "Secure app",
-        content: "lock for all",
-        icon: "cellphone-lock"
-      },
-      {
-        highlight: "100% end-to-end ",
-        content: "encrypted",
-        icon: "lock"
-      },
-      {
-        highlight: "Password protected",
-        content: "notes sharing",
-        icon: "file-lock"
-      }
-    ]
-  },
-  {
-    title: "No limit on notes or devices",
-    detail:
-      "Basic or Pro, you can create unlimited number of notes and access them on all your devices. You won't be running out of space or blocks ever."
-  },
-  {
-    title: "Attach files & images",
-    detail:
-      "Add your documents, PDFs, images and videos, and keep them safe and organized.",
-    pro: true,
-    features: [
-      {
-        highlight: "Bullet proof",
-        content: "encryption",
-        icon: "lock"
-      },
-      {
-        highlight: "High quality",
-        content: "4k images",
-        icon: "image-multiple"
-      },
-      {
-        highlight: "No monthly",
-        content: "storage limit",
-        icon: "harddisk"
-      },
-      {
-        highlight: "Generous 500 MB",
-        content: "max file size",
-        icon: "file-cabinet"
-      },
-      {
-        highlight: "No restriction",
-        content: "on file type",
-        icon: "file"
-      }
-    ]
-  },
-  {
-    title: "Cross platform Reminders",
-    detail: "Stay updated on all your upcoming tasks with reminders.",
-    features: [
-      {
-        highlight: "One-time",
-        content: "reminders",
-        icon: "bell"
-      },
-      {
-        highlight: "Daily, weekly & monthly",
-        content: "reminders",
-        icon: "refresh",
-        pro: true
-      }
-    ]
-  },
-  {
-    title: "Two-factor authentication",
-    detail:
-      "Improve account security & prevent intruders from accessing your notes",
-    info: "* 2FA via email is enabled by default for all users.",
-    features: [
-      {
-        highlight: "Email *",
-        icon: "bell"
-      },
-      {
-        highlight: "Authentication",
-        content: "app",
-        icon: "refresh"
-      },
-      {
-        highlight: "SMS",
-        icon: "refresh",
-        pro: true
-      }
-    ]
-  },
-  {
-    title: "Keep secrets always locked with private vault",
-    detail:
-      "An extra layer of security for any important data. Notes in the vault always stay encrypted and require a password to be accessed or edited everytime.",
-    pro: true
-  },
-  {
-    title: "Organize yourself in the best way",
-    detail:
-      "We offer multiple ways to keep you organized. The only limit is your imagination.",
-    features: [
-      {
-        highlight: "Unlimited",
-        content: "notebooks & tags*",
-        icon: "emoticon",
-        pro: true
-      },
-      {
-        highlight: "Organize",
-        content: "with colors",
-        icon: "palette",
-        pro: true
-      },
-      {
-        highlight: "Side menu",
-        content: "shortcuts",
-        icon: "link-variant"
-      },
-      {
-        highlight: "Pin note in",
-        content: "notifications",
-        icon: "pin",
-        platform: "android"
-      }
-    ],
-    info: "* Free users are limited to keeping 3 notebooks and 5 tags."
-  },
-
-  {
-    title: "Instant sync",
-    detail:
-      "Seamlessly work from anywhere on any device. Every change is synced instantly to all your devices.",
-    info: "* Disable sync completely, turn off auto sync or disable editor realtime sync.",
-    features: [
-      {
-        highlight: "Sync to unlimited",
-        content: "devices",
-        icon: "cellphone"
-      },
-      {
-        highlight: "Realtime",
-        content: "editor sync",
-        icon: "sync"
-      },
-      {
-        highlight: "Granular sync",
-        content: "controls *",
-        icon: "sync-off"
-      }
-    ]
-  },
-  {
-    title: "Rich tools for rich editing",
-    detail:
-      "Having the right tool at the right time is crucial for note taking. Lists, tables, codeblocks — you name it, we have it.",
-    features: [
-      {
-        highlight: "Basic formatting",
-        content: "and lists",
-        icon: "format-bold"
-      },
-      {
-        highlight: "Checklists",
-        content: "& tables",
-        icon: "table",
-        pro: true
-      },
-      {
-        highlight: "Markdown",
-        content: "support",
-        icon: "language-markdown",
-        pro: true
-      },
-      {
-        highlight: "Personalized",
-        content: "editor toolbar",
-        icon: "gesture-tap-button",
-        pro: true
-      },
-      {
-        highlight: "Write notes from",
-        content: "notifications",
-        icon: "bell",
-        platform: "android"
-      }
-    ]
-  },
-  {
-    title: "Safe publishing to the Internet",
-    detail:
-      "Publishing is nothing new but we offer fully encrypted, anonymous publishing. Take any note & share it with the world.",
-    features: [
-      {
-        highlight: "Password protected",
-        content: "sharing",
-        icon: "send-lock"
-      },
-      {
-        highlight: "Self destruct",
-        content: "monographs",
-        icon: "bomb"
-      }
-    ]
-  },
-  {
-    title: "Export and take your notes anywhere",
-    pro: true,
-    detail:
-      "You own your notes, not us. No proprietary formats. No vendor lock in. No waiting for hours to download your notes.",
-    info: "* Free users can export notes in well formatted plain text.",
-    features: [
-      {
-        highlight: "Export as ",
-        content: "Markdown",
-        icon: "language-markdown",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "PDF",
-        icon: "file-pdf-box",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "HTML",
-        icon: "language-html5",
-        pro: true
-      },
-      {
-        highlight: "Export as",
-        content: "text",
-        icon: "clipboard-text-outline"
-      }
-    ]
-  },
-  {
-    title: "Backup & keep your notes safe",
-    detail:
-      "Do not worry about losing your data. Turn on automatic backups on weekly or daily basis.",
-    features: [
-      {
-        highlight: "Backup",
-        content: "encryption",
-        icon: "backup-restore"
-      }
-    ],
-    pro: true
-  },
-  {
-    title: "Personalize & make Notesnook your own",
-    detail:
-      "Change app themes to match your style. Custom themes are coming soon.",
-
-    features: [
-      {
-        highlight: "Automatic",
-        content: "dark mode",
-        icon: "theme-light-dark",
-        pro: false
-      },
-      {
-        highlight: "Change accent",
-        content: "color",
-        icon: "invert-colors",
-        pro: true
-      }
-    ]
-  }
-];
-
-/**
- * 
-      {
-        highlight: 'Private vault',
-        content: 'for notes',
-        icon: 'shield-lock'
-      }
- */

apps/mobile/app/components/premium/group.js

@@ -1,93 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React from "react";
-import { ScrollView, View } from "react-native";
-import { useThemeColors } from "@notesnook/theme";
-import { AppFontSize } from "../../utils/size";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { FeatureBlock } from "./feature";
-import { ProTag } from "./pro-tag";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const Group = ({ item, index }) => {
-  const { colors } = useThemeColors();
-
-  return (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        backgroundColor:
-          index % 2 !== 0
-            ? colors.primary.background
-            : colors.secondary.background,
-        paddingVertical: 40
-      }}
-    >
-      {item?.pro ? (
-        <ProTag
-          size={AppFontSize.sm}
-          background={
-            index % 2 === 0
-              ? colors.primary.background
-              : colors.secondary.background
-          }
-        />
-      ) : null}
-      <Heading>{item.title}</Heading>
-      <Paragraph size={AppFontSize.md}>{item.detail}</Paragraph>
-
-      {item.features && (
-        <ScrollView
-          style={{
-            marginTop: DefaultAppStyles.GAP
-          }}
-          horizontal
-          showsHorizontalScrollIndicator={false}
-        >
-          {item.features?.map((item) => (
-            <FeatureBlock
-              key={item.detail}
-              {...item}
-              detail={item.detail}
-              pro={item.pro}
-              proTagBg={
-                index % 2 === 0
-                  ? colors.primary.background
-                  : colors.secondary.background
-              }
-            />
-          ))}
-        </ScrollView>
-      )}
-      {item.info ? (
-        <Paragraph
-          style={{
-            marginTop: DefaultAppStyles.GAP_VERTICAL
-          }}
-          size={AppFontSize.xs}
-          color={colors.secondary.paragraph}
-        >
-          {item.info}
-        </Paragraph>
-      ) : null}
-    </View>
-  );
-};

apps/mobile/app/components/premium/index.js

@@ -1,87 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React, { createRef } from "react";
-import {
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { eClosePremiumDialog, eOpenPremiumDialog } from "../../utils/events";
-import BaseDialog from "../dialog/base-dialog";
-import { Component } from "./component";
-
-class PremiumDialog extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      visible: false,
-      promo: null
-    };
-    this.actionSheetRef = createRef();
-  }
-
-  componentDidMount() {
-    eSubscribeEvent(eOpenPremiumDialog, this.open);
-    eSubscribeEvent(eClosePremiumDialog, this.close);
-  }
-
-  componentWillUnmount() {
-    eUnSubscribeEvent(eOpenPremiumDialog, this.open);
-    eUnSubscribeEvent(eClosePremiumDialog, this.close);
-  }
-
-  open = (promoInfo) => {
-    this.setState({
-      visible: true,
-      promo: promoInfo
-    });
-  };
-
-  close = () => {
-    this.setState({
-      visible: false,
-      promo: null
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      visible: false
-    });
-  };
-
-  render() {
-    return !this.state.visible ? null : (
-      <BaseDialog
-        animation="slide"
-        bounce={false}
-        background={this.props.colors.primary.background}
-        onRequestClose={this.onClose}
-      >
-        <Component
-          getRef={() => this.actionSheetRef}
-          promo={this.state.promo}
-          close={this.close}
-        />
-      </BaseDialog>
-    );
-  }
-}
-
-export default PremiumDialog;

apps/mobile/app/components/premium/premium-toast.js

@@ -1,144 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React, { useCallback, useEffect, useRef, useState } from "react";
-import { View } from "react-native";
-import Animated, { FadeInUp, FadeOutUp } from "react-native-reanimated";
-import useKeyboard from "../../hooks/use-keyboard";
-import { DDS } from "../../services/device-detection";
-import {
-  eSendEvent,
-  eSubscribeEvent,
-  eUnSubscribeEvent
-} from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
-import { getElevationStyle } from "../../utils/elevation";
-import {
-  eCloseActionSheet,
-  eCloseSheet,
-  eOpenPremiumDialog,
-  eShowGetPremium
-} from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const PremiumToast = ({ context = "global", offset = 0 }) => {
-  const { colors } = useThemeColors();
-  const [msg, setMsg] = useState(null);
-  const timer = useRef();
-  const keyboard = useKeyboard();
-
-  const open = useCallback(
-    (event) => {
-      if (!event) {
-        clearTimeout(timer);
-        timer.current = null;
-        setMsg(null);
-        return;
-      }
-
-      if (event.context === context && msg?.desc !== event.desc) {
-        if (timer.current !== null) {
-          clearTimeout(timer.current);
-          timer.current = null;
-        }
-        setMsg(event);
-        timer.current = setTimeout(async () => {
-          setMsg(null);
-        }, 3000);
-      }
-    },
-    [context, msg?.desc]
-  );
-
-  useEffect(() => {
-    eSubscribeEvent(eShowGetPremium, open);
-    return () => {
-      eUnSubscribeEvent(eShowGetPremium, open);
-    };
-  }, [open]);
-
-  const onPress = async () => {
-    open(null);
-    eSendEvent(eCloseActionSheet);
-    eSendEvent(eCloseSheet);
-    await sleep(300);
-    eSendEvent(eOpenPremiumDialog);
-  };
-
-  return (
-    !!msg && (
-      <Animated.View
-        entering={FadeInUp}
-        exiting={FadeOutUp}
-        style={{
-          position: "absolute",
-          backgroundColor: colors.secondary.background,
-          zIndex: 999,
-          ...getElevationStyle(20),
-          padding: DefaultAppStyles.GAP,
-          borderRadius: 10,
-          flexDirection: "row",
-          alignSelf: "center",
-          justifyContent: "space-between",
-          top: offset + keyboard.keyboardHeight,
-          maxWidth: DDS.isLargeTablet() ? 400 : "98%"
-        }}
-        onTouchEnd={() => {
-          setMsg(null);
-          clearTimeout(timer.current);
-        }}
-      >
-        <View
-          style={{
-            flexShrink: 1,
-            flexGrow: 1,
-            paddingRight: 6
-          }}
-        >
-          <Heading
-            style={{
-              flexWrap: "wrap"
-            }}
-            color={colors.primary.accent}
-            size={AppFontSize.md}
-          >
-            {msg.title}
-          </Heading>
-
-          <Paragraph
-            style={{
-              flexWrap: "wrap"
-            }}
-            size={AppFontSize.sm}
-            color={colors.primary.paragraph}
-          >
-            {msg.desc}
-          </Paragraph>
-        </View>
-
-        <Button onPress={onPress} title="Get Now" type="accent" />
-      </Animated.View>
-    )
-  );
-};

apps/mobile/app/components/premium/pricing-item.tsx

@@ -1,101 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React from "react";
-import { Platform, View } from "react-native";
-import { AppFontSize } from "../../utils/size";
-import { Pressable } from "../ui/pressable";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import RNIap from "react-native-iap";
-import { DefaultAppStyles } from "../../utils/styles";
-
-export const PricingItem = ({
-  product,
-  onPress,
-  compact,
-  strikethrough
-}: {
-  product: {
-    type: "yearly" | "monthly";
-    data?: RNIap.Subscription;
-    info: string;
-    offerType?: "yearly" | "monthly";
-  };
-  strikethrough?: boolean;
-  onPress?: () => void;
-  compact?: boolean;
-}) => {
-  return (
-    <Pressable
-      onPress={onPress}
-      type="secondary"
-      style={{
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: DefaultAppStyles.GAP,
-        paddingVertical: compact ? 15 : 10,
-        width: compact ? null : "100%",
-        minWidth: 150,
-        opacity: strikethrough ? 0.7 : 1
-      }}
-      disabled={strikethrough}
-    >
-      {!compact && (
-        <View>
-          <Heading size={AppFontSize.lg - 2}>
-            {product?.type === "yearly" || product?.offerType === "yearly"
-              ? "Yearly"
-              : "Monthly"}
-          </Heading>
-          {product?.info && (
-            <Paragraph size={AppFontSize.xs}>{product.info}</Paragraph>
-          )}
-        </View>
-      )}
-
-      <View>
-        <Paragraph
-          style={{
-            textDecorationLine: strikethrough ? "line-through" : undefined
-          }}
-          size={AppFontSize.sm}
-        >
-          <Heading
-            style={{
-              textDecorationLine: strikethrough ? "line-through" : undefined
-            }}
-            size={AppFontSize.lg - 2}
-          >
-            {Platform.OS === "android"
-              ? (product.data as RNIap.SubscriptionAndroid | undefined)
-                  ?.subscriptionOfferDetails?.[0]?.pricingPhases
-                  .pricingPhaseList?.[0]?.formattedPrice
-              : (product.data as RNIap.SubscriptionIOS | undefined)
-                  ?.localizedPrice}
-          </Heading>
-          {product?.type === "yearly" || product?.offerType === "yearly"
-            ? "/year"
-            : "/month"}
-        </Paragraph>
-      </View>
-    </Pressable>
-  );
-};

apps/mobile/app/components/premium/pricing-plans.tsx

@@ -1,735 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 { strings } from "@notesnook/intl";
-import { useThemeColors } from "@notesnook/theme";
-import React, { useCallback, useEffect, useState } from "react";
-import { ActivityIndicator, Platform, Text, View } from "react-native";
-import * as RNIap from "react-native-iap";
-import { DatabaseLogger, db } from "../../common/database";
-import { usePricing } from "../../hooks/use-pricing";
-import {
-  eSendEvent,
-  presentSheet,
-  ToastManager
-} from "../../services/event-manager";
-import Navigation from "../../services/navigation";
-import PremiumService from "../../services/premium";
-import { useSettingStore } from "../../stores/use-setting-store";
-import { useUserStore } from "../../stores/use-user-store";
-import {
-  eClosePremiumDialog,
-  eCloseSheet,
-  eCloseSimpleDialog
-} from "../../utils/events";
-import { openLinkInBrowser } from "../../utils/functions";
-import { AppFontSize } from "../../utils/size";
-import { sleep } from "../../utils/time";
-import { AuthMode } from "../auth/common";
-import { Dialog } from "../dialog";
-import BaseDialog from "../dialog/base-dialog";
-import { presentDialog } from "../dialog/functions";
-import { Button } from "../ui/button";
-import Heading from "../ui/typography/heading";
-import Paragraph from "../ui/typography/paragraph";
-import { Walkthrough } from "../walkthroughs";
-import { PricingItem } from "./pricing-item";
-import { DefaultAppStyles } from "../../utils/styles";
-
-const UUID_PREFIX = "0bdaea";
-const UUID_VERSION = "4";
-const UUID_VARIANT = "a";
-
-function toUUID(str: string) {
-  return [
-    UUID_PREFIX + str.substring(0, 2), // 6 digit prefix + first 2 oid digits
-    str.substring(2, 6), // # next 4 oid digits
-    UUID_VERSION + str.substring(6, 9), // # 1 digit version(0x4) + next 3 oid digits
-    UUID_VARIANT + str.substring(9, 12), // # 1 digit variant(0b101) + 1 zero bit + next 3 oid digits
-    str.substring(12)
-  ].join("-");
-}
-
-const promoCyclesMonthly = {
-  1: "first month",
-  2: "first 2 months",
-  3: "first 3 months",
-  4: "first 4 months",
-  5: "first 5 months",
-  6: "first 3 months"
-};
-
-const promoCyclesYearly = {
-  1: "first year",
-  2: "first 2 years",
-  3: "first 3 years"
-};
-
-export const PricingPlans = ({
-  promo,
-  marginTop,
-  heading = true,
-  compact = false
-}: {
-  promo?: {
-    promoCode: string;
-  };
-  marginTop?: any;
-  heading?: boolean;
-  compact?: boolean;
-}) => {
-  const { colors } = useThemeColors();
-  const user = useUserStore((state) => state.user);
-  const [product, setProduct] = useState<{
-    type: string;
-    offerType: "monthly" | "yearly";
-    data: RNIap.Subscription;
-    cycleText: string;
-    info: string;
-  }>();
-
-  const [buying, setBuying] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const userCanRequestTrial =
-    user && (!user.subscription || !user.subscription.expiry) ? true : false;
-  const [upgrade, setUpgrade] = useState(!userCanRequestTrial);
-  const yearlyPlan = usePricing("yearly");
-  const monthlyPlan = usePricing("monthly");
-
-  const getSkus = useCallback(async () => {
-    try {
-      setLoading(true);
-      if (promo?.promoCode) {
-        getPromo(promo?.promoCode);
-      }
-      setLoading(false);
-    } catch (e) {
-      setLoading(false);
-    }
-  }, [promo?.promoCode]);
-
-  const getPromo = async (code: string) => {
-    try {
-      let skuId: string;
-      if (code.startsWith("com.streetwriters.notesnook")) {
-        skuId = code;
-      } else {
-        skuId = await db.offers?.getCode(
-          code.split(":")[0],
-          Platform.OS as "ios" | "android"
-        );
-      }
-
-      const products = await PremiumService.getProducts();
-      const product = products.find((p) => p.productId === skuId);
-      if (!product) return false;
-      const isMonthly = product.productId.indexOf(".mo") > -1;
-
-      const cycleText = isMonthly
-        ? promoCyclesMonthly[
-            (Platform.OS === "android"
-              ? (product as RNIap.SubscriptionAndroid)
-                  .subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].billingCycleCount
-              : parseInt(
-                  (product as RNIap.SubscriptionIOS)
-                    .introductoryPriceNumberOfPeriodsIOS as string
-                )) as keyof typeof promoCyclesMonthly
-          ]
-        : promoCyclesYearly[
-            (Platform.OS === "android"
-              ? (product as RNIap.SubscriptionAndroid)
-                  .subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0].billingCycleCount
-              : parseInt(
-                  (product as RNIap.SubscriptionIOS)
-                    .introductoryPriceNumberOfPeriodsIOS as string
-                )) as keyof typeof promoCyclesYearly
-          ];
-
-      setProduct({
-        type: "promo",
-        offerType: isMonthly ? "monthly" : "yearly",
-        data: product,
-        cycleText: cycleText,
-        info: `Pay ${isMonthly ? "monthly" : "yearly"}, cancel anytime`
-      });
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
-
-  useEffect(() => {
-    getSkus();
-  }, [getSkus]);
-
-  const buySubscription = async (product: RNIap.Subscription) => {
-    if (buying || !product) return;
-    setBuying(true);
-    try {
-      if (!user) {
-        setBuying(false);
-        return;
-      }
-      useSettingStore.getState().setAppDidEnterBackgroundForAction(true);
-      const androidOfferToken =
-        Platform.OS === "android"
-          ? (product as RNIap.SubscriptionAndroid).subscriptionOfferDetails[0]
-              .offerToken
-          : null;
-
-      DatabaseLogger.info(
-        `Subscription Requested initiated for user ${toUUID(user.id)}`
-      );
-
-      await RNIap.requestSubscription({
-        sku: product?.productId,
-        obfuscatedAccountIdAndroid: user.id,
-        obfuscatedProfileIdAndroid: user.id,
-        appAccountToken: toUUID(user.id),
-        andDangerouslyFinishTransactionAutomaticallyIOS: false,
-        subscriptionOffers: androidOfferToken
-          ? [
-              {
-                offerToken: androidOfferToken,
-                sku: product?.productId
-              }
-            ]
-          : undefined
-      });
-      useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
-      setBuying(false);
-      eSendEvent(eCloseSheet);
-      eSendEvent(eClosePremiumDialog);
-      await sleep(500);
-      presentSheet({
-        title: "Thank you for subscribing!",
-        paragraph:
-          "Your Notesnook Pro subscription will be activated soon. If your account is not upgraded to Notesnook Pro, your money will be refunded to you. In case of any issues, please reach out to us at support@streetwriters.co",
-        action: async () => {
-          eSendEvent(eCloseSheet);
-        },
-        icon: "check",
-        actionText: "Continue"
-      });
-    } catch (e) {
-      setBuying(false);
-    }
-  };
-
-  function getStandardPrice() {
-    if (!product) return;
-    const productType = product.offerType;
-
-    if (Platform.OS === "android") {
-      const pricingPhaseListItem = (product.data as RNIap.SubscriptionAndroid)
-        ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[1];
-
-      if (!pricingPhaseListItem) {
-        const product =
-          productType === "monthly"
-            ? monthlyPlan?.product
-            : yearlyPlan?.product;
-        return (product as RNIap.SubscriptionAndroid)
-          ?.subscriptionOfferDetails[0]?.pricingPhases.pricingPhaseList?.[0]
-          ?.formattedPrice;
-      }
-
-      return pricingPhaseListItem?.formattedPrice;
-    } else {
-      const productDefault =
-        productType === "monthly" ? monthlyPlan?.product : yearlyPlan?.product;
-      return (
-        (product.data as RNIap.SubscriptionIOS)?.localizedPrice ||
-        (productDefault as RNIap.SubscriptionIOS)?.localizedPrice
-      );
-    }
-  }
-
-  return loading ? (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP,
-        justifyContent: "center",
-        alignItems: "center",
-        height: 100
-      }}
-    >
-      <ActivityIndicator color={colors.primary.accent} size={25} />
-    </View>
-  ) : (
-    <View
-      style={{
-        paddingHorizontal: DefaultAppStyles.GAP
-      }}
-    >
-      {buying ? (
-        <BaseDialog statusBarTranslucent centered>
-          <ActivityIndicator size={50} color="white" />
-        </BaseDialog>
-      ) : null}
-
-      {!upgrade ? (
-        <>
-          <Paragraph
-            style={{
-              alignSelf: "center"
-            }}
-            size={AppFontSize.lg}
-          >
-            {(Platform.OS === "android"
-              ? (monthlyPlan?.product as RNIap.SubscriptionAndroid | undefined)
-                  ?.subscriptionOfferDetails[0]?.pricingPhases
-                  .pricingPhaseList?.[0]?.formattedPrice
-              : (monthlyPlan?.product as RNIap.SubscriptionIOS | undefined)
-                  ?.localizedPrice) ||
-              (PremiumService.getMontlySub() as any)?.localizedPrice}
-            / mo
-          </Paragraph>
-          <Button
-            onPress={() => {
-              setUpgrade(true);
-            }}
-            title={"Upgrade now"}
-            type="accent"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: DefaultAppStyles.GAP,
-              marginTop: DefaultAppStyles.GAP,
-              borderRadius: 100
-            }}
-          />
-
-          <Button
-            onPress={async () => {
-              try {
-                await db.user?.activateTrial();
-                eSendEvent(eClosePremiumDialog);
-                eSendEvent(eCloseSheet);
-                await sleep(300);
-                Walkthrough.present("trialstarted", false, true);
-              } catch (e) {
-                console.error(e);
-              }
-            }}
-            title={"Try free for 14 days"}
-            type="secondaryAccented"
-            width={250}
-            style={{
-              paddingHorizontal: DefaultAppStyles.GAP,
-              marginBottom: 15
-            }}
-          />
-        </>
-      ) : (
-        <>
-          {product?.type === "promo" ? (
-            <View
-              style={{
-                paddingVertical: 15,
-                alignItems: "center"
-              }}
-            >
-              {product?.offerType === "monthly" ? (
-                <PricingItem
-                  product={{
-                    type: "monthly",
-                    data: monthlyPlan?.product,
-                    info: "Pay once a month, cancel anytime."
-                  }}
-                  strikethrough={true}
-                />
-              ) : (
-                <PricingItem
-                  onPress={() => {
-                    if (!monthlyPlan?.product) return;
-                    buySubscription(monthlyPlan?.product);
-                  }}
-                  product={{
-                    type: "yearly",
-                    data: yearlyPlan?.product,
-                    info: "Pay once a year, cancel anytime."
-                  }}
-                  strikethrough={true}
-                />
-              )}
-
-              <Heading
-                style={{
-                  paddingTop: 15,
-                  fontSize: AppFontSize.lg
-                }}
-              >
-                Special offer for you
-              </Heading>
-
-              <View
-                style={{
-                  paddingVertical: 20,
-                  paddingBottom: 10
-                }}
-              >
-                <Heading
-                  style={{
-                    alignSelf: "center",
-                    textAlign: "center"
-                  }}
-                  size={AppFontSize.xxl}
-                >
-                  {Platform.OS === "android"
-                    ? (product.data as RNIap.SubscriptionAndroid)
-                        ?.subscriptionOfferDetails[0]?.pricingPhases
-                        .pricingPhaseList?.[0]?.formattedPrice
-                    : (product.data as RNIap.SubscriptionIOS)
-                        ?.introductoryPrice ||
-                      (product.data as RNIap.SubscriptionIOS)
-                        ?.localizedPrice}{" "}
-                  {product?.cycleText
-                    ? `for ${product.cycleText}`
-                    : product?.offerType}
-                </Heading>
-                {product?.cycleText ? (
-                  <Paragraph
-                    style={{
-                      color: colors.secondary.paragraph,
-                      alignSelf: "center",
-                      textAlign: "center"
-                    }}
-                    size={AppFontSize.md}
-                  >
-                    then {getStandardPrice()} {product?.offerType}.
-                  </Paragraph>
-                ) : null}
-              </View>
-            </View>
-          ) : null}
-
-          {user && !product ? (
-            <>
-              {heading || (monthlyPlan?.info?.discount || 0) > 0 ? (
-                <>
-                  {monthlyPlan && (monthlyPlan?.info?.discount || 0) > 0 ? (
-                    <View
-                      style={{
-                        alignSelf: "center",
-                        marginTop: marginTop || 20,
-                        marginBottom: 20
-                      }}
-                    >
-                      <Heading
-                        style={{
-                          textAlign: "center"
-                        }}
-                        color={colors.primary.accent}
-                      >
-                        Get {monthlyPlan?.info?.discount}% off in{" "}
-                        {monthlyPlan?.info?.country}
-                      </Heading>
-                    </View>
-                  ) : (
-                    <Heading
-                      style={{
-                        alignSelf: "center",
-                        marginTop: marginTop || 20,
-                        marginBottom: 20
-                      }}
-                    >
-                      Choose a plan
-                    </Heading>
-                  )}
-                </>
-              ) : null}
-
-              <View
-                style={{
-                  flexDirection: !compact ? "column" : "row",
-                  flexWrap: "wrap",
-                  justifyContent: "space-around"
-                }}
-              >
-                <PricingItem
-                  onPress={() => {
-                    if (!monthlyPlan?.product) return;
-                    buySubscription(monthlyPlan?.product);
-                  }}
-                  compact={compact}
-                  product={{
-                    type: "monthly",
-                    data: monthlyPlan?.product,
-                    info: "Pay once a month, cancel anytime."
-                  }}
-                />
-
-                {!compact && (
-                  <View
-                    style={{
-                      height: 1,
-                      marginVertical: 5
-                    }}
-                  />
-                )}
-
-                <PricingItem
-                  onPress={() => {
-                    if (!yearlyPlan?.product) return;
-                    buySubscription(yearlyPlan?.product);
-                  }}
-                  compact={compact}
-                  product={{
-                    type: "yearly",
-                    data: yearlyPlan?.product,
-                    info: "Pay once a year, cancel anytime."
-                  }}
-                />
-              </View>
-
-              {Platform.OS !== "ios" ? (
-                <Button
-                  height={35}
-                  style={{
-                    marginTop: DefaultAppStyles.GAP_VERTICAL
-                  }}
-                  onPress={() => {
-                    presentDialog({
-                      context: "local",
-                      input: true,
-                      inputPlaceholder: "Enter code",
-                      positiveText: "Apply",
-                      positivePress: async (value) => {
-                        if (!value) return;
-                        eSendEvent(eCloseSimpleDialog);
-                        setBuying(true);
-                        try {
-                          if (!(await getPromo(value as string)))
-                            throw new Error(strings.errorApplyingPromoCode());
-                          ToastManager.show({
-                            heading: "Discount applied!",
-                            type: "success",
-                            context: "local"
-                          });
-                          setBuying(false);
-                        } catch (e) {
-                          setBuying(false);
-                          ToastManager.show({
-                            heading: "Promo code invalid or expired",
-                            message: (e as Error).message,
-                            type: "error",
-                            context: "local"
-                          });
-                        }
-                      },
-                      title: "Have a promo code?",
-                      paragraph:
-                        "Enter your promo code to get a special discount."
-                    });
-                  }}
-                  title="I have a promo code"
-                />
-              ) : (
-                <View
-                  style={{
-                    height: 15
-                  }}
-                />
-              )}
-            </>
-          ) : (
-            <View>
-              {!user ? (
-                <>
-                  <Button
-                    onPress={() => {
-                      eSendEvent(eClosePremiumDialog);
-                      eSendEvent(eCloseSheet);
-                      Navigation.navigate("Auth", {
-                        mode: AuthMode.login
-                      });
-                    }}
-                    title={"Sign up for free"}
-                    type="accent"
-                    width={250}
-                    style={{
-                      paddingHorizontal: DefaultAppStyles.GAP,
-                      marginTop: product?.type === "promo" ? 0 : 30,
-                      marginBottom: DefaultAppStyles.GAP_VERTICAL
-                    }}
-                  />
-                  {Platform.OS !== "ios" &&
-                  promo &&
-                  !promo.promoCode.startsWith("com.streetwriters.notesnook") ? (
-                    <Paragraph
-                      size={AppFontSize.md}
-                      textBreakStrategy="balanced"
-                      style={{
-                        alignSelf: "center",
-                        justifyContent: "center",
-                        textAlign: "center"
-                      }}
-                    >
-                      Use promo code{" "}
-                      <Text
-                        style={{
-                          fontFamily: "OpenSans-SemiBold"
-                        }}
-                      >
-                        {promo.promoCode}
-                      </Text>{" "}
-                      at checkout
-                    </Paragraph>
-                  ) : null}
-                </>
-              ) : (
-                <>
-                  <Button
-                    onPress={() => {
-                      if (!product?.data) return;
-                      buySubscription(product.data);
-                    }}
-                    height={40}
-                    width="50%"
-                    type="accent"
-                    title="Subscribe now"
-                  />
-
-                  <Button
-                    onPress={() => {
-                      setProduct(undefined);
-                    }}
-                    style={{
-                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-                    }}
-                    height={30}
-                    fontSize={13}
-                    type="errorShade"
-                    title="Cancel promo code"
-                  />
-                </>
-              )}
-            </View>
-          )}
-        </>
-      )}
-
-      {!user || !upgrade ? (
-        <Paragraph
-          color={colors.secondary.paragraph}
-          size={AppFontSize.xs}
-          style={{
-            alignSelf: "center",
-            textAlign: "center",
-            marginTop: DefaultAppStyles.GAP_VERTICAL,
-            maxWidth: "80%"
-          }}
-        >
-          {user
-            ? 'On clicking "Try free for 14 days", your free trial will be activated.'
-            : "After sign up you will be asked to activate your free trial."}{" "}
-          <Paragraph size={AppFontSize.xs} style={{ fontWeight: "bold" }}>
-            No credit card is required.
-          </Paragraph>
-        </Paragraph>
-      ) : null}
-
-      {user && upgrade ? (
-        <>
-          {Platform.OS === "ios" ? (
-            <Paragraph
-              textBreakStrategy="balanced"
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                alignSelf: "center",
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you will be charged to your iTunes Account for the
-              selected plan. Subscriptions will automatically renew unless
-              cancelled within 24-hours before the end of the current period.
-            </Paragraph>
-          ) : (
-            <Paragraph
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                alignSelf: "center",
-                marginTop: DefaultAppStyles.GAP_VERTICAL,
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you will be charged on your Google Account, and
-              your subscription will automatically renew until you cancel prior
-              to the end of the then current period.
-            </Paragraph>
-          )}
-
-          <View
-            style={{
-              width: "100%"
-            }}
-          >
-            <Paragraph
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-              style={{
-                maxWidth: "100%",
-                textAlign: "center"
-              }}
-            >
-              By subscribing, you agree to our{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/tos")
-                    .catch(() => {})
-                    .then(() => {});
-                }}
-                style={{
-                  textDecorationLine: "underline"
-                }}
-                color={colors.primary.accent}
-              >
-                Terms of Service{" "}
-              </Paragraph>
-              and{" "}
-              <Paragraph
-                size={AppFontSize.xs}
-                onPress={() => {
-                  openLinkInBrowser("https://notesnook.com/privacy")
-                    .catch(() => {})
-                    .then(() => {});
-                }}
-                style={{
-                  textDecorationLine: "underline"
-                }}
-                color={colors.primary.accent}
-              >
-                Privacy Policy.
-              </Paragraph>
-            </Paragraph>
-          </View>
-        </>
-      ) : null}
-
-      <Dialog context="local" />
-    </View>
-  );
-};

apps/mobile/app/components/premium/pro-tag.js

@@ -1,60 +0,0 @@
-/*
-This file is part of the Notesnook project (https://notesnook.com/)
-
-Copyright (C) 2023 Streetwriters (Private) Limited
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-GNU General Public License for more details.
-
-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 React from "react";
-import { View } from "react-native";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useThemeColors } from "@notesnook/theme";
-import Paragraph from "../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../utils/styles";
-
-/**
- *
- * @param {any} param0
- * @returns
- */
-export const ProTag = ({ width, size, background }) => {
-  const { colors } = useThemeColors();
-
-  return (
-    <View
-      style={{
-        backgroundColor: background || colors.primary.background,
-        borderRadius: 100,
-        width: width || 60,
-        justifyContent: "center",
-        alignItems: "center",
-        paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL / 2,
-        flexDirection: "row"
-      }}
-    >
-      <Icon
-        style={{
-          marginRight: 3
-        }}
-        size={size}
-        color={colors.primary.accent}
-        name="crown"
-      />
-      <Paragraph size={size - 1.5} color={colors.primary.accent}>
-        PRO
-      </Paragraph>
-    </View>
-  );
-};

apps/mobile/app/components/properties/color-tags.tsx

@@ -25,7 +25,7 @@ import { FlashList } from "@shopify/flash-list";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { notesnook } from "../../../e2e/test.ids";
 import { db } from "../../common/database";
-import { eSendEvent } from "../../services/event-manager";
+import { eSendEvent, ToastManager } from "../../services/event-manager";
 import Navigation from "../../services/navigation";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useRelationStore } from "../../stores/use-relation-store";
@@ -38,6 +38,8 @@ import NativeTooltip from "../../utils/tooltip";
 import { Pressable } from "../ui/pressable";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import { isFeatureAvailable, useIsFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
 
 const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
   const { colors } = useThemeColors();
@@ -95,6 +97,7 @@ const ColorItem = ({ item, note }: { item: Color; note: Note }) => {
 };
 
 export const ColorTags = ({ item }: { item: Note }) => {
+  const colorFeature = useIsFeatureAvailable("colors");
   const { colors } = useThemeColors();
   const colorNotes = useMenuStore((state) => state.colorNotes);
   const isTablet = useSettingStore((state) => state.deviceMode) !== "mobile";
@@ -109,6 +112,24 @@ export const ColorTags = ({ item }: { item: Note }) => {
     [note]
   );
 
+  const onPress = React.useCallback(async () => {
+    if (colorFeature && !colorFeature.isAllowed) {
+      ToastManager.show({
+        message: colorFeature.error,
+        type: "info",
+        context: "local",
+        actionText: strings.upgrade(),
+        func: () => {
+          PaywallSheet.present(colorFeature);
+          ToastManager.hide();
+        }
+      });
+      return;
+    }
+    useSettingStore.getState().setSheetKeyboardHandler(false);
+    setVisible(true);
+  }, []);
+
   return (
     <>
       <ColorPicker
@@ -133,10 +154,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
       >
         {!colorNotes || !colorNotes.length ? (
           <Button
-            onPress={async () => {
-              useSettingStore.getState().setSheetKeyboardHandler(false);
-              setVisible(true);
-            }}
+            onPress={onPress}
             buttonType={{
               text: colors.primary.accent
             }}
@@ -172,10 +190,7 @@ export const ColorTags = ({ item }: { item: Note }) => {
                   marginRight: 5
                 }}
                 type="secondary"
-                onPress={() => {
-                  useSettingStore.getState().setSheetKeyboardHandler(false);
-                  setVisible(true);
-                }}
+                onPress={onPress}
               >
                 <Icon
                   testID="icon-plus"

apps/mobile/app/components/properties/index.js

@@ -21,13 +21,14 @@ import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
 import { FlatList } from "react-native-actions-sheet";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { DDS } from "../../services/device-detection";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { ColorValues } from "../../utils/colors";
 import { eOnLoadNote } from "../../utils/events";
 import { fluidTabsRef } from "../../utils/global-refs";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import SheetProvider from "../sheet-provider";
 import { IconButton } from "../ui/icon-button";
 import { Pressable } from "../ui/pressable";
@@ -38,8 +39,6 @@ import { DateMeta } from "./date-meta";
 import { Items } from "./items";
 import Notebooks from "./notebooks";
 import { TagStrip, Tags } from "./tags";
-import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { DefaultAppStyles } from "../../utils/styles";
 
 const Line = ({ top = 6, bottom = 6 }) => {
   const { colors } = useThemeColors();
@@ -151,7 +150,8 @@ export const Properties = ({ close = () => {}, item, buttons = [] }) => {
               ) : null}
             </View>
 
-            {item.type === "notebook" && item.description ? (
+            {(item.type === "notebook" || item.type === "reminder") &&
+            item.description ? (
               <Paragraph>{item.description}</Paragraph>
             ) : null}
 

apps/mobile/app/components/properties/items.tsx

@@ -27,8 +27,9 @@ import { Action, ActionId, useActions } from "../../hooks/use-actions";
 import { useStoredRef } from "../../hooks/use-stored-ref";
 import { DDS } from "../../services/device-detection";
 import { useSettingStore } from "../../stores/use-setting-store";
-import { AppFontSize } from "../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../utils/size";
 import { DefaultAppStyles } from "../../utils/styles";
+import AppIcon from "../ui/AppIcon";
 import { Button } from "../ui/button";
 import { Pressable } from "../ui/pressable";
 import Paragraph from "../ui/typography/paragraph";
@@ -65,7 +66,9 @@ const COLUMN_BAR_ITEMS: ActionId[] = [
   "edit-notebook",
   "move-notes",
   "move-notebook",
+  "edit-reminder",
   "pin",
+  "disable-reminder",
   "default-notebook",
   "default-tag",
   "default-homepage",
@@ -143,7 +146,8 @@ export const Items = ({
         key={item.id}
         style={{
           alignItems: "center",
-          width: columnItemWidth - 8
+          width: columnItemWidth - 8,
+          opacity: item.locked ? 0.5 : 1
         }}
       >
         <Pressable
@@ -218,7 +222,8 @@ export const Items = ({
           borderRadius: 0,
           justifyContent: "flex-start",
           alignSelf: "flex-start",
-          width: "100%"
+          width: "100%",
+          opacity: item.locked ? 0.5 : 1
         }}
       />
     ),
@@ -242,7 +247,9 @@ export const Items = ({
           key={item.id}
           testID={"icon-" + item.id}
           style={{
-            width: columnItemWidth - 8
+            width: columnItemWidth - 8,
+            alignSelf: "flex-start",
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
         >
           <View
@@ -250,7 +257,13 @@ export const Items = ({
               height: columnItemWidth / 2,
               width: columnItemWidth - DefaultAppStyles.GAP_SMALL,
               justifyContent: "center",
-              alignItems: "center"
+              alignItems: "center",
+              borderWidth: 1,
+              borderRadius: defaultBorderRadius,
+              borderColor: item.checked
+                ? item.activeColor || colors.primary.accent
+                : colors.primary.border,
+              overflow: "hidden"
             }}
           >
             <Icon
@@ -265,6 +278,28 @@ export const Items = ({
                   : colors.secondary.icon
               }
             />
+
+            {item.locked ? (
+              <View
+                style={{
+                  width: 20,
+                  height: 20,
+                  borderRadius: 100,
+                  backgroundColor: colors.primary.accent,
+                  justifyContent: "center",
+                  alignItems: "center",
+                  position: "absolute",
+                  bottom: -3,
+                  right: -3
+                }}
+              >
+                <AppIcon
+                  color={colors.static.orange}
+                  size={AppFontSize.xxxs}
+                  name="crown"
+                />
+              </View>
+            ) : null}
           </View>
 
           <Paragraph
@@ -322,16 +357,21 @@ export const Items = ({
               paginationStyle={{
                 position: "relative",
                 marginHorizontal: 2,
-                marginBottom: 0,
-                marginTop: DefaultAppStyles.GAP
+                marginBottom: -10,
+                marginTop: 10
               }}
+              contentContainerStyle={{
+                justifyContent: "flex-start",
+                alignItems: "flex-start",
+                alignSelf: "flex-start"
+              }}
+              centerContent={false}
               renderItem={({ item, index }) => (
                 <View
                   style={{
                     flexDirection: "row",
                     paddingHorizontal: DefaultAppStyles.GAP,
-                    gap: 5,
-                    width: width
+                    gap: 5
                   }}
                 >
                   {item.map(renderTopBarItem)}

apps/mobile/app/components/properties/tags.js

@@ -17,18 +17,18 @@ 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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useEffect, useState } from "react";
 import { View } from "react-native";
 import { db } from "../../common/database";
+import ManageTags from "../../screens/manage-tags";
 import { TaggedNotes } from "../../screens/notes/tagged";
-import { useThemeColors } from "@notesnook/theme";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import { ColorTags } from "./color-tags";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
-import ManageTags from "../../screens/manage-tags";
 
 export const Tags = ({ item, close }) => {
   const { colors } = useThemeColors();
@@ -86,7 +86,6 @@ export const TagStrip = ({ item, close }) => {
         flexDirection: "row",
         flexWrap: "wrap",
         alignItems: "center",
-        marginTop: DefaultAppStyles.GAP_VERTICAL,
         gap: 5
       }}
     >
@@ -107,16 +106,13 @@ const TagItem = ({ tag, close }) => {
 
   const style = {
     paddingHorizontal: 0,
-    borderRadius: 100,
-    marginTop: 0,
-    backgroundColor: "transparent"
+    paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
   };
   return (
     <Button
       onPress={onPress}
       title={"#" + tag.title}
       type="plain"
-      height={20}
       fontSize={AppFontSize.xs}
       style={style}
       textStyle={{

apps/mobile/app/components/selection-header/index.tsx

@@ -87,7 +87,7 @@ export const SelectionHeader = React.memo(
 
     const restoreItem = async () => {
       if (!selectedItemsList.length) return;
-      if ((await db.trash.restore(...selectedItemsList)) === false) return;
+      await db.trash.restore(...selectedItemsList);
       Navigation.queueRoutesForUpdate();
 
       clearSelection();

apps/mobile/app/components/sheet-provider/index.js

@@ -224,7 +224,6 @@ const SheetProvider = ({ context = "global" }) => {
                 marginBottom: DefaultAppStyles.GAP_VERTICAL
               }}
               width="100%"
-              fontSize={AppFontSize.md}
             />
           ))}
 

apps/mobile/app/components/sheets/buy-plan/index.tsx

@@ -0,0 +1,495 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+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 { Plan, SKUResponse } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import dayjs from "dayjs";
+import React, { useEffect, useState } from "react";
+import {
+  Linking,
+  ScrollView,
+  Text,
+  TouchableOpacity,
+  View
+} from "react-native";
+import Config from "react-native-config";
+import * as RNIap from "react-native-iap";
+import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+import { WebView } from "react-native-webview";
+import { db } from "../../../common/database";
+import usePricingPlans from "../../../hooks/use-pricing-plans";
+import { ToastManager } from "../../../services/event-manager";
+import { openLinkInBrowser } from "../../../utils/functions";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+const isGithubRelease = Config.GITHUB_RELEASE === "true";
+export const BuyPlan = (props: {
+  planId: string;
+  canActivateTrial?: boolean;
+  pricingPlans: ReturnType<typeof usePricingPlans>;
+}) => {
+  const { colors } = useThemeColors();
+  const [checkoutUrl, setCheckoutUrl] = useState<string>();
+  const pricingPlans = props.pricingPlans;
+
+  const billingDuration = pricingPlans.getBillingDuration(
+    pricingPlans.selectedProduct as RNIap.Subscription,
+    0,
+    0,
+    true
+  );
+  const is5YearPlanSelected = (
+    isGithubRelease
+      ? (pricingPlans.selectedProduct as Plan)?.period
+      : (pricingPlans.selectedProduct as RNIap.Product)?.productId
+  )?.includes("5");
+
+  return checkoutUrl ? (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <Paragraph>{strings.finishPurchaseInBrowser()}</Paragraph>
+      <Button
+        title={strings.next()}
+        type="accent"
+        onPress={() => {
+          pricingPlans.finish();
+        }}
+      />
+      <Button
+        title={strings.goBack()}
+        onPress={() => {
+          setCheckoutUrl(undefined);
+        }}
+      />
+    </View>
+  ) : (
+    <ScrollView
+      contentContainerStyle={{
+        marginTop: DefaultAppStyles.GAP_VERTICAL
+      }}
+      keyboardDismissMode="none"
+      keyboardShouldPersistTaps="always"
+    >
+      <View
+        style={{
+          paddingHorizontal: DefaultAppStyles.GAP,
+          gap: DefaultAppStyles.GAP_VERTICAL
+        }}
+      >
+        {[
+          Config.GITHUB_RELEASE === "true"
+            ? "yearly"
+            : `notesnook.${props.planId}.yearly`,
+          Config.GITHUB_RELEASE === "true"
+            ? "monthly"
+            : `notesnook.${props.planId}.monthly`,
+          ...(props.planId === "essential" || pricingPlans.isSubscribed()
+            ? []
+            : [
+                Config.GITHUB_RELEASE === "true"
+                  ? "5-year"
+                  : `notesnook.${props.planId}.5year`
+              ])
+        ].map((item) => (
+          <ProductItem
+            key={item}
+            pricingPlans={pricingPlans}
+            productId={item}
+          />
+        ))}
+
+        <View
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+            borderWidth: 1,
+            borderColor: colors.primary.border,
+            padding: DefaultAppStyles.GAP,
+            borderRadius: defaultBorderRadius
+          }}
+        >
+          <Heading color={colors.primary.paragraph} size={AppFontSize.sm}>
+            {strings.dueToday()}{" "}
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            ) ? (
+              <Text
+                style={{
+                  color: colors.primary.accent
+                }}
+              >
+                ({strings.daysFree(`${billingDuration?.duration || 0}`)})
+              </Text>
+            ) : null}
+          </Heading>
+
+          <Paragraph color={colors.primary.paragraph}>
+            {pricingPlans.hasTrialOffer(
+              props.planId,
+              (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+                (pricingPlans?.selectedProduct as Plan)?.period
+            )
+              ? "FREE"
+              : pricingPlans.getStandardPrice(
+                  pricingPlans.selectedProduct as RNIap.Subscription
+                )}
+          </Paragraph>
+        </View>
+
+        {pricingPlans.hasTrialOffer(
+          props.planId,
+          (pricingPlans?.selectedProduct as RNIap.Product)?.productId ||
+            (pricingPlans?.selectedProduct as Plan)?.period
+        ) ? (
+          <View
+            style={{
+              flexDirection: "row",
+              justifyContent: "space-between",
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: defaultBorderRadius
+            }}
+          >
+            <Paragraph color={colors.secondary.paragraph}>
+              {strings.due(
+                dayjs()
+                  .add(billingDuration?.duration || 0, "day")
+                  .format("DD MMMM")
+              )}
+            </Paragraph>
+            <Paragraph color={colors.secondary.paragraph}>
+              {pricingPlans.getStandardPrice(
+                pricingPlans.selectedProduct as RNIap.Subscription
+              )}
+            </Paragraph>
+          </View>
+        ) : null}
+
+        {pricingPlans.hasTrialOffer(
+          props.planId,
+          (pricingPlans.selectedProduct as RNIap.Product)?.productId ||
+            (pricingPlans.selectedProduct as Plan)?.period
+        ) || is5YearPlanSelected ? (
+          <View
+            style={{
+              gap: DefaultAppStyles.GAP_VERTICAL,
+              borderWidth: 1,
+              borderColor: colors.primary.border,
+              padding: DefaultAppStyles.GAP,
+              borderRadius: defaultBorderRadius
+            }}
+          >
+            {(is5YearPlanSelected
+              ? strings["5yearPlanConditions"]()
+              : [
+                  strings.trialPlanConditions[0](
+                    billingDuration?.duration as number
+                  ),
+                  strings.trialPlanConditions[1](0)
+                ]
+            ).map((item) => (
+              <View
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  gap: 10
+                }}
+                key={item}
+              >
+                <Icon
+                  color={colors.primary.accent}
+                  size={AppFontSize.lg}
+                  name="check"
+                />
+                <Paragraph>{item}</Paragraph>
+              </View>
+            ))}
+          </View>
+        ) : null}
+
+        <Button
+          width="100%"
+          type="accent"
+          loading={pricingPlans.loading}
+          title={
+            is5YearPlanSelected
+              ? strings.purchase()
+              : pricingPlans?.userCanRequestTrial
+              ? strings.subscribeAndStartTrial()
+              : strings.subscribe()
+          }
+          onPress={async () => {
+            if (isGithubRelease) {
+              const url = await db.subscriptions.checkoutUrl(
+                (pricingPlans.selectedProduct as Plan).plan,
+                (pricingPlans.selectedProduct as Plan).period
+              );
+              if (url) {
+                setCheckoutUrl(url);
+                Linking.openURL(url);
+              }
+              return;
+            }
+
+            const offerToken = pricingPlans.getOfferTokenAndroid(
+              pricingPlans.selectedProduct as RNIap.SubscriptionAndroid,
+              0
+            );
+            pricingPlans.subscribe(
+              pricingPlans.selectedProduct as RNIap.Subscription,
+              offerToken
+            );
+          }}
+        />
+
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+          color={colors.secondary.paragraph}
+          size={AppFontSize.xs}
+        >
+          {is5YearPlanSelected
+            ? strings.oneTimePurchase()
+            : strings.cancelAnytimeAlt()}
+        </Paragraph>
+        <Paragraph
+          style={{
+            textAlign: "center"
+          }}
+          color={colors.secondary.paragraph}
+          size={AppFontSize.xs}
+        >
+          {strings.subTerms[0]()}{" "}
+          <Text
+            style={{
+              textDecorationLine: "underline"
+            }}
+            onPress={() => {
+              openLinkInBrowser("https://notesnook.com/privacy");
+            }}
+          >
+            {strings.subTerms[1]()}
+          </Text>{" "}
+          {strings.subTerms[2]()}{" "}
+          <Text
+            style={{
+              textDecorationLine: "underline"
+            }}
+            onPress={() => {
+              openLinkInBrowser("https://notesnook.com/tos");
+            }}
+          >
+            {strings.subTerms[3]()}
+          </Text>
+        </Paragraph>
+      </View>
+    </ScrollView>
+  );
+};
+
+const ProductItem = (props: {
+  pricingPlans: ReturnType<typeof usePricingPlans>;
+  productId: string;
+}) => {
+  const { colors } = useThemeColors();
+  const [regionalDiscount, setRegionaDiscount] = useState<SKUResponse>();
+  const product =
+    props.pricingPlans?.currentPlan?.subscriptions?.[
+      regionalDiscount?.sku || props.productId
+    ] ||
+    props.pricingPlans?.currentPlan?.products?.[props.productId] ||
+    props.pricingPlans?.getWebPlan(
+      props.pricingPlans?.currentPlan?.id as string,
+      props.productId as "monthly" | "yearly"
+    );
+
+  const isAnnual = isGithubRelease
+    ? (product as Plan)?.period === "yearly"
+    : (product as RNIap.Subscription)?.productId?.includes("yearly");
+
+  const isSelected = isGithubRelease
+    ? (product as Plan)?.period ===
+      (props.pricingPlans.selectedProduct as Plan)?.period
+    : (product as RNIap.Subscription)?.productId ===
+      (props.pricingPlans.selectedProduct as RNIap.Subscription)?.productId;
+
+  const is5YearProduct = (
+    isGithubRelease
+      ? (product as Plan)?.period
+      : (product as RNIap.Product)?.productId
+  )?.includes("5");
+
+  const isSubscribed =
+    props.pricingPlans.isSubscribed() &&
+    (props.pricingPlans.user?.subscription?.productId ===
+      (product as RNIap.Subscription)?.productId ||
+      props.pricingPlans.user?.subscription?.productId.startsWith(
+        (product as RNIap.Subscription)?.productId
+      ) ||
+      props.pricingPlans.user?.subscription?.productId ===
+        (product as Plan).id);
+
+  useEffect(() => {
+    props.pricingPlans
+      ?.getRegionalDiscount(
+        props.pricingPlans.currentPlan?.id as string,
+        props.pricingPlans.isGithubRelease
+          ? ((product as Plan)?.period as string)
+          : props.productId
+      )
+      .then((value) => {
+        if (
+          value &&
+          value.sku?.startsWith(
+            (props.pricingPlans.selectedProduct as RNIap.Subscription)
+              ?.productId
+          )
+        ) {
+          props.pricingPlans.selectProduct(value?.sku as string);
+        }
+        setRegionaDiscount(value);
+      });
+  }, []);
+
+  return (
+    <TouchableOpacity
+      style={{
+        flexDirection: "row",
+        gap: 10,
+        opacity: isSubscribed ? 0.5 : 1
+      }}
+      activeOpacity={0.9}
+      onPress={() => {
+        if (isSubscribed) {
+          ToastManager.show({
+            message: strings.alreadySubscribed(),
+            type: "info"
+          });
+          return;
+        }
+        if (!product) return;
+        props.pricingPlans.selectProduct(
+          isGithubRelease
+            ? (product as Plan)?.period
+            : (product as RNIap.Subscription)?.productId
+        );
+      }}
+    >
+      <Icon
+        name={isSelected ? "radiobox-marked" : "radiobox-blank"}
+        color={isSelected ? colors.primary.accent : colors.secondary.icon}
+        size={AppFontSize.lg}
+      />
+      <View>
+        <View
+          style={{
+            flexDirection: "row",
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL
+          }}
+        >
+          <Heading size={AppFontSize.md}>
+            {isAnnual
+              ? strings.yearly()
+              : is5YearProduct
+              ? strings.fiveYearPlan()
+              : strings.monthly()}
+          </Heading>
+
+          {(isAnnual && !isGithubRelease) ||
+          (isGithubRelease && (product as Plan)?.discount?.amount) ? (
+            <View
+              style={{
+                backgroundColor: colors.static.red,
+                borderRadius: defaultBorderRadius,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <Heading color={colors.static.white} size={AppFontSize.xs}>
+                {strings.bestValue()} -{" "}
+                {strings.percentOff(
+                  (regionalDiscount
+                    ? regionalDiscount.discount
+                    : isGithubRelease
+                    ? (product as Plan).discount?.amount
+                    : props.pricingPlans.compareProductPrice(
+                        props.pricingPlans.currentPlan?.id as string,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.yearly`,
+                        `notesnook.${props.pricingPlans.currentPlan?.id}.monthly`
+                      )) as string
+                )}
+              </Heading>
+            </View>
+          ) : null}
+
+          {isSubscribed ? (
+            <View
+              style={{
+                backgroundColor: colors.primary.accent,
+                borderRadius: defaultBorderRadius,
+                paddingHorizontal: 6,
+                alignItems: "center",
+                justifyContent: "center"
+              }}
+            >
+              <Heading color={colors.static.white} size={AppFontSize.xs}>
+                {strings.currentPlan()}
+              </Heading>
+            </View>
+          ) : null}
+        </View>
+
+        <Paragraph size={AppFontSize.md}>
+          {isAnnual || is5YearProduct
+            ? `${props.pricingPlans.getPrice(
+                product as RNIap.Subscription,
+                props.pricingPlans.hasTrialOffer(
+                  undefined,
+                  (product as RNIap.Subscription)?.productId
+                )
+                  ? 1
+                  : 0,
+                isAnnual
+              )}/${strings.month()}`
+            : null}
+
+          {!isAnnual && !is5YearProduct
+            ? `${props.pricingPlans.getStandardPrice(
+                product as RNIap.Subscription
+              )}/${strings.month()}`
+            : null}
+        </Paragraph>
+      </View>
+    </TouchableOpacity>
+  );
+};

apps/mobile/app/components/sheets/export-notes/index.tsx

@@ -39,16 +39,13 @@ import {
   presentSheet
 } from "../../../services/event-manager";
 import Exporter from "../../../services/exporter";
-import PremiumService from "../../../services/premium";
 import { useSettingStore } from "../../../stores/use-setting-store";
-import { useUserStore } from "../../../stores/use-user-store";
 import { getElevationStyle } from "../../../utils/elevation";
 import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import { sleep } from "../../../utils/time";
 import { Dialog } from "../../dialog";
 import DialogHeader from "../../dialog/dialog-header";
-import { ProTag } from "../../premium/pro-tag";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import { Pressable } from "../../ui/pressable";
@@ -79,13 +76,11 @@ const ExportNotesSheet = ({
     | undefined
   >();
   const [status, setStatus] = useState<string>();
-  const premium = useUserStore((state) => state.premium);
 
   const exportNoteAs = async (
     type: "pdf" | "txt" | "md" | "html" | "md-frontmatter"
   ) => {
     if (exporting) return;
-    if (!PremiumService.get() && type !== "txt") return;
     setExporting(true);
     update?.({ disableClosing: true } as PresentSheetOptions);
     setComplete(false);
@@ -123,8 +118,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("pdf");
       },
       icon: "file-pdf-box",
-      id: notesnook.ids.dialogs.export.pdf,
-      pro: premium
+      id: notesnook.ids.dialogs.export.pdf
     },
     {
       title: "Markdown",
@@ -132,8 +126,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("md");
       },
       icon: "language-markdown",
-      id: notesnook.ids.dialogs.export.md,
-      pro: premium
+      id: notesnook.ids.dialogs.export.md
     },
     {
       title: "Markdown + Frontmatter",
@@ -141,8 +134,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("md-frontmatter");
       },
       icon: "language-markdown",
-      id: notesnook.ids.dialogs.export.md,
-      pro: premium
+      id: notesnook.ids.dialogs.export.md
     },
     {
       title: "Plain Text",
@@ -150,8 +142,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("txt");
       },
       icon: "card-text",
-      id: notesnook.ids.dialogs.export.text,
-      pro: true
+      id: notesnook.ids.dialogs.export.text
     },
     {
       title: "HTML",
@@ -159,8 +150,7 @@ const ExportNotesSheet = ({
         await exportNoteAs("html");
       },
       icon: "language-html5",
-      id: notesnook.ids.dialogs.export.html,
-      pro: premium
+      id: notesnook.ids.dialogs.export.html
     }
   ];
 
@@ -200,8 +190,7 @@ const ExportNotesSheet = ({
                   paddingVertical: DefaultAppStyles.GAP_VERTICAL,
                   justifyContent: "flex-start",
                   borderRadius: 0,
-                  paddingHorizontal: DefaultAppStyles.GAP,
-                  opacity: item.pro ? 1 : 0.5
+                  paddingHorizontal: DefaultAppStyles.GAP
                 }}
               >
                 <View
@@ -216,9 +205,7 @@ const ExportNotesSheet = ({
                 >
                   <Icon
                     name={item.icon}
-                    color={
-                      item.pro ? colors.primary.accent : colors.primary.icon
-                    }
+                    color={colors.primary.icon}
                     size={AppFontSize.xxxl + 10}
                   />
                 </View>
@@ -227,7 +214,6 @@ const ExportNotesSheet = ({
                     flexShrink: 1
                   }}
                 >
-                  {!item.pro ? <ProTag size={12} /> : null}
                   <Heading style={{ marginLeft: 10 }} size={AppFontSize.md}>
                     {item.title}
                   </Heading>
@@ -298,7 +284,6 @@ const ExportNotesSheet = ({
                   }
                   type="accent"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
@@ -328,7 +313,6 @@ const ExportNotesSheet = ({
                   title={strings.share()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}
@@ -360,7 +344,6 @@ const ExportNotesSheet = ({
                   title={strings.exportAgain()}
                   type="secondaryAccented"
                   width={250}
-                  fontSize={AppFontSize.md}
                   style={{
                     marginTop: DefaultAppStyles.GAP_VERTICAL
                   }}

apps/mobile/app/components/sheets/export-notes/share.jsx

@@ -36,7 +36,6 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.open()}
         type="accent"
         width="100%"
-        fontSize={AppFontSize.md}
         onPress={async () => {
           FileViewer.open(uri, {
             showOpenWithDialog: true,
@@ -54,7 +53,6 @@ export const ShareComponent = ({ uri, name, padding }) => {
         title={strings.share()}
         type="shade"
         width="100%"
-        fontSize={AppFontSize.md}
         style={{
           marginTop: DefaultAppStyles.GAP_VERTICAL
         }}

apps/mobile/app/components/sheets/github/issue.js

@@ -36,6 +36,7 @@ import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
 import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../../utils/styles";
+import Config from "react-native-config";
 
 export const Issue = ({ defaultTitle, defaultBody, issueTitle }) => {
   const { colors } = useThemeColors();
@@ -67,7 +68,8 @@ App version: ${getVersion()}
 Platform: ${Platform.OS}
 Device: ${getBrand() || ""}-${getModel() || ""}-${getSystemVersion() || ""}
 Pro: ${PremiumService.get()}
-Logged in: ${user ? "yes" : "no"}`,
+Logged in: ${user ? "yes" : "no"}
+Github Release: ${Config.GITHUB_RELEASE === "true" ? "Yes" : "No"}`,
         userId: user?.id
       });
       if (!issueUrl.current) {
@@ -159,7 +161,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
               padding: DefaultAppStyles.GAP,
-              fontFamily: "OpenSans-Regular",
+              fontFamily: "Inter-Regular",
               marginBottom: DefaultAppStyles.GAP_VERTICAL,
               fontSize: AppFontSize.md,
               color: colors.primary.heading
@@ -192,7 +194,7 @@ Logged in: ${user ? "yes" : "no"}`,
               borderColor: colors.primary.border,
               borderRadius: defaultBorderRadius,
               padding: DefaultAppStyles.GAP,
-              fontFamily: "OpenSans-Regular",
+              fontFamily: "Inter-Regular",
               maxHeight: 200,
               fontSize: AppFontSize.sm,
               marginBottom: 2.5,

apps/mobile/app/components/sheets/link-note/index.tsx

@@ -16,6 +16,7 @@ GNU General Public License for more details.
 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 { useIsFeatureAvailable } from "@notesnook/common";
 import {
   ContentBlock,
   Note,
@@ -33,12 +34,12 @@ import { db } from "../../../common/database";
 import { useDBItem } from "../../../hooks/use-db-item";
 import { editorController } from "../../../screens/editor/tiptap/utils";
 import { presentSheet } from "../../../services/event-manager";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import { Button } from "../../ui/button";
 import Input from "../../ui/input";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const ListNoteItem = ({
   id,
@@ -146,6 +147,7 @@ export default function LinkNote(props: {
   onLinkCreated: () => void;
   close?: (ctx?: string) => void;
 }) {
+  const blockLinking = useIsFeatureAvailable("blockLinking");
   const { colors } = useThemeColors();
   const query = useRef<string>();
   const [notes, setNotes] = useState<VirtualizedGrouping<Note>>();
@@ -327,7 +329,31 @@ export default function LinkNote(props: {
           keyboardShouldPersistTaps="handled"
           windowSize={3}
           keyExtractor={(item) => item.id}
-          data={nodes}
+          ListEmptyComponent={
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_VERTICAL,
+                backgroundColor: colors.secondary.background,
+                padding: DefaultAppStyles.GAP,
+                borderRadius: defaultBorderRadius,
+                borderWidth: 0.5,
+                borderColor: colors.secondary.border,
+                alignItems: "center"
+              }}
+            >
+              <Paragraph color={colors.secondary.paragraph}>
+                {blockLinking?.error}
+              </Paragraph>
+              <Button
+                title={strings.upgradePlan()}
+                style={{
+                  width: "100%"
+                }}
+                type="accent"
+              />
+            </View>
+          }
+          data={blockLinking?.isAllowed ? nodes : []}
         />
       ) : (
         <FlatList

apps/mobile/app/components/sheets/menu-item-properties/index.tsx

@@ -17,11 +17,16 @@ 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 { useAreFeaturesAvailable } from "@notesnook/common";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import { View } from "react-native";
-import { eSendEvent, presentSheet } from "../../../services/event-manager";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
 import SettingsService from "../../../services/settings";
 import { eCloseSheet } from "../../../utils/events";
 import { SideMenuItem } from "../../../utils/menu-items";
@@ -31,9 +36,14 @@ import { useSideBarDraggingStore } from "../../side-menu/dragging-store";
 import AppIcon from "../../ui/AppIcon";
 import { Pressable } from "../../ui/pressable";
 import Paragraph from "../../ui/typography/paragraph";
+import PaywallSheet from "../paywall";
 export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
   const { colors } = useThemeColors();
-  return (
+  const featuresAvailable = useAreFeaturesAvailable([
+    "customHomepage",
+    "customizableSidebar"
+  ]);
+  return !featuresAvailable ? null : (
     <View
       style={{
         width: "100%",
@@ -44,24 +54,52 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
       {[
         {
           title: strings.setAsHomepage(),
-          onPress: () => {
+          onPress: async () => {
+            if (!featuresAvailable?.customHomepage.isAllowed) {
+              ToastManager.show({
+                message: featuresAvailable?.customHomepage.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(featuresAvailable?.customHomepage);
+                }
+              });
+              return;
+            }
             SettingsService.setProperty("homepageV2", {
               id: item.id,
               type: "default"
             });
             eSendEvent(eCloseSheet);
           },
-          icon: "home-outline"
+          icon: "home-outline",
+          type: "switch",
+          state: SettingsService.getProperty("homepageV2")?.id === item.id,
+          locked: !featuresAvailable?.customHomepage.isAllowed
         },
         {
           title: strings.reorder(),
-          onPress: () => {
+          onPress: async () => {
+            if (!featuresAvailable?.customizableSidebar.isAllowed) {
+              ToastManager.show({
+                message: featuresAvailable?.customizableSidebar.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(featuresAvailable?.customizableSidebar);
+                }
+              });
+              return;
+            }
             useSideBarDraggingStore.setState({
               dragging: true
             });
             eSendEvent(eCloseSheet);
           },
-          icon: "sort-ascending"
+          icon: "sort-ascending",
+          locked: !featuresAvailable?.customizableSidebar.isAllowed
         }
       ].map((item) => (
         <Pressable
@@ -73,18 +111,42 @@ export const MenuItemProperties = ({ item }: { item: SideMenuItem }) => {
             justifyContent: "flex-start",
             gap: DefaultAppStyles.GAP_SMALL,
             borderRadius: 0,
-            paddingHorizontal: DefaultAppStyles.GAP
+            paddingHorizontal: DefaultAppStyles.GAP,
+            opacity: item.locked ? 0.6 : 1
           }}
           onPress={() => {
             item.onPress();
           }}
         >
-          <AppIcon
-            color={colors.secondary.icon}
-            name={item.icon}
-            size={AppFontSize.xl}
-          />
-          <Paragraph>{item.title}</Paragraph>
+          <View
+            style={{
+              flexDirection: "row",
+              alignItems: "center",
+              gap: DefaultAppStyles.GAP_SMALL
+            }}
+          >
+            <AppIcon
+              color={colors.secondary.icon}
+              name={item.icon}
+              size={AppFontSize.xl}
+            />
+            <Paragraph>{item.title}</Paragraph>
+          </View>
+          {item.locked ? (
+            <AppIcon
+              name="lock"
+              size={AppFontSize.lg}
+              color={colors.primary.icon}
+              style={{ marginLeft: "auto" }}
+            />
+          ) : item.type === "switch" && item.state ? (
+            <AppIcon
+              name="check"
+              size={AppFontSize.lg}
+              color={colors.primary.accent}
+              style={{ marginLeft: "auto" }}
+            />
+          ) : null}
         </Pressable>
       ))}
     </View>

apps/mobile/app/components/sheets/notebooks/index.tsx

@@ -27,7 +27,8 @@ import NotebookScreen from "../../../screens/notebook";
 import {
   eSendEvent,
   eSubscribeEvent,
-  presentSheet
+  presentSheet,
+  ToastManager
 } from "../../../services/event-manager";
 import {
   createNotebookTreeStores,
@@ -38,13 +39,14 @@ import { eCloseSheet, eOnNotebookUpdated } from "../../../utils/events";
 import { AppFontSize } from "../../../utils/size";
 import { DefaultAppStyles } from "../../../utils/styles";
 import { sleep } from "../../../utils/time";
+import { Dialog } from "../../dialog";
 import { Properties } from "../../properties";
-import SheetProvider from "../../sheet-provider";
 import { NotebookItem } from "../../side-menu/notebook-item";
-import { useSideMenuNotebookTreeStore } from "../../side-menu/stores";
 import { IconButton } from "../../ui/icon-button";
 import Paragraph from "../../ui/typography/paragraph";
 import { AddNotebookSheet } from "../add-notebook";
+import { isFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../paywall";
 
 const {
   useNotebookExpandedStore,
@@ -60,13 +62,8 @@ export const Notebooks = (props: {
   close?: (ctx?: string) => void;
 }) => {
   const tree = useNotebookTreeStore((state) => state.tree);
-  const [isLoading, setIsLoading] = useState(true);
   const { colors } = useThemeColors();
   const [notebooks, setNotebooks] = useState<Notebook[]>();
-  const [filteredNotebooks, setFilteredNotebooks] =
-    React.useState<VirtualizedGrouping<Notebook>>();
-  const searchTimer = React.useRef<NodeJS.Timeout>();
-  const lastQuery = React.useRef<string>();
   const loadRootNotebooks = React.useCallback(async () => {
     const notebooks = await db.relations
       .from(
@@ -95,7 +92,6 @@ export const Notebooks = (props: {
   useEffect(() => {
     (async () => {
       loadRootNotebooks();
-      setIsLoading(false);
     })();
   }, [loadRootNotebooks]);
 
@@ -151,7 +147,7 @@ export const Notebooks = (props: {
         height: 400
       }}
     >
-      <SheetProvider context="local" />
+      <Dialog context="local" />
 
       <View
         style={{
@@ -174,8 +170,22 @@ export const Notebooks = (props: {
             height: 30
           }}
           name="plus"
-          onPress={() => {
-            AddNotebookSheet.present(props.rootNotebook, undefined, "local");
+          onPress={async () => {
+            const notebooksFeature = await isFeatureAvailable("notebooks");
+            if (!notebooksFeature.isAllowed) {
+              ToastManager.show({
+                message: notebooksFeature.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  ToastManager.hide();
+                  PaywallSheet.present(notebooksFeature);
+                }
+              });
+              return;
+            }
+            AddNotebookSheet.present(undefined, props.rootNotebook, "local");
           }}
         />
       </View>
@@ -244,20 +254,18 @@ const NotebookItemWrapper = React.memo(
     const onItemUpdate = React.useCallback(async () => {
       const notebook = await db.notebooks.notebook(item.notebook.id);
       if (notebook) {
-        useSideMenuNotebookTreeStore
-          .getState()
-          .updateItem(item.notebook.id, notebook);
+        useNotebookTreeStore.getState().updateItem(item.notebook.id, notebook);
         if (expanded) {
-          useSideMenuNotebookTreeStore
+          useNotebookTreeStore
             .getState()
             .setTree(
-              await useSideMenuNotebookTreeStore
+              await useNotebookTreeStore
                 .getState()
                 .fetchAndAdd(item.notebook.id, item.depth + 1)
             );
         }
       } else {
-        useSideMenuNotebookTreeStore.getState().removeItem(item.notebook.id);
+        useNotebookTreeStore.getState().removeItem(item.notebook.id);
       }
     }, [expanded, item.depth, item.notebook.id]);
 
@@ -274,17 +282,15 @@ const NotebookItemWrapper = React.memo(
           onToggleExpanded={async () => {
             useNotebookExpandedStore.getState().setExpanded(item.notebook.id);
             if (!expanded) {
-              useSideMenuNotebookTreeStore
+              useNotebookTreeStore
                 .getState()
                 .setTree(
-                  await useSideMenuNotebookTreeStore
+                  await useNotebookTreeStore
                     .getState()
                     .fetchAndAdd(item.notebook.id, item.depth + 1)
                 );
             } else {
-              useSideMenuNotebookTreeStore
-                .getState()
-                .removeChildren(item.notebook.id);
+              useNotebookTreeStore.getState().removeChildren(item.notebook.id);
             }
           }}
           selected={selected}

apps/mobile/app/components/sheets/paywall/index.tsx

@@ -0,0 +1,266 @@
+import { FeatureId, FeatureResult } from "@notesnook/common";
+import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import { useEffect } from "react";
+import { Platform, View } from "react-native";
+import Config from "react-native-config";
+import usePricingPlans, {
+  PlanOverView
+} from "../../../hooks/use-pricing-plans";
+import {
+  eSendEvent,
+  presentSheet,
+  ToastManager
+} from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import PremiumService from "../../../services/premium";
+import SettingsService from "../../../services/settings";
+import { useUserStore } from "../../../stores/use-user-store";
+import { eCloseSheet } from "../../../utils/events";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { AuthMode } from "../../auth/common";
+import AppIcon from "../../ui/AppIcon";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+const isGithubRelease = Config.GITHUB_RELEASE === "true";
+const INDEX_TO_PLAN = {
+  1: "essential",
+  2: "pro",
+  3: "believer"
+};
+
+export default function PaywallSheet<Tid extends FeatureId>(props: {
+  feature: FeatureResult<Tid>;
+}) {
+  const { colors } = useThemeColors();
+  const pricingPlans = usePricingPlans();
+  useEffect(() => {
+    ToastManager.hide();
+    if (!props.feature.availableOn) return;
+    const plan = pricingPlans.pricingPlans.find(
+      //@ts-ignore
+      (p) => p.id === INDEX_TO_PLAN[props.feature.availableOn]
+    );
+    if (!plan) return;
+    pricingPlans.selectPlan(plan?.id);
+    const product = isGithubRelease
+      ? "yearly"
+      : plan?.subscriptionSkuList?.find((sku) => sku.includes("year"));
+    if (product) {
+      pricingPlans.selectProduct(product);
+    }
+  }, []);
+
+  const isSubscribedOnWeb =
+    PremiumService.get() &&
+    (pricingPlans.user?.subscription?.provider ===
+      SubscriptionProvider.PADDLE ||
+      pricingPlans.user?.subscription?.provider ===
+        SubscriptionProvider.STREETWRITERS);
+
+  const isCurrentPlatform =
+    (pricingPlans.user?.subscription?.provider === SubscriptionProvider.APPLE &&
+      Platform.OS === "ios") ||
+    (pricingPlans.user?.subscription?.provider ===
+      SubscriptionProvider.GOOGLE &&
+      Platform.OS === "android");
+
+  return !pricingPlans.currentPlan ? null : (
+    <View
+      style={{
+        width: "100%",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <>
+        <View
+          style={{
+            width: "100%",
+            paddingHorizontal: DefaultAppStyles.GAP,
+            gap: DefaultAppStyles.GAP_VERTICAL
+          }}
+        >
+          <Paragraph>
+            <AppIcon
+              name="crown"
+              size={AppFontSize.md}
+              color={colors.static.orange}
+            />
+            {strings.upgradePlanTo(pricingPlans.currentPlan?.name)}
+          </Paragraph>
+
+          <View
+            style={{
+              gap: DefaultAppStyles.GAP_VERTICAL_SMALL,
+              width: "100%"
+            }}
+          >
+            <Heading>{strings.tryItForFree()}</Heading>
+
+            <Heading size={AppFontSize.sm}>
+              {strings.getThisAndSoMuchMore()}
+            </Heading>
+
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_SMALL,
+                flexDirection: "row"
+              }}
+            >
+              <AppIcon name="cloud" size={AppFontSize.xxl} />
+              <Paragraph
+                style={{
+                  flexShrink: 1
+                }}
+              >
+                <Heading size={AppFontSize.sm}>
+                  {
+                    PlanOverView[
+                      pricingPlans.currentPlan.id as keyof typeof PlanOverView
+                    ].storage
+                  }
+                </Heading>{" "}
+                {strings.cloudSpace()}
+              </Paragraph>
+            </View>
+
+            {pricingPlans.currentPlan.id !== "essential" ? (
+              <View
+                style={{
+                  gap: DefaultAppStyles.GAP_SMALL,
+                  flexDirection: "row"
+                }}
+              >
+                <AppIcon name="lock" size={AppFontSize.xxl} />
+                <Paragraph
+                  style={{
+                    flexShrink: 1
+                  }}
+                >
+                  <Heading size={AppFontSize.sm}>{strings.appLock()}</Heading>{" "}
+                  {strings.appLockFeatureBenefit()}
+                </Paragraph>
+              </View>
+            ) : null}
+
+            <View
+              style={{
+                gap: DefaultAppStyles.GAP_SMALL,
+                flexDirection: "row"
+              }}
+            >
+              <AppIcon name="vector-link" size={AppFontSize.xxl} />
+              <Paragraph
+                style={{
+                  flexShrink: 1
+                }}
+              >
+                {strings.advancedNoteTaking[0]()}{" "}
+                <Heading size={AppFontSize.sm}>
+                  {strings.advancedNoteTaking[1]()}
+                </Heading>{" "}
+                {strings.advancedNoteTaking[2]()}
+              </Paragraph>
+            </View>
+          </View>
+        </View>
+
+        <View
+          style={{
+            width: "100%",
+            paddingHorizontal: DefaultAppStyles.GAP
+          }}
+        >
+          <Paragraph
+            style={{
+              marginVertical: 10
+            }}
+            size={AppFontSize.xs}
+          >
+            <Heading size={AppFontSize.xs}>{strings.cancelAnytime()}</Heading>{" "}
+            {strings.googleReminderTrial()}
+          </Paragraph>
+
+          <Button
+            type="accent"
+            title={strings.upgrade()}
+            style={{
+              marginVertical: DefaultAppStyles.GAP_VERTICAL,
+              width: "100%"
+            }}
+            onPress={() => {
+              if (PremiumService.get()) {
+                if (
+                  pricingPlans.user?.subscription.plan ===
+                    SubscriptionPlan.LEGACY_PRO ||
+                  !isCurrentPlatform
+                ) {
+                  ToastManager.show({
+                    message: strings.cannotChangePlan(),
+                    context: "local"
+                  });
+                  return;
+                }
+
+                if (isSubscribedOnWeb) {
+                  ToastManager.show({
+                    message: strings.changePlanOnWeb(),
+                    context: "local"
+                  });
+                  return;
+                }
+              }
+
+              eSendEvent(eCloseSheet);
+              if (!useUserStore.getState().user) {
+                Navigation.navigate("Auth", {
+                  mode: AuthMode.login
+                });
+                return;
+              }
+              Navigation.navigate("PayWall", {
+                context: "logged-in",
+                state: {
+                  planId: pricingPlans.currentPlan?.id,
+                  productId: isGithubRelease
+                    ? "yearly"
+                    : (pricingPlans.selectProduct as any).productId,
+                  billingType: "annual"
+                }
+              });
+            }}
+          />
+        </View>
+
+        {isSubscribedOnWeb ? null : (
+          <Button
+            type="plain"
+            title={strings.exploreAllPlans()}
+            icon="arrow-right"
+            iconPosition="right"
+            onPress={() => {
+              eSendEvent(eCloseSheet);
+              Navigation.navigate("PayWall", {
+                context: useUserStore.getState().user
+                  ? "logged-in"
+                  : "logged-out"
+              });
+            }}
+          />
+        )}
+      </>
+    </View>
+  );
+}
+
+PaywallSheet.present = <Tid extends FeatureId>(feature: FeatureResult<Tid>) => {
+  if (SettingsService.getProperty("serverUrls")) return;
+  presentSheet({
+    component: <PaywallSheet feature={feature} />
+  });
+};

apps/mobile/app/components/sheets/plan-limits/index.tsx

@@ -0,0 +1,132 @@
+import {
+  FeatureUsage,
+  formatBytes,
+  getFeature,
+  getFeaturesUsage
+} from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
+import { useEffect, useState } from "react";
+import { Platform, View } from "react-native";
+import { ScrollView } from "react-native-actions-sheet";
+import { eSendEvent, ToastManager } from "../../../services/event-manager";
+import Navigation from "../../../services/navigation";
+import { eCloseSheet } from "../../../utils/events";
+import { AppFontSize } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
+import { Button } from "../../ui/button";
+import Heading from "../../ui/typography/heading";
+import Paragraph from "../../ui/typography/paragraph";
+import { SubscriptionPlan, SubscriptionProvider } from "@notesnook/core";
+import { useUserStore } from "../../../stores/use-user-store";
+import PremiumService from "../../../services/premium";
+import SettingsService from "../../../services/settings";
+
+export function PlanLimits() {
+  const { colors } = useThemeColors();
+  const [featureUsage, setFeatureUsage] = useState<FeatureUsage[]>();
+  const user = useUserStore((state) => state.user);
+
+  useEffect(() => {
+    getFeaturesUsage()
+      .then((result) => {
+        setFeatureUsage(result);
+      })
+      .catch((e) => console.log(e));
+  }, []);
+
+  const isCurrentPlatform =
+    (user?.subscription?.provider === SubscriptionProvider.APPLE &&
+      Platform.OS === "ios") ||
+    (user?.subscription?.provider === SubscriptionProvider.GOOGLE &&
+      Platform.OS === "android");
+
+  return (
+    <ScrollView
+      style={{
+        paddingHorizontal: DefaultAppStyles.GAP,
+        width: "100%",
+        paddingVertical: DefaultAppStyles.GAP_VERTICAL
+      }}
+      contentContainerStyle={{
+        gap: DefaultAppStyles.GAP_VERTICAL
+      }}
+    >
+      <Heading>{strings.planLimits()}</Heading>
+
+      {featureUsage?.map((item) => (
+        <View
+          key={item.id}
+          style={{
+            gap: DefaultAppStyles.GAP_VERTICAL_SMALL,
+            width: "100%"
+          }}
+        >
+          <View
+            style={{
+              flexDirection: "row",
+              width: "100%",
+              justifyContent: "space-between"
+            }}
+          >
+            <Paragraph size={AppFontSize.sm}>
+              {getFeature(item.id).title}
+            </Paragraph>
+            <Paragraph size={AppFontSize.sm}>
+              {item.total === Infinity
+                ? strings.unlimited()
+                : item.id === "storage"
+                ? `${formatBytes(item.used)}/${formatBytes(
+                    item.total
+                  )} ${strings.used()}`
+                : `${item.used}/${item.total} ${strings.used()}`}
+            </Paragraph>
+          </View>
+        </View>
+      ))}
+
+      {((user?.subscription?.provider === SubscriptionProvider.PADDLE ||
+        user?.subscription?.provider === SubscriptionProvider.STREETWRITERS ||
+        !isCurrentPlatform) &&
+        PremiumService.get()) ||
+      SettingsService.getProperty("serverUrls") ? null : (
+        <Button
+          title={strings.changePlan()}
+          onPress={() => {
+            if (user?.subscription?.plan === SubscriptionPlan.LEGACY_PRO) {
+              ToastManager.show({
+                message: strings.cannotChangePlan(),
+                context: "local"
+              });
+              return;
+            }
+
+            if (
+              user?.subscription.plan !== SubscriptionPlan.FREE &&
+              user?.subscription.productId.includes("5year")
+            ) {
+              ToastManager.show({
+                message:
+                  "You have made a one time purchase. To change your plan please contact support.",
+                type: "info",
+                context: "local"
+              });
+              return;
+            }
+            Navigation.navigate("PayWall", {
+              context: "logged-in",
+              canGoBack: true
+            });
+            eSendEvent(eCloseSheet);
+          }}
+          type="accent"
+          fontSize={AppFontSize.xs}
+          style={{
+            width: "100%",
+            marginTop: DefaultAppStyles.GAP_VERTICAL
+          }}
+        />
+      )}
+    </ScrollView>
+  );
+}

apps/mobile/app/components/sheets/publish-note/index.tsx

@@ -17,49 +17,71 @@ 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 { hosts, Monograph, Note } from "@notesnook/core";
+import { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import Clipboard from "@react-native-clipboard/clipboard";
-import React, { useRef, useState } from "react";
-import { ActivityIndicator, TouchableOpacity, View } from "react-native";
+import React, { useEffect, useRef, useState } from "react";
+import {
+  ActivityIndicator,
+  TextInput,
+  TouchableOpacity,
+  View
+} from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
+//@ts-ignore
+import ToggleSwitch from "toggle-switch-react-native";
 import { db } from "../../../common/database";
+import { requestInAppReview } from "../../../services/app-review";
 import { presentSheet, ToastManager } from "../../../services/event-manager";
 import Navigation from "../../../services/navigation";
 import { useAttachmentStore } from "../../../stores/use-attachment-store";
-import { useThemeColors } from "@notesnook/theme";
 import { openLinkInBrowser } from "../../../utils/functions";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import DialogHeader from "../../dialog/dialog-header";
 import { Button } from "../../ui/button";
 import { IconButton } from "../../ui/icon-button";
 import Input from "../../ui/input";
-import Seperator from "../../ui/seperator";
 import Heading from "../../ui/typography/heading";
 import Paragraph from "../../ui/typography/paragraph";
-import { requestInAppReview } from "../../../services/app-review";
-import { hosts, Note } from "@notesnook/core";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../../utils/styles";
 
 const PublishNoteSheet = ({
-  note: item
+  note
 }: {
   note: Note;
   close?: (ctx?: string) => void;
 }) => {
   const { colors } = useThemeColors();
-
   const attachmentDownloads = useAttachmentStore((state) => state.downloading);
-  const downloading = attachmentDownloads?.[`monograph-${item.id}`];
+  const downloading = attachmentDownloads?.[`monograph-${note.id}`];
   const [selfDestruct, setSelfDestruct] = useState(false);
   const [isLocked, setIsLocked] = useState(false);
-  const [note, setNote] = useState<Note | undefined>(item);
+  const [monograph, setMonograph] = useState<Monograph>();
   const [publishing, setPublishing] = useState(false);
-  const publishUrl =
-    note && `${hosts.MONOGRAPH_HOST}/${db.monographs.monograph(note?.id)}`;
-  const isPublished = note && db.monographs.isPublished(note?.id);
-  const pwdInput = useRef(null);
+  const publishUrl = monograph && `${hosts.MONOGRAPH_HOST}/${monograph?.id}`;
+  const isPublished = !!monograph;
+  const pwdInput = useRef<TextInput>(null);
   const passwordValue = useRef<string>();
 
+  useEffect(() => {
+    (async () => {
+      const monograph = await db.monographs.get(
+        db.monographs.monograph(note.id)
+      );
+      setMonograph(monograph);
+      if (monograph) {
+        setSelfDestruct(!!monograph?.selfDestruct);
+        if (monograph.password) {
+          passwordValue.current = await db.monographs.decryptPassword(
+            monograph?.password
+          );
+          setIsLocked(!!monograph?.password);
+        }
+      }
+    })();
+  }, []);
+
   const publishNote = async () => {
     if (publishing) return;
     setPublishLoading(true);
@@ -71,7 +93,8 @@ const PublishNoteSheet = ({
           selfDestruct: selfDestruct,
           password: isLocked ? passwordValue.current : undefined
         });
-        setNote(await db.notes.note(note.id));
+
+        setMonograph(await db.monographs.get(db.monographs.monograph(note.id)));
         Navigation.queueRoutesForUpdate();
         setPublishLoading(false);
       }
@@ -98,7 +121,7 @@ const PublishNoteSheet = ({
     try {
       if (note?.id) {
         await db.monographs.unpublish(note.id);
-        setNote(await db.notes.note(note.id));
+        setMonograph(undefined);
         Navigation.queueRoutesForUpdate();
         setPublishLoading(false);
       }
@@ -118,7 +141,8 @@ const PublishNoteSheet = ({
       style={{
         width: "100%",
         alignSelf: "center",
-        paddingHorizontal: DefaultAppStyles.GAP
+        paddingHorizontal: DefaultAppStyles.GAP,
+        gap: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       <DialogHeader
@@ -218,37 +242,54 @@ const PublishNoteSheet = ({
             style={{
               flexDirection: "row",
               alignItems: "center",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL,
               backgroundColor: colors.secondary.background,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
               borderRadius: defaultBorderRadius,
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              paddingHorizontal: DefaultAppStyles.GAP,
+              paddingVertical: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            <IconButton
-              onPress={() => {
-                if (publishing) return;
-                setIsLocked(!isLocked);
-              }}
-              color={isLocked ? colors.selected.icon : colors.primary.icon}
-              size={AppFontSize.xl}
-              name={
-                isLocked
-                  ? "check-circle-outline"
-                  : "checkbox-blank-circle-outline"
-              }
-            />
-
             <View
               style={{
                 width: "100%",
                 flexShrink: 1
               }}
             >
-              <Heading size={AppFontSize.md}>
-                {strings.monographPassHeading()}
-              </Heading>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Heading size={AppFontSize.md}>
+                  {strings.monographPassHeading()}
+                </Heading>
+                <ToggleSwitch
+                  isOn={isLocked}
+                  onColor={colors.primary.accent}
+                  offColor={colors.primary.icon}
+                  size="small"
+                  animationSpeed={150}
+                  onToggle={() => setIsLocked(!isLocked)}
+                />
+              </View>
+
               <Paragraph>{strings.monographPassDesc()}</Paragraph>
+
+              {isLocked ? (
+                <>
+                  <Input
+                    fwdRef={pwdInput}
+                    onChangeText={(value) => (passwordValue.current = value)}
+                    blurOnSubmit
+                    secureTextEntry
+                    defaultValue={passwordValue.current}
+                    placeholder={strings.enterPassword()}
+                    containerStyle={{
+                      marginTop: DefaultAppStyles.GAP_VERTICAL
+                    }}
+                  />
+                </>
+              ) : null}
             </View>
           </TouchableOpacity>
 
@@ -262,31 +303,35 @@ const PublishNoteSheet = ({
               alignItems: "center",
               backgroundColor: colors.secondary.background,
               paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              borderRadius: defaultBorderRadius
+              borderRadius: defaultBorderRadius,
+              paddingHorizontal: DefaultAppStyles.GAP
             }}
           >
-            <IconButton
-              onPress={() => {
-                setSelfDestruct(!selfDestruct);
-              }}
-              color={selfDestruct ? colors.selected.icon : colors.primary.icon}
-              size={AppFontSize.xl}
-              name={
-                selfDestruct
-                  ? "check-circle-outline"
-                  : "checkbox-blank-circle-outline"
-              }
-            />
-
             <View
               style={{
                 width: "100%",
                 flexShrink: 1
               }}
             >
-              <Heading size={AppFontSize.md}>
-                {strings.monographSelfDestructHeading()}
-              </Heading>
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between"
+                }}
+              >
+                <Heading size={AppFontSize.md}>
+                  {strings.monographSelfDestructHeading()}
+                </Heading>
+                <ToggleSwitch
+                  isOn={selfDestruct}
+                  onColor={colors.primary.accent}
+                  offColor={colors.primary.icon}
+                  size="small"
+                  animationSpeed={150}
+                  onToggle={() => setSelfDestruct(!selfDestruct)}
+                />
+              </View>
+
               <Paragraph>{strings.monographSelfDestructDesc()}</Paragraph>
             </View>
           </TouchableOpacity>
@@ -294,56 +339,33 @@ const PublishNoteSheet = ({
           <View
             style={{
               width: "100%",
-              alignSelf: "center",
-              marginTop: DefaultAppStyles.GAP_VERTICAL
+              justifyContent: "center",
+              gap: DefaultAppStyles.GAP_VERTICAL
             }}
           >
-            {isLocked ? (
-              <>
-                <Input
-                  fwdRef={pwdInput}
-                  onChangeText={(value) => (passwordValue.current = value)}
-                  blurOnSubmit
-                  secureTextEntry
-                  defaultValue={passwordValue.current}
-                  placeholder={strings.enterPassword()}
-                />
-                <Seperator half />
-              </>
-            ) : null}
-
-            <View
+            <Button
+              onPress={publishNote}
               style={{
-                flexDirection: "row",
                 width: "100%",
-                justifyContent: "center"
+                borderRadius: defaultBorderRadius
               }}
-            >
-              {isPublished && (
-                <>
-                  <Button
-                    onPress={deletePublishedNote}
-                    fontSize={AppFontSize.md}
-                    type="error"
-                    title={strings.unpublish()}
-                    style={{
-                      width: "49%"
-                    }}
-                  />
-                </>
-              )}
-              <Seperator half />
-              <Button
-                onPress={publishNote}
-                fontSize={AppFontSize.md}
-                style={{
-                  width: isPublished ? "49%" : 250,
-                  borderRadius: isPublished ? 5 : 100
-                }}
-                type="accent"
-                title={isPublished ? strings.update() : strings.publish()}
-              />
-            </View>
+              type="accent"
+              title={isPublished ? strings.update() : strings.publish()}
+            />
+
+            {isPublished && (
+              <>
+                <Button
+                  onPress={deletePublishedNote}
+                  type="error"
+                  title={strings.unpublish()}
+                  style={{
+                    width: "100%",
+                    borderRadius: defaultBorderRadius
+                  }}
+                />
+              </>
+            )}
           </View>
         </>
       )}

apps/mobile/app/components/sheets/rate-app/index.js

@@ -93,7 +93,6 @@ const RateAppSheet = () => {
         <Seperator half />
         <Button
           onPress={rateApp}
-          fontSize={AppFontSize.md}
           width="100%"
           type="accent"
           title={strings.rateApp()}
@@ -116,14 +115,12 @@ const RateAppSheet = () => {
               setVisible(false);
               clearMessage();
             }}
-            fontSize={AppFontSize.md}
             type="error"
             width="48%"
             title={strings.never()}
           />
           <Button
             onPress={onClose}
-            fontSize={AppFontSize.md}
             width="48%"
             type="secondary"
             title={strings.later()}

apps/mobile/app/components/sheets/recovery-key/index.jsx

@@ -295,7 +295,6 @@ class RecoveryKeySheet extends React.Component {
             title={strings.copyToClipboard()}
             width="100%"
             type="secondaryAccented"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
           <Button
@@ -303,7 +302,6 @@ class RecoveryKeySheet extends React.Component {
             onPress={this.saveQRCODE}
             width="100%"
             type="secondaryAccented"
-            fontSize={AppFontSize.md}
             icon="qrcode"
           />
           <Seperator />
@@ -313,7 +311,6 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="text"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -323,7 +320,6 @@ class RecoveryKeySheet extends React.Component {
             width="100%"
             type="secondaryAccented"
             icon="cloud"
-            fontSize={AppFontSize.md}
           />
           <Seperator />
 
@@ -344,7 +340,6 @@ class RecoveryKeySheet extends React.Component {
             title={strings.done()}
             width="100%"
             type="error"
-            fontSize={AppFontSize.md}
             onPress={this.close}
           />
         </View>

apps/mobile/app/components/side-menu/index.tsx

@@ -56,6 +56,8 @@ import {
 import { useSideBarDraggingStore } from "./dragging-store";
 import { Button } from "../ui/button";
 import SettingsService from "../../services/settings";
+import { isFeatureAvailable } from "@notesnook/common";
+import PaywallSheet from "../sheets/paywall";
 const renderScene = SceneMap({
   home: SideMenuHome,
   notebooks: SideMenuNotebooks,
@@ -347,10 +349,23 @@ const TabBar = (
                       testID="sidebar-add-button"
                       size={AppFontSize.lg - 2}
                       color={colors.primary.icon}
-                      onPress={() => {
+                      onPress={async () => {
                         if (props.navigationState.index === 1) {
+                          const notebooksFeature = await isFeatureAvailable(
+                            "notebooks"
+                          );
+                          if (!notebooksFeature.isAllowed) {
+                            PaywallSheet.present(notebooksFeature);
+                            return;
+                          }
+
                           AddNotebookSheet.present();
                         } else {
+                          const tagsFeature = await isFeatureAvailable("tags");
+                          if (!tagsFeature.isAllowed) {
+                            PaywallSheet.present(tagsFeature);
+                            return;
+                          }
                           presentDialog({
                             title: strings.addTag(),
                             paragraph: strings.addTagDesc(),

apps/mobile/app/components/side-menu/notebook-item.tsx

@@ -49,7 +49,8 @@ export const NotebookItem = ({
   onPress,
   onLongPress,
   onAddNotebook,
-  canDisableSelectionMode
+  canDisableSelectionMode,
+  disableExpand
 }: {
   index: number;
   item: TreeItem;
@@ -64,6 +65,7 @@ export const NotebookItem = ({
   onLongPress?: () => void;
   onAddNotebook?: () => void;
   canDisableSelectionMode?: boolean;
+  disableExpand?: boolean;
 }) => {
   const notebook = item.notebook;
   const isFocused = focused;
@@ -166,7 +168,7 @@ export const NotebookItem = ({
             }
             testID={item.hasChildren ? `expand-notebook-${index}` : ""}
             onPress={() => {
-              if (item.hasChildren) {
+              if (item.hasChildren && !disableExpand) {
                 onToggleExpanded?.();
               } else {
                 onPress?.();
@@ -182,7 +184,7 @@ export const NotebookItem = ({
               borderRadius: defaultBorderRadius
             }}
             name={
-              !item.hasChildren
+              !item.hasChildren || disableExpand
                 ? "book-outline"
                 : expanded
                 ? "chevron-down"

apps/mobile/app/components/side-menu/side-menu-home.tsx

@@ -16,34 +16,36 @@ GNU General Public License for more details.
 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 { SubscriptionPlan } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
-import React, { Fragment } from "react";
+import React from "react";
 import { FlatList, View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
 import { db } from "../../common/database";
+import Navigation from "../../services/navigation";
+import SettingsService from "../../services/settings";
 import { useMenuStore } from "../../stores/use-menu-store";
 import { useSettingStore } from "../../stores/use-setting-store";
+import { useUserStore } from "../../stores/use-user-store";
 import { MenuItemsList } from "../../utils/menu-items";
 import { DefaultAppStyles } from "../../utils/styles";
 import ReorderableList from "../list/reorderable-list";
+import { MenuItemProperties } from "../sheets/menu-item-properties";
+import { Button } from "../ui/button";
 import { ColorSection } from "./color-section";
 import { MenuItem } from "./menu-item";
 import { PinnedSection } from "./pinned-section";
 import { SideMenuHeader } from "./side-menu-header";
-import { SUBSCRIPTION_STATUS } from "../../utils/constants";
-import { eSendEvent } from "../../services/event-manager";
-import { eOpenPremiumDialog } from "../../utils/events";
-import { useUserStore } from "../../stores/use-user-store";
-import { Button } from "../ui/button";
-import { MenuItemProperties } from "../sheets/menu-item-properties";
 
 const pro = {
-  title: strings.getNotesnookPro(),
+  title: strings.upgradePlan(),
   icon: "crown",
   id: "pro",
   onPress: () => {
-    eSendEvent(eOpenPremiumDialog);
+    Navigation.navigate("PayWall", {
+      context: "logged-in"
+    });
   }
 };
 
@@ -58,8 +60,9 @@ export function SideMenuHome() {
     state.hiddenItems["routes"]
   ]);
   const subscriptionType = useUserStore(
-    (state) => state.user?.subscription?.type
+    (state) => state.user?.subscription?.plan
   );
+  const user = useUserStore.getState().user;
 
   return (
     <View
@@ -137,19 +140,16 @@ export function SideMenuHome() {
           paddingVertical: DefaultAppStyles.GAP_VERTICAL
         }}
       >
-        {subscriptionType === SUBSCRIPTION_STATUS.TRIAL ||
-        subscriptionType === SUBSCRIPTION_STATUS.BASIC ? (
+        {(subscriptionType === SubscriptionPlan.FREE ||
+          !subscriptionType ||
+          !user) &&
+        !SettingsService.getProperty("serverUrls") ? (
           <Button
             title={pro.title}
-            iconColor={colors.static.yellow}
-            textStyle={{
-              color: colors.static.white
-            }}
-            icon={pro.icon}
             style={{
-              backgroundColor: colors.static.black,
               width: "100%"
             }}
+            type="accent"
             onPress={pro.onPress}
           />
         ) : null}

apps/mobile/app/components/side-menu/side-menu-notebooks.tsx

@@ -20,8 +20,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { Notebook } from "@notesnook/core";
 import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
+import { FlashList } from "@shopify/flash-list";
 import React, { useEffect, useState } from "react";
-import { FlatList, TextInput, View } from "react-native";
+import { TextInput, View } from "react-native";
 import { db } from "../../common/database";
 import NotebookScreen from "../../screens/notebook";
 import Navigation from "../../services/navigation";
@@ -42,6 +43,7 @@ import {
 useSideMenuNotebookSelectionStore.setState({
   multiSelect: true
 });
+
 export const SideMenuNotebooks = () => {
   const tree = useSideMenuNotebookTreeStore((state) => state.tree);
   const [notebooks, loading] = useNotebooks();
@@ -64,6 +66,9 @@ export const SideMenuNotebooks = () => {
 
   const updateNotebooks = React.useCallback(() => {
     if (lastQuery.current) {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: true
+      // });
       db.lookup
         .notebooks(lastQuery.current)
         .sorted(db.settings.getGroupOptions("notebooks"))
@@ -71,6 +76,9 @@ export const SideMenuNotebooks = () => {
           setFilteredNotebooks(filtered);
         });
     } else {
+      // useSideMenuNotebookTreeStore.setState({
+      //   isSearching: false
+      // });
       setFilteredNotebooks(notebooks);
     }
   }, [notebooks]);
@@ -137,13 +145,13 @@ export const SideMenuNotebooks = () => {
         />
       ) : (
         <>
-          <FlatList
+          <FlashList
             data={tree}
             bounces={false}
             bouncesZoom={false}
             overScrollMode="never"
-            keyExtractor={(item) => item.notebook.id}
-            windowSize={3}
+            // keyExtractor={(item,) => item.notebook.id}
+            estimatedItemSize={30}
             ListHeaderComponent={
               <View
                 style={{
@@ -196,7 +204,9 @@ const NotebookItemWrapper = React.memo(
     const expanded = useSideMenuNotebookExpandedStore(
       (state) => state.expanded[item.notebook.id]
     );
-
+    const disableExpand = useSideMenuNotebookTreeStore(
+      (state) => state.isSearching
+    );
     const selectionEnabled = useSideMenuNotebookSelectionStore(
       (state) => state.enabled
     );
@@ -256,6 +266,7 @@ const NotebookItemWrapper = React.memo(
                 .removeChildren(item.notebook.id);
             }
           }}
+          disableExpand={disableExpand}
           selected={selected}
           selectionEnabled={selectionEnabled}
           selectionStore={useSideMenuNotebookSelectionStore}

apps/mobile/app/components/ui/button/index.tsx

@@ -17,26 +17,22 @@ 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 { useThemeColors } from "@notesnook/theme";
 import React from "react";
 import {
   ActivityIndicator,
   ColorValue,
   DimensionValue,
   TextStyle,
-  View,
   ViewStyle,
   useWindowDimensions
 } from "react-native";
 import Icon from "react-native-vector-icons/MaterialCommunityIcons";
-import { useUserStore } from "../../../stores/use-user-store";
-import { defaultBorderRadius, AppFontSize } from "../../../utils/size";
+import { AppFontSize, defaultBorderRadius } from "../../../utils/size";
+import { DefaultAppStyles } from "../../../utils/styles";
 import NativeTooltip from "../../../utils/tooltip";
-import { ProTag } from "../../premium/pro-tag";
 import { Pressable, PressableProps, useButton } from "../pressable";
 import Heading from "../typography/heading";
 import Paragraph from "../typography/paragraph";
-import { DefaultAppStyles } from "../../../utils/styles";
 export interface ButtonProps extends PressableProps {
   height?: number;
   icon?: string;
@@ -85,8 +81,6 @@ export const Button = ({
   iconStyle,
   ...restProps
 }: ButtonProps) => {
-  const { colors } = useThemeColors();
-  const premium = useUserStore((state) => state.premium);
   const { text } = useButton({
     type,
     accent: accentColor,
@@ -167,15 +161,6 @@ export const Button = ({
           {title}
         </Component>
       )}
-      {proTag && !premium ? (
-        <View
-          style={{
-            marginLeft: 10
-          }}
-        >
-          <ProTag size={10} width={40} background={colors.primary.shade} />
-        </View>
-      ) : null}
 
       {icon && !loading && iconPosition === "right" ? (
         <Icon

apps/mobile/app/components/ui/input/index.tsx

@@ -154,7 +154,7 @@ const Input = ({
         isError = customValidator && value === customValidator();
         break;
       case "url":
-        isError = isURL(value);
+        isError = isURL(value, { allow_underscores: true });
         break;
       case "phonenumber": {
         const result = phone(value, {
@@ -237,9 +237,9 @@ const Input = ({
       onPress && loading ? colors.primary.accent : colors.primary.paragraph,
     flexGrow: 1,
     flexShrink: 1,
-    paddingBottom: DefaultAppStyles.GAP_VERTICAL - 2,
-    paddingTop: DefaultAppStyles.GAP_VERTICAL - 2,
-    fontFamily: "OpenSans-Regular",
+    paddingBottom: DefaultAppStyles.GAP_VERTICAL - 4,
+    paddingTop: DefaultAppStyles.GAP_VERTICAL - 4,
+    fontFamily: "Inter-Regular",
     ...(inputStyle as ViewStyle)
   };
 

apps/mobile/app/components/ui/pressable/index.tsx

@@ -54,6 +54,7 @@ type ButtonTypes =
   | "accent"
   | "shade"
   | "secondary"
+  | "selectedAccent"
   | "secondaryAccented"
   | "inverted"
   | "white"
@@ -126,6 +127,18 @@ const buttonTypes = (
       isDark
     )
   },
+  selectedAccent: {
+    primary: colors.selected.accent,
+    text: colors.selected.accentForeground,
+    selected: colors.selected.accent,
+    borderWidth: 0.8,
+    borderColor: getColorLinearShade(colors.selected.accent, 0.05, isDark),
+    borderSelectedColor: getColorLinearShade(
+      colors.selected.accent,
+      0.05,
+      isDark
+    )
+  },
   secondaryAccented: {
     primary: colors.secondary.background,
     text: colors.primary.accent,

apps/mobile/app/components/ui/sheet/index.js

@@ -25,9 +25,9 @@ import useGlobalSafeAreaInsets from "../../../hooks/use-global-safe-area-insets"
 import { useSettingStore } from "../../../stores/use-setting-store";
 import { useUserStore } from "../../../stores/use-user-store";
 import { getContainerBorder } from "../../../utils/colors";
-import { PremiumToast } from "../../premium/premium-toast";
-import { Toast } from "../../toast";
 import { NotesnookModule } from "../../../utils/notesnook-module";
+import { Toast } from "../../toast";
+
 /**
  *
  * @param {any} param0
@@ -63,14 +63,12 @@ const SheetWrapper = ({
   let width = dimensions.width > 600 ? 600 : 500;
   const isGestureNavigationEnabled =
     NotesnookModule.isGestureNavigationEnabled();
-
   const style = React.useMemo(() => {
     return {
       width: largeTablet || smallTablet ? width : "100%",
       backgroundColor: colors.primary.background,
       zIndex: 10,
       paddingTop: 5,
-      paddingBottom: 0,
       borderTopRightRadius: 15,
       borderTopLeftRadius: 15,
       alignSelf: "center",
@@ -78,9 +76,12 @@ const SheetWrapper = ({
       borderBottomLeftRadius: 0,
       ...getContainerBorder(colors.primary.border, 0.5),
       borderBottomWidth: 0,
-      paddingBottom: isGestureNavigationEnabled
-        ? insets.bottom
-        : insets.bottom || 48
+      paddingBottom:
+        Platform.OS === "android" && !insets.bottom
+          ? isGestureNavigationEnabled
+            ? 0
+            : 30
+          : 0
     };
   }, [
     colors.primary.background,
@@ -131,6 +132,10 @@ const SheetWrapper = ({
           width: 100,
           backgroundColor: colors.secondary.background
         }}
+        safeAreaInsets={{
+          ...insets,
+          bottom: Platform.OS === "android" ? 0 : insets.bottom
+        }}
         statusBarTranslucent
         drawUnderStatusBar={true}
         containerStyle={style}
@@ -155,11 +160,6 @@ const SheetWrapper = ({
         ExtraOverlayComponent={
           <>
             {overlay}
-            <PremiumToast
-              context="sheet"
-              close={() => fwdRef?.current?.hide()}
-              offset={50}
-            />
             <Toast context="local" />
           </>
         }
@@ -169,10 +169,7 @@ const SheetWrapper = ({
         {bottomPadding ? (
           <View
             style={{
-              height:
-                Platform.OS === "ios" && insets.bottom !== 0
-                  ? insets.bottom + 5
-                  : 20
+              height: insets.bottom !== 0 ? insets.bottom : 20
             }}
           />
         ) : null}

apps/mobile/app/components/walkthroughs/index.tsx

@@ -17,20 +17,20 @@ 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 { strings } from "@notesnook/intl";
+import { useThemeColors } from "@notesnook/theme";
 import React, { useState } from "react";
 import { LayoutAnimation, View } from "react-native";
 import { MMKV } from "../../common/database/mmkv";
 import { eSendEvent, presentSheet } from "../../services/event-manager";
-import { useThemeColors } from "@notesnook/theme";
 import { eCloseSheet } from "../../utils/events";
 import { AppFontSize } from "../../utils/size";
+import { DefaultAppStyles } from "../../utils/styles";
 import { sleep } from "../../utils/time";
 import { Button } from "../ui/button";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import walkthroughs, { TStep } from "./walkthroughs";
-import { strings } from "@notesnook/intl";
-import { DefaultAppStyles } from "../../utils/styles";
 export const Walkthrough = ({
   steps,
   canSkip = true
@@ -53,12 +53,20 @@ export const Walkthrough = ({
         justifyContent: "center",
         alignItems: "center",
         padding: DefaultAppStyles.GAP,
-        paddingBottom: 0
+        gap: DefaultAppStyles.GAP_VERTICAL
       }}
     >
       {step.walkthroughItem(colors)}
 
-      {step.title ? <Heading>{step.title}</Heading> : null}
+      {step.title ? (
+        <Heading
+          style={{
+            textAlign: "center"
+          }}
+        >
+          {step.title}
+        </Heading>
+      ) : null}
       {step.text ? (
         <Paragraph
           style={{
@@ -74,8 +82,7 @@ export const Walkthrough = ({
       {step.actionButton && (
         <Button
           style={{
-            height: 30,
-            marginTop: DefaultAppStyles.GAP_VERTICAL
+            height: 30
           }}
           textStyle={{
             textDecorationLine: "underline"
@@ -89,11 +96,6 @@ export const Walkthrough = ({
       )}
 
       <Button
-        style={{
-          borderRadius: 100,
-          height: 40,
-          marginTop: DefaultAppStyles.GAP
-        }}
         onPress={async () => {
           switch (step.button?.type) {
             case "next":
@@ -114,7 +116,6 @@ export const Walkthrough = ({
       {canSkip ? (
         <Button
           style={{
-            marginTop: DefaultAppStyles.GAP,
             paddingVertical: DefaultAppStyles.GAP_VERTICAL_SMALL
           }}
           textStyle={{
@@ -148,18 +149,18 @@ Walkthrough.init = async () => {
 };
 
 Walkthrough.present = async (
-  id: "notebooks" | "trialstarted" | "emailconfirmed" | "prouser",
+  id: "emailconfirmed" | "prouser",
   canSkip = true,
   nopersist?: boolean
 ) => {
-  if (!nopersist) {
-    if (!walkthroughState || Object.keys(walkthroughState).length === 0) {
-      await Walkthrough.init();
-    }
-    if (walkthroughState[id]) return;
-    Walkthrough.update(id);
-  }
-  const walkthrough = walkthroughs[id];
+  // if (!nopersist) {
+  //   if (!walkthroughState || Object.keys(walkthroughState).length === 0) {
+  //     await Walkthrough.init();
+  //   }
+  //   if (walkthroughState[id]) return;
+  //   Walkthrough.update(id);
+  // }
+  const walkthrough = walkthroughs[id]();
   if (!walkthrough) return;
   presentSheet({
     component: <Walkthrough canSkip={canSkip} steps={walkthrough.steps} />,

apps/mobile/app/components/walkthroughs/walkthroughs.tsx

@@ -40,6 +40,10 @@ import { SvgView } from "../ui/svg";
 import Heading from "../ui/typography/heading";
 import Paragraph from "../ui/typography/paragraph";
 import { DefaultAppStyles } from "../../utils/styles";
+import { useUserStore } from "../../stores/use-user-store";
+import { planToId, SubscriptionPlan } from "@notesnook/core";
+import { planToDisplayName } from "../../utils/constants";
+import AppIcon from "../ui/AppIcon";
 
 export type TStep = {
   text?: string;
@@ -56,287 +60,12 @@ export type TStep = {
   };
 };
 
-const NotebookWelcome = () => {
-  const { colors } = useThemeColors();
-  const data = useRotator([
-    {
-      title: strings.workAndOffice(),
-      description: strings.workAndOfficeDesc(),
-      count: 2
-    },
-    {
-      title: strings.schoolWork(),
-      description: strings.schoolWorkDesc(),
-      count: 5
-    },
-    {
-      title: strings.recipes(),
-      description: strings.recipesDesc(),
-      count: 10
-    }
-  ]);
-
-  return (
-    <View
-      style={{
-        width: "100%",
-        padding: DefaultAppStyles.GAP,
-        backgroundColor: colors.secondary.background,
-        borderRadius: 10,
-        ...getContainerBorder(colors.secondary.background)
-      }}
-    >
-      <View
-        style={{
-          padding: DefaultAppStyles.GAP,
-          width: "100%",
-          backgroundColor: colors.primary.background,
-          ...getElevationStyle(3),
-          borderRadius: 10,
-          marginVertical: DefaultAppStyles.GAP
-        }}
-      >
-        <Heading size={AppFontSize.md} color={colors.primary.heading}>
-          {data?.title}
-        </Heading>
-        <Paragraph>{data?.description}</Paragraph>
-
-        <Paragraph
-          style={{
-            marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-          }}
-          size={AppFontSize.xs}
-          color={colors.secondary.paragraph}
-        >
-          {strings.dataTypesCamelCase.notebook()} - {data?.count}{" "}
-          {strings.dataTypesPlural.note()}
-        </Paragraph>
-      </View>
-    </View>
-  );
-};
-
-const notebooks: { id: string; steps: TStep[] } = {
-  id: "notebooks",
-  steps: [
-    {
-      title: strings.notebooks(),
-      text: strings.boostProductivityNotebook(),
-      walkthroughItem: () => <NotebookWelcome />,
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.notebookNotes(),
-      text: strings.notebookNotesDesc(),
-      walkthroughItem: (colors: any) => (
-        <View
-          style={{
-            width: "100%",
-            padding: DefaultAppStyles.GAP,
-            backgroundColor: colors.secondary.background,
-            borderRadius: 10,
-            ...getContainerBorder(colors.secondary.background)
-          }}
-        >
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "100%",
-              backgroundColor: colors.primary.background,
-              ...getElevationStyle(3),
-              borderRadius: 10,
-              marginVertical: 12
-            }}
-          >
-            <Heading size={AppFontSize.md} color={colors.primary.heading}>
-              {strings.workAndOffice()}
-            </Heading>
-            <Paragraph>{strings.workAndOfficeDesc()}</Paragraph>
-
-            <Paragraph
-              style={{
-                marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
-              }}
-              size={AppFontSize.xs}
-              color={colors.secondary.paragraph}
-            >
-              {strings.notes(2)}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "90%",
-              backgroundColor: colors.primary.background,
-              borderRadius: 10,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph color={colors.primary.accent}>
-              <Icon
-                color={colors.primary.accent}
-                size={AppFontSize.sm}
-                name="bookmark"
-              />{" "}
-              {strings.tasks()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              width: "80%",
-              backgroundColor: colors.primary.background,
-              borderRadius: defaultBorderRadius,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs}>
-              <Icon
-                color={colors.primary.icon}
-                size={AppFontSize.sm}
-                name="note"
-              />{" "}
-              {strings.taskAValue()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "80%",
-              backgroundColor: colors.primary.background,
-              borderRadius: defaultBorderRadius,
-              paddingVertical: DefaultAppStyles.GAP_VERTICAL,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph size={AppFontSize.xs}>
-              <Icon
-                color={colors.primary.icon}
-                size={AppFontSize.sm}
-                name="note"
-              />{" "}
-              {strings.taskBValue()}
-            </Paragraph>
-          </View>
-          <View
-            style={{
-              padding: DefaultAppStyles.GAP,
-              width: "90%",
-              backgroundColor: colors.primary.background,
-              borderRadius: 10,
-              alignSelf: "flex-end",
-              marginBottom: DefaultAppStyles.GAP_VERTICAL
-            }}
-          >
-            <Paragraph color={colors.primary.accent}>
-              <Icon
-                color={colors.primary.accent}
-                size={AppFontSize.sm}
-                name="bookmark"
-              />{" "}
-              {strings.meetings()}
-            </Paragraph>
-          </View>
-        </View>
-      ),
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.easyAccess(),
-      text: strings.easyAccessDesc(),
-      walkthroughItem: () => (
-        <View
-          style={{
-            paddingHorizontal: 20,
-            paddingVertical: DefaultAppStyles.GAP_VERTICAL
-          }}
-        >
-          {/* <PinItem
-            isPlaceholder={true}
-            item={
-              {
-                title: strings.tasks(),
-                type: "notebook"
-              } as Notebook
-            }
-            onPress={() => {}}
-          />
-
-          <PinItem
-            isPlaceholder={true}
-            item={
-              {
-                title: strings.workAndOffice(),
-                type: "notebook"
-              } as Notebook
-            }
-            onPress={() => {}}
-          /> */}
-        </View>
-      ),
-      button: {
-        type: "done",
-        title: strings.addFirstNotebook(),
-        action: () => {
-          eSendEvent(eOpenAddNotebookDialog);
-        }
-      }
-    }
-  ]
-};
-
-const trialstarted: { id: string; steps: TStep[] } = {
-  id: "trialstarted",
-  steps: [
-    {
-      title: strings.trialStarted(),
-      text: strings.trialStartedDesc(),
-      walkthroughItem: (colors) => (
-        <SvgView src={LAUNCH_ROCKET(colors.primary.paragraph)} />
-      ),
-      button: {
-        type: "next",
-        title: strings.next()
-      }
-    },
-    {
-      title: strings.joinTheCause(),
-      text: strings.meetPrivacyMinded(),
-      walkthroughItem: (colors) => (
-        <SvgView src={COMMUNITY_SVG(colors.primary.paragraph)} />
-      ),
-      button: {
-        type: "done",
-        title: strings.continue()
-      },
-      actionButton: {
-        text: strings.joinDiscord(),
-        action: () => {
-          Linking.openURL("https://discord.gg/zQBK97EE22").catch(() => {
-            /* empty */
-          });
-        }
-      }
-    }
-  ]
-};
-
-const emailconfirmed: { id: string; steps: TStep[] } = {
+const emailconfirmed: () => { id: string; steps: TStep[] } = () => ({
   id: "emailconfirmed",
   steps: [
     {
       title: strings.emailConfirmed(),
-      text: strings.emailNotConfirmedDesc(),
+      text: strings.emailConfirmedDesc(),
       walkthroughItem: (colors) => (
         <SvgView src={WELCOME_SVG(colors.primary.paragraph)} />
       ),
@@ -346,105 +75,29 @@ const emailconfirmed: { id: string; steps: TStep[] } = {
       }
     }
   ]
-};
+});
 
-const Support = () => {
-  return (
-    <View
-      style={{
-        width: "100%",
-        alignItems: "center"
-      }}
-    >
-      <SvgView src={SUPPORT_SVG()} />
-      <Heading>{strings.prioritySupport()}</Heading>
-      <Paragraph
-        style={{
-          textAlign: "center"
-        }}
-        size={AppFontSize.md}
-      >
-        {strings.weAreAlwaysListening()}
-      </Paragraph>
-      <Seperator />
-
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        onPress={() => {
-          Linking.openURL("https://discord.gg/zQBK97EE22").catch(() => {
-            /* empty */
-          });
-        }}
-        icon="discord"
-        type="secondary"
-        title={strings.joinDiscord()}
-      />
-
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        onPress={() => {
-          Linking.openURL("https://t.me/notesnook").catch(() => {
-            /* empty */
-          });
-        }}
-        icon="telegram"
-        type="secondary"
-        title={strings.joinTelegram()}
-      />
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        icon="bug"
-        type="secondary"
-        title={strings.reportAnIssue()}
-      />
-      <Button
-        style={{
-          justifyContent: "flex-start",
-          marginBottom: DefaultAppStyles.GAP_VERTICAL,
-          width: "90%"
-        }}
-        icon="mail"
-        type="secondary"
-        title={strings.emailSupport()}
-      />
-    </View>
-  );
-};
-
-const prouser: { id: string; steps: TStep[] } = {
-  id: "prouser",
-  steps: [
-    {
-      title: strings.welcomeToNotesnookPro(),
-      text: strings.thankYouPrivacy(),
-      walkthroughItem: (colors) => (
-        <SvgView src={LAUNCH_ROCKET(colors.primary.paragraph)} />
-      ),
-      button: {
-        type: "next",
-        title: strings.next()
+const prouser: () => { id: string; steps: TStep[] } = () => {
+  return {
+    id: "prouser",
+    steps: [
+      {
+        title: strings.welcomeToPlan(
+          planToDisplayName(
+            useUserStore.getState().user?.subscription?.plan as SubscriptionPlan
+          )
+        ),
+        text: strings.thankYouPrivacy(),
+        walkthroughItem: (colors) => (
+          <AppIcon name="check" color={colors.primary.accent} size={50} />
+        ),
+        button: {
+          type: "done",
+          title: strings.continue()
+        }
       }
-    },
-    {
-      walkthroughItem: () => <Support />,
-      button: {
-        type: "done",
-        title: strings.continue()
-      }
-    }
-  ]
+    ]
+  };
 };
 
-export default { notebooks, trialstarted, emailconfirmed, prouser };
+export default { emailconfirmed, prouser };

apps/mobile/app/hooks/use-actions.tsx

@@ -17,6 +17,7 @@ You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 /* eslint-disable no-inner-declarations */
+import { useAreFeaturesAvailable } from "@notesnook/common";
 import {
   createInternalLink,
   Item,
@@ -38,11 +39,13 @@ import { presentDialog } from "../components/dialog/functions";
 import NoteHistory from "../components/note-history";
 import { AddNotebookSheet } from "../components/sheets/add-notebook";
 import ExportNotesSheet from "../components/sheets/export-notes";
+import PaywallSheet from "../components/sheets/paywall";
 import PublishNoteSheet from "../components/sheets/publish-note";
 import { ReferencesList } from "../components/sheets/references";
 import { RelationsList } from "../components/sheets/relations-list/index";
 import { useSideBarDraggingStore } from "../components/side-menu/dragging-store";
 import { ButtonProps } from "../components/ui/button";
+import AddReminder from "../screens/add-reminder";
 import { useTabStore } from "../screens/editor/tiptap/use-tab-store";
 import {
   eSendEvent,
@@ -66,7 +69,6 @@ import { eUpdateNoteInEditor } from "../utils/events";
 import { deleteItems } from "../utils/functions";
 import { convertNoteToText } from "../utils/note-to-text";
 import { sleep } from "../utils/time";
-import AddReminder from "../screens/add-reminder";
 
 export type ActionId =
   | "select"
@@ -124,6 +126,7 @@ export type Action = {
   hidden?: boolean;
   activeColor?: string;
   type?: ButtonProps["type"];
+  locked?: boolean;
 };
 
 function isNotePinnedInNotifications(item: Item) {
@@ -147,6 +150,15 @@ export const useActions = ({
   close: () => void;
   customActionHandlers?: Record<ActionId, () => void>;
 }) => {
+  const features = useAreFeaturesAvailable([
+    "defaultNotebookAndTag",
+    "activeReminders",
+    "pinNoteInNotification",
+    "shortcuts",
+    "notebooks",
+    "customizableSidebar",
+    "customHomepage"
+  ]);
   const [item, setItem] = useState(propItem);
   const { colors } = useThemeColors();
   const setMenuPins = useMenuStore((state) => state.setMenuPins);
@@ -214,7 +226,7 @@ export const useActions = ({
 
   async function restoreTrashItem() {
     close();
-    if ((await db.trash.restore(item.id)) === false) return;
+    await db.trash.restore(item.id);
     Navigation.queueRoutesForUpdate();
     const type = item.type === "trash" ? item.itemType : item.type;
     ToastManager.show({
@@ -246,6 +258,18 @@ export const useActions = ({
       if (isPinnedToMenu) {
         await db.shortcuts.remove(item.id);
       } else {
+        if (features && !features?.shortcuts.isAllowed) {
+          ToastManager.show({
+            message: features?.shortcuts.error,
+            type: "info",
+            context: "local",
+            actionText: strings.upgrade(),
+            func: () => {
+              PaywallSheet.present(features?.shortcuts);
+            }
+          });
+          return;
+        }
         await db.shortcuts.add({
           itemId: item.id,
           itemType: item.type
@@ -415,12 +439,25 @@ export const useActions = ({
       id: "reorder",
       title: strings.reorder(),
       icon: "sort-ascending",
-      onPress: () => {
+      onPress: async () => {
+        if (features && !features.customizableSidebar.isAllowed) {
+          ToastManager.show({
+            message: features.customizableSidebar.error,
+            type: "info",
+            context: "local",
+            actionText: strings.upgrade(),
+            func: () => {
+              PaywallSheet.present(features.customizableSidebar);
+            }
+          });
+          return;
+        }
         useSideBarDraggingStore.setState({
           dragging: true
         });
         close();
-      }
+      },
+      locked: !features?.customizableSidebar.isAllowed
     });
   }
 
@@ -498,12 +535,26 @@ export const useActions = ({
             await db.settings.setDefaultTag(undefined);
             setDefaultTag(undefined);
           } else {
+            if (features && !features.defaultNotebookAndTag.isAllowed) {
+              ToastManager.show({
+                message: features.defaultNotebookAndTag.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(features.defaultNotebookAndTag);
+                }
+              });
+              return;
+            }
+
             await db.settings.setDefaultTag(item.id);
             setDefaultTag(item.id);
           }
           close();
         },
-        checked: defaultTag === item.id
+        checked: defaultTag === item.id,
+        locked: !features?.defaultNotebookAndTag.isAllowed
       }
     );
   }
@@ -515,10 +566,24 @@ export const useActions = ({
         title: strings.addNotebook(),
         icon: "plus",
         onPress: async () => {
+          if (features && !features.notebooks.isAllowed) {
+            ToastManager.show({
+              message: features.notebooks.error,
+              type: "info",
+              context: "local",
+              actionText: strings.upgrade(),
+              func: () => {
+                ToastManager.hide();
+                PaywallSheet.present(features.notebooks);
+              }
+            });
+            return;
+          }
           close();
           await sleep(300);
           AddNotebookSheet.present(undefined, item);
-        }
+        },
+        locked: !features?.notebooks.isAllowed
       },
       {
         id: "edit-notebook",
@@ -543,6 +608,19 @@ export const useActions = ({
             await db.settings.setDefaultNotebook(undefined);
             setDefaultNotebook(undefined);
           } else {
+            if (features && !features.defaultNotebookAndTag.isAllowed) {
+              ToastManager.show({
+                message: features.defaultNotebookAndTag.error,
+                type: "info",
+                context: "local",
+                actionText: strings.upgrade(),
+                func: () => {
+                  PaywallSheet.present(features.defaultNotebookAndTag);
+                }
+              });
+              return;
+            }
+
             const notebook = {
               id: item.id
             };
@@ -551,7 +629,9 @@ export const useActions = ({
           }
           close();
         },
-        checked: defaultNotebook === item.id
+        checked: defaultNotebook === item.id,
+
+        locked: !features?.defaultNotebookAndTag.isAllowed
       },
       {
         id: "move-notes",
@@ -602,7 +682,20 @@ export const useActions = ({
       icon: "home-outline",
       isToggle: true,
       checked: isHomepage,
-      onPress: () => {
+      onPress: async () => {
+        if (features && !features?.customHomepage.isAllowed) {
+          ToastManager.show({
+            message: features?.customHomepage.error,
+            type: "info",
+            context: "local",
+            actionText: strings.upgrade(),
+            func: () => {
+              PaywallSheet.present(features?.customHomepage);
+            }
+          });
+          return;
+        }
+
         SettingsService.setProperty(
           "homepageV2",
           isHomepage
@@ -684,6 +777,19 @@ export const useActions = ({
     }
 
     async function pinToNotifications() {
+      if (features && !features?.pinNoteInNotification.isAllowed) {
+        ToastManager.show({
+          message: features?.pinNoteInNotification.error,
+          type: "info",
+          actionText: strings.upgrade(),
+          context: "local",
+          func: () => {
+            PaywallSheet.present(features?.pinNoteInNotification);
+          }
+        });
+        return;
+      }
+
       if (notifPinned) {
         await Notifications.remove(item.id);
         await sleep(500);
@@ -913,13 +1019,34 @@ export const useActions = ({
             referenceType: "reminder",
             relationType: "from",
             title: strings.dataTypesPluralCamelCase.reminder(),
-            onAdd: () => {
+            onAdd: async () => {
+              if (features && !features.activeReminders.isAllowed) {
+                ToastManager.show({
+                  type: "info",
+                  message: features.activeReminders.error,
+                  actionText: strings.upgrade(),
+                  func: () => {
+                    PaywallSheet.present(features.activeReminders);
+                  }
+                });
+              }
               AddReminder.present(undefined, item);
               close();
             },
             button: {
               type: "plain",
-              onPress: () => {
+              onPress: async () => {
+                if (features && !features.activeReminders.isAllowed) {
+                  ToastManager.show({
+                    type: "info",
+                    message: features.activeReminders.error,
+                    actionText: strings.upgrade(),
+                    func: () => {
+                      PaywallSheet.present(features.activeReminders);
+                    }
+                  });
+                  return;
+                }
                 AddReminder.present(undefined, item);
                 close();
               },
@@ -927,7 +1054,8 @@ export const useActions = ({
               iconSize: 20
             }
           });
-        }
+        },
+        locked: !features?.activeReminders.isAllowed
       },
 
       {
@@ -1039,7 +1167,8 @@ export const useActions = ({
           : strings.pinToNotifications(),
         icon: "message-badge-outline",
         checked: !!notifPinned,
-        onPress: pinToNotifications
+        onPress: pinToNotifications,
+        locked: !features?.pinNoteInNotification.isAllowed
       });
     }
   }

apps/mobile/app/hooks/use-app-events.tsx

@@ -17,11 +17,13 @@ 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 { isFeatureAvailable } from "@notesnook/common";
 import {
   EV,
   EVENTS,
   EventManagerSubscription,
   SYNC_CHECK_IDS,
+  SubscriptionPlan,
   SyncStatusEvent,
   User
 } from "@notesnook/core";
@@ -49,7 +51,9 @@ import { MMKV } from "../common/database/mmkv";
 import { endProgress, startProgress } from "../components/dialogs/progress";
 import Migrate from "../components/sheets/migrate";
 import NewFeature from "../components/sheets/new-feature";
+import PaywallSheet from "../components/sheets/paywall";
 import { Walkthrough } from "../components/walkthroughs";
+import AddReminder from "../screens/add-reminder";
 import {
   resetTabStore,
   useTabStore
@@ -102,7 +106,7 @@ import { getGithubVersion } from "../utils/github-version";
 import { fluidTabsRef } from "../utils/global-refs";
 import { NotesnookModule } from "../utils/notesnook-module";
 import { sleep } from "../utils/time";
-import AddReminder from "../screens/add-reminder";
+import useFeatureManager from "./use-feature-manager";
 
 const onCheckSyncStatus = async (type: SyncStatusEvent) => {
   const { disableSync, disableAutoSync } = SettingsService.get();
@@ -167,7 +171,7 @@ const onAppOpenedFromURL = async (event: { url: string }) => {
       eSendEvent(eOnLoadNote, { newNote: true });
       fluidTabsRef.current?.goToPage("editor", false);
       return;
-    } else if (url.startsWith("https://notesnook.com/open_note")) {
+    } else if (url.startsWith("https://app.notesnook.com/open_note")) {
       const id = new URL(url).searchParams.get("id");
       if (id) {
         const note = await db.notes.note(id);
@@ -178,13 +182,25 @@ const onAppOpenedFromURL = async (event: { url: string }) => {
           fluidTabsRef.current?.goToPage("editor", false);
         }
       }
-    } else if (url.startsWith("https://notesnook.com/open_reminder")) {
+    } else if (url.startsWith("https://app.notesnook.com/open_reminder")) {
       const id = new URL(url).searchParams.get("id");
       if (id) {
         const reminder = await db.reminders.reminder(id);
         if (reminder) AddReminder.present(reminder);
       }
-    } else if (url.startsWith("https://notesnook.com/new_reminder")) {
+    } else if (url.startsWith("https://app.notesnook.com/new_reminder")) {
+      const reminderFeature = await isFeatureAvailable("activeReminders");
+      if (!reminderFeature.isAllowed) {
+        ToastManager.show({
+          type: "info",
+          message: reminderFeature.error,
+          actionText: strings.upgrade(),
+          func: () => {
+            PaywallSheet.present(reminderFeature);
+          }
+        });
+        return;
+      }
       AddReminder.present();
     }
   } catch (e) {
@@ -209,12 +225,23 @@ const onUserEmailVerified = async () => {
 const onUserSubscriptionStatusChanged = async (
   subscription: User["subscription"]
 ) => {
-  if (!PremiumService.get() && subscription.type === 5) {
+  if (
+    subscription &&
+    subscription.plan !== SubscriptionPlan.FREE &&
+    subscription.plan !== useUserStore.getState().user?.subscription?.plan
+  ) {
     PremiumService.subscriptions.clear();
+    useUserStore.setState({
+      user: {
+        ...(useUserStore.getState().user as User),
+        subscription: subscription
+      }
+    });
     Walkthrough.present("prouser", false, true);
   }
   await PremiumService.setPremiumStatus();
   useMessageStore.getState().setAnnouncement();
+  useUserStore.getState().setUser(await db.user.fetchUser());
 };
 
 const onRequestPartialSync = async (
@@ -298,6 +325,7 @@ async function saveEditorState() {
 const onSuccessfulSubscription = async (
   subscription: RNIap.ProductPurchase | RNIap.SubscriptionPurchase
 ) => {
+  if (Platform.OS === "android") return;
   await PremiumService.subscriptions.set(subscription);
   await PremiumService.subscriptions.verify(subscription);
 };
@@ -318,6 +346,9 @@ const doAppLoadActions = async () => {
     eSendEvent(eLoginSessionExpired);
     return;
   }
+
+  await useMessageStore.getState().setAnnouncement();
+
   notifee.setBadgeCount(0);
 
   if (!(await db.user.getUser())) {
@@ -325,11 +356,9 @@ const doAppLoadActions = async () => {
     return;
   }
 
-  await useMessageStore.getState().setAnnouncement();
   if (NewFeature.present()) return;
   if (await checkAppUpdateAvailable()) return;
   if (await checkForRateAppRequest()) return;
-  if (await PremiumService.getRemainingTrialDaysStatus()) return;
   if (SettingsService.get().introCompleted) {
     useMessageStore.subscribe((state) => {
       const dialogs = state.dialogs;
@@ -430,7 +459,7 @@ export const useAppEvents = () => {
     state.appLocked,
     state.syncing
   ]);
-
+  useFeatureManager();
   const syncedOnLaunch = useRef(false);
   const refValues = useRef<
     Partial<{
@@ -606,7 +635,6 @@ export const useAppEvents = () => {
       EV.subscribe(EVENTS.userLoggedOut, onLogout),
       EV.subscribe(EVENTS.userEmailConfirmed, onUserEmailVerified),
       EV.subscribe(EVENTS.userSessionExpired, onUserSessionExpired),
-      EV.subscribe(EVENTS.userCheckStatus, PremiumService.onUserStatusCheck),
       EV.subscribe(
         EVENTS.userSubscriptionUpdated,
         onUserSubscriptionStatusChanged
@@ -752,13 +780,11 @@ export const useAppEvents = () => {
     if (!isAppLoading && !appLocked) {
       setTimeout(() => {
         sub = AppState.addEventListener("change", onAppStateChanged);
-        if (
-          refValues.current.initialUrl &&
-          !refValues.current.initialUrl?.includes("open_note")
-        ) {
+        if (refValues.current.initialUrl) {
           onAppOpenedFromURL({
             url: refValues.current.initialUrl!
           });
+          refValues.current.initialUrl = undefined;
         }
       }, 1000);
 

apps/mobile/app/hooks/use-feature-manager.ts

@@ -0,0 +1,75 @@
+import { useAreFeaturesAvailable } from "@notesnook/common";
+import { strings } from "@notesnook/intl";
+import { useEffect } from "react";
+import { db } from "../common/database";
+import { presentDialog } from "../components/dialog/functions";
+import { useDragState } from "../screens/settings/editor/state";
+import { eSendEvent } from "../services/event-manager";
+import Navigation from "../services/navigation";
+import Notifications from "../services/notifications";
+import SettingsService from "../services/settings";
+import { useUserStore } from "../stores/use-user-store";
+import { eCloseSimpleDialog } from "../utils/events";
+
+export default function useFeatureManager() {
+  const features = useAreFeaturesAvailable([
+    "appLock",
+    "createNoteFromNotificationDrawer",
+    "pinNoteInNotification",
+    "markdownShortcuts",
+    "customHomepage",
+    "defaultNotebookAndTag",
+    "defaultSidebarTab",
+    "customToolbarPreset",
+    "disableTrashCleanup",
+    "fullOfflineMode"
+  ]);
+  const user = useUserStore((state) => state.user);
+  const plan = useUserStore((state) => state.user?.subscription?.plan);
+
+  useEffect(() => {
+    if (!user || !features) return;
+
+    if (!features.createNoteFromNotificationDrawer.isAllowed) {
+      SettingsService.setProperty("notifNotes", false);
+    }
+
+    if (!features.pinNoteInNotification.isAllowed) {
+      Notifications.clearPinnedNotes();
+    }
+
+    if (!features.markdownShortcuts.isAllowed) {
+      SettingsService.setProperty("markdownShortcuts", false);
+    }
+
+    if (!features.customHomepage.isAllowed) {
+      SettingsService.setProperty("homepageV2", undefined);
+    }
+
+    if (!features.defaultSidebarTab.isAllowed) {
+      SettingsService.setProperty("defaultSidebarTab", 0);
+    }
+
+    if (
+      !features.customToolbarPreset.isAllowed &&
+      useDragState.getState().preset === "custom"
+    ) {
+      useDragState.getState().setPreset("default");
+    }
+
+    if (!features.fullOfflineMode.isAllowed) {
+      SettingsService.setProperty("offlineMode", false);
+    }
+
+    if (!features.defaultNotebookAndTag.isAllowed) {
+      if (db.settings.getDefaultNotebook()) {
+        db.settings.setDefaultNotebook(undefined);
+      }
+      if (db.settings.getDefaultTag()) {
+        db.settings.setDefaultTag(undefined);
+      }
+    }
+  }, [features, plan]);
+
+  return true;
+}

apps/mobile/app/hooks/use-is-floating-keyboard.ts

@@ -26,12 +26,14 @@ import { useCallback } from "react";
  * @returns Is keyboard floating or not
  */
 const useIsFloatingKeyboard = () => {
-  const { width } = useWindowDimensions();
+  const { width, height } = useWindowDimensions();
 
   const [floating, setFloating] = useState<boolean>(false);
   const onKeyboardWillChangeFrame = useCallback(
     (event: KeyboardEvent) => {
-      setFloating(event.endCoordinates.width < width);
+      setFloating(
+        event.endCoordinates.width === 0 || event.endCoordinates.width < width
+      );
     },
     [width]
   );
@@ -41,8 +43,13 @@ const useIsFloatingKeyboard = () => {
       "keyboardWillChangeFrame",
       onKeyboardWillChangeFrame
     );
+    const sub2 = Keyboard.addListener(
+      "keyboardWillShow",
+      onKeyboardWillChangeFrame
+    );
     return () => {
       sub1?.remove();
+      sub2?.remove();
     };
   }, [onKeyboardWillChangeFrame, width]);
 

apps/mobile/app/hooks/use-pricing-plans.ts

@@ -0,0 +1,724 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+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 { Plan, SubscriptionPlan, SubscriptionPlanId } from "@notesnook/core";
+import { useEffect, useState } from "react";
+import { Platform } from "react-native";
+import Config from "react-native-config";
+import * as RNIap from "react-native-iap";
+import { DatabaseLogger, db } from "../common/database";
+import PremiumService from "../services/premium";
+import { useSettingStore } from "../stores/use-setting-store";
+import { useUserStore } from "../stores/use-user-store";
+import SettingsService from "../services/settings";
+function numberWithCommas(x: string) {
+  const parts = x.toString().split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+}
+
+export const PlanOverView = {
+  free: {
+    storage: `50 MB/mo`,
+    fileSize: `1 MB`,
+    hdImages: false
+  },
+  essential: {
+    storage: `1 GB`,
+    fileSize: `100 MB/mo`,
+    hdImages: false
+  },
+  pro: {
+    storage: `10 GB/mo`,
+    fileSize: `1 GB`,
+    hdImages: true
+  },
+  believer: {
+    storage: `25 GB/mo`,
+    fileSize: `5 GB`,
+    hdImages: true
+  }
+};
+
+export type PricingPlan = {
+  id: string;
+  name: string;
+  description: string;
+  subscriptionSkuList: string[];
+  subscriptions?: Record<string, RNIap.Subscription | undefined>;
+  products?: Record<string, RNIap.Product | undefined>;
+  trialSupported?: boolean;
+  recommended?: boolean;
+  productSkuList: string[];
+};
+
+const UUID_PREFIX = "0bdaea";
+const UUID_VERSION = "4";
+const UUID_VARIANT = "a";
+
+function toUUID(str: string) {
+  return [
+    UUID_PREFIX + str.substring(0, 2), // 6 digit prefix + first 2 oid digits
+    str.substring(2, 6), // # next 4 oid digits
+    UUID_VERSION + str.substring(6, 9), // # 1 digit version(0x4) + next 3 oid digits
+    UUID_VARIANT + str.substring(9, 12), // # 1 digit variant(0b101) + 1 zero bit + next 3 oid digits
+    str.substring(12)
+  ].join("-");
+}
+
+const pricingPlans: PricingPlan[] = [
+  {
+    id: "free",
+    name: "Free",
+    description: "Basic features for personal use",
+    subscriptionSkuList: [],
+    productSkuList: []
+  },
+  {
+    id: "essential",
+    name: "Essential",
+    description: "Unlocks essential features for personal use",
+    subscriptionSkuList: [
+      "notesnook.essential.monthly",
+      "notesnook.essential.yearly"
+    ],
+    trialSupported: true,
+    productSkuList: []
+  },
+  {
+    id: "pro",
+    name: "Pro",
+    description: "Unlocks all features for professional use",
+    subscriptionSkuList: [
+      "notesnook.pro.monthly",
+      "notesnook.pro.yearly",
+      "notesnook.pro.yearly.tier2",
+      "notesnook.pro.yearly.tier3"
+    ],
+    productSkuList: ["notesnook.pro.5year"],
+    trialSupported: true,
+    recommended: true
+  },
+  {
+    id: "believer",
+    name: "Believer",
+    description: "Become a believer and support the project",
+    subscriptionSkuList: [
+      "notesnook.believer.monthly",
+      "notesnook.believer.yearly"
+    ],
+    productSkuList: ["notesnook.believer.5year"],
+    trialSupported: true
+  }
+];
+
+const promoCyclesMonthly = {
+  1: "first month",
+  2: "first 2 months",
+  3: "first 3 months",
+  4: "first 4 months",
+  5: "first 5 months",
+  6: "first 3 months"
+};
+
+const promoCyclesYearly = {
+  1: "first year",
+  2: "first 2 years",
+  3: "first 3 years"
+};
+
+type PricingPlansOptions = {
+  promoOffer?: {
+    promoCode: string;
+  };
+  planId?: string;
+  productId?: string;
+  onBuy?: () => void;
+};
+const planIdToIndex = (planId: string) => {
+  const planIndex = planId === "essential" ? 1 : planId === "pro" ? 2 : 3;
+  return planIndex;
+};
+let WebPlanCache: Plan[];
+const usePricingPlans = (options?: PricingPlansOptions) => {
+  const isGithubRelease = Config.GITHUB_RELEASE === "true";
+  const user = useUserStore((state) => state.user);
+  const [currentPlan, setCurrentPlan] = useState<string>(
+    options?.planId || pricingPlans[2].id
+  );
+  const [plans, setPlans] = useState<PricingPlan[]>(pricingPlans);
+  const [loading, setLoading] = useState(false);
+  const [loadingPlans, setLoadingPlans] = useState(true);
+  const [selectedProductSku, setSelectedProductSku] = useState<string>(
+    options?.productId || "notesnook.pro.yearly"
+  );
+  const [isPromoOffer, setIsPromoOffer] = useState(false);
+  const [cancelPromo, setCancelPromo] = useState(false);
+  const [userCanRequestTrial, setUserCanRequestTrial] = useState(false);
+  const [webPricingPlans, setWebPricingPlans] = useState<Plan[]>([]);
+
+  const getProduct = (planId: string, skuId: string) => {
+    if (isGithubRelease)
+      return webPricingPlans.find(
+        (plan) => planIdToIndex(planId) === plan.plan && skuId === plan.period
+      );
+
+    return (
+      plans.find((p) => p.id === planId)?.subscriptions?.[skuId] ||
+      plans.find((p) => p.id === planId)?.products?.[skuId]
+    );
+  };
+
+  const getProductAndroid = (planId: string, skuId: string) => {
+    if (isGithubRelease)
+      return webPricingPlans.find(
+        (plan) => planIdToIndex(planId) === plan.plan && skuId === plan.period
+      );
+    return getProduct(planId, skuId) as RNIap.SubscriptionAndroid;
+  };
+
+  const getProductIOS = (planId: string, skuId: string) => {
+    return getProduct(planId, skuId) as RNIap.SubscriptionIOS;
+  };
+
+  const hasTrialOffer = (planId?: string, productId?: string) => {
+    if (!selectedProductSku && !productId) return false;
+
+    if (productId?.includes("5year")) return false;
+    if (isGithubRelease) {
+      if (
+        user?.subscription?.trialsAvailed?.some(
+          (plan) => plan === planIdToIndex(planId || currentPlan)
+        )
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+
+    return Platform.OS === "ios"
+      ? (
+          getProduct(
+            planId || currentPlan,
+            productId || selectedProductSku
+          ) as RNIap.SubscriptionIOS
+        )?.introductoryPricePaymentModeIOS === "FREETRIAL"
+      : (
+          getProduct(
+            planId || currentPlan,
+            productId || selectedProductSku
+          ) as RNIap.SubscriptionAndroid
+        )?.subscriptionOfferDetails?.[0]?.pricingPhases?.pricingPhaseList
+          ?.length > 1;
+  };
+
+  // user && (!user.subscription || !user.subscription.expiry) ? true : false;
+
+  useEffect(() => {
+    const loadPlans = async () => {
+      const items = await PremiumService.loadProductsAndSubs();
+      pricingPlans.forEach((plan) => {
+        plan.subscriptions = {};
+        plan.products = {};
+        plan.subscriptionSkuList.forEach((sku) => {
+          if (!plan.subscriptions) plan.subscriptions = {};
+          plan.subscriptions[sku] = items.subs.find((p) => p.productId === sku);
+        });
+        plan.productSkuList.forEach((sku) => {
+          if (!plan.products) plan.products = {};
+          plan.products[sku] = items.products.find((p) => p.productId === sku);
+        });
+      });
+      setPlans([...pricingPlans]);
+      setUserCanRequestTrial(hasTrialOffer());
+      if (
+        Config.GITHUB_RELEASE === "true" &&
+        !SettingsService.getProperty("serverUrls")
+      ) {
+        try {
+          const products = WebPlanCache || (await db.pricing.products());
+          WebPlanCache = products;
+          setWebPricingPlans(products);
+        } catch (e) {}
+      }
+      setLoadingPlans(false);
+    };
+    loadPlans();
+  }, [options?.promoOffer, cancelPromo]);
+
+  function getLocalizedPrice(
+    product: RNIap.Subscription | RNIap.Product | Plan
+  ) {
+    if (!product) return;
+
+    if (Platform.OS === "android") {
+      if (isGithubRelease) {
+        if (!(product as Plan)?.price) return null;
+        return `${
+          (product as Plan).currencySymbol || (product as Plan).currency
+        } ${
+          (product as Plan).period === "yearly"
+            ? (product as Plan).price.gross
+            : (product as Plan).period === "5-year"
+            ? (product as Plan).price.gross
+            : (product as Plan).price.gross
+        }`;
+      }
+
+      const pricingPhaseListItem =
+        (product as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          ?.pricingPhases?.pricingPhaseList?.[1] ||
+        (product as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          ?.pricingPhases?.pricingPhaseList?.[0];
+
+      return (
+        pricingPhaseListItem?.formattedPrice ||
+        (product as RNIap.ProductAndroid).oneTimePurchaseOfferDetails
+          ?.formattedPrice
+      );
+    } else {
+      return (product as RNIap.SubscriptionIOS)?.localizedPrice;
+    }
+  }
+  function getOfferTokenAndroid(
+    product: RNIap.Subscription,
+    offerIndex: number
+  ) {
+    return (product as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[
+      offerIndex
+    ].offerToken;
+  }
+
+  async function subscribe(
+    product: RNIap.Subscription | RNIap.Product,
+    androidOfferToken?: string
+  ) {
+    if (loading || !product || isGithubRelease) return;
+    setLoading(true);
+    try {
+      if (!user) {
+        setLoading(false);
+        return;
+      }
+      useSettingStore.getState().setAppDidEnterBackgroundForAction(true);
+
+      if (!product.productId.includes("5year")) {
+        if (Platform.OS === "android") {
+          androidOfferToken =
+            (
+              product as RNIap.SubscriptionAndroid
+            )?.subscriptionOfferDetails.find(
+              (offer) => offer.offerToken === androidOfferToken
+            )?.offerToken ||
+            (product as RNIap.SubscriptionAndroid)
+              ?.subscriptionOfferDetails?.[0].offerToken;
+
+          if (!androidOfferToken) return;
+        }
+
+        DatabaseLogger.info(
+          `Subscription Requested initiated for user ${toUUID(user.id)}`
+        );
+
+        await RNIap.requestSubscription({
+          sku: product?.productId,
+          obfuscatedAccountIdAndroid: user.id,
+          obfuscatedProfileIdAndroid: user.id,
+          purchaseTokenAndroid:
+            user.subscription?.plan !== SubscriptionPlan.FREE
+              ? user.subscription?.googlePurchaseToken || undefined
+              : undefined,
+          replacementModeAndroid: user.subscription?.googlePurchaseToken
+            ? RNIap.ReplacementModesAndroid.WITH_TIME_PRORATION
+            : undefined,
+
+          /**
+           * iOS
+           */
+          appAccountToken: toUUID(user.id),
+          andDangerouslyFinishTransactionAutomaticallyIOS: false,
+          subscriptionOffers: androidOfferToken
+            ? [
+                {
+                  offerToken: androidOfferToken,
+                  sku: product?.productId
+                }
+              ]
+            : undefined
+        });
+        if (
+          (product as RNIap.SubscriptionIOS).introductoryPricePaymentModeIOS ===
+          "FREETRIAL"
+        ) {
+          PremiumService.subscriptions.setTrialStatus(true);
+        }
+      } else {
+        await RNIap.requestPurchase({
+          andDangerouslyFinishTransactionAutomaticallyIOS: false,
+          appAccountToken: toUUID(user.id),
+          obfuscatedAccountIdAndroid: user.id,
+          obfuscatedProfileIdAndroid: user.id,
+          sku: product.productId,
+          skus: [product.productId],
+          quantity: 1
+        });
+      }
+      useSettingStore.getState().setAppDidEnterBackgroundForAction(false);
+      setLoading(false);
+      options?.onBuy?.();
+    } catch (e) {
+      console.log(e);
+      setLoading(false);
+    }
+  }
+
+  function getPromoCycleText(product: RNIap.Subscription) {
+    if (!selectedProductSku) return;
+    const isMonthly = selectedProductSku?.indexOf(".monthly") > -1;
+
+    const cycleText = isMonthly
+      ? promoCyclesMonthly[
+          (Platform.OS === "android"
+            ? (product as RNIap.SubscriptionAndroid)
+                ?.subscriptionOfferDetails[0]?.pricingPhases
+                .pricingPhaseList?.[0].billingCycleCount
+            : parseInt(
+                (product as RNIap.SubscriptionIOS)
+                  .introductoryPriceNumberOfPeriodsIOS as string
+              )) as keyof typeof promoCyclesMonthly
+        ]
+      : promoCyclesYearly[
+          (Platform.OS === "android"
+            ? (product as RNIap.SubscriptionAndroid)
+                ?.subscriptionOfferDetails[0]?.pricingPhases
+                .pricingPhaseList?.[0].billingCycleCount
+            : parseInt(
+                (product as RNIap.SubscriptionIOS)
+                  .introductoryPriceNumberOfPeriodsIOS as string
+              )) as keyof typeof promoCyclesYearly
+        ];
+
+    return cycleText;
+  }
+
+  const getBillingPeriod = (
+    product: RNIap.Subscription | Plan,
+    offerIndex: number
+  ) => {
+    if (isGithubRelease) {
+      return (product as Plan)?.period;
+    }
+
+    if (Platform.OS === "android") {
+      const period = (product as RNIap.SubscriptionAndroid)
+        ?.subscriptionOfferDetails?.[offerIndex]?.pricingPhases
+        ?.pricingPhaseList?.[0].billingPeriod;
+      return period.endsWith("W")
+        ? "week"
+        : period.endsWith("M")
+        ? "month"
+        : "year";
+    } else {
+      const unit = (product as RNIap.SubscriptionIOS)
+        ?.subscriptionPeriodUnitIOS;
+      return unit?.toLocaleLowerCase();
+    }
+  };
+
+  const getBillingDuration = (
+    product: RNIap.Subscription | Plan,
+    offerIndex: number,
+    phaseIndex: number,
+    trialDurationIos?: boolean
+  ) => {
+    if (!product) return;
+
+    if (isGithubRelease) {
+      return {
+        duration: 1,
+        type: (product as Plan)?.period
+      };
+    }
+
+    if ((product as RNIap.Subscription)?.productId.includes("5year")) {
+      return {
+        type: "year",
+        duration: 5
+      };
+    }
+
+    if (Platform.OS === "android") {
+      const phase = (product as RNIap.SubscriptionAndroid)
+        ?.subscriptionOfferDetails?.[offerIndex]?.pricingPhases
+        ?.pricingPhaseList?.[phaseIndex];
+
+      const duration = parseInt(phase.billingPeriod[1]);
+
+      return {
+        duration: phase.billingPeriod.endsWith("W") ? duration * 7 : duration,
+        type: phase.billingPeriod.endsWith("W")
+          ? "week"
+          : phase.billingPeriod.endsWith("M")
+          ? "month"
+          : "year"
+      };
+    } else {
+      const productIos = product as RNIap.SubscriptionIOS;
+      const unit = trialDurationIos
+        ? productIos.introductoryPriceSubscriptionPeriodIOS
+        : productIos.subscriptionPeriodUnitIOS;
+
+      const duration = parseInt(
+        (trialDurationIos
+          ? productIos.introductoryPriceNumberOfPeriodsIOS
+          : productIos.subscriptionPeriodNumberIOS) || "1"
+      );
+
+      return {
+        duration: unit === "WEEK" ? duration * 7 : duration,
+        type: unit?.toLocaleLowerCase()
+      };
+    }
+  };
+
+  const getTrialInfo = (product: RNIap.Subscription) => {
+    if (Platform.OS === "android") {
+      const ProductAndroid = (product as RNIap.SubscriptionAndroid)
+        ?.subscriptionOfferDetails?.[0];
+      if (ProductAndroid.pricingPhases.pricingPhaseList?.length === 1) return;
+      return {
+        period:
+          ProductAndroid?.pricingPhases.pricingPhaseList?.[0].billingPeriod,
+        cycles:
+          ProductAndroid?.pricingPhases.pricingPhaseList?.[0].billingCycleCount
+      };
+    } else {
+      const productIos = product as RNIap.SubscriptionIOS;
+      if (!productIos.introductoryPrice) return;
+      return {
+        period: productIos.introductoryPriceSubscriptionPeriodIOS,
+        cycles: productIos.introductoryPriceNumberOfPeriodsIOS
+          ? parseInt(productIos.introductoryPriceNumberOfPeriodsIOS as string)
+          : 1
+      };
+    }
+  };
+
+  const convertPrice = (
+    amount: number,
+    symbol: string,
+    isAtLeft: boolean,
+    splitBy = 12
+  ) => {
+    const monthlyPrice = amount / splitBy;
+    const formattedPrice = numberWithCommas(monthlyPrice.toFixed(2));
+
+    return isAtLeft
+      ? `${symbol} ${formattedPrice}`
+      : `${formattedPrice} ${symbol}`;
+  };
+
+  const getDiscountValue = (p1: string, p2: string, splitToMonth?: boolean) => {
+    let price1 = Platform.OS === "ios" ? parseInt(p1) : parseInt(p1) / 1000000;
+    const price2 =
+      Platform.OS === "ios" ? parseInt(p2) : parseInt(p2) / 1000000;
+
+    price1 = splitToMonth ? price1 / 12 : price1;
+
+    return (((price2 - price1) / price2) * 100).toFixed(0);
+  };
+
+  const compareProductPrice = (planId: string, sku1: string, sku2: string) => {
+    const plan = pricingPlans.find((p) => p.id === planId);
+    const p1 = plan?.subscriptions?.[sku1];
+    const p2 = plan?.subscriptions?.[sku2];
+
+    if (!p1 || !p2) return 0;
+
+    if (Platform.OS === "android") {
+      const androidPricingPhase1 =
+        (p1 as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          .pricingPhases?.pricingPhaseList?.[1] ||
+        (p1 as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          .pricingPhases?.pricingPhaseList?.[0];
+      const androidPricingPhase2 =
+        (p2 as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          .pricingPhases?.pricingPhaseList?.[1] ||
+        (p2 as RNIap.SubscriptionAndroid)?.subscriptionOfferDetails?.[0]
+          .pricingPhases?.pricingPhaseList?.[0];
+
+      if (!androidPricingPhase1 || !androidPricingPhase2) return 0;
+
+      return getDiscountValue(
+        androidPricingPhase1.priceAmountMicros,
+        androidPricingPhase2.priceAmountMicros,
+        true
+      );
+    } else {
+      return getDiscountValue(
+        (p1 as RNIap.SubscriptionIOS).price,
+        (p2 as RNIap.SubscriptionIOS).price,
+        true
+      );
+    }
+  };
+
+  const getPriceParts = (price: number, localizedPrice: string) => {
+    let priceValue: number;
+
+    if (Platform.OS === "ios") {
+      priceValue = price;
+    } else {
+      priceValue = price / 1000000;
+    }
+    const priceSymbol = localizedPrice.replace(/[\s\d,.]+/, "");
+
+    return { priceValue, priceSymbol, localizedPrice };
+  };
+
+  const getPrice = (
+    product: RNIap.Subscription | RNIap.Product | Plan,
+    phaseIndex: number,
+    annualBilling?: boolean
+  ) => {
+    if (!product) return null;
+
+    if (isGithubRelease) {
+      if (!(product as Plan)?.price) return null;
+      return `${
+        (product as Plan).currencySymbol || (product as Plan).currency
+      } ${
+        (product as Plan).period === "yearly"
+          ? ((product as Plan).price.gross / 12).toFixed(2)
+          : (product as Plan).period === "5-year"
+          ? ((product as Plan).price.gross / (12 * 5)).toFixed(2)
+          : (product as Plan).price.gross
+      }`;
+    }
+
+    const androidPricingPhase = (product as RNIap.SubscriptionAndroid)
+      ?.subscriptionOfferDetails?.[0].pricingPhases?.pricingPhaseList?.[
+      phaseIndex
+    ];
+
+    const { localizedPrice, priceSymbol, priceValue } = getPriceParts(
+      Platform.OS === "android"
+        ? parseInt(
+            androidPricingPhase?.priceAmountMicros ||
+              (product as RNIap.ProductAndroid)?.oneTimePurchaseOfferDetails
+                ?.priceAmountMicros ||
+              "0"
+          )
+        : parseInt((product as RNIap.SubscriptionIOS).price),
+      Platform.OS === "android"
+        ? androidPricingPhase?.formattedPrice ||
+            (product as RNIap.ProductAndroid).oneTimePurchaseOfferDetails
+              ?.formattedPrice ||
+            "0"
+        : (product as RNIap.SubscriptionIOS).localizedPrice
+    );
+
+    return !annualBilling &&
+      !(product as RNIap.Subscription)?.productId.includes("5year")
+      ? getLocalizedPrice(product as RNIap.Subscription)
+      : convertPrice(
+          priceValue,
+          priceSymbol,
+          localizedPrice.startsWith(priceSymbol),
+          annualBilling ? 12 : 60
+        );
+  };
+
+  async function getRegionalDiscount(plan: string, productId: string) {
+    if (productId !== "notesnook.pro.yearly") {
+      return;
+    }
+    try {
+      return await db.pricing.sku(
+        Platform.OS === "android" ? "google" : "apple",
+        "yearly",
+        plan as SubscriptionPlanId
+      );
+    } catch (e) {
+      console.log(e);
+    }
+  }
+
+  return {
+    currentPlan: pricingPlans.find((p) => p.id === currentPlan),
+    pricingPlans: plans,
+    getStandardPrice: getLocalizedPrice,
+    loadingPlans,
+    loading,
+    selectPlan: (planId: string, productId?: string) => {
+      setCurrentPlan(planId);
+      if (productId) {
+        console.log(productId, "productId");
+        setSelectedProductSku(productId);
+      } else {
+        const product = plans.find((p) => p.id === planId)
+          ?.subscriptionSkuList?.[0];
+        if (product) {
+          setSelectedProductSku(product);
+        }
+      }
+
+      setIsPromoOffer(false);
+    },
+    convertYearlyPriceToMonthly: convertPrice,
+    getOfferTokenAndroid,
+    subscribe,
+    selectProduct: setSelectedProductSku,
+    selectedProduct: selectedProductSku
+      ? getProduct(currentPlan, selectedProductSku)
+      : undefined,
+    isPromoOffer,
+    getPromoCycleText,
+    getProduct,
+    getProductAndroid,
+    getProductIOS,
+    hasTrialOffer,
+    userCanRequestTrial: userCanRequestTrial,
+    cancelPromoOffer: () => setCancelPromo(true),
+    getBillingDuration,
+    getBillingPeriod,
+    getTrialInfo,
+    user,
+    getPrice,
+    compareProductPrice,
+    get5YearPlanProduct: () => {
+      if (currentPlan === "free" || currentPlan === "essential") return;
+      return plans.find((p) => p.id === "pro")?.products?.[
+        `notesnook.${currentPlan}.5year`
+      ];
+    },
+    getWebPlan(plan: string, period: "monthly" | "yearly") {
+      const planIndex = planIdToIndex(plan);
+      return webPricingPlans.find(
+        (plan) => plan.plan === planIndex && plan.period === period
+      );
+    },
+    getRegionalDiscount,
+    isGithubRelease: isGithubRelease,
+    isSubscribed: () => user?.subscription?.plan !== SubscriptionPlan.FREE,
+    finish: () => options?.onBuy?.()
+  };
+};
+
+export default usePricingPlans;