добавил логику для телефонного запроса и вынес в отдельный компонент
This commit is contained in:
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 styles from "./QuestionsBlock.module.css";
|
||||||
import Button from "../Button/Button";
|
import Button from "../Button/Button";
|
||||||
import { PhoneOutlined } from "@ant-design/icons";
|
import { PhoneOutlined } from "@ant-design/icons";
|
||||||
|
import PhoneRequest from "../../features/MainPage/PhoneRequest";
|
||||||
|
|
||||||
const QuestionsBlock: React.FC = () => {
|
const QuestionsBlock: React.FC = () => {
|
||||||
|
|
||||||
@@ -39,7 +40,7 @@ const QuestionsBlock: React.FC = () => {
|
|||||||
</p>
|
</p>
|
||||||
|
|
||||||
{/* FORM */}
|
{/* FORM */}
|
||||||
<div className={styles.form}>
|
{/*<div className={styles.form}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="+7 (___) ___-__-__"
|
placeholder="+7 (___) ___-__-__"
|
||||||
@@ -49,7 +50,8 @@ const QuestionsBlock: React.FC = () => {
|
|||||||
label="ОТПРАВИТЬ"
|
label="ОТПРАВИТЬ"
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>*/}
|
||||||
|
<PhoneRequest/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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;
|
||||||
Reference in new issue
Block a user