Spaces:
Sleeping
Sleeping
File size: 3,816 Bytes
2a2655b bbe62d1 2a2655b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | "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>
);
}
|