{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "checkout-layout", "type": "registry:block", "title": "Single-page checkout", "description": "Numbered Contact, Address, Method and Payment sections that collapse to summaries with Edit, beside a sticky order summary.", "author": "StoreKit ", "categories": [ "checkout", "any" ], "dependencies": [ "motion", "lucide-react" ], "registryDependencies": [ "https://storekit-eight.vercel.app/r/cn.json", "https://storekit-eight.vercel.app/r/button.json", "https://storekit-eight.vercel.app/r/input.json", "https://storekit-eight.vercel.app/r/product-image.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "checkout/checkout-layout.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { Check, Lock } from \"lucide-react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { Button } from \"@/components/storekit/ui/button\"\nimport { Input } from \"@/components/storekit/ui/input\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Single-page checkout shell. Four numbered sections; the current one is\n open, finished ones collapse to a one-line summary with an Edit link. The\n order summary sits in a sticky right column on desktop. Replace the\n section bodies with your real forms. */\n\ntype Line = { id: string; title: string; variant?: string; price: number; image: string; quantity: number }\n\nconst SAMPLE: Line[] = [\n { id: \"daily-greens\", title: \"Daily Greens\", variant: \"30 servings\", price: 4900, image: \"/brands/morrow/greens.webp\", quantity: 2 },\n { id: \"electrolytes\", title: \"Electrolytes\", variant: \"30 sticks\", price: 3200, image: \"/brands/morrow/electrolytes.webp\", quantity: 1 },\n]\n\nconst METHODS = [\n { id: \"standard\", label: \"Standard\", note: \"3 to 5 business days\", price: 0 },\n { id: \"express\", label: \"Express\", note: \"1 to 2 business days\", price: 1200 },\n { id: \"overnight\", label: \"Overnight\", note: \"Next business day by 10am\", price: 2800 },\n]\n\nconst STEPS = [\"Contact\", \"Shipping address\", \"Shipping method\", \"Payment\"] as const\n\ntype Form = { email: string; name: string; address: string; city: string; zip: string; method: string; card: string; exp: string; cvc: string }\n\nconst DEFAULTS: Form = {\n email: \"m.rahman@example.com\",\n name: \"Maya Rahman\",\n address: \"12 Elmwood Avenue\",\n city: \"Buffalo, NY\",\n zip: \"14201\",\n method: \"standard\",\n card: \"4242 4242 4242 4242\",\n exp: \"08 / 28\",\n cvc: \"123\",\n}\n\nexport function CheckoutLayout({\n items = SAMPLE,\n brandName = \"Morrow\",\n taxRate = 0.08,\n defaultValues = DEFAULTS,\n onPlaceOrder,\n className,\n}: {\n items?: Line[]\n brandName?: string\n taxRate?: number\n defaultValues?: Form\n onPlaceOrder?: (form: Form) => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n const sk = useSkBlock(\"checkout\", \"checkout-layout\")\n const [step, setStep] = React.useState(1)\n const [form, setForm] = React.useState
(defaultValues)\n const [placing, setPlacing] = React.useState(false)\n const [placed, setPlaced] = React.useState(false)\n // Hand focus to the newly opened step so keyboard and screen reader users\n // are not dropped on when the Continue button unmounts.\n const headings = React.useRef<(HTMLHeadingElement | null)[]>([])\n const stepMounted = React.useRef(false)\n React.useEffect(() => {\n if (!stepMounted.current) {\n stepMounted.current = true\n return\n }\n const h = headings.current[step]\n if (!h) return\n h.focus({ preventScroll: true })\n h.scrollIntoView({ block: \"nearest\", behavior: reduce ? \"auto\" : \"smooth\" })\n }, [step, reduce])\n const set = (k: keyof Form) => (e: React.ChangeEvent) => setForm((f) => ({ ...f, [k]: e.target.value }))\n\n const method = METHODS.find((m) => m.id === form.method) ?? METHODS[0]\n const subtotal = items.reduce((n, l) => n + l.price * l.quantity, 0)\n const tax = Math.round(subtotal * taxRate)\n const total = subtotal + method.price + tax\n\n const summaries = [\n form.email,\n `${form.name}, ${form.address}, ${form.city} ${form.zip}`,\n `${method.label}, ${method.price ? money(method.price) : \"Free\"}`,\n `Card ending ${form.card.replace(/\\s/g, \"\").slice(-4)}`,\n ]\n\n const place = () => {\n sk.emit(\"convert\", \"place_order\", total)\n setPlacing(true)\n window.setTimeout(() => {\n setPlacing(false)\n setPlaced(true)\n setStep(4)\n onPlaceOrder?.(form)\n }, 1000)\n }\n\n const body = (i: number) => {\n switch (i) {\n case 0:\n return \n case 1:\n return (\n
\n
\n
\n \n \n
\n )\n case 2:\n return (\n
\n Shipping method\n {METHODS.map((m) => (\n \n setForm((f) => ({ ...f, method: m.id }))} />\n \n {form.method === m.id ? : null}\n \n \n {m.label} {m.note}\n \n {m.price ? money(m.price) : \"Free\"}\n \n ))}\n
\n )\n default:\n return (\n
\n
\n \n \n
\n )\n }\n }\n\n const ease: [number, number, number, number] = [0.16, 1, 0.3, 1]\n\n return (\n
} {...sk.attrs} className={cn(\"mx-auto grid w-full max-w-6xl grid-cols-1 gap-8 px-4 py-10 sm:px-8 lg:grid-cols-[minmax(0,1fr)_380px] lg:gap-12\", className)}>\n
\n

{brandName}

\n

Checkout

\n\n \n {placed ? (\n \n \n Order placed. A confirmation is on its way to {form.email}.\n \n ) : null}\n \n\n
    \n {STEPS.map((label, i) => {\n const current = i === step && !placed\n const complete = i < step || placed\n return (\n
  1. \n
    \n \n {complete ? : String(i + 1).padStart(2, \"0\")}\n \n
    \n

    { headings.current[i] = el }} tabIndex={-1} className={cn(\"text-[15px] font-medium outline-none\", !current && !complete && \"text-sk-muted\")}>{label}

    \n {complete ?

    {summaries[i]}

    : null}\n
    \n {complete && !placed ? (\n setStep(i)}\n aria-label={`Edit ${label.toLowerCase()}`}\n className=\"-mr-2 min-h-11 rounded-sk-btn px-3 text-sm font-medium text-sk-accent underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sk-accent\"\n >\n Edit\n \n ) : null}\n
    \n \n {current ? (\n \n
    \n {body(i)}\n {i < STEPS.length - 1 ? (\n \n ) : (\n \n )}\n
    \n \n ) : null}\n     \n
    2. \n )\n })}\n
\n
\n\n \n
\n )\n}\n", "type": "registry:block", "target": "components/storekit/checkout/checkout-layout.tsx" } ], "meta": { "section": "checkout", "variant": "single-page", "niche": [ "any" ], "commerce": [ "checkout", "shipping-method", "payment", "order-summary" ], "previewHeight": 720 } }