feat(app): Stitch question screens with shared layout, pre-auth answer buffering

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/onboarding/source.tsx

@@ -1,114 +1,50 @@
-import React, { useMemo, useState } from 'react';
-import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import React, { useState } from 'react';
 import { useRouter } from 'expo-router';
-import { Ionicons } from '@expo/vector-icons';
 import { useSafeAnalytics } from '../../services/analytics';
-import { ThemeBackdrop } from '../../components/ThemeBackdrop';
 import { useColors } from '../../constants/Colors';
 import { useApp } from '../../context/AppContext';
 import { OnboardingProgressService } from '../../services/onboardingProgressService';
-
-const ONBOARDING_BACKGROUND = {
-  light: '#fbfaf3',
-  dark: '#0a110b',
-};
+import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
+import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
 
 const SOURCE_OPTIONS = [
-  { id: 'app_store', icon: 'storefront-outline' as const, signal: 'organic_store' },
-  { id: 'instagram', icon: 'logo-instagram' as const, signal: 'social_visual' },
-  { id: 'tiktok', icon: 'musical-notes-outline' as const, signal: 'social_video' },
-  { id: 'friend', icon: 'people-outline' as const, signal: 'referral' },
-  { id: 'search', icon: 'search-outline' as const, signal: 'high_intent_search' },
-  { id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const, signal: 'unclassified' },
+  { id: 'app_store', emoji: '🏬', signal: 'organic_store' },
+  { id: 'instagram', emoji: '📸', signal: 'social_visual' },
+  { id: 'tiktok', emoji: '🎵', signal: 'social_video' },
+  { id: 'friend', emoji: '👥', signal: 'referral' },
+  { id: 'search', emoji: '🔎', signal: 'high_intent_search' },
+  { id: 'other', emoji: '✨', signal: 'unclassified' },
 ];
 
-const getSourceOnboardingCopy = (language: 'de' | 'en' | 'es') => {
-  if (language === 'de') {
-    return {
-      step: 'Schritt 1 von 4',
-      heroTitle: 'Dein Start wird danach personalisiert.',
-      heroMeta: 'Scan, Sammlung und Health-Check passen sich deinem Ziel an.',
-      valueTitle: 'Warum wir fragen',
-      valueBody: 'Die Antwort hilft, deinen Einstieg auf das auszurichten, was dich wirklich hierher gebracht hat.',
-      subtitles: {
-        app_store: 'Du hast aktiv nach Pflanzen- oder Pflegehilfe gesucht.',
-        instagram: 'Du kamst ueber visuelle Pflanzen-Inhalte.',
-        tiktok: 'Du kamst ueber kurze Videos oder Creator.',
-        friend: 'Persoenliche Empfehlung, hoher Vertrauens-Intent.',
-        search: 'Konkretes Problem oder schneller Pflanzen-Check.',
-        other: 'Passt nicht sauber in die anderen Quellen.',
-      },
-    };
-  }
-
-  if (language === 'es') {
-    return {
-      step: 'Paso 1 de 4',
-      heroTitle: 'Tu inicio se adapta despues.',
-      heroMeta: 'Escaneo, coleccion y health-check segun tu objetivo.',
-      valueTitle: 'Por que preguntamos',
-      valueBody: 'La respuesta ayuda a adaptar el inicio a lo que realmente te trajo aqui.',
-      subtitles: {
-        app_store: 'Buscaste ayuda para plantas o cuidado.',
-        instagram: 'Llegaste desde contenido visual de plantas.',
-        tiktok: 'Llegaste desde videos cortos o creadores.',
-        friend: 'Recomendacion personal con alta confianza.',
-        search: 'Problema concreto o chequeo rapido.',
-        other: 'No encaja en las demas fuentes.',
-      },
-    };
-  }
-
-  return {
-    step: 'Step 1 of 4',
-    heroTitle: 'Your first run adapts next.',
-    heroMeta: 'Scanner, collection, and health check based on your goal.',
-    valueTitle: 'Why we ask',
-    valueBody: 'This helps tailor the first steps to what actually brought you here.',
-    subtitles: {
-      app_store: 'You actively searched for plant or care help.',
-      instagram: 'You came from visual plant content.',
-      tiktok: 'You came from short videos or creators.',
-      friend: 'Personal referral with high trust intent.',
-      search: 'Concrete problem or quick plant check intent.',
-      other: 'Does not fit the other sources cleanly.',
-    },
-  };
-};
-
 export default function OnboardingSourceScreen() {
   const router = useRouter();
   const posthog = useSafeAnalytics();
-  const { session, isDarkMode, colorPalette, language, t } = useApp();
+  const { session, isDarkMode, colorPalette, t } = useApp();
   const colors = useColors(isDarkMode, colorPalette);
-  const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
   const [selectedSource, setSelectedSource] = useState<string | null>(null);
-  const copy = getSourceOnboardingCopy(language);
 
-  const sourceLabels = useMemo(
-    () => ({
-      app_store: t.sourceOptionAppStore,
-      instagram: t.sourceOptionInstagram,
-      tiktok: t.sourceOptionTikTok,
-      friend: t.sourceOptionFriend,
-      search: t.sourceOptionSearch,
-      other: t.sourceOptionOther,
-    }),
-    [
-      t.sourceOptionAppStore,
-      t.sourceOptionFriend,
-      t.sourceOptionInstagram,
-      t.sourceOptionOther,
-      t.sourceOptionSearch,
-      t.sourceOptionTikTok,
-    ],
-  );
+  const sourceLabels: Record<string, string> = {
+    app_store: t.sourceOptionAppStore,
+    instagram: t.sourceOptionInstagram,
+    tiktok: t.sourceOptionTikTok,
+    friend: t.sourceOptionFriend,
+    search: t.sourceOptionSearch,
+    other: t.sourceOptionOther,
+  };
+
+  const options: QuestionOption[] = SOURCE_OPTIONS.map((option) => ({
+    id: option.id,
+    emoji: option.emoji,
+    label: sourceLabels[option.id],
+  }));
 
   const finish = (source: string | null) => {
     if (session?.userId && source) {
       OnboardingProgressService.setAcquisitionSource(session.userId, source);
     }
+    if (source) {
+      void PreAuthOnboardingService.setAnswer('acquisitionSource', source);
+    }
 
     posthog.capture('onboarding_source_completed', {
       source: source ?? 'skipped',
@@ -118,241 +54,21 @@ export default function OnboardingSourceScreen() {
   };
 
   return (
-    <View style={[styles.container, { backgroundColor: screenBackground }]}>
-      {isDarkMode ? <ThemeBackdrop colors={colors} /> : null}
-      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
-        <View style={styles.header}>
-          <View style={[styles.stepPill, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
-            <Text style={[styles.stepLabel, { color: colors.primaryDark }]}>{copy.step}</Text>
-          </View>
-          <ImageBackground
-            source={require('../../assets/onboarding_source_mockup.png')}
-            style={[styles.heroPreview, { borderColor: colors.border }]}
-            imageStyle={styles.heroImage}
-            resizeMode="cover"
-          >
-            <View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.46)' : 'rgba(251, 250, 243, 0.32)' }]} />
-            <View style={styles.heroContent}>
-              <View style={[styles.heroIcon, { backgroundColor: colors.primary }]}>
-                <Ionicons name="scan-outline" size={20} color={colors.onPrimary} />
-              </View>
-              <View style={styles.heroCopy}>
-                <Text style={[styles.heroTitle, { color: isDarkMode ? colors.textOnImage : colors.text }]}>
-                  {copy.heroTitle}
-                </Text>
-                <Text style={[styles.heroMeta, { color: isDarkMode ? '#d7ded9' : colors.textSecondary }]}>
-                  {copy.heroMeta}
-                </Text>
-              </View>
-            </View>
-          </ImageBackground>
-          <Text style={[styles.title, { color: colors.text }]}>{t.sourceOnboardingTitle}</Text>
-          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.sourceOnboardingSubtitle}</Text>
-        </View>
-
-        <View style={styles.options}>
-          {SOURCE_OPTIONS.map((option) => {
-            const isActive = selectedSource === option.id;
-            return (
-              <TouchableOpacity
-                key={option.id}
-                style={[
-                  styles.optionCard,
-                  {
-                    backgroundColor: isActive ? colors.primarySoft : colors.surface,
-                    borderColor: isActive ? colors.primary : colors.border,
-                  },
-                ]}
-                onPress={() => setSelectedSource(option.id)}
-                activeOpacity={0.85}
-              >
-                <View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
-                  <Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
-                </View>
-                <View style={styles.optionCopy}>
-                  <Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
-                  <Text style={[styles.optionSubtitle, { color: colors.textMuted }]}>
-                    {copy.subtitles[option.id as keyof typeof copy.subtitles]}
-                  </Text>
-                </View>
-                {isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} style={styles.optionCheck} />}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-
-        <View style={styles.footer}>
-          <TouchableOpacity
-            style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
-            onPress={() => finish(null)}
-          >
-            <Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.sourceOnboardingSkip}</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={[
-              styles.primaryBtn,
-              { backgroundColor: selectedSource ? colors.primary : colors.surfaceMuted },
-            ]}
-            onPress={() => finish(selectedSource)}
-            disabled={!selectedSource}
-          >
-            <Text
-              style={[
-                styles.primaryBtnText,
-                { color: selectedSource ? colors.onPrimary : colors.textMuted },
-              ]}
-            >
-              {t.sourceOnboardingContinue}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      </SafeAreaView>
-    </View>
+    <OnboardingQuestion
+      colors={colors}
+      isDarkMode={isDarkMode}
+      step={1}
+      totalSteps={4}
+      title={t.sourceOnboardingTitle}
+      subtitle={t.sourceOnboardingSubtitle}
+      options={options}
+      selectedId={selectedSource}
+      onSelect={setSelectedSource}
+      onContinue={() => finish(selectedSource)}
+      onBack={() => router.back()}
+      continueLabel={t.sourceOnboardingContinue}
+      skipLabel={t.sourceOnboardingSkip}
+      onSkip={() => finish(null)}
+    />
   );
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  safeArea: {
-    flex: 1,
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 14,
-    justifyContent: 'space-between',
-  },
-  header: {
-    alignItems: 'center',
-    gap: 9,
-  },
-  stepPill: {
-    borderWidth: 1,
-    borderRadius: 999,
-    paddingHorizontal: 12,
-    paddingVertical: 7,
-  },
-  stepLabel: {
-    fontSize: 12,
-    fontWeight: '800',
-    textTransform: 'uppercase',
-    letterSpacing: 0.4,
-  },
-  heroPreview: {
-    width: '100%',
-    height: 175,
-    borderRadius: 24,
-    borderWidth: 1,
-    justifyContent: 'flex-end',
-    overflow: 'hidden',
-  },
-  heroImage: {
-    borderRadius: 24,
-  },
-  heroOverlay: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  heroContent: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    gap: 12,
-    padding: 12,
-  },
-  heroIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  heroCopy: {
-    flex: 1,
-    gap: 3,
-  },
-  heroTitle: {
-    fontSize: 15,
-    lineHeight: 18,
-    fontWeight: '800',
-  },
-  heroMeta: {
-    fontSize: 10.5,
-    lineHeight: 14,
-    fontWeight: '600',
-  },
-  title: {
-    fontSize: 25,
-    fontWeight: '800',
-    textAlign: 'center',
-    lineHeight: 29,
-  },
-  subtitle: {
-    fontSize: 13,
-    textAlign: 'center',
-    lineHeight: 18,
-    maxWidth: 320,
-  },
-  options: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 8,
-  },
-  optionCard: {
-    width: '48.8%',
-    minHeight: 68,
-    borderRadius: 15,
-    borderWidth: 1.5,
-    padding: 9,
-    gap: 8,
-    position: 'relative',
-  },
-  optionIcon: {
-    width: 34,
-    height: 34,
-    borderRadius: 17,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  optionCopy: {
-    gap: 3,
-  },
-  optionLabel: {
-    fontSize: 13,
-    fontWeight: '700',
-  },
-  optionSubtitle: {
-    fontSize: 10,
-    lineHeight: 13,
-  },
-  optionCheck: {
-    position: 'absolute',
-    right: 9,
-    top: 9,
-  },
-  footer: {
-    flexDirection: 'row',
-    gap: 12,
-  },
-  secondaryBtn: {
-    flex: 1,
-    height: 50,
-    borderRadius: 16,
-    borderWidth: 1.5,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  secondaryBtnText: {
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  primaryBtn: {
-    flex: 1.2,
-    height: 50,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  primaryBtnText: {
-    fontSize: 15,
-    fontWeight: '700',
-  },
-});