"use client"; /** * A thermal receipt for your visit. * * Everything on it is billed in time rather than money — attention is the * currency — and the whole tab lives in `sessionStorage`, so the "nothing was * stored" line at the bottom is a joke that happens to be true. */ import { motion, useInView, useReducedMotion } from "framer-motion"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { isReceiptItemCode, receiptItemLabel, } from "@/libs/receipt/catalogue"; import { encodeReceipt } from "@/libs/receipt/encode"; import { formatDuration, readSession, receiptLines, receiptTotals, recordReceiptItem, subscribeToReceipt, type ReceiptLine, } from "@/libs/receipt/session"; /** Fine paper grain, same trick the postcard uses. */ const GRAIN = "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"; /** * Torn edges, as real transparency rather than paint, so the drop shadow * follows the scallops. Three mask layers: an opaque middle inset by the tear * height, then a row of bitten-out semicircles along the top and the bottom. */ const TEAR = 10; const MASK = { maskImage: [ "linear-gradient(#000, #000)", "radial-gradient(circle at 50% 0%, transparent 5px, #000 5.5px)", "radial-gradient(circle at 50% 100%, transparent 5px, #000 5.5px)", ].join(", "), maskSize: `100% calc(100% - ${TEAR * 2}px), ${TEAR}px ${TEAR}px, ${TEAR}px ${TEAR}px`, maskPosition: `0 ${TEAR}px, top left, bottom left`, maskRepeat: "no-repeat, repeat-x, repeat-x", } as const; const PRINT_MS = 1500; const RULE = "-".repeat(33); function useMumbaiStamp(mounted: boolean) { return useMemo(() => { if (!mounted) return ""; try { return new Intl.DateTimeFormat("en-GB", { timeZone: "Asia/Kolkata", day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit", hour12: false, }) .format(new Date()) .toUpperCase() .replace(",", ""); } catch { return ""; } }, [mounted]); } /** Deterministic bars from the order number — a barcode that means something. */ function barcodeBars(order: string): number[] { const bars: number[] = []; const seed = order || "00000"; for (let i = 0; i < 34; i += 1) { const char = seed.charCodeAt(i % seed.length); bars.push(((char * (i + 7)) % 4) + 1); } return bars; } export default function Receipt() { const [mounted, setMounted] = useState(false); const [order, setOrder] = useState(""); const [lines, setLines] = useState([]); const [copied, setCopied] = useState(false); const wrapperRef = useRef(null); const paperRef = useRef(null); const [paperHeight, setPaperHeight] = useState(0); const reduceMotion = useReducedMotion(); const inView = useInView(wrapperRef, { once: true, amount: 0.2 }); const printed = inView || Boolean(reduceMotion); // Read the tab on mount, then follow it. The tracker writes from the root // layout, so changes arrive from a sibling tree rather than through props. useEffect(() => { setMounted(true); const sync = () => { const session = readSession(); setOrder(session.order); setLines(receiptLines(session)); }; sync(); return subscribeToReceipt(sync); }, []); // Reading the page is shopping: each homepage section scrolled past becomes // a line item, so even a single-page visit prints something worth keeping. useEffect(() => { const sections = document.querySelectorAll( "[data-receipt-item]", ); if (sections.length === 0) return; const billed = new Set(); const observer = new IntersectionObserver( (entries) => { for (const entry of entries) { if (!entry.isIntersecting) continue; const code = entry.target.getAttribute("data-receipt-item"); if (!code || billed.has(code) || !isReceiptItemCode(code)) continue; billed.add(code); recordReceiptItem(code); observer.unobserve(entry.target); } }, { threshold: 0.4 }, ); for (const section of sections) observer.observe(section); return () => observer.disconnect(); }, []); // The paper's final height drives the print animation. Measured rather than // guessed, because line count changes as the visitor keeps browsing. useEffect(() => { const paper = paperRef.current; if (!paper) return; const measure = () => setPaperHeight(paper.scrollHeight); measure(); const observer = new ResizeObserver(measure); observer.observe(paper); return () => observer.disconnect(); }, [mounted, lines.length]); const totals = useMemo(() => receiptTotals(lines), [lines]); const stamp = useMumbaiStamp(mounted); const bars = useMemo(() => barcodeBars(order), [order]); const plainText = useMemo(() => { if (lines.length === 0) return ""; const pad = (left: string, right: string) => `${left}${" ".repeat(Math.max(1, 33 - left.length - right.length))}${right}`; const body = lines.map((line) => pad( `${String(line.qty).padStart(2, " ")} ${receiptItemLabel(line.code)}`, formatDuration(line.ms), ), ); return [ " WAHAB SHAIKH", " MUMBAI, INDIA", ` ORDER #${order} ${stamp}`, RULE, ...body, RULE, pad("ITEMS", String(totals.count)), pad("SUBTOTAL", formatDuration(totals.ms)), pad("CURIOSITY TAX (0%)", "0s"), pad("TOTAL", formatDuration(totals.ms)), RULE, pad("TENDERED", "YOUR ATTENTION"), pad("CHANGE", "0s"), RULE, " *** THANK YOU, COME AGAIN ***", " NO REFUNDS ON TIME SPENT", "", " wahabshaikh.com", ].join("\n"); }, [lines, order, stamp, totals]); const downloadHref = useMemo(() => { if (lines.length === 0) return null; return `/api/receipt/image?d=${encodeReceipt(order, lines)}`; }, [lines, order]); const handleCopy = useCallback(async () => { if (!plainText) return; try { await navigator.clipboard.writeText(plainText); setCopied(true); window.setTimeout(() => setCopied(false), 2200); } catch { setCopied(false); } }, [plainText]); const revealHeight = printed ? paperHeight : 0; return (

{mounted && lines.length > 0 ? ( <>

Wahab Shaikh

Mumbai, India

Order #{order} {stamp}

Cashier: Wahab (#1)

Qty Item Time

{line.qty} {receiptItemLabel(line.code)} {formatDuration(line.ms)}

) : (

Printing…

)}

{/* Grain */}

{downloadHref ? ( save receipt ) : null}

{copied ? "Receipt copied to clipboard." : ""}

); } function Rule() { return ( ); } function Row({ label, value, bold, }: { label: string; value: string; bold?: boolean; }) { return (

{label}

{value}

); }