// ui.jsx — shared UI: icons, nav, avatar menu, toast, login modal, plan detail sheet const { useState: useStateU, useEffect: useEffectU, useRef: useRefU } = React; // ── Icons ───────────────────────────────────────────────────────────────────── const Ic = { globe: p => , bolt: p => , shield: p => , signal: p => , search: p => , check: p => , qr: p => , arrow: p => , plus: p => , user: p => , logout: p => , x: p => , menu: p => , spark: p => , clock: p => , infinity: p => , card: p => , gift: p => , copy: p => , share: p => , }; const GoogleG = p => ( ); function isGenericPlanNetwork(value) { return !value || /^4g\/5g$/i.test(String(value).trim()); } function isGenericPlanCarrier(value) { return !value || /^\d+\s+(country|countries|destination|destinations)$/i.test(String(value).trim()); } function planNetworkSummary(plan) { const parts = []; if (!isGenericPlanNetwork(plan?.net)) parts.push(plan.net); if (!isGenericPlanCarrier(plan?.carriers)) parts.push(plan.carriers); return parts.join(" · "); } function uiMoney(value) { const amount = Number(value); return Number.isFinite(amount) ? amount.toFixed(2) : "0.00"; } // ── Nav ─────────────────────────────────────────────────────────────────────── function Nav({ route, go, user, onLogin, onLogout }) { const [scrolled, setScrolled] = useStateU(false); const [menu, setMenu] = useStateU(false); const [mobileNavOpen, setMobileNavOpen] = useStateU(false); useEffectU(() => { const f = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", f); return () => window.removeEventListener("scroll", f); }, []); useEffectU(() => { setMobileNavOpen(false); }, [route]); const links = [["home", "Home"], ["marketplace", "Marketplace"], ["myesims", "My eSIMs"]]; const solidNav = scrolled || route.startsWith("marketplace/"); const navTo = key => { setMobileNavOpen(false); go(key); }; return ( ); } // ── Toast ───────────────────────────────────────────────────────────────────── function ToastHost({ toasts }) { return (
{toasts.map(t => (
{t.msg}
))}
); } // ── Login modal ─────────────────────────────────────────────────────────────── function LoginModal({ onClose }) { return (
e.stopPropagation()}>

Welcome to Journey

Sign in to purchase and manage your travel eSIMs

By signing in you agree to our terms of service and privacy policy.
); } // ── Plan detail sheet ───────────────────────────────────────────────────────── function PlanSheet({ plan, onClose, onBuy, user }) { if (!plan) return null; const [buying, setBuying] = useStateU(false); const [applyCredit, setApplyCredit] = useStateU(false); const [refCode, setRefCode] = useStateU(() => localStorage.getItem("pendingReferralCode") || ""); const [refStatus, setRefStatus] = useStateU(null); // null | { ok, discountCents } | { error } const [refChecking, setRefChecking] = useStateU(false); useEffectU(() => { const saved = localStorage.getItem("pendingReferralCode"); if (saved && user) validateRef(saved); }, [user?.id, plan?.id]); const networkSummary = planNetworkSummary(plan); const heroChip = [plan.region, !isGenericPlanNetwork(plan.net) ? plan.net : ""].filter(Boolean).join(" · "); const perks = [ "QR delivery after provider provisioning", "No physical SIM needed", "Keep your home number", "Hotspot / tethering ready", ]; const retailPrice = plan.price; const creditCents = user?.creditCents || 0; const creditDollars = creditCents / 100; const discountCents = (refStatus?.ok && refStatus.discountCents) ? refStatus.discountCents : 0; const creditUsedCents = applyCredit && !refStatus?.ok ? Math.min(creditCents, Math.round(retailPrice * 100)) : 0; const finalPrice = Math.max(0, retailPrice - creditUsedCents / 100 - discountCents / 100); const isFree = finalPrice === 0; const validateRef = async (code) => { if (!code.trim() || !user) return; setRefChecking(true); setRefStatus(null); try { const res = await fetch("/api/validate-referral", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ code: code.trim(), planId: plan.id }), }); const data = await res.json(); if (res.ok) { setRefStatus({ ok: true, discountCents: data.discountCents }); setApplyCredit(false); } else { setRefStatus({ error: data.error }); } } catch (_) { setRefStatus({ error: "Could not validate code" }); } setRefChecking(false); }; const handleRefChange = (val) => { setRefCode(val); setRefStatus(null); }; const handleBuy = async () => { setBuying(true); await onBuy(plan, { applyCredit: applyCredit && !refStatus?.ok, referralCode: refStatus?.ok ? refCode.trim().toUpperCase() : null, discountCents, creditUsedCents, isFree, }); setBuying(false); }; const checkoutLabel = () => { if (!user) return "Sign in to checkout"; if (isFree) return "Claim free eSIM"; return `Checkout · $${uiMoney(finalPrice)}`; }; return ( <>
{heroChip}

{plan.country}

{networkSummary &&
{networkSummary}
}
Data{plan.data}
Validity{plan.days} days
Network{networkSummary || "Supported partner networks"}
ActivationScan QR · eKYC-free
{(creditUsedCents > 0 || discountCents > 0) && ( ${uiMoney(retailPrice)} )} {isFree ? "Free" : `$${uiMoney(finalPrice)}`} one-time · no subscription
{user && creditCents > 0 && !refStatus?.ok && ( )} {user && !applyCredit && (
handleRefChange(e.target.value.toUpperCase())} onKeyDown={e => e.key === "Enter" && validateRef(refCode)} maxLength={20} />
{refStatus?.ok &&
${uiMoney(discountCents / 100)} off applied!
} {refStatus?.error &&
{refStatus.error}
}
)}
{perks.map(p => (
{p}
))}

Payment is processed first. Your eSIM install details appear in My eSIMs after provider provisioning completes.

); } function FreeConfirmModal({ plan, opts, onClose, onConfirm }) { const [confirming, setConfirming] = useStateU(false); const saving = ((opts.creditUsedCents || 0) + (opts.discountCents || 0)) / 100; return ( <>
🎉

Your plan is fully covered!

{plan.country} {plan.data} · {plan.days} days
${saving.toFixed(2)} saved — no charge today

); } function Referrals({ user, go, toast }) { const [data, setData] = useStateU(null); const [loading, setLoading] = useStateU(true); const [copiedCode, setCopiedCode] = useStateU(false); const [copiedLink, setCopiedLink] = useStateU(false); useEffectU(() => { fetch("/api/my-referrals", { credentials: "include" }) .then(r => r.json()) .then(d => { setData(d); setLoading(false); }) .catch(() => setLoading(false)); }, []); if (!user) { return (

Sign in to view your referral code.

); } const copyText = (text, setCopied) => { navigator.clipboard.writeText(text) .then(() => { setCopied(true); setTimeout(() => setCopied(false), 2000); }) .catch(() => toast("Could not copy — try manually selecting the text")); }; return (

Refer friends, earn credit

Share your code with a friend. When they buy their first eSIM they get{" "} 70% off{" "} (up to $5.00). You get $3.00 credit added to your account.

Your referral code
{loading ? (
Generating…
) : data?.code ? ( <>
{data.code}
) : (
Could not load your code — try refreshing.
)}
{loading ? "—" : (data?.count ?? 0)}
Successful referrals
{loading ? "—" : `$${((data?.creditEarned || 0) / 100).toFixed(2)}`}
Credits earned from referrals
${((user.creditCents || 0) / 100).toFixed(2)}
Current balance
1Share your code or link with a friend
2They enter it at checkout on their first eSIM purchase
3They save 70% (up to $5.00) — you earn $3.00 credit
); } Object.assign(window, { Ic, GoogleG, Nav, ToastHost, LoginModal, PlanSheet, FreeConfirmModal, Referrals });