342 lines
10 KiB
TypeScript
342 lines
10 KiB
TypeScript
import React from 'react';
|
|
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { useRouter } from 'expo-router';
|
|
import { usePostHog } from 'posthog-react-native';
|
|
import { ThemeBackdrop } from '../../components/ThemeBackdrop';
|
|
import { useColors } from '../../constants/Colors';
|
|
import { useApp } from '../../context/AppContext';
|
|
import { OnboardingProgressService } from '../../services/onboardingProgressService';
|
|
import { AppearanceMode, ColorPalette, Language } from '../../types';
|
|
|
|
const PALETTE_SWATCHES: Record<ColorPalette, string[]> = {
|
|
forest: ['#5fa779', '#3d7f57'],
|
|
ocean: ['#5a90be', '#3d6f99'],
|
|
sunset: ['#c98965', '#a36442'],
|
|
mono: ['#7b8796', '#5b6574'],
|
|
};
|
|
|
|
export default function CustomizeOnboardingScreen() {
|
|
const router = useRouter();
|
|
const posthog = usePostHog();
|
|
const {
|
|
session,
|
|
isDarkMode,
|
|
appearanceMode,
|
|
colorPalette,
|
|
language,
|
|
setAppearanceMode,
|
|
setColorPalette,
|
|
changeLanguage,
|
|
t,
|
|
} = useApp();
|
|
const colors = useColors(isDarkMode, colorPalette);
|
|
|
|
const finishCustomization = () => {
|
|
if (session?.userId) {
|
|
OnboardingProgressService.completeStep(session.userId, 'customize');
|
|
}
|
|
|
|
posthog.capture('onboarding_customization_completed', {
|
|
appearance_mode: appearanceMode,
|
|
color_palette: colorPalette,
|
|
language,
|
|
});
|
|
router.back();
|
|
};
|
|
|
|
const skipCustomization = () => {
|
|
posthog.capture('onboarding_customization_skipped');
|
|
router.back();
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: colors.background }]}>
|
|
<ThemeBackdrop colors={colors} />
|
|
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right', 'bottom']}>
|
|
<View style={styles.header}>
|
|
<TouchableOpacity onPress={skipCustomization} style={[styles.iconBtn, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
|
<Ionicons name="close" size={20} color={colors.text} />
|
|
</TouchableOpacity>
|
|
<View style={styles.headerCopy}>
|
|
<Text style={[styles.eyebrow, { color: colors.primary }]}>{t.onboardingChecklistIntro}</Text>
|
|
<Text style={[styles.title, { color: colors.text }]}>{t.customizeOnboardingTitle}</Text>
|
|
<Text style={[styles.subtitle, { color: colors.textSecondary }]}>{t.customizeOnboardingSubtitle}</Text>
|
|
</View>
|
|
</View>
|
|
|
|
<ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false}>
|
|
<View style={[styles.previewCard, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
|
<Text style={[styles.previewLabel, { color: colors.textMuted }]}>{t.customizeOnboardingPreview}</Text>
|
|
<Text style={[styles.previewTitle, { color: colors.text }]}>{t.onboardingTagline}</Text>
|
|
<View style={styles.previewMeta}>
|
|
<View style={[styles.previewChip, { backgroundColor: colors.primarySoft }]}>
|
|
<Text style={[styles.previewChipText, { color: colors.primaryDark }]}>{appearanceMode}</Text>
|
|
</View>
|
|
<View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
|
|
<Text style={[styles.previewChipText, { color: colors.text }]}>{colorPalette}</Text>
|
|
</View>
|
|
<View style={[styles.previewChip, { backgroundColor: colors.surfaceMuted }]}>
|
|
<Text style={[styles.previewChipText, { color: colors.text }]}>{language.toUpperCase()}</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
|
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.appearanceMode}</Text>
|
|
<View style={styles.segmentedControl}>
|
|
{(['system', 'light', 'dark'] as AppearanceMode[]).map((mode) => {
|
|
const isActive = appearanceMode === mode;
|
|
const label = mode === 'system' ? t.themeSystem : mode === 'light' ? t.themeLight : t.themeDark;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={mode}
|
|
style={[styles.segmentBtn, isActive && { backgroundColor: colors.primary }]}
|
|
onPress={() => setAppearanceMode(mode)}
|
|
>
|
|
<Text style={[styles.segmentText, { color: isActive ? colors.onPrimary : colors.text }]}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
|
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.colorPalette}</Text>
|
|
<View style={styles.swatchContainer}>
|
|
{(['forest', 'ocean', 'sunset', 'mono'] as ColorPalette[]).map((palette) => {
|
|
const isActive = colorPalette === palette;
|
|
const swatch = PALETTE_SWATCHES[palette];
|
|
const label =
|
|
palette === 'forest'
|
|
? t.paletteForest
|
|
: palette === 'ocean'
|
|
? t.paletteOcean
|
|
: palette === 'sunset'
|
|
? t.paletteSunset
|
|
: t.paletteMono;
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={palette}
|
|
style={[styles.swatchWrap, isActive && { borderColor: colors.primary }]}
|
|
onPress={() => setColorPalette(palette)}
|
|
>
|
|
<View style={[styles.swatch, { backgroundColor: swatch[0] }]} />
|
|
<Text style={[styles.swatchLabel, { color: colors.text }]}>{label}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
|
|
<View style={[styles.card, { backgroundColor: colors.surface, borderColor: colors.border }]}>
|
|
<Text style={[styles.sectionTitle, { color: colors.text }]}>{t.language}</Text>
|
|
<View style={styles.languageRow}>
|
|
{(['en', 'de', 'es'] as Language[]).map((lang) => {
|
|
const isActive = language === lang;
|
|
const label = lang === 'en' ? 'English' : lang === 'de' ? 'Deutsch' : 'Español';
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
key={lang}
|
|
style={[styles.languageBtn, isActive && { backgroundColor: colors.primary }]}
|
|
onPress={() => changeLanguage(lang)}
|
|
>
|
|
<Text style={{ color: isActive ? colors.onPrimary : colors.text, fontWeight: '600' }}>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
<View style={styles.footer}>
|
|
<TouchableOpacity
|
|
style={[styles.secondaryBtn, { borderColor: colors.borderStrong, backgroundColor: colors.surface }]}
|
|
onPress={skipCustomization}
|
|
>
|
|
<Text style={[styles.secondaryBtnText, { color: colors.text }]}>{t.customizeOnboardingSkip}</Text>
|
|
</TouchableOpacity>
|
|
<TouchableOpacity style={[styles.primaryBtn, { backgroundColor: colors.primary }]} onPress={finishCustomization}>
|
|
<Text style={[styles.primaryBtnText, { color: colors.onPrimary }]}>{t.customizeOnboardingContinue}</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</SafeAreaView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
safeArea: {
|
|
flex: 1,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
gap: 14,
|
|
paddingHorizontal: 20,
|
|
paddingTop: 12,
|
|
},
|
|
iconBtn: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
headerCopy: {
|
|
flex: 1,
|
|
gap: 6,
|
|
paddingTop: 2,
|
|
},
|
|
eyebrow: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
letterSpacing: 0.4,
|
|
textTransform: 'uppercase',
|
|
},
|
|
title: {
|
|
fontSize: 28,
|
|
fontWeight: '800',
|
|
lineHeight: 32,
|
|
},
|
|
subtitle: {
|
|
fontSize: 14,
|
|
lineHeight: 20,
|
|
},
|
|
content: {
|
|
padding: 20,
|
|
gap: 16,
|
|
},
|
|
previewCard: {
|
|
borderWidth: 1,
|
|
borderRadius: 24,
|
|
padding: 18,
|
|
gap: 10,
|
|
},
|
|
previewLabel: {
|
|
fontSize: 11,
|
|
fontWeight: '700',
|
|
letterSpacing: 0.5,
|
|
textTransform: 'uppercase',
|
|
},
|
|
previewTitle: {
|
|
fontSize: 20,
|
|
fontWeight: '700',
|
|
},
|
|
previewMeta: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 8,
|
|
},
|
|
previewChip: {
|
|
borderRadius: 999,
|
|
paddingHorizontal: 10,
|
|
paddingVertical: 6,
|
|
},
|
|
previewChipText: {
|
|
fontSize: 12,
|
|
fontWeight: '700',
|
|
},
|
|
card: {
|
|
padding: 18,
|
|
borderRadius: 20,
|
|
borderWidth: 1,
|
|
gap: 14,
|
|
},
|
|
sectionTitle: {
|
|
fontSize: 15,
|
|
fontWeight: '700',
|
|
},
|
|
segmentedControl: {
|
|
flexDirection: 'row',
|
|
backgroundColor: '#00000010',
|
|
borderRadius: 14,
|
|
padding: 4,
|
|
},
|
|
segmentBtn: {
|
|
flex: 1,
|
|
paddingVertical: 12,
|
|
borderRadius: 10,
|
|
alignItems: 'center',
|
|
},
|
|
segmentText: {
|
|
fontSize: 14,
|
|
fontWeight: '600',
|
|
},
|
|
swatchContainer: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
gap: 10,
|
|
},
|
|
swatchWrap: {
|
|
flex: 1,
|
|
alignItems: 'center',
|
|
paddingVertical: 8,
|
|
borderRadius: 16,
|
|
borderWidth: 2,
|
|
borderColor: 'transparent',
|
|
gap: 8,
|
|
},
|
|
swatch: {
|
|
width: 52,
|
|
height: 52,
|
|
borderRadius: 26,
|
|
},
|
|
swatchLabel: {
|
|
fontSize: 12,
|
|
fontWeight: '600',
|
|
},
|
|
languageRow: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
gap: 12,
|
|
},
|
|
languageBtn: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12,
|
|
borderRadius: 14,
|
|
backgroundColor: '#00000010',
|
|
},
|
|
footer: {
|
|
flexDirection: 'row',
|
|
gap: 12,
|
|
paddingHorizontal: 20,
|
|
paddingBottom: 20,
|
|
},
|
|
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',
|
|
},
|
|
});
|