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:T2776,"use client" import * as React from "react" import { MotionConfig, motion, useReducedMotion } from "motion/react" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Skeleton } from "@/components/ui/skeleton" import { cn } from "@/lib/utils" /* * How it gets there: one ruled list of delivery methods, each with the * dates it would arrive and what it costs. * * * * Arrival is a date range — "Thu 16 – Mon 20 Oct" — worked out from * business days and a dispatch cut-off on the shopper's own clock, after * hydration (the server can't know their time zone); until then each row * holds a placeholder of the same height. Prices sit right-aligned in * tabular figures, and a free method says "Free" in words. The heavy rule * slides to the chosen method (Motion; a fade under reduced motion). */ export interface DeliveryOption { id: string /** "Standard", "Express", "Collect in store". */ label: string /** 0 shows "Free". */ price: number /** 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 /** Skip Saturdays and Sundays. Defaults to true. */ businessDaysOnly?: boolean /** "Tracked, signed for", or a collection point's address. */ description?: React.ReactNode /** False when it can't reach this address. */ available?: boolean /** Why, in words: "Not available for PO boxes". */ unavailableReason?: string } /** 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 = () => () => {} /** Your locale, or the visitor's once hydrated — so server and client HTML agree. */ function useFormatLocale(locale?: string) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) return locale ?? (hydrated ? undefined : "en-US") } 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 an option would arrive if ordered at `now`, and how long is left to dispatch today. */ export function deliveryWindow(option: DeliveryOption, now: Date) { const businessOnly = option.businessDaysOnly ?? true const cutoff = option.cutoffHour // Past the cut-off, or on a day nothing dispatches: it goes out next working day. let dispatch = new Date(now) let minutesLeft: number | null = null 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) { minutesLeft = cutoff * 60 - (now.getHours() * 60 + now.getMinutes()) } return { first: addDays(dispatch, option.minDays, businessOnly), last: addDays(dispatch, option.maxDays, businessOnly), minutesLeft, } } export interface DeliveryOptionsProps extends Omit, "onChange" | "defaultValue" | "name"> { options: DeliveryOption[] value: string | null onValueChange: (id: string) => void currency?: string /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** "Delivery", by default. */ legend?: React.ReactNode /** Keeps the legend for screen readers when your page already has a heading. */ hideLegend?: boolean /** The radio group's name, for a plain form post. */ name?: string /** The options aren't known yet — rates are still being fetched for the address. */ loading?: boolean disabled?: boolean } export function DeliveryOptions({ options, value, onValueChange, currency = "USD", locale: localeProp, legend = "Delivery", hideLegend = false, name, loading = false, disabled = false, className, ...props }: DeliveryOptionsProps) { const locale = useFormatLocale(localeProp) const reduce = useReducedMotion() const uid = React.useId() const minute = React.useSyncExternalStore(subscribeMinute, currentMinute, serverMinute) const money = React.useMemo(() => new Intl.NumberFormat(locale, { style: "currency", currency }), [locale, currency]) const dates = React.useMemo( () => new Intl.DateTimeFormat(locale, { weekday: "short", day: "numeric", month: "short" }), [locale] ) return (

{legend} {loading ? (

Loading delivery options {[0, 1, 2].map((row) => (

))}

) : options.length === 0 ? (

Nothing can be delivered to this address yet. Check the address, or contact us.

) : ( onValueChange(String(next))} name={name} disabled={disabled} aria-labelledby={`${uid}-legend`} className="gap-0 border" > {options.map((option) => { const selected = value === option.id const unavailable = option.available === false const when = minute === null || unavailable ? null : deliveryWindow(option, new Date(minute * 60_000)) const arrival = when ? option.minDays === option.maxDays ? dates.format(when.first) : dates.formatRange(when.first, when.last) : null const left = selected && when?.minutesLeft != null ? when.minutesLeft : null const noteId = `${uid}-${option.id}-note` return ( {selected ? ( ) : null} {option.label} {unavailable ? ( (option.unavailableReason ?? "Not available for this address") ) : arrival ? ( Arrives {arrival} ) : ( // The shopper's dates arrive with hydration; hold the line's height till then. )} {left !== null ? ( Order within {Math.floor(left / 60)}h {String(left % 60).padStart(2, "0")}m for dispatch today ) : null} {!unavailable && option.description ? {option.description} : null} {option.price === 0 ? "Free" : money.format(option.price)} ) })} )}

) } 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"}]]}]}]]}],["$","$L61",null,{"namespace":"@registrydirectory","registryDependencies":["radio-group","skeleton"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/delivery-options/delivery-options.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/delivery-options.tsx"}],"className":"h-[70svh] min-h-80"}]]}]