{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "upsell-subscription-only", "type": "registry:block", "title": "Subscription-only buy box", "description": "No one-time option: cadence, next charge date, how to cancel and the guarantee all sit above the button.", "author": "StoreKit ", "categories": [ "upsell", "supplements", "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/price.json", "https://storekit-eight.vercel.app/r/sk-analytics.json" ], "files": [ { "path": "upsell/upsell-subscription-only.tsx", "content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\"\nimport { CalendarClock, Check, RotateCcw, ShieldCheck, XCircle } from \"lucide-react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { Button } from \"@/components/storekit/ui/button\"\nimport { Price } from \"@/components/storekit/ui/price\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* A subscription-only buy box. There is no one-time option, so the terms\n do the persuading: price per delivery, cadence, when the next charge\n lands, how to cancel and the guarantee all sit above the button. The next\n charge date is computed after mount so server and client markup match. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\nconst RING = \"outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\"\n\nfunction arrows(e: React.KeyboardEvent, n: number, current: number, pick: (i: number) => void) {\n if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n e.preventDefault()\n pick((current + 1) % n)\n } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n e.preventDefault()\n pick((current - 1 + n) % n)\n }\n}\n\nexport function UpsellSubscriptionOnly({\n title = \"Daily Foundation\",\n price = 4900,\n servings = 30,\n cadences = [30, 60, 90],\n guaranteeDays = 30,\n cancelNote = \"Cancel online in two clicks from your account. No calls, no fees.\",\n onSubscribe,\n className,\n}: {\n title?: string\n /** Price per delivery in integer cents. */\n price?: number\n /** Servings per delivery, used for the per-serving line. */\n servings?: number\n cadences?: number[]\n guaranteeDays?: number\n cancelNote?: string\n onSubscribe?: (v: { everyDays: number; price: number }) => void\n className?: string\n}) {\n const reduce = useReducedMotion()\n const sk = useSkBlock(\"upsell\", \"upsell-subscription-only\")\n const [every, setEvery] = useState(cadences[0] ?? 30)\n const [nextDate, setNextDate] = useState(null)\n const [status, setStatus] = useState<\"idle\" | \"loading\" | \"added\">(\"idle\")\n const refs = useRef<(HTMLButtonElement | null)[]>([])\n const timers = useRef([])\n useEffect(() => () => timers.current.forEach((t) => window.clearTimeout(t)), [])\n\n useEffect(() => {\n const d = new Date()\n d.setDate(d.getDate() + every)\n setNextDate(d.toLocaleDateString(undefined, { month: \"short\", day: \"numeric\" }))\n }, [every])\n\n const choose = (i: number, focus = false) => {\n if (cadences[i] !== every) sk.emit(\"interact\", `every_${cadences[i]}d`, undefined)\n setEvery(cadences[i])\n if (focus) refs.current[i]?.focus()\n }\n\n const subscribe = () => {\n if (status !== \"idle\") return\n setStatus(\"loading\")\n sk.emit(\"convert\", \"subscribe\", price)\n timers.current.push(\n window.setTimeout(() => {\n setStatus(\"added\")\n onSubscribe?.({ everyDays: every, price })\n timers.current.push(window.setTimeout(() => setStatus(\"idle\"), 1200))\n }, 700)\n )\n }\n\n const terms = [\n { icon: CalendarClock, label: \"Next charge\", value: nextDate ? `${nextDate}, then every ${every} days` : `In ${every} days, then every ${every} days` },\n { icon: XCircle, label: \"Cancel\", value: cancelNote },\n { icon: RotateCcw, label: \"Change\", value: \"Skip a delivery, swap cadence or pause anytime.\" },\n ]\n\n return (\n
} className={cn(\"flex w-full flex-col gap-5 rounded-sk-card border border-sk-line bg-sk-card p-5 sm:p-6\", className)}>\n
\n Subscription\n
\n {title}\n \n
\n
\n\n
\n Deliver every\n
\n {cadences.map((c, i) => {\n const on = c === every\n return (\n {\n refs.current[i] = el\n }}\n type=\"button\"\n role=\"radio\"\n aria-checked={on}\n tabIndex={on ? 0 : -1}\n onClick={() => choose(i)}\n onKeyDown={(e) => arrows(e, cadences.length, cadences.indexOf(every), (n) => choose(n, true))}\n className={cn(\n \"h-11 rounded-sk-btn border text-sm font-medium tabular-nums transition-[border-color,background-color,color,transform] duration-200 active:scale-[0.97]\",\n on ? \"border-sk-accent bg-sk-accent/[0.08] text-sk-ink\" : \"border-sk-line text-sk-ink hover:border-sk-ink/30\",\n RING\n )}\n >\n {c} days\n \n )\n })}\n
\n
\n\n
\n {terms.map(({ icon: Icon, label, value }) => (\n
\n \n
\n
{label}
\n
{value}
\n
\n
\n ))}\n
\n\n
\n \n

\n {guaranteeDays}-day guarantee. If your first delivery is not right for you, we refund it in full. Keep the product.\n

\n
\n\n
\n \n

\n Charged {money(price)} today and every {every} days until you cancel.\n

\n
\n
\n )\n}\n", "type": "registry:block", "target": "components/storekit/upsell/upsell-subscription-only.tsx" } ], "meta": { "section": "upsell", "variant": "subscription-only", "niche": [ "supplements", "any" ], "commerce": [ "subscribe", "atc" ], "previewHeight": 620 } }