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:T398b,"use client" import * as React from "react" import { ArrowUpRight, Check, CircleAlert } from "lucide-react" import { AnimatePresence, MotionConfig, motion, useReducedMotion } from "motion/react" import { Badge } from "@/components/ui/badge" import { Skeleton } from "@/components/ui/skeleton" import { DEFAULT_TRACKING_STEPS, sortTrackingEvents, trackingProgress, type TrackingEvent, type TrackingStatus, type TrackingStep, } from "@/lib/tracking-events" import { cn } from "@/lib/utils" /* * Where the parcel is: a status chip, when it arrives, a vertical timeline * of the shipment's milestones, and the carrier's updates under it. * * * * Carrier webhooks arrive out of order and sometimes twice, so the block * never trusts arrival order: events are de-duplicated by id and sorted by * the time they happened — `sortTrackingEvents` and `trackingProgress` in * `@/lib/tracking-events`, a file with no "use client", so your webhook * handler can run the same code. * The latest milestone is the current node — ringed, with a live pulse; * milestones before it are solid ink; those to come are hollow grey. State * is never colour alone: a check, a ring, words. When the rule between two * nodes fills it draws down to the next (Motion; a fade under reduced * motion), and the full update log grows to its measured height. * Timestamps show in the visitor's own time zone once hydrated; calendar * dates (the estimate) in UTC, so they never slip a day. The estimate is two * formatted days joined with a dash, not `formatRange`, whose spacing * differs between Node's ICU and the browser's. */ export type { TrackingEvent, TrackingMilestone, TrackingStatus, TrackingStep } from "@/lib/tracking-events" /** 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 FADE = { duration: 0.15 } as const const subscribeNothing = () => () => {} /* ─── block ────────────────────────────────────────────────────────────── */ export interface OrderTrackingProps extends React.HTMLAttributes { /** The carrier's updates, in any order, duplicates and all. */ events: TrackingEvent[] carrier?: { name: string; trackingNumber?: string; url?: string } /** Calendar dates, "2026-10-21": the window it should arrive in. */ estimate?: { from: string; to?: string } /** Your milestones, if not the five standard ones. */ steps?: TrackingStep[] /** `undefined` follows the visitor's locale, once hydrated. */ locale?: string /** How many updates show before "Show all". Defaults to 3. */ visibleUpdates?: number loading?: boolean } export function OrderTracking({ events, carrier, estimate, steps = DEFAULT_TRACKING_STEPS, locale: localeProp, visibleUpdates = 3, loading = false, className, ...props }: OrderTrackingProps) { const hydrated = React.useSyncExternalStore(subscribeNothing, () => true, () => false) const reduce = useReducedMotion() const uid = React.useId() const locale = localeProp ?? (hydrated ? undefined : "en-US") const timeZone = hydrated ? undefined : "UTC" const [showAll, setShowAll] = React.useState(false) const sorted = React.useMemo(() => sortTrackingEvents(events, steps), [events, steps]) const progress = React.useMemo(() => trackingProgress(events, steps), [events, steps]) const day = React.useMemo( () => new Intl.DateTimeFormat(locale, { weekday: "short", month: "short", day: "numeric", timeZone: "UTC" }), [locale] ) const stamp = React.useMemo( () => new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit", timeZone }), [locale, timeZone] ) const calendar = (iso: string) => new Date(`${iso}T00:00:00Z`) const arrival = estimate ? !estimate.to || estimate.to === estimate.from ? day.format(calendar(estimate.from)) : `${day.format(calendar(estimate.from))} – ${day.format(calendar(estimate.to))}` : null const currentStep = steps[progress.current] const deliveredAt = progress.reachedAt.delivered const headline: React.ReactNode = progress.delivered ? ( deliveredAt ? ( <> Delivered{" "} {stamp.format(new Date(deliveredAt))} ) : ( "Delivered" ) ) : arrival ? ( `Arrives ${arrival}` ) : ( (currentStep?.label ?? "Preparing your order") ) const chip = progress.issue ? "Needs attention" : (currentStep?.label ?? "Not shipped yet") // Newest first in the log. const log = [...sorted].reverse() const shown = showAll ? log : log.slice(0, visibleUpdates) const labelFor = (status: TrackingStatus) => status === "exception" ? "Update" : (steps.find((s) => s.status === status)?.label ?? status) if (loading) { return (

Loading tracking

{steps.map((s) => (

))}

) } return (

{/* Status, when, and who's carrying it. */}

{progress.issue ? : progress.delivered ? : null} {chip}

{headline}

{carrier ? (

{carrier.name} {carrier.trackingNumber ? {carrier.trackingNumber} : null} {carrier.url ? ( Track on {carrier.name} (opens in a new tab) ) : null}

) : null} {progress.issue ? (

{progress.issue.description ?? "The carrier reported a problem with this delivery."} {progress.issue.location ? · {progress.issue.location} : null}

) : null}

{sorted.length === 0 ? (

Tracking appears here once your order ships{arrival ? ` — it should arrive ${arrival}` : ""}.

) : ( <> {/* The milestones. */}

{/* The rule to the next node: grey, filled in ink once passed. */} {!last ? ( ) : null} {state === "current" && !progress.delivered ? ( ) : null} {state === "done" || (state === "current" && progress.delivered) ? : null} {trouble ? ! : null} {step.label} {at ? ( {stamp.format(new Date(at))} ) : null} {state === "done" ? "done" : state === "current" ? (trouble ? "current, needs attention" : "current") : "not yet"}

{/* The carrier's updates, newest first. */}

Updates

{shown.map((event) => (

{stamp.format(new Date(event.at))} {event.description ?? labelFor(event.status)} {event.location ? {event.location} : null}

))}

{log.length > visibleUpdates ? ( ) : null}

)}

) } 64:Tc44,/* * A shipment's progress from carrier events — in any order, duplicates and * all. No "use client" and no React: run it where the webhooks land, to * store events in order, and the order-tracking block runs the same code. * * const { current, issue, delivered } = trackingProgress(events) */ export type TrackingMilestone = "ordered" | "dispatched" | "in-transit" | "out-for-delivery" | "delivered" /** A milestone, or a problem the carrier reports: a failed attempt, a delay. */ export type TrackingStatus = TrackingMilestone | "exception" export interface TrackingEvent { /** The carrier's event id — the same update sent twice is shown once. */ id: string status: TrackingStatus /** ISO timestamp of when it happened, not when the webhook arrived. */ at: string /** "Departed facility", "Delivery attempted — no one home". */ description?: string /** "Leipzig, DE". */ location?: string } export interface TrackingStep { status: TrackingMilestone label: string } export const DEFAULT_TRACKING_STEPS: TrackingStep[] = [ { status: "ordered", label: "Ordered" }, { status: "dispatched", label: "Dispatched" }, { status: "in-transit", label: "In transit" }, { status: "out-for-delivery", label: "Out for delivery" }, { status: "delivered", label: "Delivered" }, ] /** * The events once, in the order they happened. A repeated id keeps its last * copy (a carrier's correction); equal times keep the milestone order. */ export function sortTrackingEvents(events: TrackingEvent[], steps: TrackingStep[] = DEFAULT_TRACKING_STEPS) { const byId = new Map() for (const event of events) byId.set(event.id, event) const rank = (s: TrackingStatus) => (s === "exception" ? steps.length : steps.findIndex((step) => step.status === s)) return [...byId.values()].sort((a, b) => Date.parse(a.at) - Date.parse(b.at) || rank(a.status) - rank(b.status)) } export interface TrackingProgress { /** Index into the steps of the milestone the parcel is at; -1 before any. */ current: number /** When each milestone was first reached, if the carrier said so. */ reachedAt: Partial> /** The latest event, when it's a problem reported after the last milestone. */ issue: TrackingEvent | null delivered: boolean } /** Where the parcel is, from events in any order. */ export function trackingProgress(events: TrackingEvent[], steps: TrackingStep[] = DEFAULT_TRACKING_STEPS): TrackingProgress { const sorted = sortTrackingEvents(events, steps) const reachedAt: TrackingProgress["reachedAt"] = {} let current = -1 let issue: TrackingEvent | null = null for (const event of sorted) { if (event.status === "exception") { issue = event continue } const index = steps.findIndex((s) => s.status === event.status) if (index === -1) continue reachedAt[event.status] ??= event.at // The carrier's latest word is the truth — even a step back, after a re-route. current = index issue = null } return { current, reachedAt, issue, delivered: steps[current]?.status === "delivered" } } 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":["badge","skeleton"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"src/registry/ecomcn/order-tracking/order-tracking.tsx","content":"$63","type":"registry:component","target":"components/ecomcn/order-tracking.tsx"},{"path":"src/registry/ecomcn/order-tracking/tracking-events.ts","content":"$64","type":"registry:lib","target":"lib/tracking-events.ts"}],"className":"h-[70svh] min-h-80"}]]}]