/* global React, firebase, Icon, kAuth, kDb, printSlipWithQR */ const { useState, useEffect, useRef } = React; // ─── Helpers ─────────────────────────────────────────────────────────────── function friendlyError(code) { switch (code) { case "auth/user-not-found": case "auth/wrong-password": case "auth/invalid-credential": return "អ៊ីមែល ឬ លេខសម្ងាត់មិនត្រឹមត្រូវ · Invalid email or password"; case "auth/email-already-in-use": return "អ៊ីមែលនេះបានប្រើហើយ · Email already in use"; case "auth/weak-password": return "លេខសម្ងាត់ខ្សោយ · Password too weak (min 6 chars)"; case "auth/invalid-email": return "អ៊ីមែលមិនត្រឹមត្រូវ · Invalid email format"; case "auth/too-many-requests": return "សាកល្បងម្ដងទៀតពេលក្រោយ · Too many attempts, try again later"; case "auth/popup-blocked": return "Popup ត្រូវបានទប់ · Allow popups for this site and try again"; case "auth/account-exists-with-different-credential": return "អ៊ីមែលនេះប្រើវិធីចូលផ្សេង · This email uses a different sign-in method"; case "auth/invalid-phone-number": return "លេខទូរស័ព្ទមិនត្រឹមត្រូវ · Invalid phone number (use +855 format)"; case "auth/missing-phone-number": return "សូមបញ្ចូលលេខទូរស័ព្ទ · Please enter your phone number"; case "auth/invalid-verification-code": return "លេខកូដមិនត្រឹមត្រូវ · Incorrect verification code"; case "auth/code-expired": return "លេខកូដផុតកំណត · Code expired, please resend"; case "auth/missing-verification-code": return "សូមបញ្ចូលលេខកូដ · Please enter the 6-digit code"; case "auth/quota-exceeded": return "SMS ហួសដែន · SMS quota exceeded, try again later"; default: return "មានបញ្ហា · Something went wrong. Try again."; } } // Google logo mark (coloured SVG, inline — no icon library needed) function GoogleMark() { return ( ); } // ─── Reusable Field ──────────────────────────────────────────────────────── function Field({ label, type = "text", value, onChange, placeholder, required, disabled }) { const fieldId = label.replace(/[^a-zA-Z0-9]/g, "-").toLowerCase().slice(0, 24); return (
{ if (!disabled) e.target.style.borderColor = "var(--accent)"; }} onBlur={e => { e.target.style.borderColor = "var(--line-strong)"; }} />
); } // ─── Loading spinner ─────────────────────────────────────────────────────── function LoadingSpinner() { return (
កំពុងផ្ទុក…
); } // ─── Auth screen (sign-in / register / phone) ───────────────────────────── function AuthScreen() { const [tab, setTab] = useState("login"); const [form, setForm] = useState({ name: "", email: "", phone: "", password: "", confirm: "" }); const [error, setError] = useState(""); const [loading, setLoading] = useState(false); // Phone-specific state const [phoneNum, setPhoneNum] = useState(""); const [otp, setOtp] = useState(""); const [phoneStep, setPhoneStep] = useState(1); // 1 = enter number, 2 = enter OTP const [confirmResult, setConfirmResult] = useState(null); const recaptchaContainerRef = useRef(null); const recaptchaVerifierRef = useRef(null); // Clean up reCAPTCHA when leaving phone tab useEffect(() => { if (tab !== "phone") { recaptchaVerifierRef.current?.clear(); recaptchaVerifierRef.current = null; setPhoneStep(1); setPhoneNum(""); setOtp(""); setConfirmResult(null); } setError(""); }, [tab]); const set = k => e => setForm(prev => ({ ...prev, [k]: e.target.value })); const login = async e => { e.preventDefault(); setError(""); setLoading(true); try { await kAuth.signInWithEmailAndPassword(form.email, form.password); } catch (err) { setError(friendlyError(err.code)); } finally { setLoading(false); } }; const googleSignIn = async () => { setError(""); setLoading(true); try { const provider = new firebase.auth.GoogleAuthProvider(); const cred = await kAuth.signInWithPopup(provider); const ref = kDb.collection("users").doc(cred.user.uid); const snap = await ref.get(); if (!snap.exists) { await ref.set({ name: cred.user.displayName || "", email: cred.user.email || "", phone: cred.user.phoneNumber || "", address: "", memberSince: firebase.firestore.FieldValue.serverTimestamp() }); } } catch (err) { if (err.code !== "auth/popup-closed-by-user") setError(friendlyError(err.code)); } finally { setLoading(false); } }; const register = async e => { e.preventDefault(); setError(""); if (form.password !== form.confirm) { setError("លេខសម្ងាត់មិនដូចគ្នា · Passwords don't match"); return; } if (form.password.length < 6) { setError("លេខសម្ងាត់ត្រូវការយ៉ាងតិច ៦ តួ · Min 6 characters"); return; } setLoading(true); try { const cred = await kAuth.createUserWithEmailAndPassword(form.email, form.password); await cred.user.updateProfile({ displayName: form.name }); await kDb.collection("users").doc(cred.user.uid).set({ name: form.name, email: form.email, phone: form.phone, address: "", memberSince: firebase.firestore.FieldValue.serverTimestamp() }); } catch (err) { setError(friendlyError(err.code)); } finally { setLoading(false); } }; const sendOtp = async () => { if (!phoneNum.trim()) { setError("សូមបញ្ចូលលេខទូរស័ព្ទ · Please enter your phone number"); return; } setError(""); setLoading(true); try { if (!recaptchaVerifierRef.current) { recaptchaVerifierRef.current = new firebase.auth.RecaptchaVerifier( recaptchaContainerRef.current, { size: "invisible" } ); await recaptchaVerifierRef.current.render(); } const result = await kAuth.signInWithPhoneNumber(phoneNum, recaptchaVerifierRef.current); setConfirmResult(result); setPhoneStep(2); } catch (err) { setError(friendlyError(err.code)); recaptchaVerifierRef.current?.clear(); recaptchaVerifierRef.current = null; } finally { setLoading(false); } }; const verifyOtp = async () => { if (!otp.trim()) { setError("សូមបញ្ចូលលេខកូដ · Please enter the 6-digit code"); return; } setError(""); setLoading(true); try { await confirmResult.confirm(otp); // onAuthStateChanged in app.jsx handles the rest } catch (err) { setError(friendlyError(err.code)); } finally { setLoading(false); } }; const resendOtp = () => { recaptchaVerifierRef.current?.clear(); recaptchaVerifierRef.current = null; setPhoneStep(1); setOtp(""); setConfirmResult(null); setError(""); }; const headerTitle = tab === "login" ? "ចូលគណនី។" : tab === "register" ? "បង្កើតគណនី។" : "ចូលដោយទូរស័ព្ទ។"; const headerSubtitle = tab === "login" ? "Sign in to your account." : tab === "register" ? "Create your KSHOP24.NET account." : "Sign in with your phone number."; return (
{/* Header */}
— គណនី · Account

{headerTitle}

{headerSubtitle}
{/* Tab bar */}
{[["login", "ចូលគណនី", "Sign in"], ["register", "ចុះឈ្មោះ", "Register"], ["phone", "ទូរស័ព្ទ", "Phone"]].map(([id, kh, en]) => ( ))}
{/* ── Email/password forms ── */} {tab !== "phone" && (
{tab === "register" && ( )} {tab === "register" && ( )} {tab === "register" && ( )} {error && }
)} {/* ── Phone OTP flow ── */} {tab === "phone" && (
{phoneStep === 1 ? ( <> setPhoneNum(e.target.value)} placeholder="+855 92 555 014" /> Include country code · +855 for Cambodia {error && } ) : ( <> {/* Show which number we sent to */}
បានផ្ញើទៅ · Sent to {phoneNum}
setOtp(e.target.value.replace(/\D/g, "").slice(0, 6))} placeholder="6-digit code" /> {error && } )} {/* Invisible reCAPTCHA container */}
)}
); } // Small shared sub-components used inside AuthScreen function ErrorBox({ msg }) { return (
{msg}
); } function Divider() { return (
OR
); } // ─── Signed-in account page ──────────────────────────────────────────────── function AccountPage({ user, isAdmin }) { const [profile, setProfile] = useState(null); const [orders, setOrders] = useState([]); const [editing, setEditing] = useState(false); const [editForm, setEditForm] = useState({}); const [saving, setSaving] = useState(false); const [loadingData, setLoadingData] = useState(true); useEffect(() => { if (!user) return; const unsubProfile = kDb .collection("users").doc(user.uid) .onSnapshot(doc => { if (!doc.exists) { // Auto-create profile for phone/Google sign-ins kDb.collection("users").doc(user.uid).set({ name: user.displayName || "", email: user.email || "", phone: user.phoneNumber || "", address: "", memberSince: firebase.firestore.FieldValue.serverTimestamp() }); } const data = doc.exists ? doc.data() : {}; setProfile(data); setEditForm(data); setLoadingData(false); }, () => setLoadingData(false)); const unsubOrders = kDb .collection("orders") .where("uid", "==", user.uid) .onSnapshot( snap => { const list = snap.docs.map(d => ({ id: d.id, ...d.data() })); list.sort((a, b) => (b.createdAt?.toMillis?.() || 0) - (a.createdAt?.toMillis?.() || 0)); setOrders(list); }, () => {} ); return () => { unsubProfile(); unsubOrders(); }; }, [user]); const saveProfile = async e => { e.preventDefault(); setSaving(true); try { await kDb.collection("users").doc(user.uid).set({ name: editForm.name || "", phone: editForm.phone || "", address: editForm.address || "", email: user.email, memberSince: profile?.memberSince || firebase.firestore.FieldValue.serverTimestamp() }, { merge: true }); if (editForm.name) await user.updateProfile({ displayName: editForm.name }); setEditing(false); } finally { setSaving(false); } }; const signOut = () => kAuth.signOut(); if (loadingData) return ; const displayName = profile?.name || user.displayName || user.email?.split("@")[0] || "អ្នកប្រើ"; const firstName = displayName.split(" ")[0]; const memberDate = profile?.memberSince?.toDate?.(); const memberStr = memberDate ? memberDate.toLocaleDateString("en-US", { month: "short", year: "numeric" }).toUpperCase() : "—"; return (
{/* Page header */}
— គណនី · Account

សូមស្វាគមន៍{firstName ? ", " + firstName : ""}។

Welcome back{firstName ? ", " + firstName : ""}.
សមាជិក · MEMBER SINCE {memberStr}
{/* Two-column layout: profile left, orders right */}
{/* ── Profile card ── */}
ព័ត៌មានផ្ទាល់ខ្លួន · Profile {!editing && ( )}
{editing ? (
setEditForm(p => ({ ...p, name: e.target.value }))} placeholder="Sophea Chan" /> setEditForm(p => ({ ...p, phone: e.target.value }))} placeholder="+855 92 555 014" type="tel" /> setEditForm(p => ({ ...p, address: e.target.value }))} placeholder="St. 271, Toul Tompoung, Phnom Penh" />
) : (
{[ ["ឈ្មោះ", "Name", profile?.name || "—"], ["អ៊ីមែល", "Email", user.email || "—"], ["ទូរស័ព្ទ", "Phone", profile?.phone || "—"], ["អាសយដ្ឋាន","Address", profile?.address || "—"], ].map(([kh, en, val], i, arr) => (
{kh} {en.toUpperCase()}
{val}
))}
)}
{/* ── Order history ── */}
ប្រវត្តិការបញ្ជាទិញ · Order history {orders.length} ORDERS
{orders.length === 0 ? (
មិនទាន់មានការបញ្ជាទិញ No orders yet.
) : (
{orders.map(o => { const date = o.createdAt?.toDate?.().toLocaleDateString("en-US", { day: "numeric", month: "short", year: "numeric" }) || "—"; const statusColor = o.status === "delivered" ? "var(--primary)" : o.status === "shipped" ? "#7c3aed" : o.status === "confirmed" ? "#2563eb" : o.status === "pending_payment" ? "#f59e0b" : "var(--accent)"; const statusLabel = { pending: "PENDING", pending_payment: "AWAITING PAYMENT", confirmed: "CONFIRMED", shipped: "SHIPPED", delivered: "DELIVERED" }[o.status] || (o.status || "pending").toUpperCase(); return (
KS-{o.id.slice(0, 8).toUpperCase()} {date} {statusLabel}
{(o.items || []).map((it, j) => ( {it.labelKh || it.label} ×{it.qty} ))}
${Number(o.total || 0).toFixed(2)} {isAdmin && ( )}
); })}
)}
); } // ─── Root — switches between loading / auth / account ───────────────────── function AccountRoot({ user, authLoading, isAdmin }) { if (authLoading) return ; if (!user) return ; return ; } Object.assign(window, { AccountRoot });