150 lines
4.8 KiB
TypeScript
150 lines
4.8 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'
|
||
import { sendLead } from '@/lib/main/sendLead'
|
||
|
||
const validationRules = {
|
||
name: { required: true },
|
||
phone_number: { required: true },
|
||
email: { required: true },
|
||
moving_price: { required: true },
|
||
moving_date: { required: true },
|
||
comment: { required: false },
|
||
}
|
||
|
||
interface LeadPopupProps {
|
||
id: number
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
onSuccess: () => void
|
||
}
|
||
|
||
const LeadPopup = ({ id, isOpen, onClose, onSuccess }: LeadPopupProps) => {
|
||
const { user } = useUserStore()
|
||
const today = new Date().toISOString().split('T')[0]
|
||
|
||
const initialValues = {
|
||
name: user?.name || '',
|
||
phone_number: user?.phone_number || '',
|
||
email: user?.email || '',
|
||
moving_price: '',
|
||
moving_date: '',
|
||
comment: '',
|
||
id: id,
|
||
}
|
||
|
||
const { values, handleChange, handleSubmit, setValues } = useForm(
|
||
initialValues,
|
||
validationRules,
|
||
async values => {
|
||
try {
|
||
await sendLead(values)
|
||
showToast({
|
||
type: 'success',
|
||
message: 'Сообщение отправлено!',
|
||
})
|
||
onSuccess()
|
||
} catch {
|
||
showToast({
|
||
type: 'error',
|
||
message: 'Упс, что то пошло не так...',
|
||
})
|
||
}
|
||
}
|
||
)
|
||
|
||
//форма инициализируется до того, как данные пользователя загружаются из стора, поэтому нужно обновлять значения формы при загрузке данных пользователя
|
||
useEffect(() => {
|
||
if (user) {
|
||
setValues(prev => ({
|
||
...prev,
|
||
name: user.name,
|
||
phone_number: user.phone_number || '',
|
||
email: user.email || '',
|
||
}))
|
||
}
|
||
}, [user, setValues])
|
||
|
||
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="moving_price"
|
||
value={values.moving_price}
|
||
handleChange={handleChange}
|
||
label="Предлагаемая цена"
|
||
placeholder="Укажите стоимость перевозки"
|
||
style="register"
|
||
/>
|
||
|
||
<div>
|
||
<label htmlFor="moving_date" className="block text-sm font-medium text-gray-700">
|
||
Срок доставки
|
||
</label>
|
||
<input
|
||
type="date"
|
||
name="moving_date"
|
||
id="moving_date"
|
||
value={values.moving_date}
|
||
onChange={handleChange}
|
||
min={today}
|
||
className="mt-1 block w-full rounded-xl border border-gray-300 px-3 py-2 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none"
|
||
/>
|
||
</div>
|
||
<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
|