@voyant-travel/catalog-react 0.117.2

package/dist/components/catalog-vertical-detail-page.d.ts

@@ -0,0 +1,33 @@
+export type CatalogVerticalDetailVertical = "products" | "cruises" | "accommodations";
+export interface CatalogVerticalDetailBreadcrumb {
+    label: string;
+    href?: string;
+}
+export interface CatalogVerticalDetailPageProps {
+    id: string;
+    /** Content vertical backing the surface (excursions/tours → products). */
+    vertical: CatalogVerticalDetailVertical;
+    /** Localized surface name — header fallback + breadcrumb root. */
+    surfaceLabel: string;
+    /** Href of the surface's browse page, e.g. `/catalog/cruises`. */
+    surfaceHref: string;
+    /** BCP-47 locale forwarded to the content route. Defaults to the i18n locale. */
+    locale?: string;
+    /** Per-vertical content mount paths. Defaults to the operator admin routes. */
+    contentBasePathByVertical?: Record<string, string>;
+    /** Resolve a supplier id to a display name (host's supplier directory). */
+    formatSupplier?: (id: string) => string;
+    /** Route to the booking journey for this entity. `departureDate` + name/hero
+     *  let the journey pre-fill the date and preview the panel rather than blank. */
+    onBook: (vertical: string, id: string, opts: {
+        departureId?: string;
+        optionId?: string;
+        departureDate?: string | null;
+        name?: string | null;
+        heroImageUrl?: string | null;
+    }) => void;
+    /** Publish breadcrumbs as the resolved name changes (host feeds its breadcrumb sink). */
+    onBreadcrumbs?: (crumbs: CatalogVerticalDetailBreadcrumb[]) => void;
+}
+export declare function CatalogVerticalDetailPage({ id, vertical, surfaceLabel, surfaceHref, locale, contentBasePathByVertical, formatSupplier, onBook, onBreadcrumbs, }: CatalogVerticalDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=catalog-vertical-detail-page.d.ts.map

package/dist/components/catalog-vertical-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-vertical-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/catalog-vertical-detail-page.tsx"],"names":[],"mappings":"AAkCA,MAAM,MAAM,6BAA6B,GAAG,UAAU,GAAG,SAAS,GAAG,gBAAgB,CAAA;AAErF,MAAM,WAAW,+BAA+B;IAC9C,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,8BAA8B;IAC7C,EAAE,EAAE,MAAM,CAAA;IACV,0EAA0E;IAC1E,QAAQ,EAAE,6BAA6B,CAAA;IACvC,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,WAAW,EAAE,MAAM,CAAA;IACnB,iFAAiF;IACjF,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,yBAAyB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAClD,2EAA2E;IAC3E,cAAc,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAA;IACvC;qFACiF;IACjF,MAAM,EAAE,CACN,QAAQ,EAAE,MAAM,EAChB,EAAE,EAAE,MAAM,EACV,IAAI,EAAE;QACJ,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAC7B,KACE,IAAI,CAAA;IACT,yFAAyF;IACzF,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,+BAA+B,EAAE,KAAK,IAAI,CAAA;CACpE;AAED,wBAAgB,yBAAyB,CAAC,EACxC,EAAE,EACF,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,MAAM,EACN,yBAA4D,EAC5D,cAAc,EACd,MAAM,EACN,aAAa,GACd,EAAE,8BAA8B,2CAgJhC"}

package/dist/components/catalog-vertical-detail-page.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Image as ImageIcon } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useCatalogUiI18nOrDefault, useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+import { fetchCatalogSlots, useVoyantCatalogContext } from "../index.js";
+import { CatalogDetailView } from "./catalog-detail-sheet.js";
+import { createCatalogEnrichmentFetchers, } from "./catalog-enrichment-fetchers.js";
+/**
+ * Generic, full-page, URL-addressable detail page for the non-package catalog
+ * surfaces (cruises, accommodations, excursions, tours). Reads the rich content
+ * **directly from the content route by id** (the same source the detail sheet
+ * uses — keyed by the catalog id, so it works where a Typesense `id` filter
+ * doesn't) and renders the shared `CatalogDetailView`. Opened in a new tab from
+ * the surface's results. Packages keep their own bespoke detail page.
+ *
+ * Presentational: navigation (`onBook`), breadcrumbs (`onBreadcrumbs`) and
+ * supplier-name resolution (`formatSupplier`) are injected by the host; the
+ * content base URL + fetcher come from `VoyantCatalogProvider`.
+ */
+const DEFAULT_CONTENT_BASE_BY_VERTICAL = {
+    products: "/v1/admin/products",
+    cruises: "/v1/admin/cruises",
+    accommodations: "/v1/admin/accommodations",
+};
+export function CatalogVerticalDetailPage({ id, vertical, surfaceLabel, surfaceHref, locale, contentBasePathByVertical = DEFAULT_CONTENT_BASE_BY_VERTICAL, formatSupplier, onBook, onBreadcrumbs, }) {
+    const { baseUrl, fetcher } = useVoyantCatalogContext();
+    const messages = useCatalogUiMessagesOrDefault().catalogBrowser;
+    const { locale: resolvedLocale } = useCatalogUiI18nOrDefault();
+    const contentLocale = locale ?? resolvedLocale;
+    const fetchers = useMemo(() => createCatalogEnrichmentFetchers({
+        baseUrl,
+        contentBasePathByVertical,
+        credentials: "include",
+        locale: contentLocale,
+        formatSupplier,
+        loadSlotAvailability: (productId) => fetchCatalogSlots({ baseUrl, fetcher }, { entityModule: "products", entityId: productId })
+            .then((res) => new Map(res.rows.map((slot) => [slot.id, slot])))
+            .catch(() => new Map()),
+    }), [baseUrl, fetcher, contentBasePathByVertical, contentLocale, formatSupplier]);
+    // Minimal hit — the detail body keys off `hit.id` for content + the slots
+    // call; the index projection isn't available by id, so fields stay empty and
+    // the rich content comes from the enrichment.
+    const hit = useMemo(() => ({ id, score: 0, document: { id, fields: {} } }), [id]);
+    const [enrichment, setEnrichment] = useState(null);
+    const [status, setStatus] = useState("loading");
+    useEffect(() => {
+        let cancelled = false;
+        setStatus("loading");
+        setEnrichment(null);
+        void (async () => {
+            try {
+                const enr = await fetchers.loadProductDetail(hit, vertical);
+                if (cancelled)
+                    return;
+                if (!enr) {
+                    setStatus("notfound");
+                    return;
+                }
+                setEnrichment(enr);
+                setStatus("ready");
+            }
+            catch {
+                if (!cancelled)
+                    setStatus("error");
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [hit, vertical, fetchers]);
+    const name = enrichment?.name ?? null;
+    useEffect(() => {
+        if (!onBreadcrumbs)
+            return;
+        onBreadcrumbs(name
+            ? [{ label: surfaceLabel, href: surfaceHref }, { label: name }]
+            : [{ label: surfaceLabel, href: surfaceHref }]);
+    }, [name, surfaceLabel, surfaceHref, onBreadcrumbs]);
+    // Booking: route to the unified journey. entityModule = the content vertical.
+    // (enrichment is non-null whenever the detail view — the only caller — renders.)
+    const book = (departureId, optionId, departureDate) => {
+        onBook(vertical, id, {
+            ...(departureId ? { departureId } : {}),
+            ...(optionId ? { optionId } : {}),
+            departureDate: departureDate ?? null,
+            name: enrichment?.name ?? null,
+            heroImageUrl: enrichment?.heroImageUrl ?? null,
+        });
+    };
+    if (status === "loading") {
+        return (_jsxs("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: [_jsx("div", { className: "h-7 w-1/3 animate-pulse rounded bg-muted/40" }), _jsx("div", { className: "mt-2 h-4 w-1/4 animate-pulse rounded bg-muted/20" }), _jsx("div", { className: "mt-6 h-72 w-full animate-pulse rounded-lg bg-muted/30" })] }));
+    }
+    if (status === "notfound" || status === "error" || !enrichment) {
+        return (_jsx("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: _jsx("div", { className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm", children: status === "notfound" ? messages.detail.notFound : messages.detail.loadError }) }));
+    }
+    const heroUrl = enrichment.heroImageUrl;
+    const subtitle = enrichment.supplier;
+    return (_jsxs("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: [_jsxs("div", { className: "flex items-start gap-4", children: [heroUrl ? (_jsx("img", { src: heroUrl, alt: name ?? "", className: "h-20 w-28 shrink-0 rounded-lg object-cover ring-1 ring-border", loading: "lazy" })) : (_jsx("div", { className: "flex h-20 w-28 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: _jsx(ImageIcon, { className: "h-7 w-7", "aria-hidden": "true" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "font-semibold text-2xl", children: name ?? surfaceLabel }), subtitle && _jsx("p", { className: "mt-1 text-muted-foreground text-sm", children: subtitle })] })] }), _jsx("div", { className: "mt-6", children: _jsx(CatalogDetailView, { hit: hit, enrichment: enrichment, vertical: vertical, onLoadDeparturePricing: (h, sailingRef) => fetchers.loadDeparturePricing(h, sailingRef, vertical), onBookDeparture: (_h, departure) => book(departure.sourceRef ?? departure.id, undefined, departure.startsAt), onBookOption: (_h, departure, option) => book(departure.sourceRef ?? departure.id, option.id, departure.startsAt) }) })] }));
+}

package/dist/components/cruise-detail-page-parts.d.ts

@@ -0,0 +1,72 @@
+import type { CatalogUiMessages } from "../i18n/messages.js";
+export interface CruiseSailing {
+    id: string | null;
+    sourceRef: string | null;
+    startDate: string | null;
+    endDate: string | null;
+    nights: number | null;
+    status: string | null;
+    embarkationPort: string | null;
+    disembarkationPort: string | null;
+    lowestPriceCents: number | null;
+    currency: string | null;
+}
+export interface CruiseCabin {
+    id: string;
+    /** Provider cabin code (e.g. `omi_V`) — joins to live pricing rows. */
+    externalId: string | null;
+    name: string;
+    type: string | null;
+    view: string | null;
+    squareFeet: string | null;
+    capacityMin: number | null;
+    capacityMax: number | null;
+    images: string[];
+    inclusions: string[];
+}
+export interface CabinPrice {
+    code: string;
+    fromAmountMinor: number;
+    available: boolean;
+}
+export interface CruiseStop {
+    dayNumber: number | null;
+    date: string | null;
+    portName: string | null;
+    arrivalTime: string | null;
+    departureTime: string | null;
+    isAtSea: boolean;
+    description: string | null;
+}
+export interface CruiseDetail {
+    name: string | null;
+    description: string | null;
+    cruiseType: string | null;
+    cruiseLine: string | null;
+    nights: number | null;
+    heroImageUrl: string | null;
+    highlights: string[];
+    embarkationPort: string | null;
+    disembarkationPort: string | null;
+    ship: {
+        name: string | null;
+        shipType: string | null;
+        description: string | null;
+        capacity: number | null;
+        decks: number | null;
+        yearBuilt: number | null;
+        gallery: string[];
+    } | null;
+    sailings: CruiseSailing[];
+    cabins: CruiseCabin[];
+    itinerary: CruiseStop[];
+}
+export type SearchMessages = CatalogUiMessages["catalogBrowser"]["search"];
+export declare function mapCruiseContent(content: unknown): CruiseDetail | null;
+export declare function formatCruiseType(type: string | null, s: SearchMessages): string | null;
+export declare function formatMoney(m: {
+    amountMinor: number;
+    currency: string;
+}, locale?: string): string;
+export declare function formatDay(iso: string | null, locale?: string): string;
+//# sourceMappingURL=cruise-detail-page-parts.d.ts.map

package/dist/components/cruise-detail-page-parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cruise-detail-page-parts.d.ts","sourceRoot":"","sources":["../../src/components/cruise-detail-page-parts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,GAAG,IAAI,CAAA;IACjB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,uEAAuE;IACvE,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,UAAU,EAAE,MAAM,EAAE,CAAA;CACrB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,UAAU,EAAE,MAAM,EAAE,CAAA;IACpB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;QACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;QACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;QAC1B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;QACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;QACxB,OAAO,EAAE,MAAM,EAAE,CAAA;KAClB,GAAG,IAAI,CAAA;IACR,QAAQ,EAAE,aAAa,EAAE,CAAA;IACzB,MAAM,EAAE,WAAW,EAAE,CAAA;IACrB,SAAS,EAAE,UAAU,EAAE,CAAA;CACxB;AAED,MAAM,MAAM,cAAc,GAAG,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAA;AAG1E,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,OAAO,GAAG,YAAY,GAAG,IAAI,CA0EtE;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,IAAI,CAItF;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE;IAAE,WAAW,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAMjG;AAED,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAUrE"}

package/dist/components/cruise-detail-page-parts.js

@@ -0,0 +1,146 @@
+// ── Content mapping (Connect cruise content → render shape) ─────────────────
+export function mapCruiseContent(content) {
+    const c = asRecord(content);
+    const cruise = asRecord(c?.cruise);
+    if (!cruise)
+        return null;
+    const ship = asRecord(c?.ship);
+    const sailingsRaw = Array.isArray(c?.sailings) ? c.sailings : [];
+    const cabinsRaw = Array.isArray(c?.cabin_categories) ? c.cabin_categories : [];
+    const stopsRaw = Array.isArray(c?.itinerary_stops) ? c.itinerary_stops : [];
+    return {
+        name: asStr(cruise.name),
+        description: asStr(cruise.description),
+        cruiseType: asStr(cruise.cruise_type),
+        cruiseLine: asStr(cruise.cruise_line),
+        nights: asNum(cruise.duration_nights),
+        heroImageUrl: asStr(cruise.hero_image_url),
+        highlights: asStrArray(cruise.highlights),
+        embarkationPort: asStr(cruise.embarkation_port),
+        disembarkationPort: asStr(cruise.disembarkation_port),
+        ship: ship
+            ? {
+                name: asStr(ship.name),
+                shipType: asStr(ship.ship_type),
+                description: asStr(ship.description),
+                capacity: asNum(ship.capacity),
+                decks: asNum(ship.decks),
+                yearBuilt: asNum(ship.year_built),
+                gallery: asStrArray(ship.gallery),
+            }
+            : null,
+        sailings: sailingsRaw.map((row) => {
+            const r = asRecord(row) ?? {};
+            return {
+                id: asStr(r.id),
+                sourceRef: asStr(r.source_ref),
+                startDate: asStr(r.start_date),
+                endDate: asStr(r.end_date),
+                nights: asNum(r.duration_nights),
+                status: asStr(r.status),
+                embarkationPort: asStr(r.embarkation_port),
+                disembarkationPort: asStr(r.disembarkation_port),
+                lowestPriceCents: asNum(r.lowest_price_cents),
+                currency: asStr(r.currency),
+            };
+        }),
+        cabins: cabinsRaw.map((row, i) => {
+            const r = asRecord(row) ?? {};
+            return {
+                id: asStr(r.id) ?? `cabin-${i}`,
+                externalId: decodeCatalogExternalId(asStr(r.id)),
+                // Pure mapper, no messages in scope; "Cabin" is a last-resort fallback for an unnamed upstream cabin, not chrome copy.
+                // i18n-literal-ok
+                name: asStr(r.name) ?? asStr(r.code) ?? "Cabin",
+                type: asStr(r.type),
+                view: asStr(r.view_type) ?? asStr(r.type),
+                squareFeet: asStr(r.square_feet),
+                capacityMin: asNum(r.capacity_min),
+                capacityMax: asNum(r.capacity_max),
+                images: asStrArray(r.images),
+                inclusions: asStrArray(r.inclusions),
+            };
+        }),
+        itinerary: stopsRaw.map((row) => {
+            const r = asRecord(row) ?? {};
+            return {
+                dayNumber: asNum(r.day_number),
+                date: asStr(r.date),
+                portName: asStr(r.port_name),
+                arrivalTime: asStr(r.arrival_time),
+                departureTime: asStr(r.departure_time),
+                isAtSea: r.is_at_sea === true,
+                description: asStr(r.description),
+            };
+        }),
+    };
+}
+export function formatCruiseType(type, s) {
+    if (type === "river")
+        return s.typeRiver;
+    if (type === "ocean")
+        return s.typeOcean;
+    return type;
+}
+export function formatMoney(m, locale) {
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: m.currency,
+        maximumFractionDigits: 0,
+    }).format(m.amountMinor / 100);
+}
+export function formatDay(iso, locale) {
+    if (!iso)
+        return "";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(locale, {
+        weekday: "short",
+        day: "numeric",
+        month: "short",
+        year: "numeric",
+    }).format(d);
+}
+// Catalog ids are `<prefix>_sr_<base64url(JSON{externalId,…})>`; pull the
+// provider externalId so cabins can join to live pricing rows.
+function decodeCatalogExternalId(id) {
+    if (!id)
+        return null;
+    const idx = id.indexOf("_sr_");
+    if (idx < 0)
+        return null;
+    try {
+        const b64 = id
+            .slice(idx + 4)
+            .replace(/-/g, "+")
+            .replace(/_/g, "/");
+        const padded = b64 + "=".repeat((4 - (b64.length % 4)) % 4);
+        const obj = JSON.parse(atob(padded));
+        return typeof obj.externalId === "string" ? obj.externalId : null;
+    }
+    catch {
+        return null;
+    }
+}
+function asRecord(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : undefined;
+}
+function asStr(value) {
+    return typeof value === "string" && value.length > 0 ? value : null;
+}
+function asNum(value) {
+    if (typeof value === "number" && Number.isFinite(value))
+        return value;
+    if (typeof value === "string" && value.trim() !== "" && !Number.isNaN(Number(value))) {
+        return Number(value);
+    }
+    return null;
+}
+function asStrArray(value) {
+    return Array.isArray(value)
+        ? value.filter((v) => typeof v === "string" && v.length > 0)
+        : [];
+}

package/dist/components/cruise-detail-page.d.ts

@@ -0,0 +1,21 @@
+import type { CatalogSurface } from "../index.js";
+export interface CruiseDetailPageProps {
+    id: string;
+    locale?: string;
+    surface?: CatalogSurface;
+    cruisesLabel: string;
+    cruisesHref: string;
+    onBook: (cruiseId: string, opts: {
+        departureId?: string;
+        optionId?: string;
+        departureDate?: string | null;
+        name?: string | null;
+        heroImageUrl?: string | null;
+    }) => void;
+    onBreadcrumbs?: (crumbs: Array<{
+        label: string;
+        href?: string;
+    }>) => void;
+}
+export declare function CruiseDetailPage({ id, locale, surface, cruisesLabel, cruisesHref, onBook, onBreadcrumbs, }: CruiseDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=cruise-detail-page.d.ts.map

package/dist/components/cruise-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cruise-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/cruise-detail-page.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AA0BjD,MAAM,WAAW,qBAAqB;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,CACN,QAAQ,EAAE,MAAM,EAChB,IAAI,EAAE;QACJ,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;QACpB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAC7B,KACE,IAAI,CAAA;IACT,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAA;CAC1E;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,EAAE,EACF,MAAa,EACb,OAAiB,EACjB,YAAY,EACZ,WAAW,EACX,MAAM,EACN,aAAa,GACd,EAAE,qBAAqB,2CAohBvB"}

package/dist/components/cruise-detail-page.js

@@ -0,0 +1,201 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Anchor, Check, Ship, Users } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useCatalogUiI18nOrDefault, useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+import { fetchCruiseContent, fetchCruisePrice, fetchCruiseSailingPricing, useVoyantCatalogContext, } from "../index.js";
+import { AvailabilityCalendar, compareMonth, monthOfIso, shiftMonth, } from "./availability-calendar.js";
+import { Gallery, GalleryLightbox } from "./catalog-gallery.js";
+import { formatCruiseType, formatDay, formatMoney, mapCruiseContent, } from "./cruise-detail-page-parts.js";
+export function CruiseDetailPage({ id, locale = "ro", surface = "admin", cruisesLabel, cruisesHref, onBook, onBreadcrumbs, }) {
+    const { baseUrl, fetcher } = useVoyantCatalogContext();
+    const browser = useCatalogUiMessagesOrDefault().catalogBrowser;
+    const t = browser.detail;
+    const s = browser.search;
+    const { locale: resolvedLocale } = useCatalogUiI18nOrDefault();
+    const [detail, setDetail] = useState(null);
+    // Cruise-level "from" price (from Connect; the content route carries none).
+    const [cruisePrice, setCruisePrice] = useState(null);
+    const [status, setStatus] = useState("loading");
+    const [monthCursor, setMonthCursor] = useState(null);
+    const [selected, setSelected] = useState(null);
+    const [lightbox, setLightbox] = useState(null);
+    const [cabinPricing, setCabinPricing] = useState(null);
+    const [pricingLoading, setPricingLoading] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        setStatus("loading");
+        setDetail(null);
+        setCruisePrice(null);
+        void (async () => {
+            try {
+                const [contentJson, priceJson] = await Promise.all([
+                    fetchCruiseContent({ baseUrl, fetcher, surface }, { cruiseId: id, locale }),
+                    fetchCruisePrice({ baseUrl, fetcher, surface }, { cruiseId: id }).catch(() => null),
+                ]);
+                if (cancelled)
+                    return;
+                const mapped = mapCruiseContent(contentJson.data?.content);
+                if (!mapped) {
+                    setStatus("error");
+                    return;
+                }
+                setDetail(mapped);
+                setStatus("ready");
+                if (priceJson) {
+                    setCruisePrice({
+                        fromAmountMinor: priceJson.fromAmountMinor ?? null,
+                        currency: priceJson.currency ?? null,
+                    });
+                }
+                const first = mapped.sailings
+                    .map((sail) => sail.startDate)
+                    .filter((d) => Boolean(d))
+                    .sort()[0];
+                if (first) {
+                    setMonthCursor(monthOfIso(first.slice(0, 10)));
+                    setSelected(first.slice(0, 10));
+                }
+            }
+            catch {
+                if (!cancelled)
+                    setStatus("error");
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [id, locale, baseUrl, fetcher, surface]);
+    useEffect(() => {
+        if (!onBreadcrumbs)
+            return;
+        onBreadcrumbs(detail?.name
+            ? [{ label: cruisesLabel, href: cruisesHref }, { label: detail.name }]
+            : [{ label: cruisesLabel, href: cruisesHref }]);
+    }, [detail?.name, cruisesLabel, cruisesHref, onBreadcrumbs]);
+    const gallery = useMemo(() => {
+        if (!detail)
+            return [];
+        const urls = [
+            detail.heroImageUrl,
+            ...(detail.ship?.gallery ?? []),
+            ...detail.cabins.flatMap((c) => c.images.slice(0, 1)),
+        ].filter((u) => Boolean(u));
+        return [...new Set(urls)].map((src) => ({ src }));
+    }, [detail]);
+    // Per-day availability: sailings departing each day + from-price. Cruise
+    // sailings rarely carry a per-sailing price, so fall back to the cruise-level
+    // "from" price (Connect); the calendar omits the price line when there's none.
+    const byDate = useMemo(() => {
+        const fallback = cruisePrice?.fromAmountMinor ?? null;
+        const acc = new Map();
+        for (const sail of detail?.sailings ?? []) {
+            if (!sail.startDate)
+                continue;
+            const day = sail.startDate.slice(0, 10);
+            const cur = acc.get(day) ?? { count: 0, fromMinor: Number.POSITIVE_INFINITY };
+            cur.count += 1;
+            const price = sail.lowestPriceCents ?? fallback;
+            if (price != null)
+                cur.fromMinor = Math.min(cur.fromMinor, price);
+            acc.set(day, cur);
+        }
+        const out = new Map();
+        for (const [day, v] of acc)
+            out.set(day, v);
+        return out;
+    }, [detail, cruisePrice]);
+    const availableMonths = useMemo(() => {
+        const months = [...byDate.keys()].map(monthOfIso).filter((m) => m != null);
+        months.sort(compareMonth);
+        return months.filter((m, i) => i === 0 || compareMonth(m, months[i - 1]) !== 0);
+    }, [byDate]);
+    const currency = detail?.sailings.find((sail) => sail.currency)?.currency ?? cruisePrice?.currency ?? "USD";
+    const fromPrice = useMemo(() => {
+        const vals = [...byDate.values()]
+            .map((v) => v.fromMinor)
+            .filter((v) => Number.isFinite(v) && v > 0);
+        return vals.length ? Math.min(...vals) : null;
+    }, [byDate]);
+    const selectedSailings = useMemo(() => (detail?.sailings ?? [])
+        .filter((sail) => sail.startDate?.slice(0, 10) === selected)
+        .sort((a, b) => (a.lowestPriceCents ?? 0) - (b.lowestPriceCents ?? 0)), [detail, selected]);
+    const monthIndex = monthCursor
+        ? availableMonths.findIndex((m) => compareMonth(m, monthCursor) === 0)
+        : -1;
+    // Live per-cabin pricing for the selected sailing (Connect listSailingPricing).
+    const activeRef = selectedSailings[0]?.sourceRef ?? null;
+    useEffect(() => {
+        if (!activeRef) {
+            setCabinPricing(null);
+            return;
+        }
+        let cancelled = false;
+        setPricingLoading(true);
+        setCabinPricing(null);
+        void (async () => {
+            try {
+                const json = await fetchCruiseSailingPricing({ baseUrl, fetcher, surface }, { cruiseId: id, sailingRef: activeRef });
+                if (!cancelled) {
+                    setCabinPricing({
+                        sailingRef: activeRef,
+                        cabins: json.cabins ?? [],
+                        currency: json.currency ?? null,
+                    });
+                }
+            }
+            catch {
+                if (!cancelled)
+                    setCabinPricing({ sailingRef: activeRef, cabins: [], currency: null });
+            }
+            finally {
+                if (!cancelled)
+                    setPricingLoading(false);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [activeRef, id, baseUrl, fetcher, surface]);
+    const book = (sail, cabinCode) => onBook(id, {
+        ...(sail.sourceRef || sail.id ? { departureId: sail.sourceRef ?? sail.id ?? "" } : {}),
+        ...(cabinCode ? { optionId: cabinCode } : {}),
+        departureDate: sail.startDate,
+        name: detail?.name ?? null,
+        heroImageUrl: detail?.heroImageUrl ?? null,
+    });
+    if (status === "loading") {
+        return (_jsxs("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: [_jsxs("div", { className: "grid h-[340px] grid-cols-4 grid-rows-2 gap-2 sm:h-[440px]", children: [_jsx("div", { className: "col-span-2 row-span-2 animate-pulse rounded-xl bg-muted/40" }), Array.from({ length: 4 }).map((_, i) => (_jsx("div", { className: "animate-pulse rounded-lg bg-muted/30" }, i)))] }), _jsx("div", { className: "mt-5 h-7 w-1/3 animate-pulse rounded bg-muted/40" }), _jsx("div", { className: "mt-6 h-64 w-full animate-pulse rounded-lg bg-muted/30" })] }));
+    }
+    if (status === "error" || !detail) {
+        return (_jsx("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: _jsx("div", { className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm", children: t.loadError }) }));
+    }
+    const route = [detail.embarkationPort, detail.disembarkationPort]
+        .filter((v) => Boolean(v))
+        .join(" → ");
+    const subtitle = [
+        formatCruiseType(detail.cruiseType, s),
+        detail.nights != null ? `${detail.nights} ${s.nights}` : null,
+        detail.cruiseLine,
+    ]
+        .filter((v) => Boolean(v))
+        .join(" · ");
+    return (_jsxs("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: [_jsx(Gallery, { images: gallery, photosLabel: t.photos, onOpen: (i) => setLightbox(i) }), lightbox != null && gallery.length > 0 && (_jsx(GalleryLightbox, { images: gallery, index: lightbox, onIndex: setLightbox, onClose: () => setLightbox(null), labels: { close: t.close, prev: t.prevPhoto, next: t.nextPhoto } })), _jsxs("div", { className: "mt-5 flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "font-semibold text-2xl", children: detail.name ?? cruisesLabel }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground text-sm", children: [subtitle && _jsx("span", { children: subtitle }), route && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Anchor, { className: "h-3.5 w-3.5" }), " ", route] }))] })] }), fromPrice != null && (_jsxs("div", { className: "shrink-0 text-right", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [t.from, " "] }), _jsx("span", { className: "font-semibold text-2xl", children: formatMoney({ amountMinor: fromPrice, currency }, resolvedLocale) })] }))] }), detail.highlights.length > 0 && (_jsx("div", { className: "mt-4 flex flex-wrap gap-1.5", children: detail.highlights.map((h) => (_jsxs(Badge, { variant: "outline", className: "gap-1 font-normal", children: [_jsx(Check, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" }), h] }, h))) })), _jsx("h2", { className: "mt-8 mb-2 font-medium text-lg", children: t.datesAndPrices }), byDate.size === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-muted-foreground text-sm", children: s.noSailings })) : (monthCursor && (_jsxs("div", { className: "grid gap-6 lg:grid-cols-[minmax(0,360px)_1fr]", children: [_jsx(AvailabilityCalendar, { cursor: monthCursor, byDate: byDate, currency: currency, selected: selected, onSelect: setSelected, onPrev: () => setMonthCursor((c) => (c ? shiftMonth(c, -1) : c)), onNext: () => setMonthCursor((c) => (c ? shiftMonth(c, 1) : c)), canPrev: monthIndex > 0, canNext: monthIndex >= 0 && monthIndex < availableMonths.length - 1 }), _jsx("div", { children: selected && selectedSailings.length > 0 ? (_jsx("div", { className: "flex flex-col gap-3", children: selectedSailings.map((sail) => {
+                                const isActive = sail.sourceRef != null && sail.sourceRef === activeRef;
+                                const fallbackPrice = sail.lowestPriceCents ?? cruisePrice?.fromAmountMinor;
+                                return (_jsxs("div", { className: "overflow-hidden rounded-lg border", children: [_jsx("div", { className: "flex items-center justify-between gap-3 border-b bg-muted/20 px-3 py-2.5", children: _jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "font-medium text-sm", children: [formatDay(sail.startDate, resolvedLocale), sail.endDate ? ` – ${formatDay(sail.endDate, resolvedLocale)}` : ""] }), _jsxs("div", { className: "flex flex-wrap items-center gap-x-2 text-muted-foreground text-xs", children: [sail.nights != null && (_jsxs("span", { children: [sail.nights, " ", s.nights] })), (sail.embarkationPort || sail.disembarkationPort) && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Anchor, { className: "h-3 w-3" }), [sail.embarkationPort, sail.disembarkationPort]
+                                                                        .filter(Boolean)
+                                                                        .join(" → ")] }))] })] }) }), isActive && pricingLoading ? (_jsx("div", { className: "divide-y", children: Array.from({ length: 4 }).map((_, i) => (_jsxs("div", { className: "flex items-center justify-between px-3 py-3", children: [_jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-muted/40" }), _jsx("div", { className: "h-7 w-24 animate-pulse rounded bg-muted/30" })] }, i))) })) : isActive && cabinPricing && cabinPricing.cabins.length > 0 ? (_jsx("ul", { className: "divide-y", children: cabinPricing.cabins.map((cab) => {
+                                                const cabin = detail.cabins.find((c) => c.externalId === cab.code);
+                                                return (_jsxs("li", { className: "flex items-center justify-between gap-3 px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm", children: cabin?.name ?? cab.code }), cabin?.view && (_jsx("span", { className: "text-muted-foreground text-xs capitalize", children: cabin.view })), !cab.available && (_jsx(Badge, { variant: "secondary", className: "font-normal", children: t.soldOut }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [_jsxs("div", { className: "text-right", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [t.from, " "] }), _jsxs("span", { className: "font-semibold text-sm tabular-nums", children: [formatMoney({
+                                                                                    amountMinor: cab.fromAmountMinor,
+                                                                                    currency: cabinPricing.currency ?? currency,
+                                                                                }, resolvedLocale), " ", t.perPerson] })] }), _jsx(Button, { size: "sm", disabled: !cab.available, onClick: () => book(sail, cab.code), children: t.book })] })] }, cab.code));
+                                            }) })) : (_jsxs("div", { className: "flex items-center justify-between gap-3 px-3 py-3", children: [fallbackPrice != null ? (_jsxs("div", { className: "text-right", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [t.from, " "] }), _jsx("span", { className: "font-semibold text-sm tabular-nums", children: formatMoney({
+                                                                amountMinor: fallbackPrice,
+                                                                currency: sail.currency ?? currency,
+                                                            }, resolvedLocale) })] })) : (_jsx("span", {})), _jsx(Button, { size: "sm", onClick: () => book(sail), children: t.book })] }))] }, sail.id ?? sail.sourceRef ?? sail.startDate));
+                            }) })) : (_jsx("div", { className: "flex h-full items-center justify-center rounded-md border border-dashed p-6 text-center text-muted-foreground text-sm", children: t.selectDate })) })] }))), detail.cabins.length > 0 && (_jsxs("div", { className: "mt-10", children: [_jsx("h2", { className: "mb-3 font-medium text-lg", children: t.cabins }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: detail.cabins.map((cabin) => (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-lg border", children: [_jsx("div", { className: "relative aspect-[4/3] w-full bg-muted", children: cabin.images[0] ? (_jsx("img", { src: cabin.images[0], alt: cabin.name, className: "h-full w-full object-cover", loading: "lazy" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/60", children: _jsx(Ship, { className: "h-7 w-7", "aria-hidden": "true" }) })) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1.5 p-3", children: [_jsx("div", { className: "font-medium text-sm leading-tight", children: cabin.name }), _jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-muted-foreground text-xs", children: [cabin.view && _jsx("span", { className: "capitalize", children: cabin.view }), cabin.squareFeet && _jsxs("span", { children: [cabin.squareFeet, " ft\u00B2"] }), cabin.capacityMax != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Users, { className: "h-3 w-3" }), " ", t.max, " ", cabin.capacityMax] }))] }), cabin.inclusions.length > 0 && (_jsx("p", { className: "mt-0.5 line-clamp-2 text-muted-foreground text-xs", children: cabin.inclusions.join(" · ") }))] })] }, cabin.id))) })] })), detail.itinerary.length > 0 && (_jsxs("div", { className: "mt-10", children: [_jsx("h2", { className: "mb-3 font-medium text-lg", children: t.itinerary }), _jsx("ol", { className: "space-y-2", children: detail.itinerary.map((stop) => (_jsxs("li", { className: "flex gap-3 rounded-lg border p-3", children: [_jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-secondary font-medium text-secondary-foreground text-xs", children: stop.dayNumber ?? "·" }), _jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: stop.isAtSea ? t.atSea : (stop.portName ?? t.atSea) }), _jsxs("div", { className: "flex flex-wrap gap-x-2 text-muted-foreground text-xs", children: [stop.arrivalTime && _jsx("span", { children: stop.arrivalTime }), stop.departureTime && _jsxs("span", { children: ["\u2192 ", stop.departureTime] })] }), stop.description && (_jsx("p", { className: "mt-0.5 text-muted-foreground text-xs", children: stop.description }))] })] }, `${stop.dayNumber}-${stop.portName ?? "sea"}`))) })] })), detail.ship && (_jsxs("div", { className: "mt-10", children: [_jsxs("h2", { className: "mb-3 flex items-center gap-1.5 font-medium text-lg", children: [_jsx(Ship, { className: "h-4 w-4 text-muted-foreground" }), detail.ship.name ?? t.ship] }), _jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "flex flex-wrap gap-x-6 gap-y-1 text-muted-foreground text-sm", children: [detail.ship.shipType && _jsx("span", { className: "capitalize", children: detail.ship.shipType }), detail.ship.capacity != null && (_jsxs("span", { children: [t.capacity, ": ", detail.ship.capacity] })), detail.ship.decks != null && (_jsxs("span", { children: [t.decks, ": ", detail.ship.decks] })), detail.ship.yearBuilt != null && _jsx("span", { children: detail.ship.yearBuilt })] }), detail.ship.description && (_jsx("p", { className: "mt-2 whitespace-pre-line text-muted-foreground text-sm", children: detail.ship.description }))] })] })), detail.description && (_jsxs("div", { className: "mt-10", children: [_jsx("h2", { className: "mb-3 font-medium text-lg", children: t.about }), _jsx("p", { className: "whitespace-pre-line text-muted-foreground text-sm", children: detail.description })] }))] }));
+}

package/dist/components/dynamic-catalog-page-parts.d.ts

@@ -0,0 +1,40 @@
+import type { CatalogUiMessages } from "../i18n/messages.js";
+export interface SearchResultCard {
+    productId: string;
+    name: string | null;
+    image: string | null;
+    stars: string | number | null;
+    destination: string | null;
+    country: string | null;
+    board: string | null;
+    checkIn: string | null;
+    checkOut: string | null;
+    nights: number | null;
+    departureAirport: string | null;
+    arrivalAirport: string | null;
+    carrier: string | null;
+    perPerson: {
+        amountMinor: number;
+        currency: string;
+    } | null;
+    total: {
+        amountMinor: number;
+        currency: string;
+    } | null;
+}
+export interface AirportOption {
+    code: string;
+    label: string;
+}
+type SearchMessages = CatalogUiMessages["catalogBrowser"]["search"];
+type BoardLabels = CatalogUiMessages["catalogBrowser"]["detail"]["boards"];
+export declare function DynamicResultsSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function HolidayCard({ card, onOpen, s, boards, locale, }: {
+    card: SearchResultCard;
+    onOpen: (productId: string) => void;
+    s: SearchMessages;
+    boards: BoardLabels;
+    locale: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dynamic-catalog-page-parts.d.ts.map