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:T6679,"use client" import * as React from "react" import { Check, Minus, Plus, Star, Truck } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { PriceTag } from "@/components/ecomcn/price-tag" import { VariantSwatches, type Variant, type VariantOption, type VariantSelection, type VariantSwatchesProps, } from "@/components/ecomcn/variant-swatches" import { cn } from "@/lib/utils" /* * The buy box: name, price, rating, variants, quantity, and an add-to-bag * button that carries the live total — "Add to bag — $840". * * * * or composed * * * } /> * * * * * Adding is optimistic: the button says "Added" the moment it is pressed, * and if your `onAddToBag` rejects, it rolls back — the button returns, and a * line under it says what went wrong. (The wishlist heart lives on the * product card, where it has room; the buy box gives its width to the button.) * Delivery is a date range worked out from business days and a cut-off * ("Arrives Thu 9 – Mon 13 Oct"), never "ships soon". The selected variant * lives in one context, so your own parts — a gallery, a sticky bar — read * the same pick through `useProductBuyBox()`. */ export interface BuyBoxVariant extends Variant { /** This variant's price, when it differs from the product's. */ price?: number compareAt?: number } export interface BuyBoxProduct { id: string name: string brand?: string price: number compareAt?: number rating?: number reviewCount?: number options?: VariantOption[] variants?: BuyBoxVariant[] } export interface BuyBoxLine { product: BuyBoxProduct /** Undefined for a product with no options. */ variant: BuyBoxVariant | undefined quantity: number } export interface BuyBoxDelivery { /** Business days from dispatch to the door, at the soonest and the latest. */ minDays: number maxDays: number /** Orders before this hour (0–23, the shopper's clock) dispatch the same day. */ cutoffHour?: number /** Before the dates: "Free delivery", "Express". */ label?: React.ReactNode /** Skip Saturdays and Sundays. Defaults to true. */ businessDaysOnly?: boolean } type AddState = "idle" | "adding" | "added" | "error" /** The same settle curve as the other ecomcn morphs: no bounce, an editorial ease. */ const MORPH = { duration: 0.45, ease: [0.2, 0, 0, 1] } as const const subscribeNothing = () => () => {} /** * The locale to format with. Yours when you pass one. Otherwise the * visitor's — but only once hydrated: the server cannot know it, and its HTML * ("Sep 21, 2026") must match the first client render, not the browser's * "21 Sept 2026". Until then, en-US. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } function useControllableState( value: T | undefined, defaultValue: T, onChange?: (next: T) => void ) { const [uncontrolled, setUncontrolled] = React.useState(defaultValue) const controlled = value !== undefined const set = React.useCallback( (next: T) => { if (!controlled) setUncontrolled(next) onChange?.(next) }, [controlled, onChange] ) return [controlled ? value : uncontrolled, set] as const } /* ─── context ──────────────────────────────────────────────────────────── */ export interface ProductBuyBoxContextValue { product: BuyBoxProduct selection: VariantSelection setSelection: (selection: VariantSelection) => void /** The variant the picks point at; undefined until every option has one. */ variant: BuyBoxVariant | undefined /** The first option still to pick — "Size" — or undefined. */ missing: string | undefined soldOut: boolean quantity: number setQuantity: (quantity: number) => void /** The most the shopper can add: the variant's stock, capped at `maxQuantity`. */ maxQuantity: number unitPrice: number compareAt?: number /** Unit price × quantity. */ total: number /** The price in the store's currency and the shopper's locale. */ formatMoney: (amount: number) => string currency: string /** The locale formatting uses: yours, or the visitor's once hydrated. */ locale?: string addState: AddState /** Adds, optimistically; or asks for the missing option; or notifies for a sold-out one. */ addToBag: () => void /** What the line under the button says, or null. */ notice: { tone: "hint" | "error"; text: string } | null canNotify: boolean delivery?: BuyBoxDelivery reviewsHref: string loading: boolean } const ProductBuyBoxContext = React.createContext(null) export function useProductBuyBox() { const context = React.useContext(ProductBuyBoxContext) if (!context) { throw new Error("useProductBuyBox must be used within .") } return context } /* ─── root ─────────────────────────────────────────────────────────────── */ export interface ProductBuyBoxProps extends Omit, "defaultValue" | "onChange"> { product: BuyBoxProduct currency?: string locale?: string /** The picks, by option name: `{ Colour: "Tan", Size: "41" }`. */ value?: VariantSelection defaultValue?: VariantSelection onValueChange?: (value: VariantSelection) => void quantity?: number defaultQuantity?: number onQuantityChange?: (quantity: number) => void /** The most one line can hold, before stock. Defaults to 10. */ maxQuantity?: number /** * Add the line to your bag. The button shows "Added" at once; return a * promise, and if it rejects the button rolls back and says so. */ onAddToBag?: (line: BuyBoxLine) => void | Promise /** A sold-out pick turns the button into "Notify me", which calls this. */ onNotify?: (line: BuyBoxLine) => void delivery?: BuyBoxDelivery /** Where the rating links to. Defaults to "#reviews". */ reviewsHref?: string /** The product name's heading level. A product page's name is its h1. */ headingLevel?: "h1" | "h2" loading?: boolean } export function ProductBuyBox({ product, currency = "USD", locale: localeProp, value: valueProp, defaultValue = {}, onValueChange, quantity: quantityProp, defaultQuantity = 1, onQuantityChange, maxQuantity: maxQuantityProp = 10, onAddToBag, onNotify, delivery, reviewsHref = "#reviews", headingLevel = "h1", loading = false, className, children, ...props }: ProductBuyBoxProps) { const locale = useFormatLocale(localeProp) const root = React.useRef(null) const [selection, setSelectionState] = useControllableState(valueProp, defaultValue, onValueChange) const [quantity, setQuantityState] = useControllableState(quantityProp, defaultQuantity, onQuantityChange) const [addState, setAddState] = React.useState("idle") const [notice, setNotice] = React.useState(null) const resetTimer = React.useRef(undefined) React.useEffect(() => () => window.clearTimeout(resetTimer.current), []) const options = React.useMemo(() => product.options ?? [], [product.options]) // A one-value option ("One size") counts as picked. const resolved = React.useMemo(() => { const filled: VariantSelection = {} for (const option of options) { if (option.values.length === 1) { const only = option.values[0] filled[option.name] = typeof only === "string" ? only : only.value } } return { ...filled, ...selection } }, [options, selection]) const missing = options.find((o) => resolved[o.name] === undefined)?.name const variant = missing ? undefined : product.variants?.find((v) => options.every((o) => v.options[o.name] === resolved[o.name])) const soldOut = !missing && options.length > 0 && (product.variants ? !variant || variant.stock === 0 : false) const stockCap = variant?.stock && variant.stock > 0 ? variant.stock : Infinity const maxQuantity = Math.max(1, Math.min(maxQuantityProp, stockCap)) const clampedQuantity = Math.min(Math.max(1, quantity), maxQuantity) const unitPrice = variant?.price ?? product.price const compareAt = variant?.price !== undefined ? variant.compareAt : (variant?.compareAt ?? product.compareAt) const formatMoney = React.useMemo(() => { const whole = new Intl.NumberFormat(locale, { style: "currency", currency, maximumFractionDigits: 0 }) const cents = new Intl.NumberFormat(locale, { style: "currency", currency }) return (amount: number) => (Number.isInteger(amount) ? whole : cents).format(amount) }, [locale, currency]) const setSelection = React.useCallback( (next: VariantSelection) => { setNotice(null) setAddState((state) => (state === "error" ? "idle" : state)) setSelectionState(next) }, [setSelectionState] ) const addToBag = React.useCallback(() => { if (addState === "adding") return if (missing) { setNotice({ tone: "hint", text: `Choose a ${missing.toLowerCase()} first.` }) // Take the shopper to the option they skipped. root.current ?.querySelector( `[data-slot="variant-swatches-option"][data-option="${CSS.escape(missing)}"] [role="radio"][tabindex="0"]` ) ?.focus() return } const line: BuyBoxLine = { product, variant, quantity: clampedQuantity } if (soldOut) { onNotify?.(line) return } window.clearTimeout(resetTimer.current) setNotice(null) // Optimistic: "Added" now, settled or rolled back when the promise is. setAddState("adding") Promise.resolve() .then(() => onAddToBag?.(line)) .then( () => { setAddState("added") resetTimer.current = window.setTimeout(() => setAddState("idle"), 2400) }, () => { setAddState("error") setNotice({ tone: "error", text: "That didn't reach your bag. Try again." }) } ) }, [addState, missing, product, variant, clampedQuantity, soldOut, onNotify, onAddToBag]) const context = React.useMemo( () => ({ product, selection, setSelection, variant, missing, soldOut, quantity: clampedQuantity, setQuantity: (n) => setQuantityState(Math.min(Math.max(1, Math.round(n) || 1), maxQuantity)), maxQuantity, unitPrice, compareAt, total: unitPrice * clampedQuantity, formatMoney, currency, locale, addState, addToBag, notice, canNotify: Boolean(onNotify), delivery, reviewsHref, loading, }), [product, selection, setSelection, variant, missing, soldOut, clampedQuantity, setQuantityState, maxQuantity, unitPrice, compareAt, formatMoney, currency, locale, addState, addToBag, notice, onNotify, delivery, reviewsHref, loading] ) return (

{children ?? ( <>

)}

) } /* ─── parts ────────────────────────────────────────────────────────────── */ /** Brand, name, and the rating — a link down to the reviews. */ export function ProductBuyBoxHeader({ headingLevel = "h1", className, ...props }: { headingLevel?: "h1" | "h2" } & React.HTMLAttributes) { const { product, reviewsHref, locale, loading } = useProductBuyBox() const Heading = headingLevel if (loading) { return (

) } const score = product.rating return (

{product.brand ? (

{product.brand}

) : null} {product.name} {score !== undefined ? ( {Array.from({ length: 5 }, (_, i) => ( ))} {Array.from({ length: 5 }, (_, i) => ( ))} {new Intl.NumberFormat(locale, { minimumFractionDigits: 1, maximumFractionDigits: 1 }).format(score)} {product.reviewCount !== undefined ? ( <> ({new Intl.NumberFormat(locale).format(product.reviewCount)} reviews) ) : null} , rated out of 5. Read the reviews ) : null}

) } /** The price — the variant's, when it has its own — fading over when it changes. */ export function ProductBuyBoxPrice({ className, ...props }: React.HTMLAttributes) { const { unitPrice, compareAt, currency, locale, loading } = useProductBuyBox() const reduce = useReducedMotion() if (loading) return return (

) } /** * The product's options, on variant-swatches: stock-aware swatches and size * grid, controlled by the buy box. Any other VariantSwatches prop passes * through — `sizeGuide`, `messages`, `lowStockThreshold`. */ export function ProductBuyBoxVariants( props: Omit ) { const { product, selection, setSelection, loading } = useProductBuyBox() if (!product.options?.length) return null return ( ) } /** Quantity and add to bag on one line; the notice under them. */ export function ProductBuyBoxActions({ className, children, ...props }: React.HTMLAttributes) { return (

{children ?? ( <> )}

) } /** − [ 2 ] + as one ruled block. Typing works too; it settles on blur or Enter. */ export function ProductBuyBoxQuantity({ className, ...props }: React.HTMLAttributes) { const { quantity, setQuantity, maxQuantity, loading, soldOut } = useProductBuyBox() const [draft, setDraft] = React.useState(null) const commit = () => { if (draft !== null) setQuantity(Number.parseInt(draft, 10)) setDraft(null) } const off = loading || soldOut return (

setDraft(event.target.value.replace(/\D/g, "").slice(0, 3))} onBlur={commit} onKeyDown={(event) => { if (event.key === "Enter") commit() }} className="h-full w-10 rounded-none border-0 px-0 text-center tabular-nums shadow-none focus-visible:ring-2 focus-visible:ring-inset" />

) } /** * The button carries the total: "Add to bag — $840". It asks for a missing * size rather than greying out, becomes "Notify me" when the pick is sold * out, and morphs its label between states with Motion. */ // className only: the Button is your primitive, and its other props differ // between Radix and Base UI. export function ProductBuyBoxAddToBag({ className }: { className?: string }) { const { total, formatMoney, missing, soldOut, canNotify, addState, addToBag, loading } = useProductBuyBox() const reduce = useReducedMotion() const label = addState === "adding" || addState === "added" ? { key: "added", text: "Added to bag", icon: true } : missing ? { key: "missing", text: `Select a ${missing.toLowerCase()}`, icon: false } : soldOut ? { key: "sold-out", text: canNotify ? "Notify me" : "Sold out", icon: false } : { key: `add-${total}`, text: `Add to bag — ${formatMoney(total)}`, icon: false } return ( ) } /** * The line under the button: which option to pick, or what failed. A status * region that is always in the page, so each new line is read out; the line * grows open to its height. */ export function ProductBuyBoxNotice({ className, ...props }: Omit, "children">) { const { notice } = useProductBuyBox() const reduce = useReducedMotion() return (

{notice ? (

{notice.text}

) : null}

) } /* ─── delivery ─────────────────────────────────────────────────────────── */ const subscribeMinute = (onChange: () => void) => { const timer = window.setInterval(onChange, 30_000) return () => window.clearInterval(timer) } const currentMinute = () => Math.floor(Date.now() / 60_000) const serverMinute = () => null /** `days` business (or calendar) days after `from`. */ function addDays(from: Date, days: number, businessOnly: boolean) { const date = new Date(from) let left = days while (left > 0) { date.setDate(date.getDate() + 1) const day = date.getDay() if (!businessOnly || (day !== 0 && day !== 6)) left -= 1 } return date } /** * When it arrives, as a date range — "Arrives Thu 9 – Mon 13 Oct" — with a * countdown to the dispatch cut-off. Worked out on the shopper's clock after * hydration (the server cannot know their time zone), with a placeholder of * the same height until then. */ export function ProductBuyBoxDelivery({ className, ...props }: React.HTMLAttributes) { const { delivery, locale, soldOut } = useProductBuyBox() const minute = React.useSyncExternalStore(subscribeMinute, currentMinute, serverMinute) if (!delivery || soldOut) return null let text: React.ReactNode = null let countdown: string | null = null if (minute !== null) { const now = new Date(minute * 60_000) const businessOnly = delivery.businessDaysOnly ?? true const cutoff = delivery.cutoffHour // Past the cut-off, or on a day nothing dispatches: it goes out next working day. let dispatch = new Date(now) const closed = businessOnly && (now.getDay() === 0 || now.getDay() === 6) if (closed || (cutoff !== undefined && now.getHours() >= cutoff)) { dispatch = addDays(now, 1, businessOnly) } else if (cutoff !== undefined) { const left = cutoff * 60 - (now.getHours() * 60 + now.getMinutes()) countdown = `${Math.floor(left / 60)}h ${String(left % 60).padStart(2, "0")}m` } const first = addDays(dispatch, delivery.minDays, businessOnly) const last = addDays(dispatch, delivery.maxDays, businessOnly) const format = new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", month: "short" }) text = delivery.minDays === delivery.maxDays ? format.format(first) : format.formatRange(first, last) } return (

{text === null ? ( ) : (

{delivery.label ? <>{delivery.label} · : null} Arrives {text} {countdown ? ( Order within {countdown} for dispatch today ) : null}

)}

) } 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","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["button","input","@ecomcn/price-tag","@ecomcn/variant-swatches"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/product-buy-box/product-buy-box.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/product-buy-box.tsx"}],"className":"h-[70svh] min-h-80"}]]}]