Testflight
This commit is contained in:
@@ -1,385 +1,385 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
ImageBackground,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import * as AppleAuthentication from 'expo-apple-authentication';
|
||||
import Constants from 'expo-constants';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { AuthService } from '../../services/authService';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const HERO_IMAGE = require('../../assets/welcome_botanical_hero.png');
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Melde dich an und mache mit deiner Pflanzenpflege weiter.',
|
||||
loginCta: 'Anmelden',
|
||||
forgot: 'Passwort vergessen?',
|
||||
forgotTitle: 'Passwort zuruecksetzen',
|
||||
forgotBody: 'Ein Reset-Link ist noch nicht in der App verfuegbar. Bitte nutze aktuell deine gespeicherten Login-Daten.',
|
||||
newHere: 'Neu hier?',
|
||||
create: 'Account erstellen',
|
||||
emailLabel: 'E-Mail',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Inicia sesion para continuar con el cuidado de tus plantas.',
|
||||
loginCta: 'Iniciar sesion',
|
||||
forgot: 'Olvidaste tu contrasena?',
|
||||
forgotTitle: 'Restablecer contrasena',
|
||||
forgotBody: 'El enlace de restablecimiento aun no esta disponible en la app. Usa tus datos guardados por ahora.',
|
||||
newHere: 'Nuevo aqui?',
|
||||
create: 'Crear cuenta',
|
||||
emailLabel: 'Email',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Log in to keep scanning, saving and caring for your plants.',
|
||||
loginCta: 'Log in',
|
||||
forgot: 'Forgot password?',
|
||||
forgotTitle: 'Reset password',
|
||||
forgotBody: 'Password reset is not available in the app yet. Please use your saved login details for now.',
|
||||
newHere: 'New here?',
|
||||
create: 'Create account',
|
||||
emailLabel: 'Email',
|
||||
};
|
||||
};
|
||||
|
||||
export default function LoginScreen() {
|
||||
const { isDarkMode, colorPalette, hydrateSession, language, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const copy = getCopy(language);
|
||||
const posthog = useSafeAnalytics();
|
||||
const isExpoGo = Constants.appOwnership === 'expo';
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [appleAvailable, setAppleAvailable] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isExpoGo) {
|
||||
setAppleAvailable(false);
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
AppleAuthentication.isAvailableAsync()
|
||||
.then((available) => {
|
||||
if (mounted) setAppleAvailable(available);
|
||||
})
|
||||
.catch(() => {
|
||||
if (mounted) setAppleAvailable(false);
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [isExpoGo]);
|
||||
|
||||
const finishAuth = async (session: Awaited<ReturnType<typeof AuthService.login>>) => {
|
||||
await hydrateSession(session);
|
||||
if (session?.userId) {
|
||||
await PreAuthOnboardingService.flushToProfile(session.userId).catch(() => {});
|
||||
}
|
||||
if (session.isNewUser) {
|
||||
await AsyncStorage.setItem('greenlens_show_tour', 'true');
|
||||
}
|
||||
router.replace('/(tabs)');
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!email.trim() || !password) {
|
||||
setError(t.errFillAllFields);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const session = await AuthService.login(email, password);
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e.message === 'USER_NOT_FOUND') {
|
||||
setError(t.errUserNotFound);
|
||||
} else if (e.message === 'WRONG_PASSWORD') {
|
||||
setError(t.errWrongPassword);
|
||||
} else if (e.message === 'BACKEND_URL_MISSING' || e.message === 'NETWORK_ERROR') {
|
||||
setError(t.errNetworkError);
|
||||
} else {
|
||||
setError(t.errLoginFailed);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppleSignIn = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
posthog.capture('apple_login_started', { surface: 'login' });
|
||||
try {
|
||||
const credential = await AppleAuthentication.signInAsync({
|
||||
requestedScopes: [
|
||||
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
|
||||
AppleAuthentication.AppleAuthenticationScope.EMAIL,
|
||||
],
|
||||
});
|
||||
|
||||
if (!credential.identityToken) {
|
||||
throw new Error('APPLE_AUTH_INVALID');
|
||||
}
|
||||
|
||||
const fullName = [
|
||||
credential.fullName?.givenName,
|
||||
credential.fullName?.familyName,
|
||||
].filter(Boolean).join(' ');
|
||||
const session = await AuthService.signInWithApple({
|
||||
identityToken: credential.identityToken,
|
||||
appleUser: credential.user,
|
||||
email: credential.email,
|
||||
name: fullName || undefined,
|
||||
});
|
||||
posthog.capture('apple_login_succeeded', { surface: 'login' });
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e?.code === 'ERR_REQUEST_CANCELED') return;
|
||||
posthog.capture('apple_login_failed', {
|
||||
surface: 'login',
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
setError(e?.message === 'APPLE_BACKEND_UNAVAILABLE'
|
||||
? 'Apple Login ist auf dem Backend noch nicht aktiviert. Bitte Backend neu starten oder deployen.'
|
||||
: t.errAuthError);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.flex, { backgroundColor: isDarkMode ? '#0a110b' : '#fbfaf3' }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
|
||||
<ImageBackground source={HERO_IMAGE} style={styles.hero} imageStyle={styles.heroImage}>
|
||||
<View style={styles.heroOverlay} />
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => router.back()} activeOpacity={0.8}>
|
||||
<Ionicons name="arrow-back" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.heroCopy}>
|
||||
<Text style={styles.heroTitle}>{copy.headline}</Text>
|
||||
<Text style={styles.heroSubline}>{copy.subline}</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: isDarkMode ? '#101a12' : '#fbfaf3' }]}>
|
||||
{appleAvailable ? (
|
||||
<AppleAuthentication.AppleAuthenticationButton
|
||||
buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
|
||||
buttonStyle={isDarkMode
|
||||
? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
|
||||
: AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
|
||||
cornerRadius={14}
|
||||
style={styles.appleButton}
|
||||
onPress={handleAppleSignIn}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<View style={styles.dividerRow}>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
<Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View style={styles.form}>
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.emailLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="mail-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.emailPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
autoComplete="email"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.passwordLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder="Password"
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPassword}
|
||||
autoComplete="password"
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleLogin}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPassword((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.forgotBtn}
|
||||
onPress={() => Alert.alert(copy.forgotTitle, copy.forgotBody)}
|
||||
activeOpacity={0.78}
|
||||
>
|
||||
<Text style={[styles.forgotText, { color: colors.primary }]}>{copy.forgot}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{error ? (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.dangerSoft }]}>
|
||||
<Ionicons name="alert-circle-outline" size={15} color={colors.danger} />
|
||||
<Text style={[styles.errorText, { color: colors.danger }]} selectable>{error}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryBtn, { backgroundColor: colors.primary, opacity: loading ? 0.72 : 1 }]}
|
||||
onPress={handleLogin}
|
||||
activeOpacity={0.84}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.onPrimary} size="small" />
|
||||
) : (
|
||||
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.loginCta}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity style={styles.signupLink} onPress={() => router.replace('/auth/signup')} activeOpacity={0.78}>
|
||||
<Text style={[styles.signupLinkText, { color: colors.textSecondary }]}>
|
||||
{copy.newHere}{' '}
|
||||
<Text style={{ color: colors.primary, fontWeight: '800' }}>{copy.create}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
scroll: { flexGrow: 1 },
|
||||
hero: {
|
||||
minHeight: 290,
|
||||
justifyContent: 'flex-end',
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 56,
|
||||
paddingBottom: 32,
|
||||
},
|
||||
heroImage: { resizeMode: 'cover' },
|
||||
heroOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(5, 12, 7, 0.48)',
|
||||
},
|
||||
backBtn: {
|
||||
position: 'absolute',
|
||||
top: 54,
|
||||
left: 22,
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.28)',
|
||||
},
|
||||
heroCopy: { gap: 10 },
|
||||
heroTitle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 36,
|
||||
lineHeight: 41,
|
||||
fontWeight: '900',
|
||||
},
|
||||
heroSubline: {
|
||||
color: 'rgba(255, 255, 255, 0.88)',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '700',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
marginTop: -24,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
paddingHorizontal: 22,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 34,
|
||||
gap: 14,
|
||||
},
|
||||
appleButton: { width: '100%', height: 56 },
|
||||
dividerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
dividerLine: { flex: 1, height: 1 },
|
||||
dividerText: { fontSize: 12, fontWeight: '800' },
|
||||
form: { gap: 12 },
|
||||
fieldGroup: { gap: 6 },
|
||||
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
|
||||
inputRow: {
|
||||
height: 54,
|
||||
borderWidth: 1,
|
||||
borderRadius: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
inputIcon: { marginRight: 10 },
|
||||
input: { flex: 1, height: 54, fontSize: 15 },
|
||||
eyeBtn: { padding: 5, marginLeft: 6 },
|
||||
forgotBtn: { alignItems: 'flex-end', marginTop: -4 },
|
||||
forgotText: { fontSize: 14, fontWeight: '800' },
|
||||
errorBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
primaryBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryBtnText: { fontSize: 17, fontWeight: '900' },
|
||||
signupLink: { alignItems: 'center', paddingTop: 8 },
|
||||
signupLinkText: { fontSize: 15, fontWeight: '700' },
|
||||
});
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Alert,
|
||||
ImageBackground,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import * as AppleAuthentication from 'expo-apple-authentication';
|
||||
import Constants from 'expo-constants';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { AuthService } from '../../services/authService';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const HERO_IMAGE = require('../../assets/welcome_botanical_hero.png');
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Melde dich an und mache mit deiner Pflanzenpflege weiter.',
|
||||
loginCta: 'Anmelden',
|
||||
forgot: 'Passwort vergessen?',
|
||||
forgotTitle: 'Passwort zuruecksetzen',
|
||||
forgotBody: 'Ein Reset-Link ist noch nicht in der App verfuegbar. Bitte nutze aktuell deine gespeicherten Login-Daten.',
|
||||
newHere: 'Neu hier?',
|
||||
create: 'Account erstellen',
|
||||
emailLabel: 'E-Mail',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Inicia sesion para continuar con el cuidado de tus plantas.',
|
||||
loginCta: 'Iniciar sesion',
|
||||
forgot: 'Olvidaste tu contrasena?',
|
||||
forgotTitle: 'Restablecer contrasena',
|
||||
forgotBody: 'El enlace de restablecimiento aun no esta disponible en la app. Usa tus datos guardados por ahora.',
|
||||
newHere: 'Nuevo aqui?',
|
||||
create: 'Crear cuenta',
|
||||
emailLabel: 'Email',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: 'Welcome back!',
|
||||
subline: 'Log in to keep scanning, saving and caring for your plants.',
|
||||
loginCta: 'Log in',
|
||||
forgot: 'Forgot password?',
|
||||
forgotTitle: 'Reset password',
|
||||
forgotBody: 'Password reset is not available in the app yet. Please use your saved login details for now.',
|
||||
newHere: 'New here?',
|
||||
create: 'Create account',
|
||||
emailLabel: 'Email',
|
||||
};
|
||||
};
|
||||
|
||||
export default function LoginScreen() {
|
||||
const { isDarkMode, colorPalette, hydrateSession, language, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const copy = getCopy(language);
|
||||
const posthog = useSafeAnalytics();
|
||||
const isExpoGo = Constants.appOwnership === 'expo';
|
||||
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [appleAvailable, setAppleAvailable] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (isExpoGo) {
|
||||
setAppleAvailable(false);
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
AppleAuthentication.isAvailableAsync()
|
||||
.then((available) => {
|
||||
if (mounted) setAppleAvailable(available);
|
||||
})
|
||||
.catch(() => {
|
||||
if (mounted) setAppleAvailable(false);
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [isExpoGo]);
|
||||
|
||||
const finishAuth = async (session: Awaited<ReturnType<typeof AuthService.login>>) => {
|
||||
await hydrateSession(session);
|
||||
if (session?.userId) {
|
||||
await PreAuthOnboardingService.flushToProfile(session.userId).catch(() => {});
|
||||
}
|
||||
if (session.isNewUser) {
|
||||
await AsyncStorage.setItem('greenlens_show_tour', 'true');
|
||||
}
|
||||
router.replace('/(tabs)');
|
||||
};
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (!email.trim() || !password) {
|
||||
setError(t.errFillAllFields);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const session = await AuthService.login(email, password);
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e.message === 'USER_NOT_FOUND') {
|
||||
setError(t.errUserNotFound);
|
||||
} else if (e.message === 'WRONG_PASSWORD') {
|
||||
setError(t.errWrongPassword);
|
||||
} else if (e.message === 'BACKEND_URL_MISSING' || e.message === 'NETWORK_ERROR') {
|
||||
setError(t.errNetworkError);
|
||||
} else {
|
||||
setError(t.errLoginFailed);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppleSignIn = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
posthog.capture('apple_login_started', { surface: 'login' });
|
||||
try {
|
||||
const credential = await AppleAuthentication.signInAsync({
|
||||
requestedScopes: [
|
||||
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
|
||||
AppleAuthentication.AppleAuthenticationScope.EMAIL,
|
||||
],
|
||||
});
|
||||
|
||||
if (!credential.identityToken) {
|
||||
throw new Error('APPLE_AUTH_INVALID');
|
||||
}
|
||||
|
||||
const fullName = [
|
||||
credential.fullName?.givenName,
|
||||
credential.fullName?.familyName,
|
||||
].filter(Boolean).join(' ');
|
||||
const session = await AuthService.signInWithApple({
|
||||
identityToken: credential.identityToken,
|
||||
appleUser: credential.user,
|
||||
email: credential.email,
|
||||
name: fullName || undefined,
|
||||
});
|
||||
posthog.capture('apple_login_succeeded', { surface: 'login' });
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e?.code === 'ERR_REQUEST_CANCELED') return;
|
||||
posthog.capture('apple_login_failed', {
|
||||
surface: 'login',
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
setError(e?.message === 'APPLE_BACKEND_UNAVAILABLE'
|
||||
? 'Apple Login ist auf dem Backend noch nicht aktiviert. Bitte Backend neu starten oder deployen.'
|
||||
: t.errAuthError);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.flex, { backgroundColor: isDarkMode ? '#0a110b' : '#fbfaf3' }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
|
||||
<ImageBackground source={HERO_IMAGE} style={styles.hero} imageStyle={styles.heroImage}>
|
||||
<View style={styles.heroOverlay} />
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => router.back()} activeOpacity={0.8}>
|
||||
<Ionicons name="arrow-back" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.heroCopy}>
|
||||
<Text style={styles.heroTitle}>{copy.headline}</Text>
|
||||
<Text style={styles.heroSubline}>{copy.subline}</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: isDarkMode ? '#101a12' : '#fbfaf3' }]}>
|
||||
{appleAvailable ? (
|
||||
<AppleAuthentication.AppleAuthenticationButton
|
||||
buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
|
||||
buttonStyle={isDarkMode
|
||||
? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
|
||||
: AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
|
||||
cornerRadius={14}
|
||||
style={styles.appleButton}
|
||||
onPress={handleAppleSignIn}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<View style={styles.dividerRow}>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
<Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<View style={styles.form}>
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.emailLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="mail-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.emailPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
autoComplete="email"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.passwordLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder="Password"
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPassword}
|
||||
autoComplete="password"
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleLogin}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPassword((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.forgotBtn}
|
||||
onPress={() => Alert.alert(copy.forgotTitle, copy.forgotBody)}
|
||||
activeOpacity={0.78}
|
||||
>
|
||||
<Text style={[styles.forgotText, { color: colors.primary }]}>{copy.forgot}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
{error ? (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.dangerSoft }]}>
|
||||
<Ionicons name="alert-circle-outline" size={15} color={colors.danger} />
|
||||
<Text style={[styles.errorText, { color: colors.danger }]} selectable>{error}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryBtn, { backgroundColor: colors.primary, opacity: loading ? 0.72 : 1 }]}
|
||||
onPress={handleLogin}
|
||||
activeOpacity={0.84}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.onPrimary} size="small" />
|
||||
) : (
|
||||
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.loginCta}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity style={styles.signupLink} onPress={() => router.replace('/auth/signup')} activeOpacity={0.78}>
|
||||
<Text style={[styles.signupLinkText, { color: colors.textSecondary }]}>
|
||||
{copy.newHere}{' '}
|
||||
<Text style={{ color: colors.primary, fontWeight: '800' }}>{copy.create}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
scroll: { flexGrow: 1 },
|
||||
hero: {
|
||||
minHeight: 290,
|
||||
justifyContent: 'flex-end',
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 56,
|
||||
paddingBottom: 32,
|
||||
},
|
||||
heroImage: { resizeMode: 'cover' },
|
||||
heroOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(5, 12, 7, 0.48)',
|
||||
},
|
||||
backBtn: {
|
||||
position: 'absolute',
|
||||
top: 54,
|
||||
left: 22,
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.28)',
|
||||
},
|
||||
heroCopy: { gap: 10 },
|
||||
heroTitle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 36,
|
||||
lineHeight: 41,
|
||||
fontWeight: '900',
|
||||
},
|
||||
heroSubline: {
|
||||
color: 'rgba(255, 255, 255, 0.88)',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '700',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
marginTop: -24,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
paddingHorizontal: 22,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 34,
|
||||
gap: 14,
|
||||
},
|
||||
appleButton: { width: '100%', height: 56 },
|
||||
dividerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
dividerLine: { flex: 1, height: 1 },
|
||||
dividerText: { fontSize: 12, fontWeight: '800' },
|
||||
form: { gap: 12 },
|
||||
fieldGroup: { gap: 6 },
|
||||
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
|
||||
inputRow: {
|
||||
height: 54,
|
||||
borderWidth: 1,
|
||||
borderRadius: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
inputIcon: { marginRight: 10 },
|
||||
input: { flex: 1, height: 54, fontSize: 15 },
|
||||
eyeBtn: { padding: 5, marginLeft: 6 },
|
||||
forgotBtn: { alignItems: 'flex-end', marginTop: -4 },
|
||||
forgotText: { fontSize: 14, fontWeight: '800' },
|
||||
errorBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
primaryBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryBtnText: { fontSize: 17, fontWeight: '900' },
|
||||
signupLink: { alignItems: 'center', paddingTop: 8 },
|
||||
signupLinkText: { fontSize: 15, fontWeight: '700' },
|
||||
});
|
||||
|
||||
@@ -1,482 +1,482 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ImageBackground,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import * as AppleAuthentication from 'expo-apple-authentication';
|
||||
import Constants from 'expo-constants';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { AuthService } from '../../services/authService';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const HERO_IMAGE = require('../../assets/welcome_botanical_hero.png');
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Erstelle einen Account, speichere deine Pflanzen und sichere dir 3 Gratis-Scans pro Monat.',
|
||||
emailCta: 'Mit E-Mail fortfahren',
|
||||
createCta: 'Account erstellen',
|
||||
already: 'Schon einen Account?',
|
||||
login: 'Anmelden',
|
||||
legal: 'Mit dem Fortfahren akzeptierst du Datenschutz und Nutzungsbedingungen.',
|
||||
nameLabel: 'Name',
|
||||
emailLabel: 'E-Mail',
|
||||
savePlantPrefix: 'Dein Scan wird nach der Registrierung gespeichert:',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Crea una cuenta para guardar tus plantas y recibir 3 escaneos gratis al mes.',
|
||||
emailCta: 'Continuar con email',
|
||||
createCta: 'Crear cuenta',
|
||||
already: 'Ya tienes cuenta?',
|
||||
login: 'Iniciar sesion',
|
||||
legal: 'Al continuar aceptas la Politica de privacidad y los Terminos.',
|
||||
nameLabel: 'Nombre',
|
||||
emailLabel: 'Email',
|
||||
savePlantPrefix: 'Guardaremos tu escaneo despues del registro:',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Create an account to save your plants and 3 free scans per month.',
|
||||
emailCta: 'Continue with Email',
|
||||
createCta: 'Create Account',
|
||||
already: 'Already have an account?',
|
||||
login: 'Log in',
|
||||
legal: 'By continuing you agree to our Privacy Policy and Terms.',
|
||||
nameLabel: 'Name',
|
||||
emailLabel: 'Email',
|
||||
savePlantPrefix: 'Your scan will be saved after signup:',
|
||||
};
|
||||
};
|
||||
|
||||
export default function SignupScreen() {
|
||||
const { isDarkMode, colorPalette, hydrateSession, getPendingPlant, language, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const copy = getCopy(language);
|
||||
const posthog = useSafeAnalytics();
|
||||
const pendingPlant = getPendingPlant();
|
||||
const isExpoGo = Constants.appOwnership === 'expo';
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [passwordConfirm, setPasswordConfirm] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
|
||||
const [emailExpanded, setEmailExpanded] = useState(false);
|
||||
const [appleAvailable, setAppleAvailable] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('signup_screen_viewed', { context: 'onboarding' });
|
||||
}, [posthog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isExpoGo) {
|
||||
setAppleAvailable(false);
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
AppleAuthentication.isAvailableAsync()
|
||||
.then((available) => {
|
||||
if (mounted) setAppleAvailable(available);
|
||||
})
|
||||
.catch(() => {
|
||||
if (mounted) setAppleAvailable(false);
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [isExpoGo]);
|
||||
|
||||
const finishAuth = async (session: Awaited<ReturnType<typeof AuthService.signUp>>) => {
|
||||
await hydrateSession(session);
|
||||
if (session?.userId) {
|
||||
await PreAuthOnboardingService.flushToProfile(session.userId).catch(() => {});
|
||||
}
|
||||
await AsyncStorage.setItem('greenlens_show_tour', 'true');
|
||||
router.replace('/(tabs)');
|
||||
};
|
||||
|
||||
const validate = (): string | null => {
|
||||
if (!name.trim()) return t.errNameRequired;
|
||||
if (!email.trim() || !email.includes('@')) return t.errEmailInvalid;
|
||||
if (password.length < 6) return t.errPasswordShort;
|
||||
if (password !== passwordConfirm) return t.errPasswordMismatch;
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleSignup = async () => {
|
||||
const validationError = validate();
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
setEmailExpanded(true);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const session = await AuthService.signUp(email, name, password);
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e.message === 'EMAIL_TAKEN') {
|
||||
setError(t.errEmailTaken);
|
||||
} else if (e.message === 'BACKEND_URL_MISSING' || e.message === 'NETWORK_ERROR') {
|
||||
setError(t.errNetworkError);
|
||||
} else if (e.message === 'SERVER_ERROR') {
|
||||
setError(t.errServerError);
|
||||
} else {
|
||||
setError(t.errAuthError);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppleSignIn = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
posthog.capture('apple_login_started', { surface: 'signup' });
|
||||
try {
|
||||
const credential = await AppleAuthentication.signInAsync({
|
||||
requestedScopes: [
|
||||
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
|
||||
AppleAuthentication.AppleAuthenticationScope.EMAIL,
|
||||
],
|
||||
});
|
||||
|
||||
if (!credential.identityToken) {
|
||||
throw new Error('APPLE_AUTH_INVALID');
|
||||
}
|
||||
|
||||
const fullName = [
|
||||
credential.fullName?.givenName,
|
||||
credential.fullName?.familyName,
|
||||
].filter(Boolean).join(' ');
|
||||
const session = await AuthService.signInWithApple({
|
||||
identityToken: credential.identityToken,
|
||||
appleUser: credential.user,
|
||||
email: credential.email,
|
||||
name: fullName || undefined,
|
||||
});
|
||||
posthog.capture('apple_login_succeeded', { surface: 'signup' });
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e?.code === 'ERR_REQUEST_CANCELED') return;
|
||||
posthog.capture('apple_login_failed', {
|
||||
surface: 'signup',
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
setError(e?.message === 'APPLE_BACKEND_UNAVAILABLE'
|
||||
? 'Apple Login ist auf dem Backend noch nicht aktiviert. Bitte Backend neu starten oder deployen.'
|
||||
: t.errAuthError);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.flex, { backgroundColor: isDarkMode ? '#0a110b' : '#fbfaf3' }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
|
||||
<ImageBackground source={HERO_IMAGE} style={styles.hero} imageStyle={styles.heroImage}>
|
||||
<View style={styles.heroOverlay} />
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => router.back()} activeOpacity={0.8}>
|
||||
<Ionicons name="arrow-back" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.heroCopy}>
|
||||
<Text style={styles.heroTitle}>{copy.headline}</Text>
|
||||
<Text style={styles.heroSubline}>{copy.subline}</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: isDarkMode ? '#101a12' : '#fbfaf3' }]}>
|
||||
{pendingPlant ? (
|
||||
<View style={[styles.pendingHint, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
|
||||
<Ionicons name="sparkles" size={18} color={colors.primary} />
|
||||
<Text style={[styles.pendingHintText, { color: colors.text }]}>
|
||||
{copy.savePlantPrefix} {pendingPlant.result.name}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<AppleAuthentication.AppleAuthenticationButton
|
||||
buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
|
||||
buttonStyle={isDarkMode
|
||||
? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
|
||||
: AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
|
||||
cornerRadius={14}
|
||||
style={styles.appleButton}
|
||||
onPress={handleAppleSignIn}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<View style={styles.dividerRow}>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
<Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{!emailExpanded ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.emailChoiceBtn, { backgroundColor: colors.surface, borderColor: colors.borderStrong }]}
|
||||
onPress={() => setEmailExpanded(true)}
|
||||
activeOpacity={0.84}
|
||||
>
|
||||
<Ionicons name="mail-outline" size={19} color={colors.primary} />
|
||||
<Text style={[styles.emailChoiceText, { color: colors.text }]}>{copy.emailCta}</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.form}>
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.nameLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="person-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.namePlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
autoCapitalize="words"
|
||||
autoComplete="name"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.emailLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="mail-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.emailPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
autoComplete="email"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.passwordLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.passwordPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPassword}
|
||||
autoComplete="new-password"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPassword((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.confirmPasswordLabel}</Text>
|
||||
<View style={[
|
||||
styles.inputRow,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: passwordConfirm && password !== passwordConfirm ? colors.danger : colors.border,
|
||||
},
|
||||
]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.confirmPasswordPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={passwordConfirm}
|
||||
onChangeText={setPasswordConfirm}
|
||||
secureTextEntry={!showPasswordConfirm}
|
||||
autoComplete="new-password"
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleSignup}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPasswordConfirm((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPasswordConfirm ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.dangerSoft }]}>
|
||||
<Ionicons name="alert-circle-outline" size={15} color={colors.danger} />
|
||||
<Text style={[styles.errorText, { color: colors.danger }]} selectable>{error}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{emailExpanded ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryBtn, { backgroundColor: colors.primary, opacity: loading ? 0.72 : 1 }]}
|
||||
onPress={handleSignup}
|
||||
activeOpacity={0.84}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.onPrimary} size="small" />
|
||||
) : (
|
||||
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.createCta}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
|
||||
<TouchableOpacity style={styles.loginLink} onPress={() => router.replace('/auth/login')} activeOpacity={0.78}>
|
||||
<Text style={[styles.loginLinkText, { color: colors.textSecondary }]}>
|
||||
{copy.already}{' '}
|
||||
<Text style={{ color: colors.primary, fontWeight: '800' }}>{copy.login}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={[styles.legal, { color: colors.textMuted }]}>{copy.legal}</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
scroll: { flexGrow: 1 },
|
||||
hero: {
|
||||
minHeight: 330,
|
||||
justifyContent: 'flex-end',
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 56,
|
||||
paddingBottom: 34,
|
||||
},
|
||||
heroImage: { resizeMode: 'cover' },
|
||||
heroOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(5, 12, 7, 0.46)',
|
||||
},
|
||||
backBtn: {
|
||||
position: 'absolute',
|
||||
top: 54,
|
||||
left: 22,
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.28)',
|
||||
},
|
||||
heroCopy: { gap: 10 },
|
||||
heroTitle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 34,
|
||||
lineHeight: 39,
|
||||
fontWeight: '900',
|
||||
},
|
||||
heroSubline: {
|
||||
color: 'rgba(255, 255, 255, 0.88)',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '700',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
marginTop: -24,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
paddingHorizontal: 22,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 32,
|
||||
gap: 14,
|
||||
},
|
||||
pendingHint: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
pendingHintText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
appleButton: { width: '100%', height: 56 },
|
||||
dividerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
dividerLine: { flex: 1, height: 1 },
|
||||
dividerText: { fontSize: 12, fontWeight: '800' },
|
||||
emailChoiceBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1.5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
emailChoiceText: { fontSize: 16, fontWeight: '800' },
|
||||
form: { gap: 12 },
|
||||
fieldGroup: { gap: 6 },
|
||||
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
|
||||
inputRow: {
|
||||
height: 52,
|
||||
borderWidth: 1,
|
||||
borderRadius: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
inputIcon: { marginRight: 10 },
|
||||
input: { flex: 1, height: 52, fontSize: 15 },
|
||||
eyeBtn: { padding: 5, marginLeft: 6 },
|
||||
errorBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
primaryBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryBtnText: { fontSize: 17, fontWeight: '900' },
|
||||
loginLink: { alignItems: 'center', paddingTop: 4, paddingBottom: 2 },
|
||||
loginLinkText: { fontSize: 15, fontWeight: '700' },
|
||||
legal: { textAlign: 'center', fontSize: 11.5, lineHeight: 16, paddingHorizontal: 12 },
|
||||
});
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
ImageBackground,
|
||||
KeyboardAvoidingView,
|
||||
Platform,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import * as AppleAuthentication from 'expo-apple-authentication';
|
||||
import Constants from 'expo-constants';
|
||||
import { useApp } from '../../context/AppContext';
|
||||
import { useColors } from '../../constants/Colors';
|
||||
import { AuthService } from '../../services/authService';
|
||||
import { useSafeAnalytics } from '../../services/analytics';
|
||||
import { PreAuthOnboardingService } from '../../services/preAuthOnboardingService';
|
||||
import { Language } from '../../types';
|
||||
|
||||
const HERO_IMAGE = require('../../assets/welcome_botanical_hero.png');
|
||||
|
||||
const getCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Erstelle einen Account, speichere deine Pflanzen und sichere dir 3 Gratis-Scans pro Monat.',
|
||||
emailCta: 'Mit E-Mail fortfahren',
|
||||
createCta: 'Account erstellen',
|
||||
already: 'Schon einen Account?',
|
||||
login: 'Anmelden',
|
||||
legal: 'Mit dem Fortfahren akzeptierst du Datenschutz und Nutzungsbedingungen.',
|
||||
nameLabel: 'Name',
|
||||
emailLabel: 'E-Mail',
|
||||
savePlantPrefix: 'Dein Scan wird nach der Registrierung gespeichert:',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Crea una cuenta para guardar tus plantas y recibir 3 escaneos gratis al mes.',
|
||||
emailCta: 'Continuar con email',
|
||||
createCta: 'Crear cuenta',
|
||||
already: 'Ya tienes cuenta?',
|
||||
login: 'Iniciar sesion',
|
||||
legal: 'Al continuar aceptas la Politica de privacidad y los Terminos.',
|
||||
nameLabel: 'Nombre',
|
||||
emailLabel: 'Email',
|
||||
savePlantPrefix: 'Guardaremos tu escaneo despues del registro:',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: "Let's finish your setup!",
|
||||
subline: 'Create an account to save your plants and 3 free scans per month.',
|
||||
emailCta: 'Continue with Email',
|
||||
createCta: 'Create Account',
|
||||
already: 'Already have an account?',
|
||||
login: 'Log in',
|
||||
legal: 'By continuing you agree to our Privacy Policy and Terms.',
|
||||
nameLabel: 'Name',
|
||||
emailLabel: 'Email',
|
||||
savePlantPrefix: 'Your scan will be saved after signup:',
|
||||
};
|
||||
};
|
||||
|
||||
export default function SignupScreen() {
|
||||
const { isDarkMode, colorPalette, hydrateSession, getPendingPlant, language, t } = useApp();
|
||||
const colors = useColors(isDarkMode, colorPalette);
|
||||
const copy = getCopy(language);
|
||||
const posthog = useSafeAnalytics();
|
||||
const pendingPlant = getPendingPlant();
|
||||
const isExpoGo = Constants.appOwnership === 'expo';
|
||||
|
||||
const [name, setName] = useState('');
|
||||
const [email, setEmail] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [passwordConfirm, setPasswordConfirm] = useState('');
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
|
||||
const [emailExpanded, setEmailExpanded] = useState(false);
|
||||
const [appleAvailable, setAppleAvailable] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('signup_screen_viewed', { context: 'onboarding' });
|
||||
}, [posthog]);
|
||||
|
||||
useEffect(() => {
|
||||
if (isExpoGo) {
|
||||
setAppleAvailable(false);
|
||||
return;
|
||||
}
|
||||
let mounted = true;
|
||||
AppleAuthentication.isAvailableAsync()
|
||||
.then((available) => {
|
||||
if (mounted) setAppleAvailable(available);
|
||||
})
|
||||
.catch(() => {
|
||||
if (mounted) setAppleAvailable(false);
|
||||
});
|
||||
return () => {
|
||||
mounted = false;
|
||||
};
|
||||
}, [isExpoGo]);
|
||||
|
||||
const finishAuth = async (session: Awaited<ReturnType<typeof AuthService.signUp>>) => {
|
||||
await hydrateSession(session);
|
||||
if (session?.userId) {
|
||||
await PreAuthOnboardingService.flushToProfile(session.userId).catch(() => {});
|
||||
}
|
||||
await AsyncStorage.setItem('greenlens_show_tour', 'true');
|
||||
router.replace('/(tabs)');
|
||||
};
|
||||
|
||||
const validate = (): string | null => {
|
||||
if (!name.trim()) return t.errNameRequired;
|
||||
if (!email.trim() || !email.includes('@')) return t.errEmailInvalid;
|
||||
if (password.length < 6) return t.errPasswordShort;
|
||||
if (password !== passwordConfirm) return t.errPasswordMismatch;
|
||||
return null;
|
||||
};
|
||||
|
||||
const handleSignup = async () => {
|
||||
const validationError = validate();
|
||||
if (validationError) {
|
||||
setError(validationError);
|
||||
setEmailExpanded(true);
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const session = await AuthService.signUp(email, name, password);
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e.message === 'EMAIL_TAKEN') {
|
||||
setError(t.errEmailTaken);
|
||||
} else if (e.message === 'BACKEND_URL_MISSING' || e.message === 'NETWORK_ERROR') {
|
||||
setError(t.errNetworkError);
|
||||
} else if (e.message === 'SERVER_ERROR') {
|
||||
setError(t.errServerError);
|
||||
} else {
|
||||
setError(t.errAuthError);
|
||||
}
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAppleSignIn = async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
posthog.capture('apple_login_started', { surface: 'signup' });
|
||||
try {
|
||||
const credential = await AppleAuthentication.signInAsync({
|
||||
requestedScopes: [
|
||||
AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
|
||||
AppleAuthentication.AppleAuthenticationScope.EMAIL,
|
||||
],
|
||||
});
|
||||
|
||||
if (!credential.identityToken) {
|
||||
throw new Error('APPLE_AUTH_INVALID');
|
||||
}
|
||||
|
||||
const fullName = [
|
||||
credential.fullName?.givenName,
|
||||
credential.fullName?.familyName,
|
||||
].filter(Boolean).join(' ');
|
||||
const session = await AuthService.signInWithApple({
|
||||
identityToken: credential.identityToken,
|
||||
appleUser: credential.user,
|
||||
email: credential.email,
|
||||
name: fullName || undefined,
|
||||
});
|
||||
posthog.capture('apple_login_succeeded', { surface: 'signup' });
|
||||
await finishAuth(session);
|
||||
} catch (e: any) {
|
||||
if (e?.code === 'ERR_REQUEST_CANCELED') return;
|
||||
posthog.capture('apple_login_failed', {
|
||||
surface: 'signup',
|
||||
error: e instanceof Error ? e.message : String(e),
|
||||
});
|
||||
setError(e?.message === 'APPLE_BACKEND_UNAVAILABLE'
|
||||
? 'Apple Login ist auf dem Backend noch nicht aktiviert. Bitte Backend neu starten oder deployen.'
|
||||
: t.errAuthError);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView
|
||||
style={[styles.flex, { backgroundColor: isDarkMode ? '#0a110b' : '#fbfaf3' }]}
|
||||
behavior={Platform.OS === 'ios' ? 'padding' : undefined}
|
||||
>
|
||||
<ScrollView contentContainerStyle={styles.scroll} keyboardShouldPersistTaps="handled" showsVerticalScrollIndicator={false}>
|
||||
<ImageBackground source={HERO_IMAGE} style={styles.hero} imageStyle={styles.heroImage}>
|
||||
<View style={styles.heroOverlay} />
|
||||
<TouchableOpacity style={styles.backBtn} onPress={() => router.back()} activeOpacity={0.8}>
|
||||
<Ionicons name="arrow-back" size={20} color="#ffffff" />
|
||||
</TouchableOpacity>
|
||||
<View style={styles.heroCopy}>
|
||||
<Text style={styles.heroTitle}>{copy.headline}</Text>
|
||||
<Text style={styles.heroSubline}>{copy.subline}</Text>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={[styles.sheet, { backgroundColor: isDarkMode ? '#101a12' : '#fbfaf3' }]}>
|
||||
{pendingPlant ? (
|
||||
<View style={[styles.pendingHint, { backgroundColor: colors.primarySoft, borderColor: colors.border }]}>
|
||||
<Ionicons name="sparkles" size={18} color={colors.primary} />
|
||||
<Text style={[styles.pendingHintText, { color: colors.text }]}>
|
||||
{copy.savePlantPrefix} {pendingPlant.result.name}
|
||||
</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<AppleAuthentication.AppleAuthenticationButton
|
||||
buttonType={AppleAuthentication.AppleAuthenticationButtonType.CONTINUE}
|
||||
buttonStyle={isDarkMode
|
||||
? AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
|
||||
: AppleAuthentication.AppleAuthenticationButtonStyle.BLACK}
|
||||
cornerRadius={14}
|
||||
style={styles.appleButton}
|
||||
onPress={handleAppleSignIn}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{appleAvailable ? (
|
||||
<View style={styles.dividerRow}>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
<Text style={[styles.dividerText, { color: colors.textMuted }]}>{t.orDivider}</Text>
|
||||
<View style={[styles.dividerLine, { backgroundColor: colors.border }]} />
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{!emailExpanded ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.emailChoiceBtn, { backgroundColor: colors.surface, borderColor: colors.borderStrong }]}
|
||||
onPress={() => setEmailExpanded(true)}
|
||||
activeOpacity={0.84}
|
||||
>
|
||||
<Ionicons name="mail-outline" size={19} color={colors.primary} />
|
||||
<Text style={[styles.emailChoiceText, { color: colors.text }]}>{copy.emailCta}</Text>
|
||||
</TouchableOpacity>
|
||||
) : (
|
||||
<View style={styles.form}>
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.nameLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="person-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.namePlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={name}
|
||||
onChangeText={setName}
|
||||
autoCapitalize="words"
|
||||
autoComplete="name"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{copy.emailLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="mail-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.emailPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={email}
|
||||
onChangeText={setEmail}
|
||||
autoCapitalize="none"
|
||||
keyboardType="email-address"
|
||||
autoComplete="email"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.passwordLabel}</Text>
|
||||
<View style={[styles.inputRow, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.passwordPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={password}
|
||||
onChangeText={setPassword}
|
||||
secureTextEntry={!showPassword}
|
||||
autoComplete="new-password"
|
||||
returnKeyType="next"
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPassword((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPassword ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.fieldGroup}>
|
||||
<Text style={[styles.label, { color: colors.textSecondary }]}>{t.confirmPasswordLabel}</Text>
|
||||
<View style={[
|
||||
styles.inputRow,
|
||||
{
|
||||
backgroundColor: colors.surface,
|
||||
borderColor: passwordConfirm && password !== passwordConfirm ? colors.danger : colors.border,
|
||||
},
|
||||
]}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.textMuted} style={styles.inputIcon} />
|
||||
<TextInput
|
||||
style={[styles.input, { color: colors.text }]}
|
||||
placeholder={t.confirmPasswordPlaceholder}
|
||||
placeholderTextColor={colors.textMuted}
|
||||
value={passwordConfirm}
|
||||
onChangeText={setPasswordConfirm}
|
||||
secureTextEntry={!showPasswordConfirm}
|
||||
autoComplete="new-password"
|
||||
returnKeyType="done"
|
||||
onSubmitEditing={handleSignup}
|
||||
/>
|
||||
<TouchableOpacity onPress={() => setShowPasswordConfirm((v) => !v)} style={styles.eyeBtn}>
|
||||
<Ionicons name={showPasswordConfirm ? 'eye-off-outline' : 'eye-outline'} size={18} color={colors.textMuted} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{error ? (
|
||||
<View style={[styles.errorBox, { backgroundColor: colors.dangerSoft }]}>
|
||||
<Ionicons name="alert-circle-outline" size={15} color={colors.danger} />
|
||||
<Text style={[styles.errorText, { color: colors.danger }]} selectable>{error}</Text>
|
||||
</View>
|
||||
) : null}
|
||||
|
||||
{emailExpanded ? (
|
||||
<TouchableOpacity
|
||||
style={[styles.primaryBtn, { backgroundColor: colors.primary, opacity: loading ? 0.72 : 1 }]}
|
||||
onPress={handleSignup}
|
||||
activeOpacity={0.84}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? (
|
||||
<ActivityIndicator color={colors.onPrimary} size="small" />
|
||||
) : (
|
||||
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{copy.createCta}</Text>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
) : null}
|
||||
|
||||
<TouchableOpacity style={styles.loginLink} onPress={() => router.replace('/auth/login')} activeOpacity={0.78}>
|
||||
<Text style={[styles.loginLinkText, { color: colors.textSecondary }]}>
|
||||
{copy.already}{' '}
|
||||
<Text style={{ color: colors.primary, fontWeight: '800' }}>{copy.login}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={[styles.legal, { color: colors.textMuted }]}>{copy.legal}</Text>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
flex: { flex: 1 },
|
||||
scroll: { flexGrow: 1 },
|
||||
hero: {
|
||||
minHeight: 330,
|
||||
justifyContent: 'flex-end',
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 56,
|
||||
paddingBottom: 34,
|
||||
},
|
||||
heroImage: { resizeMode: 'cover' },
|
||||
heroOverlay: {
|
||||
...StyleSheet.absoluteFillObject,
|
||||
backgroundColor: 'rgba(5, 12, 7, 0.46)',
|
||||
},
|
||||
backBtn: {
|
||||
position: 'absolute',
|
||||
top: 54,
|
||||
left: 22,
|
||||
width: 42,
|
||||
height: 42,
|
||||
borderRadius: 21,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.28)',
|
||||
},
|
||||
heroCopy: { gap: 10 },
|
||||
heroTitle: {
|
||||
color: '#ffffff',
|
||||
fontSize: 34,
|
||||
lineHeight: 39,
|
||||
fontWeight: '900',
|
||||
},
|
||||
heroSubline: {
|
||||
color: 'rgba(255, 255, 255, 0.88)',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '700',
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
marginTop: -24,
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
paddingHorizontal: 22,
|
||||
paddingTop: 24,
|
||||
paddingBottom: 32,
|
||||
gap: 14,
|
||||
},
|
||||
pendingHint: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
borderRadius: 16,
|
||||
borderWidth: 1,
|
||||
paddingHorizontal: 14,
|
||||
paddingVertical: 12,
|
||||
},
|
||||
pendingHintText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
appleButton: { width: '100%', height: 56 },
|
||||
dividerRow: { flexDirection: 'row', alignItems: 'center', gap: 12 },
|
||||
dividerLine: { flex: 1, height: 1 },
|
||||
dividerText: { fontSize: 12, fontWeight: '800' },
|
||||
emailChoiceBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
borderWidth: 1.5,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
emailChoiceText: { fontSize: 16, fontWeight: '800' },
|
||||
form: { gap: 12 },
|
||||
fieldGroup: { gap: 6 },
|
||||
label: { fontSize: 13, fontWeight: '800', marginLeft: 2 },
|
||||
inputRow: {
|
||||
height: 52,
|
||||
borderWidth: 1,
|
||||
borderRadius: 14,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 14,
|
||||
},
|
||||
inputIcon: { marginRight: 10 },
|
||||
input: { flex: 1, height: 52, fontSize: 15 },
|
||||
eyeBtn: { padding: 5, marginLeft: 6 },
|
||||
errorBox: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 7,
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 10,
|
||||
},
|
||||
errorText: { flex: 1, fontSize: 13, lineHeight: 18, fontWeight: '700' },
|
||||
primaryBtn: {
|
||||
height: 56,
|
||||
borderRadius: 14,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
primaryBtnText: { fontSize: 17, fontWeight: '900' },
|
||||
loginLink: { alignItems: 'center', paddingTop: 4, paddingBottom: 2 },
|
||||
loginLinkText: { fontSize: 15, fontWeight: '700' },
|
||||
legal: { textAlign: 'center', fontSize: 11.5, lineHeight: 16, paddingHorizontal: 12 },
|
||||
});
|
||||
|
||||
@@ -1,332 +1,332 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Image,
|
||||
ImageBackground,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
useWindowDimensions,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { useSafeAnalytics } from '../services/analytics';
|
||||
import { Language } from '../types';
|
||||
|
||||
const getWelcomeCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: 'Willkommen bei GreenLens!',
|
||||
subline: 'Pflanzen erkennen, verstehen und pflegen — ganz einfach.',
|
||||
testimonial: '„Endlich überleben meine Pflanzen! Absolute Empfehlung."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Los geht's",
|
||||
login: 'Anmelden',
|
||||
demoScan: 'Oder direkt eine Pflanze scannen',
|
||||
legal: 'Mit dem Fortfahren akzeptierst du unsere Datenschutzerklärung und AGB.',
|
||||
rating: '4,8',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: '¡Bienvenido a GreenLens!',
|
||||
subline: 'Identifica, entiende y cuida tus plantas — sin esfuerzo.',
|
||||
testimonial: '"¡Por fin mis plantas sobreviven! Muy recomendable."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: 'Empezar',
|
||||
login: 'Iniciar sesión',
|
||||
demoScan: 'O escanea una planta ahora',
|
||||
legal: 'Al continuar aceptas nuestra Política de privacidad y Términos.',
|
||||
rating: '4.8',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: 'Welcome to GreenLens!',
|
||||
subline: 'Identify, understand and care for your plants — effortlessly.',
|
||||
testimonial: '"Finally my plants stay alive! Highly recommend."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Let's Go",
|
||||
login: 'Log in',
|
||||
demoScan: 'Or scan a plant right now',
|
||||
legal: 'By continuing you agree to our Privacy Policy and Terms.',
|
||||
rating: '4.8',
|
||||
};
|
||||
};
|
||||
|
||||
export default function OnboardingScreen() {
|
||||
const { language } = useApp();
|
||||
const { height } = useWindowDimensions();
|
||||
const compact = height < 700;
|
||||
const posthog = useSafeAnalytics();
|
||||
const copy = getWelcomeCopy(language);
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_welcome_viewed');
|
||||
}, [posthog]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ImageBackground
|
||||
source={require('../assets/welcome_botanical_hero.png')}
|
||||
style={[styles.hero, { height: compact ? '48%' : '55%' }]}
|
||||
imageStyle={styles.heroImageContent}
|
||||
resizeMode="cover"
|
||||
>
|
||||
<View style={styles.heroShadeTop} />
|
||||
<SafeAreaView style={styles.heroSafe}>
|
||||
<View style={styles.heroTopRow}>
|
||||
<View style={styles.brandRow}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.logo}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Text style={styles.brandName}>
|
||||
Green<Text style={styles.brandAccent}>Lens</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.ratingPill}>
|
||||
<Ionicons name="star" size={13} color="#f5c04e" />
|
||||
<Text style={styles.ratingText}>{copy.rating}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
|
||||
<Text style={styles.testimonialText}>{copy.testimonial}</Text>
|
||||
<View style={styles.testimonialMeta}>
|
||||
<Text style={styles.testimonialAuthor}>{copy.testimonialAuthor}</Text>
|
||||
<View style={styles.starsRow}>
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<Ionicons key={i} name="star" size={14} color="#f5c04e" />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={styles.sheet}>
|
||||
<View style={styles.sheetHandle} />
|
||||
<View style={styles.sheetContent}>
|
||||
<Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
|
||||
<Text style={styles.subline}>{copy.subline}</Text>
|
||||
|
||||
<View style={styles.spacer} />
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.cta}
|
||||
onPress={() => {
|
||||
posthog.capture('onboarding_started');
|
||||
router.push('/onboarding/slides');
|
||||
}}
|
||||
activeOpacity={0.86}
|
||||
>
|
||||
<Text style={styles.ctaText}>{copy.cta}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
|
||||
<Text style={styles.loginText}>{copy.login}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push('/scanner')} style={styles.demoLink}>
|
||||
<Ionicons name="scan-outline" size={16} color="#4b7c31" />
|
||||
<Text style={styles.demoText}>{copy.demoScan}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.legal}>{copy.legal}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0a110b',
|
||||
},
|
||||
hero: {
|
||||
width: '100%',
|
||||
},
|
||||
heroImageContent: {
|
||||
backgroundColor: '#0a110b',
|
||||
},
|
||||
heroShadeTop: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
height: 120,
|
||||
backgroundColor: 'rgba(10,17,11,0.4)',
|
||||
},
|
||||
heroSafe: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
heroTopRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
brandRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
logo: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
brandName: {
|
||||
color: '#ffffff',
|
||||
fontSize: 24,
|
||||
fontWeight: '900',
|
||||
},
|
||||
brandAccent: {
|
||||
color: '#a6d66f',
|
||||
},
|
||||
ratingPill: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
backgroundColor: 'rgba(255,255,255,0.18)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.3)',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
ratingText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
testimonialCard: {
|
||||
backgroundColor: 'rgba(255,255,255,0.97)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 14,
|
||||
elevation: 4,
|
||||
},
|
||||
testimonialCardCompact: {
|
||||
padding: 12,
|
||||
},
|
||||
testimonialText: {
|
||||
color: '#191d16',
|
||||
fontSize: 14.5,
|
||||
lineHeight: 20,
|
||||
fontStyle: 'italic',
|
||||
marginBottom: 10,
|
||||
},
|
||||
testimonialMeta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
testimonialAuthor: {
|
||||
color: '#42493c',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
starsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 1,
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fbfaf3',
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
marginTop: -20,
|
||||
},
|
||||
sheetHandle: {
|
||||
alignSelf: 'center',
|
||||
width: 44,
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: 'rgba(16,28,18,0.15)',
|
||||
marginTop: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
sheetContent: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
headline: {
|
||||
color: '#101c12',
|
||||
fontSize: 28,
|
||||
lineHeight: 34,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
headlineCompact: {
|
||||
fontSize: 24,
|
||||
lineHeight: 29,
|
||||
},
|
||||
subline: {
|
||||
color: '#5f625d',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
},
|
||||
spacer: {
|
||||
flex: 1,
|
||||
minHeight: 12,
|
||||
},
|
||||
cta: {
|
||||
height: 60,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#437824',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 6,
|
||||
},
|
||||
ctaText: {
|
||||
color: '#f8f7ef',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
loginLink: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
loginText: {
|
||||
color: '#437824',
|
||||
fontSize: 15,
|
||||
fontWeight: '800',
|
||||
},
|
||||
demoLink: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 7,
|
||||
paddingVertical: 6,
|
||||
marginBottom: 8,
|
||||
},
|
||||
demoText: {
|
||||
color: '#4b7c31',
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
},
|
||||
legal: {
|
||||
color: '#6b6d68',
|
||||
fontSize: 11,
|
||||
lineHeight: 14,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
import React, { useEffect } from 'react';
|
||||
import {
|
||||
Image,
|
||||
ImageBackground,
|
||||
SafeAreaView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
useWindowDimensions,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { router } from 'expo-router';
|
||||
import { useApp } from '../context/AppContext';
|
||||
import { useSafeAnalytics } from '../services/analytics';
|
||||
import { Language } from '../types';
|
||||
|
||||
const getWelcomeCopy = (language: Language) => {
|
||||
if (language === 'de') {
|
||||
return {
|
||||
headline: 'Willkommen bei GreenLens!',
|
||||
subline: 'Pflanzen erkennen, verstehen und pflegen — ganz einfach.',
|
||||
testimonial: '„Endlich überleben meine Pflanzen! Absolute Empfehlung."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Los geht's",
|
||||
login: 'Anmelden',
|
||||
demoScan: 'Oder direkt eine Pflanze scannen',
|
||||
legal: 'Mit dem Fortfahren akzeptierst du unsere Datenschutzerklärung und AGB.',
|
||||
rating: '4,8',
|
||||
};
|
||||
}
|
||||
if (language === 'es') {
|
||||
return {
|
||||
headline: '¡Bienvenido a GreenLens!',
|
||||
subline: 'Identifica, entiende y cuida tus plantas — sin esfuerzo.',
|
||||
testimonial: '"¡Por fin mis plantas sobreviven! Muy recomendable."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: 'Empezar',
|
||||
login: 'Iniciar sesión',
|
||||
demoScan: 'O escanea una planta ahora',
|
||||
legal: 'Al continuar aceptas nuestra Política de privacidad y Términos.',
|
||||
rating: '4.8',
|
||||
};
|
||||
}
|
||||
return {
|
||||
headline: 'Welcome to GreenLens!',
|
||||
subline: 'Identify, understand and care for your plants — effortlessly.',
|
||||
testimonial: '"Finally my plants stay alive! Highly recommend."',
|
||||
testimonialAuthor: 'Anna M.',
|
||||
cta: "Let's Go",
|
||||
login: 'Log in',
|
||||
demoScan: 'Or scan a plant right now',
|
||||
legal: 'By continuing you agree to our Privacy Policy and Terms.',
|
||||
rating: '4.8',
|
||||
};
|
||||
};
|
||||
|
||||
export default function OnboardingScreen() {
|
||||
const { language } = useApp();
|
||||
const { height } = useWindowDimensions();
|
||||
const compact = height < 700;
|
||||
const posthog = useSafeAnalytics();
|
||||
const copy = getWelcomeCopy(language);
|
||||
|
||||
useEffect(() => {
|
||||
posthog.capture('onboarding_welcome_viewed');
|
||||
}, [posthog]);
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<ImageBackground
|
||||
source={require('../assets/welcome_botanical_hero.png')}
|
||||
style={[styles.hero, { height: compact ? '48%' : '55%' }]}
|
||||
imageStyle={styles.heroImageContent}
|
||||
resizeMode="cover"
|
||||
>
|
||||
<View style={styles.heroShadeTop} />
|
||||
<SafeAreaView style={styles.heroSafe}>
|
||||
<View style={styles.heroTopRow}>
|
||||
<View style={styles.brandRow}>
|
||||
<Image
|
||||
source={require('../assets/icon.png')}
|
||||
style={styles.logo}
|
||||
resizeMode="cover"
|
||||
/>
|
||||
<Text style={styles.brandName}>
|
||||
Green<Text style={styles.brandAccent}>Lens</Text>
|
||||
</Text>
|
||||
</View>
|
||||
<View style={styles.ratingPill}>
|
||||
<Ionicons name="star" size={13} color="#f5c04e" />
|
||||
<Text style={styles.ratingText}>{copy.rating}</Text>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={[styles.testimonialCard, compact && styles.testimonialCardCompact]}>
|
||||
<Text style={styles.testimonialText}>{copy.testimonial}</Text>
|
||||
<View style={styles.testimonialMeta}>
|
||||
<Text style={styles.testimonialAuthor}>{copy.testimonialAuthor}</Text>
|
||||
<View style={styles.starsRow}>
|
||||
{[0, 1, 2, 3, 4].map((i) => (
|
||||
<Ionicons key={i} name="star" size={14} color="#f5c04e" />
|
||||
))}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
</ImageBackground>
|
||||
|
||||
<View style={styles.sheet}>
|
||||
<View style={styles.sheetHandle} />
|
||||
<View style={styles.sheetContent}>
|
||||
<Text style={[styles.headline, compact && styles.headlineCompact]}>{copy.headline}</Text>
|
||||
<Text style={styles.subline}>{copy.subline}</Text>
|
||||
|
||||
<View style={styles.spacer} />
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.cta}
|
||||
onPress={() => {
|
||||
posthog.capture('onboarding_started');
|
||||
router.push('/onboarding/slides');
|
||||
}}
|
||||
activeOpacity={0.86}
|
||||
>
|
||||
<Text style={styles.ctaText}>{copy.cta}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push('/auth/login')} style={styles.loginLink}>
|
||||
<Text style={styles.loginText}>{copy.login}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity onPress={() => router.push('/scanner')} style={styles.demoLink}>
|
||||
<Ionicons name="scan-outline" size={16} color="#4b7c31" />
|
||||
<Text style={styles.demoText}>{copy.demoScan}</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.legal}>{copy.legal}</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#0a110b',
|
||||
},
|
||||
hero: {
|
||||
width: '100%',
|
||||
},
|
||||
heroImageContent: {
|
||||
backgroundColor: '#0a110b',
|
||||
},
|
||||
heroShadeTop: {
|
||||
position: 'absolute',
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
height: 120,
|
||||
backgroundColor: 'rgba(10,17,11,0.4)',
|
||||
},
|
||||
heroSafe: {
|
||||
flex: 1,
|
||||
justifyContent: 'space-between',
|
||||
paddingHorizontal: 20,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
heroTopRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
brandRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
logo: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 10,
|
||||
backgroundColor: '#fff',
|
||||
},
|
||||
brandName: {
|
||||
color: '#ffffff',
|
||||
fontSize: 24,
|
||||
fontWeight: '900',
|
||||
},
|
||||
brandAccent: {
|
||||
color: '#a6d66f',
|
||||
},
|
||||
ratingPill: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 5,
|
||||
backgroundColor: 'rgba(255,255,255,0.18)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.3)',
|
||||
borderRadius: 999,
|
||||
paddingHorizontal: 12,
|
||||
paddingVertical: 6,
|
||||
},
|
||||
ratingText: {
|
||||
color: '#ffffff',
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
testimonialCard: {
|
||||
backgroundColor: 'rgba(255,255,255,0.97)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 4 },
|
||||
shadowOpacity: 0.18,
|
||||
shadowRadius: 14,
|
||||
elevation: 4,
|
||||
},
|
||||
testimonialCardCompact: {
|
||||
padding: 12,
|
||||
},
|
||||
testimonialText: {
|
||||
color: '#191d16',
|
||||
fontSize: 14.5,
|
||||
lineHeight: 20,
|
||||
fontStyle: 'italic',
|
||||
marginBottom: 10,
|
||||
},
|
||||
testimonialMeta: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
testimonialAuthor: {
|
||||
color: '#42493c',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
starsRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 1,
|
||||
},
|
||||
sheet: {
|
||||
flex: 1,
|
||||
backgroundColor: '#fbfaf3',
|
||||
borderTopLeftRadius: 28,
|
||||
borderTopRightRadius: 28,
|
||||
marginTop: -20,
|
||||
},
|
||||
sheetHandle: {
|
||||
alignSelf: 'center',
|
||||
width: 44,
|
||||
height: 5,
|
||||
borderRadius: 3,
|
||||
backgroundColor: 'rgba(16,28,18,0.15)',
|
||||
marginTop: 12,
|
||||
marginBottom: 8,
|
||||
},
|
||||
sheetContent: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 8,
|
||||
paddingBottom: 12,
|
||||
},
|
||||
headline: {
|
||||
color: '#101c12',
|
||||
fontSize: 28,
|
||||
lineHeight: 34,
|
||||
fontWeight: '900',
|
||||
textAlign: 'center',
|
||||
marginBottom: 10,
|
||||
},
|
||||
headlineCompact: {
|
||||
fontSize: 24,
|
||||
lineHeight: 29,
|
||||
},
|
||||
subline: {
|
||||
color: '#5f625d',
|
||||
fontSize: 16,
|
||||
lineHeight: 22,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
},
|
||||
spacer: {
|
||||
flex: 1,
|
||||
minHeight: 12,
|
||||
},
|
||||
cta: {
|
||||
height: 60,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#437824',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 6,
|
||||
},
|
||||
ctaText: {
|
||||
color: '#f8f7ef',
|
||||
fontSize: 18,
|
||||
fontWeight: '800',
|
||||
},
|
||||
loginLink: {
|
||||
alignItems: 'center',
|
||||
paddingVertical: 10,
|
||||
},
|
||||
loginText: {
|
||||
color: '#437824',
|
||||
fontSize: 15,
|
||||
fontWeight: '800',
|
||||
},
|
||||
demoLink: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 7,
|
||||
paddingVertical: 6,
|
||||
marginBottom: 8,
|
||||
},
|
||||
demoText: {
|
||||
color: '#4b7c31',
|
||||
fontSize: 13.5,
|
||||
fontWeight: '700',
|
||||
},
|
||||
legal: {
|
||||
color: '#6b6d68',
|
||||
fontSize: 11,
|
||||
lineHeight: 14,
|
||||
fontWeight: '500',
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
|
||||
@@ -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)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
2122
app/scanner.tsx
2122
app/scanner.tsx
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user