diff --git a/index.html b/index.html
index a6e9be0..4ae69d1 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
-
+
- front
+ RK PLASTIC
diff --git a/public/MiniLogo.jpg b/public/MiniLogo.jpg
new file mode 100644
index 0000000..7a964ca
Binary files /dev/null and b/public/MiniLogo.jpg differ
diff --git a/src/components/ModalRequestForm/ModalRequestForm.tsx b/src/components/ModalRequestForm/ModalRequestForm.tsx
index ce42660..250ed8e 100644
--- a/src/components/ModalRequestForm/ModalRequestForm.tsx
+++ b/src/components/ModalRequestForm/ModalRequestForm.tsx
@@ -174,7 +174,7 @@ const ModalRequestForm: React.FC = ({ open, onClose }) => {
diff --git a/src/components/QuestionsBlock/QuestionsBlock.tsx b/src/components/QuestionsBlock/QuestionsBlock.tsx
index d91572c..e9ec7b9 100644
--- a/src/components/QuestionsBlock/QuestionsBlock.tsx
+++ b/src/components/QuestionsBlock/QuestionsBlock.tsx
@@ -2,13 +2,12 @@ import React from "react";
import styles from "./QuestionsBlock.module.css";
import Button from "../Button/Button";
import { PhoneOutlined } from "@ant-design/icons";
-import PhoneRequest from "../../features/MainPage/PhoneRequest";
+import ModalRequestFormQuastion from "../../features/MainPage/PhoneRequest";
+import { useState } from "react";
const QuestionsBlock: React.FC = () => {
- const handleClick = () => {
- console.log('Кнопка нажата!');
- };
+ const [open, setOpen] = useState(false);
return (
@@ -45,13 +44,13 @@ const QuestionsBlock: React.FC = () => {
type="text"
placeholder="+7 (___) ___-__-__"
className={styles.input}
- />
+ />*/}
diff --git a/src/features/MainPage/PhoneRequest.tsx b/src/features/MainPage/PhoneRequest.tsx
index afe9f81..00d121e 100644
--- a/src/features/MainPage/PhoneRequest.tsx
+++ b/src/features/MainPage/PhoneRequest.tsx
@@ -1,105 +1,191 @@
-import React, { useState } from "react";
-import styles from "./MainPage.module.css";
+import React from "react";
+import { Modal } from "antd";
+import { motion } from "framer-motion";
+import InputMask from "react-input-mask";
+import { useForm } from "react-hook-form";
+import * as yup from "yup";
+import { yupResolver } from "@hookform/resolvers/yup";
+import styles from "../../components/ModalRequestForm/ModalRequestForm.module.css";
import Button from "../../components/Button/Button";
import { client } from "../../api/client";
+// ✅ Схема валидации
+const schema = yup.object().shape({
+ name: yup.string().required("Введите имя"),
+ email: yup.string().email("Некорректный Email").required("Введите Email"),
+ phone: yup.string().min(18, "Введите корректный номер").required("Введите номер"),
+ message: yup.string().nullable(),
+});
+
interface Props {
- onSend?: (phone: string) => Promise;
+ open: boolean;
+ onClose: () => void;
}
-const PhoneRequest: React.FC = ({ onSend }) => {
- const [phone, setPhone] = useState("");
- const [loading, setLoading] = useState(false);
- const [success, setSuccess] = useState(false);
- const [error, setError] = useState("");
+interface FormData {
+ name: string;
+ email: string;
+ phone: string;
+ message?: string | null;
+}
- // Автоформатирование "+7 (999) 999-99-99"
- const formatPhone = (value: string) => {
- const digits = value.replace(/\D/g, "");
+const ModalRequestFormQuastion: React.FC = ({ open, onClose }) => {
+ console.log('ModalRequestForm render, open:', open);
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, isSubmitting },
+ reset,
+ } = useForm({ resolver: yupResolver(schema) });
- let result = "+7 ";
- if (digits.length > 1) result += "(" + digits.substring(1, 4);
- if (digits.length >= 4) result += ") " + digits.substring(4, 7);
- if (digits.length >= 7) result += "-" + digits.substring(7, 9);
- if (digits.length >= 9) result += "-" + digits.substring(9, 11);
-
- return result;
+ 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 handlePhoneChange = (e: React.ChangeEvent) => {
- let v = e.target.value;
+ // ✅ Отправка данных на бэкенд
+ const sendToBackend = async (data: FormData): Promise => {
+ try {
+ const payload = {
+ ...data,
+ };
- if (v.replace(/\D/g, "").length === 0) {
- setPhone("");
- return;
- }
-
- if (v[0] !== "+") {
- v = "+7" + v;
- }
-
- setPhone(formatPhone(v));
- };
-
- const validatePhone = (p: string) => {
- return p.replace(/\D/g, "").length === 11;
- };
-
- const handleSubmit = async () => {
- setError("");
-
- if (!validatePhone(phone)) {
- setError("Введите корректный номер телефона");
- return;
- }
-
- setLoading(true);
+ const response = await client.post<{ success: boolean }>("/email/", payload);
+
+ return response.data.success;
+ } catch (error) {
+ console.error("Error sending request:", error);
+ throw new Error("Не удалось отправить заявку. Попробуйте позже.");
+ }
+};
+ // ✅ Submit
+ const onSubmit = async (data: FormData) => {
try {
- if (onSend) {
- await onSend(phone);
- } else {
-
- await client.post("/email/", { phone });
- }
-
- setSuccess(true);
- setPhone("");
-
- setTimeout(() => setSuccess(false), 3000);
- } catch (e) {
- setError("Ошибка отправки. Попробуйте позже.");
+ await sendToBackend(data);
+
+ // Показываем уведомление об успехе
+ Modal.success({
+ title: "Заявка отправлена!",
+ content: "Наш менеджер свяжется с вами в ближайшее время.",
+ okText: "Хорошо",
+ });
+
+ reset();
+ onClose();
+ } catch (error) {
+ // Показываем ошибку
+ Modal.error({
+ title: "Ошибка",
+ content: error instanceof Error ? error.message : "Произошла неизвестная ошибка",
+ okText: "Понятно",
+ });
}
-
- setLoading(false);
};
return (
-
-
-
- {/*
*/}
+
Задайте вопрос
+
+ Ожидайте ответа на указанную почту
+
- {error &&
{error}
}
- {success &&
Заявка отправлена!
}
-
+
+
+
);
};
-export default PhoneRequest;
\ No newline at end of file
+export default ModalRequestFormQuastion;
\ No newline at end of file