feat(): Added ci restruct project and add dockerfile
This commit is contained in:
1 parent
5451970f02
commit
8aa8e04077
70 files changed
+81
-11
No files matched your search
@@ -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