359 lines
11 KiB
TypeScript
359 lines
11 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 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' },
|
|
];
|
|
|
|
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, 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(
|
|
() => ({
|
|
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 finish = (source: string | null) => {
|
|
if (session?.userId && source) {
|
|
OnboardingProgressService.setAcquisitionSource(session.userId, source);
|
|
}
|
|
|
|
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: 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>
|
|
);
|
|
}
|
|
|
|
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',
|
|
},
|
|
});
|