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:T6e47,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface AccordionLine { name: string; variant?: string; price: number; qty: number; image: string; } type SectionId = "contact" | "address" | "delivery" | "payment"; export interface AccordionCheckoutResult { email: string; marketing: boolean; address: { name: string; line1: string; city: string; zip: string }; delivery: string; /** Only the brand and last four digits leave the form. */ card: { brand: string | null; last4: string }; code: string | null; total: number; } export interface AccordionCheckoutProps { lines?: AccordionLine[]; currency?: string; taxRate?: number; deliveryOptions?: { id: string; label: string; eta: string; price: number }[]; /** Codes that work, with what they take off the subtotal. */ codes?: Record number }>; onPay?: (result: AccordionCheckoutResult) => Promise | void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", open: "#191919", side: "#101010", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", tile: "#F1F1F1", accent: "#7CDE6A", accentText: "#0B1A08", danger: "#FF8A7A", buttonBg: "#FFFFFF", buttonText: "#111111", ghost: "rgba(255,255,255,0.07)", ring: "rgba(255,255,255,0.55)", field: "#0D0D0D", }, light: { bg: "#FFFFFF", card: "#FFFFFF", open: "#FAFAFA", side: "#F7F7F7", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", tile: "#F1F1F1", accent: "#2F9E44", accentText: "#FFFFFF", danger: "#C0392B", buttonBg: "#111111", buttonText: "#FFFFFF", ghost: "rgba(0,0,0,0.05)", ring: "rgba(0,0,0,0.45)", field: "#FFFFFF", }, }; const LINES: AccordionLine[] = [ { name: "Running Shoes", variant: "Black · EU 43", price: 99, qty: 1, image: "/demo/running-shoes.webp" }, { name: "Insulated Bottle", variant: "750 ml", price: 39, qty: 1, image: "/demo/insulated-water-bottle.webp" }, { name: "Dot Notebook", variant: "A5 · Sand", price: 24, qty: 2, image: "/demo/notebook.webp" }, ]; const DELIVERY = [ { id: "standard", label: "Standard", eta: "3–5 business days", price: 0 }, { id: "express", label: "Express", eta: "Next business day", price: 15 }, ]; const CODES: AccordionCheckoutProps["codes"] = { SAVE10: { label: "10% off", off: (s) => Math.round(s * 0.1 * 100) / 100 }, FREESHIP: { label: "Free express", off: () => 0 }, }; const SECTIONS: { id: SectionId; title: string }[] = [ { id: "contact", title: "Contact" }, { id: "address", title: "Shipping address" }, { id: "delivery", title: "Delivery" }, { id: "payment", title: "Payment" }, ]; const money = (n: number, c: string) => `${c}${n.toFixed(2)}`; const brandOf = (d: string) => (/^4/.test(d) ? "Visa" : /^(5[1-5]|2[2-7])/.test(d) ? "Mastercard" : /^3[47]/.test(d) ? "Amex" : null); const luhn = (d: string) => { let s = 0; for (let i = 0; i < d.length; i++) { let n = Number(d[d.length - 1 - i]); if (i % 2) n = n * 2 > 9 ? n * 2 - 9 : n * 2; s += n; } return d.length >= 13 && s % 10 === 0; }; export function AccordionCheckout({ lines = LINES, currency = "$", taxRate = 0.08, deliveryOptions = DELIVERY, codes = CODES, onPay, theme = "dark", className }: AccordionCheckoutProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [open, setOpen] = React.useState("contact"); const [done, setDone] = React.useState>({ contact: false, address: false, delivery: false, payment: false }); const [tried, setTried] = React.useState>({ contact: false, address: false, delivery: false, payment: false }); const [email, setEmail] = React.useState(""); const [marketing, setMarketing] = React.useState(false); const [addr, setAddr] = React.useState({ name: "Maya Chen", line1: "418 Alder St", city: "Portland", zip: "97209" }); const [delivery, setDelivery] = React.useState(deliveryOptions[0].id); const [card, setCard] = React.useState({ number: "", exp: "", cvc: "" }); const [code, setCode] = React.useState(""); const [applied, setApplied] = React.useState(null); const [codeErr, setCodeErr] = React.useState(""); const [state, setState] = React.useState<"form" | "busy" | "done" | "error">("form"); const sectionRefs = React.useRef>({}); const ship = deliveryOptions.find((d) => d.id === delivery)!; const subtotal = lines.reduce((t, l) => t + l.price * l.qty, 0); const shipping = applied === "FREESHIP" ? 0 : ship.price; const off = applied && codes?.[applied] ? codes[applied].off(subtotal) : 0; const tax = Math.round((subtotal - off) * taxRate * 100) / 100; const total = subtotal - off + shipping + tax; const digits = card.number.replace(/\D/g, ""); const brand = brandOf(digits); const [mm, yy] = card.exp.split("/").map(Number); const errors: Record> = { contact: {}, address: {}, delivery: {}, payment: {} }; if (!/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(email.trim())) errors.contact.email = "Enter an email like you@example.com"; if (addr.name.trim().split(/\s+/).length < 2) errors.address.name = "First and last name"; if (addr.line1.trim().length < 4) errors.address.line1 = "Street and number"; if (!addr.city.trim()) errors.address.city = "Enter a city"; if (!/^\d{5}(-\d{4})?$/.test(addr.zip.trim())) errors.address.zip = "5 digits"; if (!luhn(digits)) errors.payment.number = digits.length < 13 ? "Enter the full card number" : "Check the card number"; if (!mm || mm > 12 || !yy || yy < 26 || (yy === 26 && mm < 11)) errors.payment.exp = card.exp.length < 5 ? "MM/YY" : "Expired"; if (!/^\d{3,4}$/.test(card.cvc)) errors.payment.cvc = "3–4 digits"; const ok = (id: SectionId) => Object.keys(errors[id]).length === 0; const finished = SECTIONS.filter((s) => done[s.id]).length; const save = (id: SectionId) => { setTried((t) => ({ ...t, [id]: true })); if (!ok(id)) return; const nextDone = { ...done, [id]: true }; setDone(nextDone); const next = SECTIONS.find((s) => !nextDone[s.id]); if (next) { setOpen(next.id); setTimeout(() => sectionRefs.current[next.id]?.focus({ preventScroll: true }), 280); } }; const pay = async () => { setTried((t) => ({ ...t, payment: true })); if (!SECTIONS.slice(0, 3).every((s) => done[s.id])) return; if (!ok("payment")) { setOpen("payment"); return; } setDone((d) => ({ ...d, payment: true })); setState("busy"); try { await Promise.all([onPay?.({ email, marketing, address: addr, delivery, card: { brand, last4: digits.slice(-4) }, code: applied, total }), new Promise((r) => setTimeout(r, 1300))]); setState("done"); } catch { setState("error"); } }; const apply = (e: React.FormEvent) => { e.preventDefault(); const c = code.trim().toUpperCase(); if (!codes?.[c]) return setCodeErr("That code isn’t valid."); setApplied(c); setCode(""); setCodeErr(""); }; const summaryOf = (id: SectionId) => id === "contact" ? email : id === "address" ? `${addr.name}, ${addr.line1}, ${addr.city} ${addr.zip}` : id === "delivery" ? `${ship.label} · ${ship.eta} · ${shipping ? money(shipping, currency) : "Free"}` : `${brand ?? "Card"} ···· ${digits.slice(-4)}`; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const field = cn("h-11 w-full rounded-xl border px-3.5 text-[16px] sm:text-[14px]", focus); const fs = (bad: boolean) => ({ background: p.field, borderColor: bad ? p.danger : p.line, color: p.title }); const input = (sec: SectionId, k: string, label: string, value: string, set: (v: string) => void, extra: { type?: string; ac?: string; mode?: "numeric" | "email"; ph?: string; span?: boolean } = {}) => { const err = tried[sec] ? errors[sec][k] : undefined; return (

{label} set(e.target.value)} aria-invalid={!!err} aria-describedby={err ? `${uid}-${k}-e` : undefined} className={field} style={fs(!!err)} /> {err && (

{err}

)}

); }; return (

Checkout

{state === "done" ? "Done" : `${finished} of ${SECTIONS.length} done`}

{state === "done" ? ( ✓

Thanks, {addr.name.split(" ")[0]}. Order placed.

{money(total, currency)} on {brand ?? "your card"} ···· {digits.slice(-4)}. {ship.label} delivery, {ship.eta.toLowerCase()}. Receipt sent to {email}.

) : (

{isOpen && (
{s.id === "contact" && (
{input("contact", "email", "Email", email, setEmail, { type: "email", ac: "email", mode: "email", ph: "you@example.com" })} setMarketing(e.target.checked)} className="h-4 w-4" style={{ accentColor: p.accent }} /> Email me about new drops
)} {s.id === "address" && (
{input("address", "name", "Full name", addr.name, (v) => setAddr((a) => ({ ...a, name: v })), { ac: "name", span: true })} {input("address", "line1", "Address", addr.line1, (v) => setAddr((a) => ({ ...a, line1: v })), { ac: "street-address", span: true })} {input("address", "city", "City", addr.city, (v) => setAddr((a) => ({ ...a, city: v })), { ac: "address-level2" })} {input("address", "zip", "ZIP code", addr.zip, (v) => setAddr((a) => ({ ...a, zip: v })), { ac: "postal-code", mode: "numeric" })}
)} {s.id === "delivery" && (
{deliveryOptions.map((d) => { const on = delivery === d.id; const price = applied === "FREESHIP" ? 0 : d.price; return ( ); })}
)} {s.id === "payment" && (

{input( "payment", "number", `Card number${brand ? ` · ${brand}` : ""}`, card.number, (v) => setCard((c) => ({ ...c, number: v .replace(/\D/g, "") .slice(0, 19) .replace(/(\d{4})(?=\d)/g, "$1 "), })), { ac: "cc-number", mode: "numeric", ph: "1234 5678 9012 3456" }, )}
{input( "payment", "exp", "Expiry", card.exp, (v) => { const d = v.replace(/\D/g, "").slice(0, 4); setCard((c) => ({ ...c, exp: d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d })); }, { ac: "cc-exp", mode: "numeric", ph: "MM/YY" }, )} {input("payment", "cvc", "CVC", card.cvc, (v) => setCard((c) => ({ ...c, cvc: v.replace(/\D/g, "").slice(0, 4) })), { ac: "cc-csc", mode: "numeric", ph: "123" })}
)} {s.id !== "payment" && ( )}
)}

)} {state !== "done" && ( <> {state === "error" && (

The payment didn’t go through. Check the card and try again.

)} )}

{/* Summary */}

Order summary

{/* eslint-disable-next-line @next/next/no-img-element -- plain img keeps the block framework-agnostic */} {l.qty > 1 && ( {l.qty} )} {l.name} {l.variant && ( {l.variant} )} {money(l.price * l.qty, currency)}

{applied ? (

{applied} {" "} {codes?.[applied]?.label}

) : ( )} {codeErr && (

{codeErr}

)}

{k}: {v}
Total: {money(total, currency)}

); } 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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L61",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"registry/new-york/accordion-checkout/accordion-checkout.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]