@voyant-travel/catalog-react 0.117.2

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

@@ -0,0 +1,130 @@
+"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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { Accessibility, Baby, Building2, Dumbbell, Info, Plane, Umbrella, Users, UtensilsCrossed, Waves, } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+// Per-section icon by supplier `kind`, so the facilities read as scannable
+// cards rather than a wall of text. Falls back to a neutral info glyph.
+const SECTION_ICONS = {
+    BEACH: Umbrella,
+    FOR_KIDS: Baby,
+    FOOD: UtensilsCrossed,
+    HOTEL: Building2,
+    POOL: Waves,
+    SPORT_AND_WELLNESS: Dumbbell,
+    DISABILITY: Accessibility,
+};
+export function sectionIconFor(kind) {
+    return (kind ? SECTION_ICONS[kind] : undefined) ?? Info;
+}
+// Aggregate guest-review card (rating + per-category subratings). Connect only
+// exposes the aggregate — individual review texts aren't in the feed.
+export function ReviewsCard({ reviews, t, }) {
+    return (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex h-12 w-12 shrink-0 items-center justify-center rounded-md bg-secondary font-semibold text-lg text-secondary-foreground", children: reviews.rating?.toFixed(1) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium text-sm", children: t.guestReviews }), _jsxs("div", { className: "text-muted-foreground text-xs", children: [reviews.reviewsCount ?? 0, " ", t.reviewsWord, reviews.source ? ` · ${reviews.source}` : ""] })] })] }), reviews.subratings.length > 0 && (_jsx("div", { className: "mt-3 grid gap-x-6 gap-y-1 sm:grid-cols-2", children: reviews.subratings.map((sr) => (_jsxs("div", { className: "flex items-center justify-between gap-2 text-sm", children: [_jsx("span", { className: "text-muted-foreground capitalize", children: sr.name }), _jsx("span", { className: "font-medium tabular-nums", children: sr.value?.toFixed(1) })] }, sr.name))) }))] }));
+}
+// One room type for the selected day: the room's details/amenities + a single
+// rate row whose **meal (board) is selectable** — TUI's "Servicii de masă"
+// dropdown — where the room is offered on more than one board. Switching the
+// meal updates the price, flight and Book target. The cheapest meal is the
+// default selection (the room's headline price).
+export function RoomRateCard({ group, showImage, onBook, t, locale, }) {
+    const { room, code, offers } = group;
+    const title = room?.name ?? code ?? t.room;
+    const hasImage = showImage && Boolean(room?.image);
+    const details = [room?.area != null ? `${room.area} m²` : null, room?.view ?? null].filter((v) => Boolean(v));
+    // One entry per meal (board), keeping the cheapest offer for that meal;
+    // cheapest meal first so the default selection is the headline price.
+    const mealOptions = useMemo(() => {
+        const byBoard = new Map();
+        for (const o of offers) {
+            const key = boardKeyOf(o);
+            const cur = byBoard.get(key);
+            if (!cur || (o.total?.amountMinor ?? 0) < (cur.total?.amountMinor ?? 0))
+                byBoard.set(key, o);
+        }
+        return [...byBoard.values()].sort((a, b) => (a.total?.amountMinor ?? 0) - (b.total?.amountMinor ?? 0));
+    }, [offers]);
+    const [meal, setMeal] = useState(() => boardKeyOf(mealOptions[0] ?? offers[0]));
+    // Keep the selection valid if the underlying offers change (date switch).
+    useEffect(() => {
+        if (!mealOptions.some((o) => boardKeyOf(o) === meal)) {
+            setMeal(boardKeyOf(mealOptions[0] ?? offers[0]));
+        }
+    }, [mealOptions, offers, meal]);
+    const selected = mealOptions.find((o) => boardKeyOf(o) === meal) ?? mealOptions[0] ?? offers[0];
+    if (!selected)
+        return null;
+    const canChangeMeal = mealOptions.length > 1;
+    const flight = selected.flights[0];
+    return (_jsxs("div", { className: "overflow-hidden rounded-lg border", children: [_jsxs("div", { className: "flex gap-3 p-3", children: [hasImage && room?.image && (_jsx("img", { src: room.image, alt: title, className: "h-20 w-28 shrink-0 rounded-md object-cover", loading: "lazy" })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("h4", { className: "font-medium text-sm leading-tight", children: title }), code && (_jsx(Badge, { variant: "outline", className: "shrink-0 font-normal text-xs", children: code }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-muted-foreground text-xs", children: [details.map((d) => (_jsx("span", { children: d }, d))), room?.maxGuests != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Users, { className: "h-3 w-3" }), " ", t.max, " ", room.maxGuests] }))] }), room?.specifications && room.specifications.length > 0 && (_jsx("p", { className: "mt-1 line-clamp-2 text-muted-foreground text-xs", children: room.specifications.join(" · ") }))] })] }), _jsxs("div", { className: "flex items-center justify-between gap-3 border-t px-3 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [canChangeMeal ? (_jsxs(Select, { value: meal, onValueChange: (v) => setMeal(v), children: [_jsx(SelectTrigger, { className: "h-8 w-[180px] rounded-md data-[size=default]:h-8", "aria-label": t.mealPlan, children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: mealOptions.map((o) => (_jsx(SelectItem, { value: boardKeyOf(o), children: boardLabel(o.board, t) }, boardKeyOf(o)))) })] })) : (selected.board && (_jsx(Badge, { variant: "secondary", className: "font-normal", children: boardLabel(selected.board, t) }))), flight && (_jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [_jsx(Plane, { className: "h-3.5 w-3.5" }), [flight.carrier, `${flight.origin ?? ""}→${flight.destination ?? ""}`]
+                                        .filter((v) => v && v !== "→")
+                                        .join(" ")] })), selected.freeCancellationUntil && (_jsx("span", { className: "text-emerald-600 text-xs dark:text-emerald-400", children: t.freeCancellation }))] }), _jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [_jsxs("div", { className: "text-right", children: [selected.total && (_jsx("div", { className: "font-semibold text-sm tabular-nums", children: formatMoney(selected.total, locale) })), selected.perPerson && (_jsxs("div", { className: "text-muted-foreground text-xs tabular-nums", children: [formatMoney(selected.perPerson, locale), " ", t.perPerson] }))] }), _jsx(Button, { size: "sm", onClick: () => onBook(selected), children: t.book })] })] })] }));
+}
+// Stable key for a meal/board (case-folded; offers without a board share one).
+export function boardKeyOf(o) {
+    return (o?.board ?? "").toUpperCase() || "__none__";
+}
+// Readable, localized meal label (AI/HB/BB/…) → "All-inclusive"/"Half board"/…
+export function boardLabel(board, t) {
+    if (!board)
+        return t.boards.standard;
+    return t.boards[board.toUpperCase()] ?? board;
+}
+// Live offer room ids are namespaced by accommodation (`LCA20072:DZL1`); the
+// content room code is the bare suffix. Take the part after the last colon.
+export function roomCodeOf(roomTypeId) {
+    if (!roomTypeId)
+        return null;
+    const idx = roomTypeId.lastIndexOf(":");
+    return idx >= 0 ? roomTypeId.slice(idx + 1) || roomTypeId : roomTypeId;
+}
+// Turn supplier codes like `free_wifi` into "Free wifi"; leave human labels as-is.
+export function humanizeFeature(value) {
+    if (!/^[a-z0-9]+(_[a-z0-9]+)+$/.test(value))
+        return value;
+    const spaced = value.replace(/_/g, " ");
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+export function formatMoney(m, locale) {
+    return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: m.currency,
+        maximumFractionDigits: 0,
+    }).format(m.amountMinor / 100);
+}
+export function formatStars(value) {
+    if (value == null || !Number.isFinite(value) || value <= 0)
+        return null;
+    return `${Number.isInteger(value) ? value : value.toFixed(1)}★`;
+}
+export function formatCountry(code, locale) {
+    if (!code || !/^[A-Za-z]{2}$/.test(code))
+        return code ?? null;
+    try {
+        return new Intl.DisplayNames(locale, { type: "region" }).of(code.toUpperCase()) ?? code;
+    }
+    catch {
+        return code;
+    }
+}
+export function formatDay(iso, locale) {
+    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);
+}
+export function addDays(date, days) {
+    const next = new Date(date);
+    next.setDate(next.getDate() + days);
+    return next;
+}
+export function isoDate(date) {
+    return date.toISOString().slice(0, 10);
+}

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

@@ -0,0 +1,57 @@
+import type { CatalogSurface } from "../index.js";
+/**
+ * Individual product page (Dynamic surface) — full-page, URL-addressable at
+ * `/catalog/products/$productId` (opened in a new tab from the catalog).
+ * Fetches the full record from the SOURCE (Connect `package-detail` →
+ * accommodation detail + rich content: gallery, descriptions, rooms, reviews)
+ * plus the live dated offers — NOT from the search index. Renders a gallery,
+ * overview, inclusions, an availability calendar with a per-room rate table,
+ * rooms, and reviews.
+ *
+ * Presentational: navigation (`onBook`) and breadcrumbs (`onBreadcrumbs`) are
+ * injected by the host; the base URL + fetcher come from `VoyantCatalogProvider`.
+ */
+/** The offer the user clicked Book on — enough for the journey to pre-fill the
+ *  date and render a "what you're booking" preview. */
+export interface ProductBookSelection {
+    /** Check-in / departure date (ISO), seeds the journey's departure. */
+    checkIn: string | null;
+    /** Product name for the journey side-panel preview. */
+    name: string | null;
+    /** Hero image for the preview, if the content has one. */
+    heroImageUrl: string | null;
+    /** Rate pin — the exact room + rate plan the operator clicked Book on, so the
+     *  connect adapter re-resolves THAT offer (not just the first for the date).
+     *  Pinned by stable keys; the per-search offer id can't be replayed. #1579. */
+    roomTypeId: string | null;
+    ratePlanId: string | null;
+    board: string | null;
+}
+export interface ProductDetailPageProps {
+    productId: string;
+    adults?: number;
+    nights?: number;
+    locale?: string;
+    /** `/v1/admin/...` (default) vs `/v1/public/...`. */
+    surface?: CatalogSurface;
+    /** Localized "Packages" label — breadcrumb root + header fallback. */
+    productsLabel: string;
+    /** Href of the packages browse page, e.g. `/catalog/products`. */
+    productsHref: string;
+    /**
+     * Route to the booking journey, pinned to the resolved Connect source.
+     * `selection` carries the offer the user clicked Book on, so the journey can
+     * pre-fill the date and show a preview instead of starting blank.
+     */
+    onBook: (productId: string, source: {
+        connectionId?: string;
+        ref?: string | null;
+    }, selection?: ProductBookSelection) => void;
+    /** Publish breadcrumbs as the resolved name changes. */
+    onBreadcrumbs?: (crumbs: Array<{
+        label: string;
+        href?: string;
+    }>) => void;
+}
+export declare function ProductDetailPage({ productId, adults, nights, locale, surface, productsLabel, productsHref, onBook, onBreadcrumbs, }: ProductDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-page.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/product-detail-page.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAA;AA6BjD;;;;;;;;;;;GAWG;AAEH;uDACuD;AACvD,MAAM,WAAW,oBAAoB;IACnC,sEAAsE;IACtE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,uDAAuD;IACvD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,0DAA0D;IAC1D,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B;;mFAE+E;IAC/E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,qDAAqD;IACrD,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,sEAAsE;IACtE,aAAa,EAAE,MAAM,CAAA;IACrB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB;;;;OAIG;IACH,MAAM,EAAE,CACN,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE;QAAE,YAAY,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE,EACtD,SAAS,CAAC,EAAE,oBAAoB,KAC7B,IAAI,CAAA;IACT,wDAAwD;IACxD,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,iBAAiB,CAAC,EAChC,SAAS,EACT,MAAU,EACV,MAAU,EACV,MAAa,EACb,OAAiB,EACjB,aAAa,EACb,YAAY,EACZ,MAAM,EACN,aAAa,GACd,EAAE,sBAAsB,2CAybxB"}

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

@@ -0,0 +1,175 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Check, Image as ImageIcon, MapPin, Star, Users } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { useCatalogUiI18nOrDefault, useCatalogUiMessagesOrDefault } from "../i18n/index.js";
+import { fetchPackageDetail, useVoyantCatalogContext } from "../index.js";
+import { AvailabilityCalendar, compareMonth, monthOfIso, shiftMonth, } from "./availability-calendar.js";
+import { Gallery, GalleryLightbox } from "./catalog-gallery.js";
+import { addDays, formatCountry, formatDay, formatMoney, formatStars, humanizeFeature, isoDate, ReviewsCard, RoomRateCard, roomCodeOf, sectionIconFor, } from "./product-detail-page-parts.js";
+export function ProductDetailPage({ productId, adults = 2, nights = 7, locale = "ro", surface = "admin", productsLabel, productsHref, onBook, onBreadcrumbs, }) {
+    const { baseUrl, fetcher } = useVoyantCatalogContext();
+    const t = useCatalogUiMessagesOrDefault().catalogBrowser.detail;
+    const { locale: resolvedLocale } = useCatalogUiI18nOrDefault();
+    const [state, setState] = useState({ status: "loading", product: null, offers: [], retryable: false, source: null });
+    const [monthCursor, setMonthCursor] = useState(null);
+    const [selected, setSelected] = useState(null);
+    // null = lightbox closed; a number = open at that gallery index.
+    const [lightbox, setLightbox] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        setState((p) => ({ ...p, status: "loading" }));
+        void (async () => {
+            try {
+                const json = await fetchPackageDetail({ baseUrl, fetcher, surface }, {
+                    productId,
+                    departureDateFrom: isoDate(addDays(new Date(), 7)),
+                    departureDateTo: isoDate(addDays(new Date(), 230)),
+                    adults,
+                    nights: { min: nights, max: nights },
+                    locale,
+                });
+                if (cancelled)
+                    return;
+                const offers = json.offers ?? [];
+                setState({
+                    status: "ready",
+                    product: json.product ?? null,
+                    offers,
+                    retryable: Boolean(json.retryable),
+                    source: json.source ?? null,
+                });
+                const first = offers
+                    .map((o) => o.checkIn)
+                    .filter((d) => Boolean(d))
+                    .sort()[0];
+                if (first) {
+                    setMonthCursor(monthOfIso(first.slice(0, 10)));
+                    setSelected(first.slice(0, 10));
+                }
+            }
+            catch {
+                if (!cancelled)
+                    setState({ status: "error", product: null, offers: [], retryable: true, source: null });
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [productId, adults, nights, locale, baseUrl, fetcher, surface]);
+    // Per-day availability: how many offers depart each day + the cheapest.
+    const byDate = useMemo(() => {
+        const acc = new Map();
+        for (const o of state.offers) {
+            if (!o.checkIn || !o.total)
+                continue;
+            const day = o.checkIn.slice(0, 10);
+            const cur = acc.get(day) ?? { count: 0, fromMinor: Number.POSITIVE_INFINITY };
+            cur.count += 1;
+            cur.fromMinor = Math.min(cur.fromMinor, o.total.amountMinor);
+            acc.set(day, cur);
+        }
+        const out = new Map();
+        for (const [day, v] of acc)
+            out.set(day, v);
+        return out;
+    }, [state.offers]);
+    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 = state.offers.find((o) => o.total)?.total?.currency ?? "EUR";
+    const fromPrice = useMemo(() => {
+        const vals = [...byDate.values()].map((v) => v.fromMinor);
+        return vals.length ? Math.min(...vals) : null;
+    }, [byDate]);
+    const selectedOffers = useMemo(() => state.offers
+        .filter((o) => o.checkIn?.slice(0, 10) === selected)
+        .sort((a, b) => (a.total?.amountMinor ?? 0) - (b.total?.amountMinor ?? 0)), [state.offers, selected]);
+    const product = state.product;
+    // Join live offers to the accommodation's content rooms by code, so the
+    // bookable rates can be grouped under each room with its details/amenities.
+    const roomByCode = useMemo(() => {
+        const m = new Map();
+        for (const r of product?.rooms ?? []) {
+            if (r.code)
+                m.set(r.code.toUpperCase(), r);
+        }
+        return m;
+    }, [product]);
+    // The selected day's offers grouped by room type (TUI "configure room"
+    // layout): one card per room, its board options listed beneath, cheapest
+    // room first.
+    const roomGroups = useMemo(() => {
+        const groups = new Map();
+        for (const o of selectedOffers) {
+            // Offer room ids come prefixed with the accommodation code
+            // (e.g. `LCA20072:DZL1`); the content room code is the bare suffix
+            // (`DZL1`). Strip the prefix so the join + the badge stay clean.
+            const code = roomCodeOf(o.roomTypeId);
+            const key = (code ?? "__room__").toUpperCase();
+            const g = groups.get(key) ?? { code, offers: [] };
+            g.offers.push(o);
+            groups.set(key, g);
+        }
+        return [...groups.values()]
+            .map((g) => ({
+            code: g.code,
+            room: g.code ? (roomByCode.get(g.code.toUpperCase()) ?? null) : null,
+            offers: g.offers
+                .slice()
+                .sort((a, b) => (a.total?.amountMinor ?? 0) - (b.total?.amountMinor ?? 0)),
+        }))
+            .sort((a, b) => (a.offers[0]?.total?.amountMinor ?? 0) - (b.offers[0]?.total?.amountMinor ?? 0));
+    }, [selectedOffers, roomByCode]);
+    const bookOffer = (offer) => onBook(productId, { connectionId: state.source?.connectionId, ref: state.source?.ref }, {
+        checkIn: offer.checkIn,
+        name: state.product?.name ?? null,
+        heroImageUrl: state.product?.media.find((m) => m.src)?.src ?? null,
+        roomTypeId: offer.roomTypeId,
+        ratePlanId: offer.ratePlanId ?? null,
+        board: offer.board,
+    });
+    const stars = formatStars(product?.stars);
+    const location = [
+        product?.city,
+        product?.region,
+        formatCountry(product?.countryCode, resolvedLocale),
+    ]
+        .filter((v) => Boolean(v))
+        .join(" · ");
+    const gallery = product?.media ?? [];
+    // Room photos are an upstream gap for some hotels — only show the image area
+    // when at least one room has a photo, else render clean text-only cards.
+    const roomsHaveImages = (product?.rooms ?? []).some((r) => Boolean(r.image));
+    // Split the content sections so the overview can lead with the marketing
+    // highlights ("Top reasons") + a clean location panel; the rest stay as the
+    // facilities list further down.
+    const sections = product?.sections ?? [];
+    const highlights = sections.find((s) => s.kind === "TOP_REASONS" || s.type === "HIGHLIGHT") ?? null;
+    const locationSection = sections.find((s) => s.kind === "LOCALIZATION") ?? null;
+    const aboutSections = sections.filter((s) => s !== highlights && s !== locationSection);
+    const monthIndex = monthCursor
+        ? availableMonths.findIndex((m) => compareMonth(m, monthCursor) === 0)
+        : -1;
+    // Header breadcrumbs (Packages › this product) — the product segment appears
+    // once its name has loaded.
+    useEffect(() => {
+        if (!onBreadcrumbs)
+            return;
+        onBreadcrumbs(product?.name
+            ? [{ label: productsLabel, href: productsHref }, { label: product.name }]
+            : [{ label: productsLabel, href: productsHref }]);
+    }, [product?.name, productsLabel, productsHref, onBreadcrumbs]);
+    if (state.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-2 h-4 w-1/4 animate-pulse rounded bg-muted/20" }), _jsx("div", { className: "mt-6 h-64 w-full animate-pulse rounded-lg bg-muted/30" })] }));
+    }
+    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: product?.name ?? t.room }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground text-sm", children: [stars && _jsx("span", { className: "text-amber-500", children: stars }), location && _jsx("span", { children: location }), product?.category && _jsxs("span", { className: "capitalize", children: ["\u00B7 ", product.category] }), product?.reviews?.rating != null && (_jsxs("span", { className: "flex items-center gap-1 rounded bg-secondary px-1.5 py-0.5 font-medium text-secondary-foreground text-xs", children: [_jsx(Star, { className: "h-3 w-3 fill-current" }), product.reviews.rating.toFixed(1), product.reviews.reviewsCount != null && (_jsxs("span", { className: "font-normal text-muted-foreground", children: ["(", product.reviews.reviewsCount, ")"] }))] }))] })] }), 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) }), _jsx("div", { className: "text-muted-foreground text-xs", children: t.nightsFlightIncluded.replace("{nights}", String(nights)) })] }))] }), product?.features && product.features.length > 0 && (_jsx("div", { className: "mt-4 flex flex-wrap gap-1.5", children: product.features.map((f) => (_jsxs(Badge, { variant: "outline", className: "gap-1 font-normal", children: [_jsx(Check, { className: "h-3 w-3 text-emerald-600 dark:text-emerald-400" }), humanizeFeature(f.label ?? f.code ?? "")] }, f.code ?? f.label))) })), (highlights || locationSection || product?.reviews?.rating != null) && (_jsxs("div", { className: "mt-6 space-y-4", children: [highlights && highlights.lines.length > 0 && (_jsxs("div", { className: "rounded-lg border bg-muted/30 p-4", children: [_jsx("h2", { className: "mb-2 font-medium text-sm", children: t.highlights }), _jsx("div", { className: "flex flex-wrap gap-x-6 gap-y-2", children: highlights.lines.map((line) => (_jsxs("span", { className: "flex items-center gap-2 text-sm", children: [_jsx(Check, { className: "h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" }), line] }, line))) })] })), (locationSection || product?.reviews?.rating != null) && (_jsxs("div", { className: "grid gap-4 md:grid-cols-2", children: [locationSection && locationSection.lines.length > 0 && (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("h2", { className: "mb-2 flex items-center gap-1.5 font-medium text-sm", children: [_jsx(MapPin, { className: "h-4 w-4 text-muted-foreground" }), locationSection.title ?? t.location] }), _jsx("ul", { className: "space-y-1.5 text-sm", children: locationSection.lines.map((line) => (_jsxs("li", { className: "flex items-start gap-2", children: [_jsx(Check, { className: "mt-0.5 h-4 w-4 shrink-0 text-emerald-600 dark:text-emerald-400" }), _jsx("span", { children: line })] }, line))) })] })), product?.reviews?.rating != null && _jsx(ReviewsCard, { reviews: product.reviews, t: t })] }))] })), _jsx("h2", { className: "mt-8 mb-2 font-medium text-lg", children: t.datesAndPrices }), state.status === "error" && (_jsx("div", { className: "rounded-md border border-destructive/40 bg-destructive/5 p-6 text-center text-destructive text-sm", children: t.datesError })), state.status === "ready" && byDate.size === 0 && (_jsx("div", { className: "rounded-md border border-dashed p-6 text-center text-muted-foreground text-sm", children: state.retryable
+                    ? t.availabilityUnavailable
+                    : t.noDepartures.replace("{nights}", String(nights)) })), monthCursor && byDate.size > 0 && (_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 && roomGroups.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("h3", { className: "font-medium", children: [formatDay(selected, resolvedLocale), " \u00B7", " ", _jsxs("span", { className: "text-muted-foreground", children: [roomGroups.length, " ", roomGroups.length === 1 ? t.roomType : t.roomTypes] })] }), roomGroups.map((group) => (_jsx(RoomRateCard, { group: group, showImage: roomsHaveImages, onBook: bookOffer, t: t, locale: resolvedLocale }, group.code ?? group.offers[0]?.id)))] })) : (_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 })) })] })), aboutSections.length > 0 && (_jsxs("div", { className: "mt-10", children: [_jsx("h2", { className: "mb-3 font-medium text-lg", children: t.about }), _jsx("div", { className: "columns-1 gap-4 sm:columns-2 lg:columns-3 [&>*]:mb-4 [&>*]:break-inside-avoid", children: aboutSections.map((s) => {
+                            const Icon = sectionIconFor(s.kind);
+                            return (_jsxs("div", { className: "rounded-lg border p-4", children: [_jsxs("h3", { className: "mb-2 flex items-center gap-2 font-medium text-sm", children: [_jsx(Icon, { className: "h-4 w-4 shrink-0 text-muted-foreground" }), s.title ?? s.kind] }), _jsx("ul", { className: "space-y-1.5 text-muted-foreground text-sm", children: s.lines.map((line) => (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "mt-2 h-1 w-1 shrink-0 rounded-full bg-muted-foreground/40" }), _jsx("span", { children: line })] }, line))) })] }, s.title ?? s.kind));
+                        }) })] })), product?.rooms && product.rooms.length > 0 && (_jsxs("div", { className: "mt-10", children: [_jsx("h2", { className: "mb-3 font-medium text-lg", children: t.roomsTitle }), _jsx("div", { className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-3", children: product.rooms.map((room) => (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-lg border", children: [roomsHaveImages && (_jsx("div", { className: "relative aspect-[4/3] w-full bg-muted", children: room.image ? (_jsx("img", { src: room.image, alt: room.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(ImageIcon, { 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: room.name ?? t.room }), _jsxs("div", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-muted-foreground text-xs", children: [room.area != null && _jsxs("span", { children: [room.area, " m\u00B2"] }), room.maxGuests != null && (_jsxs("span", { className: "flex items-center gap-1", children: [_jsx(Users, { className: "h-3 w-3" }), " ", t.max, " ", room.maxGuests] })), room.view && _jsx("span", { children: room.view })] }), room.specifications.length > 0 && (_jsx("ul", { className: "mt-0.5 space-y-0.5 text-muted-foreground text-xs", children: room.specifications.slice(0, 4).map((spec) => (_jsxs("li", { children: ["\u00B7 ", spec] }, spec))) }))] })] }, room.name ?? room.specifications.join("|")))) })] }))] }));
+}

package/dist/components/scheduled-catalog-page.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+/**
+ * Scheduled (fixed-departure) catalog surface — products whose departures are
+ * known and finite, so it's a **departures-first browse** (the grid + each
+ * product's dated departures and remaining seats/allotment in the detail
+ * sheet). Pinned to `supplyModel: scheduled` so it never mixes with
+ * dynamically-composed packages, and split by duration:
+ *   - `excursions` — single-day trips (`durationDays ≤ 1`)
+ *   - `tours`      — multi-day circuits (`durationDays ≥ 2`)
+ *
+ * Presentational: the localized `title`/`subtitle` and the browse grid itself
+ * (`renderBrowseGrid`, the host's `CatalogBrowsePage` wired to its data) are
+ * injected. This surface only owns the header layout + the supply-model /
+ * duration locks that define the scope.
+ */
+export type ScheduledScope = "excursions" | "tours";
+export interface ScheduledCatalogLocks {
+    lockedFacets: Record<string, Array<string | number>>;
+    lockedRanges: Record<string, {
+        gte?: number;
+        lte?: number;
+    }>;
+}
+export interface ScheduledCatalogPageProps {
+    scope: ScheduledScope;
+    /** Localized surface title (e.g. "Excursions" / "Tours"). */
+    title: string;
+    /** Localized surface tagline. */
+    subtitle: string;
+    /** Render the embedded browse grid with the surface's locked filters applied. */
+    renderBrowseGrid: (locks: ScheduledCatalogLocks) => ReactNode;
+}
+export declare function ScheduledCatalogPage({ scope, title, subtitle, renderBrowseGrid, }: ScheduledCatalogPageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=scheduled-catalog-page.d.ts.map

package/dist/components/scheduled-catalog-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scheduled-catalog-page.d.ts","sourceRoot":"","sources":["../../src/components/scheduled-catalog-page.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,cAAc,GAAG,YAAY,GAAG,OAAO,CAAA;AAEnD,MAAM,WAAW,qBAAqB;IACpC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC,CAAC,CAAA;IACpD,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE;QAAE,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAC7D;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,cAAc,CAAA;IACrB,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,iFAAiF;IACjF,gBAAgB,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,SAAS,CAAA;CAC9D;AAED,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,KAAK,EACL,QAAQ,EACR,gBAAgB,GACjB,EAAE,yBAAyB,2CAc3B"}

package/dist/components/scheduled-catalog-page.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function ScheduledCatalogPage({ scope, title, subtitle, renderBrowseGrid, }) {
+    const lockedRanges = scope === "excursions" ? { durationDays: { lte: 1 } } : { durationDays: { gte: 2 } };
+    return (_jsxs("div", { className: "mx-auto w-full max-w-screen-2xl px-6 py-6 lg:px-8", children: [_jsxs("div", { className: "mb-4", children: [_jsx("h1", { className: "font-semibold text-2xl", children: title }), _jsx("p", { className: "text-muted-foreground text-sm", children: subtitle })] }), renderBrowseGrid({ lockedFacets: { supplyModel: ["scheduled"] }, lockedRanges })] }));
+}

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export { useCatalogSlots, useCruiseContent, useCruisePrice, useCruiseSailingPricing, useDepartureAirports, usePackageDetail, usePackageSearch, } from "./use-catalog-offers.js";
+export { type CatalogSearchFilter, type CatalogSearchMode, type UseCatalogSearchOptions, useCatalogSearch, } from "./use-catalog-search.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,uBAAuB,EACvB,oBAAoB,EACpB,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,yBAAyB,CAAA;AAChC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,gBAAgB,GACjB,MAAM,yBAAyB,CAAA"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+export { useCatalogSlots, useCruiseContent, useCruisePrice, useCruiseSailingPricing, useDepartureAirports, usePackageDetail, usePackageSearch, } from "./use-catalog-offers.js";
+export { useCatalogSearch, } from "./use-catalog-search.js";

package/dist/hooks/use-catalog-offers.d.ts

@@ -0,0 +1,186 @@
+import { type CatalogSurface, type NightsRange } from "../catalog-offers-client.js";
+interface BaseOfferHookOptions {
+    /** `/v1/admin/...` (default) vs `/v1/public/...`. */
+    surface?: CatalogSurface;
+    /** Disable the query (e.g. while inputs are empty). */
+    enabled?: boolean;
+    /** TanStack Query stale time, milliseconds. */
+    staleTime?: number;
+}
+/**
+ * Departure airports for a destination — probed before a full availability
+ * search so the operator can pick where they fly from.
+ */
+export declare function useDepartureAirports(options: {
+    countryCode: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    departureAirports?: {
+        code: string;
+        label: string;
+    }[] | undefined;
+}, Error>;
+/** Dynamic package search by destination/dates/occupancy → live offers. */
+export declare function usePackageSearch(options: {
+    countryCode: string;
+    departureDateFrom: string;
+    departureDateTo: string;
+    adults: number;
+    nights: NightsRange;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    offers?: {
+        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;
+    }[] | undefined;
+    departureAirports?: {
+        code: string;
+        label: string;
+    }[] | undefined;
+    currency?: string | undefined;
+    retryable?: boolean | undefined;
+}, Error>;
+/** Full product detail (source content + live dated offers). */
+export declare function usePackageDetail(options: {
+    productId: string;
+    departureDateFrom: string;
+    departureDateTo: string;
+    adults: number;
+    nights: NightsRange;
+    locale?: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    product?: {
+        name: string | null;
+        stars: number | null;
+        city: string | null;
+        region: string | null;
+        countryCode: string | null;
+        category: string | null;
+        media: {
+            src: string;
+            rel: string | null;
+            caption: string | null;
+        }[];
+        sections: {
+            title: string | null;
+            kind: string | null;
+            type: string | null;
+            lines: string[];
+        }[];
+        features: {
+            code: string | null;
+            label: string | null;
+            type: string | null;
+        }[];
+        rooms: {
+            code: string | null;
+            name: string | null;
+            area: number | null;
+            maxGuests: number | null;
+            view: string | null;
+            specifications: string[];
+            image: string | null;
+        }[];
+        reviews: {
+            source: string | null;
+            rating: number | null;
+            reviewsCount: number | null;
+            subratings: {
+                name: string | null;
+                value: number | null;
+            }[];
+        } | null;
+    } | null | undefined;
+    offers?: {
+        id: string;
+        title: string | null;
+        checkIn: string | null;
+        checkOut: string | null;
+        nights: number | null;
+        board: string | null;
+        roomTypeId: string | null;
+        perPerson: {
+            amountMinor: number;
+            currency: string;
+        } | null;
+        total: {
+            amountMinor: number;
+            currency: string;
+        } | null;
+        flights: {
+            origin: string | null;
+            destination: string | null;
+            departureAt: string | null;
+            carrier: string | null;
+            flightNumber: string | null;
+        }[];
+        freeCancellationUntil: string | null;
+        ratePlanId?: string | null | undefined;
+    }[] | undefined;
+    retryable?: boolean | undefined;
+    source?: {
+        connectionId: string;
+        ref: string | null;
+    } | null | undefined;
+}, Error>;
+/** Cruise-level "from" price (Connect). */
+export declare function useCruisePrice(options: {
+    cruiseId: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    fromAmountMinor?: number | null | undefined;
+    currency?: string | null | undefined;
+}, Error>;
+/** Live per-cabin pricing for one sailing (lazy — enable on row expand). */
+export declare function useCruiseSailingPricing(options: {
+    cruiseId: string;
+    sailingRef: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    cabins?: {
+        code: string;
+        fromAmountMinor: number;
+        available: boolean;
+    }[] | undefined;
+    currency?: string | null | undefined;
+}, Error>;
+/** Rich cruise content (gallery/sailings/cabins/itinerary) from the source. */
+export declare function useCruiseContent(options: {
+    cruiseId: string;
+    locale?: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    data?: {
+        content?: unknown;
+    } | undefined;
+}, Error>;
+/** Per-departure availability slots for an entity. */
+export declare function useCatalogSlots(options: {
+    entityModule: string;
+    entityId: string;
+} & BaseOfferHookOptions): import("@tanstack/react-query").UseQueryResult<{
+    rows: {
+        id: string;
+        startsAt?: string | undefined;
+        status?: string | null | undefined;
+        unlimited?: boolean | null | undefined;
+        remainingPax?: number | null | undefined;
+        initialPax?: number | null | undefined;
+    }[];
+}, Error>;
+export {};
+//# sourceMappingURL=use-catalog-offers.d.ts.map

package/dist/hooks/use-catalog-offers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-catalog-offers.d.ts","sourceRoot":"","sources":["../../src/hooks/use-catalog-offers.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EAQnB,KAAK,WAAW,EACjB,MAAM,6BAA6B,CAAA;AAGpC,UAAU,oBAAoB;IAC5B,qDAAqD;IACrD,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE;IAAE,WAAW,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB;;;;;UAU3F;AAED,2EAA2E;AAC3E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE;IACP,WAAW,EAAE,MAAM,CAAA;IACnB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,WAAW,CAAA;CACpB,GAAG,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAkCzB;AAED,gEAAgE;AAChE,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE;IACP,SAAS,EAAE,MAAM,CAAA;IACjB,iBAAiB,EAAE,MAAM,CAAA;IACzB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;IACd,MAAM,EAAE,WAAW,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,GAAG,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAmCzB;AAED,2CAA2C;AAC3C,wBAAgB,cAAc,CAAC,OAAO,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB;;;UAUlF;AAED,4EAA4E;AAC5E,wBAAgB,uBAAuB,CACrC,OAAO,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB;;;;;;;UAWzE;AAED,+EAA+E;AAC/E,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB;;;;UAWtE;AAED,sDAAsD;AACtD,wBAAgB,eAAe,CAC7B,OAAO,EAAE;IAAE,YAAY,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,GAAG,oBAAoB;;;;;;;;;UAW3E"}