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 = () => {

{/* FORM */} -
+ {/*
{ label="ОТПРАВИТЬ" onClick={handleClick} /> -
+
*/} + 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; +} + +const PhoneRequest: React.FC = ({ 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) => { + 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 ( +
+ + */} + + {error &&

{error}

} + {success &&

Заявка отправлена!

} +
+ ); +}; + +export default PhoneRequest; \ No newline at end of file