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..88518bc --- /dev/null +++ b/front/src/components/PriceLisForm/PriceLisForm.tsx @@ -0,0 +1,162 @@ +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"; +import axios from "axios"; + +// ✅ Схема валидации +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 = ({ open, onClose }) => { + console.log('ModalRequestForm render, open:', open); + const { + register, + handleSubmit, + formState: { errors, isSubmitting }, + reset, + } = useForm({ resolver: yupResolver(schema) }); + + const handlePhoneInput = (e: React.ChangeEvent) => { + 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 => { + try{ + const response = await axios.post("/api/requests", { + ...data, + source: "website-form", + timestamp: new Date().toISOString(), + }) + + return response.data.success; + }catch (error: any){ + console.error("Error sending request:", error); + + throw new Error("Не удалось отправить заявку. Попробуйте позже."); + } + }; + + 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 ( + + +

СКАЧАЙТЕ ПРАЙС_ЛИСТ

+

+ Заполните форму ниже, и прайс-лист будт выслан вам на почту +

+ +
+
+ + {errors.name && {errors.name.message}} +
+ +
+ + {errors.email && {errors.email.message}} +
+ +
+ + {errors.phone && {errors.phone.message}} +
+ +