Launch

app/_layout.tsx

@@ -1,204 +1,238 @@
-import { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
-import { Redirect, Stack, usePathname } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import AsyncStorage from '@react-native-async-storage/async-storage';
-import Purchases, { LOG_LEVEL } from 'react-native-purchases';
-import { Platform } from 'react-native';
-import Constants from 'expo-constants';
-import { AppProvider, useApp } from '../context/AppContext';
-import { CoachMarksProvider } from '../context/CoachMarksContext';
-import { CoachMarksOverlay } from '../components/CoachMarksOverlay';
-import { useColors } from '../constants/Colors';
-import { initDatabase, AppMetaDb } from '../services/database';
-import * as SecureStore from 'expo-secure-store';
-import * as SplashScreen from 'expo-splash-screen';
-import { AuthService } from '../services/authService';
-import { PostHogProvider, usePostHog } from 'posthog-react-native';
-
-// Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync().catch(() => { });
-
-const POSTHOG_API_KEY = process.env.EXPO_PUBLIC_POSTHOG_API_KEY || 'phc_FX6HRgx9NSpS5moxjMF6xyc37yMwjoeu6TbWUqNNKlk';
-const SECURE_INSTALL_MARKER = 'greenlens_install_v1';
-
-const ensureInstallConsistency = async (): Promise<boolean> => {
-  try {
-    const sqliteMarker = AppMetaDb.get('install_marker_v2');
-    const secureMarker = await SecureStore.getItemAsync(SECURE_INSTALL_MARKER).catch(() => null);
-
-    if (sqliteMarker === '1' && secureMarker === '1') {
-      return false; // Alles gut, keine Neuinstallation
-    }
-
-    if (sqliteMarker === '1' || secureMarker === '1') {
-      // Teilweise vorhanden -> heilen, nicht löschen
-      AppMetaDb.set('install_marker_v2', '1');
-      await SecureStore.setItemAsync(SECURE_INSTALL_MARKER, '1');
-      return false;
-    }
-
-    // Fresh Install: Alles zurücksetzen
-    await AuthService.logout();
-    await AsyncStorage.removeItem('greenlens_show_tour');
-    AppMetaDb.set('install_marker_v2', '1');
-    await SecureStore.setItemAsync(SECURE_INSTALL_MARKER, '1');
-    return true;
-  } catch (error) {
-    console.error('Failed to initialize install marker', error);
-    return false;
-  }
-};
-
-
-import { AnimatedSplashScreen } from '../components/AnimatedSplashScreen';
-
+import { useEffect, useRef, useState } from 'react';
+import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
+import { Redirect, Stack, usePathname } from 'expo-router';
+import { StatusBar } from 'expo-status-bar';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import Purchases, { LOG_LEVEL } from 'react-native-purchases';
+import { Platform } from 'react-native';
+import Constants from 'expo-constants';
+import { AppProvider, useApp } from '../context/AppContext';
+import { CoachMarksProvider } from '../context/CoachMarksContext';
+import { CoachMarksOverlay } from '../components/CoachMarksOverlay';
+import { useColors } from '../constants/Colors';
+import { initDatabase, AppMetaDb } from '../services/database';
+import * as SecureStore from 'expo-secure-store';
+import * as SplashScreen from 'expo-splash-screen';
+import { AuthService } from '../services/authService';
+import { PostHogProvider, usePostHog } from 'posthog-react-native';
+
+// Prevent the splash screen from auto-hiding before asset loading is complete.
+SplashScreen.preventAutoHideAsync().catch(() => { });
+
+const POSTHOG_API_KEY = process.env.EXPO_PUBLIC_POSTHOG_API_KEY || 'phc_FX6HRgx9NSpS5moxjMF6xyc37yMwjoeu6TbWUqNNKlk';
+const SECURE_INSTALL_MARKER = 'greenlens_install_v1';
+
+const ensureInstallConsistency = async (): Promise<boolean> => {
+  try {
+    const sqliteMarker = AppMetaDb.get('install_marker_v2');
+    const secureMarker = await SecureStore.getItemAsync(SECURE_INSTALL_MARKER).catch(() => null);
+
+    if (sqliteMarker === '1' && secureMarker === '1') {
+      return false; // Alles gut, keine Neuinstallation
+    }
+
+    if (sqliteMarker === '1' || secureMarker === '1') {
+      // Teilweise vorhanden -> heilen, nicht löschen
+      AppMetaDb.set('install_marker_v2', '1');
+      await SecureStore.setItemAsync(SECURE_INSTALL_MARKER, '1');
+      return false;
+    }
+
+    // Fresh Install: Alles zurücksetzen
+    await AuthService.logout();
+    await AsyncStorage.removeItem('greenlens_show_tour');
+    AppMetaDb.set('install_marker_v2', '1');
+    await SecureStore.setItemAsync(SECURE_INSTALL_MARKER, '1');
+    return true;
+  } catch (error) {
+    console.error('Failed to initialize install marker', error);
+    return false;
+  }
+};
+
+
+import { AnimatedSplashScreen } from '../components/AnimatedSplashScreen';
+
 function RootLayoutInner() {
-  const { isDarkMode, colorPalette, signOut, session, isInitializing, isLoadingPlants } = useApp();
+  const { isDarkMode, colorPalette, signOut, session, isInitializing, isLoadingPlants, syncRevenueCatState } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
   const pathname = usePathname();
   const [installCheckDone, setInstallCheckDone] = useState(false);
   const [splashAnimationComplete, setSplashAnimationComplete] = useState(false);
+  const [revenueCatReady, setRevenueCatReady] = useState(Constants.appOwnership === 'expo');
   const posthog = usePostHog();
-
-  useEffect(() => {
-    // RevenueCat requires native store access — not available in Expo Go
-    const isExpoGo = Constants.appOwnership === 'expo';
-    if (isExpoGo) {
-      console.log('[RevenueCat] Skipping configure: running in Expo Go');
-      return;
-    }
-
-    Purchases.setLogLevel(LOG_LEVEL.VERBOSE);
-    const iosApiKey = process.env.EXPO_PUBLIC_REVENUECAT_IOS_API_KEY || 'appl_hrSpsuUuVstbHhYIDnOqYxPOnmR';
+
+  useEffect(() => {
+    // RevenueCat requires native store access — not available in Expo Go
+    const isExpoGo = Constants.appOwnership === 'expo';
+    if (isExpoGo) {
+      console.log('[RevenueCat] Skipping configure: running in Expo Go');
+      return;
+    }
+
+    Purchases.setLogLevel(LOG_LEVEL.VERBOSE);
+    const iosApiKey = process.env.EXPO_PUBLIC_REVENUECAT_IOS_API_KEY || 'appl_hrSpsuUuVstbHhYIDnOqYxPOnmR';
     const androidApiKey = process.env.EXPO_PUBLIC_REVENUECAT_ANDROID_API_KEY || 'goog_placeholder';
     if (Platform.OS === 'ios') {
       Purchases.configure({ apiKey: iosApiKey });
     } else if (Platform.OS === 'android') {
       Purchases.configure({ apiKey: androidApiKey });
     }
+    setRevenueCatReady(true);
   }, []);
 
   useEffect(() => {
-    if (session?.serverUserId) {
-      posthog.identify(session.serverUserId, {
-        email: session.email,
-        name: session.name,
-      });
-    } else if (session === null) {
-      posthog.reset();
+    const isExpoGo = Constants.appOwnership === 'expo';
+    if (isExpoGo || !revenueCatReady) {
+      return;
     }
-  }, [session, posthog]);
 
-  useEffect(() => {
+    let cancelled = false;
     (async () => {
-      const didResetSessionForFreshInstall = await ensureInstallConsistency();
-      if (didResetSessionForFreshInstall) {
-        await signOut();
+      try {
+        if (session?.serverUserId) {
+          await Purchases.logIn(session.serverUserId);
+          const customerInfo = await Purchases.getCustomerInfo();
+          if (!cancelled) {
+            await syncRevenueCatState(customerInfo as any);
+          }
+        } else {
+          await Purchases.logOut();
+        }
+      } catch (error) {
+        console.error('Failed to align RevenueCat identity', error);
       }
-      setInstallCheckDone(true);
     })();
-  }, [signOut]);
 
-  const isAppReady = installCheckDone && !isInitializing && !isLoadingPlants;
-
-  let content = null;
-
-  if (isAppReady) {
-    if (!session) {
-      // Only redirect if we are not already on an auth-related page or the scanner
-      const isAuthPage = pathname.includes('onboarding') || pathname.includes('auth/') || pathname.includes('scanner');
-      if (!isAuthPage) {
-        content = <Redirect href="/onboarding" />;
-      } else {
-        content = (
-          <Stack
-            screenOptions={{
-              headerShown: false,
-              contentStyle: { backgroundColor: colors.background },
-            }}
-          >
-            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
-            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen
-              name="scanner"
-              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
-            />
-          </Stack>
-        );
-      }
-    } else {
-      content = (
-        <>
-          <Stack
-            screenOptions={{
-              headerShown: false,
-              contentStyle: { backgroundColor: colors.background },
-            }}
-          >
-            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
-            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
-            <Stack.Screen name="(tabs)" options={{ animation: 'none' }} />
-            <Stack.Screen
-              name="scanner"
-              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
-            />
-            <Stack.Screen
-              name="plant/[id]"
-              options={{ presentation: 'card', animation: 'slide_from_right' }}
-            />
-            <Stack.Screen
-              name="lexicon"
-              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
-            />
-            <Stack.Screen
-              name="profile/preferences"
-              options={{ presentation: 'card', animation: 'slide_from_right' }}
-            />
-            <Stack.Screen
-              name="profile/data"
-              options={{ presentation: 'card', animation: 'slide_from_right' }}
-            />
-            <Stack.Screen
-              name="profile/billing"
-              options={{ presentation: 'card', animation: 'slide_from_right' }}
-            />
-          </Stack>
-          <CoachMarksOverlay />
-        </>
-      );
-    }
-  }
-
-  return (
-    <>
-      <StatusBar style={isDarkMode ? 'light' : 'dark'} />
-      {content}
-      {!splashAnimationComplete && (
-        <AnimatedSplashScreen
-          isAppReady={isAppReady}
-          onAnimationComplete={() => setSplashAnimationComplete(true)}
-        />
-      )}
-    </>
-  );
-}
-
-export default function RootLayout() {
-  initDatabase();
-
-  return (
-    <PostHogProvider apiKey={POSTHOG_API_KEY} options={{
-      host: 'https://us.i.posthog.com',
-      enableSessionReplay: true,
-    }}>
-      <AppProvider>
-        <CoachMarksProvider>
-          <RootLayoutInner />
-        </CoachMarksProvider>
-      </AppProvider>
-    </PostHogProvider>
-  );
-}
+    return () => {
+      cancelled = true;
+    };
+  }, [revenueCatReady, session?.serverUserId, syncRevenueCatState]);
+
+  useEffect(() => {
+    if (session?.serverUserId) {
+      posthog.identify(session.serverUserId, {
+        email: session.email,
+        name: session.name,
+      });
+    } else if (session === null) {
+      posthog.reset();
+    }
+  }, [session, posthog]);
+
+  useEffect(() => {
+    (async () => {
+      const didResetSessionForFreshInstall = await ensureInstallConsistency();
+      if (didResetSessionForFreshInstall) {
+        await signOut();
+      }
+      setInstallCheckDone(true);
+    })();
+  }, [signOut]);
+
+  const isAppReady = installCheckDone && !isInitializing && !isLoadingPlants;
+
+  let content = null;
+
+  if (isAppReady) {
+    if (!session) {
+      // Only redirect if we are not already on an auth-related page or the scanner
+      const isAuthPage = pathname.includes('onboarding') || pathname.includes('auth/') || pathname.includes('scanner') || pathname.includes('profile/billing');
+      if (!isAuthPage) {
+        content = <Redirect href="/onboarding" />;
+      } else {
+        content = (
+          <Stack
+            screenOptions={{
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.background },
+            }}
+          >
+            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
+            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen
+              name="scanner"
+              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
+            />
+            <Stack.Screen
+              name="profile/billing"
+              options={{ presentation: 'card', animation: 'slide_from_right' }}
+            />
+          </Stack>
+        );
+      }
+    } else {
+      content = (
+        <>
+          <Stack
+            screenOptions={{
+              headerShown: false,
+              contentStyle: { backgroundColor: colors.background },
+            }}
+          >
+            <Stack.Screen name="onboarding" options={{ animation: 'none' }} />
+            <Stack.Screen name="auth/login" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="auth/signup" options={{ animation: 'slide_from_right' }} />
+            <Stack.Screen name="(tabs)" options={{ animation: 'none' }} />
+            <Stack.Screen
+              name="scanner"
+              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
+            />
+            <Stack.Screen
+              name="plant/[id]"
+              options={{ presentation: 'card', animation: 'slide_from_right' }}
+            />
+            <Stack.Screen
+              name="lexicon"
+              options={{ presentation: 'fullScreenModal', animation: 'slide_from_bottom' }}
+            />
+            <Stack.Screen
+              name="profile/preferences"
+              options={{ presentation: 'card', animation: 'slide_from_right' }}
+            />
+            <Stack.Screen
+              name="profile/data"
+              options={{ presentation: 'card', animation: 'slide_from_right' }}
+            />
+            <Stack.Screen
+              name="profile/billing"
+              options={{ presentation: 'card', animation: 'slide_from_right' }}
+            />
+          </Stack>
+          <CoachMarksOverlay />
+        </>
+      );
+    }
+  }
+
+  return (
+    <>
+      <StatusBar style={isDarkMode ? 'light' : 'dark'} />
+      {content}
+      {!splashAnimationComplete && (
+        <AnimatedSplashScreen
+          isAppReady={isAppReady}
+          onAnimationComplete={() => setSplashAnimationComplete(true)}
+        />
+      )}
+    </>
+  );
+}
+
+export default function RootLayout() {
+  initDatabase();
+
+  return (
+    <PostHogProvider apiKey={POSTHOG_API_KEY} options={{
+      host: 'https://us.i.posthog.com',
+      enableSessionReplay: true,
+    }}>
+      <AppProvider>
+        <CoachMarksProvider>
+          <RootLayoutInner />
+        </CoachMarksProvider>
+      </AppProvider>
+    </PostHogProvider>
+  );
+}