From b251ee51384b1785206278d9ff131d1a04bea22c Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Wed, 25 Mar 2026 00:18:54 +0300
Subject: [PATCH] feat: phone input mask +375 (XX) XXX-XX-XX in manual booking
 modal

---
 src/app/admin/bookings/AddBookingModal.tsx | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/app/admin/bookings/AddBookingModal.tsx b/src/app/admin/bookings/AddBookingModal.tsx
index f519396..4267c20 100644
--- a/src/app/admin/bookings/AddBookingModal.tsx
+++ b/src/app/admin/bookings/AddBookingModal.tsx
@@ -24,7 +24,7 @@ export function AddBookingModal({
   const [tab, setTab] = useState<Tab>("classes");
   const [eventType, setEventType] = useState<EventType>("master-class");
   const [name, setName] = useState("");
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState("+375 ");
   const [instagram, setInstagram] = useState("");
   const [telegram, setTelegram] = useState("");
   const [mcTitle, setMcTitle] = useState("");
@@ -36,7 +36,7 @@ export function AddBookingModal({
 
   useEffect(() => {
     if (!open) return;
-    setName(""); setPhone(""); setInstagram(""); setTelegram(""); setMcTitle(""); setOdClassId("");
+    setName(""); setPhone("+375 "); setInstagram(""); setTelegram(""); setMcTitle(""); setOdClassId("");
 
     // Fetch upcoming MCs (filter out expired)
     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);
   }, [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 hasOpenDay = odEventId !== null && odClasses.length > 0;
   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="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">
             <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} />