96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
KeyboardAvoidingView,
|
|
Platform,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './completeProfileScreen.styles';
|
|
import { CustomInput, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useAppDispatch } from '../../../hooks/useAppDispatch';
|
|
import { completeProfile } from '../../../store/commonreducers/auth';
|
|
import { AuthStackParamList } from '../../../navigation/authStack';
|
|
|
|
type NavProp = StackNavigationProp<AuthStackParamList, 'CompleteProfileScreen'>;
|
|
|
|
const LOCATION_LABELS = ['Home', 'Work', 'Other'];
|
|
|
|
export const CompleteProfileScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<NavProp>();
|
|
const dispatch = useAppDispatch();
|
|
|
|
const [name, setName] = useState('');
|
|
const [email, setEmail] = useState('');
|
|
const [selectedLabel, setSelectedLabel] = useState('Home');
|
|
|
|
const handleSave = () => {
|
|
dispatch(completeProfile({ name, email, locationLabels: [selectedLabel] }));
|
|
navigation.navigate('PreferencesScreen');
|
|
};
|
|
|
|
return (
|
|
<KeyboardAvoidingView
|
|
style={styles.container}
|
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
|
>
|
|
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
|
<Text style={styles.title}>Complete Profile</Text>
|
|
<Text style={styles.subtitle}>Tell us about yourself</Text>
|
|
|
|
<View style={styles.form}>
|
|
<CustomInput
|
|
label="Name"
|
|
placeholder="John Doe"
|
|
value={name}
|
|
onChangeText={setName}
|
|
/>
|
|
<CustomInput
|
|
label="Email"
|
|
placeholder="john@example.com"
|
|
keyboardType="email-address"
|
|
value={email}
|
|
onChangeText={setEmail}
|
|
/>
|
|
|
|
<Text style={styles.labelText}>Location Label</Text>
|
|
<View style={styles.labelRow}>
|
|
{LOCATION_LABELS.map((label) => (
|
|
<TouchableOpacity
|
|
key={label}
|
|
style={[
|
|
styles.labelChip,
|
|
selectedLabel === label && styles.labelChipSelected,
|
|
]}
|
|
onPress={() => setSelectedLabel(label)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.labelChipText,
|
|
selectedLabel === label && styles.labelChipTextSelected,
|
|
]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
<PrimaryButton
|
|
title="Save & Continue"
|
|
onPress={handleSave}
|
|
disabled={!name || !email}
|
|
/>
|
|
</ScrollView>
|
|
</KeyboardAvoidingView>
|
|
);
|
|
};
|