108 lines
4.0 KiB
TypeScript
108 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
|
|
import { useAppTheme } from '@theme';
|
|
import { PersonIcon, ChevronRightIcon, ClipboardIcon, StarIcon } from '@icons';
|
|
import { useAppDispatch } from '@store';
|
|
import { logout } from '@store/commonReducers/auth';
|
|
import { useNavigation, CommonActions } from '@react-navigation/native';
|
|
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
|
|
import { AppStackParamList } from '@navigation/navigationTypes';
|
|
import { RouteNames } from '@utils/constants';
|
|
import { getStyles } from './profileScreen.styles';
|
|
|
|
export const ProfileScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
const navigation = useNavigation<NativeStackNavigationProp<AppStackParamList>>();
|
|
|
|
const menuItems = [
|
|
{ id: 'personal', title: 'Personal Info', icon: <PersonIcon size={20} color={colors.primary} /> },
|
|
{ id: 'vehicle', title: 'Vehicle Info', icon: <ClipboardIcon size={20} color={colors.primary} /> },
|
|
{ id: 'documents', title: 'Documents', icon: <ClipboardIcon size={20} color={colors.primary} />, route: RouteNames.Documents },
|
|
{ id: 'bank', title: 'Bank Details', icon: <ClipboardIcon size={20} color={colors.primary} /> },
|
|
{ id: 'emergency', title: 'Emergency Contact', icon: <PersonIcon size={20} color={colors.primary} /> },
|
|
{ id: 'settings', title: 'App Settings', icon: <PersonIcon size={20} color={colors.primary} /> },
|
|
];
|
|
|
|
const handleMenuPress = (item: any) => {
|
|
if (item.route) {
|
|
navigation.navigate(item.route);
|
|
} else {
|
|
Alert.alert('Menu Option', `Viewing ${item.title} section...`);
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
Alert.alert(
|
|
'Logout',
|
|
'Are you sure you want to log out of SG Delivery Partner?',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Logout',
|
|
style: 'destructive',
|
|
onPress: () => {
|
|
dispatch(logout());
|
|
// Reset navigation stack to the Auth Stack
|
|
navigation.dispatch(
|
|
CommonActions.reset({
|
|
index: 0,
|
|
routes: [{ name: 'Auth' }],
|
|
})
|
|
);
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
|
|
{/* Header User Card */}
|
|
<View style={styles.headerCard}>
|
|
<View style={styles.avatar}>
|
|
<PersonIcon size={44} color={colors.primary} />
|
|
</View>
|
|
|
|
<Text style={styles.name}>Rahul Kumar</Text>
|
|
|
|
<View style={styles.ratingRow}>
|
|
<StarIcon size={16} color={colors.warning} />
|
|
<Text style={styles.ratingText}>4.8</Text>
|
|
<Text style={styles.tripsText}>(128 Trips)</Text>
|
|
</View>
|
|
|
|
<Text style={styles.idText}>ID: DP126478</Text>
|
|
</View>
|
|
|
|
{/* Profile Menu options */}
|
|
<View style={styles.menuSection}>
|
|
{menuItems.map((item, idx) => (
|
|
<TouchableOpacity
|
|
key={item.id}
|
|
style={[styles.menuItem, idx === menuItems.length - 1 && { borderBottomWidth: 0 }]}
|
|
activeOpacity={0.7}
|
|
onPress={() => handleMenuPress(item)}
|
|
>
|
|
<View style={styles.menuItemLeft}>
|
|
<View style={styles.menuIconContainer}>{item.icon}</View>
|
|
<Text style={styles.menuText}>{item.title}</Text>
|
|
</View>
|
|
<ChevronRightIcon size={20} color={colors.textSecondary} />
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Logout Button */}
|
|
<TouchableOpacity style={styles.logoutBtn} activeOpacity={0.8} onPress={handleLogout}>
|
|
<Text style={styles.logoutText}>Log Out</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default ProfileScreen;
|