Onboarding
This commit is contained in:
341
app/onboarding/customize.tsx
Normal file
341
app/onboarding/customize.tsx
Normal file
@@ -0,0 +1,341 @@
|
||||
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',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user