409 lines
14 KiB
TypeScript
409 lines
14 KiB
TypeScript
import { useTheme } from '@/components/ThemeContext';
|
|
import { formatNumber, formatPhone, normalizeDigits } from '@/constants/formatPhone';
|
|
import { user_api } from '@/screens/profile/lib/api';
|
|
import { UserInfoResponseData } from '@/screens/profile/lib/type';
|
|
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { useRouter } from 'expo-router';
|
|
import { ArrowLeft, Edit2, Plus } from 'lucide-react-native';
|
|
import { useEffect, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
ActivityIndicator,
|
|
Image,
|
|
Pressable,
|
|
ScrollView,
|
|
StyleSheet,
|
|
Text,
|
|
TextInput,
|
|
TouchableOpacity,
|
|
View
|
|
} from 'react-native';
|
|
import { Toast } from 'toastify-react-native';
|
|
|
|
export default function PersonalInfoScreen() {
|
|
const router = useRouter();
|
|
const queryClient = useQueryClient();
|
|
const { isDark } = useTheme();
|
|
const { t } = useTranslation();
|
|
|
|
const theme = {
|
|
background: isDark ? '#0f172a' : '#f8fafc',
|
|
cardBg: isDark ? '#1e293b' : '#ffffff',
|
|
text: isDark ? '#f8fafc' : '#0f172a',
|
|
textSecondary: isDark ? '#94a3b8' : '#64748b',
|
|
textTertiary: isDark ? '#64748b' : '#94a3b8',
|
|
inputBg: isDark ? '#1e293b' : '#f1f5f9',
|
|
inputBorder: isDark ? '#334155' : '#e2e8f0',
|
|
primary: '#3b82f6',
|
|
chipBg: isDark ? '#1e293b' : '#e0e7ff',
|
|
chipText: isDark ? '#f8fafc' : '#4338ca',
|
|
divider: isDark ? '#334155' : '#cbd5e1',
|
|
placeholder: isDark ? '#64748b' : '#94a3b8',
|
|
};
|
|
|
|
const [isEditing, setIsEditing] = useState(false);
|
|
const [editData, setEditData] = useState<UserInfoResponseData | null>(null);
|
|
const [phone, setPhone] = useState('');
|
|
const [focused, setFocused] = useState(false);
|
|
const [showCategories, setShowCategories] = useState(false);
|
|
const [selectedCategories, setSelectedCategories] = useState<any[]>([]);
|
|
|
|
const { data: me, isLoading } = useQuery({
|
|
queryKey: ['get_me'],
|
|
queryFn: () => user_api.getMe(),
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (me?.data.data) {
|
|
setEditData(me.data);
|
|
|
|
const rawPhone = normalizeDigits(me.data.data.phone || '');
|
|
setPhone(rawPhone.startsWith('998') ? rawPhone.slice(3) : rawPhone);
|
|
|
|
setSelectedCategories(me.data.data.activate_types ?? []);
|
|
}
|
|
}, [me]);
|
|
|
|
const updateMutation = useMutation({
|
|
mutationFn: (body: any) => user_api.updateMe(body),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ['get_me'] });
|
|
setIsEditing(false);
|
|
setShowCategories(false);
|
|
Toast.success(t("Ma'lumotlar yangilandi"));
|
|
},
|
|
onError: () => {
|
|
Toast.error(t('Yangilashda xatolik yuz berdi'));
|
|
},
|
|
});
|
|
|
|
const handleSave = () => {
|
|
if (!editData) return;
|
|
|
|
updateMutation.mutate({
|
|
first_name: editData.data.first_name,
|
|
phone: normalizeDigits(phone),
|
|
person_type: editData.data.person_type,
|
|
industries: editData.data.activate_types,
|
|
activate_types: editData.data.activate_types.map((e) => e.id),
|
|
|
|
company_name: editData.data.company_name,
|
|
stir: editData.data.stir,
|
|
director_full_name: editData.data.director_full_name,
|
|
address: editData.data.address,
|
|
gender: editData.data.gender,
|
|
age: editData.data.age,
|
|
});
|
|
};
|
|
|
|
const removeCategory = (id: number) => {
|
|
setSelectedCategories((prev) => prev.filter((c) => c.id !== id));
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
|
<View style={styles.topHeader}>
|
|
<Pressable onPress={() => setIsEditing(false)}>
|
|
<ArrowLeft color={theme.text} />
|
|
</Pressable>
|
|
<Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
|
|
<Pressable onPress={handleSave}>
|
|
<Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
|
|
</Pressable>
|
|
</View>
|
|
<ActivityIndicator size={'large'} />
|
|
</View>
|
|
);
|
|
}
|
|
|
|
if (isEditing && editData) {
|
|
const genderOptions: { label: string; value: 'male' | 'female' }[] = [
|
|
{ label: t('Erkak'), value: 'male' },
|
|
{ label: t('Ayol'), value: 'female' },
|
|
];
|
|
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
|
<View style={styles.topHeader}>
|
|
<Pressable onPress={() => setIsEditing(false)}>
|
|
<ArrowLeft color={theme.text} />
|
|
</Pressable>
|
|
<Text style={[styles.headerTitle, { color: theme.text }]}>{t('Tahrirlash')}</Text>
|
|
<Pressable onPress={handleSave}>
|
|
{updateMutation.isPending ? (
|
|
<ActivityIndicator size={'small'} />
|
|
) : (
|
|
<Text style={[styles.saveButton, { color: theme.primary }]}>{t('Saqlash')}</Text>
|
|
)}
|
|
</Pressable>
|
|
</View>
|
|
|
|
<ScrollView style={styles.content}>
|
|
<View style={styles.editSection}>
|
|
{/* First Name */}
|
|
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Ism')}</Text>
|
|
<TextInput
|
|
style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
|
|
value={editData?.data.first_name}
|
|
onChangeText={(text) =>
|
|
setEditData((prev) => prev && { ...prev, data: { ...prev.data, first_name: text } })
|
|
}
|
|
placeholderTextColor={theme.placeholder}
|
|
/>
|
|
|
|
{/* Phone */}
|
|
<Text style={[styles.label, { color: theme.textSecondary }]}>
|
|
{t('Telefon raqami')}
|
|
</Text>
|
|
<View style={[styles.phoneInputContainer, { backgroundColor: theme.inputBg }]}>
|
|
<View style={styles.prefixContainer}>
|
|
<Text
|
|
style={[styles.prefix, { color: theme.text }, focused && styles.prefixFocused]}
|
|
>
|
|
+998
|
|
</Text>
|
|
<View style={[styles.divider, { backgroundColor: theme.divider }]} />
|
|
</View>
|
|
<TextInput
|
|
style={[styles.phoneInput, { color: theme.text }]}
|
|
value={formatPhone(phone)}
|
|
onChangeText={(text) => setPhone(normalizeDigits(text))}
|
|
onFocus={() => setFocused(true)}
|
|
onBlur={() => setFocused(false)}
|
|
keyboardType="numeric"
|
|
placeholder="90 123 45 67"
|
|
maxLength={12}
|
|
placeholderTextColor={theme.placeholder}
|
|
/>
|
|
</View>
|
|
|
|
{/* Age */}
|
|
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
|
|
<TextInput
|
|
style={[styles.input, { backgroundColor: theme.inputBg, color: theme.text }]}
|
|
value={editData?.data.age?.toString() || ''}
|
|
placeholder="18"
|
|
keyboardType="numeric"
|
|
onChangeText={(text) =>
|
|
setEditData(
|
|
(prev) => prev && { ...prev, data: { ...prev.data, age: Number(text) } }
|
|
)
|
|
}
|
|
placeholderTextColor={theme.placeholder}
|
|
/>
|
|
|
|
{/* Gender as buttons */}
|
|
<Text style={[styles.label, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
|
|
<View style={{ flexDirection: 'row', gap: 12, marginTop: 4 }}>
|
|
{genderOptions.map((option) => {
|
|
const isSelected = editData.data.gender === option.value;
|
|
return (
|
|
<TouchableOpacity
|
|
key={option.value}
|
|
onPress={() =>
|
|
setEditData((prev) =>
|
|
prev ? { ...prev, data: { ...prev.data, gender: option.value } } : prev
|
|
)
|
|
}
|
|
style={{
|
|
flex: 1,
|
|
paddingVertical: 12,
|
|
borderRadius: 12,
|
|
alignItems: 'center',
|
|
backgroundColor: isSelected ? theme.primary : theme.inputBg,
|
|
}}
|
|
>
|
|
<Text style={{ color: isSelected ? '#fff' : theme.text }}>{option.label}</Text>
|
|
</TouchableOpacity>
|
|
);
|
|
})}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
/* ===================== VIEW MODE ===================== */
|
|
return (
|
|
<View style={[styles.container, { backgroundColor: theme.background }]}>
|
|
<View style={styles.topHeader}>
|
|
<Pressable onPress={() => router.push('/profile')}>
|
|
<ArrowLeft color={theme.text} />
|
|
</Pressable>
|
|
<Text style={[styles.headerTitle, { color: theme.text }]}>{t("Shaxsiy ma'lumotlar")}</Text>
|
|
<Pressable onPress={() => setIsEditing(true)}>
|
|
<Edit2 color={theme.primary} />
|
|
</Pressable>
|
|
</View>
|
|
|
|
<ScrollView style={styles.content}>
|
|
<View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Ism')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.first_name}</Text>
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Yoshi')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me?.data.data.age ? me?.data.data.age : t("Noma'lum")}
|
|
</Text>
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Jinsi')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me?.data.data.gender ? t(me?.data.data.gender) : t("Noma'lum")}
|
|
</Text>
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
|
|
{t('Telefon raqami')}
|
|
</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me && formatNumber(me?.data.data.phone)}
|
|
</Text>
|
|
</View>
|
|
|
|
{me?.data.data.person_type !== 'employee' && (
|
|
<View style={[styles.infoCard, { backgroundColor: theme.cardBg }]}>
|
|
<Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
|
|
{t('Kompaniya')}
|
|
</Text>
|
|
|
|
{me?.data.data.company_image && (
|
|
<Image source={{ uri: me.data.data.company_image }} style={styles.companyImage} />
|
|
)}
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Nomi')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me?.data.data.company_name}
|
|
</Text>
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('STIR')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>{me?.data.data.stir}</Text>
|
|
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>{t('Direktor')}</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me?.data.data.director_full_name}
|
|
</Text>
|
|
{me?.data.data.address && (
|
|
<>
|
|
<Text style={[styles.infoLabel, { color: theme.textSecondary }]}>
|
|
{t('Manzil')}
|
|
</Text>
|
|
<Text style={[styles.infoValue, { color: theme.text }]}>
|
|
{me?.data.data.address}
|
|
</Text>
|
|
</>
|
|
)}
|
|
</View>
|
|
)}
|
|
<View style={styles.section}>
|
|
<View
|
|
style={{
|
|
flexDirection: 'row',
|
|
alignItems: 'flex-start',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Text style={[styles.sectionTitle, { color: theme.textTertiary }]}>
|
|
{t('Faoliyat sohalari')}
|
|
</Text>
|
|
<Plus
|
|
color={theme.primary}
|
|
size={24}
|
|
onPress={() => router.push('/profile/categories')}
|
|
/>
|
|
</View>
|
|
<View style={styles.fieldsContainer}>
|
|
{me?.data.data.activate_types.map((field: any) => (
|
|
<View key={field.id} style={[styles.fieldChip, { backgroundColor: theme.chipBg }]}>
|
|
<Text style={[styles.fieldText, { color: theme.chipText }]}>{field.name}</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
paddingBottom: 30,
|
|
},
|
|
fieldsContainer: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 20 },
|
|
fieldChip: {
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 10,
|
|
borderRadius: 16,
|
|
},
|
|
fieldText: { fontSize: 14, fontWeight: '600' },
|
|
section: {
|
|
padding: 10,
|
|
marginTop: 0,
|
|
},
|
|
content: {
|
|
padding: 16,
|
|
},
|
|
loadingText: {
|
|
textAlign: 'center',
|
|
marginTop: 40,
|
|
},
|
|
infoCard: {
|
|
borderRadius: 20,
|
|
padding: 16,
|
|
marginBottom: 16,
|
|
},
|
|
infoLabel: {
|
|
fontSize: 13,
|
|
marginTop: 8,
|
|
},
|
|
infoValue: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
sectionTitle: {
|
|
fontWeight: '700',
|
|
fontSize: 16,
|
|
marginBottom: 12,
|
|
},
|
|
editSection: {
|
|
gap: 12,
|
|
},
|
|
label: {
|
|
fontSize: 13,
|
|
},
|
|
input: {
|
|
borderRadius: 14,
|
|
padding: 14,
|
|
},
|
|
phoneInputContainer: {
|
|
flexDirection: 'row',
|
|
borderRadius: 14,
|
|
padding: 14,
|
|
},
|
|
phoneInput: {
|
|
flex: 1,
|
|
},
|
|
saveButton: {
|
|
fontSize: 16,
|
|
fontWeight: '600',
|
|
},
|
|
companyImage: {
|
|
width: 90,
|
|
height: 90,
|
|
borderRadius: 45,
|
|
alignSelf: 'center',
|
|
marginBottom: 12,
|
|
},
|
|
topHeader: {
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
padding: 16,
|
|
alignItems: 'center',
|
|
},
|
|
headerTitle: { fontSize: 18, fontWeight: '700' },
|
|
prefixContainer: { flexDirection: 'row', alignItems: 'center', marginRight: 12 },
|
|
prefix: { fontSize: 17, fontWeight: '600' },
|
|
prefixFocused: {},
|
|
divider: { width: 1, height: 24, marginLeft: 12 },
|
|
});
|