61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
|
|
import { getStyles } from './accountScreen.styles';
|
|
import { Header, PrimaryButton } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { useAppDispatch, useAppSelector } from '../../../hooks/useAppDispatch';
|
|
import { logout } from '../../../store/authSlice';
|
|
|
|
const MENU_ITEMS = [
|
|
{ icon: '📍', label: 'My Addresses' },
|
|
{ icon: '💳', label: 'Payment Methods' },
|
|
{ icon: '🔔', label: 'Notifications' },
|
|
{ icon: '❓', label: 'Help & Support' },
|
|
{ icon: '📋', label: 'Terms & Conditions' },
|
|
{ icon: '🔒', label: 'Privacy Policy' },
|
|
];
|
|
|
|
export const AccountScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const dispatch = useAppDispatch();
|
|
const user = useAppSelector((state) => state.auth.user);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Account" />
|
|
<ScrollView contentContainerStyle={styles.content}>
|
|
<View style={styles.profileCard}>
|
|
<View style={styles.avatar}>
|
|
<Text style={styles.avatarText}>
|
|
{user?.name?.charAt(0)?.toUpperCase() || 'U'}
|
|
</Text>
|
|
</View>
|
|
<Text style={styles.profileName}>{user?.name || 'User'}</Text>
|
|
<Text style={styles.profilePhone}>{user?.mobileNumber || '+91 98765 43210'}</Text>
|
|
</View>
|
|
|
|
<View style={styles.menuSection}>
|
|
{MENU_ITEMS.map((item, index) => (
|
|
<TouchableOpacity
|
|
key={index}
|
|
style={styles.menuItem}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text style={styles.menuIcon}>{item.icon}</Text>
|
|
<Text style={styles.menuLabel}>{item.label}</Text>
|
|
<Text style={styles.menuArrow}>{'>'}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
<PrimaryButton
|
|
title="Logout"
|
|
onPress={() => dispatch(logout())}
|
|
style={{ marginTop: 24 }}
|
|
/>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
};
|