563 lines
18 KiB
TypeScript
563 lines
18 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
|
import { Image, ScrollView, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
|
|
import { SafeAreaView, useSafeAreaInsets } 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: [
|
|
{
|
|
// Slide 1 = Triage. Bewusst NICHT die Identifikation: die kann Google
|
|
// Lens gratis. Der Pitch startet erst nach der Identifikation.
|
|
title: 'Was ist mit meiner Pflanze los?',
|
|
body: 'Fotografiere das Symptom. Du bekommst die wahrscheinlichsten Ursachen - und was du prüfen sollst.',
|
|
},
|
|
{
|
|
title: 'Ein konkreter Plan. Für diese Pflanze.',
|
|
body: 'Sofortmaßnahme, 7-Tage-Plan, und danach die Frage: Hat es gewirkt?',
|
|
},
|
|
{
|
|
// Der Screen, den keine Konkurrenz-App hat. Beantwortet den Einwand
|
|
// "Eine andere App hat mir selbstbewusst etwas Falsches gesagt."
|
|
title: 'Wir sagen dir auch, wenn wir unsicher sind.',
|
|
body: 'Ein Foto zeigt keine Wurzeln und keine Erdfeuchte. Deshalb Wahrscheinlichkeiten statt erfundener Gewissheit.',
|
|
},
|
|
],
|
|
causeTitle: 'Wahrscheinlichste Ursache',
|
|
causePrimary: 'Überwässerung',
|
|
causePrimaryLevel: '64 %',
|
|
causeSecondary: 'Nährstoffmangel',
|
|
causeSecondaryLevel: '41 %',
|
|
checkLabel: 'Prüfe zuerst',
|
|
checkItems: 'Erde 3 cm tief · Abzugslöcher · Blattunterseiten',
|
|
planLabel: '7-Tage-Plan',
|
|
planNow: 'Heute: nicht gießen',
|
|
planFollowUp: 'Tag 7: Wir fragen nach, ob es besser wird',
|
|
uncertainTitle: 'Was ein Foto nicht zeigt',
|
|
uncertainItems: ['Wurzeln', 'Erdfeuchte', 'Vorgeschichte'],
|
|
uncertainNote: 'Deshalb: Wahrscheinlichkeiten statt Diagnose.',
|
|
continueLabel: 'Weiter',
|
|
};
|
|
}
|
|
if (language === 'es') {
|
|
return {
|
|
slides: [
|
|
{
|
|
title: '¿Qué le pasa a mi planta?',
|
|
body: 'Fotografía el síntoma. Recibes las causas más probables - y qué revisar.',
|
|
},
|
|
{
|
|
title: 'Un plan concreto. Para esta planta.',
|
|
body: 'Acción inmediata, plan de 7 días, y luego la pregunta: ¿funcionó?',
|
|
},
|
|
{
|
|
title: 'También te decimos cuándo no estamos seguros.',
|
|
body: 'Una foto no muestra las raíces ni la humedad. Por eso probabilidades, no certezas inventadas.',
|
|
},
|
|
],
|
|
causeTitle: 'Causa más probable',
|
|
causePrimary: 'Exceso de riego',
|
|
causePrimaryLevel: '64 %',
|
|
causeSecondary: 'Falta de nutrientes',
|
|
causeSecondaryLevel: '41 %',
|
|
checkLabel: 'Revisa primero',
|
|
checkItems: 'Sustrato a 3 cm · Drenaje · Reverso de las hojas',
|
|
planLabel: 'Plan de 7 días',
|
|
planNow: 'Hoy: no regar',
|
|
planFollowUp: 'Día 7: preguntamos si va mejor',
|
|
uncertainTitle: 'Lo que una foto no muestra',
|
|
uncertainItems: ['Raíces', 'Humedad', 'Historial'],
|
|
uncertainNote: 'Por eso: probabilidades, no diagnóstico.',
|
|
continueLabel: 'Continuar',
|
|
};
|
|
}
|
|
return {
|
|
slides: [
|
|
{
|
|
title: "What's wrong with my plant?",
|
|
body: 'Photograph the symptom. You get the most likely causes - and what to check.',
|
|
},
|
|
{
|
|
title: 'A concrete plan. For this plant.',
|
|
body: 'Immediate action, a 7-day plan, and then the question: did it work?',
|
|
},
|
|
{
|
|
title: "We also tell you when we're not sure.",
|
|
body: 'A photo cannot show roots or soil moisture. So: probabilities, not invented certainty.',
|
|
},
|
|
],
|
|
causeTitle: 'Most likely cause',
|
|
causePrimary: 'Overwatering',
|
|
causePrimaryLevel: '64%',
|
|
causeSecondary: 'Nutrient deficiency',
|
|
causeSecondaryLevel: '41%',
|
|
checkLabel: 'Check first',
|
|
checkItems: 'Soil 3 cm deep · Drainage holes · Leaf undersides',
|
|
planLabel: '7-day plan',
|
|
planNow: 'Today: do not water',
|
|
planFollowUp: 'Day 7: we ask whether it improved',
|
|
uncertainTitle: 'What a photo cannot show',
|
|
uncertainItems: ['Roots', 'Soil moisture', 'History'],
|
|
uncertainNote: 'So: probabilities, not diagnosis.',
|
|
continueLabel: 'Continue',
|
|
};
|
|
};
|
|
|
|
type SlidesCopy = ReturnType<typeof getSlidesCopy>;
|
|
const OVERLAY_TEXT_MAX_MULTIPLIER = 1.2;
|
|
|
|
/** Slide 1: Ursachen-Ranking statt Prozent-Behauptung. */
|
|
function CauseRankingOverlay({ copy, colors }: { copy: SlidesCopy; 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.healthCard}>
|
|
<Text style={styles.overlayEyebrow} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.causeTitle}
|
|
</Text>
|
|
<View style={[styles.healthRow, styles.healthRowWarning]}>
|
|
<Ionicons name="alert-circle" size={15} color="#C62828" />
|
|
<Text style={styles.healthRowWarningText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.causePrimary} · {copy.causePrimaryLevel}
|
|
</Text>
|
|
</View>
|
|
<View style={[styles.healthRow, styles.healthRowNeutral]}>
|
|
<Ionicons name="help-circle-outline" size={15} color="#6b7280" />
|
|
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.causeSecondary} · {copy.causeSecondaryLevel}
|
|
</Text>
|
|
</View>
|
|
{/* In derselben Karte statt als zweites absolutes Element: zwei frei
|
|
positionierte Overlays ueberlappen sich, sobald Uebersetzungen die
|
|
Karte wachsen lassen. */}
|
|
<View style={styles.checkInline}>
|
|
<Text style={styles.checkChipLabel} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.checkLabel}
|
|
</Text>
|
|
<Text style={styles.checkChipText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.checkItems}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</>
|
|
);
|
|
}
|
|
|
|
/** Slide 2: der Plan inklusive Follow-up - das ist der Kaufgrund. */
|
|
function PlanOverlay({ copy }: { copy: SlidesCopy }) {
|
|
return (
|
|
<View style={styles.healthCard}>
|
|
<View style={styles.healthCardHeader}>
|
|
<View style={styles.healthCardIcon}>
|
|
<Ionicons name="calendar" size={16} color="#2e7d32" />
|
|
</View>
|
|
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.planLabel}
|
|
</Text>
|
|
</View>
|
|
<View style={[styles.healthRow, styles.healthRowSuccess]}>
|
|
<Ionicons name="water-outline" size={15} color="#2e7d32" />
|
|
<Text style={styles.healthRowSuccessText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.planNow}
|
|
</Text>
|
|
</View>
|
|
<View style={[styles.healthRow, styles.healthRowNeutral]}>
|
|
<Ionicons name="chatbubble-ellipses-outline" size={15} color="#6b7280" />
|
|
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.planFollowUp}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
/** Slide 3: die Grenzen des Verfahrens, sichtbar gemacht. */
|
|
function UncertaintyOverlay({ copy }: { copy: SlidesCopy }) {
|
|
return (
|
|
<View style={styles.healthCard}>
|
|
<View style={styles.healthCardHeader}>
|
|
<View style={styles.healthCardIcon}>
|
|
<Ionicons name="eye-off-outline" size={16} color="#6b7280" />
|
|
</View>
|
|
<Text style={styles.healthCardTitle} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.uncertainTitle}
|
|
</Text>
|
|
</View>
|
|
{copy.uncertainItems.map((item) => (
|
|
<View key={item} style={[styles.healthRow, styles.healthRowNeutral]}>
|
|
<Ionicons name="close-circle-outline" size={15} color="#6b7280" />
|
|
<Text style={styles.healthRowNeutralText} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{item}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
<Text style={styles.overlayNote} maxFontSizeMultiplier={OVERLAY_TEXT_MAX_MULTIPLIER}>
|
|
{copy.uncertainNote}
|
|
</Text>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
export default function OnboardingSlidesScreen() {
|
|
const router = useRouter();
|
|
const scrollRef = useRef<ScrollView>(null);
|
|
const { height } = useWindowDimensions();
|
|
const insets = useSafeAreaInsets();
|
|
const compact = height < 700;
|
|
// Das Bild bekommt den Platz, den das Sheet uebrig laesst - aber nie weniger
|
|
// als diese Untergrenze. Feste Prozenthoehen haben bei groesserer
|
|
// System-Schriftgroesse den CTA aus dem Bildschirm geschoben.
|
|
const imageMinHeight = Math.round(height * (compact ? 0.46 : 0.42));
|
|
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(() => {
|
|
scrollRef.current?.scrollTo({ y: 0, animated: false });
|
|
posthog.capture('onboarding_slide_viewed', { index: page, slide: ['triage', 'plan', 'uncertainty'][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 (
|
|
<ScrollView
|
|
ref={scrollRef}
|
|
style={[styles.container, { backgroundColor: isDarkMode ? '#0a110b' : '#f8fbef' }]}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
bounces={false}
|
|
alwaysBounceVertical={false}
|
|
>
|
|
<View style={[styles.imageArea, { minHeight: imageMinHeight }]}>
|
|
<Image
|
|
source={
|
|
page === 0
|
|
? require('../../assets/onboarding_health_scan_mockup_vertical.png')
|
|
: page === 1
|
|
? require('../../assets/paywall_scan_background.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 && <CauseRankingOverlay copy={copy} colors={colors} />}
|
|
{page === 1 && <PlanOverlay copy={copy} />}
|
|
{page === 2 && <UncertaintyOverlay copy={copy} />}
|
|
</View>
|
|
<View
|
|
style={[
|
|
styles.sheet,
|
|
{ backgroundColor: colors.surface, paddingBottom: Math.max(insets.bottom, 16) + 8 },
|
|
]}
|
|
>
|
|
{/* maxFontSizeMultiplier: die Systemschriftgroesse darf die Headline
|
|
vergroessern, aber nicht so weit, dass sie das halbe Sheet frisst. */}
|
|
<Text style={[styles.title, { color: colors.text }]} maxFontSizeMultiplier={1.25}>
|
|
{slide.title}
|
|
</Text>
|
|
<Text style={[styles.body, { color: colors.textSecondary }]} maxFontSizeMultiplier={1.35}>
|
|
{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 }]} maxFontSizeMultiplier={1.2}>
|
|
{copy.continueLabel}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
// Fuellt mindestens den Bildschirm; wird der Inhalt bei sehr grosser
|
|
// Schrift hoeher, scrollt der Screen statt den CTA abzuschneiden.
|
|
flexGrow: 1,
|
|
},
|
|
imageArea: {
|
|
flexGrow: 1,
|
|
flexShrink: 0,
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
},
|
|
image: {
|
|
...StyleSheet.absoluteFillObject,
|
|
},
|
|
imageSafeArea: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 2,
|
|
},
|
|
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,
|
|
},
|
|
// Health card overlay (slide 2)
|
|
healthCard: {
|
|
position: 'absolute',
|
|
bottom: 34,
|
|
left: 16,
|
|
right: 16,
|
|
zIndex: 1,
|
|
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',
|
|
},
|
|
// Neutrale Zeile: bewusst grau, damit "weniger wahrscheinlich" und
|
|
// "was wir nicht sehen" optisch NICHT wie eine Zusage aussehen.
|
|
healthRowNeutral: {
|
|
backgroundColor: '#f1f2f0',
|
|
},
|
|
healthRowNeutralText: {
|
|
fontSize: 13.5,
|
|
fontWeight: '600',
|
|
color: '#5b6158',
|
|
},
|
|
overlayEyebrow: {
|
|
fontSize: 10.5,
|
|
fontWeight: '900',
|
|
letterSpacing: 0.9,
|
|
textTransform: 'uppercase',
|
|
color: '#6b7280',
|
|
marginBottom: 8,
|
|
},
|
|
overlayNote: {
|
|
fontSize: 11.5,
|
|
lineHeight: 15,
|
|
fontWeight: '600',
|
|
color: '#6b7280',
|
|
marginTop: 8,
|
|
},
|
|
checkInline: {
|
|
borderTopWidth: 1,
|
|
borderTopColor: 'rgba(0,0,0,0.08)',
|
|
paddingTop: 9,
|
|
marginTop: 2,
|
|
},
|
|
// Ein Stack statt zwei absoluter Elemente: die Bloecke koennen sich nicht
|
|
// mehr ueberlappen, egal wie lang der uebersetzte Text wird.
|
|
checkChipLabel: {
|
|
fontSize: 10,
|
|
fontWeight: '900',
|
|
letterSpacing: 0.8,
|
|
textTransform: 'uppercase',
|
|
color: '#6b7280',
|
|
marginBottom: 3,
|
|
},
|
|
checkChipText: {
|
|
fontSize: 12.5,
|
|
lineHeight: 17,
|
|
fontWeight: '700',
|
|
color: '#1f2520',
|
|
},
|
|
// Reminder chips overlay (slide 3)
|
|
// Bottom sheet
|
|
sheet: {
|
|
// Hoehe folgt dem Inhalt statt einem festen Prozentwert - sonst haengt es
|
|
// von Textlaenge und Systemschriftgroesse ab, ob der CTA noch passt.
|
|
flexShrink: 0,
|
|
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: 22,
|
|
},
|
|
dot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
},
|
|
dotActive: {
|
|
width: 26,
|
|
height: 8,
|
|
borderRadius: 4,
|
|
},
|
|
cta: {
|
|
alignSelf: 'stretch',
|
|
minHeight: 58,
|
|
paddingVertical: 16,
|
|
borderRadius: 14,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
ctaText: {
|
|
fontSize: 17,
|
|
fontWeight: '800',
|
|
},
|
|
});
|