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:T5bc4,"use client"; import * as React from "react"; import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface CheckoutItem { id: string; title: string; variant: string; price: number; quantity: number; image?: string; } export interface CheckoutValue { email: string; name: string; address: string; city: string; postcode: string; country: string; shipping: string; code?: string; total: number; } export interface CheckoutFormBlockProps { items?: CheckoutItem[]; currency?: string; taxRate?: number; /** Discount codes the demo accepts: code → percent off. */ codes?: Record; /** Return a Promise; reject with an Error to show its message. Card details are never passed. */ onPlaceOrder?: (value: CheckoutValue) => void | Promise; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", title: "#FFFFFF", muted: "rgba(255,255,255,0.45)", body: "rgba(255,255,255,0.62)", line: "rgba(255,255,255,0.12)", card: "#141414", input: "#0F0F0F", photo: "#F1F1F1", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", error: "#FF6B57", ring: "rgba(255,255,255,0.5)" }, light: { bg: "#FFFFFF", title: "#111111", muted: "rgba(0,0,0,0.45)", body: "rgba(0,0,0,0.62)", line: "rgba(0,0,0,0.1)", card: "#F7F7F6", input: "#FFFFFF", photo: "#F1F1F1", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", error: "#D9480F", ring: "rgba(0,0,0,0.45)" }, }; const ITEMS: CheckoutItem[] = [ { id: "earbuds", title: "Wireless Earbuds", variant: "Black", price: 129, quantity: 1, image: "/demo/wireless-earbuds.webp" }, { id: "bottle", title: "Insulated Water Bottle", variant: "750 ml", price: 39, quantity: 2, image: "/demo/insulated-water-bottle.webp" }, ]; const SHIPPING = [ { id: "standard", label: "Standard", eta: "3–5 business days", price: 0 }, { id: "express", label: "Express", eta: "1–2 business days", price: 12 }, { id: "pickup", label: "Pick up in store", eta: "Ready tomorrow", price: 0 }, ]; const CODES = { WELCOME10: 10, DESK40: 40 }; const COUNTRIES = ["United States", "Canada", "United Kingdom", "Germany", "Netherlands", "Australia"]; function Money({ value, currency, reduce }: { value: number; currency: string; reduce: boolean }) { const mv = useMotionValue(value); const text = useTransform(mv, (v) => `${currency}${v.toFixed(2)}`); React.useEffect(() => { if (reduce) { mv.set(value); return; } const c = animate(mv, value, { duration: 0.45, ease: [0.22, 1, 0.36, 1] }); return () => c.stop(); }, [value, reduce, mv]); return {text}; } const fmtCard = (v: string) => v .replace(/\D/g, "") .slice(0, 16) .replace(/(.{4})/g, "$1 ") .trim(); const fmtExp = (v: string) => { const d = v.replace(/\D/g, "").slice(0, 4); return d.length > 2 ? `${d.slice(0, 2)} / ${d.slice(2)}` : d; }; const luhn = (num: string) => { const d = num.replace(/\D/g, ""); if (d.length < 13) return false; let sum = 0; for (let i = 0; i < d.length; i++) { let n = Number(d[d.length - 1 - i]); if (i % 2) { n *= 2; if (n > 9) n -= 9; } sum += n; } return sum % 10 === 0; }; export function CheckoutFormBlock({ items = ITEMS, currency = "$", taxRate = 0.08, codes = CODES, onPlaceOrder, theme = "dark", className }: CheckoutFormBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [f, setF] = React.useState({ email: "", name: "", address: "", city: "", postcode: "", country: COUNTRIES[0], card: "", exp: "", cvc: "", news: true }); const [touched, setTouched] = React.useState>({}); const [shipping, setShipping] = React.useState("standard"); const [codeInput, setCodeInput] = React.useState(""); const [code, setCode] = React.useState(null); const [codeError, setCodeError] = React.useState(null); const [status, setStatus] = React.useState<"idle" | "paying" | "done">("idle"); const [submitError, setSubmitError] = React.useState(null); const [showSummary, setShowSummary] = React.useState(false); const subtotal = items.reduce((a, i) => a + i.price * i.quantity, 0); const discount = code ? subtotal * ((codes[code] ?? 0) / 100) : 0; const ship = SHIPPING.find((s) => s.id === shipping)?.price ?? 0; const tax = (subtotal - discount) * taxRate; const total = subtotal - discount + ship + tax; const money = (n: number) => `${currency}${n.toFixed(2)}`; const set = (k: keyof typeof f, v: string | boolean) => setF((s) => ({ ...s, [k]: v })); const [mm, yy] = f.exp.split(" / ").map(Number); const errors: Record = { email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email) ? null : "Enter a valid email", name: f.name.trim().length > 1 ? null : "Enter your full name", address: shipping === "pickup" || f.address.trim().length > 4 ? null : "Enter a street address", city: shipping === "pickup" || f.city.trim() ? null : "Required", postcode: shipping === "pickup" || f.postcode.trim().length >= 3 ? null : "Required", card: luhn(f.card) ? null : "Check the card number", exp: mm >= 1 && mm <= 12 && yy >= 26 ? null : "Use MM / YY", cvc: /^\d{3,4}$/.test(f.cvc) ? null : "3–4 digits", }; const show = (k: string) => touched[k] && errors[k]; const valid = Object.values(errors).every((e) => !e); const applyCode = () => { const c = codeInput.trim().toUpperCase(); if (!c) return; if (codes[c]) { setCode(c); setCodeError(null); setCodeInput(""); } else setCodeError(`“${c}” isn't a valid code`); }; const submit = async (e: React.FormEvent) => { e.preventDefault(); setTouched(Object.fromEntries(Object.keys(errors).map((k) => [k, true]))); if (!valid || status === "paying") { const first = Object.keys(errors).find((k) => errors[k]); if (first) document.getElementById(`${uid}-${first}`)?.focus(); return; } setSubmitError(null); setStatus("paying"); try { await (onPlaceOrder ? onPlaceOrder({ email: f.email, name: f.name, address: f.address, city: f.city, postcode: f.postcode, country: f.country, shipping, code: code ?? undefined, total }) : new Promise((r) => setTimeout(r, reduce ? 0 : 1200))); setStatus("done"); } catch (err) { setStatus("idle"); setSubmitError(err instanceof Error ? err.message : "Payment failed. Try another card."); } }; const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.bg } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const label = "mb-1.5 block text-[12.5px] font-medium"; const field = (k: keyof typeof f & string, lbl: string, props: React.InputHTMLAttributes = {}, fmt?: (v: string) => string) => (

{lbl} set(k, fmt ? fmt(e.target.value) : e.target.value)} onBlur={() => setTouched((t) => ({ ...t, [k]: true }))} aria-invalid={!!show(k) || undefined} aria-describedby={show(k) ? `${uid}-${k}-e` : undefined} className="h-11 w-full rounded-xl border px-3.5 text-[14px] transition-colors outline-none focus-visible:ring-2" style={{ background: p.input, borderColor: show(k) ? p.error : p.line, color: p.title, ...ring }} {...props} /> {show(k) && ( {errors[k]} )}

); const section = (n: number, title: string, children: React.ReactNode) => (

{n} {title} {children}

); const summary = (where: string) => (

{/* eslint-disable-next-line @next/next/no-img-element */} {i.image && } {i.quantity} {i.title} {i.variant} {money(i.price * i.quantity)}

{code ? (

✓ {code} applied · {codes[code]}% off

) : (

Discount code { setCodeInput(e.target.value); setCodeError(null); }} onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), applyCode())} placeholder="Discount code" className="h-11 min-w-0 flex-1 rounded-xl border px-3.5 font-mono text-[13.5px] uppercase outline-none placeholder:font-sans placeholder:normal-case focus-visible:ring-2" style={{ background: p.input, borderColor: codeError ? p.error : p.line, color: p.title, ...ring }} />

)} {codeError && (

{codeError}

)}

{k as string}: {k === "Shipping" && v === 0 ? "Free" : (v as number) < 0 ? `−${money(-(v as number))}` : money(v as number)}
Total

); return (

{status === "done" ? (

Thanks, {f.name.split(" ")[0] || "you're all set"}!

Order #NL-48213 is confirmed. A receipt for {money(total)} is on its way to {f.email}.

) : ( {/* Mobile summary toggle */}

{showSummary && (

{summary("m")}

)}

{section( 1, "Contact",

{field("email", "Email", { type: "email", autoComplete: "email", placeholder: "you@example.com" })} set("news", e.target.checked)} className="h-4 w-4 cursor-pointer" style={{ accentColor: p.title }} /> Email me about new products and offers

, )} {section( 2, "Delivery",

{SHIPPING.map((s) => ( setShipping(s.id)} className="sr-only" /> {s.label} {s.price ? money(s.price) : "Free"} {s.eta} ))}

{field("name", "Full name", { autoComplete: "name", placeholder: "Alex Morgan" })} {shipping !== "pickup" && (

{field("address", "Street address", { autoComplete: "street-address", placeholder: "123 Market Street, Apt 4" })}

{field("city", "City", { autoComplete: "address-level2" })} {field("postcode", "Postcode", { autoComplete: "postal-code", inputMode: "text" })}

Country

)}

, )} {section( 3, "Payment",

Encrypted and never stored on our servers

{field("card", "Card number", { inputMode: "numeric", autoComplete: "cc-number", placeholder: "1234 1234 1234 1234" }, fmtCard)}

{field("exp", "Expiry", { inputMode: "numeric", autoComplete: "cc-exp", placeholder: "MM / YY" }, fmtExp)} {field("cvc", "CVC", { inputMode: "numeric", autoComplete: "cc-csc", placeholder: "123", maxLength: 4 }, (v) => v.replace(/\D/g, "").slice(0, 4))}

, )}

{submitError && (

{submitError}

)}

By placing your order you agree to our terms and 30-day return policy.

)}

); } export default CheckoutFormBlock; 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/checkout-form-block/checkout-form-block.tsx","content":"$63","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]