diana.dolgolyova/blackheart-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: phone input mask +375 (XX) XXX-XX-XX in manual booking modal

Browse Source
This commit is contained in:
Diana Dolgolyova
2026-03-25 00:18:54 +03:00
parent 5e93c9a746
commit b251ee5138
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/admin/bookings/AddBookingModal.tsx
View File

@@ -24,7 +24,7 @@ export function AddBookingModal({
const [tab, setTab] = useState<Tab>("classes"); const [tab, setTab] = useState<Tab>("classes");
const [eventType, setEventType] = useState<EventType>("master-class"); const [eventType, setEventType] = useState<EventType>("master-class");
const [name, setName] = useState(""); const [name, setName] = useState("");
const [phone, setPhone] = useState(""); const [phone, setPhone] = useState("+375 ");
const [instagram, setInstagram] = useState(""); const [instagram, setInstagram] = useState("");
const [telegram, setTelegram] = useState(""); const [telegram, setTelegram] = useState("");
const [mcTitle, setMcTitle] = useState(""); const [mcTitle, setMcTitle] = useState("");
@@ -36,7 +36,7 @@ export function AddBookingModal({
useEffect(() => { useEffect(() => {
if (!open) return; if (!open) return;
setName(""); setPhone(""); setInstagram(""); setTelegram(""); setMcTitle(""); setOdClassId(""); setName(""); setPhone("+375 "); setInstagram(""); setTelegram(""); setMcTitle(""); setOdClassId("");
// Fetch upcoming MCs (filter out expired) // Fetch upcoming MCs (filter out expired)
adminFetch("/api/admin/sections/masterClasses").then((r) => r.json()).then((data: { items?: { title: string; slots: { date: string }[] }[] }) => { adminFetch("/api/admin/sections/masterClasses").then((r) => r.json()).then((data: { items?: { title: string; slots: { date: string }[] }[] }) => {
@@ -73,6 +73,20 @@ export function AddBookingModal({
return () => document.removeEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]); }, [open, onClose]);
function handlePhoneChange(raw: string) {
let digits = raw.replace(/\D/g, "");
if (!digits.startsWith("375")) digits = "375" + digits.replace(/^375?/, "");
digits = digits.slice(0, 12);
let formatted = "+375";
const rest = digits.slice(3);
if (rest.length > 0) formatted += " (" + rest.slice(0, 2);
if (rest.length >= 2) formatted += ") ";
if (rest.length > 2) formatted += rest.slice(2, 5);
if (rest.length > 5) formatted += "-" + rest.slice(5, 7);
if (rest.length > 7) formatted += "-" + rest.slice(7, 9);
setPhone(formatted);
}
const hasUpcomingMc = mcOptions.length > 0; const hasUpcomingMc = mcOptions.length > 0;
const hasOpenDay = odEventId !== null && odClasses.length > 0; const hasOpenDay = odEventId !== null && odClasses.length > 0;
const hasEvents = hasUpcomingMc || hasOpenDay; const hasEvents = hasUpcomingMc || hasOpenDay;
@@ -202,7 +216,7 @@ export function AddBookingModal({
)} )}
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" className={inputClass} /> <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Имя" className={inputClass} />
<input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Телефон" className={inputClass} /> <input type="tel" value={phone} onChange={(e) => handlePhoneChange(e.target.value)} placeholder="+375 (__) ___-__-__" className={inputClass} />
<div className="flex gap-2"> <div className="flex gap-2">
<input type="text" value={instagram} onChange={(e) => setInstagram(e.target.value)} placeholder="Instagram" className={inputClass} /> <input type="text" value={instagram} onChange={(e) => setInstagram(e.target.value)} placeholder="Instagram" className={inputClass} />
<input type="text" value={telegram} onChange={(e) => setTelegram(e.target.value)} placeholder="Telegram" className={inputClass} /> <input type="text" value={telegram} onChange={(e) => setTelegram(e.target.value)} placeholder="Telegram" className={inputClass} />