140 lines
4.3 KiB
TypeScript
140 lines
4.3 KiB
TypeScript
import React, { useEffect } from 'react'
|
|
import Modal from '../ui/Modal'
|
|
import Button from '../ui/Button'
|
|
import { useForm } from '@/app/hooks/useForm'
|
|
import showToast from '../ui/Toast'
|
|
import TextInput from '../ui/TextInput'
|
|
import TextAreaInput from '../ui/TextAreaInput'
|
|
import PhoneInput from '../ui/PhoneInput'
|
|
import useUserStore from '@/app/store/userStore'
|
|
|
|
const validationRules = {
|
|
name: { required: true },
|
|
phone_number: { required: true },
|
|
email: { required: true },
|
|
price: { required: false },
|
|
deliveryTime: { required: false },
|
|
comment: { required: false },
|
|
}
|
|
|
|
interface LeadPopupProps {
|
|
id: number
|
|
isOpen: boolean
|
|
onClose: () => void
|
|
onSuccess: () => void
|
|
}
|
|
|
|
const LeadPopup = ({ id, isOpen, onClose, onSuccess }: LeadPopupProps) => {
|
|
const { user } = useUserStore()
|
|
|
|
const { values, handleChange, handleSubmit, setValues } = useForm(
|
|
{
|
|
name: user?.name || '',
|
|
phone_number: user?.phone_number || '',
|
|
email: user?.email || '',
|
|
price: '',
|
|
deliveryTime: '',
|
|
comment: '',
|
|
id: id,
|
|
},
|
|
validationRules,
|
|
async values => {
|
|
try {
|
|
// await sendLead(values)
|
|
showToast({
|
|
type: 'success',
|
|
message: 'Сообщение отправлено!',
|
|
})
|
|
onSuccess()
|
|
} catch {
|
|
showToast({
|
|
type: 'error',
|
|
message: 'Упс, что то пошло не так...',
|
|
})
|
|
}
|
|
}
|
|
)
|
|
|
|
//форма инициализируется до того, как данные пользователя загружаются из стора, поэтому нужно обновлять значения формы при загрузке данных пользователя
|
|
useEffect(() => {
|
|
if (user) {
|
|
setValues({
|
|
...values,
|
|
name: user.name,
|
|
phone_number: user.phone_number || '',
|
|
email: user.email || '',
|
|
})
|
|
}
|
|
}, [user])
|
|
|
|
return (
|
|
<Modal title="Откликнуться на заявку" isOpen={isOpen} onClose={onClose}>
|
|
<div className="px-6 pb-6">
|
|
<form className="space-y-6" onSubmit={handleSubmit}>
|
|
<div className="grid grid-cols-1 gap-6">
|
|
<div className="space-y-4">
|
|
<TextInput
|
|
name="name"
|
|
value={values.name}
|
|
handleChange={handleChange}
|
|
label="ФИО"
|
|
placeholder="Введите ваше полное имя"
|
|
style="register"
|
|
/>
|
|
|
|
<PhoneInput
|
|
value={values.phone_number}
|
|
handleChange={handleChange}
|
|
operatorsInfo={false}
|
|
/>
|
|
|
|
<TextInput
|
|
name="email"
|
|
value={values.email}
|
|
handleChange={handleChange}
|
|
label="Email"
|
|
placeholder="example@mail.com"
|
|
style="register"
|
|
/>
|
|
|
|
<TextInput
|
|
name="price"
|
|
value={values.price}
|
|
handleChange={handleChange}
|
|
label="Предлагаемая цена"
|
|
placeholder="Укажите стоимость перевозки"
|
|
style="register"
|
|
/>
|
|
|
|
<TextInput
|
|
name="deliveryTime"
|
|
value={values.deliveryTime}
|
|
handleChange={handleChange}
|
|
label="Срок доставки"
|
|
placeholder="Укажите предполагаемый срок доставки"
|
|
style="register"
|
|
/>
|
|
<TextAreaInput
|
|
name="comment"
|
|
value={values.comment}
|
|
handleChange={handleChange}
|
|
label="Комментарий (необязательно)"
|
|
placeholder="Опишите условия перевозки, детали и другую важную информацию"
|
|
height={100}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
text="Отправить заявку"
|
|
className="bg-orange hover:bg-opacity-90 flex w-full justify-center rounded-xl py-4 text-base font-semibold text-white transition-colors"
|
|
type="submit"
|
|
/>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
|
|
export default LeadPopup
|