From 7c14baca77778d700b2ad6db8495d674d4e4f949 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Sat, 22 Nov 2025 23:48:15 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=B2=D0=BE=D1=80=D0=BC=D1=83=20=D0=B4=D0=BB=D1=8F=20=D0=BE?=
 =?UTF-8?q?=D1=82=D0=BF=D1=80=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B9=D1=81-=D0=BB=D0=B8=D1=81=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PriceLisForm/PriceLisForm.module.css      |   0
 .../components/PriceLisForm/PriceLisForm.tsx  | 149 ++++++++++++++++++
 2 files changed, 149 insertions(+)
 create mode 100644 front/src/components/PriceLisForm/PriceLisForm.module.css
 create mode 100644 front/src/components/PriceLisForm/PriceLisForm.tsx

diff --git a/front/src/components/PriceLisForm/PriceLisForm.module.css b/front/src/components/PriceLisForm/PriceLisForm.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/front/src/components/PriceLisForm/PriceLisForm.tsx b/front/src/components/PriceLisForm/PriceLisForm.tsx
new file mode 100644
index 0000000..d7c04e7
--- /dev/null
+++ b/front/src/components/PriceLisForm/PriceLisForm.tsx
@@ -0,0 +1,149 @@
+import React from "react";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import styles from "./ModalRequestForm.module.css";
+import Button from "../Button/Button";
+
+// ✅ Схема валидации
+const schema = yup.object().shape({
+  name: yup.string().required("Введите имя"),
+  email: yup.string().email("Некорректный Email").required("Введите Email"),
+  phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
+});
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+}
+
+interface FormData {
+  name: string;
+  email: string;
+  phone: string;
+}
+
+const PriceLisForm: React.FC<Props> = ({ open, onClose }) => {
+    console.log('ModalRequestForm render, open:', open); 
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm({ resolver: yupResolver(schema) });
+
+  const handlePhoneInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let value = e.target.value.replace(/\D/g, '');
+    
+    if (value.startsWith('7') || value.startsWith('8')) {
+      value = value.substring(1);
+    }
+    
+    let formattedValue = '+7 ';
+    
+    if (value.length > 0) {
+      formattedValue += '(' + value.substring(0, 3);
+    }
+    if (value.length > 3) {
+      formattedValue += ') ' + value.substring(3, 6);
+    }
+    if (value.length > 6) {
+      formattedValue += '-' + value.substring(6, 8);
+    }
+    if (value.length > 8) {
+      formattedValue += '-' + value.substring(8, 10);
+    }
+    
+    e.target.value = formattedValue;
+  };
+
+  const sendToBackend = async (data: FormData): Promise<boolean> => {
+    return true;
+  };
+
+  const onSubmit = async (data: FormData) => {
+    try {
+      await sendToBackend(data);
+      
+      Modal.success({
+        title: "Прайс-лист отправлен!",
+        okText: "Хорошо",
+      });
+      
+      reset();
+      onClose();
+    } catch (error) {
+      Modal.error({
+        title: "Ошибка",
+        content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
+        okText: "Понятно",
+      });
+    }
+  };
+
+  return (
+    <Modal 
+      open={open} 
+      footer={null} 
+      onCancel={onClose} 
+      centered 
+      width={620}
+      closable={!isSubmitting}
+      maskClosable={!isSubmitting}
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.35 }}
+        className={styles.modalBox}
+      >
+        <h2 className={styles.title}>СКАЧАЙТЕ ПРАЙС_ЛИСТ</h2>
+        <p className={styles.subtitle}>
+          Заполните форму ниже, и прайс-лист будт выслан вам на почту
+        </p>
+
+        <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите имя *" 
+              {...register("name")}
+              disabled={isSubmitting}
+            />
+            {errors.name && <span className={styles.error}>{errors.name.message}</span>}
+          </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="Введите email *" 
+              {...register("email")}
+              disabled={isSubmitting}
+            />
+            {errors.email && <span className={styles.error}>{errors.email.message}</span>}
+          </div>
+
+          <div className={styles.field}>
+            <input 
+              className={styles.input} 
+              placeholder="+7 (___) ___-__-__ *" 
+              {...register("phone")}
+              onInput={handlePhoneInput}
+              disabled={isSubmitting}
+            />
+            {errors.phone && <span className={styles.error}>{errors.phone.message}</span>}
+          </div>
+
+          <Button 
+            label={isSubmitting ? "ОТПРАВКА..." : "СКАЧАТЬ ПРАЙС-ЛИСТ"} 
+            className={styles.button}
+          />
+        </form>
+      </motion.div>
+    </Modal>
+  );
+};
+
+export default PriceLisForm;
\ No newline at end of file