Native thermal printing via iframe — 80mm, RTL, no blank tail
Problem: window.print() on the main page used A4 height (blank paper
after receipt), no RTL direction, and Tailwind styles leaked into print.
Solution — iframe isolation:
- lib/thermal-print.ts: builds a self-contained HTML document
(@page { size: 80mm auto; margin: 0 }, html { direction: rtl })
and fires it through a hidden off-screen <iframe>. The iframe
document contains only the receipt so height == content height.
- pos-slip-modal.tsx: Print button calls printThermal(buildThermalDocument())
instead of window.print(). Preview panel is unchanged (screen only).
- pos-receipt-print.css: updated @page + direction as fallback for any
remaining window.print() callers.
Works with USB driver (Atom A300) as default printer — OS print spooler
receives the job exactly as if it were any other document.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -1,30 +1,62 @@
|
||||
/*
|
||||
* pos-receipt-print.css
|
||||
*
|
||||
* Fallback @media print styles for the slip preview panel.
|
||||
* The real thermal print job goes through thermal-print.ts (iframe) —
|
||||
* these rules only fire if window.print() is called on the main page directly.
|
||||
*/
|
||||
|
||||
@media print {
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
#pos-slip-print-area,
|
||||
#pos-slip-print-area *,
|
||||
#receipt-print-area,
|
||||
#receipt-print-area * {
|
||||
visibility: visible;
|
||||
}
|
||||
#pos-slip-print-area,
|
||||
#receipt-print-area {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
/* 80 mm roll — height tracks the content, zero blank tail */
|
||||
@page {
|
||||
size: 80mm auto;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Force RTL and thermal width on the document root */
|
||||
html {
|
||||
direction: rtl !important;
|
||||
width: 80mm !important;
|
||||
}
|
||||
|
||||
/* Hide everything except the slip */
|
||||
body > * {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* The modal overlay needs to be block but transparent */
|
||||
body > *:has(#pos-slip-print-area) {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#pos-slip-print-area,
|
||||
#pos-slip-print-area * {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
#pos-slip-print-area {
|
||||
display: block !important;
|
||||
position: static !important;
|
||||
width: 80mm !important;
|
||||
margin: 0 !important;
|
||||
padding: 3mm 4mm !important;
|
||||
border: none !important;
|
||||
border-radius: 0 !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
#pos-slip-print-area,
|
||||
#receipt-print-area {
|
||||
width: 80mm;
|
||||
font-family: "Courier New", monospace;
|
||||
/* ── Screen preview styles ───────────────────────────────────────────────── */
|
||||
|
||||
#pos-slip-print-area {
|
||||
width: 100%;
|
||||
max-width: 76mm;
|
||||
font-family: "Tahoma", "Vazirmatn", "B Nazanin", "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
padding: 4mm;
|
||||
}
|
||||
|
||||
.receipt-divider {
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslations, useLocale } from "next-intl";
|
||||
import { Printer } from "lucide-react";
|
||||
import type { Order } from "@/lib/api/types";
|
||||
import { formatCurrency } from "@/lib/format";
|
||||
import { formatOrderNumber } from "@/lib/order-number";
|
||||
import { buildThermalDocument, printThermal } from "@/lib/thermal-print";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import "./pos-receipt-print.css";
|
||||
|
||||
@@ -48,27 +50,80 @@ export function PosSlipModal({
|
||||
{ dateStyle: "short", timeStyle: "short" }
|
||||
).format(new Date(dateSource));
|
||||
|
||||
const table =
|
||||
order?.tableNumber ?? tableNumber ?? "—";
|
||||
const orderNo = order ? formatOrderNumber(order) : orderId ? formatOrderNumber({ id: orderId }) : null;
|
||||
const table = order?.tableNumber ?? tableNumber ?? "—";
|
||||
const orderNo = order
|
||||
? formatOrderNumber(order)
|
||||
: orderId
|
||||
? formatOrderNumber({ id: orderId })
|
||||
: null;
|
||||
const guest = order?.guestName ?? guestName;
|
||||
const printId = "pos-slip-print-area";
|
||||
|
||||
const activeBillItems = order?.items.filter((i) => !i.isVoided) ?? [];
|
||||
|
||||
const paymentKey = (method: string) => {
|
||||
const m = method.toLowerCase();
|
||||
if (m === "cash") return t("payment.cash");
|
||||
if (m === "card") return t("payment.card");
|
||||
if (m === "cash") return t("payment.cash");
|
||||
if (m === "card") return t("payment.card");
|
||||
if (m === "credit") return t("payment.credit");
|
||||
return method;
|
||||
};
|
||||
|
||||
const activeBillItems = order?.items.filter((i) => !i.isVoided) ?? [];
|
||||
// ── Build meta row ─────────────────────────────────────────────────────────
|
||||
const metaParts: string[] = [];
|
||||
metaParts.push(`${t("table")}: ${table}`);
|
||||
if (orderNo) metaParts.push(`${t("order")}: #${orderNo}`);
|
||||
if (guest) metaParts.push(`${t("guest")}: ${guest}`);
|
||||
const metaRow = metaParts.join(" | ");
|
||||
|
||||
// ── Print handler ─────────────────────────────────────────────────────────
|
||||
const handlePrint = () => {
|
||||
const slipData =
|
||||
variant === "kitchen"
|
||||
? {
|
||||
cafeName,
|
||||
title: t("kitchenTitle"),
|
||||
date: formattedDate,
|
||||
metaRow,
|
||||
lines: kitchenLines.map((l) => ({
|
||||
name: l.name,
|
||||
quantity: l.quantity,
|
||||
notes: l.notes,
|
||||
})),
|
||||
footer: t("kitchenFooter"),
|
||||
locale,
|
||||
}
|
||||
: {
|
||||
cafeName,
|
||||
title: t("billTitle"),
|
||||
date: formattedDate,
|
||||
metaRow,
|
||||
lines: activeBillItems.map((item) => ({
|
||||
name: item.menuItemName,
|
||||
quantity: item.quantity,
|
||||
price: formatCurrency(item.unitPrice * item.quantity, numberLocale),
|
||||
})),
|
||||
totals: {
|
||||
total: formatCurrency(order!.total, numberLocale),
|
||||
payments: order!.payments?.map((p) => ({
|
||||
method: paymentKey(p.method),
|
||||
amount: formatCurrency(p.amount, numberLocale),
|
||||
})),
|
||||
},
|
||||
footer: t("thankYou"),
|
||||
locale,
|
||||
};
|
||||
|
||||
printThermal(buildThermalDocument(slipData));
|
||||
};
|
||||
|
||||
// ── Render ─────────────────────────────────────────────────────────────────
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
|
||||
<div className="w-full max-w-[340px] rounded-xl border border-border bg-background p-4 shadow-xl">
|
||||
|
||||
{/* ── Print preview ──────────────────────────────────────────────── */}
|
||||
<div
|
||||
id={printId}
|
||||
id="pos-slip-print-area"
|
||||
className="mb-4 rounded-md border border-dashed border-border p-3"
|
||||
>
|
||||
<div className="text-center text-base font-bold">{cafeName}</div>
|
||||
@@ -78,20 +133,7 @@ export function PosSlipModal({
|
||||
<div className="mb-2 text-center text-xs text-muted-foreground">
|
||||
{formattedDate}
|
||||
</div>
|
||||
<div className="text-xs">
|
||||
{t("table")}: {table}
|
||||
{orderNo ? (
|
||||
<>
|
||||
{" "}
|
||||
| {t("order")}: #{orderNo}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{guest ? (
|
||||
<div className="text-xs">
|
||||
{t("guest")}: {guest}
|
||||
</div>
|
||||
) : null}
|
||||
<div className="text-xs">{metaRow}</div>
|
||||
|
||||
<div className="receipt-divider" />
|
||||
|
||||
@@ -115,7 +157,7 @@ export function PosSlipModal({
|
||||
</div>
|
||||
))}
|
||||
|
||||
{variant === "bill" ? (
|
||||
{variant === "bill" && (
|
||||
<>
|
||||
<div className="receipt-divider" />
|
||||
<div className="receipt-row receipt-total">
|
||||
@@ -131,15 +173,19 @@ export function PosSlipModal({
|
||||
<div className="receipt-divider" />
|
||||
<div className="mt-2 text-center text-xs">{t("thankYou")}</div>
|
||||
</>
|
||||
) : (
|
||||
)}
|
||||
|
||||
{variant === "kitchen" && (
|
||||
<div className="mt-2 text-center text-[10px] text-muted-foreground">
|
||||
{t("kitchenFooter")}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Actions ────────────────────────────────────────────────────── */}
|
||||
<div className="flex gap-2">
|
||||
<Button type="button" className="flex-1" onClick={() => window.print()}>
|
||||
<Button type="button" className="flex-1 gap-1.5" onClick={handlePrint}>
|
||||
<Printer className="h-4 w-4" />
|
||||
{t("print")}
|
||||
</Button>
|
||||
<Button type="button" variant="outline" className="flex-1" onClick={onClose}>
|
||||
@@ -162,6 +208,11 @@ export function PosReceiptModal({
|
||||
onClose: () => void;
|
||||
}) {
|
||||
return (
|
||||
<PosSlipModal variant="bill" order={order} cafeName={cafeName} onClose={onClose} />
|
||||
<PosSlipModal
|
||||
variant="bill"
|
||||
order={order}
|
||||
cafeName={cafeName}
|
||||
onClose={onClose}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user