From 0a5bdaaa7fa97edfeaa6918a552fc4f1be62a4db Mon Sep 17 00:00:00 2001
From: Ammar Ahmed <ammarahmed6506@gmail.com>
Date: Fri, 1 Aug 2025 11:19:22 +0500
Subject: [PATCH] mobile: add plan preview in settings

---
 apps/mobile/app/hooks/use-feature-manager.ts  |  54 +++---
 .../app/screens/settings/settings-data.tsx    |   5 +-
 .../{subscription.js => subscription.jsx}     |  11 +-
 .../{user-section.js => user-section.jsx}     | 163 ++++++++++++------
 4 files changed, 152 insertions(+), 81 deletions(-)
 rename apps/mobile/app/screens/settings/{subscription.js => subscription.jsx} (95%)
 rename apps/mobile/app/screens/settings/{user-section.js => user-section.jsx} (69%)

diff --git a/apps/mobile/app/hooks/use-feature-manager.ts b/apps/mobile/app/hooks/use-feature-manager.ts
index b0859c7dc..df05567d4 100644
--- a/apps/mobile/app/hooks/use-feature-manager.ts
+++ b/apps/mobile/app/hooks/use-feature-manager.ts
@@ -21,7 +21,8 @@ export default function useFeatureManager() {
     "defaultNotebookAndTag",
     "defaultSidebarTab",
     "customToolbarPreset",
-    "disableTrashCleanup"
+    "disableTrashCleanup",
+    "fullOfflineMode"
   ]);
   const user = useUserStore((state) => state.user);
 
@@ -55,33 +56,42 @@ export default function useFeatureManager() {
       useDragState.getState().setPreset("default");
     }
 
+    if (!features.fullOfflineMode.isAllowed) {
+      SettingsService.setProperty("offlineMode", false);
+    }
+
     if (!features.defaultNotebookAndTag.isAllowed) {
       db.settings.setDefaultNotebook(undefined);
       db.settings.setDefaultTag(undefined);
     }
+    const isAppLocked = useUserStore.getState().appLocked;
+    let unsub: () => void;
+
+    if (isAppLocked) {
+      unsub = useUserStore.subscribe((state) => {
+        if (!state.appLocked && !features?.appLock?.isAllowed) {
+          unsub();
+          SettingsService.setProperty("appLockEnabled", false);
+          setTimeout(() => {
+            presentDialog({
+              title: "App Lock Disabled",
+              paragraph: features?.appLock?.error,
+              positiveText: strings.upgrade(),
+              negativeText: strings.cancel(),
+              positivePress: async () => {
+                eSendEvent(eCloseSimpleDialog);
+                Navigation.navigate("PayWall", {
+                  context: "logged-in"
+                });
+              }
+            });
+          }, 1000);
+        }
+      });
+    }
 
-    const unsub = useUserStore.subscribe((state) => {
-      if (!state.appLocked && !features?.appLock?.isAllowed) {
-        unsub();
-        SettingsService.setProperty("appLockEnabled", false);
-        setTimeout(() => {
-          presentDialog({
-            title: "App Lock Disabled",
-            paragraph: features?.appLock?.error,
-            positiveText: strings.upgrade(),
-            negativeText: strings.cancel(),
-            positivePress: async () => {
-              eSendEvent(eCloseSimpleDialog);
-              Navigation.navigate("PayWall", {
-                context: "logged-in"
-              });
-            }
-          });
-        }, 1000);
-      }
-    });
     return () => {
-      unsub();
+      unsub?.();
     };
   }, [features]);
 
diff --git a/apps/mobile/app/screens/settings/settings-data.tsx b/apps/mobile/app/screens/settings/settings-data.tsx
index 82812d9c9..bc7ff4583 100644
--- a/apps/mobile/app/screens/settings/settings-data.tsx
+++ b/apps/mobile/app/screens/settings/settings-data.tsx
@@ -81,14 +81,15 @@ export const settingsGroups: SettingSection[] = [
         hidden: (current) => !current,
         name: (current) => {
           const user = (current as User) || useUserStore.getState().user;
-          if (!user) return strings.subscribeToPro();
+          if (!user) return strings.upgradePlan();
           const isBasic = user.subscription?.type === SUBSCRIPTION_STATUS.BASIC;
           const isTrial = user.subscription?.type === SUBSCRIPTION_STATUS.TRIAL;
           return isBasic || !user.subscription?.type
-            ? strings.subscribeToPro()
+            ? strings.upgradePlan()
             : isTrial
             ? strings.trialStarted()
             : strings.subDetails();
+          ``;
         },
         type: "component",
         component: "subscription",
diff --git a/apps/mobile/app/screens/settings/subscription.js b/apps/mobile/app/screens/settings/subscription.jsx
similarity index 95%
rename from apps/mobile/app/screens/settings/subscription.js
rename to apps/mobile/app/screens/settings/subscription.jsx
index 51c24a574..8205b3efd 100644
--- a/apps/mobile/app/screens/settings/subscription.js
+++ b/apps/mobile/app/screens/settings/subscription.jsx
@@ -21,7 +21,6 @@ import { strings } from "@notesnook/intl";
 import React from "react";
 import { Linking, Platform, View } from "react-native";
 import Config from "react-native-config";
-import { Button } from "../../components/ui/button";
 import { usePricing } from "../../hooks/use-pricing";
 import {
   eSendEvent,
@@ -32,8 +31,6 @@ import PremiumService from "../../services/premium";
 import { useUserStore } from "../../stores/use-user-store";
 import { SUBSCRIPTION_STATUS } from "../../utils/constants";
 import { eOpenPremiumDialog } from "../../utils/events";
-import { AppFontSize } from "../../utils/size";
-import { DefaultAppStyles } from "../../utils/styles";
 export const Subscription = () => {
   const user = useUserStore((state) => state.user);
   const monthlyPlan = usePricing("monthly");
@@ -95,7 +92,7 @@ export const Subscription = () => {
 
   return (
     <View>
-      {isNotPro ? (
+      {/* {isNotPro ? (
         <Button
           height={40}
           style={{
@@ -121,9 +118,9 @@ export const Subscription = () => {
               : `${strings.getPro()} (${getPrice() || "$4.49"} / mo)`
           }
         />
-      ) : null}
+      ) : null} */}
 
-      {subscriptionProviderInfo &&
+      {/* {subscriptionProviderInfo &&
       user.subscription?.type !== SUBSCRIPTION_STATUS.PREMIUM_EXPIRED &&
       user.subscription?.type !== SUBSCRIPTION_STATUS.BASIC ? (
         <Button
@@ -143,7 +140,7 @@ export const Subscription = () => {
           height={30}
           type="secondaryAccented"
         />
-      ) : null}
+      ) : null} */}
     </View>
   );
 };
diff --git a/apps/mobile/app/screens/settings/user-section.js b/apps/mobile/app/screens/settings/user-section.jsx
similarity index 69%
rename from apps/mobile/app/screens/settings/user-section.js
rename to apps/mobile/app/screens/settings/user-section.jsx
index 6a8e4227c..23fb5a58c 100644
--- a/apps/mobile/app/screens/settings/user-section.js
+++ b/apps/mobile/app/screens/settings/user-section.jsx
@@ -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/>.
 */
 
+import { strings } from "@notesnook/intl";
 import { useThemeColors } from "@notesnook/theme";
 import { useNetInfo } from "@react-native-community/netinfo";
 import dayjs from "dayjs";
@@ -27,16 +28,15 @@ import Icon from "react-native-vector-icons/MaterialCommunityIcons";
 import { db } from "../../common/database";
 import { presentDialog } from "../../components/dialog/functions";
 import AppIcon from "../../components/ui/AppIcon";
+import { Button } from "../../components/ui/button";
 import { TimeSince } from "../../components/ui/time-since";
-import Heading from "../../components/ui/typography/heading";
 import Paragraph from "../../components/ui/typography/paragraph";
+import Navigation from "../../services/navigation";
 import { useThemeStore } from "../../stores/use-theme-store";
 import { SyncStatus, useUserStore } from "../../stores/use-user-store";
-import { SUBSCRIPTION_STATUS_STRINGS } from "../../utils/constants";
 import { AppFontSize } from "../../utils/size";
-import { SectionItem } from "./section-item";
-import { strings } from "@notesnook/intl";
 import { DefaultAppStyles } from "../../utils/styles";
+import { SectionItem } from "./section-item";
 
 export const getTimeLeft = (t2) => {
   let daysRemaining = dayjs(t2).diff(dayjs(), "days");
@@ -60,8 +60,8 @@ const ProfilePicPlaceholder = (props) => {
         style={{
           backgroundColor: colors.primary.shade,
           borderRadius: 100,
-          width: 100,
-          height: 100,
+          width: 80,
+          height: 80,
           alignItems: "center",
           justifyContent: "center"
         }}
@@ -123,6 +123,8 @@ const SettingsUserSection = ({ item }) => {
   const { isInternetReachable } = useNetInfo();
   const isOffline = !isInternetReachable;
   const userProfile = useUserStore((state) => state.profile);
+  const used = 50;
+  const total = 100;
 
   return (
     <>
@@ -131,7 +133,7 @@ const SettingsUserSection = ({ item }) => {
           <View
             style={{
               paddingHorizontal: DefaultAppStyles.GAP,
-              paddingTop: 50,
+              paddingTop: 25,
               borderBottomWidth: 1,
               paddingBottom: 20,
               borderColor: colors.primary.border
@@ -140,23 +142,23 @@ const SettingsUserSection = ({ item }) => {
             <View
               style={{
                 flexDirection: "row",
-                justifyContent: "space-between",
                 width: "100%"
               }}
             >
               <View
                 style={{
-                  flexDirection: "column",
-                  alignItems: "center",
-                  width: "100%"
+                  flexDirection: "row",
+                  width: "100%",
+                  gap: DefaultAppStyles.GAP,
+                  alignItems: "center"
                 }}
               >
                 <View
                   style={{
                     borderWidth: 2,
                     borderRadius: 100,
-                    marginBottom: DefaultAppStyles.GAP_VERTICAL,
-                    borderColor: colors.primary.accent
+                    borderColor: colors.primary.accent,
+                    alignSelf: "flex-start"
                   }}
                 >
                   {userProfile?.profilePicture ? (
@@ -169,9 +171,9 @@ const SettingsUserSection = ({ item }) => {
                           uri: userProfile?.profilePicture
                         }}
                         style={{
-                          width: 100,
-                          height: 100,
-                          borderRadius: 100
+                          width: 80,
+                          height: 80,
+                          borderRadius: 80
                         }}
                       />
                     </TouchableOpacity>
@@ -180,22 +182,7 @@ const SettingsUserSection = ({ item }) => {
                   )}
                 </View>
 
-                <View
-                  style={{
-                    alignItems: "center"
-                  }}
-                >
-                  {premium ? (
-                    <Heading
-                      color={colors.primary.accent}
-                      size={AppFontSize.sm}
-                    >
-                      {SUBSCRIPTION_STATUS_STRINGS[
-                        user.subscription?.type
-                      ]?.toUpperCase() || strings.basic()}
-                    </Heading>
-                  ) : null}
-
+                <View>
                   <Paragraph
                     onPress={() => {
                       presentDialog({
@@ -219,12 +206,12 @@ const SettingsUserSection = ({ item }) => {
                       });
                     }}
                     color={colors.primary.heading}
-                    size={AppFontSize.lg}
+                    size={AppFontSize.md}
                   >
                     {userProfile?.fullName
                       ? userProfile.fullName + " "
                       : strings.setYourName() + " "}
-                    <AppIcon name="pencil" size={AppFontSize.lg} />
+                    <AppIcon name="pencil" size={AppFontSize.md} />
                   </Paragraph>
 
                   <Paragraph
@@ -236,8 +223,7 @@ const SettingsUserSection = ({ item }) => {
 
                   <Paragraph
                     style={{
-                      flexWrap: "wrap",
-                      marginTop: DefaultAppStyles.GAP_VERTICAL_SMALL
+                      flexWrap: "wrap"
                     }}
                     size={AppFontSize.xs}
                     color={colors.secondary.heading}
@@ -255,28 +241,105 @@ const SettingsUserSection = ({ item }) => {
                             color: colors.secondary.paragraph
                           }}
                           time={lastSynced}
-                        />
+                        />{" "}
+                        ago
                         {isOffline ? ` (${strings.offline()})` : ""}
                       </>
                     ) : (
                       strings.never()
-                    )}{" "}
-                    <Icon
-                      name="checkbox-blank-circle"
-                      size={11}
-                      allowFontScaling
-                      color={
-                        !user || lastSyncStatus === SyncStatus.Failed
-                          ? colors.error.icon
-                          : isOffline
-                          ? colors.static.orange
-                          : colors.success.icon
-                      }
-                    />
+                    )}
                   </Paragraph>
                 </View>
               </View>
             </View>
+
+            <View
+              style={{
+                paddingVertical: DefaultAppStyles.GAP_SMALL,
+                gap: DefaultAppStyles.GAP_VERTICAL,
+                borderRadius: 10
+              }}
+            >
+              <View
+                style={{
+                  gap: DefaultAppStyles.GAP_SMALL,
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL
+                }}
+              >
+                <View
+                  style={{
+                    flexDirection: "row",
+                    width: "100%",
+                    justifyContent: "space-between"
+                  }}
+                >
+                  <Paragraph size={AppFontSize.xxs}>
+                    {strings.storage()}
+                  </Paragraph>
+                  <Paragraph size={AppFontSize.xxs}>
+                    50/100MB {strings.used()}
+                  </Paragraph>
+                </View>
+                <View
+                  style={{
+                    backgroundColor: colors.secondary.background,
+                    width: "100%",
+                    height: 5,
+                    borderRadius: 10
+                  }}
+                >
+                  <View
+                    style={{
+                      backgroundColor: colors.static.black,
+                      height: 5,
+                      width: `${(used / total) * 100}%`,
+                      borderRadius: 10
+                    }}
+                  />
+                </View>
+              </View>
+
+              <View
+                style={{
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  width: "100%",
+                  paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+                  borderRadius: 10
+                }}
+              >
+                <View>
+                  <Paragraph size={AppFontSize.sm}>
+                    {strings.freePlan()}
+                  </Paragraph>
+                  <Paragraph
+                    color={colors.secondary.paragraph}
+                    size={AppFontSize.xxxs}
+                  >
+                    {strings.viewAllLimits()}{" "}
+                    <AppIcon name="information" size={AppFontSize.xxxs} />
+                  </Paragraph>
+                </View>
+
+                <Button
+                  title={strings.upgradePlan()}
+                  onPress={() => {
+                    Navigation.navigate("PayWall", {
+                      context: "logged-in",
+                      canGoBack: true
+                    });
+                  }}
+                  type="accent"
+                  fontSize={AppFontSize.xs}
+                  style={{
+                    paddingHorizontal: DefaultAppStyles.GAP_SMALL,
+                    height: "auto",
+                    paddingVertical: DefaultAppStyles.GAP_SMALL
+                  }}
+                />
+              </View>
+            </View>
           </View>
 
           {item.sections.map((item) => (