home, subscription and other fixes

src/layouts/Page.js

@@ -4,14 +4,17 @@ import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view
 import { SafeAreaView } from "react-native-safe-area-context";
 import React from "reactn";
 import { responsiveHeight } from "../actions/responsiveSizes.js";
-import { icons } from "../assets";
+import { icons, subBadges } from "../assets";
 import BaseHeader from "../components/BaseHeader";
+import CoinIcon from "../components/CoinIcon";
 import ConnectBtn from "../components/ConnectBtn.js";
 import CoinPackModal from "../components/modal/CoinPackModal";
 import NavigateHeader from "../components/NavigateHeader";
 import ShareBtn from "../components/ShareBtn/ShareBtn";
 import { isWeb } from "../hooks/useLayoutType.js";
 import { useUserData } from "../providers/UserDataProvider";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService";
 import { gutters } from "../styles";
 import { FONT_FAMILY } from "../styles/Fonts";
 import { subscribeCoinPackModal } from "../utils/coinPackModal";
@@ -75,6 +78,61 @@ export default ({
   const showCoinBadge = isWeb && !!currentUID && showCoin;
   const [isCoinModalVisible, setCoinModalVisible] = React.useState(false);
 
+  const subscriptionBadgeSource = React.useMemo(() => {
+    const allowedLevels = new Set(["starter", "pro", "premium"]);
+    const pickLevel = (value) => {
+      if (typeof value !== "string") {
+        return null;
+      }
+      const normalized = value.trim().toLowerCase();
+      return normalized && allowedLevels.has(normalized) ? normalized : null;
+    };
+
+    const nestedSubscription =
+      currentUserData?.subscription &&
+      typeof currentUserData.subscription === "object"
+        ? currentUserData.subscription
+        : null;
+
+    const stripeMetadata =
+      currentUserData?.stripeSubscription &&
+      typeof currentUserData.stripeSubscription === "object" &&
+      typeof currentUserData.stripeSubscription.metadata === "object"
+        ? currentUserData.stripeSubscription.metadata
+        : null;
+
+    const directCandidates = [
+      pickLevel(currentUserData?.premiumLevel),
+      pickLevel(currentUserData?.subscriptionLevel),
+      pickLevel(currentUserData?.subscriptionPlan),
+      pickLevel(currentUserData?.subscriptionPack),
+    ];
+
+    const nestedCandidates = nestedSubscription
+      ? ["level", "plan", "pack", "type"].map((key) =>
+          pickLevel(nestedSubscription?.[key]),
+        )
+      : [];
+
+    const metadataCandidates = stripeMetadata
+      ? [
+          "level",
+          "subscriptionLevel",
+          "subscription_level",
+          "pack",
+          "Pack",
+        ].map((key) => pickLevel(stripeMetadata?.[key]))
+      : [];
+
+    const resolvedLevel = [
+      ...directCandidates,
+      ...nestedCandidates,
+      ...metadataCandidates,
+    ].find(Boolean);
+
+    return resolvedLevel ? subBadges[resolvedLevel] || null : null;
+  }, [currentUserData]);
+
   const handleCoinPress = React.useCallback(() => {
     if (!showCoinBadge) return;
     setCoinModalVisible(true);
@@ -149,39 +207,56 @@ export default ({
         />
       ) : null}
       {showCoinBadge ? (
-        <Pressable
-          onPress={handleCoinPress}
-          accessibilityRole="button"
+        <View
           style={{
             position: "absolute",
             top: gutters,
             left: gutters,
-            paddingHorizontal: 14,
-            paddingVertical: 8,
-            borderRadius: 20,
-            backgroundColor: "rgba(12, 14, 18, 0.72)",
-            borderWidth: 1,
-            borderColor: "rgba(255, 255, 255, 0.1)",
             flexDirection: "row",
             alignItems: "center",
-            gap: 10,
+            gap: 6,
             zIndex: 20,
           }}
         >
-          <Image
-            source={icons.coin}
-            style={{ width: 22, height: 22, resizeMode: "contain" }}
-          />
-          <Text
+          <Pressable
+            onPress={handleCoinPress}
+            accessibilityRole="button"
             style={{
-              color: "#ffffff",
-              fontFamily: FONT_FAMILY.InterSemiBold,
-              fontSize: 14,
+              paddingHorizontal: 14,
+              paddingVertical: 8,
+              borderRadius: 20,
+              backgroundColor: "rgba(12, 14, 18, 0.72)",
+              borderWidth: 1,
+              borderColor: "rgba(255, 255, 255, 0.1)",
+              flexDirection: "row",
+              alignItems: "center",
+              gap: 8,
             }}
           >
-            {formattedCoins}
-          </Text>
-        </Pressable>
+            <CoinIcon size={22} />
+            <Text
+              style={{
+                color: "#ffffff",
+                fontFamily: FONT_FAMILY.InterSemiBold,
+                fontSize: 14,
+              }}
+            >
+              {formattedCoins}
+            </Text>
+          </Pressable>
+          {subscriptionBadgeSource ? (
+            <Pressable
+              onPress={() => navigate(Routes.ManageSubscription)}
+              accessibilityRole="button"
+              style={{ paddingVertical: 4 }}
+            >
+              <Image
+                source={subscriptionBadgeSource}
+                style={{ height: 40, width: 40, resizeMode: "contain" }}
+              />
+            </Pressable>
+          ) : null}
+        </View>
       ) : null}
       <PageContainer
         {...(containerType === "SAFE_AREA_VIEW" ? { edges: ["top"] } : {})}