enforce membership feature access in api and surface plans in admin

apps/mobile/src/api/index.ts

@@ -14,4 +14,5 @@ export * from "./nutrition";
 export * from "./hydration";
 export * from "./client";
 export * from "./helpers";
+export * from "./membership";
 export * from "./gyms";

apps/mobile/src/api/membership.ts

@@ -0,0 +1,87 @@
+import { apiClient, withAuth } from "./client";
+import { API_ENDPOINTS } from "../config/api";
+
+export type MembershipType = "basic" | "premium" | "vip";
+
+export interface MembershipFeatures {
+  recommendationsPerMonth: number;
+  hydrationTracking: boolean;
+  nutritionTracking: boolean;
+  advancedStatistics: boolean;
+}
+
+const MEMBERSHIP_FEATURES: Record<MembershipType, MembershipFeatures> = {
+  basic: {
+    recommendationsPerMonth: 1,
+    hydrationTracking: false,
+    nutritionTracking: false,
+    advancedStatistics: false,
+  },
+  premium: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+  vip: {
+    recommendationsPerMonth: -1,
+    hydrationTracking: true,
+    nutritionTracking: true,
+    advancedStatistics: true,
+  },
+};
+
+interface UsersListResponse {
+  success?: boolean;
+  data?: {
+    users?: Array<{
+      id: string;
+      role: string;
+      client?: {
+        membershipType?: MembershipType;
+      } | null;
+    }>;
+  };
+  users?: Array<{
+    id: string;
+    role: string;
+    client?: {
+      membershipType?: MembershipType;
+    } | null;
+  }>;
+}
+
+function isMembershipType(value: unknown): value is MembershipType {
+  return value === "basic" || value === "premium" || value === "vip";
+}
+
+export async function getCurrentMembershipType(
+  userId: string,
+  token: string | null,
+): Promise<MembershipType> {
+  if (!token || !userId) {
+    return "basic";
+  }
+
+  const response = await apiClient.get<UsersListResponse>(
+    API_ENDPOINTS.USERS.LIST,
+    withAuth(token),
+  );
+
+  const payload = response.data;
+  const users = payload.data?.users ?? payload.users ?? [];
+  const currentUser = users.find((user) => user.id === userId);
+
+  if (!currentUser || currentUser.role !== "client") {
+    return "vip";
+  }
+
+  const membershipType = currentUser.client?.membershipType;
+  return isMembershipType(membershipType) ? membershipType : "basic";
+}
+
+export function getMembershipFeatures(
+  membershipType: MembershipType,
+): MembershipFeatures {
+  return MEMBERSHIP_FEATURES[membershipType];
+}

apps/mobile/src/app/(tabs)/index.tsx

@@ -7,6 +7,7 @@ import {
   Image,
   Animated,
   TouchableOpacity,
+  Alert,
 } from "react-native";
 import { useUser } from "@clerk/clerk-expo";
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
@@ -24,6 +25,7 @@ import { TrackMealModal } from "../../components/TrackMealModal";
 import { AddWaterModal } from "../../components/AddWaterModal";
 import { ScanFoodModal } from "../../components/ScanFoodModal";
 import { ActivityRing } from "../../components/ActivityRing";
+import { useMembership } from "../../hooks/useMembership";
 import {
   checkInsToActivities,
   completedGoalsToActivities,
@@ -44,6 +46,7 @@ const WORKOUT_GOAL = 3;
 export default function HomeScreen() {
   const { user } = useUser();
   const { colors, typography } = useTheme();
+  const { features, membershipType } = useMembership();
   const { refetchStatistics, forceRefresh, statistics, loading } =
     useStatistics();
   const { goals, refetchGoals } = useFitnessGoals();
@@ -386,7 +389,16 @@ export default function HomeScreen() {
             </TouchableOpacity>
 
             <TouchableOpacity
-              onPress={() => setTrackMealModalVisible(true)}
+              onPress={() => {
+                if (!features.nutritionTracking) {
+                  Alert.alert(
+                    "Premium Feature",
+                    "Meal tracking is available on Premium and VIP plans.",
+                  );
+                  return;
+                }
+                setTrackMealModalVisible(true);
+              }}
               activeOpacity={0.85}
               style={[
                 styles.quickActionCard,
@@ -417,7 +429,16 @@ export default function HomeScreen() {
             </TouchableOpacity>
 
             <TouchableOpacity
-              onPress={() => setAddWaterModalVisible(true)}
+              onPress={() => {
+                if (!features.hydrationTracking) {
+                  Alert.alert(
+                    "Premium Feature",
+                    "Hydration tracking is available on Premium and VIP plans.",
+                  );
+                  return;
+                }
+                setAddWaterModalVisible(true);
+              }}
               activeOpacity={0.85}
               style={[styles.quickActionCard, { backgroundColor: colors.info }]}
             >
@@ -479,6 +500,23 @@ export default function HomeScreen() {
 
         {/* Today's Progress */}
         <View style={styles.section}>
+          {!features.nutritionTracking || !features.hydrationTracking ? (
+            <MinimalCard
+              variant="bordered"
+              style={[styles.progressCard, { marginBottom: 12 }]}
+            >
+              <Text
+                style={[
+                  typography.body,
+                  { color: colors.textSecondary, textAlign: "center" },
+                ]}
+              >
+                {membershipType === "basic"
+                  ? "Upgrade to Premium or VIP to unlock nutrition and hydration tracking."
+                  : "Some advanced tracking features are unavailable on your plan."}
+              </Text>
+            </MinimalCard>
+          ) : null}
           <SectionHeader
             title="Today's Progress"
             subtitle="Track your daily goals"

apps/mobile/src/app/(tabs)/profile.tsx

@@ -20,6 +20,7 @@ import { Badge } from "../../components/Badge";
 import { IconContainer } from "../../components/IconContainer";
 import { fitnessProfileApi, FitnessProfile } from "../../api/fitnessProfile";
 import { gymsApi, type Gym } from "../../api/gyms";
+import { useMembership } from "../../hooks/useMembership";
 import log from "../../utils/logger";
 
 export default function ProfileScreen() {
@@ -28,6 +29,7 @@ export default function ProfileScreen() {
   const router = useRouter();
   const { colors, typography, theme: activeTheme, setTheme } = useTheme();
   const { getToken } = useAuth();
+  const { membershipType } = useMembership();
 
   const [gyms, setGyms] = useState<Gym[]>([]);
   const [gymsLoading, setGymsLoading] = useState(false);
@@ -203,8 +205,8 @@ export default function ProfileScreen() {
           {user?.primaryEmailAddress?.emailAddress}
         </Text>
         <Badge
-          label="Premium Member"
-          variant="success"
+          label={`${membershipType.toUpperCase()} Member`}
+          variant={membershipType === "basic" ? "neutral" : "success"}
           style={{ marginTop: 12 }}
         />
       </MinimalCard>

apps/mobile/src/app/(tabs)/recommendations.tsx

@@ -21,6 +21,7 @@ import { IconContainer } from "../../components/IconContainer";
 import { useRecommendations } from "../../contexts/RecommendationsContext";
 import { useNotifications } from "../../contexts/NotificationsContext";
 import { NotificationsModal } from "../../components/NotificationsModal";
+import { useMembership } from "../../hooks/useMembership";
 import type { Recommendation } from "../../api/recommendations";
 import log from "../../utils/logger";
 
@@ -33,6 +34,7 @@ export default function RecommendationsScreen() {
     refetchRecommendations,
     generateNewRecommendation,
   } = useRecommendations();
+  const { membershipType, features } = useMembership();
   const { unreadCount, refetchNotifications } = useNotifications();
   const [generating, setGenerating] = useState(false);
   const [refreshing, setRefreshing] = useState(false);
@@ -69,6 +71,17 @@ export default function RecommendationsScreen() {
   const handleGenerateRecommendation = async () => {
     if (!user?.id) return;
 
+    if (
+      features.recommendationsPerMonth === 1 &&
+      allRecommendations.length >= 1
+    ) {
+      Alert.alert(
+        "Basic Plan Limit",
+        "Basic plan includes 1 recommendation per month. Upgrade to Premium or VIP for unlimited recommendations.",
+      );
+      return;
+    }
+
     Alert.alert(
       "Generate AI Recommendation",
       "Generate a personalized fitness and nutrition plan based on your profile and goals?",
@@ -180,7 +193,11 @@ export default function RecommendationsScreen() {
         {/* Generate Button */}
         <View style={styles.section}>
           <MinimalButton
-            title="Generate New Plan"
+            title={
+              features.recommendationsPerMonth === 1
+                ? "Generate Monthly Plan"
+                : "Generate New Plan"
+            }
             onPress={handleGenerateRecommendation}
             variant="primary"
             size="lg"
@@ -189,6 +206,20 @@ export default function RecommendationsScreen() {
             disabled={generating}
             textStyle={{ fontSize: 16 }}
           />
+          <Text
+            style={[
+              typography.caption,
+              {
+                color: colors.textTertiary,
+                marginTop: 8,
+                textAlign: "center",
+              },
+            ]}
+          >
+            {membershipType === "basic"
+              ? `Basic plan: ${Math.max(0, 1 - allRecommendations.length)} recommendation left this month`
+              : `${membershipType.toUpperCase()} plan: unlimited recommendations`}
+          </Text>
         </View>
 
         {/* Recommendations List */}

apps/mobile/src/hooks/useMembership.ts

@@ -0,0 +1,68 @@
+import { useAuth, useUser } from "@clerk/clerk-expo";
+import { useEffect, useState } from "react";
+import {
+  getCurrentMembershipType,
+  getMembershipFeatures,
+  type MembershipFeatures,
+  type MembershipType,
+} from "../api/membership";
+import log from "../utils/logger";
+
+const BASIC_FEATURES = getMembershipFeatures("basic");
+
+interface UseMembershipResult {
+  membershipType: MembershipType;
+  features: MembershipFeatures;
+  loading: boolean;
+}
+
+export function useMembership(): UseMembershipResult {
+  const { user } = useUser();
+  const { getToken, isSignedIn } = useAuth();
+  const [membershipType, setMembershipType] = useState<MembershipType>("basic");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    const loadMembership = async () => {
+      if (!isSignedIn || !user?.id) {
+        if (isMounted) {
+          setMembershipType("basic");
+          setLoading(false);
+        }
+        return;
+      }
+
+      try {
+        setLoading(true);
+        const token = await getToken();
+        const type = await getCurrentMembershipType(user.id, token);
+        if (isMounted) {
+          setMembershipType(type);
+        }
+      } catch (error) {
+        log.error("Failed to load membership", error, { userId: user.id });
+        if (isMounted) {
+          setMembershipType("basic");
+        }
+      } finally {
+        if (isMounted) {
+          setLoading(false);
+        }
+      }
+    };
+
+    loadMembership();
+
+    return () => {
+      isMounted = false;
+    };
+  }, [isSignedIn, user?.id, getToken]);
+
+  return {
+    membershipType,
+    features: getMembershipFeatures(membershipType) || BASIC_FEATURES,
+    loading,
+  };
+}