91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
Switch,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './preferencesScreen.styles';
|
|
import { PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { AuthStackParamList } from '../../../navigation/authStack';
|
|
|
|
type NavProp = StackNavigationProp<AuthStackParamList, 'PreferencesScreen'>;
|
|
|
|
const CATEGORIES = [
|
|
{ key: 'food', icon: '🍔', label: 'Food' },
|
|
{ key: 'groceries', icon: '🛒', label: 'Groceries' },
|
|
{ key: 'pharmacy', icon: '💊', label: 'Pharmacy' },
|
|
{ key: 'others', icon: '📦', label: 'Others' },
|
|
];
|
|
|
|
export const PreferencesScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<NavProp>();
|
|
|
|
const [selectedCategories, setSelectedCategories] = useState<string[]>(['food']);
|
|
const [notificationsEnabled, setNotificationsEnabled] = useState(true);
|
|
|
|
const toggleCategory = (key: string) => {
|
|
setSelectedCategories((prev) =>
|
|
prev.includes(key)
|
|
? prev.filter((c) => c !== key)
|
|
: [...prev, key],
|
|
);
|
|
};
|
|
|
|
return (
|
|
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
|
|
<Text style={styles.title}>Preferences</Text>
|
|
<Text style={styles.subtitle}>Select your interests</Text>
|
|
|
|
<View style={styles.grid}>
|
|
{CATEGORIES.map((cat) => (
|
|
<TouchableOpacity
|
|
key={cat.key}
|
|
style={[
|
|
styles.gridItem,
|
|
selectedCategories.includes(cat.key) && styles.gridItemSelected,
|
|
]}
|
|
onPress={() => toggleCategory(cat.key)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.gridIcon}>{cat.icon}</Text>
|
|
<Text
|
|
style={[
|
|
styles.gridLabel,
|
|
selectedCategories.includes(cat.key) && styles.gridLabelSelected,
|
|
]}
|
|
>
|
|
{cat.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<View style={styles.toggleRow}>
|
|
<View>
|
|
<Text style={styles.toggleLabel}>Enable Notifications</Text>
|
|
<Text style={styles.toggleSubtext}>Get order updates and offers</Text>
|
|
</View>
|
|
<Switch
|
|
value={notificationsEnabled}
|
|
onValueChange={setNotificationsEnabled}
|
|
trackColor={{ false: colors.border, true: colors.primary }}
|
|
thumbColor={colors.white}
|
|
/>
|
|
</View>
|
|
|
|
<PrimaryButton
|
|
title="Continue"
|
|
onPress={() => navigation.navigate('OnboardingCompleteScreen')}
|
|
style={{ marginTop: 32 }}
|
|
/>
|
|
</ScrollView>
|
|
);
|
|
};
|