fitst commit
This commit is contained in:
Samandar Turgunboyev
103
screens/auth/register/RegisterCategorySelection.tsx
Normal file
103
screens/auth/register/RegisterCategorySelection.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
// app/auth/register/category.tsx
|
||||
import { auth_api } from '@/screens/auth/login/lib/api';
|
||||
import { products_api } from '@/screens/home/lib/api';
|
||||
import { useMutation, useQuery } from '@tanstack/react-query';
|
||||
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { Check } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity } from 'react-native';
|
||||
|
||||
export default function CategorySelectScreen() {
|
||||
const router = useRouter();
|
||||
const { phone, stir, person_type } = useLocalSearchParams<{
|
||||
phone: string;
|
||||
stir: string;
|
||||
person_type: 'band' | 'ytt';
|
||||
}>();
|
||||
|
||||
const [selected, setSelected] = React.useState<number | null>(null);
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ['categories'],
|
||||
queryFn: () => products_api.getCategorys(),
|
||||
});
|
||||
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: (body: {
|
||||
phone: string;
|
||||
stir: string;
|
||||
person_type: string;
|
||||
activate_types: number[];
|
||||
}) => auth_api.register(body),
|
||||
onSuccess: () => router.replace('/'),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Stack.Screen options={{ title: 'Yo‘nalishni tanlang' }} />
|
||||
|
||||
<ScrollView contentContainerStyle={styles.container}>
|
||||
{data?.data?.data.map((c: any) => {
|
||||
const active = selected === c.id;
|
||||
return (
|
||||
<TouchableOpacity key={c.id} style={styles.item} onPress={() => setSelected(c.id)}>
|
||||
<Text style={styles.text}>{c.name}</Text>
|
||||
{active && <Check size={20} color="#2563eb" />}
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
</ScrollView>
|
||||
|
||||
<TouchableOpacity
|
||||
disabled={!selected || isPending}
|
||||
style={[styles.bottom, (!selected || isPending) && { opacity: 0.5 }]}
|
||||
onPress={() => {
|
||||
if (phone && stir && person_type && selected) {
|
||||
mutate({
|
||||
activate_types: [selected],
|
||||
person_type: person_type,
|
||||
phone: `998${phone}`,
|
||||
stir: stir,
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Text style={styles.bottomText}>{isPending ? 'Yuborilmoqda...' : 'Tasdiqlash'}</Text>
|
||||
</TouchableOpacity>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
padding: 16,
|
||||
paddingBottom: 120,
|
||||
},
|
||||
item: {
|
||||
paddingVertical: 18,
|
||||
borderBottomWidth: 1,
|
||||
borderColor: '#e2e8f0',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
text: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
bottom: {
|
||||
position: 'absolute',
|
||||
bottom: 20,
|
||||
left: 16,
|
||||
right: 16,
|
||||
height: 54,
|
||||
borderRadius: 16,
|
||||
backgroundColor: '#2563eb',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
bottomText: {
|
||||
color: '#fff',
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
},
|
||||
});
|
||||
206
screens/auth/register/RegisterForm.tsx
Normal file
206
screens/auth/register/RegisterForm.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
import { formatPhone, normalizeDigits } from '@/constants/formatPhone';
|
||||
import { useMutation } from '@tanstack/react-query';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { Hash } from 'lucide-react-native';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
KeyboardAvoidingView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { auth_api } from '../login/lib/api';
|
||||
import PhonePrefix from '../login/ui/PhonePrefix';
|
||||
import { UseLoginForm } from '../login/ui/UseLoginForm';
|
||||
|
||||
export default function RegisterForm() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
const { phone, setPhone } = UseLoginForm();
|
||||
|
||||
const [stir, setStir] = useState('');
|
||||
const [info, setInfo] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [directorTinInput, setDirectorTinInput] = useState('');
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: (stir: string) => auth_api.get_info(stir),
|
||||
onSuccess: (res) => {
|
||||
setInfo(res.data);
|
||||
setLoading(false);
|
||||
},
|
||||
onError: () => {
|
||||
setInfo(null);
|
||||
setLoading(false);
|
||||
},
|
||||
});
|
||||
|
||||
const hasDirectorTin = info?.directorTin && String(info.directorTin).length > 0;
|
||||
|
||||
const isDirectorTinValid = !hasDirectorTin || directorTinInput === String(info.directorTin);
|
||||
const hasValidName = Boolean(info?.name || info?.fullName);
|
||||
|
||||
const valid =
|
||||
phone.length === 9 &&
|
||||
(stir.length === 9 || stir.length === 14) &&
|
||||
info &&
|
||||
hasValidName &&
|
||||
isDirectorTinValid;
|
||||
|
||||
return (
|
||||
<KeyboardAvoidingView behavior="position">
|
||||
<View style={{ gap: 16 }}>
|
||||
{/* 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 }}
|
||||
onChangeText={(text) => {
|
||||
const v = normalizeDigits(text).slice(0, 14);
|
||||
setStir(v);
|
||||
|
||||
if (v.length === 9 || v.length === 14) {
|
||||
setLoading(true);
|
||||
mutate(v);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{loading && <ActivityIndicator size="small" />}
|
||||
</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}>
|
||||
<Hash size={18} color="#94a3b8" />
|
||||
<TextInput
|
||||
value={directorTinInput}
|
||||
keyboardType="numeric"
|
||||
placeholder={t('Direktor STIR')}
|
||||
placeholderTextColor="#94a3b8"
|
||||
style={{ flex: 1 }}
|
||||
onChangeText={(t) => setDirectorTinInput(normalizeDigits(t))}
|
||||
/>
|
||||
</View>
|
||||
|
||||
{directorTinInput.length > 0 && !isDirectorTinValid && (
|
||||
<Text style={styles.error}>{t('Direktor STIR noto‘g‘ri')}</Text>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* INFO */}
|
||||
{info &&
|
||||
(hasValidName ? (
|
||||
<Text style={styles.info}>{info.fullName || info.name}</Text>
|
||||
) : (
|
||||
<Text style={styles.notFound}>{t('Foydalanuvchi topilmadi')}</Text>
|
||||
))}
|
||||
|
||||
{/* BUTTON */}
|
||||
<TouchableOpacity
|
||||
disabled={!valid}
|
||||
style={[styles.btn, !valid && styles.disabled]}
|
||||
onPress={() =>
|
||||
router.push({
|
||||
pathname: '/(auth)/select-category',
|
||||
params: {
|
||||
phone,
|
||||
company_name: info?.fullname,
|
||||
address: info?.fullAddress,
|
||||
director_full_name: info?.director,
|
||||
stir,
|
||||
person_type: stir.length === 9 ? 'legal_entity' : info?.company ? 'ytt' : 'band',
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Text style={styles.btnText}>{t('Davom etish')}</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</KeyboardAvoidingView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
label: {
|
||||
fontWeight: '700',
|
||||
color: '#475569',
|
||||
},
|
||||
notFound: {
|
||||
backgroundColor: '#fef2f2',
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
fontWeight: '700',
|
||||
color: '#dc2626',
|
||||
borderWidth: 1,
|
||||
borderColor: '#fecaca',
|
||||
},
|
||||
input: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#f8fafc',
|
||||
borderRadius: 12,
|
||||
paddingHorizontal: 12,
|
||||
height: 50,
|
||||
borderWidth: 1,
|
||||
borderColor: '#e2e8f0',
|
||||
gap: 8,
|
||||
},
|
||||
info: {
|
||||
backgroundColor: '#f1f5f9',
|
||||
padding: 12,
|
||||
borderRadius: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
btn: {
|
||||
height: 52,
|
||||
backgroundColor: '#2563eb',
|
||||
borderRadius: 16,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
disabled: {
|
||||
opacity: 0.5,
|
||||
},
|
||||
btnText: {
|
||||
color: '#fff',
|
||||
fontWeight: '800',
|
||||
fontSize: 16,
|
||||
},
|
||||
error: {
|
||||
color: '#dc2626',
|
||||
fontSize: 12,
|
||||
marginTop: 4,
|
||||
fontWeight: '600',
|
||||
},
|
||||
});
|
||||
222
screens/auth/register/RegisterScreen.tsx
Normal file
222
screens/auth/register/RegisterScreen.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import AuthHeader from '@/components/ui/AuthHeader';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useRouter } from 'expo-router';
|
||||
import { UserPlus } from 'lucide-react-native';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
import RegisterForm from './RegisterForm';
|
||||
|
||||
export default function RegisterScreen() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
{/* Background Decorations */}
|
||||
<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 }}>
|
||||
<ScrollView
|
||||
contentContainerStyle={styles.scrollContent}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
{/* Header Section */}
|
||||
<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="#ffffff" />
|
||||
</LinearGradient>
|
||||
</View>
|
||||
<Text style={styles.title}>{t("Ro'yxatdan o'tish")}</Text>
|
||||
<Text style={styles.subtitle}>
|
||||
{t('Tizimdan foydalanish uchun STIR raqami yoki JSHSHR kiritishingiz kerak.')}
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
{/* Form Card */}
|
||||
<View style={styles.card}>
|
||||
<RegisterForm />
|
||||
</View>
|
||||
|
||||
{/* Footer */}
|
||||
<View style={styles.footer}>
|
||||
<TouchableOpacity onPress={() => router.push('/')}>
|
||||
<Text style={styles.footerText}>
|
||||
{t('Hisobingiz bormi?')} <Text style={styles.footerLink}>{t('Kirish')}</Text>
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</SafeAreaView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: { flex: 1, backgroundColor: '#0f172a' },
|
||||
|
||||
// Header Navigatsiya qismi (LoginScreen kabi)
|
||||
languageHeader: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
zIndex: 1000,
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
borderRadius: 12,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.1)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 10,
|
||||
borderRadius: 12,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.15)',
|
||||
},
|
||||
languageText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '600',
|
||||
color: '#94a3b8',
|
||||
},
|
||||
|
||||
// Scroll va Forma joylashuvi
|
||||
scrollContent: {
|
||||
flexGrow: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 40,
|
||||
paddingTop: 10,
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
header: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 32,
|
||||
},
|
||||
iconContainer: {
|
||||
marginBottom: 20,
|
||||
},
|
||||
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: 28,
|
||||
fontWeight: '800',
|
||||
color: '#ffffff',
|
||||
marginBottom: 10,
|
||||
letterSpacing: 0.5,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 15,
|
||||
color: '#94a3b8',
|
||||
textAlign: 'center',
|
||||
lineHeight: 22,
|
||||
paddingHorizontal: 10,
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 28,
|
||||
padding: 24,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 20,
|
||||
elevation: 10,
|
||||
},
|
||||
|
||||
// Dropdown (LoginScreen bilan bir xil)
|
||||
dropdown: {
|
||||
position: 'absolute',
|
||||
top: 55,
|
||||
right: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
borderRadius: 16,
|
||||
padding: 8,
|
||||
minWidth: 180,
|
||||
shadowColor: '#000',
|
||||
shadowOffset: { width: 0, height: 10 },
|
||||
shadowOpacity: 0.2,
|
||||
shadowRadius: 20,
|
||||
elevation: 15,
|
||||
borderWidth: 1,
|
||||
borderColor: '#f1f5f9',
|
||||
},
|
||||
dropdownOption: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
marginBottom: 4,
|
||||
},
|
||||
dropdownOptionActive: { backgroundColor: '#eff6ff' },
|
||||
dropdownOptionText: { fontSize: 14, fontWeight: '600', color: '#475569' },
|
||||
dropdownOptionTextActive: { color: '#3b82f6' },
|
||||
checkmark: {
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
backgroundColor: '#3b82f6',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
checkmarkText: { color: '#ffffff', fontSize: 12, fontWeight: 'bold' },
|
||||
|
||||
footer: { marginTop: 24, alignItems: 'center' },
|
||||
footerText: { color: '#94a3b8', fontSize: 14 },
|
||||
footerLink: { color: '#3b82f6', fontWeight: '700' },
|
||||
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)',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user