7cb07c09ce
- Voice tab: simplified interface, voice picker improvements - Subscription: Stripe integration, purchase flow updates - Beneficiaries: dashboard, sharing, improved management - Profile: drawer, edit, help, privacy sections - Theme: expanded constants, new colors - New components: MockDashboard, ProfileDrawer, Toast - Backend: Stripe routes additions - Auth: activate, add-loved-one, purchase screens
381 lines
11 KiB
TypeScript
381 lines
11 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
Alert,
|
|
Image,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { Ionicons } from '@expo/vector-icons';
|
|
import { SafeAreaView } from 'react-native-safe-area-context';
|
|
import * as SecureStore from 'expo-secure-store';
|
|
import * as ImagePicker from 'expo-image-picker';
|
|
import { router } from 'expo-router';
|
|
import { useAuth } from '@/contexts/AuthContext';
|
|
import { ProfileDrawer } from '@/components/ProfileDrawer';
|
|
import {
|
|
AppColors,
|
|
BorderRadius,
|
|
FontSizes,
|
|
Spacing,
|
|
FontWeights,
|
|
Shadows,
|
|
AvatarSizes,
|
|
} from '@/constants/theme';
|
|
|
|
export default function ProfileScreen() {
|
|
const { user, logout } = useAuth();
|
|
|
|
// Drawer state
|
|
const [drawerVisible, setDrawerVisible] = useState(false);
|
|
|
|
// Settings states
|
|
const [settings, setSettings] = useState({
|
|
pushNotifications: true,
|
|
emailNotifications: false,
|
|
biometricLogin: false,
|
|
});
|
|
|
|
// Avatar
|
|
const [avatarUri, setAvatarUri] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadAvatar();
|
|
}, [user?.user_id]);
|
|
|
|
const loadAvatar = async () => {
|
|
try {
|
|
const uri = await SecureStore.getItemAsync('userAvatar');
|
|
if (uri) {
|
|
setAvatarUri(uri);
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to load avatar:', err);
|
|
}
|
|
};
|
|
|
|
const handleAvatarPress = async () => {
|
|
const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
|
if (status !== 'granted') {
|
|
Alert.alert('Permission needed', 'Please allow access to your photo library to change avatar.');
|
|
return;
|
|
}
|
|
|
|
const result = await ImagePicker.launchImageLibraryAsync({
|
|
mediaTypes: ['images'],
|
|
allowsEditing: true,
|
|
aspect: [1, 1],
|
|
quality: 0.5,
|
|
});
|
|
|
|
if (!result.canceled && result.assets[0]) {
|
|
const uri = result.assets[0].uri;
|
|
setAvatarUri(uri);
|
|
await SecureStore.setItemAsync('userAvatar', uri);
|
|
}
|
|
};
|
|
|
|
const handleSettingChange = (key: string, value: boolean) => {
|
|
setSettings(prev => ({ ...prev, [key]: value }));
|
|
if (key === 'biometricLogin' && value) {
|
|
Alert.alert('Biometric Login', 'Biometric authentication enabled!');
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
setDrawerVisible(false);
|
|
Alert.alert(
|
|
'Logout',
|
|
'Are you sure you want to logout?',
|
|
[
|
|
{ text: 'Cancel', style: 'cancel' },
|
|
{
|
|
text: 'Logout',
|
|
style: 'destructive',
|
|
onPress: async () => {
|
|
await logout();
|
|
router.replace('/(auth)/login');
|
|
},
|
|
},
|
|
]
|
|
);
|
|
};
|
|
|
|
const userName = user?.user_name || 'User';
|
|
const userInitial = userName.charAt(0).toUpperCase();
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container} edges={['top']}>
|
|
{/* Header */}
|
|
<View style={styles.header}>
|
|
<TouchableOpacity
|
|
style={styles.menuButton}
|
|
onPress={() => setDrawerVisible(true)}
|
|
>
|
|
<Ionicons name="menu" size={24} color={AppColors.textPrimary} />
|
|
</TouchableOpacity>
|
|
<Text style={styles.headerTitle}>Profile</Text>
|
|
<View style={styles.placeholder} />
|
|
</View>
|
|
|
|
<ScrollView
|
|
style={styles.scrollView}
|
|
contentContainerStyle={styles.scrollContent}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Profile Card */}
|
|
<View style={styles.profileCard}>
|
|
<TouchableOpacity style={styles.avatarSection} onPress={handleAvatarPress}>
|
|
<View style={styles.avatarContainer}>
|
|
{avatarUri ? (
|
|
<Image source={{ uri: avatarUri }} style={styles.avatarImage} />
|
|
) : (
|
|
<Text style={styles.avatarText}>{userInitial}</Text>
|
|
)}
|
|
<View style={styles.avatarEditBadge}>
|
|
<Ionicons name="camera" size={14} color={AppColors.white} />
|
|
</View>
|
|
</View>
|
|
</TouchableOpacity>
|
|
|
|
<Text style={styles.userName}>{userName}</Text>
|
|
<Text style={styles.userEmail}>{user?.email || ''}</Text>
|
|
</View>
|
|
|
|
{/* Menu Items */}
|
|
<View style={styles.menuSection}>
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => router.push('/(tabs)/profile/edit')}
|
|
>
|
|
<View style={[styles.menuIcon, { backgroundColor: AppColors.primarySubtle }]}>
|
|
<Ionicons name="person-outline" size={22} color={AppColors.primary} />
|
|
</View>
|
|
<Text style={styles.menuLabel}>Edit Profile</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => router.push('/(tabs)')}
|
|
>
|
|
<View style={[styles.menuIcon, { backgroundColor: AppColors.accentLight }]}>
|
|
<Ionicons name="people-outline" size={22} color={AppColors.accent} />
|
|
</View>
|
|
<Text style={styles.menuLabel}>My Loved Ones</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => setDrawerVisible(true)}
|
|
>
|
|
<View style={[styles.menuIcon, { backgroundColor: AppColors.surfaceSecondary }]}>
|
|
<Ionicons name="settings-outline" size={22} color={AppColors.textSecondary} />
|
|
</View>
|
|
<Text style={styles.menuLabel}>App Settings</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={styles.menuItem}
|
|
onPress={() => router.push('/(tabs)/profile/help')}
|
|
>
|
|
<View style={[styles.menuIcon, { backgroundColor: AppColors.successLight }]}>
|
|
<Ionicons name="help-circle-outline" size={22} color={AppColors.success} />
|
|
</View>
|
|
<Text style={styles.menuLabel}>Help & Support</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</TouchableOpacity>
|
|
|
|
<TouchableOpacity
|
|
style={[styles.menuItem, styles.menuItemLast]}
|
|
onPress={handleLogout}
|
|
>
|
|
<View style={[styles.menuIcon, { backgroundColor: AppColors.errorLight }]}>
|
|
<Ionicons name="log-out-outline" size={22} color={AppColors.error} />
|
|
</View>
|
|
<Text style={[styles.menuLabel, { color: AppColors.error }]}>Log Out</Text>
|
|
<Ionicons name="chevron-forward" size={20} color={AppColors.textMuted} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
</ScrollView>
|
|
|
|
{/* Settings Drawer */}
|
|
<ProfileDrawer
|
|
visible={drawerVisible}
|
|
onClose={() => setDrawerVisible(false)}
|
|
onLogout={handleLogout}
|
|
settings={settings}
|
|
onSettingChange={handleSettingChange}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: AppColors.background,
|
|
},
|
|
header: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
paddingHorizontal: Spacing.lg,
|
|
paddingVertical: Spacing.md,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: AppColors.border,
|
|
},
|
|
menuButton: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: BorderRadius.md,
|
|
backgroundColor: AppColors.surfaceSecondary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
headerTitle: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.semibold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
placeholder: {
|
|
width: 40,
|
|
},
|
|
scrollView: {
|
|
flex: 1,
|
|
},
|
|
scrollContent: {
|
|
padding: Spacing.lg,
|
|
paddingBottom: Spacing.xxl,
|
|
},
|
|
// Profile Card
|
|
profileCard: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.xl,
|
|
padding: Spacing.xl,
|
|
alignItems: 'center',
|
|
marginBottom: Spacing.lg,
|
|
...Shadows.sm,
|
|
},
|
|
avatarSection: {
|
|
marginBottom: Spacing.md,
|
|
},
|
|
avatarContainer: {
|
|
width: AvatarSizes.xl,
|
|
height: AvatarSizes.xl,
|
|
borderRadius: AvatarSizes.xl / 2,
|
|
backgroundColor: AppColors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
position: 'relative',
|
|
},
|
|
avatarImage: {
|
|
width: AvatarSizes.xl,
|
|
height: AvatarSizes.xl,
|
|
borderRadius: AvatarSizes.xl / 2,
|
|
},
|
|
avatarText: {
|
|
fontSize: FontSizes['3xl'],
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.white,
|
|
},
|
|
avatarEditBadge: {
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
right: 0,
|
|
width: 32,
|
|
height: 32,
|
|
borderRadius: 16,
|
|
backgroundColor: AppColors.primary,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderWidth: 3,
|
|
borderColor: AppColors.surface,
|
|
},
|
|
userName: {
|
|
fontSize: FontSizes['2xl'],
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
marginBottom: Spacing.xs,
|
|
},
|
|
userEmail: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.textSecondary,
|
|
},
|
|
// Menu Section
|
|
menuSection: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.xl,
|
|
overflow: 'hidden',
|
|
...Shadows.sm,
|
|
},
|
|
menuItem: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: Spacing.md,
|
|
paddingHorizontal: Spacing.lg,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: AppColors.border,
|
|
},
|
|
menuItemLast: {
|
|
borderBottomWidth: 0,
|
|
},
|
|
menuIcon: {
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: BorderRadius.md,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
marginRight: Spacing.md,
|
|
},
|
|
menuLabel: {
|
|
flex: 1,
|
|
fontSize: FontSizes.base,
|
|
color: AppColors.textPrimary,
|
|
fontWeight: FontWeights.medium,
|
|
},
|
|
// Legacy styles (keeping for potential use)
|
|
subscriptionCard: {
|
|
backgroundColor: AppColors.surface,
|
|
borderRadius: BorderRadius.xl,
|
|
padding: Spacing.lg,
|
|
marginBottom: Spacing.lg,
|
|
...Shadows.sm,
|
|
},
|
|
subscriptionCardHeader: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: Spacing.md,
|
|
},
|
|
subscriptionIconContainer: {
|
|
width: 44,
|
|
height: 44,
|
|
borderRadius: BorderRadius.lg,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
subscriptionIconActive: {
|
|
backgroundColor: AppColors.successLight,
|
|
},
|
|
subscriptionIconInactive: {
|
|
backgroundColor: `${AppColors.warning}20`,
|
|
},
|
|
subscriptionHeaderText: {
|
|
flex: 1,
|
|
},
|
|
subscriptionCardTitle: {
|
|
fontSize: FontSizes.lg,
|
|
fontWeight: FontWeights.bold,
|
|
color: AppColors.textPrimary,
|
|
},
|
|
subscriptionCardSubtitle: {
|
|
fontSize: FontSizes.sm,
|
|
color: AppColors.textSecondary,
|
|
marginTop: 2,
|
|
},
|
|
});
|