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) {
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]"