From 267ab815b4de8272433c427ac05873021458f228 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Fri, 21 Nov 2025 18:41:48 +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=BB=D0=BE=D0=B3=D0=B8=D0=BA=D1=83=20=D0=B4=D0=BB=D1=8F=20?=
 =?UTF-8?q?=D1=82=D0=B5=D0=BB=D0=B5=D1=84=D0=BE=D0=BD=D0=BD=D0=BE=D0=B3?=
 =?UTF-8?q?=D0=BE=20=D0=B7=D0=B0=D0=BF=D1=80=D0=BE=D1=81=D0=B0=20=D0=B8=20?=
 =?UTF-8?q?=D0=B2=D1=8B=D0=BD=D0=B5=D1=81=20=D0=B2=20=D0=BE=D1=82=D0=B4?=
 =?UTF-8?q?=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20=D0=BA=D0=BE=D0=BC=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../QuestionsBlock/QuestionsBlock.tsx         |   6 +-
 .../src/features/MainPage/MainPage.module.css |  26 +++++
 front/src/features/MainPage/PhoneRequest.tsx  | 105 ++++++++++++++++++
 3 files changed, 135 insertions(+), 2 deletions(-)
 create mode 100644 front/src/features/MainPage/MainPage.module.css
 create mode 100644 front/src/features/MainPage/PhoneRequest.tsx

diff --git a/front/src/components/QuestionsBlock/QuestionsBlock.tsx b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
index 8139ead..79fc316 100644
--- a/front/src/components/QuestionsBlock/QuestionsBlock.tsx
+++ b/front/src/components/QuestionsBlock/QuestionsBlock.tsx
@@ -2,6 +2,7 @@ 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";
 
 const QuestionsBlock: React.FC = () => {
 
@@ -39,7 +40,7 @@ const QuestionsBlock: React.FC = () => {
           </p>
 
           {/* FORM */}
-          <div className={styles.form}>
+          {/*<div className={styles.form}>
             <input
               type="text"
               placeholder="+7 (___) ___-__-__"
@@ -49,7 +50,8 @@ const QuestionsBlock: React.FC = () => {
                                 label="ОТПРАВИТЬ" 
                                 onClick={handleClick}
                             />
-          </div>
+          </div>*/}
+          <PhoneRequest/>
         </div>
       </div>
     </section>
diff --git a/front/src/features/MainPage/MainPage.module.css b/front/src/features/MainPage/MainPage.module.css
new file mode 100644
index 0000000..1151440
--- /dev/null
+++ b/front/src/features/MainPage/MainPage.module.css
@@ -0,0 +1,26 @@
+.form {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.input {
+  flex: 1;
+  padding: 18px 24px;
+  border-radius: 50px;
+  border: none;
+  font-size: 18px;
+  outline: none;
+}
+
+.error {
+  color: red;
+  margin-top: 10px;
+}
+
+.success {
+  color: green;
+  margin-top: 10px;
+}
+
diff --git a/front/src/features/MainPage/PhoneRequest.tsx b/front/src/features/MainPage/PhoneRequest.tsx
new file mode 100644
index 0000000..228b614
--- /dev/null
+++ b/front/src/features/MainPage/PhoneRequest.tsx
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import axios from "axios";
+import styles from "./MainPage.module.css";
+import Button from "../../components/Button/Button";
+
+interface Props {
+  onSend?: (phone: string) => Promise<void>;
+}
+
+const PhoneRequest: React.FC<Props> = ({ onSend }) => {
+  const [phone, setPhone] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState("");
+
+  // Автоформатирование "+7 (999) 999-99-99"
+  const formatPhone = (value: string) => {
+    const digits = value.replace(/\D/g, "");
+
+    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 handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let v = e.target.value;
+
+    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);
+
+    try {
+      if (onSend) {
+        await onSend(phone);
+      } else {
+        
+        await axios.post("/api/contact/send-phone", { phone });
+      }
+
+      setSuccess(true);
+      setPhone("");
+
+      setTimeout(() => setSuccess(false), 3000);
+    } catch (e) {
+      setError("Ошибка отправки. Попробуйте позже.");
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <div className={styles.form}>
+      <input
+        className={styles.input}
+        placeholder="+7 (___) ___-__-__"
+        type="tel"
+        value={phone}
+        onChange={handlePhoneChange}
+        maxLength={18}
+      />
+    <Button 
+                                label="ОТПРАВИТЬ" 
+                                onClick={handleSubmit}
+                            />
+      {/*<button
+        className={styles.button}
+        onClick={handleSubmit}
+        disabled={loading}
+      >
+        {loading ? "..." : "ОТПРАВИТЬ"}
+      </button>*/}
+
+      {error && <p className={styles.error}>{error}</p>}
+      {success && <p className={styles.success}>Заявка отправлена!</p>}
+    </div>
+  );
+};
+
+export default PhoneRequest;
\ No newline at end of file