141 lines
4.2 KiB
TypeScript
141 lines
4.2 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, useAppSelector } 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 { profile } = useAppSelector(state => state.accountInfo);
|
|
|
|
const menuItems = [
|
|
{
|
|
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} />,
|
|
route: RouteNames.BankDetails,
|
|
},
|
|
{
|
|
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}>{profile?.user?.name}</Text>
|
|
|
|
<View style={styles.ratingRow}>
|
|
<StarIcon size={16} color={colors.warning} />
|
|
<Text style={styles.ratingText}>{profile?.rating}</Text>
|
|
<Text style={styles.tripsText}>{profile?.user?.email}</Text>
|
|
</View>
|
|
|
|
<Text style={styles.idText}>ID: {profile?.user?.id}</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;
|