// ABO Tracking — modals (split from abo.jsx). // SixWChoice, ConfirmToggle, SponsorPicker, PersonDetail, AddProspect. // Owns window.AboView export. // ======================== 6W choice modal ======================== function SixWChoiceModal({ pending, onCancel, onChoose }) { // Hooks must always run — keep useEffect ABOVE the early return. useEffect(() => { if (!pending) return; const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); onCancel(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [pending]); if (!pending) return null; const { person } = pending; const current = person.filled.em6w; const isEnrolled = current === 'enrolled' || current === true; const isNoEnroll = current === 'noenroll'; const country = window.COUNTRIES?.find(c => c.id === person.country); return (
บันทึกสถานะ 6W · EM6W
โปรแกรมลดน้ำหนัก 6 สัปดาห์
} footer={
เลือก 1 ตัวเลือก · Esc เพื่อยกเลิก ยกเลิก
}>
{person.name} {country && {country.flag}}
{person.source === 'EM6W' ? '🥤 EM6W' : '💼 Sponsor'}
{current && ( {isEnrolled ? 'เข้าคอร์ส' : 'ไม่เข้าคอร์ส'} )}
{current && ( )}
); } // ======================== Confirm toggle modal ======================== function ConfirmToggleModal({ pending, onCancel, onConfirm }) { // Hooks must run on every render — declare them BEFORE any early return. const btnRef = React.useRef(null); useEffect(() => { if (!pending) return; const t = setTimeout(() => btnRef.current?.focus(), 30); const onKey = (e) => { if (e.key === 'Enter') { e.preventDefault(); onConfirm(); } if (e.key === 'Escape') { e.preventDefault(); onCancel(); } }; window.addEventListener('keydown', onKey); return () => { clearTimeout(t); window.removeEventListener('keydown', onKey); }; }, [pending]); if (!pending) return null; const { person, col } = pending; const wasFilled = !!person.filled[col.id]; const group = FU_GROUPS.find(g => g.id === col.groupId); const country = window.COUNTRIES?.find(c => c.id === person.country); return (
{wasFilled ? : }
{wasFilled ? 'ยกเลิกการติ๊ก?' : 'บันทึกการติ๊ก?'}
{group.label}
} footer={
Enter เพื่อยืนยัน · Esc เพื่อยกเลิก
ยกเลิก {wasFilled ? ( ) : ( )}
}>
{person.name} {country && {country.flag}}
{person.source === 'EM6W' ? '🥤 EM6W' : '💼 Sponsor'}
{group.label}
{!wasFilled && } {wasFilled && }
{wasFilled ?
: }
{col.label}
{wasFilled ? <>กำลังจะ ยกเลิก การติ๊กรายการนี้ — ระบบจะเอาเครื่องหมายออกและบันทึก log ไว้ : <>กำลังจะ บันทึก ว่า {person.name} ทำขั้นตอน {col.label} แล้ว }
); } // ======================== Sponsor (DL-of) picker ======================== // Pick which other person in the sheet `person` is a downline of. Each // candidate row shows quick contact info (IG / source link / ABO / 6W LINE // group) so the user can confirm who they're linking before picking. function SponsorPickerModal({ person, people, onClose, onPick }) { const [q, setQ] = useState(''); useEffect(() => { if (person) setQ(''); }, [person]); if (!person) return null; const term = q.trim().toLowerCase(); // Candidates = everyone except the person themself (avoid self-sponsor). const candidates = (people || []) .filter(c => c.id !== person.id) .filter(c => !term || c.name.toLowerCase().includes(term) || (c.abo_code || '').includes(term)); const igUrl = (c) => c.sourceUrl || (c.igHandle ? `https://instagram.com/${c.igHandle}` : null); return (
เลือกว่า {person.name} เป็น DL ของใคร
แตะคนที่เป็น upline · ดูข้อมูล IG / ลิงก์ก่อนเลือกได้
} footer={
ปิด
}>
setQ(e.target.value)} autoFocus placeholder="ค้นหาชื่อ หรือ รหัส ABO…" className="w-full h-9 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15" />
{candidates.length === 0 && (
ไม่พบรายชื่อ
)} {candidates.map(c => { const isCur = person.sponsorId === c.id; const url = igUrl(c); return (
{/* Info links — open without selecting. */}
{url && ( )} {c.lineGroupUrl && ( )}
); })}
); } // ======================== Add prospect modal ======================== // ======================== Edit person modal (name + ABO) ======================== // Full prospect detail — opens when a name is clicked. Shows + edits the // info captured at add-time: name, ABO, lead source + link, age, occupation, // note, photo. function PersonDetailModal({ person, onCancel, onSubmit }) { const [name, setName] = useState(''); const [abo, setAbo] = useState(''); const [leadSource, setLeadSource] = useState(''); const [sourceUrl, setSourceUrl] = useState(''); const [age, setAge] = useState(''); const [occupation, setOccupation] = useState(''); const [note, setNote] = useState(''); const [photo, setPhoto] = useState(null); const photoInputRef = React.useRef(null); const leadSources = window.LEAD_SOURCES || []; useEffect(() => { if (!person) return; setName(person.name || ''); setAbo(person.abo_code || ''); setLeadSource(person.leadSource || ''); setSourceUrl(person.sourceUrl || ''); setAge(person.age != null ? String(person.age) : ''); setOccupation(person.occupation || ''); setNote(person.notes || ''); setPhoto(person.photoUrl || null); const onKey = (e) => { if (e.key === 'Escape') { e.preventDefault(); onCancel(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [person?.id]); if (!person) return null; const onPhoto = (e) => { const f = e.target.files?.[0]; if (!f) return; const r = new FileReader(); r.onload = () => setPhoto(r.result); r.readAsDataURL(f); e.target.value = ''; }; const aboValid = abo.length === 0 || /^\d{10}$/.test(abo); const canSubmit = name.trim().length > 0 && aboValid; const openUrl = sourceUrl.trim() || (person.igHandle ? `https://instagram.com/${person.igHandle}` : null); const submit = (e) => { e?.preventDefault?.(); if (!canSubmit) return; onSubmit({ name: name.trim(), abo_code: abo || null, source_id: leadSource || null, source_url: sourceUrl.trim() || null, age: age.trim() === '' ? null : Math.max(0, Math.min(130, parseInt(age, 10) || 0)), occupation: occupation.trim() || null, notes: note.trim() || null, photo_url: photo || null, }); }; return ( {photo ? :
}
{person.name}
ข้อมูล Prospect
} footer={
Esc เพื่อปิด
ยกเลิก
}>
{/* Photo */}
{photo ? :
}
{photo && }
setName(e.target.value)} className="w-full h-9 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15" />
setAbo(e.target.value.replace(/\D/g, '').slice(0, 10))} placeholder="0000000000" inputMode="numeric" maxLength={10} className={`w-full h-9 px-3 text-sm num tracking-wider border rounded-lg outline-none focus:ring-2 ${!aboValid ? 'border-rose-300 focus:border-rose-500 focus:ring-rose-500/15' : 'border-ink-200 focus:border-brand-500 focus:ring-brand-500/15'}`} /> {!aboValid &&

ต้องเป็นตัวเลข 10 หลักเท่านั้น

}
{/* Lead source + link */}
{leadSources.map(s => { const active = leadSource === s.id; return ( ); })}
setSourceUrl(e.target.value)} placeholder="แนบลิงก์ profile / โพสต์" inputMode="url" className="w-full h-9 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15" />
setAge(e.target.value.replace(/\D/g, '').slice(0, 3))} placeholder="—" inputMode="numeric" className="w-full h-9 px-3 text-sm num border border-ink-200 rounded-lg outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15" />
setOccupation(e.target.value)} placeholder="—" className="w-full h-9 px-3 text-sm border border-ink-200 rounded-lg outline-none focus:border-brand-500 focus:ring-2 focus:ring-brand-500/15" />