/* global React, Icon, fmtMoney, initials, productById, formatDate, StatusBadge, CartSummary, SidePanel */ const { useState: uS5, useEffect: uE5, useRef: uR5 } = React; // ===== STEP C: PAY (multi-prescription summary + Stripe-style card) ===== function PayScreen({ allocations, patients, setRoute, processPayment, basket }) { const [tab, setTab] = uS5("saved"); const [card, setCard] = uS5({ number: "", exp: "", cvc: "", postcode: "" }); const [name, setName] = uS5("Beaumont Aesthetics Ltd"); const [processing, setProcessing] = uS5(false); const subtotal = allocations.reduce((s, a) => s + a.items.reduce((ss, it) => ss + productById(it.pid).price * it.qty, 0), 0); const shipping = allocations.length * 4.95; const total = subtotal + shipping; const formatCard = (v) => v.replace(/\D/g, "").slice(0, 16).replace(/(\d{4})(?=\d)/g, "$1 "); const formatExp = (v) => { const d = v.replace(/\D/g, "").slice(0, 4); return d.length > 2 ? d.slice(0, 2) + " / " + d.slice(2) : d; }; const submit = (e) => { e.preventDefault(); setProcessing(true); setTimeout(() => { const rxIds = processPayment(); setProcessing(false); setRoute({ name: "sign-queue", rxIds }); }, 1200); }; return (
Step 4 of 5 · Payment

Pay & generate prescriptions

Once paid, a prescription will be created for each patient and queued for your e-signature.

Basket
Allocate
Declare
4
Pay
5
Sign

Prescriptions ({allocations.length})

{allocations.map((a, i) => { const p = patients.find(p => p.id === a.patientId); const aTotal = a.items.reduce((s, it) => s + productById(it.pid).price * it.qty, 0); return (
0 ? "1px solid var(--line)" : "none", display: "flex", gap: 14, alignItems: "center" }}>
{initials(p.first, p.last)}
{p.first} {p.last}
{a.items.map(it => `${productById(it.pid).strength} ×${it.qty}`).join(", ")}
{fmtMoney(aTotal)}
); })}
{tab === "saved" ? (
VISA
Visa ending 4242
Beaumont Aesthetics Ltd · Expires 09/29
) : ( <>
setName(e.target.value)} />
setCard({ ...card, number: formatCard(e.target.value) })} />
VISA
MC
setCard({ ...card, exp: formatExp(e.target.value) })} />
setCard({ ...card, cvc: e.target.value.replace(/\D/g, "").slice(0,4) })} />
)}

Total

Subtotal · {allocations.length} prescription{allocations.length > 1 ? "s" : ""}{fmtMoney(subtotal)}
Tracked delivery × {allocations.length}{fmtMoney(shipping)}
VATincluded
To pay{fmtMoney(total)}
Prescriptions await your e-signature before dispatch.
); } // ===== STEP D: SIGN QUEUE — list of unsigned Rx after payment ===== function SignQueueScreen({ rxIds, prescriptions, patients, setRoute, openSign }) { const queued = prescriptions.filter(rx => rxIds.includes(rx.id)); const allSigned = queued.every(rx => rx.status === "signed"); return (
Step 5 of 5 · E-signature

{allSigned ? "All prescriptions signed." : "Sign your prescriptions"}

{allSigned ? "Pharmacist will dispense and dispatch within 2 working hours." : "Each prescription needs your e-signature before the pharmacist will dispense it."}

Basket
Allocate
Declare
Pay
{allSigned ? : "5"}
Sign
{queued.map(rx => { const p = patients.find(p => p.id === rx.patientId); return ( ); })}
Rx IDPatientItemsStatus
{rx.id}
{initials(p.first, p.last)}
{p.first} {p.last}
 {rx.items.map(it => `${productById(it.pid).strength} ×${it.qty}`).join(", ")} {rx.status === "signed" ? ( Signed {formatDate(rx.signedAt)} ) : ( )}
{allSigned && }
); } // ===== Prescriptions screen (always available from sidebar) ===== function PrescriptionsScreen({ prescriptions, patients, setRoute, openSign }) { const [tab, setTab] = uS5("unsigned"); const filtered = prescriptions.filter(rx => tab === "unsigned" ? rx.status !== "signed" : rx.status === "signed"); const unsignedCount = prescriptions.filter(rx => rx.status !== "signed").length; return (
Clinical sign-off

Prescriptions

{unsignedCount > 0 ? `${unsignedCount} prescription${unsignedCount > 1 ? "s" : ""} awaiting your signature.` : "All prescriptions signed and dispatched."}

{filtered.map(rx => { const p = patients.find(p => p.id === rx.patientId); return ( ); })}
Rx IDCreatedPatientItemsTotalStatus
{rx.id} {formatDate(rx.date)}
{initials(p.first, p.last)}
{p.first} {p.last}
DOB {formatDate(p.dob)}
 {rx.items.map(it => `${productById(it.pid).strength} ×${it.qty}`).join(", ")} {fmtMoney(rx.total)} {rx.status === "signed" ? Signed : Unsigned} {rx.status === "signed" ? : }
{filtered.length === 0 && (
{tab === "unsigned" ? "No prescriptions awaiting signature. Nicely done." : "No signed prescriptions yet."}
)}
); } // ===== E-SIGNATURE MODAL ===== function SignModal({ rx, patient, onClose, onSign }) { const [phase, setPhase] = uS5("review"); // review | sign | email-verify | done const [directions, setDirections] = uS5("Inject once weekly subcutaneously, on the same day each week. Rotate injection sites."); const [check1, setCheck1] = uS5(false); const [check2, setCheck2] = uS5(false); const [signed, setSigned] = uS5(false); const canvasRef = uR5(null); const [drawing, setDrawing] = uS5(false); // Signature pad uE5(() => { if (phase !== "sign") return; const c = canvasRef.current; if (!c) return; const ctx = c.getContext("2d"); ctx.lineWidth = 2.2; ctx.lineCap = "round"; ctx.strokeStyle = "#0B1F2A"; ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height); }, [phase]); const sigEvents = { onMouseDown: (e) => { const c = canvasRef.current; const r = c.getBoundingClientRect(); const ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(e.clientX - r.left, e.clientY - r.top); setDrawing(true); setSigned(true); }, onMouseMove: (e) => { if (!drawing) return; const c = canvasRef.current; const r = c.getBoundingClientRect(); const ctx = c.getContext("2d"); ctx.lineTo(e.clientX - r.left, e.clientY - r.top); ctx.stroke(); }, onMouseUp: () => setDrawing(false), onMouseLeave: () => setDrawing(false), }; const clearSig = () => { const c = canvasRef.current; const ctx = c.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, c.width, c.height); setSigned(false); }; return (
e.stopPropagation()}> {phase === "review" && ( <>
Verify prescription
{rx.id}
Patient
{patient.first} {patient.last}
DOB {formatDate(patient.dob)} · BMI {typeof patient.bmi === "number" ? patient.bmi.toFixed(1) : patient.bmi}
Delivery
{patient.address || "—"}
{patient.postcode || ""}
Items
{rx.items.map(it => { const p = productById(it.pid); return (
{p.img && {p.strength}}
{p.name} {p.strength}
qty {it.qty} · 4 doses each
{fmtMoney(p.price * it.qty)}
); })}