feat(purchases): paywall non-core features with RevenueCat

apps/expo/app/(app)/ai-chat.tsx

@@ -34,6 +34,7 @@ import { useTemperatureUnit } from 'expo-app/features/auth/hooks/useTemperatureU
 import { useWeightUnit } from 'expo-app/features/auth/hooks/useWeightUnit';
 import { getPackItems, packItemsStore } from 'expo-app/features/packs/store/packItems';
 import { packsStore } from 'expo-app/features/packs/store/packs';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { useActiveLocation } from 'expo-app/features/weather/hooks';
 import type { WeatherLocation } from 'expo-app/features/weather/types';
 import { authClient, getStoredSessionToken } from 'expo-app/lib/auth-client';
@@ -78,7 +79,7 @@ const ROOT_STYLE: ViewStyle = {
   minHeight: 2,
 };
 
-export default function AIChat() {
+function AIChat() {
   const { colors, isDarkColorScheme } = useColorScheme();
   const insets = useSafeAreaInsets();
   const { progress } = useReanimatedKeyboardAnimation();
@@ -665,3 +666,11 @@ function Composer({
     </BlurView>
   );
 }
+
+export default function AIChatRoute() {
+  return (
+    <PaywallGate>
+      <AIChat />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/pack-templates/index.tsx

@@ -1,5 +1,10 @@
 import { PackTemplateListScreen } from 'expo-app/features/pack-templates/screens/PackTemplateListScreen';
+import { PaywallGate } from 'expo-app/features/purchases';
 
-export default function () {
-  return <PackTemplateListScreen />;
+export default function PackTemplatesRoute() {
+  return (
+    <PaywallGate>
+      <PackTemplateListScreen />
+    </PaywallGate>
+  );
 }

apps/expo/app/(app)/season-suggestions-results.tsx

@@ -9,6 +9,7 @@ import {
   SeasonSuggestionsError,
   useSeasonSuggestions,
 } from 'expo-app/features/packs/hooks/useSeasonSuggestions';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { LinearGradient } from 'expo-linear-gradient';
@@ -330,7 +331,7 @@ function ErrorCard({ error, onRetry, onGoBack, onGoToInventory, onSignIn }: Erro
   );
 }
 
-export default function SeasonSuggestionsResultsScreen() {
+function SeasonSuggestionsResultsScreen() {
   const router = useRouter();
   const { t } = useTranslation();
   const { location, date } = useLocalSearchParams<{ location: string; date: string }>();
@@ -520,3 +521,11 @@ export default function SeasonSuggestionsResultsScreen() {
     </>
   );
 }
+
+export default function SeasonSuggestionsResultsRoute() {
+  return (
+    <PaywallGate>
+      <SeasonSuggestionsResultsScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/season-suggestions.tsx

@@ -6,14 +6,15 @@ import * as Sentry from '@sentry/react-native';
 import { Icon } from 'expo-app/components/Icon';
 import { LocationSearchSheet } from 'expo-app/features/packs/components/LocationSearchSheet';
 import { LocationSourceSheet } from 'expo-app/features/packs/components/LocationSourceSheet';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { useBottomSheetAction } from 'expo-app/lib/hooks/useBottomSheetAction';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import * as Location from 'expo-location';
 import { Stack, useRouter } from 'expo-router';
 import { useRef, useState } from 'react';
 import { ActivityIndicator, Alert, Linking, Platform, ScrollView, View } from 'react-native';
 
-export default function SeasonSuggestionsScreen() {
+function SeasonSuggestionsScreen() {
   const router = useRouter();
   const { t } = useTranslation();
   const [isGettingLocation, setIsGettingLocation] = useState(false);
@@ -161,3 +162,11 @@ export default function SeasonSuggestionsScreen() {
     </>
   );
 }
+
+export default function SeasonSuggestionsRoute() {
+  return (
+    <PaywallGate>
+      <SeasonSuggestionsScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/shared-packs.tsx

@@ -1,5 +1,6 @@
 import { Avatar, AvatarFallback, AvatarImage, Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { Stack } from 'expo-router';
@@ -173,7 +174,7 @@ function SharedPackCard({ pack }: { pack: (typeof SHARED_PACKS)[0] }) {
   );
 }
 
-export default function SharedPacksScreen() {
+function SharedPacksScreen() {
   const { t } = useTranslation();
   return (
     <SafeAreaView className="flex-1" edges={['bottom']}>
@@ -210,3 +211,11 @@ export default function SharedPacksScreen() {
     </SafeAreaView>
   );
 }
+
+export default function SharedPacksRoute() {
+  return (
+    <PaywallGate>
+      <SharedPacksScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/shopping-list.tsx

@@ -3,6 +3,7 @@
 import { Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
 import { Icon } from 'expo-app/components/Icon';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { cn } from 'expo-app/lib/cn';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
@@ -159,7 +160,7 @@ function ShoppingItemCard({ item }: { item: (typeof SHOPPING_LIST)[0] }) {
   );
 }
 
-export default function ShoppingListScreen() {
+function ShoppingListScreen() {
   const { t } = useTranslation();
   const [filter, setFilter] = useState<'all' | 'pending' | 'purchased'>('pending');
 
@@ -257,3 +258,11 @@ export default function ShoppingListScreen() {
     </SafeAreaView>
   );
 }
+
+export default function ShoppingListRoute() {
+  return (
+    <PaywallGate>
+      <ShoppingListScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/trail-conditions.tsx

@@ -1,6 +1,7 @@
 import { ActivityIndicator, Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
 import { featureFlags } from 'expo-app/config';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { SubmitConditionReportForm } from 'expo-app/features/trail-conditions/components/SubmitConditionReportForm';
 import { TrailConditionReportCard } from 'expo-app/features/trail-conditions/components/TrailConditionReportCard';
 import { useTrailConditionReports } from 'expo-app/features/trail-conditions/hooks/useTrailConditionReports';
@@ -37,7 +38,7 @@ function getSurfaceBadgeColor(surface: TrailSurface): string {
   }
 }
 
-export default function TrailConditionsScreen() {
+function TrailConditionsScreen() {
   const [showSubmitForm, setShowSubmitForm] = useState(false);
   const [selectedSurface, setSelectedSurface] = useState<SurfaceFilter>('all');
   const { data: reports, isLoading, error } = useTrailConditionReports();
@@ -219,3 +220,11 @@ export default function TrailConditionsScreen() {
     </SafeAreaView>
   );
 }
+
+export default function TrailConditionsRoute() {
+  return (
+    <PaywallGate>
+      <TrailConditionsScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/weather-alerts.tsx

@@ -1,6 +1,7 @@
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { useWeatherAlerts } from 'expo-app/features/weather/hooks/useWeatherAlert';
 import { cn } from 'expo-app/lib/cn';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
@@ -128,7 +129,7 @@ function WeatherAlertCard({ alert }: { alert: WeatherAlert }) {
   );
 }
 
-export default function WeatherAlertsScreen() {
+function WeatherAlertsScreen() {
   const { t } = useTranslation();
   const router = useRouter();
   const { alerts, loading, error, activeLocation } = useWeatherAlerts();
@@ -185,3 +186,11 @@ export default function WeatherAlertsScreen() {
     </SafeAreaView>
   );
 }
+
+export default function WeatherAlertsRoute() {
+  return (
+    <PaywallGate>
+      <WeatherAlertsScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/weight-analysis/[id].tsx

@@ -4,6 +4,7 @@ import { Text } from '@packrat/ui/nativewindui';
 import { getAppBarOptions } from '@packrat/ui/src/app-bar';
 import { useWeightUnit } from 'expo-app/features/auth/hooks/useWeightUnit';
 import { usePackWeightAnalysis } from 'expo-app/features/packs/hooks/usePackWeightAnalysis';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { cn } from 'expo-app/lib/cn';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { Stack, useLocalSearchParams } from 'expo-router';
@@ -38,7 +39,7 @@ function WeightCard({
   );
 }
 
-export default function WeightAnalysisScreen() {
+function WeightAnalysisScreen() {
   const params = useLocalSearchParams();
   const packId = params.id;
   const { t } = useTranslation();
@@ -138,3 +139,11 @@ export default function WeightAnalysisScreen() {
     </SafeAreaView>
   );
 }
+
+export default function WeightAnalysisRoute() {
+  return (
+    <PaywallGate>
+      <WeightAnalysisScreen />
+    </PaywallGate>
+  );
+}

apps/expo/app/(app)/wildlife/index.tsx

@@ -1,10 +1,15 @@
 import { featureFlags } from 'expo-app/config';
+import { PaywallGate } from 'expo-app/features/purchases';
 import { WildlifeScreen } from 'expo-app/features/wildlife/screens/WildlifeScreen';
 import { Redirect } from 'expo-router';
 
 export default function WildlifeRoute() {
   if (!featureFlags.enableWildlifeIdentification) {
     return <Redirect href="/" />;
   }
-  return <WildlifeScreen />;
+  return (
+    <PaywallGate>
+      <WildlifeScreen />
+    </PaywallGate>
+  );
 }

apps/expo/features/purchases/components/PaywallGate.tsx

@@ -0,0 +1,26 @@
+import { ActivityIndicator } from '@packrat/ui/nativewindui';
+import { View } from 'react-native';
+import { useEntitlement } from '../hooks/useEntitlement';
+import { UpgradePrompt } from './UpgradePrompt';
+
+interface PaywallGateProps {
+  children: React.ReactNode;
+}
+
+export function PaywallGate({ children }: PaywallGateProps) {
+  const { isPro, isLoading } = useEntitlement();
+
+  if (isLoading) {
+    return (
+      <View className="flex-1 items-center justify-center bg-background">
+        <ActivityIndicator />
+      </View>
+    );
+  }
+
+  if (!isPro) {
+    return <UpgradePrompt />;
+  }
+
+  return <>{children}</>;
+}

apps/expo/features/purchases/components/UpgradePrompt.tsx

@@ -0,0 +1,110 @@
+import { ActivityIndicator, Button, Text } from '@packrat/ui/nativewindui';
+import * as Sentry from '@sentry/react-native';
+import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
+import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
+import { useState } from 'react';
+import { ScrollView, View } from 'react-native';
+import RevenueCatUI, { PAYWALL_RESULT } from 'react-native-purchases-ui';
+import { useEntitlement } from '../hooks/useEntitlement';
+import { ENTITLEMENT_PRO, PRO_FEATURES } from '../lib/config';
+
+export function UpgradePrompt() {
+  const { t } = useTranslation();
+  const { colors } = useColorScheme();
+  const { invalidate } = useEntitlement();
+  const [isPresentingPaywall, setIsPresentingPaywall] = useState(false);
+
+  async function handleViewPlans() {
+    setIsPresentingPaywall(true);
+    try {
+      const result = await RevenueCatUI.presentPaywallIfNeeded({
+        requiredEntitlementIdentifier: ENTITLEMENT_PRO,
+      });
+
+      if (result === PAYWALL_RESULT.PURCHASED || result === PAYWALL_RESULT.RESTORED) {
+        invalidate();
+      }
+    } catch (error) {
+      Sentry.captureException(error, {
+        tags: { feature: 'purchases', action: 'presentPaywall' },
+      });
+    } finally {
+      setIsPresentingPaywall(false);
+    }
+  }
+
+  async function handleRestore() {
+    setIsPresentingPaywall(true);
+    try {
+      await RevenueCatUI.presentPaywallIfNeeded({
+        requiredEntitlementIdentifier: ENTITLEMENT_PRO,
+      });
+      invalidate();
+    } catch (error) {
+      Sentry.captureException(error, {
+        tags: { feature: 'purchases', action: 'restore' },
+      });
+    } finally {
+      setIsPresentingPaywall(false);
+    }
+  }
+
+  return (
+    <ScrollView
+      contentContainerClassName="flex-grow items-center justify-center p-6"
+      className="flex-1 bg-background"
+    >
+      <View className="w-full max-w-sm">
+        <View className="mb-6 items-center">
+          <View
+            className="mb-4 h-20 w-20 items-center justify-center rounded-full"
+            style={{ backgroundColor: colors.primary + '20' }}
+          >
+            <Text style={{ fontSize: 40 }}>🎒</Text>
+          </View>
+
+          <Text variant="largeTitle" className="text-center font-bold">
+            {t('purchases.upgradeTitle')}
+          </Text>
+
+          <Text variant="body" className="mt-2 text-center text-muted-foreground">
+            {t('purchases.upgradeSubtitle')}
+          </Text>
+        </View>
+
+        <View className="mb-8 gap-3 rounded-2xl bg-card p-5">
+          {PRO_FEATURES.map((feature) => (
+            <View key={feature.id} className="flex-row items-center gap-3">
+              <View
+                className="h-5 w-5 items-center justify-center rounded-full"
+                style={{ backgroundColor: colors.primary }}
+              >
+                <Text className="text-xs font-bold text-white">✓</Text>
+              </View>
+              <Text variant="body">{feature.label}</Text>
+            </View>
+          ))}
+        </View>
+
+        <Button
+          onPress={handleViewPlans}
+          disabled={isPresentingPaywall}
+          className="mb-3 w-full"
+          size="lg"
+        >
+          {isPresentingPaywall ? (
+            <ActivityIndicator size="small" color="white" />
+          ) : (
+            <Text className="font-semibold text-primary-foreground">
+              {t('purchases.viewPlans')}
+            </Text>
+          )}
+        </Button>
+
+        <Button variant="plain" onPress={handleRestore} disabled={isPresentingPaywall}>
+          <Text className="text-sm text-muted-foreground">{t('purchases.restorePurchases')}</Text>
+        </Button>
+      </View>
+    </ScrollView>
+  );
+}