Testflight
This commit is contained in:
@@ -1,67 +1,67 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const EXPERIENCE_OPTIONS = [
|
||||
{ id: 'beginner', emoji: '🌱' },
|
||||
{ id: 'intermediate', emoji: '☀️' },
|
||||
{ id: 'advanced', emoji: '🧪' },
|
||||
];
|
||||
|
||||
export default function OnboardingExperienceScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
});
|
||||
router.replace('/onboarding/health-check');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const EXPERIENCE_OPTIONS = [
|
||||
{ id: 'beginner', emoji: '🌱' },
|
||||
{ id: 'intermediate', emoji: '☀️' },
|
||||
{ id: 'advanced', emoji: '🧪' },
|
||||
];
|
||||
|
||||
export default function OnboardingExperienceScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedLevel, setSelectedLevel] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
});
|
||||
router.replace('/onboarding/health-check');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,69 +1,69 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const GOAL_OPTIONS = [
|
||||
{ id: 'identify', emoji: '🔍' },
|
||||
{ id: 'care', emoji: '💧' },
|
||||
{ id: 'collection', emoji: '🗂️' },
|
||||
{ id: 'learn', emoji: '📚' },
|
||||
];
|
||||
|
||||
export default function OnboardingGoalScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
});
|
||||
router.replace('/onboarding/experience');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const GOAL_OPTIONS = [
|
||||
{ id: 'identify', emoji: '🔍' },
|
||||
{ id: 'care', emoji: '💧' },
|
||||
{ id: 'collection', emoji: '🗂️' },
|
||||
{ id: 'learn', emoji: '📚' },
|
||||
];
|
||||
|
||||
export default function OnboardingGoalScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedGoal, setSelectedGoal] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
});
|
||||
router.replace('/onboarding/experience');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,205 +1,205 @@
|
||||
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 { useSafeAnalytics } from '../../services/analytics';
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 = useSafeAnalytics();
|
||||
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',
|
||||
});
|
||||
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.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>
|
||||
|
||||
<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 },
|
||||
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 },
|
||||
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' },
|
||||
});
|
||||
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 { useSafeAnalytics } from '../../services/analytics';
|
||||
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 {
|
||||
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 {
|
||||
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 {
|
||||
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 = useSafeAnalytics();
|
||||
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',
|
||||
});
|
||||
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.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>
|
||||
|
||||
<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 },
|
||||
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 },
|
||||
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' },
|
||||
});
|
||||
|
||||
@@ -1,165 +1,165 @@
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import Svg, { Circle } from 'react-native-svg';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
status: 'Dein Pflegeplan wird personalisiert…',
|
||||
steps: ['Antworten werden analysiert', 'Pflegeplan wird erstellt', 'Scan-Credits werden vorbereitet', 'Plan wird finalisiert'],
|
||||
testimonial: '„GreenLens hat meine Geigenfeige gerettet. Die täglichen Routinen sind unglaublich präzise."',
|
||||
author: 'Elena R.',
|
||||
rating: '4,8 APP-STORE-BEWERTUNG',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
status: 'Personalizando tu plan de cuidados…',
|
||||
steps: ['Analizando tus respuestas', 'Creando tu plan de cuidados', 'Preparando tus créditos de escaneo', 'Finalizando tu plan'],
|
||||
testimonial: '"GreenLens salvó mi ficus lyrata. Las rutinas diarias son increíblemente precisas."',
|
||||
author: 'Elena R.',
|
||||
rating: '4.8 VALORACIÓN EN APP STORE',
|
||||
};
|
||||
}
|
||||
return {
|
||||
status: 'Personalizing your care plan…',
|
||||
steps: ['Analyzing your answers', 'Building your care plan', 'Preparing your scan credits', 'Finalizing your plan'],
|
||||
testimonial: '"GreenLens completely saved my Fiddle Leaf Fig. The daily routines feel incredibly precise."',
|
||||
author: 'Elena R.',
|
||||
rating: '4.8 APP STORE RATING',
|
||||
};
|
||||
};
|
||||
|
||||
const STEP_THRESHOLDS = [25, 50, 75, 95];
|
||||
const RING_SIZE = 150;
|
||||
const RING_STROKE_WIDTH = 7;
|
||||
const RING_RADIUS = (RING_SIZE - RING_STROKE_WIDTH) / 2;
|
||||
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||
|
||||
export default function OnboardingPersonalizingScreen() {
|
||||
const { language, isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const posthog = useSafeAnalytics();
|
||||
const copy = getCopy(language);
|
||||
const progress = useRef(new Animated.Value(0)).current;
|
||||
const [percent, setPercent] = useState(0);
|
||||
const navigated = useRef(false);
|
||||
|
||||
const strokeDashoffset = progress.interpolate({
|
||||
inputRange: [0, 100],
|
||||
outputRange: [RING_CIRCUMFERENCE, 0],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_personalizing_viewed');
|
||||
const listener = progress.addListener(({ value }) => setPercent(Math.round(value)));
|
||||
Animated.timing(progress, {
|
||||
toValue: 100,
|
||||
duration: 6000,
|
||||
easing: Easing.inOut(Easing.cubic),
|
||||
useNativeDriver: false,
|
||||
}).start(({ finished }) => {
|
||||
if (finished && !navigated.current) {
|
||||
navigated.current = true;
|
||||
setTimeout(() => {
|
||||
posthog.capture('paywall_opened', { source: 'onboarding' });
|
||||
router.replace('/profile/billing?view=paywall&context=onboarding');
|
||||
}, 450);
|
||||
}
|
||||
});
|
||||
return () => progress.removeListener(listener);
|
||||
}, [progress, posthog]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.safe, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
|
||||
<Text style={[styles.percent, { color: colors.primary }]}>{percent}%</Text>
|
||||
<View style={styles.ringWrap}>
|
||||
<Svg width={RING_SIZE} height={RING_SIZE} style={StyleSheet.absoluteFill}>
|
||||
<Circle
|
||||
cx={RING_SIZE / 2}
|
||||
cy={RING_SIZE / 2}
|
||||
r={RING_RADIUS}
|
||||
stroke={colors.primarySoft}
|
||||
strokeWidth={RING_STROKE_WIDTH}
|
||||
fill="none"
|
||||
/>
|
||||
<AnimatedCircle
|
||||
cx={RING_SIZE / 2}
|
||||
cy={RING_SIZE / 2}
|
||||
r={RING_RADIUS}
|
||||
stroke={colors.primary}
|
||||
strokeWidth={RING_STROKE_WIDTH}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${RING_CIRCUMFERENCE}, ${RING_CIRCUMFERENCE}`}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
rotation="-90"
|
||||
originX={RING_SIZE / 2}
|
||||
originY={RING_SIZE / 2}
|
||||
/>
|
||||
</Svg>
|
||||
<Image source={require('../../assets/paywall_scan_background.png')} style={styles.ringImage} />
|
||||
</View>
|
||||
<View style={[styles.statusPill, { backgroundColor: colors.surfaceMuted }]}>
|
||||
<Ionicons name="sync-outline" size={15} color={colors.textSecondary} />
|
||||
<Text style={[styles.statusText, { color: colors.textSecondary }]}>{copy.status}</Text>
|
||||
</View>
|
||||
<View style={styles.checklist}>
|
||||
{copy.steps.map((label, index) => {
|
||||
const done = percent >= STEP_THRESHOLDS[index];
|
||||
return (
|
||||
<View key={label} style={styles.checkRow}>
|
||||
<Ionicons
|
||||
name={done ? 'checkmark-circle' : 'ellipse-outline'}
|
||||
size={24}
|
||||
color={done ? colors.primary : colors.border}
|
||||
/>
|
||||
<Text style={[styles.checkLabel, { color: done ? colors.text : colors.textMuted }]}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
<View style={[styles.testimonialCard, { backgroundColor: colors.surface }]}>
|
||||
<View style={styles.testimonialHeader}>
|
||||
<Text style={[styles.testimonialAuthor, { color: colors.text }]}>{copy.author}</Text>
|
||||
<View style={styles.starsRow}>
|
||||
{[0, 1, 2, 3, 4].map((i) => <Ionicons key={i} name="star" size={13} color="#f5c04e" />)}
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.testimonialText, { color: colors.textSecondary }]}>{copy.testimonial}</Text>
|
||||
</View>
|
||||
<View style={[styles.ratingBadge, { borderColor: colors.primary }]}>
|
||||
<Ionicons name="ribbon-outline" size={16} color={colors.primary} />
|
||||
<Text style={[styles.ratingText, { color: colors.primary }]}>{copy.rating}</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, alignItems: 'center', paddingHorizontal: 24, paddingTop: 30 },
|
||||
percent: { fontSize: 56, fontWeight: '900', marginBottom: 16 },
|
||||
ringWrap: { width: 150, height: 150, alignItems: 'center', justifyContent: 'center', marginBottom: 22 },
|
||||
ringImage: { width: 112, height: 112, borderRadius: 56 },
|
||||
statusPill: { flexDirection: 'row', alignItems: 'center', gap: 8, borderRadius: 999, paddingHorizontal: 18, paddingVertical: 11, marginBottom: 26 },
|
||||
statusText: { fontSize: 14.5, fontWeight: '800' },
|
||||
checklist: { alignSelf: 'stretch', gap: 15, marginBottom: 26, paddingHorizontal: 8 },
|
||||
checkRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
checkLabel: { fontSize: 16.5, fontWeight: '700' },
|
||||
testimonialCard: { alignSelf: 'stretch', borderRadius: 18, padding: 16, marginBottom: 14 },
|
||||
testimonialHeader: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
|
||||
testimonialAuthor: { fontSize: 14.5, fontWeight: '800' },
|
||||
starsRow: { flexDirection: 'row', gap: 2 },
|
||||
testimonialText: { fontSize: 14, lineHeight: 20, fontStyle: 'italic' },
|
||||
ratingBadge: { flexDirection: 'row', alignItems: 'center', gap: 7, borderWidth: 1.5, borderRadius: 999, paddingHorizontal: 16, paddingVertical: 9 },
|
||||
ratingText: { fontSize: 12.5, fontWeight: '900', letterSpacing: 0.6 },
|
||||
});
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import Svg, { Circle } from 'react-native-svg';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
status: 'Dein Pflegeplan wird personalisiert…',
|
||||
steps: ['Antworten werden analysiert', 'Pflegeplan wird erstellt', 'Scan-Credits werden vorbereitet', 'Plan wird finalisiert'],
|
||||
testimonial: '„GreenLens hat meine Geigenfeige gerettet. Die täglichen Routinen sind unglaublich präzise."',
|
||||
author: 'Elena R.',
|
||||
rating: '4,8 APP-STORE-BEWERTUNG',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
status: 'Personalizando tu plan de cuidados…',
|
||||
steps: ['Analizando tus respuestas', 'Creando tu plan de cuidados', 'Preparando tus créditos de escaneo', 'Finalizando tu plan'],
|
||||
testimonial: '"GreenLens salvó mi ficus lyrata. Las rutinas diarias son increíblemente precisas."',
|
||||
author: 'Elena R.',
|
||||
rating: '4.8 VALORACIÓN EN APP STORE',
|
||||
};
|
||||
}
|
||||
return {
|
||||
status: 'Personalizing your care plan…',
|
||||
steps: ['Analyzing your answers', 'Building your care plan', 'Preparing your scan credits', 'Finalizing your plan'],
|
||||
testimonial: '"GreenLens completely saved my Fiddle Leaf Fig. The daily routines feel incredibly precise."',
|
||||
author: 'Elena R.',
|
||||
rating: '4.8 APP STORE RATING',
|
||||
};
|
||||
};
|
||||
|
||||
const STEP_THRESHOLDS = [25, 50, 75, 95];
|
||||
const RING_SIZE = 150;
|
||||
const RING_STROKE_WIDTH = 7;
|
||||
const RING_RADIUS = (RING_SIZE - RING_STROKE_WIDTH) / 2;
|
||||
const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
|
||||
|
||||
const AnimatedCircle = Animated.createAnimatedComponent(Circle);
|
||||
|
||||
export default function OnboardingPersonalizingScreen() {
|
||||
const { language, isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const posthog = useSafeAnalytics();
|
||||
const copy = getCopy(language);
|
||||
const progress = useRef(new Animated.Value(0)).current;
|
||||
const [percent, setPercent] = useState(0);
|
||||
const navigated = useRef(false);
|
||||
|
||||
const strokeDashoffset = progress.interpolate({
|
||||
inputRange: [0, 100],
|
||||
outputRange: [RING_CIRCUMFERENCE, 0],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_personalizing_viewed');
|
||||
const listener = progress.addListener(({ value }) => setPercent(Math.round(value)));
|
||||
Animated.timing(progress, {
|
||||
toValue: 100,
|
||||
duration: 6000,
|
||||
easing: Easing.inOut(Easing.cubic),
|
||||
useNativeDriver: false,
|
||||
}).start(({ finished }) => {
|
||||
if (finished && !navigated.current) {
|
||||
navigated.current = true;
|
||||
setTimeout(() => {
|
||||
posthog.capture('paywall_opened', { source: 'onboarding' });
|
||||
router.replace('/profile/billing?view=paywall&context=onboarding');
|
||||
}, 450);
|
||||
}
|
||||
});
|
||||
return () => progress.removeListener(listener);
|
||||
}, [progress, posthog]);
|
||||
|
||||
return (
|
||||
<SafeAreaView style={[styles.safe, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
|
||||
<Text style={[styles.percent, { color: colors.primary }]}>{percent}%</Text>
|
||||
<View style={styles.ringWrap}>
|
||||
<Svg width={RING_SIZE} height={RING_SIZE} style={StyleSheet.absoluteFill}>
|
||||
<Circle
|
||||
cx={RING_SIZE / 2}
|
||||
cy={RING_SIZE / 2}
|
||||
r={RING_RADIUS}
|
||||
stroke={colors.primarySoft}
|
||||
strokeWidth={RING_STROKE_WIDTH}
|
||||
fill="none"
|
||||
/>
|
||||
<AnimatedCircle
|
||||
cx={RING_SIZE / 2}
|
||||
cy={RING_SIZE / 2}
|
||||
r={RING_RADIUS}
|
||||
stroke={colors.primary}
|
||||
strokeWidth={RING_STROKE_WIDTH}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${RING_CIRCUMFERENCE}, ${RING_CIRCUMFERENCE}`}
|
||||
strokeDashoffset={strokeDashoffset}
|
||||
rotation="-90"
|
||||
originX={RING_SIZE / 2}
|
||||
originY={RING_SIZE / 2}
|
||||
/>
|
||||
</Svg>
|
||||
<Image source={require('../../assets/paywall_scan_background.png')} style={styles.ringImage} />
|
||||
</View>
|
||||
<View style={[styles.statusPill, { backgroundColor: colors.surfaceMuted }]}>
|
||||
<Ionicons name="sync-outline" size={15} color={colors.textSecondary} />
|
||||
<Text style={[styles.statusText, { color: colors.textSecondary }]}>{copy.status}</Text>
|
||||
</View>
|
||||
<View style={styles.checklist}>
|
||||
{copy.steps.map((label, index) => {
|
||||
const done = percent >= STEP_THRESHOLDS[index];
|
||||
return (
|
||||
<View key={label} style={styles.checkRow}>
|
||||
<Ionicons
|
||||
name={done ? 'checkmark-circle' : 'ellipse-outline'}
|
||||
size={24}
|
||||
color={done ? colors.primary : colors.border}
|
||||
/>
|
||||
<Text style={[styles.checkLabel, { color: done ? colors.text : colors.textMuted }]}>{label}</Text>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
<View style={[styles.testimonialCard, { backgroundColor: colors.surface }]}>
|
||||
<View style={styles.testimonialHeader}>
|
||||
<Text style={[styles.testimonialAuthor, { color: colors.text }]}>{copy.author}</Text>
|
||||
<View style={styles.starsRow}>
|
||||
{[0, 1, 2, 3, 4].map((i) => <Ionicons key={i} name="star" size={13} color="#f5c04e" />)}
|
||||
</View>
|
||||
</View>
|
||||
<Text style={[styles.testimonialText, { color: colors.textSecondary }]}>{copy.testimonial}</Text>
|
||||
</View>
|
||||
<View style={[styles.ratingBadge, { borderColor: colors.primary }]}>
|
||||
<Ionicons name="ribbon-outline" size={16} color={colors.primary} />
|
||||
<Text style={[styles.ratingText, { color: colors.primary }]}>{copy.rating}</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
safe: { flex: 1, alignItems: 'center', paddingHorizontal: 24, paddingTop: 30 },
|
||||
percent: { fontSize: 56, fontWeight: '900', marginBottom: 16 },
|
||||
ringWrap: { width: 150, height: 150, alignItems: 'center', justifyContent: 'center', marginBottom: 22 },
|
||||
ringImage: { width: 112, height: 112, borderRadius: 56 },
|
||||
statusPill: { flexDirection: 'row', alignItems: 'center', gap: 8, borderRadius: 999, paddingHorizontal: 18, paddingVertical: 11, marginBottom: 26 },
|
||||
statusText: { fontSize: 14.5, fontWeight: '800' },
|
||||
checklist: { alignSelf: 'stretch', gap: 15, marginBottom: 26, paddingHorizontal: 8 },
|
||||
checkRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
checkLabel: { fontSize: 16.5, fontWeight: '700' },
|
||||
testimonialCard: { alignSelf: 'stretch', borderRadius: 18, padding: 16, marginBottom: 14 },
|
||||
testimonialHeader: { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 6 },
|
||||
testimonialAuthor: { fontSize: 14.5, fontWeight: '800' },
|
||||
starsRow: { flexDirection: 'row', gap: 2 },
|
||||
testimonialText: { fontSize: 14, lineHeight: 20, fontStyle: 'italic' },
|
||||
ratingBadge: { flexDirection: 'row', alignItems: 'center', gap: 7, borderWidth: 1.5, borderRadius: 999, paddingHorizontal: 16, paddingVertical: 9 },
|
||||
ratingText: { fontSize: 12.5, fontWeight: '900', letterSpacing: 0.6 },
|
||||
});
|
||||
|
||||
@@ -1,495 +1,495 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Image, 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 { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { Language } from '../../types';
|
||||
|
||||
type ColorsType = ReturnType<typeof useColors>;
|
||||
|
||||
const getSlidesCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Scanne jede Pflanze',
|
||||
body: 'Richte die Kamera auf eine Pflanze und GreenLens erkennt sie in Sekunden.',
|
||||
},
|
||||
{
|
||||
title: 'Health Check & Pflegeplan',
|
||||
body: 'GreenLens erkennt Probleme früh und erstellt deinen Rettungsplan.',
|
||||
},
|
||||
{
|
||||
title: 'Nie mehr Gießen vergessen',
|
||||
body: 'Smarte Erinnerungen und deine Pflanzen-Bibliothek halten alles im Blick.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Health Check',
|
||||
overwateringDetected: 'Überwässerung erkannt',
|
||||
rescuePlanReady: '7-Tage-Rettungsplan bereit',
|
||||
waterReminder: 'Monstera gießen — heute',
|
||||
fertilizeReminder: 'Basilikum düngen — in 3 Tagen',
|
||||
continueLabel: 'Weiter',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Escanea cualquier planta',
|
||||
body: 'Apunta la cámara a una planta y GreenLens la identifica en segundos.',
|
||||
},
|
||||
{
|
||||
title: 'Chequeo de salud y plan de cuidados',
|
||||
body: 'GreenLens detecta problemas a tiempo y crea tu plan de rescate.',
|
||||
},
|
||||
{
|
||||
title: 'No olvides regar nunca más',
|
||||
body: 'Recordatorios inteligentes y tu biblioteca de plantas lo mantienen todo al día.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Chequeo de salud',
|
||||
overwateringDetected: 'Exceso de riego detectado',
|
||||
rescuePlanReady: 'Plan de rescate de 7 días listo',
|
||||
waterReminder: 'Regar Monstera — hoy',
|
||||
fertilizeReminder: 'Abonar albahaca — en 3 días',
|
||||
continueLabel: 'Continuar',
|
||||
};
|
||||
}
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Scan Any Plant',
|
||||
body: 'Point your camera at a plant and GreenLens identifies it in seconds.',
|
||||
},
|
||||
{
|
||||
title: 'Health Check & Care Plan',
|
||||
body: 'GreenLens spots problems early and builds a rescue plan for you.',
|
||||
},
|
||||
{
|
||||
title: 'Never Forget Watering',
|
||||
body: 'Smart reminders and your personal plant library keep everything on track.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Health Check',
|
||||
overwateringDetected: 'Overwatering detected',
|
||||
rescuePlanReady: '7-day rescue plan ready',
|
||||
waterReminder: 'Water Monstera — today',
|
||||
fertilizeReminder: 'Fertilize Basil — in 3 days',
|
||||
continueLabel: 'Continue',
|
||||
};
|
||||
};
|
||||
|
||||
function ScanFrameOverlay({ resultChip, colors }: { resultChip: string; colors: ColorsType }) {
|
||||
return (
|
||||
<>
|
||||
<View style={styles.scanFrameWrap} pointerEvents="none">
|
||||
<View style={[styles.cornerTL, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerTR, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerBL, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerBR, { borderColor: colors.primary }]} />
|
||||
</View>
|
||||
<View style={styles.resultChip}>
|
||||
<Ionicons name="leaf" size={15} color={colors.primary} />
|
||||
<Text style={styles.resultChipText}>{resultChip}</Text>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function HealthCardOverlay({
|
||||
label,
|
||||
overwateringDetected,
|
||||
rescuePlanReady,
|
||||
}: {
|
||||
label: string;
|
||||
overwateringDetected: string;
|
||||
rescuePlanReady: string;
|
||||
}) {
|
||||
return (
|
||||
<View style={styles.healthCard}>
|
||||
<View style={styles.healthCardHeader}>
|
||||
<View style={styles.healthCardIcon}>
|
||||
<Ionicons name="medkit" size={16} color="#C62828" />
|
||||
</View>
|
||||
<Text style={styles.healthCardTitle}>{label}</Text>
|
||||
</View>
|
||||
<View style={[styles.healthRow, styles.healthRowWarning]}>
|
||||
<Ionicons name="warning" size={15} color="#C62828" />
|
||||
<Text style={styles.healthRowWarningText}>{overwateringDetected}</Text>
|
||||
</View>
|
||||
<View style={[styles.healthRow, styles.healthRowSuccess]}>
|
||||
<Ionicons name="checkmark-circle" size={15} color="#2e7d32" />
|
||||
<Text style={styles.healthRowSuccessText}>{rescuePlanReady}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function ReminderChipsOverlay({ waterReminder, fertilizeReminder }: { waterReminder: string; fertilizeReminder: string }) {
|
||||
const [waterLabel, waterMeta] = splitReminder(waterReminder);
|
||||
const [fertilizeLabel, fertilizeMeta] = splitReminder(fertilizeReminder);
|
||||
return (
|
||||
<>
|
||||
<View style={[styles.reminderChip, styles.reminderChipTop]}>
|
||||
<View style={[styles.reminderIcon, { backgroundColor: '#dff2e6' }]}>
|
||||
<Ionicons name="water" size={16} color="#2e7d32" />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.reminderLabel}>{waterLabel}</Text>
|
||||
<Text style={styles.reminderMeta}>{waterMeta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[styles.reminderChip, styles.reminderChipBottom]}>
|
||||
<View style={[styles.reminderIcon, { backgroundColor: '#e3f3c8' }]}>
|
||||
<Ionicons name="leaf" size={16} color="#558b2f" />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.reminderLabel}>{fertilizeLabel}</Text>
|
||||
<Text style={styles.reminderMeta}>{fertilizeMeta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Splits "Water Monstera — today" into ["Water Monstera", "today"] for a two-line chip.
|
||||
function splitReminder(text: string): [string, string] {
|
||||
const parts = text.split('—').map((part) => part.trim());
|
||||
if (parts.length === 2) return [parts[0], parts[1]];
|
||||
return [text, ''];
|
||||
}
|
||||
|
||||
export default function OnboardingSlidesScreen() {
|
||||
const router = useRouter();
|
||||
const { language, isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const posthog = useSafeAnalytics();
|
||||
const [page, setPage] = useState(0);
|
||||
const copy = getSlidesCopy(language);
|
||||
const slide = copy.slides[page];
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_slide_viewed', { index: page });
|
||||
}, [page, posthog]);
|
||||
|
||||
const next = () => {
|
||||
if (page < copy.slides.length - 1) {
|
||||
setPage(page + 1);
|
||||
} else {
|
||||
router.replace('/onboarding/source');
|
||||
}
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
if (page > 0) {
|
||||
setPage(page - 1);
|
||||
} else {
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
|
||||
<View style={styles.imageArea}>
|
||||
<Image
|
||||
source={
|
||||
page === 0
|
||||
? require('../../assets/paywall_scan_background.png')
|
||||
: page === 1
|
||||
? require('../../assets/onboarding_health_scan_mockup.png')
|
||||
: require('../../assets/welcome_botanical_header.png')
|
||||
}
|
||||
style={styles.image}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<SafeAreaView style={styles.imageSafeArea} edges={['top']}>
|
||||
<TouchableOpacity onPress={back} style={styles.backBtn} activeOpacity={0.85}>
|
||||
<Ionicons name="arrow-back" size={20} color="#1f2520" />
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
{page === 0 && <ScanFrameOverlay resultChip={copy.resultChip} colors={colors} />}
|
||||
{page === 1 && (
|
||||
<HealthCardOverlay
|
||||
label={copy.healthCheckLabel}
|
||||
overwateringDetected={copy.overwateringDetected}
|
||||
rescuePlanReady={copy.rescuePlanReady}
|
||||
/>
|
||||
)}
|
||||
{page === 2 && (
|
||||
<ReminderChipsOverlay waterReminder={copy.waterReminder} fertilizeReminder={copy.fertilizeReminder} />
|
||||
)}
|
||||
</View>
|
||||
<View style={[styles.sheet, { backgroundColor: colors.surface }]}>
|
||||
<Text style={[styles.title, { color: colors.text }]}>{slide.title}</Text>
|
||||
<Text style={[styles.body, { color: colors.textSecondary }]}>{slide.body}</Text>
|
||||
<View style={styles.dots}>
|
||||
{copy.slides.map((_, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.dot,
|
||||
index === page
|
||||
? [styles.dotActive, { backgroundColor: colors.primary }]
|
||||
: { backgroundColor: colors.border },
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.cta, { backgroundColor: colors.primary }]}
|
||||
onPress={next}
|
||||
activeOpacity={0.86}
|
||||
>
|
||||
<Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.continueLabel}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
imageArea: {
|
||||
height: '58%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
image: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
},
|
||||
imageSafeArea: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
backBtn: {
|
||||
marginLeft: 16,
|
||||
marginTop: 8,
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 19,
|
||||
backgroundColor: 'rgba(255,255,255,0.85)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
// Scan frame overlay (slide 1)
|
||||
scanFrameWrap: {
|
||||
position: 'absolute',
|
||||
top: '22%',
|
||||
left: '20%',
|
||||
right: '20%',
|
||||
bottom: '26%',
|
||||
},
|
||||
cornerTL: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderTopWidth: 4,
|
||||
borderLeftWidth: 4,
|
||||
borderTopLeftRadius: 8,
|
||||
},
|
||||
cornerTR: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderTopWidth: 4,
|
||||
borderRightWidth: 4,
|
||||
borderTopRightRadius: 8,
|
||||
},
|
||||
cornerBL: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderBottomWidth: 4,
|
||||
borderLeftWidth: 4,
|
||||
borderBottomLeftRadius: 8,
|
||||
},
|
||||
cornerBR: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderBottomWidth: 4,
|
||||
borderRightWidth: 4,
|
||||
borderBottomRightRadius: 8,
|
||||
},
|
||||
resultChip: {
|
||||
position: 'absolute',
|
||||
bottom: '10%',
|
||||
left: 20,
|
||||
right: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255,255,255,0.94)',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
resultChipText: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#1f2520',
|
||||
},
|
||||
// Health card overlay (slide 2)
|
||||
healthCard: {
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
borderRadius: 18,
|
||||
padding: 14,
|
||||
gap: 8,
|
||||
},
|
||||
healthCardHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 2,
|
||||
},
|
||||
healthCardIcon: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#fdeaea',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
healthCardTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
color: '#1f2520',
|
||||
},
|
||||
healthRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
healthRowWarning: {
|
||||
backgroundColor: '#fdeaea',
|
||||
},
|
||||
healthRowWarningText: {
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
color: '#C62828',
|
||||
},
|
||||
healthRowSuccess: {
|
||||
backgroundColor: '#e8f3e3',
|
||||
},
|
||||
healthRowSuccessText: {
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
color: '#2e7d32',
|
||||
},
|
||||
// Reminder chips overlay (slide 3)
|
||||
reminderChip: {
|
||||
position: 'absolute',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
borderRadius: 999,
|
||||
paddingVertical: 8,
|
||||
paddingRight: 18,
|
||||
paddingLeft: 8,
|
||||
},
|
||||
reminderChipTop: {
|
||||
top: '24%',
|
||||
right: 20,
|
||||
},
|
||||
reminderChipBottom: {
|
||||
top: '42%',
|
||||
left: 20,
|
||||
},
|
||||
reminderIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
reminderLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
color: '#1f2520',
|
||||
},
|
||||
reminderMeta: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#5a8a3d',
|
||||
},
|
||||
// Bottom sheet
|
||||
sheet: {
|
||||
flex: 1,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
marginTop: -24,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 32,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 30,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
body: {
|
||||
fontSize: 15.5,
|
||||
lineHeight: 22,
|
||||
textAlign: 'center',
|
||||
maxWidth: 320,
|
||||
marginBottom: 20,
|
||||
},
|
||||
dots: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 'auto',
|
||||
},
|
||||
dot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
dotActive: {
|
||||
width: 26,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
cta: {
|
||||
alignSelf: 'stretch',
|
||||
height: 58,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
ctaText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '800',
|
||||
},
|
||||
});
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Image, 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 { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { Language } from '../../types';
|
||||
|
||||
type ColorsType = ReturnType<typeof useColors>;
|
||||
|
||||
const getSlidesCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Scanne jede Pflanze',
|
||||
body: 'Richte die Kamera auf eine Pflanze und GreenLens erkennt sie in Sekunden.',
|
||||
},
|
||||
{
|
||||
title: 'Health Check & Pflegeplan',
|
||||
body: 'GreenLens erkennt Probleme früh und erstellt deinen Rettungsplan.',
|
||||
},
|
||||
{
|
||||
title: 'Nie mehr Gießen vergessen',
|
||||
body: 'Smarte Erinnerungen und deine Pflanzen-Bibliothek halten alles im Blick.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Health Check',
|
||||
overwateringDetected: 'Überwässerung erkannt',
|
||||
rescuePlanReady: '7-Tage-Rettungsplan bereit',
|
||||
waterReminder: 'Monstera gießen — heute',
|
||||
fertilizeReminder: 'Basilikum düngen — in 3 Tagen',
|
||||
continueLabel: 'Weiter',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Escanea cualquier planta',
|
||||
body: 'Apunta la cámara a una planta y GreenLens la identifica en segundos.',
|
||||
},
|
||||
{
|
||||
title: 'Chequeo de salud y plan de cuidados',
|
||||
body: 'GreenLens detecta problemas a tiempo y crea tu plan de rescate.',
|
||||
},
|
||||
{
|
||||
title: 'No olvides regar nunca más',
|
||||
body: 'Recordatorios inteligentes y tu biblioteca de plantas lo mantienen todo al día.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Chequeo de salud',
|
||||
overwateringDetected: 'Exceso de riego detectado',
|
||||
rescuePlanReady: 'Plan de rescate de 7 días listo',
|
||||
waterReminder: 'Regar Monstera — hoy',
|
||||
fertilizeReminder: 'Abonar albahaca — en 3 días',
|
||||
continueLabel: 'Continuar',
|
||||
};
|
||||
}
|
||||
return {
|
||||
slides: [
|
||||
{
|
||||
title: 'Scan Any Plant',
|
||||
body: 'Point your camera at a plant and GreenLens identifies it in seconds.',
|
||||
},
|
||||
{
|
||||
title: 'Health Check & Care Plan',
|
||||
body: 'GreenLens spots problems early and builds a rescue plan for you.',
|
||||
},
|
||||
{
|
||||
title: 'Never Forget Watering',
|
||||
body: 'Smart reminders and your personal plant library keep everything on track.',
|
||||
},
|
||||
],
|
||||
resultChip: 'Monstera · 98%',
|
||||
healthCheckLabel: 'Health Check',
|
||||
overwateringDetected: 'Overwatering detected',
|
||||
rescuePlanReady: '7-day rescue plan ready',
|
||||
waterReminder: 'Water Monstera — today',
|
||||
fertilizeReminder: 'Fertilize Basil — in 3 days',
|
||||
continueLabel: 'Continue',
|
||||
};
|
||||
};
|
||||
|
||||
function ScanFrameOverlay({ resultChip, colors }: { resultChip: string; colors: ColorsType }) {
|
||||
return (
|
||||
<>
|
||||
<View style={styles.scanFrameWrap} pointerEvents="none">
|
||||
<View style={[styles.cornerTL, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerTR, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerBL, { borderColor: colors.primary }]} />
|
||||
<View style={[styles.cornerBR, { borderColor: colors.primary }]} />
|
||||
</View>
|
||||
<View style={styles.resultChip}>
|
||||
<Ionicons name="leaf" size={15} color={colors.primary} />
|
||||
<Text style={styles.resultChipText}>{resultChip}</Text>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function HealthCardOverlay({
|
||||
label,
|
||||
overwateringDetected,
|
||||
rescuePlanReady,
|
||||
}: {
|
||||
label: string;
|
||||
overwateringDetected: string;
|
||||
rescuePlanReady: string;
|
||||
}) {
|
||||
return (
|
||||
<View style={styles.healthCard}>
|
||||
<View style={styles.healthCardHeader}>
|
||||
<View style={styles.healthCardIcon}>
|
||||
<Ionicons name="medkit" size={16} color="#C62828" />
|
||||
</View>
|
||||
<Text style={styles.healthCardTitle}>{label}</Text>
|
||||
</View>
|
||||
<View style={[styles.healthRow, styles.healthRowWarning]}>
|
||||
<Ionicons name="warning" size={15} color="#C62828" />
|
||||
<Text style={styles.healthRowWarningText}>{overwateringDetected}</Text>
|
||||
</View>
|
||||
<View style={[styles.healthRow, styles.healthRowSuccess]}>
|
||||
<Ionicons name="checkmark-circle" size={15} color="#2e7d32" />
|
||||
<Text style={styles.healthRowSuccessText}>{rescuePlanReady}</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function ReminderChipsOverlay({ waterReminder, fertilizeReminder }: { waterReminder: string; fertilizeReminder: string }) {
|
||||
const [waterLabel, waterMeta] = splitReminder(waterReminder);
|
||||
const [fertilizeLabel, fertilizeMeta] = splitReminder(fertilizeReminder);
|
||||
return (
|
||||
<>
|
||||
<View style={[styles.reminderChip, styles.reminderChipTop]}>
|
||||
<View style={[styles.reminderIcon, { backgroundColor: '#dff2e6' }]}>
|
||||
<Ionicons name="water" size={16} color="#2e7d32" />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.reminderLabel}>{waterLabel}</Text>
|
||||
<Text style={styles.reminderMeta}>{waterMeta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
<View style={[styles.reminderChip, styles.reminderChipBottom]}>
|
||||
<View style={[styles.reminderIcon, { backgroundColor: '#e3f3c8' }]}>
|
||||
<Ionicons name="leaf" size={16} color="#558b2f" />
|
||||
</View>
|
||||
<View>
|
||||
<Text style={styles.reminderLabel}>{fertilizeLabel}</Text>
|
||||
<Text style={styles.reminderMeta}>{fertilizeMeta}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Splits "Water Monstera — today" into ["Water Monstera", "today"] for a two-line chip.
|
||||
function splitReminder(text: string): [string, string] {
|
||||
const parts = text.split('—').map((part) => part.trim());
|
||||
if (parts.length === 2) return [parts[0], parts[1]];
|
||||
return [text, ''];
|
||||
}
|
||||
|
||||
export default function OnboardingSlidesScreen() {
|
||||
const router = useRouter();
|
||||
const { language, isDarkMode, colorPalette } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const posthog = useSafeAnalytics();
|
||||
const [page, setPage] = useState(0);
|
||||
const copy = getSlidesCopy(language);
|
||||
const slide = copy.slides[page];
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_slide_viewed', { index: page });
|
||||
}, [page, posthog]);
|
||||
|
||||
const next = () => {
|
||||
if (page < copy.slides.length - 1) {
|
||||
setPage(page + 1);
|
||||
} else {
|
||||
router.replace('/onboarding/source');
|
||||
}
|
||||
};
|
||||
|
||||
const back = () => {
|
||||
if (page > 0) {
|
||||
setPage(page - 1);
|
||||
} else {
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}>
|
||||
<View style={styles.imageArea}>
|
||||
<Image
|
||||
source={
|
||||
page === 0
|
||||
? require('../../assets/paywall_scan_background.png')
|
||||
: page === 1
|
||||
? require('../../assets/onboarding_health_scan_mockup.png')
|
||||
: require('../../assets/welcome_botanical_header.png')
|
||||
}
|
||||
style={styles.image}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<SafeAreaView style={styles.imageSafeArea} edges={['top']}>
|
||||
<TouchableOpacity onPress={back} style={styles.backBtn} activeOpacity={0.85}>
|
||||
<Ionicons name="arrow-back" size={20} color="#1f2520" />
|
||||
</TouchableOpacity>
|
||||
</SafeAreaView>
|
||||
{page === 0 && <ScanFrameOverlay resultChip={copy.resultChip} colors={colors} />}
|
||||
{page === 1 && (
|
||||
<HealthCardOverlay
|
||||
label={copy.healthCheckLabel}
|
||||
overwateringDetected={copy.overwateringDetected}
|
||||
rescuePlanReady={copy.rescuePlanReady}
|
||||
/>
|
||||
)}
|
||||
{page === 2 && (
|
||||
<ReminderChipsOverlay waterReminder={copy.waterReminder} fertilizeReminder={copy.fertilizeReminder} />
|
||||
)}
|
||||
</View>
|
||||
<View style={[styles.sheet, { backgroundColor: colors.surface }]}>
|
||||
<Text style={[styles.title, { color: colors.text }]}>{slide.title}</Text>
|
||||
<Text style={[styles.body, { color: colors.textSecondary }]}>{slide.body}</Text>
|
||||
<View style={styles.dots}>
|
||||
{copy.slides.map((_, index) => (
|
||||
<View
|
||||
key={index}
|
||||
style={[
|
||||
styles.dot,
|
||||
index === page
|
||||
? [styles.dotActive, { backgroundColor: colors.primary }]
|
||||
: { backgroundColor: colors.border },
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</View>
|
||||
<TouchableOpacity
|
||||
style={[styles.cta, { backgroundColor: colors.primary }]}
|
||||
onPress={next}
|
||||
activeOpacity={0.86}
|
||||
>
|
||||
<Text style={[styles.ctaText, { color: colors.onPrimary }]}>{copy.continueLabel}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
imageArea: {
|
||||
height: '58%',
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
image: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
position: 'absolute',
|
||||
},
|
||||
imageSafeArea: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
},
|
||||
backBtn: {
|
||||
marginLeft: 16,
|
||||
marginTop: 8,
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 19,
|
||||
backgroundColor: 'rgba(255,255,255,0.85)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
// Scan frame overlay (slide 1)
|
||||
scanFrameWrap: {
|
||||
position: 'absolute',
|
||||
top: '22%',
|
||||
left: '20%',
|
||||
right: '20%',
|
||||
bottom: '26%',
|
||||
},
|
||||
cornerTL: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderTopWidth: 4,
|
||||
borderLeftWidth: 4,
|
||||
borderTopLeftRadius: 8,
|
||||
},
|
||||
cornerTR: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderTopWidth: 4,
|
||||
borderRightWidth: 4,
|
||||
borderTopRightRadius: 8,
|
||||
},
|
||||
cornerBL: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderBottomWidth: 4,
|
||||
borderLeftWidth: 4,
|
||||
borderBottomLeftRadius: 8,
|
||||
},
|
||||
cornerBR: {
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderBottomWidth: 4,
|
||||
borderRightWidth: 4,
|
||||
borderBottomRightRadius: 8,
|
||||
},
|
||||
resultChip: {
|
||||
position: 'absolute',
|
||||
bottom: '10%',
|
||||
left: 20,
|
||||
right: 20,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255,255,255,0.94)',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
resultChipText: {
|
||||
fontSize: 15,
|
||||
fontWeight: '700',
|
||||
color: '#1f2520',
|
||||
},
|
||||
// Health card overlay (slide 2)
|
||||
healthCard: {
|
||||
position: 'absolute',
|
||||
bottom: 16,
|
||||
left: 16,
|
||||
right: 16,
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
borderRadius: 18,
|
||||
padding: 14,
|
||||
gap: 8,
|
||||
},
|
||||
healthCardHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 2,
|
||||
},
|
||||
healthCardIcon: {
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
backgroundColor: '#fdeaea',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
healthCardTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '800',
|
||||
color: '#1f2520',
|
||||
},
|
||||
healthRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
borderRadius: 10,
|
||||
paddingHorizontal: 10,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
healthRowWarning: {
|
||||
backgroundColor: '#fdeaea',
|
||||
},
|
||||
healthRowWarningText: {
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
color: '#C62828',
|
||||
},
|
||||
healthRowSuccess: {
|
||||
backgroundColor: '#e8f3e3',
|
||||
},
|
||||
healthRowSuccessText: {
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
color: '#2e7d32',
|
||||
},
|
||||
// Reminder chips overlay (slide 3)
|
||||
reminderChip: {
|
||||
position: 'absolute',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
backgroundColor: 'rgba(255,255,255,0.96)',
|
||||
borderRadius: 999,
|
||||
paddingVertical: 8,
|
||||
paddingRight: 18,
|
||||
paddingLeft: 8,
|
||||
},
|
||||
reminderChipTop: {
|
||||
top: '24%',
|
||||
right: 20,
|
||||
},
|
||||
reminderChipBottom: {
|
||||
top: '42%',
|
||||
left: 20,
|
||||
},
|
||||
reminderIcon: {
|
||||
width: 32,
|
||||
height: 32,
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
reminderLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '800',
|
||||
color: '#1f2520',
|
||||
},
|
||||
reminderMeta: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
color: '#5a8a3d',
|
||||
},
|
||||
// Bottom sheet
|
||||
sheet: {
|
||||
flex: 1,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
marginTop: -24,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 32,
|
||||
alignItems: 'center',
|
||||
},
|
||||
title: {
|
||||
fontSize: 30,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
body: {
|
||||
fontSize: 15.5,
|
||||
lineHeight: 22,
|
||||
textAlign: 'center',
|
||||
maxWidth: 320,
|
||||
marginBottom: 20,
|
||||
},
|
||||
dots: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
marginBottom: 'auto',
|
||||
},
|
||||
dot: {
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
dotActive: {
|
||||
width: 26,
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
},
|
||||
cta: {
|
||||
alignSelf: 'stretch',
|
||||
height: 58,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 24,
|
||||
},
|
||||
ctaText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '800',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -1,74 +1,74 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
export default function OnboardingSourceScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedSource, setSelectedSource] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
revops_signal: SOURCE_OPTIONS.find((option) => option.id === source)?.signal ?? 'skipped',
|
||||
});
|
||||
router.replace('/onboarding/goal');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
import React, { useState } from 'react';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { OnboardingQuestion, QuestionOption } from '../../components/OnboardingQuestion';
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ 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' },
|
||||
];
|
||||
|
||||
export default function OnboardingSourceScreen() {
|
||||
const router = useRouter();
|
||||
const posthog = useSafeAnalytics();
|
||||
const { session, isDarkMode, colorPalette, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const [selectedSource, setSelectedSource] = useState<string | null>(null);
|
||||
|
||||
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',
|
||||
revops_signal: SOURCE_OPTIONS.find((option) => option.id === source)?.signal ?? 'skipped',
|
||||
});
|
||||
router.replace('/onboarding/goal');
|
||||
};
|
||||
|
||||
return (
|
||||
<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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user