@voyantjs/travel-composer-react 0.105.7 → 0.105.8

package/dist/admin/index.d.ts

@@ -0,0 +1,63 @@
+import { type AdminExtension, type NavItem } from "@voyantjs/admin";
+/**
+ * Semantic destinations the travel-composer admin surfaces navigate to
+ * (packaged-admin RFC §4.7). The trips list opens the trip detail page, the
+ * detail page links back to the list and across to the booking/person
+ * pages — instead of importing a host route tree they resolve these keys
+ * through `useAdminHref`/`useAdminNavigate` from `@voyantjs/admin`. Hosts
+ * register one resolver per key (`satisfies AdminDestinationResolvers`).
+ * Keys shared with other domains (`booking.detail`, `person.detail`) come
+ * from the bookings-react augmentation bound above.
+ */
+declare module "@voyantjs/admin" {
+    interface AdminDestinations {
+        /** The trips list page. */
+        "trip.list": Record<string, never>;
+        /** A trip's detail page; the `"new"` pseudo-id opens the composer. */
+        "trip.detail": {
+            tripId: string;
+        };
+    }
+}
+export type { AdminTripComposerPageProps } from "./admin-trip-composer-page.js";
+export type { TripListFiltersPopoverProps, TripStatusFilter } from "./trip-list-filters.js";
+export interface CreateTravelComposerAdminExtensionOptions {
+    /** Mount path of the trips pages inside the admin workspace. Default `/trips`. */
+    basePath?: string;
+    /** Localized nav/page labels. Defaults are the English operator nav labels. */
+    labels?: {
+        trips?: string;
+        allTrips?: string;
+        newTrip?: string;
+    };
+    /** Nav icon — icon choice stays with the host (e.g. lucide `Route`). */
+    icon?: NavItem["icon"];
+}
+/**
+ * The travel-composer admin contribution (packaged-admin RFC Phase 3,
+ * `@voyantjs/<domain>-react/admin` convention).
+ *
+ * NAVIGATION: package-delivered. Trips is NOT part of the BASE operator
+ * navigation (`createOperatorAdminNavigation` in `@voyantjs/admin`), so the
+ * extension contributes the Trips group itself — spliced in right after
+ * Bookings (both belong to the booking lifecycle) via `insertAfter`, with
+ * All trips / New trip sub-items. The icon stays a host choice.
+ *
+ * ROUTES: contributions carry the FULL route implementation (packaged-admin
+ * RFC §4.2/§4.8) — lazy `page` module loaders, data loaders fed by the
+ * host-supplied {@link AdminRouteLoaderContext} (QueryClient + runtime +
+ * params), per-route SSR mode. Hosts bind them into their code-assembled
+ * admin route tree; no per-route host files needed. The pages stay
+ * code-split because each contribution's `page` dynamically imports the
+ * specific host/page module — never this barrel — and the trip composer
+ * itself mounts through a nested `React.lazy`, so its heavy panel stack
+ * (flights search, catalog browse, booking journey) only fetches when an
+ * operator actually composes/edits a trip. The list keeps its filter/sort/
+ * paging state local (no URL search contracts), and every cross-route link
+ * resolves through the semantic destinations declared above — no app RPC
+ * client, no host route tree.
+ *
+ * WIDGETS: none contributed and no slots exposed yet.
+ */
+export declare function createTravelComposerAdminExtension(options?: CreateTravelComposerAdminExtensionOptions): AdminExtension;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/admin/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAKnB,KAAK,OAAO,EACb,MAAM,iBAAiB,CAAA;AAcxB;;;;;;;;;GASG;AACH,OAAO,QAAQ,iBAAiB,CAAC;IAC/B,UAAU,iBAAiB;QACzB,2BAA2B;QAC3B,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,CAAA;QAClC,sEAAsE;QACtE,aAAa,EAAE;YAAE,MAAM,EAAE,MAAM,CAAA;SAAE,CAAA;KAClC;CACF;AAWD,YAAY,EAAE,0BAA0B,EAAE,MAAM,+BAA+B,CAAA;AAC/E,YAAY,EAAE,2BAA2B,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAE3F,MAAM,WAAW,yCAAyC;IACxD,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,+EAA+E;IAC/E,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,OAAO,CAAC,EAAE,MAAM,CAAA;KACjB,CAAA;IACD,wEAAwE;IACxE,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,kCAAkC,CAChD,OAAO,GAAE,yCAA8C,GACtD,cAAc,CAiFhB"}

package/dist/admin/index.js

@@ -0,0 +1,119 @@
+import { adminRoutePageModule, defineAdminExtension, } from "@voyantjs/admin";
+// Lean static only: the client module (fetcher). Query options resolve via
+// dynamic import inside the loaders so the travel-composer data layer
+// (client + response schemas) stays out of the workspace-chrome chunk that
+// evaluates this factory.
+import { defaultFetcher } from "../client.js";
+/**
+ * The travel-composer admin contribution (packaged-admin RFC Phase 3,
+ * `@voyantjs/<domain>-react/admin` convention).
+ *
+ * NAVIGATION: package-delivered. Trips is NOT part of the BASE operator
+ * navigation (`createOperatorAdminNavigation` in `@voyantjs/admin`), so the
+ * extension contributes the Trips group itself — spliced in right after
+ * Bookings (both belong to the booking lifecycle) via `insertAfter`, with
+ * All trips / New trip sub-items. The icon stays a host choice.
+ *
+ * ROUTES: contributions carry the FULL route implementation (packaged-admin
+ * RFC §4.2/§4.8) — lazy `page` module loaders, data loaders fed by the
+ * host-supplied {@link AdminRouteLoaderContext} (QueryClient + runtime +
+ * params), per-route SSR mode. Hosts bind them into their code-assembled
+ * admin route tree; no per-route host files needed. The pages stay
+ * code-split because each contribution's `page` dynamically imports the
+ * specific host/page module — never this barrel — and the trip composer
+ * itself mounts through a nested `React.lazy`, so its heavy panel stack
+ * (flights search, catalog browse, booking journey) only fetches when an
+ * operator actually composes/edits a trip. The list keeps its filter/sort/
+ * paging state local (no URL search contracts), and every cross-route link
+ * resolves through the semantic destinations declared above — no app RPC
+ * client, no host route tree.
+ *
+ * WIDGETS: none contributed and no slots exposed yet.
+ */
+export function createTravelComposerAdminExtension(options = {}) {
+    const { basePath = "/trips", labels = {}, icon } = options;
+    const { trips = "Trips", allTrips = "All trips", newTrip = "New trip" } = labels;
+    return defineAdminExtension({
+        id: "travel-composer",
+        navigation: [
+            {
+                // Splice Trips in right after Bookings — both belong to the booking
+                // lifecycle. `insertAfter` keeps the contribution shape; the resolver
+                // splices in place rather than appending at the end.
+                insertAfter: "bookings",
+                items: [
+                    {
+                        id: "travel-composer",
+                        title: trips,
+                        url: basePath,
+                        icon,
+                        items: [
+                            {
+                                id: "travel-composer-list",
+                                title: allTrips,
+                                url: basePath,
+                            },
+                            {
+                                id: "travel-composer-new",
+                                title: newTrip,
+                                url: `${basePath}/new`,
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+        routes: [
+            {
+                id: "travel-composer-index",
+                path: basePath,
+                title: trips,
+                // Route-backed destination (RFC §4.7 endgame): the key resolves by
+                // pure path interpolation of this route, so the host's resolver is
+                // generated (`voyant admin generate --destinations`).
+                destination: "trip.list",
+                ssr: "data-only",
+                page: () => import("./trips-host.js").then((module) => adminRoutePageModule(module.TripsHost)),
+                // Dynamic import on purpose: the query options pull the
+                // travel-composer data layer (client + response schemas), and a
+                // static import here would pin it into the workspace-chrome chunk
+                // that evaluates this factory. The host module carries the matching
+                // initial params so the seeded cache entry lines up with the page's
+                // first query.
+                loader: async ({ queryClient, runtime }) => {
+                    const [{ listTripsQueryOptions }, { initialTripsListParams }] = await Promise.all([
+                        import("../query-options.js"),
+                        import("./trips-host.js"),
+                    ]);
+                    return queryClient.ensureQueryData(listTripsQueryOptions(loaderClient(runtime), initialTripsListParams));
+                },
+            },
+            {
+                id: "travel-composer-detail",
+                path: `${basePath}/$id`,
+                title: trips,
+                destination: "trip.detail",
+                destinationParams: { id: "tripId" },
+                ssr: "data-only",
+                page: () => import("./pages/trip-detail-page.js"),
+                // The `"new"` pseudo-id mounts the composer with no trip to fetch.
+                // Dynamic import on purpose — see the trips index loader above.
+                loader: async ({ queryClient, runtime, params }) => {
+                    const id = params.id;
+                    if (!id || id === "new")
+                        return;
+                    const { getTripQueryOptions } = await import("../query-options.js");
+                    return queryClient.ensureQueryData(getTripQueryOptions(loaderClient(runtime), id));
+                },
+            },
+        ],
+    });
+}
+/**
+ * Bridge the host-supplied {@link AdminRouteRuntime} (optional fetcher) to
+ * the required-fetcher client contract the travel-composer query options
+ * take — SSR loaders run with the host runtime's cookie-forwarding fetcher.
+ */
+function loaderClient(runtime) {
+    return { baseUrl: runtime.baseUrl, fetcher: runtime.fetcher ?? defaultFetcher };
+}

package/dist/admin/pages/trip-detail-page.d.ts

@@ -0,0 +1,10 @@
+import type { AdminRoutePageProps } from "@voyantjs/admin";
+/**
+ * Param-taking page for the `travel-composer-detail` contribution: reads the
+ * trip envelope id off {@link AdminRoutePageProps} and binds it onto the
+ * packaged host. Resolved lazily through the contribution's `page` loader so
+ * the detail page (and the composer behind its Edit mode) lands in its own
+ * chunk.
+ */
+export default function TripDetailPage({ params }: AdminRoutePageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=trip-detail-page.d.ts.map

package/dist/admin/pages/trip-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trip-detail-page.d.ts","sourceRoot":"","sources":["../../../src/admin/pages/trip-detail-page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAA;AAI1D;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,EAAE,mBAAmB,2CAErE"}

package/dist/admin/pages/trip-detail-page.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TripDetailHost } from "../trip-detail-host.js";
+/**
+ * Param-taking page for the `travel-composer-detail` contribution: reads the
+ * trip envelope id off {@link AdminRoutePageProps} and binds it onto the
+ * packaged host. Resolved lazily through the contribution's `page` loader so
+ * the detail page (and the composer behind its Edit mode) lands in its own
+ * chunk.
+ */
+export default function TripDetailPage({ params }) {
+    return _jsx(TripDetailHost, { id: params.id ?? "" });
+}

package/dist/admin/trip-component-display.d.ts

@@ -0,0 +1,10 @@
+import type { TripComponent } from "@voyantjs/travel-composer";
+export declare function readComponentSchedule(component: TripComponent): {
+    start: string | null;
+    end: string | null;
+};
+export declare function formatScheduleLabel(component: TripComponent): string | null;
+export declare function sortComponentsBySchedule(components: TripComponent[]): TripComponent[];
+export declare function componentTitleFor(component: TripComponent, resolvedEntityName?: string | null): string;
+export declare function componentReferenceLabelFor(component: TripComponent): string;
+//# sourceMappingURL=trip-component-display.d.ts.map

package/dist/admin/trip-component-display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trip-component-display.d.ts","sourceRoot":"","sources":["../../src/admin/trip-component-display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAA;AAE9D,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,aAAa,GAAG;IAC/D,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;IACpB,GAAG,EAAE,MAAM,GAAG,IAAI,CAAA;CACnB,CA8BA;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAM3E;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,aAAa,EAAE,GAAG,aAAa,EAAE,CAcrF;AAED,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,aAAa,EACxB,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,GACjC,MAAM,CAgER;AAED,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,aAAa,GAAG,MAAM,CAW3E"}

package/dist/admin/trip-component-display.js

@@ -0,0 +1,137 @@
+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;
+        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 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 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 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);
+}

package/dist/admin/trip-detail-host.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Packaged admin host for the trip detail page (packaged-admin RFC
+ * Phase 3). The `"new"` pseudo-id mounts the admin trip composer directly;
+ * existing trips render the read-only record page (seeded by the
+ * `travel-composer-detail` contribution's loader) with an Edit toggle into
+ * the composer. Cross-route links (bookings, CRM people, the trips list)
+ * resolve through semantic destinations (RFC §4.7).
+ */
+export declare function TripDetailHost({ id }: {
+    id: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=trip-detail-host.d.ts.map

package/dist/admin/trip-detail-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trip-detail-host.d.ts","sourceRoot":"","sources":["../../src/admin/trip-detail-host.tsx"],"names":[],"mappings":"AAuDA;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,kDA0BpD"}

package/dist/admin/trip-detail-host.js

@@ -0,0 +1,257 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useAdminHref, useOperatorAdminMessages as useAdminMessages, useAdminNavigate, } from "@voyantjs/admin";
+import { useOrganization, usePerson } from "@voyantjs/crm-react";
+import { buildPaymentLinkUrl } from "@voyantjs/finance/payment-link";
+import { formatMessage } from "@voyantjs/i18n";
+import { Badge } from "@voyantjs/ui/components/badge";
+import { Button } from "@voyantjs/ui/components/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components/card";
+import { Separator } from "@voyantjs/ui/components/separator";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
+import { ArrowLeft, BedDouble, CalendarClock, Check, Copy, CreditCard, ExternalLink, Pencil, Plane, Route as RouteIcon, Ship, Users, } from "lucide-react";
+import { lazy, Suspense, useState } from "react";
+import { useVoyantTravelComposerContext } from "../provider.js";
+import { getTripQueryOptions } from "../query-options.js";
+import { componentReferenceLabelFor, componentTitleFor, formatScheduleLabel, sortComponentsBySchedule, } from "./trip-component-display.js";
+const AdminTripComposerPage = lazy(() => import("./admin-trip-composer-page.js").then((module) => ({
+    default: module.AdminTripComposerPage,
+})));
+/**
+ * Packaged admin host for the trip detail page (packaged-admin RFC
+ * Phase 3). The `"new"` pseudo-id mounts the admin trip composer directly;
+ * existing trips render the read-only record page (seeded by the
+ * `travel-composer-detail` contribution's loader) with an Edit toggle into
+ * the composer. Cross-route links (bookings, CRM people, the trips list)
+ * resolve through semantic destinations (RFC §4.7).
+ */
+export function TripDetailHost({ id }) {
+    const [mode, setMode] = useState("record");
+    const { baseUrl, fetcher } = useVoyantTravelComposerContext();
+    const isNew = id === "new";
+    const tripQuery = useQuery({
+        ...getTripQueryOptions({ baseUrl, fetcher }, id),
+        enabled: !isNew,
+    });
+    const trip = isNew ? null : (tripQuery.data ?? null);
+    if (!trip) {
+        if (!isNew && tripQuery.isPending)
+            return null;
+        return (_jsx(Suspense, { fallback: null, children: _jsx(AdminTripComposerPage, { initialTrip: null }) }));
+    }
+    if (mode === "edit") {
+        return (_jsx(Suspense, { fallback: null, children: _jsx(AdminTripComposerPage, { initialTrip: trip }) }));
+    }
+    return _jsx(TripRecordPage, { trip: trip, onEdit: () => setMode("edit") });
+}
+function TripRecordPage({ trip, onEdit }) {
+    const messages = useAdminMessages().trips;
+    const detailMessages = messages.detail;
+    const navigateTo = useAdminNavigate();
+    const { baseUrl } = useVoyantTravelComposerContext();
+    const [copiedPaymentLink, setCopiedPaymentLink] = useState(false);
+    const envelope = trip.envelope;
+    const activeComponents = sortComponentsBySchedule(trip.components.filter((component) => component.status !== "removed"));
+    const bookedComponents = activeComponents.filter((component) => component.bookingId).length;
+    const externalRefs = activeComponents.filter((component) => component.orderId || component.paymentSessionId).length;
+    const scheduleSummary = tripScheduleLabel(activeComponents);
+    return (_jsxs("main", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => navigateTo("trip.list", {}), children: [_jsx(ArrowLeft, { className: "size-4", "aria-hidden": "true" }), detailMessages.breadcrumb] }), _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [_jsx("h1", { className: "font-bold text-2xl tracking-tight", children: detailMessages.title }), _jsx(Badge, { variant: envelope.status === "failed" ? "destructive" : "secondary", children: messages.statuses[envelope.status] })] }), envelope.description ? (_jsx("p", { className: "max-w-3xl text-muted-foreground text-sm", children: envelope.description })) : null, _jsx("p", { className: "text-muted-foreground text-xs", children: scheduleSummary
+                                            ? `${scheduleSummary} · ${activeComponents.length} ${activeComponents.length === 1
+                                                ? messages.list.componentSingular
+                                                : messages.list.componentPlural} · ${envelope.id}`
+                                            : `${activeComponents.length} ${activeComponents.length === 1
+                                                ? messages.list.componentSingular
+                                                : messages.list.componentPlural} · ${envelope.id}` })] })] }), _jsxs(Button, { onClick: onEdit, children: [_jsx(Pencil, { className: "size-4", "aria-hidden": "true" }), detailMessages.editTrip] })] }), _jsxs("section", { className: "grid gap-4 md:grid-cols-4", children: [_jsx(SummaryCard, { label: detailMessages.summary.total, value: formatMoney(envelope.aggregateTotalAmountCents, envelope.aggregateCurrency), icon: CreditCard }), _jsx(SummaryCard, { label: detailMessages.summary.components, value: String(activeComponents.length), icon: RouteIcon }), _jsx(SummaryCard, { label: detailMessages.summary.bookings, value: String(bookedComponents), icon: CalendarClock }), _jsx(SummaryCard, { label: detailMessages.summary.externalRefs, value: String(externalRefs), icon: ExternalLink })] }), _jsxs("section", { className: "grid gap-4 lg:grid-cols-2", children: [_jsx(BillingRecord, { travelerParty: envelope.travelerParty, messages: detailMessages }), _jsx(TravelersRecord, { travelerParty: envelope.travelerParty, messages: detailMessages })] }), _jsxs("section", { className: "grid gap-6 xl:grid-cols-[minmax(0,1fr)_360px]", children: [_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: detailMessages.components.component }), _jsx(TableHead, { children: detailMessages.components.status }), _jsx(TableHead, { children: detailMessages.components.tax }), _jsx(TableHead, { children: detailMessages.components.total }), _jsx(TableHead, { className: "text-right", children: detailMessages.components.record })] }) }), _jsx(TableBody, { children: activeComponents.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-28 text-center text-muted-foreground text-sm", children: detailMessages.noComponentsOnTrip }) })) : (activeComponents.map((component) => (_jsx(ComponentRow, { component: component, messages: detailMessages, onOpenBooking: (bookingId) => navigateTo("booking.detail", { bookingId }) }, component.id)))) })] }) }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: detailMessages.summary.record }) }), _jsxs(CardContent, { className: "space-y-4", children: [_jsx(SummaryLine, { label: detailMessages.summary.status, value: messages.statuses[envelope.status] }), _jsx(SummaryLine, { label: detailMessages.summary.updated, value: formatDate(envelope.updatedAt) }), _jsx(SummaryLine, { label: detailMessages.summary.reserved, value: formatDate(envelope.reservedAt) }), _jsx(SummaryLine, { label: detailMessages.summary.checkoutStarted, value: formatDate(envelope.checkoutStartedAt) }), envelope.paymentSessionId ? (_jsxs("div", { className: "flex items-center justify-between gap-4 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: detailMessages.summary.paymentLink }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => void copyPaymentLink(envelope.paymentSessionId ?? "", baseUrl).then((copied) => {
+                                                    setCopiedPaymentLink(copied);
+                                                    if (copied) {
+                                                        window.setTimeout(() => setCopiedPaymentLink(false), 2000);
+                                                    }
+                                                }), children: [copiedPaymentLink ? (_jsx(Check, { className: "size-4", "aria-hidden": "true" })) : (_jsx(Copy, { className: "size-4", "aria-hidden": "true" })), copiedPaymentLink
+                                                        ? detailMessages.summary.copied
+                                                        : detailMessages.summary.copyLink] })] })) : null, _jsx(Separator, {}), _jsx(SummaryLine, { label: detailMessages.summary.subtotal, value: formatMoney(envelope.aggregateSubtotalAmountCents, envelope.aggregateCurrency) }), _jsx(SummaryLine, { label: detailMessages.summary.tax, value: formatMoney(envelope.aggregateTaxAmountCents, envelope.aggregateCurrency) }), _jsx(SummaryLine, { label: detailMessages.summary.total, value: formatMoney(envelope.aggregateTotalAmountCents, envelope.aggregateCurrency), strong: true })] })] })] })] }));
+}
+async function copyPaymentLink(paymentSessionId, apiBaseUrl) {
+    if (!paymentSessionId || typeof window === "undefined")
+        return false;
+    const publicCheckoutBaseUrl = await fetchPublicCheckoutBaseUrl(apiBaseUrl);
+    const url = buildPaymentLinkUrl(paymentSessionId, {
+        baseUrl: publicCheckoutBaseUrl ?? window.location.origin,
+    });
+    try {
+        await navigator.clipboard.writeText(url);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+async function fetchPublicCheckoutBaseUrl(apiBaseUrl) {
+    try {
+        const res = await fetch(`${apiBaseUrl}/v1/public/payment-link-config`, {
+            headers: { Accept: "application/json" },
+        });
+        if (!res.ok)
+            return null;
+        const body = (await res.json());
+        return body.data?.publicCheckoutBaseUrl ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+function BillingRecord({ travelerParty, messages, }) {
+    const billing = readBilling(travelerParty);
+    const personQuery = usePerson(billing?.personId, { enabled: Boolean(billing?.personId) });
+    const orgQuery = useOrganization(billing?.organizationId, {
+        enabled: Boolean(billing?.organizationId),
+    });
+    const resolvedPersonName = formatPersonName(personQuery.data);
+    const primary = orgQuery.data?.name ??
+        resolvedPersonName ??
+        formatContactName(billing?.contact) ??
+        billing?.contact?.email ??
+        null;
+    const secondary = [
+        orgQuery.data?.name ? resolvedPersonName : null,
+        billing?.contact?.email,
+        billing?.buyerType,
+    ].filter(Boolean);
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "text-base", children: messages.billing.title }) }), _jsx(CardContent, { className: "space-y-3", children: primary ? (_jsxs(_Fragment, { children: [_jsxs("div", { children: [_jsx("p", { className: "font-medium", children: billing?.personId && !orgQuery.data?.name ? (_jsx(PersonLink, { personId: billing.personId, children: primary })) : (primary) }), secondary.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-x-1 text-muted-foreground text-sm", children: [orgQuery.data?.name && billing?.personId && resolvedPersonName ? (_jsxs(_Fragment, { children: [_jsx(PersonLink, { personId: billing.personId, children: resolvedPersonName }), billing.contact?.email || billing.buyerType ? _jsx("span", { children: "\u00B7" }) : null] })) : null, billing?.contact?.email ? _jsx("span", { children: billing.contact.email }) : null, billing?.contact?.email && billing?.buyerType ? _jsx("span", { children: "\u00B7" }) : null, billing?.buyerType ? _jsx("span", { children: billing.buyerType }) : null] })) : null] }), _jsxs("div", { className: "flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-xs", children: [billing?.personId ? (_jsxs("span", { children: [messages.billing.person, ": ", billing.personId] })) : null, billing?.organizationId ? (_jsxs("span", { children: [messages.billing.organization, ": ", billing.organizationId] })) : null] })] })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.billing.noProfile })) })] }));
+}
+function TravelersRecord({ travelerParty, messages, }) {
+    const travelers = readTravelers(travelerParty);
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs(CardTitle, { className: "flex items-center gap-2 text-base", children: [_jsx(Users, { className: "size-4", "aria-hidden": "true" }), messages.travelers.title] }) }), _jsx(CardContent, { children: travelers.length > 0 ? (_jsx("ul", { className: "divide-y", children: travelers.map((traveler, index) => (_jsx(TravelerRecordRow, { traveler: traveler, index: index, messages: messages }, traveler.localId ?? traveler.personId ?? index))) })) : (_jsx("p", { className: "text-muted-foreground text-sm", children: messages.travelers.none })) })] }));
+}
+function TravelerRecordRow({ traveler, index, messages, }) {
+    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(messages.travelers.fallbackName, { index: String(index + 1) });
+    const email = traveler.email ?? personQuery.data?.email ?? null;
+    return (_jsxs("li", { className: "flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium", children: traveler.personId ? _jsx(PersonLink, { personId: traveler.personId, children: name }) : name }), email ? _jsx("p", { className: "truncate text-muted-foreground text-sm", children: email }) : null] }), _jsx(Badge, { variant: "secondary", className: "shrink-0 capitalize", children: traveler.role ?? messages.travelers.fallbackRole })] }));
+}
+function PersonLink({ personId, children }) {
+    const resolveHref = useAdminHref();
+    const navigateTo = useAdminNavigate();
+    return (_jsx("a", { href: resolveHref("person.detail", { personId }), onClick: (event) => {
+            event.preventDefault();
+            navigateTo("person.detail", { personId });
+        }, className: "text-primary hover:underline", children: children }));
+}
+function SummaryCard({ label, value, icon: Icon, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "flex items-center gap-3 p-4", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-muted-foreground text-xs", children: label }), _jsx("p", { className: "truncate font-semibold text-lg", children: value })] })] }) }));
+}
+function ComponentRow({ component, messages, onOpenBooking, }) {
+    const Icon = componentIcon(component);
+    const componentName = componentTitleFor(component);
+    const scheduleLabel = formatScheduleLabel(component);
+    const referenceLabel = componentReferenceLabelFor(component);
+    const secondary = [scheduleLabel, referenceLabel === componentName ? null : referenceLabel]
+        .filter(Boolean)
+        .join(" · ");
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "flex size-9 shrink-0 items-center justify-center rounded-md bg-muted", children: _jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "truncate font-medium", children: componentName }), secondary ? (_jsx("p", { className: "truncate text-muted-foreground text-xs", children: secondary })) : null] })] }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: component.status === "failed" ? "destructive" : "secondary", children: formatStatus(component.status) }) }), _jsx(TableCell, { children: formatMoney(component.componentTaxAmountCents, component.componentCurrency) }), _jsx(TableCell, { children: formatMoney(component.componentTotalAmountCents, component.componentCurrency) }), _jsx(TableCell, { className: "text-right", children: component.bookingId ? (_jsxs(Button, { variant: "ghost", size: "sm", onClick: () => onOpenBooking(component.bookingId ?? ""), children: [_jsx(ExternalLink, { className: "size-4", "aria-hidden": "true" }), messages.components.booking] })) : component.orderId || component.paymentSessionId ? (_jsx("span", { className: "text-muted-foreground text-sm", children: component.orderId ?? component.paymentSessionId })) : (_jsx("span", { className: "text-muted-foreground text-sm", children: messages.components.notCommitted })) })] }));
+}
+function tripScheduleLabel(components) {
+    const labels = components
+        .map(formatScheduleLabel)
+        .filter((label) => Boolean(label));
+    if (labels.length === 0)
+        return null;
+    if (labels.length === 1)
+        return labels[0];
+    return `${labels[0]} -> ${labels.at(-1)}`;
+}
+function SummaryLine({ label, value, strong = false, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between gap-4 text-sm", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: strong ? "font-semibold" : "font-medium", children: value })] }));
+}
+function componentIcon(component) {
+    if (component.kind === "flight_placeholder" || component.kind === "flight_order")
+        return Plane;
+    if (component.entityModule === "accommodations")
+        return BedDouble;
+    if (component.entityModule === "cruises")
+        return Ship;
+    return RouteIcon;
+}
+function formatStatus(value) {
+    return value.replaceAll("_", " ");
+}
+function formatDate(value) {
+    if (!value)
+        return "-";
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return "-";
+    return date.toLocaleDateString();
+}
+function formatMoney(amountCents, currency) {
+    if (amountCents == null)
+        return "-";
+    return (amountCents / 100).toLocaleString(undefined, {
+        style: "currency",
+        currency: currency ?? "EUR",
+    });
+}
+function readBilling(travelerParty) {
+    const billing = travelerParty.billing;
+    if (!isRecord(billing))
+        return null;
+    const contact = isRecord(billing.contact) ? billing.contact : undefined;
+    return {
+        buyerType: stringValue(billing.buyerType),
+        personId: stringValue(billing.personId),
+        organizationId: stringValue(billing.organizationId),
+        contact: contact
+            ? {
+                firstName: stringValue(contact.firstName),
+                lastName: stringValue(contact.lastName),
+                email: stringValue(contact.email),
+                phone: stringValue(contact.phone),
+            }
+            : undefined,
+    };
+}
+function readTravelers(travelerParty) {
+    const travelers = travelerParty.travelers;
+    if (!Array.isArray(travelers))
+        return [];
+    return travelers.filter(isRecord).map((traveler) => ({
+        localId: stringValue(traveler.localId),
+        personId: stringValue(traveler.personId) ?? null,
+        firstName: stringValue(traveler.firstName),
+        lastName: stringValue(traveler.lastName),
+        email: stringValue(traveler.email),
+        role: stringValue(traveler.role),
+    }));
+}
+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 formatContactName(contact) {
+    if (!contact)
+        return null;
+    const name = [contact.firstName, contact.lastName]
+        .filter((part) => (part ?? "").trim().length > 0)
+        .join(" ")
+        .trim();
+    return name || null;
+}
+function isRecord(value) {
+    return Boolean(value && typeof value === "object" && !Array.isArray(value));
+}
+function stringValue(value) {
+    return typeof value === "string" && value.trim().length > 0 ? value : undefined;
+}