/* ========================================================================
purchase-sims.jsx — Purchase Additional SIMs, in-app (3 screens)
Ported from the production website checkout, not from travel-buy.jsx:
configurator + sticky order summary, step breadcrumb, review callout,
confirmation card and next steps. The marketing top chrome, the
summary "included" sales list and the promo code block are all out, and
the small-caps eyebrow treatment is deliberately dropped.
New capability: choosing which invoice the SIMs appear on.
This file adds NO route to roles-main.jsx. The router already falls
through to DashboardPage for unknown paths, so the journey composes over
it and hands back control when the hash is not ours. No existing file is
modified.
======================================================================== */
const { useState: uQ, useMemo: mQ } = React;
const QD = window.MILO_DATA;
const ROUTE = "/sims/purchase";
const gbpQ = (n) => "£" + Number(n).toFixed(2);
const simCount = (n) => n + (n === 1 ? " SIM" : " SIMs");
const VAT = 0.2;
/* Fictional pricing, per SIM per month excluding VAT. */
const DATA_PLANS = [
{ id: "5gb", label: "5GB", price: 6.50 },
{ id: "10gb", label: "10GB", price: 8.50 },
{ id: "20gb", label: "20GB", price: 11.00 },
{ id: "50gb", label: "50GB", price: 14.50 },
{ id: "unlimited", label: "Unlimited", price: 19.00 }
];
const SIM_TYPES = [
{ id: "esim", label: "eSIM", sub: "Instant activation", icon: "qr-code" },
{ id: "physical", label: "SIM card", sub: "Delivered in 2 to 3 days", icon: "card-sim" }
];
/* Eligible invoices: plain subscriptions only. Data pool subscriptions are
excluded by rule, since adding SIMs to a pool changes how their data works
and belongs in its own journey. Oldest first, so the default is the first. */
const INVOICES = [
{ id: 4699, name: "Main account", sims: 24, monthly: 264.00, unnamed: true },
{ id: 4821, name: "Finance Team", sims: 9, monthly: 103.50 },
{ id: 4903, name: "Depot 2", sims: 14, monthly: 154.00 },
{ id: 5012, name: "SUB-5012", sims: 3, monthly: 34.50, unnamed: true }
];
/* Proration: the days left in the month, over its length. */
function prorateFactor() {
const now = new Date();
const days = new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate();
return (days - now.getDate() + 1) / days;
}
const nextBillMonth = () => {
const n = new Date();
return new Date(n.getFullYear(), n.getMonth() + 1, 1)
.toLocaleDateString("en-GB", { day: "numeric", month: "long" });
};
/* ---------- Breadcrumb ---------- */
function Crumb({ step }) {
const steps = ["Order", "Review", "Confirmed"];
return (
);
}
function JourneyHead({ title, sub }) {
return (
{title}
{sub ?
{sub}
: null}
);
}
/* ---------- Screen 1: configurator ---------- */
function Configurator({ onAdd, onPending }) {
const [plan, setPlan] = uQ("");
const [type, setType] = uQ("");
const [qty, setQty] = uQ(1);
const [added, setAdded] = uQ(false);
const p = DATA_PLANS.find((d) => d.id === plan) || null;
/* The journey has one live CTA at a time: while a selection is complete but
not yet added, Add to Order leads and Continue waits. */
const pending = !!(p && type);
React.useEffect(() => { if (onPending) onPending(pending); }, [pending]);
const add = () => {
if (!p || !type) return;
onAdd({ planId: plan, planLabel: p.label, price: p.price, type, qty: Number(qty) || 1 });
setAdded(true);
setTimeout(() => { setAdded(false); setPlan(""); setType(""); setQty(1); }, 1100);
};
return (
Choose data plan
{DATA_PLANS.map((d) =>
)}
Unlimited UK calls and texts included with every plan
This month's bill will be prorated at:
setPop(true)} onMouseLeave={() => setPop(false)}>
{pop ?
Your first bill is prorated for the days remaining this month. After that, you will be billed monthly at your selected plan rate on the 1st day of each month.
: null}
{gbpQ(prorate)}
From next month you will pay the full monthly amount.
}
);
}
/* ---------- Screen 2: the invoice selector ---------- */
function InvoiceSelector({ invoices, value, onChange, newName, onNewName }) {
const [open, setOpen] = uQ(false);
React.useEffect(() => {
if (!open) return;
const close = () => setOpen(false);
window.addEventListener("click", close);
return () => window.removeEventListener("click", close);
}, [open]);
/* Where there is no eligible subscription the selector does not render and
the order proceeds as a new invoice. */
if (!invoices.length) return null;
const isNew = value === "new";
const picked = invoices.find((i) => String(i.id) === String(value)) || null;
const label = isNew ? "Create a New Invoice" : picked ? picked.name : "";
return (
Confirm which invoice to add these SIMs to
Adding to
e.stopPropagation()}>
{open ?
{invoices.map((inv) =>
)}
: null}
{isNew ?
<>These SIMs will start a new invoice from {nextBillMonth()}. :
<>These SIMs will appear on this invoice from {nextBillMonth()}.}
{isNew ?
onNewName(e.target.value)} />
Name this invoice so your team can recognise it later. You can change it at any time.
Delivery addressUnit 4, Waterside Park, Leeds, LS10 1AB
: null}
Paying with
Visa ending 4242
{!isOwner ? This is billed to your account owner. : null}
Initial charge{gbpQ(prorate)} excl. VAT, prorated
This is added to your next invoice and charged to your saved payment method.
);
}
/* ---------- Screen 3 ---------- */
function ConfirmedScreen({ lines, invoiceName, startedNew }) {
const totalSims = lines.reduce((a, l) => a + l.qty, 0);
const exVat = lines.reduce((a, l) => a + l.qty * l.price, 0);
const prorate = exVat * prorateFactor();
const hasPhysical = lines.some((l) => l.type === "physical");
const hasEsim = lines.some((l) => l.type === "esim");
const steps = [];
if (hasPhysical) steps.push({ icon: "package", title: "SIM Delivery", body: "Your physical SIMs will arrive in 2 to 3 working days. Activation instructions are in the packaging." });
if (hasEsim) steps.push({ icon: "qr-code", title: "eSIM Activation", body: "Your eSIMs are ready to activate. Assign each one to a user, then send them the install instructions." });
steps.push({ icon: "user-plus", title: "Assign Your SIMs", body: "Assign these SIMs to users from SIM Management so they can start using them." });
if (hasPhysical) steps.push({ icon: "arrow-right-left", title: "Number Transfer", body: "Keeping an existing number? Start a transfer from the SIM's details page." });
steps.push({ icon: "headset", title: "Support", body: "Visit the help site, use Live Chat, or email support@meaningfulplanet.co.uk." });
return (
<>
Order MP-4821
Order Confirmed
{simCount(totalSims)} added. A confirmation has been sent to finance@acmeindustries.com.
This is charged pro rata, for the days remaining this month. It is added to your next invoice rather than taken today. From {nextBillMonth()} you will pay the full monthly amount.
Appearing on {invoiceName}
{startedNew ?
"These SIMs start a new invoice, billed separately from your other SIMs. You can rename it from Billing at any time." :
"These SIMs join your existing invoice. Your next bill will cover your whole estate on this invoice."}
What happens next
{steps.map((s, i) =>
{i + 1}
{s.title}
{s.body}
)}
);
}
/* ---------- The journey ---------- */
function PurchaseSimsPage({ tweaks }) {
const ctx = window.useRoles ? window.useRoles() : null;
const [step, setStep] = uQ(0);
const [lines, setLines] = uQ([]);
const [invoice, setInvoice] = uQ(String(INVOICES[0].id));
const [newName, setNewName] = uQ("");
const [pending, setPending] = uQ(false);
React.useEffect(() => { if (window.lucide) { try { window.lucide.createIcons(); } catch (e) {} } });
/* Both selector states are reviewable from the demo panel's own tweaks
where present; the no-eligible-invoice variant is the empty list. */
const noInvoices = /[?&]invoices=none/.test(location.hash) ||
(tweaks && tweaks.purchase_invoices === "none");
const invoices = noInvoices ? [] : INVOICES;
const isOwner = !ctx || ctx.role === "owner";
const startedNew = invoices.length === 0 || invoice === "new";
const invoiceName = startedNew
? (newName.trim() || "a new invoice")
: (invoices.find((i) => String(i.id) === String(invoice)) || INVOICES[0]).name;
if (step === 2) return (
);
if (step === 1) return (
setStep(0)}
onConfirm={() => {
setStep(2);
if (ctx) ctx.toast({ kind: "ok", title: "Order confirmed", body: simCount(lines.reduce((a, l) => a + l.qty, 0)) + " added to your account." });
}} />
);
return (
setLines((ls) => ls.filter((_, x) => x !== i))} />
);
}
/* The journey carries its own heading, so no PageHead above it: production's
checkout goes breadcrumb, then section head. */
function PurchaseShell({ children }) {
return (
<>
Back to SIMs
{children}
);
}
/* ---------- Mounting without touching the router ----------
#/sims/purchase is matched by the router's `parts[0] === "sims" && parts[1]`
branch, which reaches SimShowPage with id="purchase" long before the final
fallthrough. So SimShowPage is the component to wrap, not DashboardPage.
Anything that is not our id hands straight back. Gated on sim.order. */
(function mount() {
const Show = window.SimShowPage;
if (!Show) return;
window.SimShowPage = function SimShowOrPurchase(props) {
if (String(props.id) !== "purchase") return ;
if (!window.MP_ALLOW("sim.order")) return ;
/* Keyed on the hash: the router's path is unchanged by a query string, so
without this a variant link would inherit the previous journey state. */
return ;
};
})();
Object.assign(window, { PurchaseSimsPage, PURCHASE_SIMS_ROUTE: ROUTE });
/* ---------- The entry point now has somewhere to go ----------
Purchase Additional SIM Plans showed the "not available in this demo"
popover because no in-app journey existed. On this page it does, so the
button becomes a normal link to it. Patched here rather than in
pages-1.jsx or data-pool.jsx, which this branch must not modify. */
(function repointEntry() {
const wire = () => {
document.querySelectorAll("button, a").forEach((el) => {
if (el.dataset.pjWired) return;
if (el.textContent.trim() !== "Purchase Additional SIM Plans") return;
el.dataset.pjWired = "1";
el.addEventListener("click", (e) => {
e.preventDefault();
e.stopImmediatePropagation();
location.hash = "/sims/purchase";
}, true);
});
};
const obs = new MutationObserver(wire);
const start = () => {
const root = document.getElementById("app") || document.getElementById("root") || document.body;
wire();
obs.observe(root, { childList: true, subtree: true });
};
start();
})();