feat(app): Stitch question screens with shared layout, pre-auth answer buffering
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
@@ -1,83 +1,44 @@
|
||||
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 EXPERIENCE_OPTIONS = [
|
||||
{ id: 'beginner', icon: 'leaf-outline' as const },
|
||||
{ id: 'intermediate', icon: 'sunny-outline' as const },
|
||||
{ id: 'advanced', icon: 'flask-outline' as const },
|
||||
{ id: 'beginner', emoji: '🌱' },
|
||||
{ id: 'intermediate', emoji: '☀️' },
|
||||
{ id: 'advanced', emoji: '🧪' },
|
||||
];
|
||||
|
||||
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 = 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 [selectedLevel, setSelectedLevel] = useState<string | null>(null);
|
||||
const copy = getExperienceScreenCopy(language);
|
||||
|
||||
const levelLabels = useMemo(
|
||||
() => ({
|
||||
beginner: t.experienceOptionBeginner,
|
||||
intermediate: t.experienceOptionIntermediate,
|
||||
advanced: t.experienceOptionAdvanced,
|
||||
}),
|
||||
[t.experienceOptionAdvanced, t.experienceOptionBeginner, t.experienceOptionIntermediate],
|
||||
);
|
||||
const levelLabels: Record<string, string> = {
|
||||
beginner: t.experienceOptionBeginner,
|
||||
intermediate: t.experienceOptionIntermediate,
|
||||
advanced: t.experienceOptionAdvanced,
|
||||
};
|
||||
|
||||
const options: QuestionOption[] = EXPERIENCE_OPTIONS.map((option) => ({
|
||||
id: option.id,
|
||||
emoji: option.emoji,
|
||||
label: levelLabels[option.id],
|
||||
}));
|
||||
|
||||
const finish = (level: string | null) => {
|
||||
if (session?.userId && level) {
|
||||
OnboardingProgressService.setExperienceLevel(session.userId, level);
|
||||
}
|
||||
if (level) {
|
||||
void PreAuthOnboardingService.setAnswer('experienceLevel', level);
|
||||
}
|
||||
|
||||
posthog.capture('onboarding_experience_completed', {
|
||||
experience_level: level ?? 'skipped',
|
||||
@@ -86,113 +47,21 @@ export default function OnboardingExperienceScreen() {
|
||||
};
|
||||
|
||||
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_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>
|
||||
|
||||
<View style={styles.options}>
|
||||
{EXPERIENCE_OPTIONS.map((option) => {
|
||||
const isActive = selectedLevel === option.id;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={option.id}
|
||||
style={[
|
||||
styles.optionCard,
|
||||
{
|
||||
backgroundColor: isActive ? colors.primarySoft : colors.surface,
|
||||
borderColor: isActive ? colors.primary : colors.border,
|
||||
},
|
||||
]}
|
||||
onPress={() => setSelectedLevel(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 }]}>{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>
|
||||
);
|
||||
})}
|
||||
</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.experienceOnboardingSkip}</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryBtn, { backgroundColor: selectedLevel ? colors.primary : colors.surfaceMuted }]}
|
||||
onPress={() => finish(selectedLevel)}
|
||||
disabled={!selectedLevel}
|
||||
>
|
||||
<Text style={[styles.primaryBtnText, { color: selectedLevel ? colors.onPrimary : colors.textMuted }]}>
|
||||
{t.experienceOnboardingContinue}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
<OnboardingQuestion
|
||||
colors={colors}
|
||||
isDarkMode={isDarkMode}
|
||||
step={3}
|
||||
totalSteps={4}
|
||||
title={t.experienceOnboardingTitle}
|
||||
subtitle={t.experienceOnboardingSubtitle}
|
||||
options={options}
|
||||
selectedId={selectedLevel}
|
||||
onSelect={setSelectedLevel}
|
||||
onContinue={() => finish(selectedLevel)}
|
||||
onBack={() => router.back()}
|
||||
continueLabel={t.experienceOnboardingContinue}
|
||||
skipLabel={t.experienceOnboardingSkip}
|
||||
onSkip={() => finish(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 },
|
||||
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: {
|
||||
flex: 1,
|
||||
borderRadius: 15,
|
||||
borderWidth: 1.5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 16,
|
||||
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' },
|
||||
});
|
||||
|
||||
@@ -1,88 +1,46 @@
|
||||
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 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 },
|
||||
{ id: 'identify', emoji: '🔍' },
|
||||
{ id: 'care', emoji: '💧' },
|
||||
{ id: 'collection', emoji: '🗂️' },
|
||||
{ id: 'learn', emoji: '📚' },
|
||||
];
|
||||
|
||||
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 = 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 [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 goalLabels: Record<string, string> = {
|
||||
identify: t.goalOptionIdentify,
|
||||
care: t.goalOptionCare,
|
||||
collection: t.goalOptionCollection,
|
||||
learn: t.goalOptionLearn,
|
||||
};
|
||||
|
||||
const options: QuestionOption[] = GOAL_OPTIONS.map((option) => ({
|
||||
id: option.id,
|
||||
emoji: option.emoji,
|
||||
label: goalLabels[option.id],
|
||||
}));
|
||||
|
||||
const finish = (goal: string | null) => {
|
||||
if (session?.userId && goal) {
|
||||
OnboardingProgressService.setPrimaryGoal(session.userId, goal);
|
||||
}
|
||||
if (goal) {
|
||||
void PreAuthOnboardingService.setAnswer('primaryGoal', goal);
|
||||
}
|
||||
|
||||
posthog.capture('onboarding_goal_completed', {
|
||||
goal: goal ?? 'skipped',
|
||||
@@ -91,113 +49,21 @@ export default function OnboardingGoalScreen() {
|
||||
};
|
||||
|
||||
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>
|
||||
<OnboardingQuestion
|
||||
colors={colors}
|
||||
isDarkMode={isDarkMode}
|
||||
step={2}
|
||||
totalSteps={4}
|
||||
title={t.goalOnboardingTitle}
|
||||
subtitle={t.goalOnboardingSubtitle}
|
||||
options={options}
|
||||
selectedId={selectedGoal}
|
||||
onSelect={setSelectedGoal}
|
||||
onContinue={() => finish(selectedGoal)}
|
||||
onBack={() => router.back()}
|
||||
continueLabel={t.goalOnboardingContinue}
|
||||
skipLabel={t.goalOnboardingSkip}
|
||||
onSkip={() => finish(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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' },
|
||||
});
|
||||
|
||||
@@ -16,7 +16,6 @@ const ONBOARDING_BACKGROUND = {
|
||||
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',
|
||||
@@ -36,7 +35,6 @@ const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
|
||||
|
||||
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',
|
||||
@@ -55,7 +53,6 @@ const getHealthOnboardingCopy = (language: 'de' | 'en' | 'es') => {
|
||||
}
|
||||
|
||||
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',
|
||||
@@ -86,19 +83,23 @@ export default function HealthCheckOnboardingScreen() {
|
||||
skipped,
|
||||
plan: billingSummary?.entitlement?.plan ?? 'free',
|
||||
});
|
||||
const hasActiveEntitlement = billingSummary?.entitlement?.plan === 'pro'
|
||||
&& billingSummary?.entitlement?.status === 'active';
|
||||
router.replace(hasActiveEntitlement ? '/(tabs)' : '/profile/billing');
|
||||
router.replace('/onboarding/personalizing');
|
||||
};
|
||||
|
||||
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 style={styles.topBar}>
|
||||
<TouchableOpacity onPress={() => router.back()} style={[styles.backBtn, { backgroundColor: colors.surface }]}>
|
||||
<Ionicons name="arrow-back" size={20} color={colors.primary} />
|
||||
</TouchableOpacity>
|
||||
<View style={[styles.progressTrack, { backgroundColor: colors.primarySoft }]}>
|
||||
<View style={[styles.progressFill, { backgroundColor: colors.primary, width: '100%' }]} />
|
||||
</View>
|
||||
<View style={styles.backBtn} />
|
||||
</View>
|
||||
<View style={styles.header}>
|
||||
<Text style={[styles.title, { color: colors.text }]}>{copy.title}</Text>
|
||||
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{copy.subtitle}</Text>
|
||||
</View>
|
||||
@@ -161,9 +162,11 @@ export default function HealthCheckOnboardingScreen() {
|
||||
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 },
|
||||
topBar: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 10 },
|
||||
backBtn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
|
||||
progressTrack: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden' },
|
||||
progressFill: { height: 6, borderRadius: 3 },
|
||||
header: { gap: 9, marginTop: 8, marginBottom: 18 },
|
||||
title: { fontSize: 30, lineHeight: 34, fontWeight: '900' },
|
||||
subtitle: { fontSize: 14, lineHeight: 20 },
|
||||
content: { gap: 14, paddingBottom: 12 },
|
||||
|
||||
@@ -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',
|
||||
},
|
||||
});
|
||||
|
||||
107
components/OnboardingQuestion.tsx
Normal file
107
components/OnboardingQuestion.tsx
Normal file
@@ -0,0 +1,107 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useColors } from '../constants/Colors';
|
||||
|
||||
type ColorsType = ReturnType<typeof useColors>;
|
||||
|
||||
export type QuestionOption = { id: string; emoji: string; label: string; subtitle?: string };
|
||||
|
||||
type Props = {
|
||||
colors: ColorsType;
|
||||
isDarkMode: boolean;
|
||||
step: number; // 1-based
|
||||
totalSteps: number;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
options: QuestionOption[];
|
||||
selectedId: string | null;
|
||||
onSelect: (id: string) => void;
|
||||
onContinue: () => void;
|
||||
onBack?: () => void;
|
||||
continueLabel: string;
|
||||
skipLabel?: string;
|
||||
onSkip?: () => void;
|
||||
};
|
||||
|
||||
export function OnboardingQuestion({
|
||||
colors, isDarkMode, step, totalSteps, title, subtitle, options,
|
||||
selectedId, onSelect, onContinue, onBack, continueLabel, skipLabel, onSkip,
|
||||
}: Props) {
|
||||
return (
|
||||
<SafeAreaView style={[styles.safe, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]} edges={['top', 'left', 'right', 'bottom']}>
|
||||
<View style={styles.topBar}>
|
||||
{onBack ? (
|
||||
<TouchableOpacity onPress={onBack} style={[styles.backBtn, { backgroundColor: colors.surface }]}>
|
||||
<Ionicons name="arrow-back" size={20} color={colors.primary} />
|
||||
</TouchableOpacity>
|
||||
) : <View style={styles.backBtn} />}
|
||||
<View style={[styles.progressTrack, { backgroundColor: colors.primarySoft }]}>
|
||||
<View style={[styles.progressFill, { backgroundColor: colors.primary, width: `${Math.round((step / totalSteps) * 100)}%` }]} />
|
||||
</View>
|
||||
<View style={styles.backBtn} />
|
||||
</View>
|
||||
<Text style={[styles.title, { color: colors.text }]}>{title}</Text>
|
||||
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{subtitle}</Text>
|
||||
<View style={styles.options}>
|
||||
{options.map((option) => {
|
||||
const active = selectedId === option.id;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={option.id}
|
||||
onPress={() => onSelect(option.id)}
|
||||
activeOpacity={0.85}
|
||||
style={[styles.card, {
|
||||
backgroundColor: active ? colors.primarySoft : colors.surface,
|
||||
borderColor: active ? colors.primary : 'transparent',
|
||||
}]}
|
||||
>
|
||||
<Text style={styles.emoji}>{option.emoji}</Text>
|
||||
<View style={styles.cardCopy}>
|
||||
<Text style={[styles.cardLabel, { color: active ? colors.primary : colors.text }]}>{option.label}</Text>
|
||||
{option.subtitle ? <Text style={[styles.cardSubtitle, { color: colors.textMuted }]}>{option.subtitle}</Text> : null}
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
<View style={styles.footer}>
|
||||
{skipLabel && onSkip ? (
|
||||
<TouchableOpacity onPress={onSkip} style={styles.skipBtn}>
|
||||
<Text style={[styles.skipText, { color: colors.textMuted }]}>{skipLabel}</Text>
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
<TouchableOpacity
|
||||
onPress={onContinue}
|
||||
disabled={!selectedId}
|
||||
activeOpacity={0.86}
|
||||
style={[styles.cta, { backgroundColor: selectedId ? colors.primary : colors.surfaceMuted }]}
|
||||
>
|
||||
<Text style={[styles.ctaText, { color: selectedId ? colors.onPrimary : colors.textMuted }]}>{continueLabel}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, paddingHorizontal: 22 },
|
||||
topBar: { flexDirection: 'row', alignItems: 'center', gap: 14, paddingVertical: 10 },
|
||||
backBtn: { width: 40, height: 40, borderRadius: 20, alignItems: 'center', justifyContent: 'center' },
|
||||
progressTrack: { flex: 1, height: 6, borderRadius: 3, overflow: 'hidden' },
|
||||
progressFill: { height: 6, borderRadius: 3 },
|
||||
title: { fontSize: 30, lineHeight: 35, fontWeight: '900', textAlign: 'center', marginTop: 18, marginBottom: 8 },
|
||||
subtitle: { fontSize: 15, lineHeight: 20, textAlign: 'center', marginBottom: 22 },
|
||||
options: { gap: 12, flex: 1 },
|
||||
card: { flexDirection: 'row', alignItems: 'center', gap: 14, borderRadius: 16, borderWidth: 2, paddingHorizontal: 16, paddingVertical: 18 },
|
||||
emoji: { fontSize: 26 },
|
||||
cardCopy: { flex: 1, gap: 2 },
|
||||
cardLabel: { fontSize: 17, fontWeight: '800' },
|
||||
cardSubtitle: { fontSize: 12.5, lineHeight: 16 },
|
||||
footer: { gap: 8, paddingBottom: 6 },
|
||||
skipBtn: { alignItems: 'center', paddingVertical: 6 },
|
||||
skipText: { fontSize: 14, fontWeight: '700' },
|
||||
cta: { height: 56, borderRadius: 14, alignItems: 'center', justifyContent: 'center' },
|
||||
ctaText: { fontSize: 17, fontWeight: '800' },
|
||||
});
|
||||
Reference in New Issue
Block a user