ui popup lead

2025-05-24 13:51:12 +03:00
parent f745a47cdb
commit 4d53b7c2c4
4 changed files with 256 additions and 14 deletions
--- a/frontend/components/popups/LeadPopup.tsx
+++ b/frontend/components/popups/LeadPopup.tsx
@@ -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