// OTP Verification — phone input with country dropdown, email field, OTP modal const { useState: useStateO, useRef: useRefO, useEffect: useEffectO, useMemo: useMemoO } = React; // ===== Flag SVGs (rendered inside a circle) ===== const FlagSA = () => ; const FlagUS = () => {[0, 2, 4, 6, 8, 10, 12].map((y) => )} {[...Array(12)].map((_, i) => )} ; const FlagUZ = () => ; const FlagAF = () => ; const FlagAL = () => 𓅃 ; const FlagDZ = () => ; const FlagAD = () => ; const FlagAE = () => ; const FlagEG = () => ; const FlagJO = () => ; const FlagKW = () => ; const FlagBH = () => ; const FlagQA = () => ; const FlagOM = () => ; const FlagYE = () => ; const FlagIQ = () => الله أكبر ; const FlagSY = () => ; const FlagLB = () => ; const FlagPS = () => ; const FlagGB = () => ; const FlagFR = () => ; const FlagDE = () => ; const FlagIN = () => ; const FlagPK = () => ; const FlagTR = () => ; const COUNTRIES = [ { code: 'US', name: 'United States', dial: '+1', flag: FlagUS }, { code: 'UZ', name: 'Uzbekistan', dial: '+998', flag: FlagUZ }, { code: 'AF', name: 'Afganistan', dial: '+93', flag: FlagAF }, { code: 'AL', name: 'Albania', dial: '+355', flag: FlagAL }, { code: 'DZ', name: 'Algeria', dial: '+213', flag: FlagDZ }, { code: 'AD', name: 'Andorra', dial: '+376', flag: FlagAD }, { code: 'SA', name: 'Saudi Arabia', dial: '+966', flag: FlagSA }, { code: 'AE', name: 'United Arab Emirates', dial: '+971', flag: FlagAE }, { code: 'EG', name: 'Egypt', dial: '+20', flag: FlagEG }, { code: 'JO', name: 'Jordan', dial: '+962', flag: FlagJO }, { code: 'KW', name: 'Kuwait', dial: '+965', flag: FlagKW }, { code: 'BH', name: 'Bahrain', dial: '+973', flag: FlagBH }, { code: 'QA', name: 'Qatar', dial: '+974', flag: FlagQA }, { code: 'OM', name: 'Oman', dial: '+968', flag: FlagOM }, { code: 'YE', name: 'Yemen', dial: '+967', flag: FlagYE }, { code: 'IQ', name: 'Iraq', dial: '+964', flag: FlagIQ }, { code: 'SY', name: 'Syria', dial: '+963', flag: FlagSY }, { code: 'LB', name: 'Lebanon', dial: '+961', flag: FlagLB }, { code: 'PS', name: 'Palestine', dial: '+970', flag: FlagPS }, { code: 'GB', name: 'United Kingdom', dial: '+44', flag: FlagGB }, { code: 'FR', name: 'France', dial: '+33', flag: FlagFR }, { code: 'DE', name: 'Germany', dial: '+49', flag: FlagDE }, { code: 'IN', name: 'India', dial: '+91', flag: FlagIN }, { code: 'PK', name: 'Pakistan', dial: '+92', flag: FlagPK }, { code: 'TR', name: 'Türkiye', dial: '+90', flag: FlagTR }]; // Verify icon (refresh-style) const IcVerify = ({ size = 18 }) => ; const IcInfo = ({ size = 16 }) => ; const IcChevronUpDown = () => ; const IcSearch = ({ size = 18 }) => ; const IcCheckCircle = ({ size = 18 }) => ; const IcResend = ({ size = 16 }) => ; // ===== Phone Input with Country Dropdown ===== const PhoneInput = ({ data, onChange, onVerify, verified, showVerify }) => { const [open, setOpen] = useStateO(false); const [query, setQuery] = useStateO(''); const wrapRef = useRefO(null); const country = COUNTRIES.find((c) => c.code === (data.phoneCountry || 'SA')) || COUNTRIES[6]; useEffectO(() => { if (!open) return; const onDoc = (e) => {if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);}; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, [open]); const filtered = useMemoO(() => { const q = query.trim().toLowerCase(); if (!q) return COUNTRIES; return COUNTRIES.filter((c) => c.name.toLowerCase().includes(q) || c.dial.includes(q)); }, [query]); const select = (c) => {onChange('phoneCountry', c.code);setOpen(false);setQuery('');}; const Flag = country.flag; return (
{country.dial} onChange('phone', e.target.value)} placeholder="5XX XXX XXXX" /> {showVerify && (verified ? Verified : )}
{showVerify && !verified &&
Verification required before saving
} {open &&
setQuery(e.target.value)} placeholder="Search for countries" />
{filtered.slice(0, 2).map((c) => { const F = c.flag; return ( ); })} {filtered.length > 2 &&
} {filtered.slice(2).map((c) => { const F = c.flag; return ( ); })} {filtered.length === 0 &&
No countries match
}
}
); }; // Expose for reuse by other modules (e.g. Voice Service phone-number entry). window.PhoneInput = PhoneInput; window.COUNTRIES = COUNTRIES; // ===== Email Input ===== const EmailInput = ({ value, onChange, onVerify, verified, error, showVerify }) => { return (
onChange(e.target.value)} placeholder="name@company.sa" /> {showVerify && (verified ? Verified : )}
{showVerify && !verified &&
Verification required before saving
}
); }; // ===== OTP Modal ===== const OTP_LEN = 6; const TIMER_SECONDS = 60; const OtpModal = ({ target, channel, onClose, onSuccess }) => { const [code, setCode] = useStateO(Array(OTP_LEN).fill('')); const [seconds, setSeconds] = useStateO(TIMER_SECONDS); const [status, setStatus] = useStateO('input'); // 'input' | 'invalid' | 'expired' | 'success' const refs = useRefO([]); useEffectO(() => { if (status === 'success') return; if (seconds <= 0) { if (status !== 'expired') setStatus('expired'); return; } const t = setTimeout(() => setSeconds((s) => s - 1), 1000); return () => clearTimeout(t); }, [seconds, status]); useEffectO(() => { refs.current[0]?.focus(); }, []); const handleChange = (i, v) => { if (status === 'expired') return; const ch = v.replace(/[^0-9]/g, '').slice(-1); const next = [...code]; next[i] = ch; setCode(next); if (status === 'invalid') setStatus('input'); if (ch && i < OTP_LEN - 1) refs.current[i + 1]?.focus(); if (next.every((c) => c !== '')) { // Pretend any code that ends with "0" is invalid; otherwise success after a beat const joined = next.join(''); setTimeout(() => { if (joined === '150999') { setStatus('invalid'); } else { setStatus('success'); setTimeout(() => onSuccess(), 1300); } }, 200); } }; const handleKeyDown = (i, e) => { if (e.key === 'Backspace' && !code[i] && i > 0) { refs.current[i - 1]?.focus(); } else if (e.key === 'ArrowLeft' && i > 0) { refs.current[i - 1]?.focus(); } else if (e.key === 'ArrowRight' && i < OTP_LEN - 1) { refs.current[i + 1]?.focus(); } }; const handlePaste = (e) => { const t = (e.clipboardData.getData('text') || '').replace(/[^0-9]/g, '').slice(0, OTP_LEN); if (!t) return; e.preventDefault(); const next = Array(OTP_LEN).fill(''); for (let i = 0; i < t.length; i++) next[i] = t[i]; setCode(next); refs.current[Math.min(t.length, OTP_LEN - 1)]?.focus(); if (next.every((c) => c !== '')) { setTimeout(() => { if (next.join('') === '150999') setStatus('invalid');else {setStatus('success');setTimeout(() => onSuccess(), 1300);} }, 200); } }; const resend = () => { setSeconds(TIMER_SECONDS); setCode(Array(OTP_LEN).fill('')); setStatus('input'); setTimeout(() => refs.current[0]?.focus(), 50); }; // Circular progress const R = 36; const C = 2 * Math.PI * R; const progress = Math.max(0, Math.min(1, seconds / TIMER_SECONDS)); return (
e.stopPropagation()}>

OTP Verification

{status === 'success' ?
Successfully
OTP verified successfully
: <> {status === 'invalid' &&
Invalid OTP
}
The verification code has been sent to your {channel === 'phone' ? 'Phone number' : 'Email address'}
{target}
{code.slice(0, 3).map((c, i) => refs.current[i] = el} className={`otp-box ${c ? 'has-value' : ''} ${status === 'invalid' ? 'is-invalid' : ''}`} inputMode="numeric" maxLength={1} value={c} onChange={(e) => handleChange(i, e.target.value)} onKeyDown={(e) => handleKeyDown(i, e)} onPaste={handlePaste} disabled={status === 'expired'} /> )} {code.slice(3).map((c, idx) => { const i = idx + 3; return ( refs.current[i] = el} className={`otp-box ${c ? 'has-value' : ''} ${status === 'invalid' ? 'is-invalid' : ''}`} inputMode="numeric" maxLength={1} value={c} onChange={(e) => handleChange(i, e.target.value)} onKeyDown={(e) => handleKeyDown(i, e)} onPaste={handlePaste} disabled={status === 'expired'} />); })}
{seconds} {status === 'expired' &&
Code expired — please resend
}
}
); }; Object.assign(window, { PhoneInput, EmailInput, OtpModal, COUNTRIES });