50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T19df,"use client"; import * as React from "react"; export type ReceiptItem = { name: string; price: number; qty?: number }; export interface ReceiptProps extends React.HTMLAttributes { title?: string; subtitle?: string; meta?: { label: string; value: string }[]; items: ReceiptItem[]; currency?: string; /** e.g. 0.08 for 8% tax */ taxRate?: number; footer?: string; /** Barcode value. Pass false to hide. */ barcode?: string | false; /** Animate the receipt printing line by line when it scrolls into view. */ print?: boolean; width?: number; } const NOISE = "url(\"data:image/svg+xml;utf8,\")"; const ZIGZAG = "conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / 12px 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 12px 51% repeat-x"; const CSS = ` @keyframes eph-receipt-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } } .eph-receipt-hidden { clip-path: inset(0 0 100% 0); } @media (prefers-reduced-motion: reduce) { .eph-receipt-hidden { clip-path: none; } .eph-receipt-printing { animation: none !important; } } `; function useInView() { const ref = React.useRef(null); const [inView, setInView] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; if (typeof IntersectionObserver === "undefined") return setInView(true); const io = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setInView(true); io.disconnect(); } }, { threshold: 0.2 }, ); io.observe(el); return () => io.disconnect(); }, []); return [ref, inView] as const; } export function Barcode({ value, height = 44 }: { value: string; height?: number }) { const bars = React.useMemo(() => { let h = 2166136261; const widths: number[] = []; for (let i = 0; i < value.length * 5 + 24; i++) { h ^= value.charCodeAt(i % value.length) + i; h = Math.imul(h, 16777619) >>> 0; widths.push((h % 3) + 1); } return widths; }, [value]); let x = 0; const rects: React.ReactNode[] = []; bars.forEach((w, i) => { if (i % 2 === 0) rects.push(); x += w; }); return ( ); } const money = (n: number, c: string) => `${c}${n.toFixed(2)}`; export function Receipt({ title = "EPHEMERA GOODS CO.", subtitle, meta, items, currency = "$", taxRate = 0, footer = "THANK YOU, COME AGAIN", barcode = "0000-EPHEMERA", print = true, width = 300, className = "", style, ...props }: ReceiptProps) { const [ref, inView] = useInView(); const subtotal = items.reduce((s, i) => s + i.price * (i.qty ?? 1), 0); const tax = subtotal * taxRate; const lines = items.length + (meta?.length ?? 0) + 12; const rule =

; return (

{title}

{subtitle &&

{subtitle}

}

{meta && meta.length > 0 && ( <> {rule} {meta.map((m) => (

{m.label} {m.value}

))} )} {rule} {items.map((item, i) => (

{(item.qty ?? 1) > 1 && {item.qty} × } {item.name.toUpperCase()} {money(item.price * (item.qty ?? 1), currency)}

))} {rule} {taxRate > 0 && ( <>

SUBTOTAL {money(subtotal, currency)}

TAX {(taxRate * 100).toFixed(taxRate * 100 % 1 ? 1 : 0)}% {money(tax, currency)}

)}

TOTAL {money(subtotal + tax, currency)}

{rule} {footer &&

{footer}

} {barcode !== false && (

{barcode}

)}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"ui/receipt.tsx","content":"$51","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]