@voyantjs/travel-composer-react 0.105.7 → 0.105.8

package/dist/admin/admin-trip-composer-panels.js

@@ -0,0 +1,1372 @@
+"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 } from "@voyantjs/admin";
+import { emptyPaymentScheduleValue } from "@voyantjs/bookings-react/components/payment-schedule-section";
+import { deriveTravelerRoleFromDob } from "@voyantjs/bookings-react/components/travelers-section";
+import { emptyDraft, setAccommodation, setAddons, } from "@voyantjs/bookings-react/journey";
+import { PaymentScheduleSection, VoucherPickerSection, } from "@voyantjs/bookings-react/ui";
+import { useCatalogSearch } from "@voyantjs/catalog-react";
+import { useBookingQuote } from "@voyantjs/catalog-react/booking-engine";
+import { useOrganization, usePerson, usePersonRelationships } from "@voyantjs/crm-react";
+import { PersonCombobox, PersonForm } from "@voyantjs/crm-react/ui";
+import { useFlightAncillaries, useFlightSearch } from "@voyantjs/flights-react";
+import { AirportCombobox, FlightBaggageStep, FlightFareUpsellStep, FlightOfferRow, FlightServicesStep, } from "@voyantjs/flights-react/ui";
+import { formatMessage } from "@voyantjs/i18n";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle } from "@voyantjs/ui/components";
+import { Alert, AlertDescription, AlertTitle } from "@voyantjs/ui/components/alert";
+import { AsyncCombobox } from "@voyantjs/ui/components/async-combobox";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Checkbox } from "@voyantjs/ui/components/checkbox";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
+import { DatePicker } from "@voyantjs/ui/components/date-picker";
+import { DateTimeField } from "@voyantjs/ui/components/date-time-field";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@voyantjs/ui/components/dropdown-menu";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, } from "@voyantjs/ui/components/empty";
+import { Input } from "@voyantjs/ui/components/input";
+import { Label } from "@voyantjs/ui/components/label";
+import { Textarea } from "@voyantjs/ui/components/textarea";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@voyantjs/ui/components/tooltip";
+import { AlertTriangle, BedDouble, CalendarClock, Check, CircleAlert, ExternalLink, Info, Landmark, Loader2, Minus, Pencil, Plane, Plus, Route as RouteIcon, Sailboat, Trash2, UserPlus, Wrench, X, } from "lucide-react";
+import * as React from "react";
+import { useVoyantTravelComposerContext } from "../provider.js";
+function verticalsFor(messages) {
+    const v = messages.verticals;
+    return [
+        { kind: "product", label: v.productLabel, description: v.productDescription },
+        { kind: "stay", label: v.stayLabel, description: v.stayDescription },
+        { kind: "flight", label: v.flightLabel, description: v.flightDescription },
+        { kind: "cruise", label: v.cruiseLabel, description: v.cruiseDescription },
+        { kind: "manual", label: v.manualLabel, description: v.manualDescription },
+    ];
+}
+function verticalForKind(kind) {
+    return kind === "stay" ? "accommodations" : "products";
+}
+function genLocalId() {
+    return `pc_${Math.random().toString(36).slice(2, 10)}`;
+}
+function catalogHitLabel(hit) {
+    return (catalogHitStringField(hit, "name") ??
+        catalogHitStringField(hit, "title") ??
+        catalogHitStringField(hit, "hotel.name") ??
+        hit.id);
+}
+function catalogHitSourceKind(hit) {
+    return catalogHitStringField(hit, "source.kind");
+}
+function catalogHitThumbnailUrl(hit) {
+    return (catalogHitStringField(hit, "thumbnailUrl") ??
+        catalogHitStringField(hit, "hero_image_url") ??
+        catalogHitStringField(hit, "imageUrl"));
+}
+function catalogHitSourceConnectionId(hit) {
+    return (catalogHitStringField(hit, "source.connectionId") ??
+        catalogHitStringField(hit, "source_connection_id"));
+}
+function catalogHitSourceRef(hit) {
+    return catalogHitStringField(hit, "source.ref") ?? catalogHitStringField(hit, "source_ref");
+}
+function catalogHitStringField(hit, field) {
+    const value = hit.document.fields[field];
+    return typeof value === "string" && value.trim().length > 0 ? value : null;
+}
+export function newPendingComponent(kind) {
+    const localId = genLocalId();
+    switch (kind) {
+        case "product":
+        case "stay":
+            return {
+                kind,
+                localId,
+                catalogEntityId: null,
+                catalogEntityName: null,
+                catalogSourceKind: null,
+                catalogSourceConnectionId: null,
+                catalogSourceRef: null,
+                catalogThumbnailUrl: null,
+                bookingDraft: null,
+                startsAt: "",
+                endsAt: "",
+                commitError: null,
+            };
+        case "flight":
+            return {
+                kind,
+                localId,
+                tripType: "one_way",
+                origin: null,
+                destination: null,
+                departDate: "",
+                returnDate: "",
+                cabin: "economy",
+                selectedOffer: null,
+                ancillaryCatalog: null,
+                fareBundlePicks: [],
+                baggagePicks: [],
+                assistancePicks: [],
+                extrasPicks: [],
+                sameFareForAllPassengers: true,
+                sameBaggageBothDirections: true,
+                commitError: null,
+            };
+        case "cruise":
+            return {
+                kind,
+                localId,
+                description: "",
+                cabin: "",
+                embarkationDate: "",
+                estimatedAmount: "",
+                commitError: null,
+            };
+        default:
+            return {
+                kind,
+                localId,
+                name: "",
+                description: "",
+                currency: "EUR",
+                subtotalCents: null,
+                taxRatePct: "",
+                startsAt: "",
+                endsAt: "",
+                commitError: null,
+            };
+    }
+}
+export function computePlaceholderTotals(subtotalCents, taxRatePct) {
+    const subtotal = subtotalCents ?? 0;
+    const rate = Number.parseFloat(taxRatePct || "0") / 100;
+    const validRate = Number.isFinite(rate) && rate >= 0 ? rate : 0;
+    const tax = Math.round(subtotal * validRate);
+    return { subtotal, tax, total: subtotal + tax };
+}
+export function Section({ title, description, action, children, className, }) {
+    return (_jsxs("section", { className: `flex flex-col gap-4 rounded-md border bg-card p-5 ${className ?? ""}`, children: [title || description || action ? (_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [title ? _jsx("h2", { className: "font-medium text-base", children: title }) : null, description ? _jsx("p", { className: "text-muted-foreground text-sm", children: description }) : null] }), action] })) : null, children] }));
+}
+export function Field({ label, className, children, }) {
+    return (_jsxs("div", { className: className ? `flex flex-col gap-1.5 ${className}` : "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-muted-foreground text-xs", children: label }), children] }));
+}
+export function StatusAlert({ title, message, tone, }) {
+    return (_jsxs(Alert, { variant: tone === "error" ? "destructive" : "default", children: [tone === "error" ? _jsx(CircleAlert, { className: "size-4" }) : _jsx(Check, { className: "size-4" }), _jsx(AlertTitle, { children: title }), _jsx(AlertDescription, { children: message })] }));
+}
+export function AddComponentMenu({ onAdd, disabled, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const verticals = verticalsFor(t);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "outline", disabled: disabled, className: "w-full", children: [_jsx(Plus, { className: "size-4" }), t.addComponentMenu] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-72", children: verticals.map((vertical) => {
+                    const Icon = verticalIconFor(vertical.kind);
+                    return (_jsxs(DropdownMenuItem, { onClick: () => onAdd(vertical.kind), className: "flex items-start gap-3 py-2", children: [_jsx("span", { className: "flex size-7 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-4" }) }), _jsxs("span", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: vertical.label }), _jsx("span", { className: "text-muted-foreground text-xs", children: vertical.description })] })] }, vertical.kind));
+                }) })] }));
+}
+export function PendingComponentCard({ pending, onChange, onRemove, onCommit, committing, travelers, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const Icon = verticalIconFor(pending.kind);
+    const label = verticalLabelFor(pending.kind, t);
+    const valid = pendingComponentIsValid(pending);
+    return (_jsxs("div", { className: "flex flex-col gap-4 rounded-md border bg-card p-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-4" }) }), _jsxs("div", { children: [_jsx("h3", { className: "font-medium text-base", children: label }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.configureHint })] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: onRemove, "aria-label": t.removeComponent, children: _jsx(Trash2, { className: "size-4" }) })] }), _jsx(PendingBody, { pending: pending, onChange: onChange, travelers: travelers }), pending.commitError ? (_jsx("p", { className: "rounded-md bg-destructive/10 px-3 py-2 text-destructive text-sm", children: pending.commitError })) : null, _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { onClick: onCommit, disabled: !valid || committing, children: [committing ? _jsx(Loader2, { className: "size-4 animate-spin" }) : _jsx(Plus, { className: "size-4" }), "Add to trip"] }) })] }));
+}
+function PendingBody({ pending, onChange, travelers, }) {
+    const passengerCounts = passengerCountsFromTripTravelers(travelers);
+    if (pending.kind === "product" || pending.kind === "stay") {
+        return (_jsx(CatalogConfigurator, { pending: pending, onChange: onChange, paxAdult: passengerCounts.adults }));
+    }
+    if (pending.kind === "flight") {
+        return _jsx(FlightConfigurator, { pending: pending, travelers: travelers, onChange: onChange });
+    }
+    if (pending.kind === "cruise") {
+        return _jsx(CruiseConfigurator, { pending: pending, onChange: onChange });
+    }
+    return _jsx(PlaceholderConfigurator, { pending: pending, onChange: onChange });
+}
+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] }));
+}
+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);
+}
+function useProductDepartures(productId) {
+    const { baseUrl, fetcher } = useVoyantTravelComposerContext();
+    return useQuery({
+        queryKey: ["admin-trip-composer-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,
+    });
+}
+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 })) }));
+}
+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,
+        },
+    };
+}
+function updateDraftDeparture(draft, slot) {
+    const scheduledDraft = updateDraftSchedule(draft, slot.startsAt, slot.endsAt ?? "");
+    return {
+        ...scheduledDraft,
+        configure: {
+            ...scheduledDraft.configure,
+            departureSlotId: slot.id,
+        },
+    };
+}
+function updateDraftPax(draft, paxAdult) {
+    return {
+        ...draft,
+        configure: {
+            ...draft.configure,
+            pax: {
+                ...draft.configure.pax,
+                adult: paxAdult,
+            },
+        },
+    };
+}
+function CatalogComponentOptions({ draft, shape, onDraftChange, }) {
+    if (!draft)
+        return null;
+    const hasAccommodation = shape.showsAccommodation &&
+        ((shape.accommodation?.roomOptions?.length ?? 0) > 0 ||
+            (shape.accommodation?.subSteps?.length ?? 0) > 0);
+    const productOptionStep = shape.configureSubSteps?.find((step) => step.kind === "product-option");
+    const hasAddons = shape.showsAddons &&
+        ((shape.addons?.catalog?.length ?? 0) > 0 || (shape.addons?.groups?.length ?? 0) > 0);
+    if (!productOptionStep && !hasAccommodation && !hasAddons)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-5 border-t pt-4", children: [productOptionStep ? (_jsx(CatalogProductOptionOptions, { draft: draft, options: productOptionStep.options, onDraftChange: onDraftChange })) : null, hasAccommodation ? (_jsx(CatalogAccommodationOptions, { draft: draft, shape: shape, onDraftChange: onDraftChange })) : null, hasAddons ? (_jsx(CatalogExtrasOptions, { draft: draft, shape: shape, onDraftChange: onDraftChange })) : null] }));
+}
+function CatalogProductOptionOptions({ draft, options, onDraftChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const selections = draft.configure.optionSelections ?? [];
+    if (options.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-sm", children: t.optionsHeading }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.optionsHint })] }), _jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: options.map((option) => {
+                    const unit = option.units?.[0];
+                    const selected = selections.find((selection) => selection.optionId === option.id);
+                    const quantity = selected?.quantity ?? 0;
+                    const maxQuantity = unit?.maxQuantity ?? 99;
+                    return (_jsx("div", { className: `rounded-md border p-3 text-left text-sm transition-colors ${quantity > 0 ? "border-primary bg-primary/10" : "bg-background"}`, children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("span", { className: "min-w-0", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: option.name }), option.code ? (_jsx("span", { className: "text-muted-foreground text-xs uppercase", children: option.code })) : null, option.isDefault ? _jsx(Badge, { variant: "secondary", children: t.defaultOption }) : null] }), option.description ? (_jsx("span", { className: "mt-1 block text-muted-foreground text-xs", children: option.description })) : null, unit ? (_jsx("span", { className: "mt-1 block text-muted-foreground text-xs", children: unit.name })) : null] }), _jsx(QuantityStepper, { value: quantity, onDecrement: () => {
+                                        const nextQuantity = Math.max(0, quantity - 1);
+                                        onDraftChange(setDraftOptionQuantity(draft, option, unit ?? null, nextQuantity));
+                                    }, onIncrement: () => {
+                                        const nextQuantity = Math.min(maxQuantity, quantity + 1);
+                                        onDraftChange(setDraftOptionQuantity(draft, option, unit ?? null, nextQuantity));
+                                    } })] }) }, option.id));
+                }) })] }));
+}
+function setDraftOptionQuantity(draft, option, unit, quantity) {
+    const existingSelections = draft.configure.optionSelections ?? [];
+    const nextSelections = existingSelections.filter((selection) => selection.optionId !== option.id);
+    if (quantity > 0) {
+        nextSelections.push({
+            optionId: option.id,
+            optionName: option.name,
+            ...(unit ? { optionUnitId: unit.id, optionUnitName: unit.name } : {}),
+            quantity,
+        });
+    }
+    const firstSelection = nextSelections[0];
+    return {
+        ...draft,
+        configure: {
+            ...draft.configure,
+            variantId: firstSelection?.optionId,
+            optionSelections: nextSelections,
+        },
+    };
+}
+function CatalogAccommodationOptions({ draft, shape, onDraftChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const rooms = shape.accommodation?.roomOptions ?? [];
+    const accommodation = draft.accommodation ?? { rooms: [], travelerAssignments: {} };
+    if (rooms.length === 0)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-sm", children: t.roomsHeading }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.roomsHint })] }), _jsx("div", { className: "flex flex-col gap-2", children: rooms.map((room) => {
+                    const current = accommodation.rooms.find((entry) => entry.optionUnitId === room.id);
+                    const ratePlans = room.ratePlans ?? [];
+                    const quantity = current?.quantity ?? 0;
+                    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border bg-muted/20 p-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: room.name }), room.description ? (_jsx("p", { className: "text-muted-foreground text-xs", children: room.description })) : null] }), _jsx(QuantityStepper, { value: quantity, onDecrement: () => {
+                                            const nextRooms = accommodation.rooms.filter((entry) => entry.optionUnitId !== room.id);
+                                            const nextQuantity = quantity - 1;
+                                            if (nextQuantity > 0) {
+                                                nextRooms.push({
+                                                    optionUnitId: room.id,
+                                                    quantity: nextQuantity,
+                                                    ratePlanId: current?.ratePlanId,
+                                                });
+                                            }
+                                            onDraftChange(setAccommodation(draft, { ...accommodation, rooms: nextRooms }));
+                                        }, onIncrement: () => {
+                                            const nextRooms = accommodation.rooms.filter((entry) => entry.optionUnitId !== room.id);
+                                            const ratePlanId = current?.ratePlanId ?? (ratePlans.length === 1 ? ratePlans[0]?.id : undefined);
+                                            nextRooms.push({ optionUnitId: room.id, quantity: quantity + 1, ratePlanId });
+                                            onDraftChange(setAccommodation(draft, { ...accommodation, rooms: nextRooms }));
+                                        } })] }), quantity > 0 && ratePlans.length > 0 ? (_jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: ratePlans.map((plan) => {
+                                    const selected = current?.ratePlanId === plan.id;
+                                    return (_jsxs("button", { type: "button", onClick: () => {
+                                            const nextRooms = accommodation.rooms.map((entry) => entry.optionUnitId === room.id
+                                                ? { ...entry, ratePlanId: plan.id }
+                                                : entry);
+                                            onDraftChange(setAccommodation(draft, { ...accommodation, rooms: nextRooms }));
+                                        }, className: `rounded-md border p-3 text-left text-sm transition-colors ${selected ? "border-primary bg-primary/10" : "bg-background"}`, children: [_jsx("span", { className: "font-medium", children: plan.name }), plan.description ? (_jsx("span", { className: "mt-1 block text-muted-foreground text-xs", children: plan.description })) : null, plan.inclusions && plan.inclusions.length > 0 ? (_jsxs("span", { className: "mt-1 block text-muted-foreground text-xs", children: ["Includes ", plan.inclusions.join(", ")] })) : null] }, plan.id));
+                                }) })) : null] }, room.id));
+                }) })] }));
+}
+function CatalogExtrasOptions({ draft, shape, onDraftChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const flat = shape.addons?.catalog ?? [];
+    const groups = shape.addons?.groups ?? [];
+    const hasGroupedExtras = groups.some((group) => group.items.length > 0);
+    if (flat.length === 0 && !hasGroupedExtras)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx("h4", { className: "font-medium text-sm", children: t.optionsAndExtras }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.optionsAndExtrasHint })] }), _jsxs("div", { className: "flex flex-col gap-3", children: [groups.map((group) => group.items.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "text-muted-foreground text-xs uppercase", children: group.label }), group.items.map((item) => (_jsx(CatalogExtraRow, { draft: draft, item: item, onDraftChange: onDraftChange }, item.id)))] }, group.label)) : null), flat.map((item) => (_jsx(CatalogExtraRow, { draft: draft, item: item, onDraftChange: onDraftChange }, item.id)))] })] }));
+}
+function CatalogExtraRow({ draft, item, onDraftChange, }) {
+    const current = draft.addons.find((entry) => entry.extraId === item.id);
+    const quantity = current?.quantity ?? 0;
+    return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded-md border bg-muted/20 p-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "font-medium text-sm", children: item.name }), item.description ? (_jsx("p", { className: "text-muted-foreground text-xs", children: item.description })) : null] }), _jsx(QuantityStepper, { value: quantity, onDecrement: () => {
+                    const nextAddons = draft.addons.filter((entry) => entry.extraId !== item.id);
+                    const nextQuantity = quantity - 1;
+                    if (nextQuantity > 0)
+                        nextAddons.push({ extraId: item.id, quantity: nextQuantity });
+                    onDraftChange(setAddons(draft, nextAddons));
+                }, onIncrement: () => {
+                    const nextAddons = draft.addons.filter((entry) => entry.extraId !== item.id);
+                    nextAddons.push({ extraId: item.id, quantity: quantity + 1 });
+                    onDraftChange(setAddons(draft, nextAddons));
+                } })] }));
+}
+function QuantityStepper({ value, onDecrement, onIncrement, }) {
+    return (_jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: onDecrement, disabled: value <= 0, children: _jsx(Minus, { className: "size-3.5" }) }), _jsx("span", { className: "min-w-6 text-center text-sm", children: value }), _jsx(Button, { variant: "outline", size: "sm", type: "button", onClick: onIncrement, children: _jsx(Plus, { className: "size-3.5" }) })] }));
+}
+function FlightConfigurator({ pending, travelers, onChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const passengers = React.useMemo(() => flightPassengersFromTripTravelers(travelers), [travelers]);
+    const passengerCounts = React.useMemo(() => passengerCountsFromTripTravelers(travelers), [travelers]);
+    const isRoundTrip = pending.tripType === "round_trip";
+    const ready = Boolean(pending.origin &&
+        pending.destination &&
+        pending.departDate &&
+        (!isRoundTrip || pending.returnDate));
+    const slices = React.useMemo(() => {
+        if (!pending.origin || !pending.destination || !pending.departDate)
+            return [];
+        const next = [
+            {
+                origin: pending.origin,
+                destination: pending.destination,
+                departureDate: pending.departDate,
+            },
+        ];
+        if (pending.tripType === "round_trip" && pending.returnDate) {
+            next.push({
+                origin: pending.destination,
+                destination: pending.origin,
+                departureDate: pending.returnDate,
+            });
+        }
+        return next;
+    }, [
+        pending.departDate,
+        pending.destination,
+        pending.origin,
+        pending.returnDate,
+        pending.tripType,
+    ]);
+    const search = useFlightSearch({
+        slices,
+        passengers: passengerCounts,
+        cabin: pending.cabin,
+    }, { enabled: ready });
+    const offers = search.data?.offers ?? [];
+    const selectedOffer = pending.selectedOffer &&
+        offers.some((offer) => offer.offerId === pending.selectedOffer?.offerId)
+        ? pending.selectedOffer
+        : pending.selectedOffer;
+    const ancillaryQuery = useFlightAncillaries(selectedOffer ? { offerId: selectedOffer.offerId, offer: selectedOffer } : null, { enabled: Boolean(selectedOffer) });
+    const ancillaryCatalog = ancillaryQuery.data?.catalog ?? pending.ancillaryCatalog;
+    const priced = flightPricingFromPending({
+        ...pending,
+        selectedOffer,
+        ancillaryCatalog,
+    });
+    const patch = (next) => {
+        onChange({ ...pending, ...next });
+    };
+    const resetSelection = (next) => {
+        patch({
+            selectedOffer: null,
+            ancillaryCatalog: null,
+            fareBundlePicks: [],
+            baggagePicks: [],
+            assistancePicks: [],
+            extrasPicks: [],
+            ...next,
+        });
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: !isRoundTrip ? "default" : "outline", onClick: () => resetSelection({ tripType: "one_way", returnDate: "" }), children: t.flightOneWay }), _jsx(Button, { type: "button", size: "sm", variant: isRoundTrip ? "default" : "outline", onClick: () => resetSelection({ tripType: "round_trip" }), children: t.flightRoundTrip })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t.flightOrigin, children: _jsx(AirportCombobox, { value: pending.origin, placeholder: t.fromPlaceholder, onChange: (code) => resetSelection({ origin: code }), className: "w-full" }) }), _jsx(Field, { label: t.flightDestination, children: _jsx(AirportCombobox, { value: pending.destination, placeholder: t.toPlaceholder, onChange: (code) => resetSelection({ destination: code }), className: "w-full" }) }), _jsx(Field, { label: t.flightDepart, children: _jsx(DatePicker, { value: pending.departDate, onChange: (departDate) => resetSelection({ departDate: departDate ?? "" }), placeholder: t.pickDate }) }), isRoundTrip ? (_jsx(Field, { label: t.flightReturn, children: _jsxs("div", { className: "flex gap-2", children: [_jsx(DatePicker, { value: pending.returnDate, onChange: (returnDate) => resetSelection({ returnDate: returnDate ?? "" }), placeholder: t.pickDate, className: "flex-1" }), _jsx(Button, { type: "button", variant: "outline", size: "icon", "aria-label": t.clearReturnDate, onClick: () => resetSelection({ returnDate: "" }), children: _jsx(X, { className: "size-4" }) })] }) })) : null] }), _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-md border bg-muted/20 p-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5 text-sm", children: [_jsx("span", { className: "font-medium", children: t.travelersWord }), _jsxs("span", { className: "text-muted-foreground text-xs", children: [passengerCounts.adults === 1
+                                        ? t.travelerCountAdultSingular
+                                        : formatMessage(t.travelerCountAdultPlural, { count: passengerCounts.adults }), passengerCounts.children
+                                        ? formatMessage(passengerCounts.children === 1 ? t.travelerCountChild : t.travelerCountChildren, { count: passengerCounts.children })
+                                        : "", passengerCounts.infants
+                                        ? formatMessage(passengerCounts.infants === 1 ? t.travelerCountInfant : t.travelerCountInfants, { count: passengerCounts.infants })
+                                        : ""] })] }), _jsx(CabinSelector, { value: pending.cabin, onChange: (cabin) => resetSelection({ cabin }) })] }), ready ? (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h4", { className: "font-medium text-sm", children: t.flightOptionsHeading }), search.isFetching ? (_jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs", children: [_jsx(Loader2, { className: "size-3 animate-spin" }), t.flightSearching] })) : offers.length > 0 ? (_jsx("span", { className: "text-muted-foreground text-xs", children: formatMessage(t.flightOptionsCount, { count: offers.length }) })) : null] }), search.isError ? (_jsx("p", { className: "rounded-md bg-destructive/10 px-3 py-2 text-destructive text-sm", children: t.flightSearchFailed })) : null, !search.isFetching && offers.length === 0 && !search.isError ? (_jsx("p", { className: "rounded-md border border-dashed p-3 text-muted-foreground text-sm", children: t.flightNoOptions })) : null, offers.slice(0, 5).map((offer) => (_jsx(FlightOfferRow, { offer: offer, selected: selectedOffer?.offerId === offer.offerId, selectLabel: selectedOffer?.offerId === offer.offerId ? t.flightSelected : t.flightSelect, onSelect: (nextOffer) => patch({
+                            selectedOffer: nextOffer,
+                            ancillaryCatalog: null,
+                            fareBundlePicks: [],
+                            baggagePicks: [],
+                            assistancePicks: [],
+                            extrasPicks: [],
+                        }) }, offer.offerId)))] })) : (_jsx("p", { className: "rounded-md border border-dashed p-3 text-muted-foreground text-sm", children: t.flightSelectSearchHint })), selectedOffer ? (_jsxs("div", { className: "flex flex-col gap-5 border-t pt-4", children: [_jsx(FlightFareUpsellStep, { outboundOffer: legOffer(selectedOffer, 0), returnOffer: selectedOffer.itineraries[1] ? legOffer(selectedOffer, 1) : undefined, passengers: passengers, passengerCounts: passengerCounts, value: pending.fareBundlePicks, onChange: (fareBundlePicks) => patch({ fareBundlePicks }), sameForAllPassengers: pending.sameFareForAllPassengers, onSameForAllPassengersChange: (sameFareForAllPassengers) => patch({ sameFareForAllPassengers }) }), ancillaryQuery.isError ? (_jsx("p", { className: "rounded-md border border-dashed p-3 text-muted-foreground text-sm", children: t.flightAncillariesUnavailable })) : (_jsx(FlightBaggageStep, { outboundCatalog: ancillaryCatalog, returnCatalog: selectedOffer.itineraries[1] ? ancillaryCatalog : null, outboundOffer: legOffer(selectedOffer, 0), returnOffer: selectedOffer.itineraries[1] ? legOffer(selectedOffer, 1) : undefined, passengers: passengers, passengerCounts: passengerCounts, value: pending.baggagePicks, onChange: (baggagePicks) => patch({ baggagePicks, ancillaryCatalog: ancillaryCatalog ?? null }), sameForBothDirections: pending.sameBaggageBothDirections, onSameForBothDirectionsChange: (sameBaggageBothDirections) => patch({ sameBaggageBothDirections }), loading: ancillaryQuery.isFetching })), ancillaryCatalog ? (_jsx(FlightServicesStep, { outboundCatalog: ancillaryCatalog, returnCatalog: selectedOffer.itineraries[1] ? ancillaryCatalog : null, outboundOffer: legOffer(selectedOffer, 0), returnOffer: selectedOffer.itineraries[1] ? legOffer(selectedOffer, 1) : undefined, passengers: passengers, passengerCounts: passengerCounts, assistance: pending.assistancePicks, extras: pending.extrasPicks, onAssistanceChange: (assistancePicks) => patch({ assistancePicks }), onExtrasChange: (extrasPicks) => patch({ extrasPicks }), loading: ancillaryQuery.isFetching })) : null, _jsxs("div", { className: "flex items-center justify-between rounded-md border bg-muted/30 p-3", children: [_jsx("span", { className: "text-muted-foreground text-sm", children: t.flightTotal }), _jsx("span", { className: "font-semibold text-base", children: formatMoney(priced.totalAmountCents, priced.currency) })] })] })) : null] }));
+}
+function CabinSelector({ value, onChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const cabins = [
+        { value: "economy", label: t.cabinClasses.economy },
+        { value: "premium_economy", label: t.cabinClasses.premium_economy },
+        { value: "business", label: t.cabinClasses.business },
+        { value: "first", label: t.cabinClasses.first },
+    ];
+    return (_jsx("div", { className: "flex flex-wrap gap-1", children: cabins.map((cabin) => (_jsx(Button, { type: "button", size: "sm", variant: value === cabin.value ? "default" : "outline", onClick: () => onChange(cabin.value), children: cabin.label }, cabin.value))) }));
+}
+export function flightPricingFromPending(pending) {
+    const offer = pending.selectedOffer;
+    if (!offer) {
+        return {
+            currency: "EUR",
+            subtotalAmountCents: 0,
+            taxAmountCents: 0,
+            ancillaryAmountCents: 0,
+            totalAmountCents: 0,
+        };
+    }
+    const currencyCode = offer.totalPrice.currency;
+    const offerTotal = moneyToCents(offer.totalPrice.amount);
+    const fareTax = offer.fareBreakdowns.reduce((sum, line) => sum + moneyToCents(line.taxes.amount), 0);
+    const ancillaryAmount = flightAncillaryAmountCents(pending, currencyCode);
+    return {
+        currency: currencyCode,
+        subtotalAmountCents: Math.max(0, offerTotal - fareTax) + ancillaryAmount,
+        taxAmountCents: fareTax,
+        ancillaryAmountCents: ancillaryAmount,
+        totalAmountCents: offerTotal + ancillaryAmount,
+    };
+}
+function flightAncillaryAmountCents(pending, currencyCode) {
+    const offer = pending.selectedOffer;
+    const catalog = pending.ancillaryCatalog;
+    if (!offer)
+        return 0;
+    const fareBundles = offer.fareBundles ?? [];
+    const fareBundleTotal = pending.fareBundlePicks.reduce((sum, pick) => {
+        const bundle = fareBundles.find((candidate) => candidate.id === pick.bundleId);
+        if (!bundle || bundle.priceDelta.currency !== currencyCode)
+            return sum;
+        return sum + moneyToCents(bundle.priceDelta.amount);
+    }, 0);
+    if (!catalog)
+        return fareBundleTotal;
+    const baggageTotal = pending.baggagePicks.reduce((sum, pick) => {
+        const option = catalog.baggage.find((candidate) => candidate.id === pick.optionId);
+        if (!option || option.price.currency !== currencyCode)
+            return sum;
+        return sum + moneyToCents(option.price.amount) * (pick.quantity ?? 1);
+    }, 0);
+    const assistanceTotal = pending.assistancePicks.reduce((sum, pick) => {
+        const option = catalog.assistance.find((candidate) => candidate.id === pick.optionId);
+        if (!option?.price || option.price.currency !== currencyCode)
+            return sum;
+        return sum + moneyToCents(option.price.amount);
+    }, 0);
+    const extrasTotal = pending.extrasPicks.reduce((sum, pick) => {
+        const option = catalog.extras.find((candidate) => candidate.id === pick.optionId);
+        if (!option || option.price.currency !== currencyCode)
+            return sum;
+        return sum + moneyToCents(option.price.amount) * (pick.quantity ?? 1);
+    }, 0);
+    return fareBundleTotal + baggageTotal + assistanceTotal + extrasTotal;
+}
+function legOffer(offer, index) {
+    const itinerary = offer.itineraries[index];
+    return itinerary ? { ...offer, itineraries: [itinerary] } : offer;
+}
+function moneyToCents(amount) {
+    const parsed = Number.parseFloat(amount);
+    return Number.isFinite(parsed) ? Math.round(parsed * 100) : 0;
+}
+function passengerCountsFromTripTravelers(travelers) {
+    const counts = travelers.reduce((acc, traveler) => {
+        if (traveler.role === "child")
+            acc.children += 1;
+        else if (traveler.role === "infant")
+            acc.infants += 1;
+        else
+            acc.adults += 1;
+        return acc;
+    }, { adults: 0, children: 0, infants: 0 });
+    return {
+        adults: Math.max(1, counts.adults),
+        children: counts.children,
+        infants: counts.infants,
+    };
+}
+function flightPassengersFromTripTravelers(travelers) {
+    return travelers.map((traveler, index) => {
+        const type = traveler.role === "child" ? "child" : traveler.role === "infant" ? "infant" : "adult";
+        return {
+            passengerId: traveler.localId || `traveler_${index + 1}`,
+            type,
+            // fallback names sent verbatim to the flight provider's API as ASCII
+            // passenger placeholders when the operator hasn't yet filled in the
+            // real traveler.
+            firstName: 
+            // i18n-literal-ok
+            traveler.firstName || (type === "adult" ? "Adult" : type === "child" ? "Child" : "Infant"),
+            lastName: traveler.lastName || `${index + 1}`,
+            dateOfBirth: traveler.dateOfBirth || fallbackDobForPassengerType(type),
+            ...(traveler.email ? { email: traveler.email } : {}),
+        };
+    });
+}
+function fallbackDobForPassengerType(type) {
+    if (type === "child")
+        return "2016-01-01";
+    if (type === "infant")
+        return "2025-01-01";
+    return "1990-01-01";
+}
+function flightSelectionLabels(offer, ancillaries) {
+    if (!offer || !ancillaries)
+        return [];
+    const labels = [];
+    const bundles = offer.fareBundles ?? [];
+    const bundleCounts = countById(ancillaries.fareBundle?.map((pick) => pick.bundleId) ?? []);
+    for (const [bundleId, quantity] of bundleCounts) {
+        const bundle = bundles.find((candidate) => candidate.id === bundleId);
+        labels.push(`${quantity} × ${bundle?.label ?? bundleId}`);
+    }
+    const baggageCount = ancillaries.baggage?.reduce((sum, pick) => sum + (pick.quantity ?? 1), 0) ?? 0;
+    if (baggageCount > 0)
+        labels.push(`${baggageCount} bag${baggageCount === 1 ? "" : "s"}`);
+    const assistanceCount = ancillaries.assistance?.length ?? 0;
+    if (assistanceCount > 0) {
+        labels.push(`${assistanceCount} assistance request${assistanceCount === 1 ? "" : "s"}`);
+    }
+    const extrasCount = ancillaries.extras?.reduce((sum, pick) => sum + (pick.quantity ?? 1), 0) ?? 0;
+    if (extrasCount > 0)
+        labels.push(`${extrasCount} extra${extrasCount === 1 ? "" : "s"}`);
+    return labels;
+}
+function countById(values) {
+    const counts = new Map();
+    for (const value of values)
+        counts.set(value, (counts.get(value) ?? 0) + 1);
+    return counts;
+}
+function CruiseConfigurator({ pending, onChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t.cruisePlaceholder.embarkationDate, children: _jsx(Input, { type: "date", value: pending.embarkationDate, onChange: (event) => onChange({ ...pending, embarkationDate: event.target.value }) }) }), _jsx(Field, { label: t.cruisePlaceholder.cabin, children: _jsx(Input, { value: pending.cabin, placeholder: t.cabinPlaceholder, onChange: (event) => onChange({ ...pending, cabin: event.target.value }) }) })] }), _jsx(Field, { label: t.cruisePlaceholder.description, children: _jsx(Textarea, { rows: 2, value: pending.description, onChange: (event) => onChange({ ...pending, description: event.target.value }) }) }), _jsx(Field, { label: t.cruisePlaceholder.estimatedAmount, children: _jsx(Input, { inputMode: "decimal", value: pending.estimatedAmount, placeholder: "0.00", onChange: (event) => onChange({ ...pending, estimatedAmount: event.target.value }) }) })] }));
+}
+function PlaceholderConfigurator({ pending, onChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const totals = computePlaceholderTotals(pending.subtotalCents, pending.taxRatePct);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Field, { label: t.manualPlaceholder.nameLabel, children: _jsx(Input, { value: pending.name, placeholder: t.manualPlaceholder.namePlaceholder, onChange: (event) => onChange({ ...pending, name: event.target.value }) }) }), _jsx(Field, { label: t.manualPlaceholder.descriptionLabel, children: _jsx(Textarea, { rows: 2, value: pending.description, placeholder: t.notesPlaceholder, onChange: (event) => onChange({ ...pending, description: event.target.value }) }) }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsx(Field, { label: t.fromLabel, children: _jsx(DateTimeField, { value: pending.startsAt, onChange: (value) => onChange({ ...pending, startsAt: value ?? "" }) }) }), _jsx(Field, { label: t.toLabel, children: _jsx(DateTimeField, { value: pending.endsAt, onChange: (value) => onChange({ ...pending, endsAt: value ?? "" }) }) })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-[140px_minmax(0,1fr)_140px]", children: [_jsx(Field, { label: t.manualPlaceholder.currencyLabel, children: _jsx(CurrencyCombobox, { value: pending.currency, onChange: (value) => onChange({ ...pending, currency: value ?? "EUR" }) }) }), _jsx(Field, { label: t.manualPlaceholder.subtotalLabel, children: _jsx(CurrencyInput, { value: pending.subtotalCents, onChange: (value) => onChange({ ...pending, subtotalCents: value }), currency: pending.currency, placeholder: "0.00" }) }), _jsx(Field, { label: t.manualPlaceholder.taxRateLabel, children: _jsxs("div", { className: "relative", children: [_jsx(Input, { inputMode: "decimal", value: pending.taxRatePct, placeholder: "0", onChange: (event) => onChange({ ...pending, taxRatePct: event.target.value }), className: "pr-8" }), _jsx("span", { className: "-translate-y-1/2 pointer-events-none absolute top-1/2 right-3 text-muted-foreground text-xs", children: "%" })] }) })] }), _jsxs("div", { className: "flex flex-col gap-1 rounded-md border bg-muted/30 p-3 text-sm", children: [_jsxs("div", { className: "flex items-center justify-between text-muted-foreground", children: [_jsx("span", { children: t.tax }), _jsx("span", { children: formatMoney(totals.tax, pending.currency) })] }), _jsxs("div", { className: "flex items-center justify-between font-semibold", children: [_jsx("span", { children: t.total }), _jsx("span", { children: formatMoney(totals.total, pending.currency) })] })] })] }));
+}
+export function pendingComponentIsValid(pending) {
+    switch (pending.kind) {
+        case "product":
+            return Boolean(pending.catalogEntityId &&
+                pending.catalogSourceKind &&
+                pending.bookingDraft?.configure.departureSlotId);
+        case "stay":
+            return Boolean(pending.catalogEntityId && pending.catalogSourceKind && pending.bookingDraft);
+        case "flight":
+            return Boolean(pending.origin && pending.destination && pending.departDate && pending.selectedOffer);
+        case "cruise":
+            return Boolean(pending.embarkationDate);
+        case "manual":
+            return Boolean(pending.name && pending.subtotalCents && pending.subtotalCents > 0);
+    }
+}
+export function ComponentsEmpty() {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    return (_jsx(Empty, { className: "border bg-card", children: _jsxs(EmptyHeader, { children: [_jsx(EmptyMedia, { variant: "icon", children: _jsx(RouteIcon, {}) }), _jsx(EmptyTitle, { children: t.emptyTimeline }), _jsx(EmptyDescription, { children: t.emptyTimelineHint })] }) }));
+}
+export function newTripTraveler() {
+    return {
+        localId: `tt_${Math.random().toString(36).slice(2, 10)}`,
+        personId: null,
+        firstName: "",
+        lastName: "",
+        email: "",
+        dateOfBirth: null,
+        role: "adult",
+    };
+}
+export function TripTravelersSection({ value, onChange, billingPersonId, }) {
+    function patchAt(localId, patch) {
+        onChange(value.map((traveler) => traveler.localId === localId ? { ...traveler, ...patch } : traveler));
+    }
+    function removeAt(localId) {
+        onChange(value.filter((traveler) => traveler.localId !== localId));
+    }
+    function addTravelerByPersonId(personId) {
+        if (value.some((traveler) => traveler.personId === personId))
+            return;
+        onChange([...value, { ...newTripTraveler(), personId }]);
+    }
+    const existingPersonIds = new Set(value.map((traveler) => traveler.personId).filter(Boolean));
+    // Lead = billing person when they're on the roster; otherwise the first
+    // traveler. Keeps the "who is the primary traveler" intent natural without
+    // forcing operators to reorder the list.
+    const leadLocalId = (billingPersonId && value.find((t) => t.personId === billingPersonId)?.localId) ||
+        value[0]?.localId ||
+        null;
+    const t = useAdminMessages().trips.adminComposer.panels;
+    return (_jsxs("section", { className: "flex flex-col gap-3 rounded-md border bg-card p-5", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx("h2", { className: "font-medium text-base", children: t.travelersSectionTitle }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => onChange([...value, newTripTraveler()]), children: [_jsx(UserPlus, { className: "size-3.5" }), t.addTravelerLabel] })] }), billingPersonId ? (_jsx(BillingQuickAdd, { billingPersonId: billingPersonId, existingPersonIds: existingPersonIds, onAdd: addTravelerByPersonId })) : null, value.length === 0 ? (_jsxs("p", { className: "text-muted-foreground text-sm", children: [t.noTravelersPrefix, _jsx("span", { className: "font-medium", children: t.addTravelerLabel }), "."] })) : (_jsx("div", { className: "flex flex-col gap-2", children: value.map((traveler) => (_jsx(TripTravelerRow, { traveler: traveler, isLead: traveler.localId === leadLocalId, onPatch: (patch) => patchAt(traveler.localId, patch), onRemove: () => removeAt(traveler.localId) }, traveler.localId))) }))] }));
+}
+function BillingQuickAdd({ billingPersonId, existingPersonIds, onAdd, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const billingPersonQuery = usePerson(billingPersonId);
+    const relationshipsQuery = usePersonRelationships(billingPersonId);
+    const billingPerson = billingPersonQuery.data;
+    const billingAlreadyAdded = existingPersonIds.has(billingPersonId);
+    const relatedPersonIds = React.useMemo(() => {
+        const ids = new Set();
+        for (const relationship of relationshipsQuery.data?.data ?? []) {
+            const otherId = relationship.fromPersonId === billingPersonId
+                ? relationship.toPersonId
+                : relationship.fromPersonId;
+            if (otherId && otherId !== billingPersonId)
+                ids.add(otherId);
+        }
+        return [...ids];
+    }, [relationshipsQuery.data?.data, billingPersonId]);
+    const hasRelationships = relatedPersonIds.length > 0;
+    if (billingAlreadyAdded && !hasRelationships)
+        return null;
+    const billingName = formatPersonName(billingPerson) ?? t.travelersAddRow.billingPersonFallback;
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [!billingAlreadyAdded ? (_jsxs(Button, { variant: "outline", size: "sm", className: "self-start", onClick: () => onAdd(billingPersonId), children: [_jsx(UserPlus, { className: "size-3.5" }), t.travelersAddRow.addBillingPersonPrefix, billingName, t.travelersAddRow.addBillingPersonSuffix] })) : null, hasRelationships ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("span", { className: "text-muted-foreground text-xs", children: [t.travelersAddRow.fromRelationshipsPrefix, billingName, t.travelersAddRow.fromRelationshipsSuffix] }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: relatedPersonIds.map((personId) => (_jsx(RelatedPersonChip, { personId: personId, billingPersonId: billingPersonId, relationships: relationshipsQuery.data?.data ?? [], disabled: existingPersonIds.has(personId), onAdd: () => onAdd(personId) }, personId))) })] })) : null] }));
+}
+function RelatedPersonChip({ personId, billingPersonId, relationships, disabled, onAdd, }) {
+    const personQuery = usePerson(personId);
+    const name = formatPersonName(personQuery.data) ?? "—";
+    const relation = relationships.find((relationship) => (relationship.fromPersonId === billingPersonId && relationship.toPersonId === personId) ||
+        (relationship.toPersonId === billingPersonId && relationship.fromPersonId === personId));
+    const kindLabel = relation
+        ? formatRelationshipKind(relation.toPersonId === billingPersonId && relation.inverseKind
+            ? relation.inverseKind
+            : relation.kind)
+        : null;
+    return (_jsxs(Button, { variant: "outline", size: "sm", disabled: disabled, onClick: onAdd, className: "h-auto py-1.5", children: [_jsx(UserPlus, { className: "size-3.5" }), _jsx("span", { children: name }), kindLabel ? (_jsx(Badge, { variant: "secondary", className: "ml-1 text-[10px] capitalize", children: kindLabel })) : null] }));
+}
+function formatPersonName(person) {
+    if (!person)
+        return null;
+    const name = [person.firstName, person.lastName]
+        .filter((part) => (part ?? "").trim().length > 0)
+        .join(" ")
+        .trim();
+    return name || person.email || null;
+}
+function formatRelationshipKind(kind) {
+    return kind.replaceAll("_", " ");
+}
+function TripTravelerRow({ traveler, isLead, onPatch, onRemove, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const personQuery = usePerson(traveler.personId ?? undefined, {
+        enabled: Boolean(traveler.personId),
+    });
+    React.useEffect(() => {
+        const person = personQuery.data;
+        if (!person)
+            return;
+        const nextDob = person.dateOfBirth ?? null;
+        const derivedCategory = deriveTravelerRoleFromDob(nextDob);
+        const nextRole = isLead
+            ? "lead"
+            : nextDob
+                ? derivedCategory
+                : traveler.role === "lead"
+                    ? "adult"
+                    : traveler.role;
+        const patch = {};
+        if ((person.firstName ?? "") !== traveler.firstName)
+            patch.firstName = person.firstName ?? "";
+        if ((person.lastName ?? "") !== traveler.lastName)
+            patch.lastName = person.lastName ?? "";
+        if ((person.email ?? "") !== traveler.email)
+            patch.email = person.email ?? "";
+        if (nextDob !== traveler.dateOfBirth)
+            patch.dateOfBirth = nextDob;
+        if (nextRole !== traveler.role)
+            patch.role = nextRole;
+        if (Object.keys(patch).length > 0)
+            onPatch(patch);
+    }, [
+        personQuery.data,
+        isLead,
+        onPatch,
+        traveler.dateOfBirth,
+        traveler.email,
+        traveler.firstName,
+        traveler.lastName,
+        traveler.role,
+    ]);
+    React.useEffect(() => {
+        if (isLead && traveler.role !== "lead")
+            onPatch({ role: "lead" });
+        if (!isLead && traveler.role === "lead") {
+            const derived = deriveTravelerRoleFromDob(traveler.dateOfBirth);
+            onPatch({ role: derived });
+        }
+    }, [isLead, onPatch, traveler.dateOfBirth, traveler.role]);
+    const [sheetOpen, setSheetOpen] = React.useState(false);
+    const [sheetMode, setSheetMode] = React.useState("create");
+    const lockedByDob = Boolean(traveler.dateOfBirth);
+    const displayCategory = lockedByDob
+        ? deriveTravelerRoleFromDob(traveler.dateOfBirth)
+        : traveler.role === "lead"
+            ? "adult"
+            : traveler.role;
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "min-w-0 flex-1", children: _jsx(PersonCombobox, { value: traveler.personId, onChange: (personId) => onPatch({ personId }), placeholder: t.personPickerPlaceholder }) }), traveler.personId && personQuery.data ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => {
+                            setSheetMode("edit");
+                            setSheetOpen(true);
+                        }, children: [_jsx(Pencil, { className: "size-3.5" }), t.travelerRow.editAction] })) : null, _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                            setSheetMode("create");
+                            setSheetOpen(true);
+                        }, children: [_jsx(UserPlus, { className: "size-3.5" }), t.travelerRow.newAction] })] }), _jsx(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: sheetMode === "edit" ? t.travelerRow.editPerson : t.travelerRow.createPerson }) }), _jsx(SheetBody, { children: _jsx(PersonForm, { mode: sheetMode === "edit" && personQuery.data
+                                    ? { kind: "edit", person: personQuery.data }
+                                    : { kind: "create" }, onCancel: () => setSheetOpen(false), onSuccess: (person) => {
+                                    onPatch({ personId: person.id });
+                                    setSheetOpen(false);
+                                } }) })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [isLead ? (_jsx(Badge, { children: t.leadBadge })) : (_jsxs(_Fragment, { children: [_jsx(CategoryToggle, { value: displayCategory, onChange: (role) => onPatch({ role }), disabled: lockedByDob }), lockedByDob ? (_jsxs("span", { className: "text-muted-foreground text-xs", children: ["Auto from DOB (", formatDateOnly(traveler.dateOfBirth), ")"] })) : (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "aria-label": t.categoryManualAria, className: "text-muted-foreground hover:text-foreground" }), children: _jsx(Info, { className: "size-3.5" }) }), _jsx(TooltipContent, { children: t.travelerRow.manualCategoryHint })] }))] })), _jsx(Button, { variant: "ghost", size: "sm", className: "ml-auto", onClick: onRemove, "aria-label": t.removeTraveler, children: _jsx(Trash2, { className: "size-3.5" }) })] })] }));
+}
+function CategoryToggle({ value, onChange, disabled, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const options = [
+        { value: "adult", label: t.travelerRow.categoryAdult },
+        { value: "child", label: t.travelerRow.categoryChild },
+        { value: "infant", label: t.travelerRow.categoryInfant },
+    ];
+    return (_jsx("div", { className: "flex gap-1", children: options.map((option) => (_jsx(Button, { size: "sm", variant: value === option.value ? "default" : "outline", onClick: () => onChange(option.value), disabled: disabled, children: option.label }, option.value))) }));
+}
+function formatDateOnly(iso) {
+    if (!iso)
+        return "";
+    const parsed = new Date(iso);
+    if (Number.isNaN(parsed.getTime()))
+        return iso;
+    return new Intl.DateTimeFormat(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    }).format(parsed);
+}
+export function CommittedComponentCard({ component, selectable = false, selected = false, onSelectedChange, onRemove, removePending = false, bookingSetupEditable = false, bookingSetupSaving = false, onBookingSetupChange, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const Icon = componentIcon(component);
+    const coverUrl = componentThumbnailFor(component);
+    const componentName = componentTitleFor(component);
+    const optionSummary = componentOptionSummaryFor(component);
+    const bookingSetup = componentBookingSetupFor(component);
+    const canEditBookingSetup = bookingSetupEditable && component.kind === "catalog_booking" && !component.bookingId;
+    return (_jsxs("div", { className: `flex flex-col gap-3 rounded-md border bg-card p-4 ${selected ? "ring-2 ring-destructive/40" : ""}`, children: [_jsxs("div", { className: "flex items-start gap-3", children: [selectable ? (_jsx(Checkbox, { className: "mt-1", checked: selected, onCheckedChange: (value) => onSelectedChange?.(Boolean(value)), "aria-label": `Select ${componentName} for cancellation` })) : null, coverUrl ? (_jsx("img", { src: coverUrl, alt: "", className: "size-12 shrink-0 rounded-md object-cover ring-1 ring-border", loading: "lazy" })) : (_jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-5 text-muted-foreground" }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-medium", children: componentName }), component.status === "failed" ? (_jsx(Badge, { variant: "destructive", children: t.committedCard.statusFailed })) : component.status === "cancelled" ? (_jsx(Badge, { variant: "secondary", children: t.committedCard.statusCancelled })) : null] }), (() => {
+                                const label = formatScheduleLabel(component);
+                                return label ? (_jsxs("p", { className: "flex items-center gap-1 text-muted-foreground text-sm", children: [_jsx(CalendarClock, { className: "size-3.5" }), label] })) : null;
+                            })(), component.description ? (_jsx("p", { className: "truncate text-muted-foreground text-sm", children: component.description })) : null, optionSummary ? (_jsx("p", { className: "truncate text-muted-foreground text-sm", children: optionSummary })) : null, _jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-xs", children: [_jsx(Reference, { label: t.committedCard.bookingLabel, value: component.bookingId, href: component.bookingId ? `/bookings/${component.bookingId}` : undefined }), _jsx(Reference, { label: t.committedCard.orderLabel, value: component.orderId }), _jsx(Reference, { label: t.committedCard.paymentLabel, value: component.paymentSessionId })] })] }), _jsxs("div", { className: "flex flex-col items-end gap-1 text-right", children: [_jsx("p", { className: "font-semibold", children: formatMoney(component.componentTotalAmountCents, component.componentCurrency) }), component.componentTaxAmountCents != null && component.componentTaxAmountCents > 0 ? (_jsxs("p", { className: "text-muted-foreground text-xs", children: ["tax ", formatMoney(component.componentTaxAmountCents, component.componentCurrency)] })) : null, onRemove ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: onRemove, disabled: removePending, "aria-label": t.removeComponent, className: "text-muted-foreground hover:text-destructive", children: removePending ? (_jsx(Loader2, { className: "size-3.5 animate-spin" })) : (_jsx(Trash2, { className: "size-3.5" })) })) : null] })] }), canEditBookingSetup ? (_jsxs("div", { className: "flex flex-col gap-3 border-t pt-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium text-sm", children: t.bookingSetupHeading }), _jsx("p", { className: "text-muted-foreground text-xs", children: t.committedCard.bookingSetupHint })] }), bookingSetupSaving ? (_jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" })) : null] }), _jsx(PaymentScheduleSection, { value: bookingSetup.paymentSchedule, onChange: (paymentSchedule) => onBookingSetupChange?.(component, { ...bookingSetup, paymentSchedule }), currency: component.componentCurrency ?? undefined, totalAmountCents: component.componentTotalAmountCents ?? undefined, labels: { heading: t.committedCard.paymentScheduleHeading } }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsx(ComponentSetupCheckbox, { id: `${component.id}-contract-document`, checked: bookingSetup.generateContractDocument, label: t.committedCard.generateContract, onCheckedChange: (generateContractDocument) => onBookingSetupChange?.(component, { ...bookingSetup, generateContractDocument }) }), _jsx(ComponentSetupCheckbox, { id: `${component.id}-invoice-document`, checked: bookingSetup.generateInvoiceDocument, label: t.committedCard.generateInvoice, onCheckedChange: (generateInvoiceDocument) => onBookingSetupChange?.(component, { ...bookingSetup, generateInvoiceDocument }) })] })] })) : component.bookingId ? (_jsx("p", { className: "border-t pt-3 text-muted-foreground text-xs", children: t.committedCard.committedFooter })) : null, (() => {
+                const visibleCodes = component.warningCodes.filter(isUserVisibleWarning);
+                if (visibleCodes.length === 0)
+                    return null;
+                return (_jsxs("p", { className: "flex items-center gap-1 text-amber-600 text-xs", children: [_jsx(CircleAlert, { className: "size-3" }), visibleCodes.join(", ")] }));
+            })()] }));
+}
+function ComponentSetupCheckbox({ id, checked, label, onCheckedChange, }) {
+    return (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: id, checked: checked, onCheckedChange: (value) => onCheckedChange(value === true) }), _jsx(Label, { htmlFor: id, className: "cursor-pointer text-sm", children: label })] }));
+}
+export function componentBookingSetupFor(component) {
+    const metadata = recordFromUnknown(component.metadata);
+    const bookingSetup = recordFromUnknown(metadata?.bookingSetup);
+    const draft = recordFromUnknown(metadata?.bookingDraftV1);
+    const draftDocumentGeneration = recordFromUnknown(draft?.documentGeneration);
+    const setupDocumentGeneration = recordFromUnknown(bookingSetup?.documentGeneration);
+    const documentGeneration = setupDocumentGeneration ?? draftDocumentGeneration;
+    return {
+        paymentSchedule: paymentScheduleValueFromUnknown(bookingSetup?.paymentSchedule),
+        generateContractDocument: documentGeneration?.contractDocument === true,
+        generateInvoiceDocument: documentGeneration?.invoiceDocument === true,
+    };
+}
+export function TripPreviewRail({ trip, pendingCount, travelers, billing, billingPersonId, voucher, onVoucherChange, paymentCurrency, }) {
+    const envelope = trip?.envelope;
+    const aggregate = envelope?.aggregatePricingSnapshot;
+    const components = React.useMemo(() => sortComponentsBySchedule((trip?.components ?? []).filter((component) => component.status !== "removed")), [trip?.components]);
+    const status = envelope?.status;
+    const t = useAdminMessages().trips.adminComposer.panels;
+    return (_jsxs("div", { className: "flex flex-col gap-4 rounded-md border bg-muted/10 p-4", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(PreviewLabel, { children: t.tripPreviewLabel }), _jsx(Badge, { variant: "outline", className: "text-[10px] capitalize", children: status ?? "draft" })] }), components.length === 0 && pendingCount === 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: t.previewRail.empty })) : null, components.length > 0 ? (_jsx("ul", { className: "flex flex-col gap-3", children: components.map((component) => (_jsx("li", { children: _jsx(PreviewComponentRow, { component: component }) }, component.id))) })) : null, pendingCount > 0 ? (_jsx("p", { className: "text-muted-foreground text-xs", children: pendingCount === 1
+                    ? t.previewRail.pendingComponentsSingular
+                    : formatMessage(t.previewRail.pendingComponentsPlural, { count: pendingCount }) })) : null, components.length > 0 ? _jsx(CurrencyTotals, { components: components }) : null, _jsxs("div", { className: "flex items-center justify-between border-t pt-3 text-sm", children: [_jsx(PreviewLabel, { children: t.paymentCurrencyLabel }), _jsx("span", { className: "font-medium", children: paymentCurrency })] }), _jsx(BillingPreview, { billing: billing }), _jsx(TravelersPreview, { travelers: travelers, billingPersonId: billingPersonId ?? null }), (() => {
+                const warnings = (aggregate?.warnings ?? []).filter(isUserVisibleWarning);
+                if (warnings.length === 0)
+                    return null;
+                return (_jsxs(Alert, { children: [_jsx(AlertTriangle, { className: "size-4" }), _jsx(AlertTitle, { children: t.pricingWarningsTitle }), _jsx(AlertDescription, { children: warnings.join(", ") })] }));
+            })(), components.length > 0 ? (_jsx("div", { className: "flex flex-col gap-4 border-t pt-3", children: _jsx(VoucherPickerSection, { value: voucher, onChange: onVoucherChange, currency: paymentCurrency, amountCents: aggregate?.totalAmountCents ?? undefined }) })) : null] }));
+}
+function PreviewComponentRow({ component }) {
+    const Icon = componentIcon(component);
+    const coverUrl = componentThumbnailFor(component);
+    const name = componentTitleFor(component);
+    const optionSummary = componentOptionSummaryFor(component);
+    return (_jsxs("div", { className: "flex items-start gap-3", children: [coverUrl ? (_jsx("img", { src: coverUrl, alt: "", className: "size-12 shrink-0 rounded-md object-cover ring-1 ring-border", loading: "lazy" })) : (_jsx("div", { className: "flex size-12 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-5 text-muted-foreground" }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsx("span", { className: "truncate font-medium text-sm", children: name }), (() => {
+                        const label = formatScheduleLabel(component);
+                        return label ? (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: label })) : null;
+                    })(), optionSummary ? (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: optionSummary })) : null] }), _jsx("span", { className: "shrink-0 font-medium text-sm", children: formatMoney(component.componentTotalAmountCents, component.componentCurrency) })] }));
+}
+function BillingPreview({ billing }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const personQuery = usePerson(billing.personId || undefined, {
+        enabled: billing.mode === "existing" && Boolean(billing.personId),
+    });
+    const orgQuery = useOrganization(billing.organizationId ?? undefined, {
+        enabled: billing.billTo === "organization" && Boolean(billing.organizationId),
+    });
+    const display = resolveBillingDisplay(billing, personQuery.data, orgQuery.data, t);
+    if (!display.primary && !display.secondary)
+        return null;
+    return (_jsxs("div", { className: "flex flex-col gap-0.5 border-t pt-3", children: [_jsx(PreviewLabel, { children: t.billingLabel }), _jsx("span", { className: "truncate text-sm", children: display.primary || "—" }), display.secondary ? (_jsx("span", { className: "truncate text-muted-foreground text-xs", children: display.secondary })) : null] }));
+}
+function TravelersPreview({ travelers, billingPersonId, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    if (travelers.length === 0)
+        return null;
+    const leadLocalId = (billingPersonId &&
+        travelers.find((traveler) => traveler.personId === billingPersonId)?.localId) ||
+        travelers[0]?.localId ||
+        null;
+    return (_jsxs("div", { className: "flex flex-col gap-1 border-t pt-3", children: [_jsx(PreviewLabel, { children: formatMessage(t.travelersWithCount, { count: travelers.length }) }), _jsx("ul", { className: "flex flex-col gap-0.5 text-sm", children: travelers.map((traveler, idx) => (_jsx(TravelerPreviewRow, { traveler: traveler, index: idx, isLead: traveler.localId === leadLocalId }, traveler.localId))) })] }));
+}
+function TravelerPreviewRow({ traveler, index, isLead, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const personQuery = usePerson(traveler.personId || undefined, {
+        enabled: Boolean(traveler.personId),
+    });
+    const inlineName = [traveler.firstName, traveler.lastName]
+        .filter((part) => part.trim().length > 0)
+        .join(" ")
+        .trim();
+    const name = inlineName ||
+        formatPersonName(personQuery.data) ||
+        formatMessage(t.travelerNumberedFallback, { number: index + 1 });
+    return (_jsxs("li", { className: "flex items-center justify-between gap-3", children: [_jsx("span", { className: "truncate", children: name }), _jsx("span", { className: "shrink-0 text-muted-foreground text-xs capitalize", children: isLead ? t.leadBadge : traveler.role })] }));
+}
+function CurrencyTotals({ components }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    const buckets = React.useMemo(() => aggregateByCurrency(components), [components]);
+    if (buckets.length === 0)
+        return null;
+    return (_jsx("div", { className: "flex flex-col gap-4 border-t pt-3 text-sm", children: buckets.map((bucket) => (_jsxs("div", { className: "flex flex-col gap-1", children: [buckets.length > 1 ? _jsx(PreviewLabel, { children: bucket.currency }) : null, _jsxs("div", { className: "flex items-center justify-between text-muted-foreground", children: [_jsx("span", { children: t.subtotal }), _jsx("span", { children: formatMoney(bucket.subtotal, bucket.currency) })] }), _jsxs("div", { className: "flex items-center justify-between text-muted-foreground", children: [_jsx("span", { children: t.tax }), _jsx("span", { children: formatMoney(bucket.tax, bucket.currency) })] }), _jsxs("div", { className: "mt-0.5 flex items-center justify-between font-semibold", children: [_jsx("span", { children: t.total }), _jsx("span", { className: "text-lg", children: formatMoney(bucket.total, bucket.currency) })] })] }, bucket.currency))) }));
+}
+function aggregateByCurrency(components) {
+    const map = new Map();
+    for (const component of components) {
+        const code = component.componentCurrency;
+        if (!code)
+            continue;
+        const entry = map.get(code) ?? { currency: code, subtotal: 0, tax: 0, total: 0 };
+        entry.subtotal += component.componentSubtotalAmountCents ?? 0;
+        entry.tax += component.componentTaxAmountCents ?? 0;
+        entry.total += component.componentTotalAmountCents ?? 0;
+        map.set(code, entry);
+    }
+    return [...map.values()].sort((a, b) => b.total - a.total);
+}
+export function PrimaryAction({ status, componentCount, isBusy, pricePending, reservePending, onReserve, }) {
+    const t = useAdminMessages().trips.adminComposer.panels;
+    if (status === "checkout_started" || status === "booked") {
+        return (_jsx("div", { className: "rounded-md border bg-card p-3 text-center text-muted-foreground text-sm", children: status === "booked" ? t.primaryAction.tripBooked : t.primaryAction.tripCheckoutInProgress }));
+    }
+    if (status === "reserved") {
+        return (_jsx("div", { className: "rounded-md border bg-card p-3 text-center text-muted-foreground text-sm", children: t.primaryAction.tripReserved }));
+    }
+    if (componentCount === 0) {
+        return null;
+    }
+    if (pricePending) {
+        return (_jsxs(Button, { disabled: true, className: "w-full", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t.primaryAction.pricingTrip] }));
+    }
+    if (status === "reserve_in_progress" || reservePending) {
+        return (_jsxs(Button, { disabled: true, className: "w-full", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t.primaryAction.reservingTrip] }));
+    }
+    // `failed` lands here after a reserve attempt errored — allow retry. `priced`
+    // is the happy-path entry into reserve. Any other status (e.g. `draft`)
+    // means pricing hasn't run yet — gate the button until that catches up.
+    const canReserve = status === "priced" || status === "failed";
+    return (_jsxs(Button, { onClick: onReserve, disabled: isBusy || !canReserve, className: "w-full", children: [_jsx(Check, { className: "size-4" }), status === "failed" ? t.primaryAction.retryReserve : t.primaryAction.reserveAndCreateLink] }));
+}
+function PreviewLabel({ children }) {
+    return (_jsx("span", { className: "font-medium text-[11px] text-muted-foreground uppercase tracking-wider", children: children }));
+}
+function resolveBillingDisplay(billing, person, org, messages) {
+    if (billing.billTo === "organization" && org?.name) {
+        return { primary: org.name, secondary: messages.billingPreview.organizationSecondary };
+    }
+    if (billing.mode === "new") {
+        const name = [billing.newPerson.firstName, billing.newPerson.lastName]
+            .filter((part) => part.trim().length > 0)
+            .join(" ")
+            .trim();
+        return {
+            primary: name || billing.newPerson.email.trim(),
+            secondary: name ? billing.newPerson.email.trim() : "",
+        };
+    }
+    if (person) {
+        const name = [person.firstName, person.lastName]
+            .filter((part) => (part ?? "").trim().length > 0)
+            .join(" ")
+            .trim();
+        return { primary: name || (person.email ?? ""), secondary: name ? (person.email ?? "") : "" };
+    }
+    return { primary: "", secondary: "" };
+}
+function Reference({ label, value, href, }) {
+    if (!value)
+        return null;
+    if (!href)
+        return (_jsxs("span", { children: [label, ": ", _jsxs("span", { className: "font-mono", children: [value.slice(0, 12), "\u2026"] })] }));
+    return (_jsxs("a", { className: "inline-flex items-center gap-1 text-primary", href: href, children: [label, ": ", _jsxs("span", { className: "font-mono", children: [value.slice(0, 12), "\u2026"] }), _jsx(ExternalLink, { className: "size-3" })] }));
+}
+function componentIcon(component) {
+    if (component.kind === "flight_placeholder" || component.kind === "flight_order")
+        return Plane;
+    if (component.entityModule === "accommodations")
+        return BedDouble;
+    if (component.kind === "manual_placeholder" || component.kind === "external_order")
+        return Landmark;
+    return RouteIcon;
+}
+function verticalIconFor(kind) {
+    if (kind === "product")
+        return RouteIcon;
+    if (kind === "stay")
+        return BedDouble;
+    if (kind === "flight")
+        return Plane;
+    if (kind === "cruise")
+        return Sailboat;
+    return Wrench;
+}
+function verticalLabelFor(kind, messages) {
+    const found = verticalsFor(messages).find((vertical) => vertical.kind === kind);
+    return found?.label ?? kind;
+}
+export function readComponentSchedule(component) {
+    const md = component.metadata;
+    if (md?.scheduledStartsAt) {
+        return { start: md.scheduledStartsAt, end: md.scheduledEndsAt ?? null };
+    }
+    const dateRange = md?.bookingDraftV1?.configure?.dateRange;
+    if (dateRange?.checkIn) {
+        return { start: dateRange.checkIn, end: dateRange.checkOut ?? null };
+    }
+    const flight = md?.flightDraft;
+    if (flight?.departDate) {
+        return { start: flight.departDate, end: flight.returnDate ?? null };
+    }
+    const cruise = md?.cruiseDraft;
+    if (cruise?.embarkationDate) {
+        return { start: cruise.embarkationDate, end: null };
+    }
+    return { start: null, end: null };
+}
+export function formatScheduleLabel(component) {
+    const { start, end } = readComponentSchedule(component);
+    if (!start)
+        return null;
+    const startLabel = formatDateTime(start);
+    if (!end || end === start)
+        return startLabel;
+    return `${startLabel} → ${formatDateTime(end)}`;
+}
+export function sortComponentsBySchedule(components) {
+    return [...components].sort((a, b) => {
+        const aStart = readComponentSchedule(a).start;
+        const bStart = readComponentSchedule(b).start;
+        const aMs = aStart ? new Date(aStart).getTime() : Number.NaN;
+        const bMs = bStart ? new Date(bStart).getTime() : Number.NaN;
+        // Components without a schedule fall to the bottom, then ordered by sequence.
+        const aMissing = Number.isNaN(aMs);
+        const bMissing = Number.isNaN(bMs);
+        if (aMissing && bMissing)
+            return a.sequence - b.sequence;
+        if (aMissing)
+            return 1;
+        if (bMissing)
+            return -1;
+        if (aMs !== bMs)
+            return aMs - bMs;
+        return a.sequence - b.sequence;
+    });
+}
+export function readPendingSchedule(pending) {
+    if (pending.kind === "product" || pending.kind === "stay") {
+        return { start: pending.startsAt || null, end: pending.endsAt || null };
+    }
+    if (pending.kind === "flight") {
+        const offerSchedule = readFlightOfferSchedule(pending.selectedOffer);
+        if (offerSchedule.start)
+            return offerSchedule;
+        return { start: pending.departDate || null, end: pending.returnDate || null };
+    }
+    if (pending.kind === "cruise") {
+        return { start: pending.embarkationDate || null, end: null };
+    }
+    return { start: pending.startsAt || null, end: pending.endsAt || null };
+}
+function readFlightOfferSchedule(offer) {
+    if (!offer)
+        return { start: null, end: null };
+    const firstItinerary = offer.itineraries[0];
+    const lastItinerary = offer.itineraries[offer.itineraries.length - 1];
+    const firstSegment = firstItinerary?.segments[0];
+    const lastSegment = lastItinerary?.segments[lastItinerary.segments.length - 1];
+    return {
+        start: firstSegment?.departure.at ?? null,
+        end: lastSegment?.arrival.at ?? null,
+    };
+}
+function toRange(start, end) {
+    if (!start)
+        return null;
+    const startMs = new Date(start).getTime();
+    if (Number.isNaN(startMs))
+        return null;
+    const endMs = end ? new Date(end).getTime() : startMs;
+    if (Number.isNaN(endMs))
+        return [startMs, startMs];
+    return [startMs, Math.max(endMs, startMs)];
+}
+export function findOverlappingComponent(pending, committed) {
+    const { start: pStart, end: pEnd } = readPendingSchedule(pending);
+    const pendingRange = toRange(pStart, pEnd);
+    if (!pendingRange)
+        return null;
+    for (const component of committed) {
+        const { start, end } = readComponentSchedule(component);
+        const range = toRange(start, end);
+        if (!range)
+            continue;
+        // Half-open overlap: [a1, a2) ∩ [b1, b2) ≠ ∅ iff a1 < b2 ∧ b1 < a2.
+        if (pendingRange[0] < range[1] && range[0] < pendingRange[1])
+            return component;
+    }
+    return null;
+}
+export function componentTitleFor(component, resolvedEntityName) {
+    const metadata = component.metadata;
+    const entityName = cleanDisplayLabel(resolvedEntityName);
+    if (entityName)
+        return entityName;
+    const catalogName = cleanDisplayLabel(metadata?.catalogItem?.name);
+    if (catalogName)
+        return catalogName;
+    if (component.kind === "flight_placeholder" || component.kind === "flight_order") {
+        const origin = cleanDisplayLabel(metadata?.flightDraft?.origin);
+        const destination = cleanDisplayLabel(metadata?.flightDraft?.destination);
+        if (origin && destination)
+            return `${origin} → ${destination}`;
+    }
+    if (component.entityModule === "cruises") {
+        const cabin = cleanDisplayLabel(metadata?.cruiseDraft?.cabin);
+        if (cabin)
+            return `Cabin ${cabin}`;
+    }
+    if (component.entityModule === "accommodations") {
+        const accommodationName = cleanDisplayLabel(metadata?.accommodation?.propertyName) ??
+            cleanDisplayLabel(metadata?.accommodation?.name) ??
+            cleanDisplayLabel(metadata?.accommodation?.roomTypeName);
+        if (accommodationName)
+            return accommodationName;
+    }
+    if (metadata?.cruiseDraft) {
+        const cabin = cleanDisplayLabel(metadata.cruiseDraft.cabin);
+        if (cabin)
+            return `Cabin ${cabin}`;
+    }
+    if (component.kind === "manual_placeholder") {
+        const serviceName = cleanDisplayLabel(metadata?.manualService?.name);
+        if (serviceName)
+            return serviceName;
+        const title = cleanDisplayLabel(component.title);
+        if (title)
+            return title;
+        const description = cleanDisplayLabel(component.description);
+        if (description)
+            return description;
+    }
+    return componentReferenceLabelFor(component);
+}
+export function componentOptionSummaryFor(component) {
+    const metadata = component.metadata;
+    if (metadata?.flightDraft) {
+        const flightLabels = flightSelectionLabels(metadata.flightDraft.selectedOffer ?? null, metadata.flightDraft.ancillaries ?? null);
+        if (flightLabels.length > 0)
+            return flightLabels.join(", ");
+    }
+    const selections = metadata?.bookingDraftV1?.configure?.optionSelections ?? [];
+    const labels = selections.flatMap((selection) => {
+        const quantity = typeof selection.quantity === "number" && Number.isFinite(selection.quantity)
+            ? selection.quantity
+            : 0;
+        if (quantity <= 0)
+            return [];
+        const name = cleanDisplayLabel(selection.optionName) ??
+            cleanDisplayLabel(selection.optionUnitName) ??
+            cleanDisplayLabel(selection.optionId) ??
+            cleanDisplayLabel(selection.optionUnitId);
+        if (!name)
+            return [];
+        return [`${quantity} × ${name}`];
+    });
+    return labels.length > 0 ? labels.join(", ") : null;
+}
+export function componentThumbnailFor(component) {
+    const metadata = component.metadata;
+    return cleanDisplayLabel(metadata?.catalogItem?.thumbnailUrl);
+}
+export function componentReferenceLabelFor(component) {
+    const reference = component.providerRef ??
+        component.supplierRef ??
+        component.bookingId ??
+        component.orderId ??
+        component.paymentSessionId ??
+        component.sourceRef ??
+        component.entityId ??
+        component.id;
+    return reference.length > 18 ? reference.slice(0, 18) : reference;
+}
+function cleanDisplayLabel(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return null;
+    const normalized = trimmed.toLowerCase();
+    if (normalized === "untitled trip" ||
+        normalized === "untitled component" ||
+        normalized === "flight placeholder" ||
+        normalized.startsWith("flight placeholder ") ||
+        normalized === "manual placeholder" ||
+        normalized === "cruise" ||
+        normalized === "cruise placeholder" ||
+        normalized === "catalog booking" ||
+        normalized === "product booking" ||
+        normalized === "stay booking" ||
+        normalized === "cruise booking" ||
+        normalized === "external order" ||
+        normalized === "flight order" ||
+        /^component \d+$/.test(normalized)) {
+        return null;
+    }
+    return trimmed;
+}
+function recordFromUnknown(value) {
+    return value && typeof value === "object" && !Array.isArray(value)
+        ? value
+        : null;
+}
+function paymentScheduleValueFromUnknown(value) {
+    const record = recordFromUnknown(value);
+    const mode = record?.mode === "split" ? "split" : record?.mode === "full" ? "full" : null;
+    if (!mode)
+        return { ...emptyPaymentScheduleValue };
+    return {
+        ...emptyPaymentScheduleValue,
+        ...record,
+        mode,
+    };
+}
+// Backend-emitted noise codes that just acknowledge how the price was set —
+// staff-built trips always carry `manual_placeholder_price` for manual /
+// external / flight placeholders. `currency_mismatch:*` is also noise here
+// because the rail already breaks totals out per currency.
+function isUserVisibleWarning(code) {
+    if (code === "manual_placeholder_price")
+        return false;
+    if (code.startsWith("currency_mismatch"))
+        return false;
+    return true;
+}
+export function formatDateTime(iso) {
+    const parsed = new Date(iso);
+    if (Number.isNaN(parsed.getTime()))
+        return iso;
+    const hasTime = iso.includes("T") || iso.includes(" ");
+    return new Intl.DateTimeFormat(undefined, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+        ...(hasTime ? { hour: "2-digit", minute: "2-digit" } : {}),
+    }).format(parsed);
+}
+function formatDepartureLabel(slot) {
+    const date = formatDateTime(slot.startsAt);
+    const duration = slot.nights ? ` · ${slot.nights}n` : slot.days ? ` · ${slot.days}d` : "";
+    const capacity = slot.unlimited
+        ? ""
+        : slot.remainingPax != null
+            ? ` · ${slot.remainingPax} left`
+            : "";
+    return `${date}${duration}${capacity}`;
+}
+export function formatMoney(amountCents, currencyCode) {
+    if (amountCents == null)
+        return "-";
+    return (amountCents / 100).toLocaleString(undefined, {
+        style: "currency",
+        currency: currencyCode ?? "EUR",
+    });
+}