mobile: wrapped 2025

2025-12-16 11:47:54 +01:00 · 2025-12-11 13:58:41 +05:00
parent 2918b8f04b
commit f536def5fa
7 changed files with 1350 additions and 50 deletions
--- a/apps/mobile/app/components/side-menu/side-menu-home.tsx
+++ b/apps/mobile/app/components/side-menu/side-menu-home.tsx
@@ -19,6 +19,7 @@ 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 dayjs from "dayjs";
 import React from "react";
 import { FlatList, View } from "react-native";
 import { DraxProvider, DraxScrollView } from "react-native-drax";
@@ -140,19 +141,35 @@ export function SideMenuHome() {
          paddingVertical: DefaultAppStyles.GAP_VERTICAL
        }}
      >
-        {(subscriptionType === SubscriptionPlan.FREE ||
-          !subscriptionType ||
-          !user) &&
-        !SettingsService.getProperty("serverUrls") ? (
+        {dayjs().month() !== 11 ? (
+          <>
+            {(subscriptionType === SubscriptionPlan.FREE ||
+              !subscriptionType ||
+              !user) &&
+            !SettingsService.getProperty("serverUrls") ? (
+              <Button
+                title={pro.title}
+                style={{
+                  width: "100%"
+                }}
+                type="accent"
+                onPress={pro.onPress}
+              />
+            ) : null}
+          </>
+        ) : (
          <Button
-            title={pro.title}
+            title={`Wrapped ${dayjs().year()} 🎉`}
            style={{
              width: "100%"
            }}
-            type="accent"
-            onPress={pro.onPress}
+            bold
+            type="secondaryAccented"
+            onPress={() => {
+              Navigation.navigate("Wrapped");
+            }}
          />
-        ) : null}
+        )}
      </View>
    </View>
  );
--- a/apps/mobile/app/navigation/navigation-stack.tsx
+++ b/apps/mobile/app/navigation/navigation-stack.tsx
@@ -273,6 +273,7 @@ let Settings: any = null;
 let ManageTags: any = null;
 let AddReminder: any = null;
 let PayWall: any = null;
+let Wrapped: any = null;
 export const RootNavigation = () => {
  const introCompleted = useSettingStore(
    (state) => state.settings.introCompleted
@@ -384,6 +385,14 @@ export const RootNavigation = () => {
            return PayWall;
          }}
        />
+
+        <RootStack.Screen
+          name="Wrapped"
+          getComponent={() => {
+            Wrapped = Wrapped || require("../screens/wrapped").default;
+            return Wrapped;
+          }}
+        />
      </RootStack.Navigator>
    </NavigationContainer>
  );
--- a/apps/mobile/app/screens/wrapped/index.tsx
+++ b/apps/mobile/app/screens/wrapped/index.tsx
--- a/apps/mobile/app/services/navigation.ts
+++ b/apps/mobile/app/services/navigation.ts
@@ -71,7 +71,8 @@ const routeNames = {
  Archive: "Archive",
  ManageTags: "ManageTags",
  AddReminder: "AddReminder",
-  PayWall: "PayWall"
+  PayWall: "PayWall",
+  Wrapped: "Wrapped"
 };

 export type NavigationProps<T extends RouteName> = NativeStackScreenProps<
--- a/apps/mobile/app/stores/use-navigation-store.ts
+++ b/apps/mobile/app/stores/use-navigation-store.ts
@@ -112,6 +112,7 @@ export interface RouteParams extends ParamListBase {
    context: "signup" | "logged-in" | "logged-out" | "subscribed";
    state?: BillingState;
  };
+  Wrapped: GenericRouteParam;
 }

 export type RouteName = keyof RouteParams;
--- a/apps/mobile/package-lock.json
+++ b/apps/mobile/package-lock.json
@@ -71,7 +71,7 @@
        "react": "19.1.1",
        "react-async-hook": "^4.0.0",
        "react-native": "0.82.1",
-        "react-native-actions-sheet": "10.0.0-alpha.8",
+        "react-native-actions-sheet": "^10.1.0",
        "react-native-actions-shortcuts": "^1.0.1",
        "react-native-background-actions": "^2.6.6",
        "react-native-begin-background-task": "github:blockfirm/react-native-begin-background-task",
@@ -107,7 +107,7 @@
        "react-native-progress": "5.0.0",
        "react-native-qrcode-svg": "^6.0.6",
        "react-native-quick-sqlite": "^8.2.7",
-        "react-native-reanimated": "^4.1.3",
+        "react-native-reanimated": "^4.2.0",
        "react-native-reanimated-progress-bar": "1.0.1",
        "react-native-safe-area-context": "^5.6.1",
        "react-native-scoped-storage": "^1.9.5",
@@ -122,9 +122,10 @@
        "react-native-tooltips": "^1.0.3",
        "react-native-url-polyfill": "^2.0.0",
        "react-native-vector-icons": "10.3.0",
+        "react-native-view-shot": "^4.0.3",
        "react-native-webview": "^13.13.5",
        "react-native-wheel-color-picker": "^1.3.1",
-        "react-native-worklets": "^0.6.1",
+        "react-native-worklets": "^0.7.1",
        "react-native-zip-archive": "6.0.9",
        "timeago.js": "4.0.2",
        "toggle-switch-react-native": "3.2.0",
@@ -227,6 +228,7 @@
        "@streetwriters/kysely": "^0.27.4",
        "@streetwriters/showdown": "^3.0.9-alpha",
        "@types/mime-db": "^1.43.5",
+        "alfaaz": "^1.1.0",
        "async-mutex": "0.5.0",
        "dayjs": "1.11.13",
        "dom-serializer": "^2.0.0",
@@ -1990,6 +1992,7 @@
      "version": "7.28.5",
      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.28.5.tgz",
      "integrity": "sha512-N6fut9IZlPnjPwgiQkXNhb+cT8wQKFlJNqcZkWlcTqkcqx6/kU4ynGmLFoa4LViBSirn05YAwk+sQBbPfxtYzQ==",
+      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.27.1",
@@ -2472,16 +2475,16 @@
      }
    },
    "node_modules/@babel/preset-typescript": {
-      "version": "7.28.5",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.28.5.tgz",
-      "integrity": "sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.1.tgz",
+      "integrity": "sha512-l7WfQfX0WK4M0v2RudjuQK4u99BS6yLHYEmdtVPP7lKV013zr9DygFuWNlnbvQ9LR+LS0Egz/XAvGx5U9MX0fQ==",
      "license": "MIT",
      "dependencies": {
        "@babel/helper-plugin-utils": "^7.27.1",
        "@babel/helper-validator-option": "^7.27.1",
        "@babel/plugin-syntax-jsx": "^7.27.1",
        "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-        "@babel/plugin-transform-typescript": "^7.28.5"
+        "@babel/plugin-transform-typescript": "^7.27.1"
      },
      "engines": {
        "node": ">=6.9.0"
@@ -7486,6 +7489,15 @@
      "resolved": "https://registry.npmjs.org/base-64/-/base-64-0.1.0.tgz",
      "integrity": "sha512-Y5gU45svrR5tI2Vt/X9GPd3L0HNIKzGu202EjxrXMpuc2V2CiKgemAbUUsqYmZJvPtCXoUKjNZwBJzsNScUbXA=="
    },
+    "node_modules/base64-arraybuffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
+      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
    "node_modules/base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -8542,6 +8554,15 @@
      "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==",
      "license": "MIT"
    },
+    "node_modules/css-line-break": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz",
+      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/css-select": {
      "version": "5.2.2",
      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
@@ -11622,6 +11643,19 @@
        "entities": "^4.4.0"
      }
    },
+    "node_modules/html2canvas": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz",
+      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-line-break": "^2.1.0",
+        "text-segmentation": "^1.0.3"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
    "node_modules/htmlparser2": {
      "version": "9.1.0",
      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-9.1.0.tgz",
@@ -17119,9 +17153,9 @@
      }
    },
    "node_modules/react-native-actions-sheet": {
-      "version": "10.0.0-alpha.8",
-      "resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-10.0.0-alpha.8.tgz",
-      "integrity": "sha512-olKqucpGaxP/kiO2/nw0uPXn69ZdWWhcHFzu2tcv5RBMl+PhRv870HuODbE21X4jXY/fWTG6FwPJqRqWpKkY8A==",
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-actions-sheet/-/react-native-actions-sheet-10.1.0.tgz",
+      "integrity": "sha512-pfbfWs2YqdF3Vo7Cx6LUsDQ/uS3iw8H64iFxZvtLXhZ3cVHWundJ903sZtadzJC+TpQIRV7NQsdnhErhf+wBlg==",
      "license": "MIT",
      "peerDependencies": {
        "react-native": "*",
@@ -17788,19 +17822,18 @@
      }
    },
    "node_modules/react-native-reanimated": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.1.3.tgz",
-      "integrity": "sha512-GP8wsi1u3nqvC1fMab/m8gfFwFyldawElCcUSBJQgfrXeLmsPPUOpDw44lbLeCpcwUuLa05WTVePdTEwCLTUZg==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-4.2.0.tgz",
+      "integrity": "sha512-frhu5b8/m/VvaMWz48V8RxcsXnE3hrlErQ5chr21MzAeDCpY4X14sQjvm+jvu3aOI+7Cz2atdRpyhhIuqxVaXg==",
      "license": "MIT",
      "dependencies": {
-        "react-native-is-edge-to-edge": "^1.2.1",
-        "semver": "7.7.2"
+        "react-native-is-edge-to-edge": "1.2.1",
+        "semver": "7.7.3"
      },
      "peerDependencies": {
-        "@babel/core": "^7.0.0-0",
        "react": "*",
        "react-native": "*",
-        "react-native-worklets": ">=0.5.0"
+        "react-native-worklets": ">=0.7.0"
      }
    },
    "node_modules/react-native-reanimated-progress-bar": {
@@ -17815,9 +17848,9 @@
      }
    },
    "node_modules/react-native-reanimated/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
@@ -18058,6 +18091,19 @@
        "node": ">=10"
      }
    },
+    "node_modules/react-native-view-shot": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-4.0.3.tgz",
+      "integrity": "sha512-USNjYmED7C0me02c1DxKA0074Hw+y/nxo+xJKlffMvfUWWzL5ELh/TJA/pTnVqFurIrzthZDPtDM7aBFJuhrHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "html2canvas": "^1.4.1"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
    "node_modules/react-native-webview": {
      "version": "13.16.0",
      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-13.16.0.tgz",
@@ -18082,33 +18128,49 @@
      }
    },
    "node_modules/react-native-worklets": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.6.1.tgz",
-      "integrity": "sha512-URca8l7c7Uog7gv4mcg9KILdJlnbvwdS5yfXQYf5TDkD2W1VY1sduEKrD+sA3lUPXH/TG1vmXAvNxCNwPMYgGg==",
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-worklets/-/react-native-worklets-0.7.1.tgz",
+      "integrity": "sha512-KNsvR48ULg73QhTlmwPbdJLPsWcyBotrGPsrDRDswb5FYpQaJEThUKc2ncXE4UM5dn/ewLoQHjSjLaKUVPxPhA==",
      "license": "MIT",
      "dependencies": {
-        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
-        "@babel/plugin-transform-class-properties": "^7.0.0-0",
-        "@babel/plugin-transform-classes": "^7.0.0-0",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.0.0-0",
-        "@babel/plugin-transform-optional-chaining": "^7.0.0-0",
-        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
-        "@babel/plugin-transform-template-literals": "^7.0.0-0",
-        "@babel/plugin-transform-unicode-regex": "^7.0.0-0",
-        "@babel/preset-typescript": "^7.16.7",
-        "convert-source-map": "^2.0.0",
-        "semver": "7.7.2"
+        "@babel/plugin-transform-arrow-functions": "7.27.1",
+        "@babel/plugin-transform-class-properties": "7.27.1",
+        "@babel/plugin-transform-classes": "7.28.4",
+        "@babel/plugin-transform-nullish-coalescing-operator": "7.27.1",
+        "@babel/plugin-transform-optional-chaining": "7.27.1",
+        "@babel/plugin-transform-shorthand-properties": "7.27.1",
+        "@babel/plugin-transform-template-literals": "7.27.1",
+        "@babel/plugin-transform-unicode-regex": "7.27.1",
+        "@babel/preset-typescript": "7.27.1",
+        "convert-source-map": "2.0.0",
+        "semver": "7.7.3"
      },
      "peerDependencies": {
-        "@babel/core": "^7.0.0-0",
+        "@babel/core": "*",
        "react": "*",
        "react-native": "*"
      }
    },
+    "node_modules/react-native-worklets/node_modules/@babel/plugin-transform-optional-chaining": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.27.1.tgz",
+      "integrity": "sha512-BQmKPPIuc8EkZgNKsv0X4bPmOoayeu4F1YCwx2/CfmDSXDbp7GnzlUH+/ul5VGfRg1AoFPsrIThlEBj2xb4CAg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
    "node_modules/react-native-worklets/node_modules/semver": {
-      "version": "7.7.2",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
-      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "version": "7.7.3",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.3.tgz",
+      "integrity": "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q==",
      "license": "ISC",
      "bin": {
        "semver": "bin/semver.js"
@@ -20255,6 +20317,15 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/text-segmentation": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz",
+      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
+      "license": "MIT",
+      "dependencies": {
+        "utrie": "^1.0.2"
+      }
+    },
    "node_modules/thingies": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.5.0.tgz",
@@ -21066,6 +21137,15 @@
        "node": ">= 0.4.0"
      }
    },
+    "node_modules/utrie": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz",
+      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
+      "license": "MIT",
+      "dependencies": {
+        "base64-arraybuffer": "^1.0.2"
+      }
+    },
    "node_modules/uuid": {
      "version": "11.1.0",
      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
--- a/apps/mobile/package.json
+++ b/apps/mobile/package.json
@@ -87,7 +87,7 @@
    "react": "19.1.1",
    "react-async-hook": "^4.0.0",
    "react-native": "0.82.1",
-    "react-native-actions-sheet": "10.0.0-alpha.8",
+    "react-native-actions-sheet": "^10.1.0",
    "react-native-actions-shortcuts": "^1.0.1",
    "react-native-background-actions": "^2.6.6",
    "react-native-begin-background-task": "github:blockfirm/react-native-begin-background-task",
@@ -123,7 +123,7 @@
    "react-native-progress": "5.0.0",
    "react-native-qrcode-svg": "^6.0.6",
    "react-native-quick-sqlite": "^8.2.7",
-    "react-native-reanimated": "^4.1.3",
+    "react-native-reanimated": "^4.2.0",
    "react-native-reanimated-progress-bar": "1.0.1",
    "react-native-safe-area-context": "^5.6.1",
    "react-native-scoped-storage": "^1.9.5",
@@ -138,9 +138,10 @@
    "react-native-tooltips": "^1.0.3",
    "react-native-url-polyfill": "^2.0.0",
    "react-native-vector-icons": "10.3.0",
+    "react-native-view-shot": "^4.0.3",
    "react-native-webview": "^13.13.5",
    "react-native-wheel-color-picker": "^1.3.1",
-    "react-native-worklets": "^0.6.1",
+    "react-native-worklets": "^0.7.1",
    "react-native-zip-archive": "6.0.9",
    "timeago.js": "4.0.2",
    "toggle-switch-react-native": "3.2.0",