61:I[707087,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"RegistryDependencies"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T4feb,"use client" import * as React from "react" import { Check, Link2, Printer } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { Skeleton } from "@/components/ui/skeleton" import { cn } from "@/lib/utils" /* * The page after Pay: the receipt people screenshot, print and come back to. * * * * or composed * * * * * * The thank-you is set large in your serif on a grained band — the one * moment in the funnel that earns a flourish — with a check that draws * itself (Motion; none under reduced motion). Everything a shopper looks * for sits above the fold: the order number, the date, when it arrives, * what was paid. It prints as a plain receipt — no band, no buttons, black * on white, the permalink written out — and `permalink` is a link that * shows this order again from any device: give it a token, never session * state. Calendar dates (arrival) are shown in UTC so they never slip a * day; the placed time is the visitor's own once hydrated. A date range is * two formatted days joined with a dash, not `formatRange`: its spacing * differs between Node's ICU and the browser's, and the server's HTML has * to match the first client render exactly. */ export interface ConfirmationLine { id: string name: string /** "Tan · EU 42". */ variant?: string quantity: number unitPrice: number /** Already rendered, so the block never assumes next/image. */ image?: React.ReactNode } export interface OrderConfirmationData { /** What the shopper quotes to support: "ATL-77760". */ number: string /** ISO timestamp the order was placed. */ placedAt: string /** Where the confirmation email went. */ email?: string lines: ConfirmationLine[] totals: { subtotal: number; discount?: number; shipping: number; tax?: number; total: number } /** The address as display lines — `formatAddressLines` from address-form gives these. */ shipTo?: string[] delivery?: { /** "Express". */ label: string /** Calendar dates, "2026-10-21": the window it should arrive in. */ from?: string to?: string } /** "Visa ending 4242", "Pay in 3". */ payment?: string } /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const const subscribeNothing = () => () => {} /** True once hydrated: the server can't know the visitor's locale or time zone. */ function useHydrated() { return React.useSyncExternalStore(subscribeNothing, () => true, () => false) } /** Film grain as an inline SVG: no image request, and it prints as nothing. */ const GRAIN = "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\")" /* ─── context ──────────────────────────────────────────────────────────── */ export interface OrderConfirmationContextValue { order: OrderConfirmationData formatMoney: (amount: number) => string /** "Wed, Oct 21" — a calendar date, in UTC so it never slips a day. */ formatDay: (isoDate: string) => string /** "Wed, Oct 21 – Fri, Oct 23", or one day when they match. */ formatWindow: (from: string, to?: string) => string /** When it was placed: the visitor's date and time once hydrated, UTC before. */ formatPlaced: (isoTimestamp: string) => string permalink?: string title: React.ReactNode actions?: React.ReactNode } const OrderConfirmationContext = React.createContext(null) export function useOrderConfirmation() { const context = React.useContext(OrderConfirmationContext) if (!context) { throw new Error("useOrderConfirmation must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface OrderConfirmationProps extends Omit, "title"> { order?: OrderConfirmationData currency?: string /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** "Thank you for your order", by default — "Thank you, Ada." reads warmer. */ title?: React.ReactNode /** A link that shows this order again from any device. Adds "Copy link", and prints. */ permalink?: string /** What next: "Continue shopping", "Track your order". Hidden in print. */ actions?: React.ReactNode /** The order is still loading — from the permalink, say. */ loading?: boolean children?: React.ReactNode } export function OrderConfirmation({ order, currency = "USD", locale: localeProp, title = "Thank you for your order", permalink, actions, loading = false, className, children, ...props }: OrderConfirmationProps) { const hydrated = useHydrated() const locale = localeProp ?? (hydrated ? undefined : "en-US") const timeZone = hydrated ? undefined : "UTC" const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency]) const day = React.useMemo( () => new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }), [locale] ) const placed = React.useMemo( () => new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }), [locale, timeZone] ) const context = React.useMemo( () => order ? { order, formatMoney: (amount) => money.format(amount), formatDay: (iso) => day.format(new Date(`${iso}T00:00:00Z`)), formatWindow: (from, to) => !to || to === from ? day.format(new Date(`${from}T00:00:00Z`)) : `${day.format(new Date(`${from}T00:00:00Z`))} – ${day.format(new Date(`${to}T00:00:00Z`))}`, formatPlaced: (iso) => placed.format(new Date(iso)), permalink, title, actions, } : null, [order, money, day, placed, permalink, title, actions] ) return (

{loading || !context ? ( ) : ( {children ?? ( <>

)} )}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** The band: a check that draws itself, the order number, and the thank-you. */ export function OrderConfirmationHeader({ className, ...props }: React.HTMLAttributes) { const { order, title } = useOrderConfirmation() const reduce = useReducedMotion() return (

Order confirmed · {order.number}

{title}

{order.email ? (

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

) : null}

) } /** The four things people look for, in a ruled row: number, placed, arrives, paid. */ export function OrderConfirmationFacts({ className, ...props }: React.HTMLAttributes) { const { order, formatMoney, formatWindow, formatPlaced } = useOrderConfirmation() const facts: { term: string; value: React.ReactNode }[] = [ { term: "Order number", value: {order.number} }, { term: "Placed", // UTC on the server, the visitor's zone right after hydration; React // keeps the server's text for that first pass, then the client's. value: ( {formatPlaced(order.placedAt)} ), }, ] if (order.delivery?.from) { facts.push({ term: "Arrives", value: {formatWindow(order.delivery.from, order.delivery.to)}, }) } facts.push({ term: "Paid", value: {formatMoney(order.totals.total)} }) return (

{fact.term}: {fact.value}

) } /** What was bought, as a ledger, and the totals under it. */ export function OrderConfirmationItems({ className, ...props }: React.HTMLAttributes) { const { order, formatMoney } = useOrderConfirmation() const headingId = React.useId() const count = order.lines.reduce((n, l) => n + l.quantity, 0) const rows: { label: string; value: string; strong?: boolean }[] = [ { label: "Subtotal", value: formatMoney(order.totals.subtotal) }, ] if (order.totals.discount) rows.push({ label: "Discount", value: `−${formatMoney(order.totals.discount)}` }) rows.push({ label: "Shipping", value: order.totals.shipping === 0 ? "Free" : formatMoney(order.totals.shipping) }) if (order.totals.tax !== undefined) rows.push({ label: "Tax", value: formatMoney(order.totals.tax) }) return (

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

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

No items on this order.

) : (

{line.image ? (
{line.image}
) : null}
{line.name} {line.variant ? {line.variant} : null} {line.quantity} × {formatMoney(line.unitPrice)}
{formatMoney(line.quantity * line.unitPrice)}

)}

{row.label}: {row.value}
Total paid: {formatMoney(order.totals.total)}

) } /** Where it's going, how, and how it was paid for. */ export function OrderConfirmationDetails({ className, ...props }: React.HTMLAttributes) { const { order, formatWindow } = useOrderConfirmation() const blocks: { term: string; lines: React.ReactNode[] }[] = [] if (order.shipTo?.length) blocks.push({ term: "Ship to", lines: order.shipTo }) if (order.delivery) { blocks.push({ term: "Delivery", lines: [ order.delivery.label, ...(order.delivery.from ? [`Arrives ${formatWindow(order.delivery.from, order.delivery.to)}`] : []), ], }) } if (order.payment) blocks.push({ term: "Payment", lines: [order.payment] }) if (blocks.length === 0) return null return (

{block.term}: {line}

) } /** * Your next actions, then print and copy-link. Hidden in print, where the * permalink is written out instead. */ export function OrderConfirmationActions({ className, ...props }: React.HTMLAttributes) { const { actions, permalink } = useOrderConfirmation() const reduce = useReducedMotion() const [copied, setCopied] = React.useState<"idle" | "copied" | "selected">("idle") const timer = React.useRef(0) const linkRef = React.useRef(null) React.useEffect(() => () => window.clearTimeout(timer.current), []) const copy = async () => { if (!permalink) return let outcome: "copied" | "selected" = "copied" try { await navigator.clipboard.writeText(permalink) } catch { // The browser refused the clipboard (an insecure context, a denied // permission): select the link on the page instead, one keystroke from copied. const link = linkRef.current if (link) window.getSelection()?.selectAllChildren(link) outcome = "selected" } setCopied(outcome) window.clearTimeout(timer.current) timer.current = window.setTimeout(() => setCopied("idle"), outcome === "copied" ? 2000 : 4000) } return (

{actions} {permalink ? ( ) : null}

{permalink ? (

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

) : null}

) } /** The receipt's shape while the order loads. */ function OrderConfirmationSkeleton() { return (

Loading your order

{[0, 1, 2, 3].map((i) => (

))}

{[0, 1].map((i) => (

))}

) } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["button","skeleton"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/order-confirmation/order-confirmation.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/order-confirmation.tsx"}],"className":"h-[70svh] min-h-80"}]]}]