/* global React, firebase, Icon, Photo, kDb, kAuth, PRODUCT, STORE_CONFIG */ const { useState, useEffect, useRef } = React; // ─── KHQR generator (EMVCo + official Bakong NBC spec) ───────────────────── // Tag 29 sub-tag 00 = account ID directly (e.g. "username@aba") // No GUID domain string inside the QR data function generateKHQR(accountId, merchantName, amount, billNumber, currency = "USD") { const crc16 = s => { let c = 0xFFFF; for (let i = 0; i < s.length; i++) { c ^= s.charCodeAt(i) << 8; for (let j = 0; j < 8; j++) { c = (c & 0x8000) ? ((c << 1) ^ 0x1021) & 0xFFFF : (c << 1) & 0xFFFF; } } return c.toString(16).toUpperCase().padStart(4, "0"); }; const tlv = (t, v) => `${t}${String(v.length).padStart(2, "0")}${v}`; const acct = tlv("00", "bakong.nbc.gov.kh") + tlv("01", accountId); let q = tlv("00", "01") + tlv("01", "12") + tlv("29", acct) + tlv("52", "5999") + tlv("53", currency === "KHR" ? "116" : "840") + tlv("54", Number(amount).toFixed(2)) + tlv("58", "KH") + tlv("59", merchantName.slice(0, 25)) + tlv("60", "Phnom Penh"); if (billNumber) q += tlv("62", tlv("01", String(billNumber).slice(0, 25))); q += "6304"; return q + crc16(q); } // ─── Bakong QR payment modal ──────────────────────────────────────────────── function BakongQRModal({ qr, md5Hash, amount, orderId, merchantName, expiresAt, onPaid, onCancel }) { const [qrDataUrl, setQrDataUrl] = useState(null); const [qrError, setQrError] = useState(null); const [downloadUrl, setDownloadUrl] = useState(null); const modalRef = useRef(null); const initSecs = expiresAt ? Math.max(0, Math.round((expiresAt - Date.now()) / 1000)) : 300; const [secsLeft, setSecsLeft] = useState(initSecs); useEffect(() => { if (!qr) return; if (typeof qrcode === "undefined") { setQrError("QR library not loaded"); return; } try { const gen = qrcode(0, "M"); gen.addData(qr); gen.make(); setQrDataUrl(gen.createDataURL(4, 8)); } catch (e) { setQrError(String(e)); } }, [qr]); // Build composite PNG for download (header + amount + QR + scan hint) useEffect(() => { if (!qrDataUrl) return; const LOGO_SVG = ``; const logoUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(LOGO_SVG); const W = 320, dpr = 2; const headerH = 60, bodyPad = 16, qrSize = 240, hintH = 56; const H = headerH + 10 + 10 + 10 + 18 + 40 + 16 + qrSize + bodyPad + hintH + bodyPad; const canvas = document.createElement("canvas"); canvas.width = W * dpr; canvas.height = H * dpr; const ctx = canvas.getContext("2d"); ctx.scale(dpr, dpr); let loaded = 0; const qrImg = new Image(), logoImg = new Image(); const draw = () => { if (loaded < 2) return; const F = "-apple-system,BlinkMacSystemFont,Arial,sans-serif"; // White background ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, W, H); // Red header (exact #E21A1A from official KHQR SVG) ctx.fillStyle = "#E21A1A"; ctx.fillRect(0, 0, W, headerH); try { ctx.drawImage(logoImg, (W - 120) / 2, (headerH - 36) / 2, 120, 36); } catch {} // Account info strip let y = headerH + 10; ctx.fillStyle = "#888"; ctx.font = `11px monospace`; ctx.textAlign = "center"; ctx.fillText((merchantName || "KSHOP").toUpperCase(), W / 2, y); // Dotted separator y += 10; ctx.setLineDash([4, 4]); ctx.strokeStyle = "rgba(0,0,0,0.18)"; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(20, y); ctx.lineTo(W - 20, y); ctx.stroke(); ctx.setLineDash([]); // Merchant name y += 18; ctx.fillStyle = "#aaa"; ctx.font = `10px monospace`; ctx.textAlign = "center"; ctx.fillText(merchantName || "KSHOP", W / 2, y); // Amount + USD centered together y += 40; ctx.font = `bold 40px ${F}`; const amtStr = Number(amount).toFixed(2); const amtW = ctx.measureText(amtStr).width; ctx.font = `600 16px ${F}`; const usdW = ctx.measureText("USD").width; const rowW = amtW + 8 + usdW; const rx = (W - rowW) / 2; ctx.fillStyle = "#111"; ctx.font = `bold 40px ${F}`; ctx.textAlign = "left"; ctx.fillText(amtStr, rx, y); ctx.fillStyle = "#bbb"; ctx.font = `500 14px ${F}`; ctx.fillText("USD", rx + amtW + 8, y - 6); // QR — plain, no decorations const qrX = (W - qrSize) / 2, qrY = y + 16; ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize); // Scan hint const hy = qrY + qrSize + bodyPad + 14; ctx.fillStyle = "#555"; ctx.font = `12px ${F}`; ctx.textAlign = "center"; ctx.fillText("Scan with ABA, ACLEDA, Wing", W / 2, hy); ctx.fillStyle = "#777"; ctx.fillText("or any Bakong-supported app", W / 2, hy + 18); setDownloadUrl(canvas.toDataURL("image/png")); }; qrImg.onload = logoImg.onload = () => { loaded++; draw(); }; qrImg.onerror = logoImg.onerror = () => { loaded++; draw(); }; qrImg.src = qrDataUrl; logoImg.src = logoUrl; }, [qrDataUrl]); useEffect(() => { if (!qr || !md5Hash || !orderId) return; let alive = true; const check = async () => { if (!alive) return; try { const r = await fetch("https://checkbakongpayment-qsn4ilcqva-uc.a.run.app", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ md5: md5Hash, orderId }), }); const d = await r.json(); if (alive && d.paid) { alive = false; onPaid(); } } catch {} }; check(); const iv = setInterval(check, 3000); const to = setTimeout(() => { if (alive) { alive = false; clearInterval(iv); onCancel("timeout"); } }, 300000); return () => { alive = false; clearInterval(iv); clearTimeout(to); }; }, [qr]); // Countdown timer useEffect(() => { const t = setInterval(() => setSecsLeft(s => s > 0 ? s - 1 : 0), 1000); return () => clearInterval(t); }, []); // Focus trap + Escape key useEffect(() => { const modal = modalRef.current; if (!modal) return; const focusables = modal.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])'); const first = focusables[0]; const last = focusables[focusables.length - 1]; first?.focus(); const onKey = (e) => { if (e.key === "Escape") { onCancel(); return; } if (e.key !== "Tab") return; if (e.shiftKey) { if (document.activeElement === first) { e.preventDefault(); last?.focus(); } } else { if (document.activeElement === last) { e.preventDefault(); first?.focus(); } } }; document.addEventListener("keydown", onKey); return () => document.removeEventListener("keydown", onKey); }, []); const mins = String(Math.floor(secsLeft / 60)).padStart(1, "0"); const secs = String(secsLeft % 60).padStart(2, "0"); const KhqrPaths = ({ fill = "white" }) => (<> ); return (
{/* ── KHQR RED HEADER ── */}
{/* ── MERCHANT NAME + AMOUNT ── */}
{merchantName || "KSHOP"}
{Number(amount).toFixed(2)} USD
{/* ── DOTTED SEPARATOR — SVG y=16.364, after amount, before QR ── */}
{/* ── QR CODE — $ center overlay, matches SVG 72.2% card width ── */}
{qrDataUrl ?
KHQR payment code
$
: qrError ?
{qrError}
:
Generating…
}
{/* ── DIVIDER ── */}
{/* Download button */} {downloadUrl && ( )} {/* Expiry + status */}
Expires in: {mins}:{secs}
Scan with ABA, ACLEDA, Wing
or any Bakong-supported app
); } async function notifyOrderCF(orderId) { try { const token = await kAuth.currentUser.getIdToken(); fetch("https://notifyorder-qsn4ilcqva-uc.a.run.app", { method: "POST", headers: { "Content-Type": "application/json", "Authorization": `Bearer ${token}` }, body: JSON.stringify({ orderId }), }); } catch {} // Silent — order is already saved } // ─── Field with inline error ─────────────────────────────────────────────── function CField({ label, type = "text", value, onChange, placeholder, required, error }) { const fieldId = label.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase().slice(0, 20); const errId = fieldId + "-err"; return (
{ e.target.style.borderColor = "var(--fg)"; }} onBlur={e => { e.target.style.borderColor = error ? "var(--accent)" : "var(--line-strong)"; }} /> {error && ( {error} )}
); } // ─── Checkout page ───────────────────────────────────────────────────────── function CheckoutPage({ items, user, onBack, onSuccess, setRoute }) { const [form, setForm] = useState({ name: "", phone: "", address: "", notes: "" }); const [payment, setPayment] = useState("cod"); const [loadingData, setLoadingData] = useState(true); const [submitting, setSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const [orderId, setOrderId] = useState(""); const [error, setError] = useState(""); const [fieldErrors, setFieldErrors] = useState({}); const [promoCode, setPromoCode] = useState(""); const [promo, setPromo] = useState(null); const [promoErr, setPromoErr] = useState(""); const [promoLoading,setPromoLoading]= useState(false); const [bakongPending,setBakongPending]= useState(null); // Compute totals (same logic as cart drawer) const lines = items.map(it => { const s = PRODUCT.sizes.find(x => x.id === it.sizeId); return { ...it, s, lineTotal: (s?.price || 0) * it.qty }; }); const subtotal = lines.reduce((a, l) => a + l.lineTotal, 0); const { shippingFreeThreshold = 75, shippingRate = 9 } = window.STORE_CONFIG || {}; const shipping = subtotal >= shippingFreeThreshold ? 0 : shippingRate; const discount = promo ? promo.type === "percent" ? Math.round(subtotal * (promo.value / 100) * 100) / 100 : Math.min(Number(promo.value), subtotal) : 0; const total = subtotal + shipping - discount; // Pre-fill from Firestore profile useEffect(() => { if (!user) { setLoadingData(false); return; } kDb.collection("users").doc(user.uid).get() .then(doc => { if (doc.exists) { const d = doc.data(); setForm(prev => ({ ...prev, name: d.name || user.displayName || "", phone: d.phone || user.phoneNumber || "", address: d.address || "", })); } setLoadingData(false); }) .catch(() => setLoadingData(false)); }, [user]); const set = k => e => setForm(prev => ({ ...prev, [k]: e.target.value })); const validate = () => { const errs = {}; if (!form.name.trim()) errs.name = "ឈ្មោះត្រូវការ · Required"; if (!form.phone.trim()) errs.phone = "លេខទូរស័ព្ទត្រូវការ · Required"; if (!form.address.trim()) errs.address = "អាសយដ្ឋានត្រូវការ · Required"; setFieldErrors(errs); return Object.keys(errs).length === 0; }; const applyPromo = async () => { const code = promoCode.trim().toUpperCase(); if (!code) return; setPromoLoading(true); setPromoErr(""); setPromo(null); try { const doc = await kDb.collection("promos").doc(code).get(); if (!doc.exists || !doc.data().active) { setPromoErr("Invalid or expired promo code."); return; } const p = doc.data(); if (subtotal < (p.minOrder || 0)) { setPromoErr(`Minimum order $${p.minOrder} required for this code.`); return; } setPromo(p); } catch { setPromoErr("Could not validate code. Please try again."); } finally { setPromoLoading(false); } }; const placeOrder = async () => { if (!validate()) return; setError(""); setSubmitting(true); try { const orderItems = lines.map(l => ({ productId: l.productId, sizeId: l.sizeId, label: l.s?.label || l.sizeId, labelKh: l.s?.labelKh || "", qty: l.qty, price: l.s?.price || 0, })); const ref = await kDb.collection("orders").add({ uid: user.uid, name: form.name.trim(), phone: form.phone.trim(), address: form.address.trim(), notes: form.notes.trim(), items: orderItems, subtotal, shipping, discount, promoCode: promo?.code || null, total, paymentMethod: payment, status: payment === "aba" ? "pending_payment" : "confirmed", createdAt: firebase.firestore.FieldValue.serverTimestamp(), }); if (promo?.code) { kDb.collection("promos").doc(promo.code).update({ uses: firebase.firestore.FieldValue.increment(1), }).catch(() => {}); } if (payment === "aba") { const khqrResp = await fetch("https://createkhqr-qsn4ilcqva-uc.a.run.app", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ orderId: ref.id, billNumber: "KS-" + ref.id.slice(0, 8).toUpperCase() }), }); const khqr = await khqrResp.json(); if (!khqr.qr) throw new Error(khqr.error || "Failed to generate payment QR"); setBakongPending({ orderId: ref.id, qr: khqr.qr, md5: khqr.md5, amount: total, merchantName: khqr.merchantName || "KSHOP", expiresAt: khqr.expiresAt }); } else { setOrderId(ref.id.slice(0, 8).toUpperCase()); setSubmitted(true); onSuccess(); notifyOrderCF(ref.id); } } catch (err) { setError("មានបញ្ហា · Could not place order. Please try again."); } finally { setSubmitting(false); } }; // ── Not signed in ────────────────────────────────────────────────────── if (!user && !loadingData) { return (
— ទូទាត់ប្រាក់ · Checkout

ចូលគណនីជាមុន។

Sign in to place your order.
); } // ── Success ──────────────────────────────────────────────────────────── if (submitted) { return (
— ការបញ្ជាទិញបានជោគជ័យ · Order confirmed

អរគុណ!

Thank you for your order.
លេខការបញ្ជាទិញ · Order ID KS-{orderId}
យើងនឹងទូរស័ព្ទទៅ {form.phone} ដើម្បីបញ្ជាក់ ហើយរៀបចំដឹក។ We'll call {form.phone} to confirm and arrange delivery.
); } // ── Loading ──────────────────────────────────────────────────────────── if (loadingData) { return (
); } // ── Main form ────────────────────────────────────────────────────────── return (
{/* Header */}
— ទូទាត់ប្រាក់ · Checkout

ព័ត៌មានដឹកជញ្ជូន។

Delivery details.
{/* ── LEFT: Form ── */}
{/* Contact */}
ព័ត៌មានទំនាក់ទំនង · Contact
{/* Address */}
អាសយដ្ឋានដឹក · Delivery address
{/* Promo code */}
កូដបញ្ចុះតម្លៃ · Promo code
{ setPromoCode(e.target.value.toUpperCase()); setPromo(null); setPromoErr(""); }} aria-label="Promo code · កូដបញ្ចុះតម្លៃ" placeholder="ENTER CODE" style={{ flex: 1, padding: "12px 14px", background: "var(--bg-2)", border: "1px solid var(--line-strong)", borderRadius: "var(--radius)", font: "inherit", fontSize: "var(--text-sm)", color: "var(--fg)", outline: "none", letterSpacing: "0.08em", fontFamily: "var(--font-mono)", textTransform: "uppercase" }} />
{promoErr && ( {promoErr} )} {promo && (
{promo.code} — {promo.type === "percent" ? `${promo.value}% off` : `$${promo.value} off`} applied
)}
{/* Payment */}
វិធីទូទាត់ · Payment method
{[ { id: "cod", khLabel: "សាច់ប្រាក់នៅពេលដឹក", enLabel: "Cash on delivery", sub: "Pay when your order arrives · COD", available: true }, { id: "aba", khLabel: "បង់តាម KHQR · Bakong", enLabel: "Bakong KHQR", sub: "Scan with ABA, ACLEDA, Wing or any Bakong app", available: true }, ].map(opt => ( ))} {error && (
{error}
)}
ការបញ្ជាទិញមានសុវត្ថិភាព · ធានា ៣០ ថ្ងៃ · Secure order · 30-day guarantee
{/* ── RIGHT: Order summary ── */}
{/* Summary header */}
សង្ខេបការបញ្ជាទិញ · Order summary
{/* Line items */} {lines.map((l, i) => (
{l.s?.labelKh} {l.s?.label} × {l.qty}
${l.lineTotal}
))} {/* Totals */}
តម្លៃរង · Subtotal ${subtotal.toFixed(2)}
ថ្លៃដឹក · Shipping {shipping === 0 ? <>ឥតគិតថ្លៃ · Free : `$${shipping.toFixed(2)}`}
{discount > 0 && (
បញ្ចុះតម្លៃ · Discount ({promo.code}) −${discount.toFixed(2)}
)}
សរុប · Total ${total.toFixed(2)}
{shipping === 0 && (
ដឹកឥតគិតថ្លៃ · FREE SHIPPING
)}
{bakongPending && ( { const { orderId } = bakongPending; // Order confirmed + notification fully handled server-side by checkBakongPayment CF setOrderId(orderId.slice(0, 8).toUpperCase()); setBakongPending(null); setSubmitted(true); onSuccess(); }} onCancel={(reason) => { kDb.collection("orders").doc(bakongPending.orderId) .update({ status: "cancelled" }).catch(() => {}); setBakongPending(null); if (reason === "timeout") setError("Payment timed out. Try again or choose Cash on Delivery."); }} /> )}
); } Object.assign(window, { CheckoutPage });