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

feat: phone input mask with +375 prefix and auto-formatting

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Diana Dolgolyova
2026-03-10 20:18:07 +03:00
parent 0c8c45dcd9
commit 13b68484e1
1 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/ui/BookingModal.tsx
View File

@@ -12,7 +12,30 @@ interface BookingModalProps {
export function BookingModal({ open, onClose }: BookingModalProps) { export function BookingModal({ open, onClose }: BookingModalProps) {
const { contact } = siteContent; const { contact } = siteContent;
const [name, setName] = useState(""); 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); const [submitted, setSubmitted] = useState(false);
// Close on Escape // Close on Escape
@@ -54,7 +77,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
// Reset after animation // Reset after animation
setTimeout(() => { setTimeout(() => {
setName(""); setName("");
setPhone(""); setPhone("+375 ");
setSubmitted(false); setSubmitted(false);
}, 300); }, 300);
}, [onClose]); }, [onClose]);
@@ -125,7 +148,7 @@ export function BookingModal({ open, onClose }: BookingModalProps) {
<input <input
type="tel" type="tel"
value={phone} value={phone}
onChange={(e) => setPhone(e.target.value)} onChange={(e) => handlePhoneChange(e.target.value)}
placeholder="+375 (__) ___-__-__" placeholder="+375 (__) ___-__-__"
required 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]" 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]"