261 lines
9.7 KiB
TypeScript
261 lines
9.7 KiB
TypeScript
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] },
|
|
});
|