105 lines
3.8 KiB
TypeScript
105 lines
3.8 KiB
TypeScript
import React, { useState } from 'react'
|
||
import { useMutation } from '@apollo/client'
|
||
import { REGISTER_NEW_CLIENT } from '@/lib/graphql'
|
||
import type { VerificationResponse } from '@/types/auth'
|
||
|
||
interface UserRegistrationProps {
|
||
phone: string
|
||
sessionId: string
|
||
onSuccess: (data: VerificationResponse) => void
|
||
onError: (error: string) => void
|
||
}
|
||
|
||
const UserRegistration: React.FC<UserRegistrationProps> = ({
|
||
phone,
|
||
sessionId,
|
||
onSuccess,
|
||
onError
|
||
}) => {
|
||
const [firstName, setFirstName] = useState('')
|
||
const [lastName, setLastName] = useState('')
|
||
const [isLoading, setIsLoading] = useState(false)
|
||
|
||
const [registerClient] = useMutation<{ registerNewClient: VerificationResponse }>(REGISTER_NEW_CLIENT)
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (!firstName.trim()) {
|
||
onError('Введите имя')
|
||
return
|
||
}
|
||
if (!lastName.trim()) {
|
||
onError('Введите фамилию')
|
||
return
|
||
}
|
||
setIsLoading(true)
|
||
try {
|
||
const fullName = `${firstName.trim()} ${lastName.trim()}`
|
||
const { data } = await registerClient({
|
||
variables: {
|
||
phone,
|
||
name: fullName,
|
||
sessionId
|
||
}
|
||
})
|
||
if (data?.registerNewClient) {
|
||
onSuccess(data.registerNewClient)
|
||
}
|
||
} catch (error) {
|
||
onError('Не удалось зарегистрировать пользователя')
|
||
} finally {
|
||
setIsLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="flex flex-col gap-5 w-full">
|
||
<form onSubmit={handleSubmit} className="flex flex-col gap-5 w-full">
|
||
<div className="flex gap-5 items-end w-full max-md:flex-col max-md:gap-4 max-sm:gap-3">
|
||
{/* Имя */}
|
||
<div className="flex flex-col gap-3 max-w-[360px] w-full">
|
||
<label className="text-2xl leading-8 text-gray-950 mb-2 font-normal font-[Onest,sans-serif]">Введите имя</label>
|
||
<input
|
||
type="text"
|
||
value={firstName}
|
||
onChange={(e) => setFirstName(e.target.value)}
|
||
placeholder="Иван"
|
||
className="max-w-[360px] w-full h-[62px] px-6 py-4 text-[18px] leading-[1.4] font-normal font-[Onest,sans-serif] text-neutral-500 bg-white border border-stone-300 rounded focus:outline-none"
|
||
disabled={isLoading}
|
||
required
|
||
/>
|
||
</div>
|
||
{/* Фамилия */}
|
||
<div className="flex flex-col gap-3 max-w-[360px] w-full">
|
||
<label className="text-2xl leading-8 text-gray-950 mb-2 font-normal font-[Onest,sans-serif]">Фамилию</label>
|
||
<input
|
||
type="text"
|
||
value={lastName}
|
||
onChange={(e) => setLastName(e.target.value)}
|
||
placeholder="Иванов"
|
||
className="max-w-[360px] w-full h-[62px] px-6 py-4 text-[18px] leading-[1.4] font-normal font-[Onest,sans-serif] text-neutral-500 bg-white border border-stone-300 rounded focus:outline-none"
|
||
disabled={isLoading}
|
||
required
|
||
/>
|
||
</div>
|
||
{/* Кнопка */}
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading || !firstName.trim() || !lastName.trim()}
|
||
className="flex items-center justify-center flex-shrink-0 bg-red-600 rounded-xl px-8 py-5 text-lg font-medium leading-5 text-white disabled:opacity-50 disabled:cursor-not-allowed h-[70px] max-sm:px-6 max-sm:py-4"
|
||
style={{
|
||
color: 'white'
|
||
}}
|
||
aria-label="Сохранить"
|
||
tabIndex={0}
|
||
>
|
||
{isLoading ? 'Сохраняем...' : 'Сохранить'}
|
||
{/* <img src="/images/Arrow_right.svg" alt="" className="ml-2 w-6 h-6" /> */}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default UserRegistration
|