@voyant-travel/trips-react 0.110.2

package/dist/admin/trip-list-filters.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOperatorAdminMessages as useAdminMessages } from "@voyant-travel/admin";
+import { useCatalogSearch } from "@voyant-travel/catalog-react";
+import { AsyncCombobox } from "@voyant-travel/ui/components/async-combobox";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Checkbox } from "@voyant-travel/ui/components/checkbox";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Popover, PopoverContent, PopoverTrigger } from "@voyant-travel/ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { ListFilter } from "lucide-react";
+import * as React from "react";
+export const TRIP_STATUS_ALL = "__all__";
+function catalogHitLabel(hit) {
+    return (catalogHitStringField(hit, "name") ??
+        catalogHitStringField(hit, "title") ??
+        catalogHitStringField(hit, "hotel.name") ??
+        hit.id);
+}
+function catalogHitStringField(hit, field) {
+    const value = hit.document.fields[field];
+    return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+function CatalogFilterCombobox({ label, value, onValueChange, items, selectedItem, onSelectedItemChange, onSearchChange, placeholder, emptyText, onFiltersChanged, }) {
+    const id = `trips-filter-${label.toLowerCase()}`;
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(AsyncCombobox, { value: value, onChange: (nextValue) => {
+                    onValueChange(nextValue);
+                    const match = nextValue ? items.find((hit) => hit.id === nextValue) : null;
+                    onSelectedItemChange(match ?? null);
+                    onFiltersChanged();
+                }, items: items, selectedItem: selectedItem, getKey: (hit) => hit.id, getLabel: catalogHitLabel, getSecondary: (hit) => catalogHitStringField(hit, "source.kind") ?? undefined, onSearchChange: onSearchChange, placeholder: placeholder, emptyText: emptyText })] }));
+}
+export function TripListFiltersPopover({ open, onOpenChange, activeFilterCount, status, onStatusChange, productId, onProductIdChange, accommodationId, onAccommodationIdChange, cruiseId, onCruiseIdChange, hasFlight, onHasFlightChange, totalMin, onTotalMinChange, totalMax, onTotalMaxChange, createdRange, onCreatedRangeChange, onFiltersChanged, }) {
+    const messages = useAdminMessages().trips;
+    const filterMessages = messages.filters;
+    const statusOptions = [
+        { value: TRIP_STATUS_ALL, label: filterMessages.allStatuses },
+        { value: "draft", label: messages.statuses.draft },
+        { value: "priced", label: messages.statuses.priced },
+        { value: "reserve_in_progress", label: messages.statuses.reserve_in_progress },
+        { value: "reserved", label: messages.statuses.reserved },
+        { value: "checkout_started", label: messages.statuses.checkout_started },
+        { value: "booked", label: messages.statuses.booked },
+        { value: "failed", label: messages.statuses.failed },
+        { value: "cancelled", label: messages.statuses.cancelled },
+    ];
+    const [selectedProduct, setSelectedProduct] = React.useState(null);
+    const [productSearch, setProductSearch] = React.useState("");
+    const [selectedStay, setSelectedStay] = React.useState(null);
+    const [staySearch, setStaySearch] = React.useState("");
+    const [selectedCruise, setSelectedCruise] = React.useState(null);
+    const [cruiseSearch, setCruiseSearch] = React.useState("");
+    const productsQuery = useCatalogSearch({
+        vertical: "products",
+        query: productSearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const productHits = productsQuery.data?.hits ?? [];
+    const staysQuery = useCatalogSearch({
+        vertical: "accommodations",
+        query: staySearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const stayHits = staysQuery.data?.hits ?? [];
+    const cruisesQuery = useCatalogSearch({
+        vertical: "cruises",
+        query: cruiseSearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+    });
+    const cruiseHits = cruisesQuery.data?.hits ?? [];
+    const markChanged = () => onFiltersChanged();
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { render: _jsxs(Button, { variant: "outline", size: "default", children: [_jsx(ListFilter, { className: "mr-2 size-4" }), filterMessages.trigger, activeFilterCount > 0 ? (_jsx(Badge, { variant: "secondary", className: "ml-2 px-1.5", children: activeFilterCount })) : null] }) }), _jsx(PopoverContent, { align: "start", className: "w-[22rem] p-4", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "trips-filter-status", children: filterMessages.status }), _jsxs(Select, { value: status, onValueChange: (value) => {
+                                        onStatusChange((value ?? TRIP_STATUS_ALL));
+                                        markChanged();
+                                    }, children: [_jsx(SelectTrigger, { id: "trips-filter-status", className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: statusOptions.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] })] }), _jsx(CatalogFilterCombobox, { label: filterMessages.products, value: productId, onValueChange: onProductIdChange, items: productHits, selectedItem: selectedProduct, onSelectedItemChange: setSelectedProduct, onSearchChange: setProductSearch, placeholder: filterMessages.anyProduct, emptyText: filterMessages.noProducts, onFiltersChanged: markChanged }), _jsx(CatalogFilterCombobox, { label: filterMessages.stays, value: accommodationId, onValueChange: onAccommodationIdChange, items: stayHits, selectedItem: selectedStay, onSelectedItemChange: setSelectedStay, onSearchChange: setStaySearch, placeholder: filterMessages.anyStay, emptyText: filterMessages.noStays, onFiltersChanged: markChanged }), _jsx(CatalogFilterCombobox, { label: filterMessages.cruises, value: cruiseId, onValueChange: onCruiseIdChange, items: cruiseHits, selectedItem: selectedCruise, onSelectedItemChange: setSelectedCruise, onSearchChange: setCruiseSearch, placeholder: filterMessages.anyCruise, emptyText: filterMessages.noCruises, onFiltersChanged: markChanged }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: "trips-filter-flight", checked: hasFlight, onCheckedChange: (checked) => {
+                                        onHasFlightChange(checked === true);
+                                        markChanged();
+                                    } }), _jsx(Label, { htmlFor: "trips-filter-flight", className: "font-normal", children: filterMessages.hasFlight })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.total }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: filterMessages.min, value: totalMin, onChange: (event) => {
+                                                onTotalMinChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.totalMinAria }), _jsx("span", { className: "text-muted-foreground", children: "-" }), _jsx(Input, { type: "number", min: 0, step: "0.01", placeholder: filterMessages.max, value: totalMax, onChange: (event) => {
+                                                onTotalMaxChange(event.target.value);
+                                                markChanged();
+                                            }, className: "w-full", "aria-label": filterMessages.totalMaxAria })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: filterMessages.createdAt }), _jsx(DateRangePicker, { value: createdRange, onChange: (value) => {
+                                        onCreatedRangeChange(value);
+                                        markChanged();
+                                    }, placeholder: filterMessages.anyDate, clearable: true, className: "w-full" })] })] }) })] }));
+}

package/dist/admin/trips-host.d.ts

@@ -0,0 +1,15 @@
+import type { ListTripsParams } from "../operations.js";
+/**
+ * Initial list parameters mirrored by the `trips-index`
+ * contribution's loader so the SSR-seeded cache entry and the page's first
+ * `useQuery` line up on the same key.
+ */
+export declare const initialTripsListParams: ListTripsParams;
+/**
+ * Packaged admin host for the trips list page (packaged-admin RFC Phase 3).
+ * Opening a trip (or composing a new one) resolves the `"trip.detail"`
+ * semantic destination (RFC §4.7); the page keeps its filter/sort/paging
+ * state locally (no URL search contract), so the host takes no props.
+ */
+export declare function TripsHost(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trips-host.d.ts.map

package/dist/admin/trips-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trips-host.d.ts","sourceRoot":"","sources":["../../src/admin/trips-host.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAoBvD;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,eAKpC,CAAA;AAaD;;;;;GAKG;AACH,wBAAgB,SAAS,4CA8RxB"}

package/dist/admin/trips-host.js

@@ -0,0 +1,233 @@
+// agent-quality: file-size exception -- owner: trips-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useOperatorAdminMessages as useAdminMessages, useAdminNavigate, } from "@voyant-travel/admin";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge } from "@voyant-travel/ui/components/badge";
+import { Button } from "@voyant-travel/ui/components/button";
+import { Input } from "@voyant-travel/ui/components/input";
+import { Label } from "@voyant-travel/ui/components/label";
+import { Skeleton } from "@voyant-travel/ui/components/skeleton";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyant-travel/ui/components/table";
+import { ArrowDown, ArrowUp, ArrowUpDown, Plus, Search, X } from "lucide-react";
+import * as React from "react";
+import { useVoyantTripsContext } from "../provider.js";
+import { listTripsQueryOptions } from "../query-options.js";
+import { componentTitleFor, readComponentSchedule, sortComponentsBySchedule, } from "./trip-component-display.js";
+import { TRIP_STATUS_ALL, TripListFiltersPopover, } from "./trip-list-filters.js";
+const PAGE_SIZE = 25;
+const SKELETON_ROWS = 6;
+const TABLE_COLUMN_COUNT = 7;
+/**
+ * Initial list parameters mirrored by the `trips-index`
+ * contribution's loader so the SSR-seeded cache entry and the page's first
+ * `useQuery` line up on the same key.
+ */
+export const initialTripsListParams = {
+    limit: PAGE_SIZE,
+    offset: 0,
+    sortBy: "updatedAt",
+    sortDir: "desc",
+};
+const statusBadgeVariant = {
+    draft: "secondary",
+    priced: "secondary",
+    reserve_in_progress: "secondary",
+    reserved: "default",
+    checkout_started: "secondary",
+    booked: "default",
+    failed: "destructive",
+    cancelled: "destructive",
+};
+/**
+ * Packaged admin host for the trips list page (packaged-admin RFC Phase 3).
+ * Opening a trip (or composing a new one) resolves the `"trip.detail"`
+ * semantic destination (RFC §4.7); the page keeps its filter/sort/paging
+ * state locally (no URL search contract), so the host takes no props.
+ */
+export function TripsHost() {
+    const messages = useAdminMessages().trips;
+    const listMessages = messages.list;
+    const navigateTo = useAdminNavigate();
+    const { baseUrl, fetcher } = useVoyantTripsContext();
+    const client = React.useMemo(() => ({ baseUrl, fetcher }), [baseUrl, fetcher]);
+    const [search, setSearch] = React.useState("");
+    const [status, setStatus] = React.useState(TRIP_STATUS_ALL);
+    const [productId, setProductId] = React.useState(null);
+    const [accommodationId, setAccommodationId] = React.useState(null);
+    const [cruiseId, setCruiseId] = React.useState(null);
+    const [hasFlight, setHasFlight] = React.useState(false);
+    const [totalMin, setTotalMin] = React.useState("");
+    const [totalMax, setTotalMax] = React.useState("");
+    const [createdRange, setCreatedRange] = React.useState(null);
+    const [sortBy, setSortBy] = React.useState("updatedAt");
+    const [sortDir, setSortDir] = React.useState("desc");
+    const [offset, setOffset] = React.useState(0);
+    const [filterPopoverOpen, setFilterPopoverOpen] = React.useState(false);
+    const totalMinCents = parseAmountCents(totalMin);
+    const totalMaxCents = parseAmountCents(totalMax);
+    const params = React.useMemo(() => ({
+        limit: PAGE_SIZE,
+        offset,
+        sortBy,
+        sortDir,
+        ...(search.trim() ? { search: search.trim() } : {}),
+        ...(status !== TRIP_STATUS_ALL ? { status } : {}),
+        ...(productId ? { productId } : {}),
+        ...(accommodationId ? { accommodationId } : {}),
+        ...(cruiseId ? { cruiseId } : {}),
+        ...(hasFlight ? { hasFlight: true } : {}),
+        ...(totalMinCents !== null ? { totalMinCents } : {}),
+        ...(totalMaxCents !== null ? { totalMaxCents } : {}),
+        ...(createdRange?.from ? { createdFrom: createdRange.from } : {}),
+        ...(createdRange?.to ? { createdTo: createdRange.to } : {}),
+    }), [
+        offset,
+        sortBy,
+        sortDir,
+        search,
+        status,
+        productId,
+        accommodationId,
+        cruiseId,
+        hasFlight,
+        totalMinCents,
+        totalMaxCents,
+        createdRange,
+    ]);
+    const activeFilterCount = (status !== TRIP_STATUS_ALL ? 1 : 0) +
+        (productId ? 1 : 0) +
+        (accommodationId ? 1 : 0) +
+        (cruiseId ? 1 : 0) +
+        (hasFlight ? 1 : 0) +
+        (totalMin !== "" || totalMax !== "" ? 1 : 0) +
+        (createdRange?.from || createdRange?.to ? 1 : 0);
+    const { data, isPending, isFetching, isError } = useQuery(listTripsQueryOptions(client, params));
+    const trips = data?.data ?? [];
+    const total = data?.total ?? 0;
+    const page = Math.floor(offset / PAGE_SIZE) + 1;
+    const pageCount = Math.max(1, Math.ceil(total / PAGE_SIZE));
+    const showSkeleton = isPending || (isFetching && trips.length === 0);
+    const resetOffset = () => setOffset(0);
+    const handleSort = (field) => {
+        setOffset(0);
+        if (sortBy !== field) {
+            setSortBy(field);
+            setSortDir(field === "status" ? "asc" : "desc");
+            return;
+        }
+        setSortDir((prev) => (prev === "asc" ? "desc" : "asc"));
+    };
+    const hasActiveFilters = search.trim() !== "" || activeFilterCount > 0;
+    const clearFilters = () => {
+        setSearch("");
+        setStatus(TRIP_STATUS_ALL);
+        setProductId(null);
+        setAccommodationId(null);
+        setCruiseId(null);
+        setHasFlight(false);
+        setTotalMin("");
+        setTotalMax("");
+        setCreatedRange(null);
+        resetOffset();
+    };
+    return (_jsxs("main", { className: "flex flex-col gap-6 p-6", children: [_jsx("div", { className: "flex flex-col gap-4 md:flex-row md:items-end md:justify-between", children: _jsxs("div", { children: [_jsx("h1", { className: "font-bold text-2xl tracking-tight", children: listMessages.title }), _jsx("p", { className: "text-muted-foreground text-sm", children: listMessages.description })] }) }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs("div", { className: "relative min-w-[14rem] flex-1", children: [_jsx(Label, { htmlFor: "trips-search", className: "sr-only", children: listMessages.searchLabel }), _jsx(Search, { className: "-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" }), _jsx(Input, { id: "trips-search", placeholder: listMessages.searchPlaceholder, value: search, onChange: (event) => {
+                                            setSearch(event.target.value);
+                                            resetOffset();
+                                        }, className: "pl-9" })] }), _jsx(TripListFiltersPopover, { open: filterPopoverOpen, onOpenChange: setFilterPopoverOpen, activeFilterCount: activeFilterCount, status: status, onStatusChange: setStatus, productId: productId, onProductIdChange: setProductId, accommodationId: accommodationId, onAccommodationIdChange: setAccommodationId, cruiseId: cruiseId, onCruiseIdChange: setCruiseId, hasFlight: hasFlight, onHasFlightChange: setHasFlight, totalMin: totalMin, onTotalMinChange: setTotalMin, totalMax: totalMax, onTotalMaxChange: setTotalMax, createdRange: createdRange, onCreatedRangeChange: setCreatedRange, onFiltersChanged: resetOffset }), hasActiveFilters ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: clearFilters, children: [_jsx(X, { className: "mr-1 size-4" }), listMessages.clearFilters] })) : null, _jsx("div", { className: "ml-auto", children: _jsxs(Button, { onClick: () => navigateTo("trip.detail", { tripId: "new" }), children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), listMessages.newTrip] }) })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: listMessages.columns.start }), _jsx(TableHead, { children: listMessages.columns.end }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.status, field: "status", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: listMessages.columns.components }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.total, field: "total", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.created, field: "createdAt", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) }), _jsx(TableHead, { children: _jsx(SortHeader, { label: listMessages.columns.updated, field: "updatedAt", sortBy: sortBy, sortDir: sortDir, onSort: handleSort }) })] }) }), _jsx(TableBody, { children: showSkeleton ? (_jsx(TripTableSkeleton, { rows: SKELETON_ROWS })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-destructive text-sm", children: listMessages.loadFailed }) })) : trips.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: TABLE_COLUMN_COUNT, className: "h-24 text-center text-muted-foreground text-sm", children: hasActiveFilters ? listMessages.emptyFiltered : listMessages.empty }) })) : (trips.map((trip) => (_jsx(TripRow, { trip: trip, messages: messages, onOpen: () => navigateTo("trip.detail", { tripId: trip.envelope.id }) }, trip.envelope.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-muted-foreground text-sm", children: [_jsx("span", { children: total === 0
+                                    ? listMessages.countEmpty
+                                    : formatMessage(listMessages.countRange, {
+                                        start: String(trips.length === 0 ? 0 : offset + 1),
+                                        end: String(offset + trips.length),
+                                        total: String(total),
+                                    }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - PAGE_SIZE)), children: listMessages.previous }), _jsx("span", { children: formatMessage(listMessages.pageOf, {
+                                            page: String(page),
+                                            pageCount: String(pageCount),
+                                        }) }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + PAGE_SIZE >= total, onClick: () => setOffset((prev) => prev + PAGE_SIZE), children: listMessages.next })] })] })] })] }));
+}
+function SortHeader({ label, field, sortBy, sortDir, onSort }) {
+    const active = sortBy === field;
+    const Icon = active ? (sortDir === "asc" ? ArrowUp : ArrowDown) : ArrowUpDown;
+    return (_jsxs("button", { type: "button", onClick: () => onSort(field), className: "-ml-2 inline-flex h-8 items-center gap-1 rounded-sm px-2 hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: [_jsx("span", { children: label }), _jsx(Icon, { className: `size-3.5 ${active ? "text-foreground" : "text-muted-foreground/60"}`, "aria-hidden": true })] }));
+}
+function TripTableSkeleton({ rows }) {
+    return (_jsx(_Fragment, { children: Array.from({ length: rows }).map((_, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-5 w-20 rounded-full" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-48" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) }), _jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-20" }) })] }, `skeleton-${idx}`))) }));
+}
+function TripRow({ trip, messages, onOpen, }) {
+    const envelope = trip.envelope;
+    const activeComponents = sortComponentsBySchedule(trip.components.filter((component) => component.status !== "removed"));
+    const schedule = tripScheduleBounds(activeComponents);
+    return (_jsxs(TableRow, { className: "cursor-pointer", onClick: onOpen, children: [_jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-sm", children: formatDate(schedule.start) }) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-sm", children: formatDate(schedule.end) }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: statusBadgeVariant[envelope.status], children: messages.statuses[envelope.status] }) }), _jsx(TableCell, { children: _jsxs("div", { className: "min-w-0", children: [_jsx("p", { children: componentCountLabel(activeComponents, messages) }), _jsx(TripComponentSummary, { components: activeComponents, messages: messages })] }) }), _jsx(TableCell, { children: formatMoney(envelope.aggregateTotalAmountCents, envelope.aggregateCurrency) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-muted-foreground text-sm", children: formatDate(envelope.createdAt) }) }), _jsx(TableCell, { children: _jsx("span", { className: "whitespace-nowrap text-muted-foreground text-sm", children: formatDate(envelope.updatedAt) }) })] }));
+}
+function componentCountLabel(components, messages) {
+    const committedBookings = components.filter((component) => component.bookingId).length;
+    const externalRefs = components.filter((component) => component.orderId || component.paymentSessionId).length;
+    const parts = [
+        formatMessage(messages.list.componentCount, {
+            count: String(components.length),
+            label: components.length === 1 ? messages.list.componentSingular : messages.list.componentPlural,
+        }),
+    ];
+    if (committedBookings > 0) {
+        parts.push(formatMessage(messages.list.componentCount, {
+            count: String(committedBookings),
+            label: committedBookings === 1 ? messages.list.bookingSingular : messages.list.bookingPlural,
+        }));
+    }
+    if (externalRefs > 0) {
+        parts.push(`${externalRefs} ${messages.list.external}`);
+    }
+    return parts.join(" · ");
+}
+function TripComponentSummary({ components, messages, }) {
+    const visibleComponents = components.slice(0, 2);
+    if (visibleComponents.length === 0) {
+        return (_jsx("p", { className: "max-w-64 truncate text-muted-foreground text-xs", children: messages.list.noComponents }));
+    }
+    return (_jsxs("p", { className: "max-w-64 truncate text-muted-foreground text-xs", children: [visibleComponents.map((component, index) => (_jsxs("span", { children: [index > 0 ? ", " : "", _jsx(TripComponentName, { component: component })] }, component.id))), components.length > visibleComponents.length
+                ? ` +${components.length - visibleComponents.length}`
+                : ""] }));
+}
+function TripComponentName({ component }) {
+    return _jsx(_Fragment, { children: componentTitleFor(component) });
+}
+function tripScheduleBounds(components) {
+    let start = null;
+    let end = null;
+    for (const component of components) {
+        const schedule = readComponentSchedule(component);
+        if (schedule.start && (!start || new Date(schedule.start) < new Date(start))) {
+            start = schedule.start;
+        }
+        const candidateEnd = schedule.end ?? schedule.start;
+        if (candidateEnd && (!end || new Date(candidateEnd) > new Date(end))) {
+            end = candidateEnd;
+        }
+    }
+    return { start, end };
+}
+function parseAmountCents(value) {
+    if (value.trim() === "")
+        return null;
+    const parsed = Number.parseFloat(value);
+    if (!Number.isFinite(parsed) || parsed < 0)
+        return null;
+    return Math.round(parsed * 100);
+}
+function formatDate(value) {
+    if (!value)
+        return "-";
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "-";
+    return date.toLocaleDateString();
+}
+function formatMoney(amountCents, currency) {
+    if (amountCents == null)
+        return "-";
+    return (amountCents / 100).toLocaleString(undefined, {
+        style: "currency",
+        currency: currency ?? "EUR",
+    });
+}

package/dist/admin/trips-panels/catalog-configurator.d.ts

@@ -0,0 +1,34 @@
+import { type Draft } from "@voyant-travel/bookings-react/journey";
+import { type AvailabilitySlot, type CatalogVertical, type PendingComponent } from "./shared.js";
+export declare function CatalogConfigurator({ pending, onChange, paxAdult, }: {
+    pending: Extract<PendingComponent, {
+        kind: "product" | "stay";
+    }>;
+    onChange(next: PendingComponent): void;
+    paxAdult: number;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function createCatalogBookingDraft({ vertical, entityId, sourceKind, sourceConnectionId, sourceRef, paxAdult, startsAt, endsAt, }: {
+    vertical: CatalogVertical;
+    entityId: string;
+    sourceKind: string;
+    sourceConnectionId: string | null;
+    sourceRef: string | null;
+    paxAdult: number;
+    startsAt: string;
+    endsAt: string;
+}): Draft;
+export declare function useProductDepartures(productId: string | null): import("@tanstack/react-query").UseQueryResult<{
+    rows: AvailabilitySlot[];
+}, Error>;
+export declare function ProductDeparturePicker({ slots, isLoading, isError, value, disabled, onChange, }: {
+    slots: ReadonlyArray<AvailabilitySlot>;
+    isLoading: boolean;
+    isError: boolean;
+    value: string;
+    disabled: boolean;
+    onChange(slotId: string): void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function updateDraftSchedule(draft: Draft, startsAt: string, endsAt: string): Draft;
+export declare function updateDraftDeparture(draft: Draft, slot: AvailabilitySlot): Draft;
+export declare function updateDraftPax(draft: Draft, paxAdult: number): Draft;
+//# sourceMappingURL=catalog-configurator.d.ts.map

package/dist/admin/trips-panels/catalog-configurator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog-configurator.d.ts","sourceRoot":"","sources":["../../../src/admin/trips-panels/catalog-configurator.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAc,MAAM,uCAAuC,CAAA;AAU9E,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EAQpB,KAAK,gBAAgB,EAEtB,MAAM,aAAa,CAAA;AAEpB,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC,gBAAgB,EAAE;QAAE,IAAI,EAAE,SAAS,GAAG,MAAM,CAAA;KAAE,CAAC,CAAA;IAChE,QAAQ,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACtC,QAAQ,EAAE,MAAM,CAAA;CACjB,2CA0KA;AAED,wBAAgB,yBAAyB,CAAC,EACxC,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE;IACD,QAAQ,EAAE,eAAe,CAAA;IACzB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;CACf,GAAG,KAAK,CAmBR;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;UAItB,gBAAgB,EAAE;UAWxD;AAED,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,SAAS,EACT,OAAO,EACP,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;IACtC,SAAS,EAAE,OAAO,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;CAC/B,2CAuCA;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,KAAK,CAmBzF;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,gBAAgB,GAAG,KAAK,CAShF;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,GAAG,KAAK,CAWpE"}

package/dist/admin/trips-panels/catalog-configurator.js

@@ -0,0 +1,200 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useOperatorAdminMessages as useAdminMessages } from "@voyant-travel/admin";
+import { emptyDraft } from "@voyant-travel/bookings-react/journey";
+import { useCatalogSearch } from "@voyant-travel/catalog-react";
+import { useBookingQuote } from "@voyant-travel/catalog-react/booking-engine";
+import { AsyncCombobox } from "@voyant-travel/ui/components/async-combobox";
+import { DateTimeField } from "@voyant-travel/ui/components/date-time-field";
+import * as React from "react";
+import { useVoyantTripsContext } from "../../provider.js";
+import { CatalogComponentOptions } from "./catalog-options.js";
+import { formatDepartureLabel } from "./display.js";
+import { catalogHitLabel, catalogHitSourceConnectionId, catalogHitSourceKind, catalogHitSourceRef, catalogHitStringField, catalogHitThumbnailUrl, Field, verticalForKind, } from "./shared.js";
+export function CatalogConfigurator({ pending, onChange, paxAdult, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const vertical = verticalForKind(pending.kind);
+    const [catalogSearch, setCatalogSearch] = React.useState("");
+    const [selectedCatalogHit, setSelectedCatalogHit] = React.useState(null);
+    const catalogQuery = useCatalogSearch({
+        vertical,
+        query: catalogSearch,
+        mode: "keyword",
+        pagination: { limit: 20 },
+        enabled: true,
+    });
+    const catalogHits = React.useMemo(() => {
+        return catalogQuery.data?.hits ?? [];
+    }, [catalogQuery.data?.hits]);
+    const selectedCatalog = catalogHits.find((hit) => hit.id === pending.catalogEntityId) ?? selectedCatalogHit;
+    const departureQuery = useProductDepartures(pending.kind === "product" ? pending.catalogEntityId : null);
+    const selectedDeparture = React.useMemo(() => departureQuery.data?.rows.find((slot) => slot.id === pending.bookingDraft?.configure.departureSlotId) ?? null, [departureQuery.data?.rows, pending.bookingDraft?.configure.departureSlotId]);
+    const quoteDraft = pending.bookingDraft && (pending.bookingDraft.configure.pax?.adult ?? 0) !== paxAdult
+        ? updateDraftPax(pending.bookingDraft, paxAdult)
+        : pending.bookingDraft;
+    const quote = useBookingQuote({
+        surface: "admin",
+        draft: quoteDraft,
+        scope: { locale: "en-GB", audience: "staff", market: "default" },
+        enabled: Boolean(pending.bookingDraft),
+    });
+    const shape = quote.data?.shape ?? null;
+    React.useEffect(() => {
+        if (!pending.bookingDraft)
+            return;
+        const currentAdult = pending.bookingDraft.configure.pax?.adult ?? 0;
+        if (currentAdult === paxAdult)
+            return;
+        onChange({ ...pending, bookingDraft: updateDraftPax(pending.bookingDraft, paxAdult) });
+    }, [onChange, paxAdult, pending]);
+    const fieldLabel = pending.kind === "stay" ? t.catalogSearch.hotelLabel : t.catalogSearch.productLabel;
+    const placeholder = pending.kind === "stay"
+        ? t.catalogSearch.hotelSearchPlaceholder
+        : t.catalogSearch.productSearchPlaceholder;
+    const emptyText = pending.kind === "stay" ? t.catalogSearch.hotelEmpty : t.catalogSearch.productEmpty;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { label: fieldLabel, children: _jsx(AsyncCombobox, { value: pending.catalogEntityId, onChange: (value) => {
+                        const hit = value ? catalogHits.find((item) => item.id === value) : null;
+                        setSelectedCatalogHit(hit ?? null);
+                        const nextEntityId = value;
+                        const nextSourceKind = hit ? catalogHitSourceKind(hit) : null;
+                        const nextSourceConnectionId = hit ? catalogHitSourceConnectionId(hit) : null;
+                        const nextSourceRef = hit ? catalogHitSourceRef(hit) : null;
+                        onChange({
+                            ...pending,
+                            catalogEntityId: nextEntityId,
+                            catalogEntityName: hit ? catalogHitLabel(hit) : null,
+                            catalogSourceKind: nextSourceKind,
+                            catalogSourceConnectionId: nextSourceConnectionId,
+                            catalogSourceRef: nextSourceRef,
+                            catalogThumbnailUrl: hit ? catalogHitThumbnailUrl(hit) : null,
+                            bookingDraft: nextEntityId && nextSourceKind
+                                ? createCatalogBookingDraft({
+                                    vertical,
+                                    entityId: nextEntityId,
+                                    sourceKind: nextSourceKind,
+                                    sourceConnectionId: nextSourceConnectionId,
+                                    sourceRef: nextSourceRef,
+                                    paxAdult,
+                                    startsAt: pending.startsAt,
+                                    endsAt: pending.endsAt,
+                                })
+                                : null,
+                        });
+                    }, items: catalogHits, selectedItem: selectedCatalog, getKey: (hit) => hit.id, getLabel: catalogHitLabel, getSecondary: (hit) => catalogHitStringField(hit, "source.kind") ?? undefined, onSearchChange: setCatalogSearch, placeholder: placeholder, emptyText: emptyText, triggerClassName: "w-full", clearable: true }) }), pending.kind === "product" ? (_jsx(ProductDeparturePicker, { slots: departureQuery.data?.rows ?? [], isLoading: departureQuery.isLoading, isError: departureQuery.isError, value: selectedDeparture?.id ?? "", disabled: !pending.catalogEntityId, onChange: (slotId) => {
+                    const slot = departureQuery.data?.rows.find((candidate) => candidate.id === slotId);
+                    if (!slot)
+                        return;
+                    onChange({
+                        ...pending,
+                        startsAt: slot.startsAt,
+                        endsAt: slot.endsAt ?? "",
+                        bookingDraft: pending.bookingDraft
+                            ? updateDraftDeparture(pending.bookingDraft, slot)
+                            : null,
+                    });
+                } })) : (_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t.fromLabel, children: _jsx(DateTimeField, { value: pending.startsAt, onChange: (value) => {
+                                const startsAt = value ?? "";
+                                onChange({
+                                    ...pending,
+                                    startsAt,
+                                    bookingDraft: pending.bookingDraft
+                                        ? updateDraftSchedule(pending.bookingDraft, startsAt, pending.endsAt)
+                                        : null,
+                                });
+                            } }) }), _jsx(Field, { label: t.toLabel, children: _jsx(DateTimeField, { value: pending.endsAt, onChange: (value) => {
+                                const endsAt = value ?? "";
+                                onChange({
+                                    ...pending,
+                                    endsAt,
+                                    bookingDraft: pending.bookingDraft
+                                        ? updateDraftSchedule(pending.bookingDraft, pending.startsAt, endsAt)
+                                        : null,
+                                });
+                            } }) })] })), shape ? (_jsx(CatalogComponentOptions, { draft: pending.bookingDraft, shape: shape, onDraftChange: (bookingDraft) => onChange({ ...pending, bookingDraft }) })) : pending.bookingDraft && quote.isQuoting ? (_jsx("p", { className: "text-muted-foreground text-sm", children: t.loadingOptions })) : null] }));
+}
+export function createCatalogBookingDraft({ vertical, entityId, sourceKind, sourceConnectionId, sourceRef, paxAdult, startsAt, endsAt, }) {
+    const draft = emptyDraft({
+        module: vertical,
+        id: entityId,
+        sourceKind,
+        ...(sourceConnectionId ? { sourceConnectionId } : {}),
+        ...(sourceRef ? { sourceRef } : {}),
+    }, { buyerType: "B2C" });
+    return updateDraftSchedule({
+        ...draft,
+        configure: { ...draft.configure, pax: { adult: paxAdult } },
+    }, startsAt, endsAt);
+}
+export function useProductDepartures(productId) {
+    const { baseUrl, fetcher } = useVoyantTripsContext();
+    return useQuery({
+        queryKey: ["admin-trips-product-departures", productId],
+        queryFn: async () => {
+            if (!productId)
+                return { rows: [] };
+            const res = await fetcher(`${baseUrl}/v1/admin/catalog/slots?entityModule=products&entityId=${encodeURIComponent(productId)}`);
+            if (!res.ok)
+                throw new Error(`Departures request failed: ${res.status}`);
+            return res.json();
+        },
+        enabled: Boolean(productId),
+        staleTime: 30_000,
+    });
+}
+export function ProductDeparturePicker({ slots, isLoading, isError, value, disabled, onChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const [search, setSearch] = React.useState("");
+    const filteredSlots = React.useMemo(() => {
+        const trimmed = search.trim().toLowerCase();
+        if (!trimmed)
+            return slots;
+        return slots.filter((slot) => formatDepartureLabel(slot).toLowerCase().includes(trimmed));
+    }, [search, slots]);
+    const selectedSlot = slots.find((slot) => slot.id === value) ?? null;
+    return (_jsx(Field, { label: t.departureLabel, children: isLoading ? (_jsx("div", { className: "h-10 rounded-md border bg-muted/40" })) : isError ? (_jsx("p", { className: "text-destructive text-sm", children: t.departuresUnavailable })) : slots.length === 0 && !disabled ? (_jsx("p", { className: "text-muted-foreground text-sm", children: t.noUpcomingDepartures })) : (_jsx(AsyncCombobox, { value: value || null, onChange: (slotId) => {
+                if (slotId)
+                    onChange(slotId);
+            }, items: filteredSlots, selectedItem: selectedSlot, getKey: (slot) => slot.id, getLabel: formatDepartureLabel, getSecondary: (slot) => slot.timezone, onSearchChange: setSearch, placeholder: t.searchDeparturesPlaceholder, emptyText: t.noDeparturesFound, triggerClassName: "w-full", disabled: disabled || slots.length === 0, clearable: false })) }));
+}
+export function updateDraftSchedule(draft, startsAt, endsAt) {
+    const departureDate = startsAt ? startsAt.slice(0, 10) : undefined;
+    const departureTime = startsAt?.includes("T") ? startsAt.slice(11, 16) : undefined;
+    const dateRange = startsAt && endsAt
+        ? {
+            checkIn: startsAt.slice(0, 10),
+            checkOut: endsAt.slice(0, 10),
+        }
+        : undefined;
+    return {
+        ...draft,
+        configure: {
+            ...draft.configure,
+            departureDate,
+            departureTime,
+            dateRange,
+        },
+    };
+}
+export function updateDraftDeparture(draft, slot) {
+    const scheduledDraft = updateDraftSchedule(draft, slot.startsAt, slot.endsAt ?? "");
+    return {
+        ...scheduledDraft,
+        configure: {
+            ...scheduledDraft.configure,
+            departureSlotId: slot.id,
+        },
+    };
+}
+export function updateDraftPax(draft, paxAdult) {
+    return {
+        ...draft,
+        configure: {
+            ...draft.configure,
+            pax: {
+                ...draft.configure.pax,
+                adult: paxAdult,
+            },
+        },
+    };
+}