initial
This commit is contained in:
@@ -0,0 +1,260 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
Alert,
|
||||
Linking,
|
||||
Pressable,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { api, USE_MOCK } from '@/api';
|
||||
import { AppBar } from '@/components/AppBar';
|
||||
import { Avatar, Badge, Button, Card, SectionTitle } from '@/components/ui';
|
||||
import { useAuth } from '@/auth/AuthContext';
|
||||
import { LanguagePreference, useI18n } from '@/i18n';
|
||||
import { colors, fontSize, radii, spacing } from '@/theme';
|
||||
|
||||
// Both stores check these open a real page before accepting a build.
|
||||
const PRIVACY_URL = 'https://casadoc.app/privacy';
|
||||
const TERMS_URL = 'https://casadoc.app/terms';
|
||||
|
||||
export default function ProfileScreen() {
|
||||
const { user, signOut, deleteAccount } = useAuth();
|
||||
const router = useRouter();
|
||||
const { t, preference, setPreference } = useI18n();
|
||||
const [signingOut, setSigningOut] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
const propsQuery = useQuery({ queryKey: ['properties'], queryFn: () => api.properties.list() });
|
||||
|
||||
const fullName = [user?.firstName, user?.lastName].filter(Boolean).join(' ') || user?.email || '—';
|
||||
const initials = ((user?.firstName?.[0] ?? '') + (user?.lastName?.[0] ?? '')).toUpperCase() || 'U';
|
||||
|
||||
const languageOptions: { value: LanguagePreference; label: string; sub?: string }[] = [
|
||||
{ value: 'system', label: t('profile.languageSystem'), sub: t('profile.languageSystemSub') },
|
||||
{ value: 'en', label: 'English' },
|
||||
{ value: 'it', label: 'Italiano' },
|
||||
];
|
||||
|
||||
// Both stores require in-app deletion, with the consequences spelled out.
|
||||
function confirmDelete() {
|
||||
Alert.alert(t('profile.deleteConfirmTitle'), t('profile.deleteConfirmBody'), [
|
||||
{ text: t('common.cancel'), style: 'cancel' },
|
||||
{
|
||||
text: t('profile.deleteConfirmCta'),
|
||||
style: 'destructive',
|
||||
onPress: async () => {
|
||||
setDeleting(true);
|
||||
try {
|
||||
await deleteAccount();
|
||||
} catch (e: any) {
|
||||
Alert.alert(t('profile.deleteFailed'), e?.message ?? t('common.tryAgain'));
|
||||
} finally {
|
||||
setDeleting(false);
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
}
|
||||
|
||||
async function onSignOut() {
|
||||
setSigningOut(true);
|
||||
try {
|
||||
await signOut();
|
||||
} finally {
|
||||
setSigningOut(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: colors.bgApp }}>
|
||||
<AppBar title={t('profile.title')} large />
|
||||
<ScrollView contentContainerStyle={styles.body}>
|
||||
<Card style={{ padding: spacing[5] }}>
|
||||
<View style={styles.hero}>
|
||||
{user?.avatar ? (
|
||||
<Image source={{ uri: user.avatar }} style={styles.heroAvatar} />
|
||||
) : (
|
||||
<Avatar initials={initials} size={60} />
|
||||
)}
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.name}>{fullName}</Text>
|
||||
<Text style={styles.email}>{user?.email}</Text>
|
||||
<View style={{ flexDirection: 'row', marginTop: 8 }}>
|
||||
<Badge
|
||||
label={t('properties.count', { count: propsQuery.data?.length ?? 0 })}
|
||||
tone="info"
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Card>
|
||||
|
||||
{/* Language */}
|
||||
<SectionTitle title={t('profile.language')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
{languageOptions.map((opt, i) => {
|
||||
const selected = preference === opt.value;
|
||||
return (
|
||||
<React.Fragment key={opt.value}>
|
||||
{i > 0 ? <Divider /> : null}
|
||||
<Pressable
|
||||
style={styles.row}
|
||||
onPress={() => setPreference(opt.value)}
|
||||
accessibilityRole="radio"
|
||||
accessibilityState={{ selected }}
|
||||
>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons
|
||||
name={opt.value === 'system' ? 'phone-portrait-outline' : 'language-outline'}
|
||||
size={18}
|
||||
color={colors.teal600}
|
||||
/>
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{opt.label}</Text>
|
||||
{opt.sub ? <Text style={styles.rowSub}>{opt.sub}</Text> : null}
|
||||
</View>
|
||||
<View style={[styles.radio, selected && styles.radioOn]}>
|
||||
{selected ? <View style={styles.radioDot} /> : null}
|
||||
</View>
|
||||
</Pressable>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</Card>
|
||||
|
||||
{/* Account */}
|
||||
<SectionTitle title={t('profile.account')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
<Pressable style={styles.row} onPress={() => router.push('/profile/edit')}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="person-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{t('profile.personalDetails')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.personalDetailsSub')}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
<Divider />
|
||||
<Pressable style={styles.row} onPress={() => router.push('/profile/password')}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="lock-closed-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.rowTitle}>{t('profile.security')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.securitySub')}</Text>
|
||||
</View>
|
||||
<Ionicons name="chevron-forward" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
</Card>
|
||||
|
||||
{/* Legal — store listings require these to be reachable. */}
|
||||
<SectionTitle title={t('profile.legal')} />
|
||||
<Card style={{ padding: 0 }}>
|
||||
<Pressable style={styles.row} onPress={() => Linking.openURL(PRIVACY_URL)}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="shield-checkmark-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.privacy')}</Text>
|
||||
<Ionicons name="open-outline" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
<Divider />
|
||||
<Pressable style={styles.row} onPress={() => Linking.openURL(TERMS_URL)}>
|
||||
<View style={styles.rowIcon}>
|
||||
<Ionicons name="document-text-outline" size={18} color={colors.teal600} />
|
||||
</View>
|
||||
<Text style={[styles.rowTitle, { flex: 1 }]}>{t('profile.terms')}</Text>
|
||||
<Ionicons name="open-outline" size={18} color={colors.slate400} />
|
||||
</Pressable>
|
||||
</Card>
|
||||
|
||||
{USE_MOCK ? <Text style={styles.demo}>{t('profile.demoMode')}</Text> : null}
|
||||
|
||||
<SectionTitle title={t('profile.dangerZone')} />
|
||||
<Pressable style={styles.dangerRow} onPress={deleting ? undefined : confirmDelete}>
|
||||
<View style={styles.dangerIcon}>
|
||||
<Ionicons name="trash-outline" size={18} color={colors.danger600} />
|
||||
</View>
|
||||
<View style={{ flex: 1 }}>
|
||||
<Text style={styles.dangerTitle}>{t('profile.deleteAccount')}</Text>
|
||||
<Text style={styles.rowSub}>{t('profile.deleteAccountSub')}</Text>
|
||||
</View>
|
||||
{deleting ? <ActivityIndicator color={colors.danger600} /> : null}
|
||||
</Pressable>
|
||||
|
||||
<Button
|
||||
title={t('profile.signOut')}
|
||||
variant="ghost"
|
||||
icon="log-out-outline"
|
||||
block
|
||||
loading={signingOut}
|
||||
onPress={onSignOut}
|
||||
style={{ marginTop: spacing[5] }}
|
||||
/>
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function Divider() {
|
||||
return <View style={styles.divider} />;
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
body: { padding: spacing[4], paddingBottom: spacing[9] },
|
||||
heroAvatar: { width: 60, height: 60, borderRadius: 30, backgroundColor: colors.surfaceSunken },
|
||||
hero: { flexDirection: 'row', alignItems: 'center', gap: spacing[4] },
|
||||
name: { fontSize: fontSize.lg, fontWeight: '700', color: colors.ink },
|
||||
email: { fontSize: fontSize.sm, color: colors.textMuted, marginTop: 2 },
|
||||
row: { flexDirection: 'row', alignItems: 'center', gap: spacing[3], padding: spacing[4] },
|
||||
rowIcon: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.teal50,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
rowTitle: { fontSize: fontSize.base, fontWeight: '600', color: colors.ink },
|
||||
rowSub: { fontSize: fontSize.xs, color: colors.textMuted, marginTop: 2 },
|
||||
divider: { height: 1, backgroundColor: colors.border, marginLeft: 58 },
|
||||
radio: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
borderWidth: 2,
|
||||
borderColor: colors.borderStrong,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
radioOn: { borderColor: colors.teal600 },
|
||||
radioDot: { width: 10, height: 10, borderRadius: 5, backgroundColor: colors.teal600 },
|
||||
dangerRow: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: spacing[3],
|
||||
padding: spacing[4],
|
||||
backgroundColor: colors.surface,
|
||||
borderWidth: 1,
|
||||
borderColor: '#f0c2c9',
|
||||
borderRadius: radii.lg,
|
||||
},
|
||||
dangerIcon: {
|
||||
width: 38,
|
||||
height: 38,
|
||||
borderRadius: 10,
|
||||
backgroundColor: colors.dangerBg,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
dangerTitle: { fontSize: fontSize.base, fontWeight: '700', color: colors.danger600 },
|
||||
demo: { textAlign: 'center', color: colors.textMuted2, fontSize: fontSize.xs, marginTop: spacing[5] },
|
||||
});
|
||||
Reference in New Issue
Block a user