62: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"] 63: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"] 64:T7160,"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 CheckoutLine { name: string; variant?: string; price: number; qty: number; image: string; } export interface CheckoutResult { contact: { email: string; name: string; address: string; city: string; zip: string; country: string }; delivery: string; /** Only the last four digits ever leave the form. */ card: { last4: string; brand: string | null; save: boolean }; total: number; } export interface MultiStepCheckoutBlockProps { lines?: CheckoutLine[]; currency?: string; /** Sales tax as a fraction of the subtotal (0.08 = 8%). */ taxRate?: number; deliveryOptions?: { id: string; label: string; eta: string; price: number }[]; /** Resolve to show success; reject to show an error on the review step. */ onComplete?: (result: CheckoutResult) => Promise | void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", card: "#141414", 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", 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: CheckoutLine[] = [ { name: "Minimal Watch", variant: "Black · 38 mm", price: 79, qty: 1, image: "/demo/minimal-watch.webp" }, { name: "Laptop Stand", variant: "Silver", price: 49, qty: 1, image: "/demo/laptop-stand.webp" }, ]; const DELIVERY = [ { id: "standard", label: "Standard", eta: "Thu, Nov 12 – Mon, Nov 16", price: 0 }, { id: "express", label: "Express", eta: "Tomorrow, Fri Nov 6", price: 14 }, { id: "pickup", label: "Pick up in store", eta: "Ready Sat · 120 Market St", price: 0 }, ]; const STEPS = ["Contact", "Delivery", "Payment", "Review"]; const COUNTRIES = ["United States", "Canada", "United Kingdom"]; const ZIP: Record = { "United States": /^\d{5}(-\d{4})?$/, Canada: /^[A-Za-z]\d[A-Za-z] ?\d[A-Za-z]\d$/, "United Kingdom": /^[A-Za-z]{1,2}\d[A-Za-z\d]? ?\d[A-Za-z]{2}$/ }; 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 MultiStepCheckoutBlock({ lines = LINES, currency = "$", taxRate = 0.08, deliveryOptions = DELIVERY, onComplete, theme = "dark", className }: MultiStepCheckoutBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [step, setStep] = React.useState(0); const [reached, setReached] = React.useState(0); const [dir, setDir] = React.useState(1); const [tried, setTried] = React.useState([false, false, false, false]); const [c, setC] = React.useState({ email: "maya.chen@example.com", name: "Maya Chen", address: "418 Alder St", city: "Portland", zip: "", country: "United States" }); const [delivery, setDelivery] = React.useState(deliveryOptions[0].id); const [card, setCard] = React.useState({ number: "", exp: "", cvc: "", name: "", save: true }); const [state, setState] = React.useState<"form" | "busy" | "done" | "error">("form"); const [summaryOpen, setSummaryOpen] = React.useState(false); const headRef = React.useRef(null); const subtotal = lines.reduce((t, l) => t + l.price * l.qty, 0); const ship = deliveryOptions.find((d) => d.id === delivery)!; const tax = Math.round(subtotal * taxRate * 100) / 100; const total = subtotal + ship.price + tax; const digits = card.number.replace(/\D/g, ""); const brand = brandOf(digits); const contactErr: Partial> = {}; if (!/^[^\s@]+@[^\s@]+\.[a-z]{2,}$/i.test(c.email.trim())) contactErr.email = "Enter an email like you@example.com"; if (c.name.trim().split(/\s+/).length < 2) contactErr.name = "First and last name"; if (c.address.trim().length < 4) contactErr.address = "Street and number"; if (!c.city.trim()) contactErr.city = "Enter a city"; if (!ZIP[c.country].test(c.zip.trim())) contactErr.zip = c.country === "United States" ? "5 digits, like 97209" : c.country === "Canada" ? "Like K1A 0B1" : "Like E2 7DJ"; const [mm, yy] = card.exp.split("/").map(Number); const cardErr: Partial> = {}; if (!luhn(digits)) cardErr.number = digits.length < 13 ? "Enter the full card number" : "Check the card number"; if (!mm || mm > 12 || !yy || yy < 26 || (yy === 26 && mm < 11)) cardErr.exp = card.exp.length < 5 ? "MM/YY" : "This card has expired"; if (!/^\d{3,4}$/.test(card.cvc)) cardErr.cvc = "3 or 4 digits"; if (card.name.trim().length < 2) cardErr.name = "As printed on the card"; const valid = [Object.keys(contactErr).length === 0, true, Object.keys(cardErr).length === 0, true]; const go = (to: number) => { setDir(to > step ? 1 : -1); setStep(to); setReached((r) => Math.max(r, to)); setTimeout(() => headRef.current?.focus({ preventScroll: true }), 260); }; const next = async () => { setTried((t) => t.map((x, i) => (i === step ? true : x))); if (!valid[step]) return; if (step < 3) return go(step + 1); setState("busy"); try { await Promise.all([onComplete?.({ contact: c, delivery, card: { last4: digits.slice(-4), brand, save: card.save }, total }), new Promise((r) => setTimeout(r, 1400))]); setState("done"); } catch { setState("error"); } }; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const fieldCls = cn("h-11 w-full rounded-xl border px-3.5 text-[16px] sm:text-[14px]", focus); const fieldStyle = (bad: boolean) => ({ background: p.field, borderColor: bad ? p.danger : p.line, color: p.title }); return (

Checkout

{/* Stepper */}

{i < STEPS.length - 1 && ( )}

{state === "done" ? ( ✓

Order NL-20419 placed

{money(total, currency)} charged to {brand ?? "card"} ···· {digits.slice(-4)}. {ship.label}: {ship.eta}. A receipt is on its way to {c.email}.

) : (

{["Where should we send it?", "How fast?", "Pay securely", "Check and place your order"][step]}

{step === 0 && (

{( [ ["email", "Email", "email", true], ["name", "Full name", "name", true], ["address", "Address", "street-address", true], ["city", "City", "address-level2", false], ["zip", c.country === "United States" ? "ZIP code" : "Postcode", "postal-code", false], ] as const ).map(([k, label, ac, span]) => { const err = tried[0] ? contactErr[k] : undefined; return (

{label} setC((v) => ({ ...v, [k]: e.target.value }))} aria-invalid={!!err} aria-describedby={err ? `${uid}-${k}-e` : undefined} className={fieldCls} style={fieldStyle(!!err)} /> {err && (

{err}

)}

); })}

Country

)} {step === 1 && (

{deliveryOptions.map((d) => { const on = delivery === d.id; return ( ); })}

)} {step === 2 && (

Card number

setCard((v) => ({ ...v, number: e.target.value .replace(/\D/g, "") .slice(0, 19) .replace(/(\d{4})(?=\d)/g, "$1 "), })) } aria-invalid={tried[2] && !!cardErr.number} className={cn(fieldCls, "pr-24 font-mono tracking-[0.04em]")} style={fieldStyle(tried[2] && !!cardErr.number)} /> {brand && ( {brand} )}

{tried[2] && cardErr.number && (

{cardErr.number}

)}

{( [ [ "exp", "Expiry", "cc-exp", "MM/YY", (v: string) => { const d = v.replace(/\D/g, "").slice(0, 4); return d.length > 2 ? `${d.slice(0, 2)}/${d.slice(2)}` : d; }, ], ["cvc", "CVC", "cc-csc", "123", (v: string) => v.replace(/\D/g, "").slice(0, 4)], ] as const ).map(([k, label, ac, ph, fmt]) => (

{label} setCard((v) => ({ ...v, [k]: fmt(e.target.value) }))} aria-invalid={tried[2] && !!cardErr[k]} className={fieldCls} style={fieldStyle(tried[2] && !!cardErr[k])} /> {tried[2] && cardErr[k] && (

{cardErr[k]}

)}

))}

Name on card setCard((v) => ({ ...v, name: e.target.value }))} className={fieldCls} style={fieldStyle(tried[2] && !!cardErr.name)} /> {tried[2] && cardErr.name && (

{cardErr.name}

)}

setCard((v) => ({ ...v, save: e.target.checked }))} className="h-4 w-4" style={{ accentColor: p.accent }} /> Save this card for next time

)} {step === 3 && (

{k}: {v}

)} )}

{state !== "done" && (

{step > 0 && ( )}

)}

{/* Summary */}

Order summary

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

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

); } 61:["$","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"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/multi-step-checkout-block/multi-step-checkout-block.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]