Files
info-target-mobile/screens/auth/register/RegisterForm.tsx
Samandar Turgunboyev a671706fb3 register address
2026-03-26 14:23:58 +05:00

713 lines
22 KiB
TypeScript

import AuthHeader from '@/components/ui/AuthHeader';
import { decryptToken } from '@/constants/crypto';
import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
import { products_api } from '@/screens/home/lib/api';
import BottomSheet, { BottomSheetBackdrop, BottomSheetFlatList, BottomSheetTextInput } from '@gorhom/bottom-sheet';
import { useMutation, useQuery } from '@tanstack/react-query';
import { Image } from 'expo-image';
import { LinearGradient } from 'expo-linear-gradient';
import { useRouter } from 'expo-router';
import {
CheckIcon,
ChevronDown,
Globe,
Hash,
Search,
UserPlus
} from 'lucide-react-native';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
ActivityIndicator,
Keyboard,
StyleSheet,
Text,
TextInput,
TouchableOpacity,
View
} from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import { SafeAreaView } from 'react-native-safe-area-context';
import { auth_api, GetInfo } from '../login/lib/api';
import PhonePrefix from '../login/ui/PhonePrefix';
import { UseLoginForm } from '../login/ui/UseLoginForm';
import { useResolveLocation } from './lib/useResolveLocation';
export default function RegisterFormScreen() {
const router = useRouter();
const { t } = useTranslation();
const { phone, setPhone } = UseLoginForm();
const countrySheetRef = useRef<BottomSheet>(null);
const snapPoints = useMemo(() => ['60%', '90%'], []);
const [selectedCountry, setSelectedCountry] = useState<string>('UZ');
const [countrySearch, setCountrySearch] = useState<string>('');
const [stir, setStir] = useState('');
const [info, setInfo] = useState<GetInfo | null>(null);
const [loading, setLoading] = useState(false);
const [referal, setReferal] = useState('');
const [error, setError] = useState<string | null>(null);
const [token, setTokens] = useState<{ name: string, value: string } | null>(null);
const [directorTinInput, setDirectorTinInput] = useState('');
// ─── Token ───────────────────────────────────────────────────────────────────
const { data } = useQuery({
queryKey: ["tokens"],
queryFn: async () => auth_api.get_tokens(),
select(data) {
return data.data.data.results;
},
});
useEffect(() => {
if (data?.length) {
const token = data[0];
const tokenValue = decryptToken(token.value);
if (tokenValue) {
setTokens({ name: token.key, value: tokenValue });
}
}
}, [data]);
// ─── Location resolver hook ───────────────────────────────────────────────────
const {
location,
resolve: resolveLocation,
reset: resetLocation,
} = useResolveLocation({
token: token?.value ?? null,
tokenName: token?.name ?? null,
});
console.log("location", location.district?.id);
// ─── STIR info mutation ───────────────────────────────────────────────────────
const { mutate } = useMutation({
mutationFn: (stir: string) =>
auth_api.get_info({
value: stir,
token: token?.value || "",
tokenName: token?.name || "",
}),
onSuccess: (res) => {
setInfo(res.data);
setLoading(false);
setError(null);
if (res.data?.address) {
resolveLocation(res.data.address);
}
},
onError: () => {
setInfo(null);
setLoading(false);
setError("Foydalanuvchi topilmadi");
resetLocation();
},
});
// ─── Country list ─────────────────────────────────────────────────────────────
const { data: countryResponse, isLoading: countryLoading } = useQuery({
queryKey: ['country-detail'],
queryFn: async () => products_api.getStates(),
select: (res) => res.data?.data || [],
});
// ─── Validation helpers ───────────────────────────────────────────────────────
useEffect(() => {
if (info === null || (stir.length === 9 && info.name && info.fullName)) {
setError(null);
} else if (info?.name === null || info?.fullName === null) {
setError("Sizning shaxsiy ma'lumotlaringiz topilmadi");
} else if (!info?.selfEmployment && !info?.isItd) {
setError("Siz o'zini o'zi band qilgan yoki yakka tartibdagi tadbirkorlik bo'lishingiz kerak");
}
}, [info]);
const hasDirectorTin = info?.directorPinfl && String(info.directorPinfl).length > 0;
const isDirectorTinValid = !hasDirectorTin || directorTinInput === String(info.directorPinfl);
const hasValidName = Boolean(info?.name || info?.fullName);
const valid =
phone.length === 9 &&
(stir.length === 9 || stir.length === 14) &&
info &&
hasValidName &&
isDirectorTinValid &&
error === null;
// ─── Country sheet ────────────────────────────────────────────────────────────
const filteredCountries = useMemo(() => {
if (!countrySearch.trim()) return countryResponse || [];
const q = countrySearch.toLowerCase().trim();
return (countryResponse || []).filter((c: any) =>
c.name?.toLowerCase().includes(q)
);
}, [countryResponse, countrySearch]);
const openCountrySheet = useCallback(() => {
Keyboard.dismiss();
setTimeout(() => {
countrySheetRef.current?.snapToIndex(0);
}, 100);
}, []);
const selectedCountryName = useMemo(() => {
if (!selectedCountry) return t('Tanlang');
return (
countryResponse?.find(
(c: any) => c.flag?.toUpperCase() === selectedCountry
)?.name || t('Tanlang')
);
}, [selectedCountry, countryResponse, t]);
const renderBackdrop = useCallback(
(props: any) => (
<BottomSheetBackdrop
{...props}
appearsOnIndex={0}
disappearsOnIndex={-1}
opacity={0.6}
pressBehavior="close"
/>
),
[]
);
const closeCountrySheet = useCallback(() => {
countrySheetRef.current?.close();
setTimeout(() => setCountrySearch(''), 300);
}, []);
// ─── Render ───────────────────────────────────────────────────────────────────
return (
<>
<KeyboardAwareScrollView
enableOnAndroid
enableAutomaticScroll
extraScrollHeight={120}
style={styles.keyboardScroll}
>
<View
style={styles.container}
onStartShouldSetResponder={() => {
Keyboard.dismiss();
return false;
}}
>
<LinearGradient
colors={['#0f172a', '#1e293b', '#334155']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
style={StyleSheet.absoluteFill}
/>
<View style={styles.decorCircle1} />
<View style={styles.decorCircle2} />
<AuthHeader />
<SafeAreaView style={{ flex: 1 }} edges={['bottom']}>
<View style={styles.scrollContent}>
<View style={styles.header}>
<View style={styles.iconContainer}>
<LinearGradient
colors={['#10b981', '#059669']}
style={styles.iconGradient}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 1 }}
>
<UserPlus size={32} color="#fff" />
</LinearGradient>
</View>
<Text style={styles.title}>{t("Ro'yxatdan o'tish")}</Text>
</View>
<View style={styles.card}>
<View style={styles.formGap}>
{/* Country */}
<View>
<Text style={styles.label}>{t('Davlat')}</Text>
<TouchableOpacity
style={[styles.input, styles.inputDisabled]}
onPress={openCountrySheet}
activeOpacity={0.7}
testID="country-select"
disabled
>
{countryLoading ? (
<ActivityIndicator size="small" color="#3b82f6" style={{ flex: 1 }} />
) : (
<>
<Image
source={{ uri: `https://flagcdn.com/w320/${selectedCountry.toLowerCase()}.png` }}
style={{ width: 30, height: 15 }}
resizeMode="cover"
/>
<Text
style={[styles.textInput, { color: '#94a3b8' }]}
numberOfLines={1}
>
{selectedCountryName}
</Text>
</>
)}
<ChevronDown size={18} color={'#cbd5e1'} />
</TouchableOpacity>
</View>
{/* STIR */}
<View>
<Text style={styles.label}>{t('STIR')}</Text>
<View style={styles.input}>
<Hash size={18} color="#94a3b8" />
<TextInput
value={stir}
keyboardType="numeric"
placeholder={t('STIR')}
placeholderTextColor="#94a3b8"
style={{ flex: 1, color: "black" }}
onChangeText={(text) => {
const v = normalizeDigits(text).slice(0, 14);
setStir(v);
if (v.length === 9 || v.length === 14) {
setLoading(true);
resetLocation();
mutate(v);
}
}}
/>
{loading && <ActivityIndicator size="small" />}
</View>
</View>
{/* Referal */}
<View>
<Text style={styles.label}>{t('Referal')}</Text>
<View style={styles.input}>
<Hash size={18} color="#94a3b8" />
<TextInput
value={referal}
placeholder={t('Referal kodi')}
placeholderTextColor="#94a3b8"
style={styles.textInput}
onChangeText={setReferal}
maxLength={9}
testID="referal-input"
/>
</View>
</View>
{/* Phone */}
<View>
<Text style={styles.label}>{t('Telefon raqami')}</Text>
<View style={styles.input}>
<PhonePrefix focused={false} />
<TextInput
value={formatPhone(phone)}
placeholder="90 123 45 67"
placeholderTextColor="#94a3b8"
keyboardType="phone-pad"
style={{ flex: 1 }}
onChangeText={(t) => setPhone(normalizeDigits(t))}
/>
</View>
</View>
{/* Director TIN */}
{hasDirectorTin && (
<View>
<Text style={styles.label}>{t('Direktor STIR')}</Text>
<View
style={[
styles.input,
{ backgroundColor: isDirectorTinValid ? '#f0fdf4' : '#f8fafc' },
]}
>
<Hash size={18} color="#94a3b8" />
<TextInput
value={directorTinInput}
keyboardType="numeric"
placeholder={t('Direktor STIR')}
placeholderTextColor="#94a3b8"
style={{ flex: 1 }}
maxLength={14}
onChangeText={(t) => setDirectorTinInput(normalizeDigits(t))}
/>
</View>
{directorTinInput.length === 14 && !isDirectorTinValid && (
<Text style={styles.error}>{t("Direktor STIR noto'g'ri")}</Text>
)}
</View>
)}
{/* Info / Error */}
{error !== null ? (
<Text style={styles.notFound}>{t(error)}</Text>
) : (
info && hasValidName && (
<Text style={styles.info}>{info.fullName || info.name}</Text>
)
)}
{/* Submit */}
<TouchableOpacity
disabled={!valid}
style={[styles.btn, !valid && styles.disabled]}
onPress={() => {
if (error === null) {
router.push({
pathname: '/(auth)/select-category',
params: {
phone,
first_name: stir.length === 9 ? info?.director : info?.fullName,
last_name: stir.length === 9 ? info?.director : info?.fullName,
company_name: info?.name,
district: location.district?.id,
address: location.district?.id,
director_full_name: stir.length === 9 ? info?.director : info?.fullName,
stir,
referal,
person_type:
stir.length === 9
? 'legal_entity'
: info?.selfEmployment
? 'band'
: 'ytt',
},
});
}
}}
>
<Text style={styles.btnText}>{t('Davom etish')}</Text>
</TouchableOpacity>
</View>
</View>
</View>
</SafeAreaView>
</View>
</KeyboardAwareScrollView>
{/* Country BottomSheet */}
<BottomSheet
ref={countrySheetRef}
index={-1}
snapPoints={snapPoints}
enablePanDownToClose={true}
enableDynamicSizing={false}
enableOverDrag={false}
backdropComponent={renderBackdrop}
backgroundStyle={styles.bottomSheetBg}
handleIndicatorStyle={styles.handleIndicator}
android_keyboardInputMode="adjustResize"
keyboardBehavior="interactive"
keyboardBlurBehavior="restore"
>
<View style={styles.sheetHeader}>
<Text style={styles.sheetTitle}>{t('Davlat')}</Text>
</View>
<View style={styles.searchContainer}>
<Search size={16} color="#94a3b8" />
<BottomSheetTextInput
value={countrySearch}
onChangeText={setCountrySearch}
placeholder={t('Qidirish...')}
placeholderTextColor="#94a3b8"
style={styles.searchInput}
clearButtonMode="while-editing"
autoCorrect={false}
/>
</View>
<BottomSheetFlatList
data={filteredCountries}
keyExtractor={(item: any) => item.id?.toString()}
contentContainerStyle={styles.listContainer}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
ListEmptyComponent={
<View style={styles.emptyList}>
<Text style={styles.emptyListText}>{t('Natija topilmadi')}</Text>
</View>
}
renderItem={({ item }: { item: any }) => {
const isSelected = item.flag?.toUpperCase() === selectedCountry;
const flagCode = item.flag ? item.flag.toLowerCase() : '';
return (
<TouchableOpacity
style={[styles.listItem, isSelected && styles.selectedListItem]}
onPress={() => {
setSelectedCountry(item.flag?.toUpperCase());
closeCountrySheet();
}}
activeOpacity={0.7}
>
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 10, flex: 1 }}>
{flagCode ? (
<Image
source={{ uri: `https://flagcdn.com/w320/${flagCode}.png` }}
style={{ width: 34, height: 22, borderRadius: 2 }}
/>
) : (
<Globe size={20} color={isSelected ? '#2563eb' : '#94a3b8'} />
)}
<Text style={[styles.listItemText, isSelected && styles.selectedListItemText]}>
{item.name}
</Text>
</View>
{isSelected && (
<View style={styles.checkmark}>
<CheckIcon color="#3b82f6" strokeWidth={2.5} size={16} />
</View>
)}
</TouchableOpacity>
);
}}
/>
</BottomSheet>
</>
);
}
const styles = StyleSheet.create({
keyboardScroll: {
flex: 1,
backgroundColor: '#0f172a',
},
container: {
flex: 1,
backgroundColor: '#0f172a',
minHeight: '100%',
},
scrollContent: {
flexGrow: 1,
paddingHorizontal: 24,
paddingBottom: 40,
paddingTop: 10,
},
header: {
alignItems: 'center',
marginBottom: 28,
},
iconContainer: {
marginBottom: 16,
},
iconGradient: {
width: 72,
height: 72,
borderRadius: 22,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#10b981',
shadowOffset: { width: 0, height: 8 },
shadowOpacity: 0.3,
shadowRadius: 12,
elevation: 8,
},
title: {
fontSize: 26,
fontWeight: '800' as const,
color: '#ffffff',
marginBottom: 8,
letterSpacing: 0.5,
},
card: {
backgroundColor: '#ffffff',
borderRadius: 28,
padding: 24,
shadowColor: '#000',
shadowOffset: { width: 0, height: 10 },
shadowOpacity: 0.3,
shadowRadius: 20,
elevation: 10,
},
formGap: {
gap: 16,
},
label: {
fontWeight: '700' as const,
color: '#475569',
marginBottom: 6,
fontSize: 14,
},
input: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f8fafc',
borderRadius: 14,
paddingHorizontal: 12,
height: 52,
borderWidth: 1,
borderColor: '#e2e8f0',
gap: 8,
},
inputDisabled: {
backgroundColor: '#f1f5f9',
borderColor: '#e2e8f0',
},
textInput: {
flex: 1,
fontSize: 15,
color: '#1e293b',
},
bottomSheetBg: {
backgroundColor: '#ffffff',
borderTopLeftRadius: 24,
borderTopRightRadius: 24,
shadowColor: '#000',
shadowOffset: { width: 0, height: -2 },
shadowOpacity: 0.1,
shadowRadius: 8,
elevation: 5,
},
handleIndicator: {
width: 40,
height: 4,
borderRadius: 2,
backgroundColor: '#cbd5e1',
},
sheetHeader: {
paddingHorizontal: 20,
paddingVertical: 16,
borderBottomWidth: 1,
borderBottomColor: '#e2e8f0',
},
sheetTitle: {
fontSize: 18,
fontWeight: '700',
color: '#0f172a',
},
listContainer: {
padding: 16,
paddingBottom: 40,
},
listItem: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 14,
borderRadius: 12,
marginBottom: 8,
borderWidth: 1,
backgroundColor: '#ffffff',
borderColor: '#e2e8f0',
},
selectedListItem: {
backgroundColor: '#eff6ff',
borderColor: '#3b82f6',
},
listItemText: {
fontSize: 15,
fontWeight: '500',
color: '#1e293b',
},
selectedListItemText: {
color: '#2563eb',
fontWeight: '600',
},
checkmark: {
width: 24,
height: 24,
borderRadius: 12,
backgroundColor: '#dbeafe',
justifyContent: 'center',
alignItems: 'center',
},
searchContainer: {
flexDirection: 'row',
alignItems: 'center',
backgroundColor: '#f1f5f9',
borderRadius: 12,
marginHorizontal: 16,
marginVertical: 12,
paddingHorizontal: 12,
gap: 8,
height: 44,
borderWidth: 1,
borderColor: '#e2e8f0',
},
searchInput: {
flex: 1,
fontSize: 15,
color: '#1e293b',
paddingVertical: 0,
},
emptyList: {
alignItems: 'center',
paddingVertical: 32,
},
emptyListText: {
fontSize: 14,
color: '#94a3b8',
fontWeight: '500',
},
btn: {
height: 54,
backgroundColor: '#2563eb',
borderRadius: 16,
alignItems: 'center',
justifyContent: 'center',
shadowColor: '#2563eb',
shadowOffset: { width: 0, height: 4 },
shadowOpacity: 0.3,
shadowRadius: 8,
elevation: 6,
},
disabled: {
opacity: 0.45,
},
btnText: {
color: '#fff',
fontWeight: '800' as const,
fontSize: 16,
},
decorCircle1: {
position: 'absolute',
top: -150,
right: -100,
width: 400,
height: 400,
borderRadius: 200,
backgroundColor: 'rgba(59, 130, 246, 0.1)',
},
decorCircle2: {
position: 'absolute',
bottom: -100,
left: -150,
width: 350,
height: 350,
borderRadius: 175,
backgroundColor: 'rgba(16, 185, 129, 0.08)',
},
info: {
padding: 12,
borderRadius: 12,
fontWeight: '700',
backgroundColor: '#f0fdf4',
},
error: {
color: '#dc2626',
fontSize: 12,
marginTop: 4,
fontWeight: '600',
},
notFound: {
backgroundColor: '#fef2f2',
padding: 12,
borderRadius: 12,
fontWeight: '700',
color: '#dc2626',
borderWidth: 1,
borderColor: '#fecaca',
},
});