добавил логику для телефонного запроса и вынес в отдельный компонент

This commit is contained in:
Joe_Peach committed 2025-11-21 18:41:48 +03:00
1 parent 28e1c91961
commit 267ab815b4
3 files changed
+135 -2

No files matched your search

@@ -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>
@@ -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;
}
@@ -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;