From 13b68484e1399f5ccc86945d48127afa1e1f5c17 Mon Sep 17 00:00:00 2001
From: "diana.dolgolyova" <diana.dolgolyova@gmail.com>
Date: Tue, 10 Mar 2026 20:18:07 +0300
Subject: [PATCH] feat: phone input mask with +375 prefix and auto-formatting

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/ui/BookingModal.tsx | 29 ++++++++++++++++++++++++++---
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/BookingModal.tsx b/src/components/ui/BookingModal.tsx
index eab946e..26767a3 100644
--- a/src/components/ui/BookingModal.tsx
+++ b/src/components/ui/BookingModal.tsx
@@ -12,7 +12,30 @@ interface BookingModalProps {
 export function BookingModal({ open, onClose }: BookingModalProps) {
   const { contact } = siteContent;
   const [name, setName] = useState("");
-  const [phone, setPhone] = useState("");
+  const [phone, setPhone] = useState("+375 ");
+
+  // Format phone: +375 (XX) XXX-XX-XX
+  function handlePhoneChange(raw: string) {
+    // Strip everything except digits
+    let digits = raw.replace(/\D/g, "");
+    // Ensure starts with 375
+    if (!digits.startsWith("375")) {
+      digits = "375" + digits.replace(/^375?/, "");
+    }
+    // Limit to 12 digits (375 + 9 digits)
+    digits = digits.slice(0, 12);
+
+    // Format
+    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 [submitted, setSubmitted] = useState(false);
 
   // Close on Escape
@@ -54,7 +77,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
     // Reset after animation
     setTimeout(() => {
       setName("");
-      setPhone("");
+      setPhone("+375 ");
       setSubmitted(false);
     }, 300);
   }, [onClose]);
@@ -125,7 +148,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
                 <input
                   type="tel"
                   value={phone}
-                  onChange={(e) => setPhone(e.target.value)}
+                  onChange={(e) => handlePhoneChange(e.target.value)}
                   placeholder="+375 (__) ___-__-__"
                   required
                   className="w-full rounded-xl border border-white/[0.08] bg-white/[0.04] px-4 py-3 text-sm text-white placeholder-neutral-500 outline-none transition-colors focus:border-[#c9a96e]/40 focus:bg-white/[0.06]"