Spaces:
Running
Running
| "use client"; | |
| import { useEffect } from "react"; | |
| import type { PaidReceipt } from "../../lib/receipt"; | |
| import { downloadReceiptHtml } from "../../lib/receipt"; | |
| function money(n: number) { | |
| return `₹${n.toLocaleString("en-IN", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; | |
| } | |
| type Props = { | |
| open: boolean; | |
| loading: boolean; | |
| error: string | null; | |
| receipt: PaidReceipt | null; | |
| onClose: () => void; | |
| }; | |
| export function OrderReceiptModal({ open, loading, error, receipt, onClose }: Props) { | |
| useEffect(() => { | |
| if (!open) return; | |
| function onKey(e: KeyboardEvent) { | |
| if (e.key === "Escape") onClose(); | |
| } | |
| window.addEventListener("keydown", onKey); | |
| return () => window.removeEventListener("keydown", onKey); | |
| }, [open, onClose]); | |
| if (!open) return null; | |
| return ( | |
| <div className="adminModalBackdrop" onClick={onClose} role="presentation"> | |
| <div | |
| className="adminModal adminModal--receipt" | |
| role="dialog" | |
| aria-modal="true" | |
| aria-labelledby="receipt-modal-title" | |
| onClick={(e) => e.stopPropagation()} | |
| > | |
| <div className="adminModal__header"> | |
| <div> | |
| <p className="adminModal__eyebrow">Order receipt</p> | |
| <h2 id="receipt-modal-title" className="adminModal__title"> | |
| {receipt?.receiptNumber ?? "Receipt"} | |
| </h2> | |
| {receipt ? ( | |
| <p className="adminModal__meta"> | |
| {receipt.storeCode} · {new Date(receipt.createdAt).toLocaleString()} | |
| </p> | |
| ) : null} | |
| </div> | |
| <button type="button" className="adminModal__close" onClick={onClose} aria-label="Close"> | |
| <span aria-hidden="true">×</span> | |
| </button> | |
| </div> | |
| <div className="adminModal__body"> | |
| {loading ? <p className="muted">Loading receipt…</p> : null} | |
| {!loading && error ? <p className="formError">{error}</p> : null} | |
| {!loading && receipt ? ( | |
| <> | |
| <p className="receiptModal__meta mono" title={receipt.orderId}> | |
| Order {receipt.orderId.slice(0, 8)}… · {receipt.paymentMode} | |
| {receipt.tokenNumber != null ? ` · Counter #${receipt.tokenNumber}` : ""} | |
| </p> | |
| <ul className="receiptModal__lines"> | |
| {receipt.lines.map((line) => ( | |
| <li key={`${line.name}-${line.qty}`}> | |
| <span> | |
| {line.name} × {line.qty} | |
| </span> | |
| <span>{money(line.lineTotal)}</span> | |
| </li> | |
| ))} | |
| </ul> | |
| <div className="receiptModal__totals"> | |
| <div> | |
| <span>Subtotal</span> | |
| <span>{money(receipt.subtotal)}</span> | |
| </div> | |
| <div> | |
| <span>Tax</span> | |
| <span>{money(receipt.taxTotal)}</span> | |
| </div> | |
| <div className="receiptModal__grand"> | |
| <span>Total paid</span> | |
| <span>{money(receipt.grandTotal)}</span> | |
| </div> | |
| </div> | |
| {receipt.receiptEmail ? ( | |
| <p className="muted receiptModal__email">Customer email: {receipt.receiptEmail}</p> | |
| ) : null} | |
| </> | |
| ) : null} | |
| </div> | |
| <div className="adminModal__footer"> | |
| <button type="button" className="adminBtn adminBtn--ghost" onClick={onClose}> | |
| Close | |
| </button> | |
| {receipt ? ( | |
| <button type="button" className="adminBtn" onClick={() => downloadReceiptHtml(receipt)}> | |
| Download HTML | |
| </button> | |
| ) : null} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |