/* ============================================================ VLF 2026 · BUY FLOW — phase · 3 nhánh · 3 bước có giỏ Nhánh: view (Vé xem) · play (Vé thi đấu) · combo (Gói trải nghiệm) props: nav, phase, persona, addTicket, addOrder ============================================================ */ function BuyTickets({ nav, phase, persona, addTicket, addOrder, backRef }) { const t = useT();const lang = t.lang;const T = (vi, en) => lang === 'en' ? en : vi; const E = (o, k) => window.VLF.L(lang, o, k); const L2 = (o) => o ? o[lang] || o.vi : ''; // field vốn là object {vi,en} const V = window.VLF;const M = V.money; const ph = V.salePhases.find((p) => p.id === phase) || V.salePhases[1]; const px = (base) => V.phasePrice(base, ph.id); const me = V.personas[persona] && V.personas[persona].me || { name: 'Khách VLF' }; const [branch, setBranch] = useState(null); // 'view' | 'play' | 'combo' const [step, setStep] = useState(1); // 1 chọn · 2 upsell · 3 giỏ const [picked, setPicked] = useState(null); // ticket/combo object const [qty, setQty] = useState(1); const [galaSel, setGalaSel] = useState({}); // gala by date const [adds, setAdds] = useState({}); // addonId -> qty const [trainVenue, setTrainVenue] = useState(null); const [trainPkg, setTrainPkg] = useState(null); const [sheet, setSheet] = useState(null); // addon đang xem chi tiết const [pay, setPay] = useState('qr'); const [invoice, setInvoice] = useState(false); const [inv, setInv] = useState({ company: '', tax: '', email: '' }); const [result, setResult] = useState(null); const ref = React.useMemo(() => 'VLF' + Math.floor(10000 + Math.random() * 89999), []); const gift = ph.id === 'gift'; const isCombo = branch === 'combo'; /* back ở header hệ thống pop theo bước: step>1 → step trước; đã chọn nhánh → về chọn loại vé; gốc → thoát (false) */ React.useEffect(() => { if (!backRef) return; backRef.current = () => { if (step > 1) { setStep((s) => s - 1); return true; } if (branch) { setBranch(null); return true; } return false; }; return () => { backRef.current = null; }; }, [step, branch]); function reset() {setStep(1);setPicked(null);setQty(1);setGalaSel({});setAdds({});setTrainVenue(null);setTrainPkg(null);} function pickBranch(b) {setBranch(b);reset();} /* ---------- promo & giá vé ---------- */ function bestPromo(tk, q) { if (!tk || !tk.promo) return null; let best = null;tk.promo.forEach((p) => {if (q >= p.min && (!best || p.off > best.off)) best = p;}); return best; } const promo = bestPromo(picked, qty); const galaBase = V.addons.find((a) => a.id === 'gala'); const galaPrice = Math.round(px(galaBase.base) * (1 - (galaBase.disc || 0)) / 10000) * 10000; /* ---------- giỏ ---------- */ const addLines = []; if (picked) { const unit = Math.round(px(picked.base) * (promo ? 1 - promo.off : 1) / 10000) * 10000; addLines.push({ key: 'tk', name: E(picked, 'name'), price: unit, qty, promoLabel: promo ? E(promo, 'label') : null }); (picked.includes || []).forEach((inc, i) => addLines.push({ key: 'inc' + i, name: inc[lang] || inc.vi, price: 0, qty: 1, included: true })); } Object.keys(galaSel).forEach((d) => {if (galaSel[d]) {const g = V.galaNights.find((x) => x.date === d);addLines.push({ key: 'gala-' + d, name: 'Gala Dinner · ' + (g ? g.date : d), price: galaPrice, qty: 1 });}}); V.addons.forEach((a) => {if (a.id !== 'gala' && adds[a.id]) addLines.push({ key: a.id, name: E(a, 'name'), price: px(a.base), qty: adds[a.id] });}); if (trainPkg && branch === 'play' && picked && picked.id === 'side') {const v = V.training.venues.find((x) => x.id === trainVenue);addLines.push({ key: 'train', name: T('Tập golf · ', 'Training · ') + E(trainPkg, 'name') + (v ? ' · ' + v.name : ''), price: trainPkg.base, qty: 1 });} const total = addLines.reduce((s, l) => s + l.price * l.qty, 0); function commit(ok) { if (ok && picked) { const span = isCombo ? E(picked, 'who') : branch === 'play' ? T('Suất thi đấu', 'Playing slot') : picked.unit ? E(picked, 'unit') : T('Vé xem', 'Spectator'); addTicket && addTicket({ name: E(picked, 'name'), tag: picked.tag, span, attendee: me.name, code: ref }); addOrder && addOrder({ ref, kind: 'ticket', items: addLines.map((l) => ({ name: l.name + (l.included ? T(' · Đã gồm', ' · Included') : ''), qty: l.qty, price: l.price, tint: '#522367' })), total, deliv: 'eticket', method: pay, date: '19/06/2026', status: 'ready' }); } setResult(ok ? 'ok' : 'fail'); } /* ---------- KẾT QUẢ ---------- */ if (result === 'ok') { return nav('ticket')} />; } if (result === 'fail') { return (

{T('Thanh toán thất bại', 'Payment failed')}

{T('Giao dịch bị từ chối hoặc gián đoạn. Giỏ hàng của bạn vẫn được giữ — vui lòng thử lại.', 'Declined or interrupted. Your cart is kept — please try again.')}

); } /* ---------- CHỌN NHÁNH ---------- */ if (!branch) { return (

{T('Bạn muốn mua loại vé nào?', 'Which ticket type?')}

pickBranch('view')}>
{T('Vé xem', 'Spectator')}
{T('Khán giả vào xem giải · Thường / VIP', 'Watch the event · General / VIP')}
pickBranch('play')}>
{T('Vé thi đấu', 'Compete')}
{T('Vận động viên · Bảng phụ / Pro-Am / Legends', 'Athletes · Side / Pro-Am / Legends')}
pickBranch('combo')}>
{T('Gói trải nghiệm', 'Experience packages')}
{T('Trọn hành trình · Gia đình · Golfer', 'Full journey · Family · Golfer')}

{V.childPolicy[lang] || V.childPolicy.vi}

); } const stepLabels = [T('Chọn vé', 'Choose'), T('Nâng cấp', 'Add-ons'), T('Giỏ & thanh toán', 'Cart & pay')]; /* render 1 thẻ vé/combo */ function TicketCard(tk) { const on = picked && picked.id === tk.id; const tkPromo = bestPromo(tk, on ? qty : 1); return (
{setPicked(tk);if (!on) setQty(1);}} style={{ cursor: 'pointer', borderColor: on ? 'var(--vlf-purple-600)' : tk.featured ? 'var(--vlf-gold-500)' : undefined, borderWidth: on || tk.featured ? 2 : 1 }}>
{tk.featured && {T('Đáng mua nhất', 'Best value')}}
{E(tk, 'name')}
{isCombo ? E(tk, 'who') : E(tk, 'note')}
{gift && !isCombo ? {T('Vé mời', 'Invite')} : <>{M(px(tk.base))}{tk.unit && {E(tk, 'unit')}}} {!(gift && !isCombo) && ph.mult < 1 &&
{M(tk.base)}
}
{(isCombo ? tk.includes.map((x) => x[lang] || x.vi) : E(tk, 'perks')).map((pk, j) =>
{pk}
)}
{tk.promo &&
{tk.promo.map((p, j) => {E(p, 'label')})}
} {tk.highlight &&
{L2(tk.highlight)}
} {isCombo && tk.note &&
{E(tk, 'note')}
} {on &&
{T('Số lượng', 'Qty')}
{qty}
}
); } return (
{stepLabels.map((l, i) => {i > 0 && }= i + 1 ? 'on' : ''}>{i + 1} · {l})}
{/* BƯỚC 1 — chọn vé */} {step === 1 && <> {isCombo ? V.comboSegs.map((seg) =>

{E(seg, 'name')}

{V.combos.filter((c) => c.seg === seg.id).map((c) => TicketCard(c))}
) :
{(branch === 'view' ? V.viewTickets : V.playTickets).map((tk) => TicketCard(tk))}
} {gift && !isCombo &&

{T('Đang ở giai đoạn Vé tặng — vé phát hành dạng mời, kích hoạt bằng mã. Mở bán thương mại từ Early Bird.', 'Gift phase — tickets are invite-only via code. Commercial sale starts at Early Bird.')}

} } {/* BƯỚC 2 — upsell */} {step === 2 && <> {branch === 'play' &&
{T('Vé thi đấu đã gồm Gala + VIP Lounge ĐÚNG NGÀY bạn thi đấu. Mua thêm cho ngày khác bên dưới.', 'Your entry already includes Gala + VIP Lounge ON your competition day. Add other days below.')}
} {/* Gói tập golf — chỉ khi chọn vé bảng phụ */} {branch === 'play' && picked && picked.id === 'side' && <>

{T('Gói tập golf cho người mới', 'Training for new players')}

{L2(V.training.note)}

{V.training.venues.map((v) => )}
{V.training.packages.map((p) => { const on = trainPkg && trainPkg.id === p.id; return (
{setTrainPkg(p);if (!trainVenue) setTrainVenue(V.training.venues[0].id);}} style={{ cursor: 'pointer', borderColor: on ? 'var(--vlf-purple-600)' : p.featured ? 'var(--vlf-gold-500)' : undefined, borderWidth: on || p.featured ? 2 : 1, display: 'flex', alignItems: 'center', gap: 12 }}> {on && }
{E(p, 'name')}{p.featured && {T(p.tag, p.tagEn)}}
{L2(V.training.groupNote)}
{M(p.base)}
); })}
{trainPkg && } } {/* Gala Dinner — chỉ nhánh play */} {branch === 'play' && <>

{T('Gala Dinner', 'Gala Dinner')}

{M(galaPrice)}{T('/đêm · −30%', '/night · −30%')}
{V.galaNights.map((g) => )}

{T('Gala chỉ tổ chức tối Thứ Tư, Thứ Sáu, Thứ Bảy — không có tối Thứ Năm.', 'Gala runs Wed, Fri, Sat nights only — no Thursday.')}

} {/* Add-on services */}

{T('Dịch vụ thêm', 'Add-on services')}

{T('chạm để xem chi tiết', 'tap for details')}
{V.addons.filter((a) => a.id !== 'gala').map((a) => { const q = adds[a.id] || 0; return (
setSheet(a)}>
{E(a, 'name')}{q > 0 && ×{q}}
{M(px(a.base))} {E(a, 'unit')} · {T('Chi tiết', 'Details')}
{q === 0 ? :
e.stopPropagation()}>{q}
}
); })}
{/* Chính sách ra vào */}

{T('Chính sách ra vào', 'Access policy')}

{(V.accessNote[lang] || V.accessNote.vi).map((line, i) =>
{line}
)}
{V.childPolicy[lang] || V.childPolicy.vi}
} {/* BƯỚC 3 — review + thanh toán */} {step === 3 && <>

{T('Xác nhận đơn hàng', 'Review order')}

{addLines.reduce((s, l) => s + l.qty, 0)} {T('mục', 'items')}
{addLines.map((l) =>
{l.name}{l.promoLabel && {l.promoLabel}}
{l.included ? T('Quyền lợi kèm theo', 'Bundled benefit') : M(l.price) + ' × ' + l.qty}
{l.included ? {T('Đã gồm', 'Included')} : {M(l.price * l.qty)}}
)}
{T('Tổng cộng', 'Total')}
{T('Đã gồm VAT', 'VAT included')}
{M(total)}
{T('Phương thức thanh toán', 'Payment method')}
{invoice &&
setInv({ ...inv, company: e.target.value })} placeholder={T('Công ty TNHH...', 'Company Ltd...')} />
setInv({ ...inv, tax: e.target.value })} inputMode="numeric" placeholder="0123456789" />
setInv({ ...inv, email: e.target.value })} inputMode="email" placeholder="ketoan@congty.vn" />
}

{T('Thanh toán 1 lần cho toàn bộ giỏ. BTC gửi dress code & hướng dẫn qua tin nhắn sau khi đặt.', 'One payment for the whole cart. Dress code & guidance are messaged after purchase.')}

}
{step >= 2 &&
{T('Tạm tính', 'Subtotal')} {M(total)}
} {step === 1 && } {step === 2 && } {step === 3 && }
{sheet && ReactDOM.createPortal(
setSheet(null)}>
e.stopPropagation()}>
{E(sheet, 'name')}
{M(px(sheet.base))} {E(sheet, 'unit')}

{E(sheet, 'desc')}

{T('Số lượng', 'Quantity')}
{adds[sheet.id] || 0}
, document.querySelector('.za-screen') || document.body)}
); } function PhaseStrip({ ph, V, lang, E, T, compact }) { const [left, setLeft] = useState(3 * 86400 - 1); React.useEffect(() => {const id = setInterval(() => setLeft((s) => s > 0 ? s - 1 : 0), 1000);return () => clearInterval(id);}, []); const dd = Math.floor(left / 86400),hh = Math.floor(left % 86400 / 3600),mm = Math.floor(left % 3600 / 60),ss = left % 60; return (
{T('Giai đoạn', 'Phase')}: {E(ph, 'name')} {ph.mult === 0 ? T('Đếm ngược', 'Countdown') : ph.mult < 1 ? T('Giảm 20%', '20% off') : T('Giá chính thức', 'Standard')}
{V.salePhases.map((p, i) =>
{i + 1}
{E(p, 'name')}
{E(p, 'sub')}
)}
{ph.id === 'gift' &&
{dd}{T('n', 'd')} {String(hh).padStart(2, '0')}:{String(mm).padStart(2, '0')}:{String(ss).padStart(2, '0')} {T('đến Early Bird', 'to Early Bird')}
}
); } Object.assign(window, { BuyTickets });