204 lines
8.5 KiB
TypeScript
204 lines
8.5 KiB
TypeScript
import React, { useMemo, useState } from 'react';
|
|
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';
|
|
import { usePostHog } from 'posthog-react-native';
|
|
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',
|
|
};
|
|
|
|
const GOAL_OPTIONS = [
|
|
{ id: 'identify', icon: 'scan-outline' as const },
|
|
{ id: 'care', icon: 'water-outline' as const },
|
|
{ id: 'collection', icon: 'albums-outline' as const },
|
|
{ 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, 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(
|
|
() => ({
|
|
identify: t.goalOptionIdentify,
|
|
care: t.goalOptionCare,
|
|
collection: t.goalOptionCollection,
|
|
learn: t.goalOptionLearn,
|
|
}),
|
|
[t.goalOptionCare, t.goalOptionCollection, t.goalOptionIdentify, t.goalOptionLearn],
|
|
);
|
|
|
|
const finish = (goal: string | null) => {
|
|
if (session?.userId && goal) {
|
|
OnboardingProgressService.setPrimaryGoal(session.userId, goal);
|
|
}
|
|
|
|
posthog.capture('onboarding_goal_completed', {
|
|
goal: goal ?? 'skipped',
|
|
});
|
|
router.replace('/onboarding/experience');
|
|
};
|
|
|
|
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_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>
|
|
|
|
<View style={styles.options}>
|
|
{GOAL_OPTIONS.map((option) => {
|
|
const isActive = selectedGoal === option.id;
|
|
return (
|
|
<TouchableOpacity
|
|
key={option.id}
|
|
style={[
|
|
styles.optionCard,
|
|
{
|
|
backgroundColor: isActive ? colors.primarySoft : colors.surface,
|
|
borderColor: isActive ? colors.primary : colors.border,
|
|
},
|
|
]}
|
|
onPress={() => setSelectedGoal(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 }]}>{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>
|
|
);
|
|
})}
|
|
</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.goalOnboardingSkip}</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity
|
|
style={[styles.primaryBtn, { backgroundColor: selectedGoal ? colors.primary : colors.surfaceMuted }]}
|
|
onPress={() => finish(selectedGoal)}
|
|
disabled={!selectedGoal}
|
|
>
|
|
<Text style={[styles.primaryBtnText, { color: selectedGoal ? colors.onPrimary : colors.textMuted }]}>
|
|
{t.goalOnboardingContinue}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: { 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: {
|
|
flex: 1,
|
|
borderRadius: 15,
|
|
borderWidth: 1.5,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 14,
|
|
paddingVertical: 12,
|
|
gap: 10,
|
|
},
|
|
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: 50, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
|
|
primaryBtnText: { fontSize: 15, fontWeight: '700' },
|
|
});
|