ui popup lead
This commit is contained in:
139
frontend/components/popups/LeadPopup.tsx
Normal file
139
frontend/components/popups/LeadPopup.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
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
|
||||
67
frontend/components/ui/Modal.tsx
Normal file
67
frontend/components/ui/Modal.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
'use client'
|
||||
|
||||
import React, { useEffect } from 'react'
|
||||
import { IoClose } from 'react-icons/io5'
|
||||
|
||||
interface ModalProps {
|
||||
isOpen: boolean
|
||||
onClose: () => void
|
||||
title: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const Modal: React.FC<ModalProps> = ({ isOpen, onClose, title, children }) => {
|
||||
useEffect(() => {
|
||||
const handleEscape = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
if (isOpen) {
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
|
||||
document.body.style.paddingRight = `${scrollbarWidth}px`
|
||||
document.body.style.overflow = 'hidden'
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
document.body.style.paddingRight = '0px'
|
||||
document.body.style.overflow = 'unset'
|
||||
}
|
||||
}, [isOpen, onClose])
|
||||
|
||||
if (!isOpen) return null
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[9999] overflow-y-auto">
|
||||
<div
|
||||
className={`fixed inset-0 bg-black transition-all duration-500 ease-in-out ${isOpen ? 'opacity-50 backdrop-blur-sm' : 'opacity-0 backdrop-blur-none'} `}
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
<div className="z-[10000] flex min-h-full items-center justify-center">
|
||||
<div
|
||||
className={`relative min-h-screen w-full transform overflow-hidden bg-white text-left shadow-xl transition-all duration-500 ease-in-out sm:m-4 sm:min-h-0 sm:max-w-3xl sm:rounded-2xl ${
|
||||
isOpen ? 'translate-y-0 scale-100 opacity-100' : 'translate-y-8 scale-95 opacity-0'
|
||||
} `}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b border-gray-100 p-4 sm:p-6">
|
||||
<h2 className="text-xl font-bold sm:text-2xl">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="rounded-xl bg-gray-500 p-2 text-white transition-all duration-300 ease-in-out hover:scale-105 hover:bg-gray-400 hover:text-black"
|
||||
>
|
||||
<IoClose size={24} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Modal
|
||||
Reference in New Issue
Block a user