tknuth/Greenlens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Onboarding

Browse Source
This commit is contained in:
Timo Knuth
2026-05-08 13:00:30 +02:00
parent d37b49f1f6
commit 9386ae1be7
37 changed files with 5606 additions and 2275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
app/onboarding/experience.tsx
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
@@ -9,18 +9,61 @@ import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';
const ONBOARDING_BACKGROUND = {
light: '#fbfaf3',
dark: '#0a110b',
};
const EXPERIENCE_OPTIONS = [
{ id: 'beginner', icon: 'leaf-outline' as const },
{ id: 'intermediate', icon: 'sunny-outline' as const },
{ id: 'advanced', icon: 'flask-outline' as const },
];
const getExperienceScreenCopy = (language: 'de' | 'en' | 'es') => {
if (language === 'de') {
return {
step: 'Schritt 3 von 4',
heroBadge: 'Pflege-Tiefe',
subtitles: {
beginner: 'Klare Sprache, sichere Defaults, weniger Fachbegriffe.',
intermediate: 'Praktische Schritte mit genug Kontext.',
advanced: 'Mehr botanische Details und engere Diagnose.',
},
};
}
if (language === 'es') {
return {
step: 'Paso 3 de 4',
heroBadge: 'Nivel de cuidado',
subtitles: {
beginner: 'Lenguaje claro y recomendaciones seguras.',
intermediate: 'Pasos practicos con suficiente contexto.',
advanced: 'Mas detalle botanico y diagnostico preciso.',
},
};
}
return {
step: 'Step 3 of 4',
heroBadge: 'Care depth',
subtitles: {
beginner: 'Clear language, fewer assumptions, safer defaults.',
intermediate: 'Practical care steps with enough detail.',
advanced: 'More botanical context and tighter diagnosis.',
},
};
};
export default function OnboardingExperienceScreen() {
const router = useRouter();
const posthog = usePostHog();
const { session, isDarkMode, colorPalette, t } = useApp();
const { session, isDarkMode, colorPalette, language, t } = useApp();
const colors = useColors(isDarkMode, colorPalette);
const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
const copy = getExperienceScreenCopy(language);
const levelLabels = useMemo(
() => ({
@@ -39,17 +82,29 @@ export default function OnboardingExperienceScreen() {
posthog.capture('onboarding_experience_completed', {
experience_level: level ?? 'skipped',
});
router.replace('/(tabs)');
router.replace('/onboarding/health-check');
};
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ThemeBackdrop colors={colors} />
<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.headerIcon, { backgroundColor: colors.primarySoft }]}>
<Ionicons name="sparkles-outline" size={26} color={colors.primaryDark} />
<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_experience_mockup.png')}
style={[styles.heroPreview, { borderColor: colors.border }]}
imageStyle={styles.heroImage}
resizeMode="cover"
>
<View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.4)' : 'rgba(251, 250, 243, 0.24)' }]} />
<View style={[styles.heroMetric, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Ionicons name="sparkles-outline" size={18} color={colors.primary} />
<Text style={[styles.heroMetricText, { color: colors.text }]}>{copy.heroBadge}</Text>
</View>
</ImageBackground>
<Text style={[styles.title, { color: colors.text }]}>{t.experienceOnboardingTitle}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.experienceOnboardingSubtitle}</Text>
</View>
@@ -73,7 +128,12 @@ export default function OnboardingExperienceScreen() {
<View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
<Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
</View>
<Text style={[styles.optionLabel, { color: colors.text }]}>{levelLabels[option.id as keyof typeof levelLabels]}</Text>
<View style={styles.optionCopy}>
<Text style={[styles.optionLabel, { color: colors.text }]}>{levelLabels[option.id as keyof typeof levelLabels]}</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} />}
</TouchableOpacity>
);
@@ -104,26 +164,35 @@ export default function OnboardingExperienceScreen() {
const styles = StyleSheet.create({
container: { flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
header: { alignItems: 'center', gap: 10, marginBottom: 28 },
headerIcon: { width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center' },
title: { fontSize: 28, fontWeight: '800', textAlign: 'center', lineHeight: 32 },
subtitle: { fontSize: 14, textAlign: 'center', lineHeight: 20, maxWidth: 320 },
options: { gap: 12, flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 12, paddingBottom: 14 },
header: { alignItems: 'center', gap: 9, marginBottom: 14 },
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, overflow: 'hidden', justifyContent: 'flex-end', alignItems: 'flex-start' },
heroImage: { borderRadius: 24 },
heroOverlay: { ...StyleSheet.absoluteFillObject },
heroMetric: { margin: 12, borderRadius: 999, borderWidth: 1, paddingHorizontal: 11, paddingVertical: 7, flexDirection: 'row', alignItems: 'center', gap: 6 },
heroMetricText: { fontSize: 12, fontWeight: '800' },
title: { fontSize: 25, fontWeight: '800', textAlign: 'center', lineHeight: 29 },
subtitle: { fontSize: 13, textAlign: 'center', lineHeight: 18, maxWidth: 320 },
options: { gap: 8, flex: 1 },
optionCard: {
minHeight: 64,
borderRadius: 18,
flex: 1,
borderRadius: 15,
borderWidth: 1.5,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
gap: 12,
paddingHorizontal: 14,
paddingVertical: 16,
gap: 10,
},
optionIcon: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
optionLabel: { flex: 1, fontSize: 15, fontWeight: '600' },
footer: { flexDirection: 'row', gap: 12, marginTop: 16 },
secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
optionIcon: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
optionCopy: { flex: 1, gap: 3 },
optionLabel: { fontSize: 14, fontWeight: '700' },
optionSubtitle: { fontSize: 10.5, lineHeight: 14 },
footer: { flexDirection: 'row', gap: 12, marginTop: 10 },
secondaryBtn: { flex: 1, height: 50, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
secondaryBtnText: { fontSize: 15, fontWeight: '600' },
primaryBtn: { flex: 1.2, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtn: { flex: 1.2, height: 50, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtnText: { fontSize: 15, fontWeight: '700' },
});

116
app/onboarding/goal.tsx
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
@@ -9,6 +9,11 @@ import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';
const ONBOARDING_BACKGROUND = {
light: '#fbfaf3',
dark: '#0a110b',
};
const GOAL_OPTIONS = [
{ id: 'identify', icon: 'scan-outline' as const },
{ id: 'care', icon: 'water-outline' as const },
@@ -16,12 +21,53 @@ const GOAL_OPTIONS = [
{ id: 'learn', icon: 'book-outline' as const },
];
const getGoalScreenCopy = (language: 'de' | 'en' | 'es') => {
if (language === 'de') {
return {
step: 'Schritt 2 von 4',
heroBadge: 'Erstes Ziel',
subtitles: {
identify: 'Schnell erkennen, Pflege danach klaeren.',
care: 'Aus Symptomen konkrete Schritte machen.',
collection: 'Eine saubere Pflanzenbibliothek aufbauen.',
learn: 'Pflanzenwissen einfacher einsortieren.',
},
};
}
if (language === 'es') {
return {
step: 'Paso 2 de 4',
heroBadge: 'Primer objetivo',
subtitles: {
identify: 'Respuesta rapida primero, cuidado despues.',
care: 'Convertir sintomas en pasos claros.',
collection: 'Crear una biblioteca de plantas ordenada.',
learn: 'Aprender plantas con explicaciones simples.',
},
};
}
return {
step: 'Step 2 of 4',
heroBadge: 'First goal',
subtitles: {
identify: 'Fast answer first, care details after.',
care: 'Turn symptoms into a clear next step.',
collection: 'Build a tidy plant library over time.',
learn: 'Browse plants with simpler explanations.',
},
};
};
export default function OnboardingGoalScreen() {
const router = useRouter();
const posthog = usePostHog();
const { session, isDarkMode, colorPalette, t } = useApp();
const { session, isDarkMode, colorPalette, language, t } = useApp();
const colors = useColors(isDarkMode, colorPalette);
const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
const copy = getGoalScreenCopy(language);
const goalLabels = useMemo(
() => ({
@@ -45,13 +91,25 @@ export default function OnboardingGoalScreen() {
};
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ThemeBackdrop colors={colors} />
<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.headerIcon, { backgroundColor: colors.primarySoft }]}>
<Ionicons name="flag-outline" size={26} color={colors.primaryDark} />
<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_goal_mockup.png')}
style={[styles.heroPreview, { borderColor: colors.border }]}
imageStyle={styles.heroImage}
resizeMode="cover"
>
<View style={[styles.heroOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.22)' : 'rgba(251, 250, 243, 0.28)' }]} />
<View style={[styles.heroBadge, { backgroundColor: colors.primary }]}>
<Ionicons name="flag-outline" size={16} color={colors.onPrimary} />
<Text style={[styles.heroBadgeText, { color: colors.onPrimary }]}>{copy.heroBadge}</Text>
</View>
</ImageBackground>
<Text style={[styles.title, { color: colors.text }]}>{t.goalOnboardingTitle}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.goalOnboardingSubtitle}</Text>
</View>
@@ -75,7 +133,12 @@ export default function OnboardingGoalScreen() {
<View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
<Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
</View>
<Text style={[styles.optionLabel, { color: colors.text }]}>{goalLabels[option.id as keyof typeof goalLabels]}</Text>
<View style={styles.optionCopy}>
<Text style={[styles.optionLabel, { color: colors.text }]}>{goalLabels[option.id as keyof typeof goalLabels]}</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} />}
</TouchableOpacity>
);
@@ -106,26 +169,35 @@ export default function OnboardingGoalScreen() {
const styles = StyleSheet.create({
container: { flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
header: { alignItems: 'center', gap: 10, marginBottom: 28 },
headerIcon: { width: 64, height: 64, borderRadius: 32, alignItems: 'center', justifyContent: 'center' },
title: { fontSize: 28, fontWeight: '800', textAlign: 'center', lineHeight: 32 },
subtitle: { fontSize: 14, textAlign: 'center', lineHeight: 20, maxWidth: 320 },
options: { gap: 12, flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 12, paddingBottom: 14 },
header: { alignItems: 'center', gap: 9, marginBottom: 14 },
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, overflow: 'hidden', justifyContent: 'flex-end', alignItems: 'flex-start' },
heroImage: { borderRadius: 24 },
heroOverlay: { ...StyleSheet.absoluteFillObject },
heroBadge: { margin: 12, borderRadius: 999, paddingHorizontal: 11, paddingVertical: 7, flexDirection: 'row', alignItems: 'center', gap: 6 },
heroBadgeText: { fontSize: 12, fontWeight: '800' },
title: { fontSize: 25, fontWeight: '800', textAlign: 'center', lineHeight: 29 },
subtitle: { fontSize: 13, textAlign: 'center', lineHeight: 18, maxWidth: 320 },
options: { gap: 8, flex: 1 },
optionCard: {
minHeight: 64,
borderRadius: 18,
flex: 1,
borderRadius: 15,
borderWidth: 1.5,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
gap: 12,
paddingHorizontal: 14,
paddingVertical: 12,
gap: 10,
},
optionIcon: { width: 36, height: 36, borderRadius: 18, alignItems: 'center', justifyContent: 'center' },
optionLabel: { flex: 1, fontSize: 15, fontWeight: '600' },
footer: { flexDirection: 'row', gap: 12, marginTop: 16 },
secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
optionIcon: { width: 34, height: 34, borderRadius: 17, alignItems: 'center', justifyContent: 'center' },
optionCopy: { flex: 1, gap: 3 },
optionLabel: { fontSize: 14, fontWeight: '700' },
optionSubtitle: { fontSize: 10.5, lineHeight: 14 },
footer: { flexDirection: 'row', gap: 12, marginTop: 10 },
secondaryBtn: { flex: 1, height: 50, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
secondaryBtnText: { fontSize: 15, fontWeight: '600' },
primaryBtn: { flex: 1.2, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtn: { flex: 1.2, height: 50, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtnText: { fontSize: 15, fontWeight: '700' },
});

202
app/onboarding/health-check.tsx Normal file
View File

@@ -0,0 +1,202 @@
import React from 'react';
import { ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
import { usePostHog } from 'posthog-react-native';
import { ThemeBackdrop } from '../../components/ThemeBackdrop';
import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
const ONBOARDING_BACKGROUND = {
light: '#fbfaf3',
dark: '#0a110b',
};
const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
if (language === 'de') {
return {
step: 'Schritt 4 von 4',
title: 'Wo ist der Health-Scan?',
subtitle: 'Du findest ihn auf jeder gespeicherten Pflanze, direkt unter der Beschreibung.',
buttonPreview: 'Health-Scan starten',
cta: 'Weiter',
skip: 'Spaeter',
flow: ['Pflanze scannen', 'Speichern', 'Detailseite oeffnen', 'Health-Scan starten'],
outputTitle: 'Was du danach bekommst',
outputs: [
'Gesundheits-Score mit Status: stabil, beobachten oder kritisch.',
'Ausfuehrliche Analyse mit sichtbaren Hinweisen und Unsicherheit.',
'Wahrscheinlichste Ursachen mit Confidence-Werten.',
'Sofortmassnahmen plus konkreter 7-Tage-Pflegeplan.',
],
guidanceNote: 'Tipp: Fotografiere die ganze Pflanze, die Blattunterseiten und die Erde. Je klarer das Foto, desto genauer wird der Plan.',
};
}
if (language === 'es') {
return {
step: 'Paso 4 de 4',
title: 'Donde esta el health-scan?',
subtitle: 'Lo encuentras en cada planta guardada, justo debajo de la descripcion.',
buttonPreview: 'Iniciar health-scan',
cta: 'Continuar',
skip: 'Mas tarde',
flow: ['Escanear planta', 'Guardar', 'Abrir detalle', 'Iniciar health-scan'],
outputTitle: 'Que recibes despues',
outputs: [
'Puntaje de salud con estado: estable, observar o critico.',
'Analisis detallado con senales visibles e incertidumbre.',
'Causas probables con valores de confianza.',
'Acciones inmediatas y plan concreto de 7 dias.',
],
guidanceNote: 'Consejo: fotografia la planta completa, el reverso de las hojas y el sustrato. Cuanto mas clara sea la foto, mas preciso sera el plan.',
};
}
return {
step: 'Step 4 of 4',
title: 'Where is the health scan?',
subtitle: 'It lives on every saved plant, directly below the plant description.',
buttonPreview: 'Start health scan',
cta: 'Continue',
skip: 'Later',
flow: ['Scan plant', 'Save', 'Open detail', 'Start health scan'],
outputTitle: 'What you get after',
outputs: [
'Health score with stable, watch, or critical status.',
'Detailed analysis with visible signals and uncertainty.',
'Most likely causes with confidence values.',
'Immediate actions plus a concrete 7-day care plan.',
],
guidanceNote: 'Tip: photograph the full plant, leaf undersides, and the soil. The clearer the photo, the more precise the plan.',
};
};
export default function HealthCheckOnboardingScreen() {
const router = useRouter();
const posthog = usePostHog();
const { isDarkMode, colorPalette, language, billingSummary } = useApp();
const colors = useColors(isDarkMode, colorPalette);
const screenBackground = isDarkMode ? ONBOARDING_BACKGROUND.dark : ONBOARDING_BACKGROUND.light;
const copy = getHealthOnboardingCopy(language);
const finish = (skipped = false) => {
posthog.capture('onboarding_health_check_explained', {
skipped,
plan: billingSummary?.entitlement?.plan ?? 'free',
});
const hasActiveEntitlement = billingSummary?.entitlement?.plan === 'pro'
&& billingSummary?.entitlement?.status === 'active';
router.replace(hasActiveEntitlement ? '/(tabs)' : '/profile/billing');
};
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>
<Text style={[styles.title, { color: colors.text }]}>{copy.title}</Text>
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{copy.subtitle}</Text>
</View>
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
<ImageBackground
source={require('../../assets/onboarding_health_scan_mockup.png')}
style={[styles.illustration, { borderColor: colors.border }]}
imageStyle={styles.illustrationImage}
resizeMode="cover"
>
<View style={[styles.illustrationOverlay, { backgroundColor: isDarkMode ? 'rgba(8, 14, 9, 0.08)' : 'rgba(251, 250, 243, 0.04)' }]} />
</ImageBackground>
<View style={[styles.flowCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
{copy.flow.map((item, index) => (
<View key={item} style={styles.flowRow}>
<View style={[styles.flowIndex, { backgroundColor: index === 3 ? colors.primary : colors.surfaceMuted }]}>
<Text style={[styles.flowIndexText, { color: index === 3 ? colors.onPrimary : colors.textMuted }]}>
{index + 1}
</Text>
</View>
<Text style={[styles.flowText, { color: colors.text }]}>{item}</Text>
</View>
))}
</View>
<View style={[styles.outputCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
<Text style={[styles.outputTitle, { color: colors.text }]}>{copy.outputTitle}</Text>
{copy.outputs.map((item) => (
<View key={item} style={styles.outputRow}>
<Ionicons name="checkmark-circle" size={16} color={colors.success} />
<Text style={[styles.outputText, { color: colors.textSecondary }]}>{item}</Text>
</View>
))}
</View>
<View style={[styles.guidanceCard, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
<Ionicons name="camera-outline" size={18} color={colors.primaryDark} />
<Text style={[styles.guidanceText, { color: colors.primaryDark }]}>{copy.guidanceNote}</Text>
</View>
</ScrollView>
<View style={styles.footer}>
<TouchableOpacity
style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
onPress={() => finish(true)}
>
<Text style={[styles.secondaryBtnText, { color: colors.text }]}>{copy.skip}</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={() => finish(false)}>
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.cta}</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
);
}
const styles = StyleSheet.create({
container: { flex: 1 },
safeArea: { flex: 1, paddingHorizontal: 20, paddingTop: 24, paddingBottom: 20 },
header: { gap: 9, marginBottom: 18 },
stepPill: { alignSelf: 'flex-start', borderWidth: 1, borderRadius: 999, paddingHorizontal: 12, paddingVertical: 7 },
stepLabel: { fontSize: 12, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.4 },
title: { fontSize: 30, lineHeight: 34, fontWeight: '900' },
subtitle: { fontSize: 14, lineHeight: 20 },
content: { gap: 14, paddingBottom: 12 },
illustration: { height: 230, borderRadius: 28, borderWidth: 1, justifyContent: 'center', overflow: 'hidden' },
illustrationImage: { borderRadius: 28 },
illustrationOverlay: { ...StyleSheet.absoluteFillObject },
phone: { width: 178, minHeight: 156, borderRadius: 26, borderWidth: 1, padding: 12, gap: 10, marginLeft: 16 },
phoneHeader: { height: 58, borderRadius: 18, justifyContent: 'flex-end', padding: 10 },
phoneTitle: { fontSize: 13, fontWeight: '800' },
phoneRows: { gap: 8 },
phoneRowLong: { height: 8, borderRadius: 999 },
phoneRowShort: { width: '66%', height: 8, borderRadius: 999 },
healthButtonPreview: { height: 34, borderRadius: 14, borderWidth: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 5 },
healthButtonText: { fontSize: 10, fontWeight: '800' },
scanCard: { position: 'absolute', right: 16, bottom: 20, width: 136, borderRadius: 20, borderWidth: 1, padding: 14, gap: 7 },
scanScore: { fontSize: 25, lineHeight: 29, fontWeight: '900' },
scanLabel: { fontSize: 11, fontWeight: '800', textTransform: 'uppercase' },
scanLine: { height: 8, borderRadius: 999 },
scanLineShort: { width: '68%', height: 8, borderRadius: 999 },
flowCard: { borderRadius: 18, borderWidth: 1, padding: 14, gap: 10 },
flowRow: { flexDirection: 'row', alignItems: 'center', gap: 10 },
flowIndex: { width: 26, height: 26, borderRadius: 13, alignItems: 'center', justifyContent: 'center' },
flowIndexText: { fontSize: 12, fontWeight: '900' },
flowText: { flex: 1, fontSize: 14, fontWeight: '700' },
outputCard: { borderRadius: 18, borderWidth: 1, padding: 16, gap: 11 },
outputTitle: { fontSize: 15, fontWeight: '800' },
outputRow: { flexDirection: 'row', alignItems: 'flex-start', gap: 9 },
outputText: { flex: 1, fontSize: 13, lineHeight: 18 },
guidanceCard: { borderRadius: 18, borderWidth: 1, padding: 14, flexDirection: 'row', alignItems: 'flex-start', gap: 10 },
guidanceText: { flex: 1, fontSize: 12, lineHeight: 18, fontWeight: '600' },
footer: { flexDirection: 'row', gap: 12, marginTop: 12 },
secondaryBtn: { flex: 1, height: 52, borderRadius: 16, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
secondaryBtnText: { fontSize: 15, fontWeight: '600' },
primaryBtn: { flex: 1.3, height: 52, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
primaryBtnText: { fontSize: 15, fontWeight: '700' },
});

231
app/onboarding/source.tsx
View File

@@ -1,5 +1,5 @@
import React, { useMemo, useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { ImageBackground, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { Ionicons } from '@expo/vector-icons';
@@ -9,21 +9,82 @@ import { useColors } from '../../constants/Colors';
import { useApp } from '../../context/AppContext';
import { OnboardingProgressService } from '../../services/onboardingProgressService';
const ONBOARDING_BACKGROUND = {
light: '#fbfaf3',
dark: '#0a110b',
};
const SOURCE_OPTIONS = [
{ id: 'app_store', icon: 'phone-portrait-outline' as const },
{ id: 'instagram', icon: 'logo-instagram' as const },
{ id: 'tiktok', icon: 'musical-notes-outline' as const },
{ id: 'friend', icon: 'people-outline' as const },
{ id: 'search', icon: 'search-outline' as const },
{ id: 'other', icon: 'ellipsis-horizontal-circle-outline' as const },
{ 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' },
];
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 = usePostHog();
const { session, isDarkMode, colorPalette, t } = useApp();
const { session, isDarkMode, colorPalette, language, 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(
() => ({
@@ -51,18 +112,40 @@ export default function OnboardingSourceScreen() {
posthog.capture('onboarding_source_completed', {
source: source ?? 'skipped',
revops_signal: SOURCE_OPTIONS.find((option) => option.id === source)?.signal ?? 'skipped',
});
router.replace('/onboarding/goal');
};
return (
<View style={[styles.container, { backgroundColor: colors.background }]}>
<ThemeBackdrop colors={colors} />
<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.headerIcon, { backgroundColor: colors.primarySoft }]}>
<Ionicons name="paper-plane-outline" size={26} color={colors.primaryDark} />
<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>
@@ -86,8 +169,13 @@ export default function OnboardingSourceScreen() {
<View style={[styles.optionIcon, { backgroundColor: isActive ? colors.primary : colors.surfaceMuted }]}>
<Ionicons name={option.icon} size={18} color={isActive ? colors.onPrimary : colors.textMuted} />
</View>
<Text style={[styles.optionLabel, { color: colors.text }]}>{sourceLabels[option.id as keyof typeof sourceLabels]}</Text>
{isActive && <Ionicons name="checkmark-circle" size={18} color={colors.primary} />}
<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>
);
})}
@@ -130,66 +218,123 @@ const styles = StyleSheet.create({
safeArea: {
flex: 1,
paddingHorizontal: 20,
paddingTop: 24,
paddingBottom: 20,
paddingTop: 12,
paddingBottom: 14,
justifyContent: 'space-between',
},
header: {
alignItems: 'center',
gap: 10,
marginBottom: 28,
gap: 9,
},
headerIcon: {
width: 64,
height: 64,
borderRadius: 32,
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: 28,
fontSize: 25,
fontWeight: '800',
textAlign: 'center',
lineHeight: 32,
lineHeight: 29,
},
subtitle: {
fontSize: 14,
fontSize: 13,
textAlign: 'center',
lineHeight: 20,
lineHeight: 18,
maxWidth: 320,
},
options: {
gap: 12,
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
gap: 8,
},
optionCard: {
minHeight: 64,
borderRadius: 18,
width: '48.8%',
minHeight: 68,
borderRadius: 15,
borderWidth: 1.5,
flexDirection: 'row',
alignItems: 'center',
paddingHorizontal: 16,
gap: 12,
padding: 9,
gap: 8,
position: 'relative',
},
optionIcon: {
width: 36,
height: 36,
borderRadius: 18,
width: 34,
height: 34,
borderRadius: 17,
alignItems: 'center',
justifyContent: 'center',
},
optionCopy: {
gap: 3,
},
optionLabel: {
flex: 1,
fontSize: 15,
fontWeight: '600',
fontSize: 13,
fontWeight: '700',
},
optionSubtitle: {
fontSize: 10,
lineHeight: 13,
},
optionCheck: {
position: 'absolute',
right: 9,
top: 9,
},
footer: {
flexDirection: 'row',
gap: 12,
marginTop: 16,
},
secondaryBtn: {
flex: 1,
height: 52,
height: 50,
borderRadius: 16,
borderWidth: 1.5,
alignItems: 'center',
@@ -201,7 +346,7 @@ const styles = StyleSheet.create({
},
primaryBtn: {
flex: 1.2,
height: 52,
height: 50,
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',