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:T35e4,"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 UpsellProduct { id: string; title: string; price: number; image?: string; specs: Record; tag?: string; } export interface CrossSellProduct { id: string; title: string; note: string; price: number; image?: string; } export interface UpsellCrossSellBlockProps { current?: UpsellProduct; upgrade?: UpsellProduct; crossSells?: CrossSellProduct[]; /** Percent off the cross-sells when bought together with the main product. */ bundleDiscount?: number; currency?: string; onAddToCart?: (items: { id: string; price: number }[]) => 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", cardOn: "#1C1C1C", photo: "#F1F1F1", buttonBg: "#FFFFFF", buttonText: "#111111", accent: "#7CDE6A", 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", cardOn: "#FFFFFF", photo: "#F1F1F1", buttonBg: "#111111", buttonText: "#FFFFFF", accent: "#2F9E44", ring: "rgba(0,0,0,0.45)" }, }; const CURRENT: UpsellProduct = { id: "earbuds", title: "Wireless Earbuds", price: 129, image: "/demo/wireless-earbuds.webp", specs: { "Noise cancelling": "Active", Battery: "8h (30h case)", Comfort: "In-ear", Sound: "10 mm drivers", Calls: "3 mics" } }; const UPGRADE: UpsellProduct = { id: "headphones", title: "Noise Cancelling Headphones", price: 199, image: "/demo/blocks/product-list/headphones.webp", tag: "Most chosen upgrade", specs: { "Noise cancelling": "Adaptive", Battery: "40h", Comfort: "Over-ear memory foam", Sound: "40 mm drivers", Calls: "6 mics" } }; const CROSS: CrossSellProduct[] = [ { id: "case", title: "Silicone case cover", note: "Drop protection for the charging case", price: 15, image: "/demo/wireless-earbuds.webp" }, { id: "stand", title: "Laptop Stand", note: "Raise your screen for calls", price: 49, image: "/demo/laptop-stand.webp" }, { id: "bottle", title: "Insulated Water Bottle", note: "For long work or gym sessions", price: 39, image: "/demo/insulated-water-bottle.webp" }, ]; 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}; } export function UpsellCrossSellBlock({ current = CURRENT, upgrade = UPGRADE, crossSells = CROSS, bundleDiscount = 15, currency = "$", onAddToCart, theme = "dark", className }: UpsellCrossSellBlockProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [choice, setChoice] = React.useState<"current" | "upgrade">("current"); const [extras, setExtras] = React.useState([crossSells[0]?.id].filter(Boolean) as string[]); const [state, setState] = React.useState<"idle" | "loading" | "added">("idle"); const main = choice === "upgrade" ? upgrade : current; const picked = crossSells.filter((c) => extras.includes(c.id)); const factor = 1 - bundleDiscount / 100; const extrasTotal = picked.reduce((a, c) => a + c.price * factor, 0); const total = main.price + extrasTotal; const saved = picked.reduce((a, c) => a + c.price * (1 - factor), 0); const money = (n: number) => `${currency}${n.toFixed(2)}`; const specKeys = Object.keys(current.specs); React.useEffect(() => { if (state !== "added") return; const t = setTimeout(() => setState("idle"), 2400); return () => clearTimeout(t); }, [state]); const add = async () => { if (state === "loading") return; setState("loading"); try { const items = [{ id: main.id, price: main.price }, ...picked.map((c) => ({ id: c.id, price: +(c.price * factor).toFixed(2) }))]; await (onAddToCart ? onAddToCart(items) : new Promise((r) => setTimeout(r, reduce ? 0 : 700))); setState("added"); } catch { setState("idle"); } }; 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 option = (key: "current" | "upgrade", prod: UpsellProduct) => { const on = choice === key; return ( setChoice(key)} className="sr-only" /> {prod.tag && ( {prod.tag} )} {/* eslint-disable-next-line @next/next/no-img-element */} {prod.image &&

} {on && ( )} {prod.title} {money(prod.price)} {key === "upgrade" && ( +{money(upgrade.price - current.price)} )} ); }; return (

Great pick. Make it even better?

{/* Upsell */}

Upgrade

{option("current", current)} {option("upgrade", upgrade)}

{specKeys.map((k) => ( ))}

Compare {current.title} and {upgrade.title}
{k}	{current.specs[k]}	{upgrade.specs[k]}

{/* Cross-sell */}

Complete it

{bundleDiscount}% off together

setExtras((x) => (on ? x.filter((i) => i !== c.id) : [...x, c.id]))} className="h-4 w-4 shrink-0 cursor-pointer" style={{ accentColor: p.title }} /> {/* eslint-disable-next-line @next/next/no-img-element */} {c.image && } {c.title} {c.note} {money(c.price * factor)} {money(c.price)}

{1 + picked.length} {picked.length ? "items" : "item"}

{saved > 0 && ( Bundle saves you {money(saved)} )}

); } export default UpsellCrossSellBlock; 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/upsell-cross-sell-block/upsell-cross-sell-block.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]