{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "order-confirmation", "title": "Order Confirmation", "author": "ecomcn ", "description": "The page after Pay: the receipt people screenshot, print and come back to. A thank-you set large in your serif on a grained band, with a check that draws itself; the order number, placed date, arrival window and amount paid in one ruled row above the fold; the items as a ledger with totals; ship-to, delivery and payment. Prints as a plain black-on-white receipt with the permalink written out; Copy order link for a permalink you give it. Calendar dates in UTC so they never slip a day; the placed time in the visitor's zone once hydrated. Loading skeleton included. Compound, through useOrderConfirmation().", "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "button", "skeleton" ], "files": [ { "path": "src/registry/ecomcn/order-confirmation/order-confirmation.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Link2, Printer } from \"lucide-react\"\nimport { AnimatePresence, MotionConfig, motion, useReducedMotion } from \"motion/react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { cn } from \"@/lib/utils\"\n\n/*\n * The page after Pay: the receipt people screenshot, print and come back to.\n *\n * \n *\n * or composed\n * \n * \n * \n * \n *\n * The thank-you is set large in your serif on a grained band — the one\n * moment in the funnel that earns a flourish — with a check that draws\n * itself (Motion; none under reduced motion). Everything a shopper looks\n * for sits above the fold: the order number, the date, when it arrives,\n * what was paid. It prints as a plain receipt — no band, no buttons, black\n * on white, the permalink written out — and `permalink` is a link that\n * shows this order again from any device: give it a token, never session\n * state. Calendar dates (arrival) are shown in UTC so they never slip a\n * day; the placed time is the visitor's own once hydrated. A date range is\n * two formatted days joined with a dash, not `formatRange`: its spacing\n * differs between Node's ICU and the browser's, and the server's HTML has\n * to match the first client render exactly.\n */\n\nexport interface ConfirmationLine {\n id: string\n name: string\n /** \"Tan · EU 42\". */\n variant?: string\n quantity: number\n unitPrice: number\n /** Already rendered, so the block never assumes next/image. */\n image?: React.ReactNode\n}\n\nexport interface OrderConfirmationData {\n /** What the shopper quotes to support: \"ATL-77760\". */\n number: string\n /** ISO timestamp the order was placed. */\n placedAt: string\n /** Where the confirmation email went. */\n email?: string\n lines: ConfirmationLine[]\n totals: { subtotal: number; discount?: number; shipping: number; tax?: number; total: number }\n /** The address as display lines — `formatAddressLines` from address-form gives these. */\n shipTo?: string[]\n delivery?: {\n /** \"Express\". */\n label: string\n /** Calendar dates, \"2026-10-21\": the window it should arrive in. */\n from?: string\n to?: string\n }\n /** \"Visa ending 4242\", \"Pay in 3\". */\n payment?: string\n}\n\n/** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */\nconst MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const\n\nconst subscribeNothing = () => () => {}\n\n/** True once hydrated: the server can't know the visitor's locale or time zone. */\nfunction useHydrated() {\n return React.useSyncExternalStore(subscribeNothing, () => true, () => false)\n}\n\n/** Film grain as an inline SVG: no image request, and it prints as nothing. */\nconst GRAIN =\n \"url(\\\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E\\\")\"\n\n/* ─── context ──────────────────────────────────────────────────────────── */\n\nexport interface OrderConfirmationContextValue {\n order: OrderConfirmationData\n formatMoney: (amount: number) => string\n /** \"Wed, Oct 21\" — a calendar date, in UTC so it never slips a day. */\n formatDay: (isoDate: string) => string\n /** \"Wed, Oct 21 – Fri, Oct 23\", or one day when they match. */\n formatWindow: (from: string, to?: string) => string\n /** When it was placed: the visitor's date and time once hydrated, UTC before. */\n formatPlaced: (isoTimestamp: string) => string\n permalink?: string\n title: React.ReactNode\n actions?: React.ReactNode\n}\n\nconst OrderConfirmationContext = React.createContext(null)\n\nexport function useOrderConfirmation() {\n const context = React.useContext(OrderConfirmationContext)\n if (!context) {\n throw new Error(\"useOrderConfirmation must be used within .\")\n }\n return context\n}\n\n/* ─── root ─────────────────────────────────────────────────────────────── */\n\nexport interface OrderConfirmationProps extends Omit, \"title\"> {\n order?: OrderConfirmationData\n currency?: string\n /** `undefined` follows the visitor's locale, once hydrated. */\n locale?: string\n /** \"Thank you for your order\", by default — \"Thank you, Ada.\" reads warmer. */\n title?: React.ReactNode\n /** A link that shows this order again from any device. Adds \"Copy link\", and prints. */\n permalink?: string\n /** What next: \"Continue shopping\", \"Track your order\". Hidden in print. */\n actions?: React.ReactNode\n /** The order is still loading — from the permalink, say. */\n loading?: boolean\n children?: React.ReactNode\n}\n\nexport function OrderConfirmation({\n order,\n currency = \"USD\",\n locale: localeProp,\n title = \"Thank you for your order\",\n permalink,\n actions,\n loading = false,\n className,\n children,\n ...props\n}: OrderConfirmationProps) {\n const hydrated = useHydrated()\n const locale = localeProp ?? (hydrated ? undefined : \"en-US\")\n const timeZone = hydrated ? undefined : \"UTC\"\n\n const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: \"currency\", currency }), [locale, currency])\n const day = React.useMemo(\n () => new Intl.DateTimeFormat(locale, { weekday: \"short\", month: \"short\", day: \"numeric\", timeZone: \"UTC\" }),\n [locale]\n )\n const placed = React.useMemo(\n () => new Intl.DateTimeFormat(locale, { dateStyle: \"medium\", timeStyle: \"short\", timeZone }),\n [locale, timeZone]\n )\n\n const context = React.useMemo(\n () =>\n order\n ? {\n order,\n formatMoney: (amount) => money.format(amount),\n formatDay: (iso) => day.format(new Date(`${iso}T00:00:00Z`)),\n formatWindow: (from, to) =>\n !to || to === from\n ? day.format(new Date(`${from}T00:00:00Z`))\n : `${day.format(new Date(`${from}T00:00:00Z`))} – ${day.format(new Date(`${to}T00:00:00Z`))}`,\n formatPlaced: (iso) => placed.format(new Date(iso)),\n permalink,\n title,\n actions,\n }\n : null,\n [order, money, day, placed, permalink, title, actions]\n )\n\n return (\n \n \n {loading || !context ? (\n \n ) : (\n \n {children ?? (\n <>\n \n \n
\n \n \n
\n \n \n )}\n \n )}\n \n \n )\n}\n\n/* ─── parts ────────────────────────────────────────────────────────────── */\n\n/** The band: a check that draws itself, the order number, and the thank-you. */\nexport function OrderConfirmationHeader({ className, ...props }: React.HTMLAttributes) {\n const { order, title } = useOrderConfirmation()\n const reduce = useReducedMotion()\n return (\n \n \n

\n \n \n \n \n \n \n Order confirmed · {order.number}\n \n

\n

{title}

\n {order.email ? (\n

\n A confirmation is on its way to {order.email}.\n

\n ) : null}\n \n )\n}\n\n/** The four things people look for, in a ruled row: number, placed, arrives, paid. */\nexport function OrderConfirmationFacts({ className, ...props }: React.HTMLAttributes) {\n const { order, formatMoney, formatWindow, formatPlaced } = useOrderConfirmation()\n const facts: { term: string; value: React.ReactNode }[] = [\n { term: \"Order number\", value: {order.number} },\n {\n term: \"Placed\",\n // UTC on the server, the visitor's zone right after hydration; React\n // keeps the server's text for that first pass, then the client's.\n value: (\n \n ),\n },\n ]\n if (order.delivery?.from) {\n facts.push({\n term: \"Arrives\",\n value: ,\n })\n }\n facts.push({ term: \"Paid\", value: {formatMoney(order.totals.total)} })\n\n return (\n \n {facts.map((fact, i) => (\n = 2 && \"max-sm:border-t sm:border-l\")}\n >\n
{fact.term}
\n
{fact.value}
\n \n ))}\n \n )\n}\n\n/** What was bought, as a ledger, and the totals under it. */\nexport function OrderConfirmationItems({ className, ...props }: React.HTMLAttributes) {\n const { order, formatMoney } = useOrderConfirmation()\n const headingId = React.useId()\n const count = order.lines.reduce((n, l) => n + l.quantity, 0)\n const rows: { label: string; value: string; strong?: boolean }[] = [\n { label: \"Subtotal\", value: formatMoney(order.totals.subtotal) },\n ]\n if (order.totals.discount) rows.push({ label: \"Discount\", value: `−${formatMoney(order.totals.discount)}` })\n rows.push({ label: \"Shipping\", value: order.totals.shipping === 0 ? \"Free\" : formatMoney(order.totals.shipping) })\n if (order.totals.tax !== undefined) rows.push({ label: \"Tax\", value: formatMoney(order.totals.tax) })\n\n return (\n
\n

\n {count === 1 ? \"1 item\" : `${count} items`}\n

\n {order.lines.length === 0 ? (\n

No items on this order.

\n ) : (\n
    \n {order.lines.map((line) => (\n
  • \n {line.image ? (\n
    {line.image}
    \n ) : null}\n
    \n {line.name}\n {line.variant ? {line.variant} : null}\n \n {line.quantity} × {formatMoney(line.unitPrice)}\n \n
    \n {formatMoney(line.quantity * line.unitPrice)}\n
    • \n ))}\n
\n )}\n
\n {rows.map((row) => (\n
\n
{row.label}
\n
{row.value}
\n
\n ))}\n
\n
Total paid
\n
{formatMoney(order.totals.total)}
\n
\n
\n
\n )\n}\n\n/** Where it's going, how, and how it was paid for. */\nexport function OrderConfirmationDetails({ className, ...props }: React.HTMLAttributes) {\n const { order, formatWindow } = useOrderConfirmation()\n const blocks: { term: string; lines: React.ReactNode[] }[] = []\n if (order.shipTo?.length) blocks.push({ term: \"Ship to\", lines: order.shipTo })\n if (order.delivery) {\n blocks.push({\n term: \"Delivery\",\n lines: [\n order.delivery.label,\n ...(order.delivery.from ? [`Arrives ${formatWindow(order.delivery.from, order.delivery.to)}`] : []),\n ],\n })\n }\n if (order.payment) blocks.push({ term: \"Payment\", lines: [order.payment] })\n if (blocks.length === 0) return null\n\n return (\n
\n {blocks.map((block) => (\n
\n
{block.term}
\n {block.lines.map((line, i) => (\n
\n {line}\n
\n ))}\n
\n ))}\n
\n )\n}\n\n/**\n * Your next actions, then print and copy-link. Hidden in print, where the\n * permalink is written out instead.\n */\nexport function OrderConfirmationActions({ className, ...props }: React.HTMLAttributes) {\n const { actions, permalink } = useOrderConfirmation()\n const reduce = useReducedMotion()\n const [copied, setCopied] = React.useState<\"idle\" | \"copied\" | \"selected\">(\"idle\")\n const timer = React.useRef(0)\n const linkRef = React.useRef(null)\n React.useEffect(() => () => window.clearTimeout(timer.current), [])\n\n const copy = async () => {\n if (!permalink) return\n let outcome: \"copied\" | \"selected\" = \"copied\"\n try {\n await navigator.clipboard.writeText(permalink)\n } catch {\n // The browser refused the clipboard (an insecure context, a denied\n // permission): select the link on the page instead, one keystroke from copied.\n const link = linkRef.current\n if (link) window.getSelection()?.selectAllChildren(link)\n outcome = \"selected\"\n }\n setCopied(outcome)\n window.clearTimeout(timer.current)\n timer.current = window.setTimeout(() => setCopied(\"idle\"), outcome === \"copied\" ? 2000 : 4000)\n }\n\n return (\n
\n
\n {actions}\n \n {permalink ? (\n \n ) : null}\n
\n {permalink ? (\n

\n Come back to this order any time: \n This order online: \n \n {permalink}\n \n

\n ) : null}\n
\n )\n}\n\n/** The receipt's shape while the order loads. */\nfunction OrderConfirmationSkeleton() {\n return (\n
\n \n Loading your order\n \n
\n \n \n \n
\n
\n {[0, 1, 2, 3].map((i) => (\n
\n \n \n
\n ))}\n
\n
\n {[0, 1].map((i) => (\n
\n \n
\n \n \n
\n
\n ))}\n
\n
\n )\n}\n", "type": "registry:component", "target": "components/ecomcn/order-confirmation.tsx" } ], "categories": [ "ecommerce", "post-purchase" ], "type": "registry:block" }