@voyant-travel/bookings-react 0.119.3

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

@@ -0,0 +1,264 @@
+// agent-quality: file-size exception -- owner: bookings-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOrganization, usePerson } from "@voyant-travel/relationships-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Badge, Button, Card, CardContent, cn, } from "@voyant-travel/ui/components";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@voyant-travel/ui/components/collapsible";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@voyant-travel/ui/components/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@voyant-travel/ui/components/tooltip";
+import { Ban, ChevronDown, ChevronRight, CreditCard, Info, Mail, MapPin, Pencil, Phone, Plus, RefreshCw, Trash2, } from "lucide-react";
+import { Fragment, useState } from "react";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/index.js";
+import { useBooking, useBookingItems, useBookingMutation } from "../index.js";
+import { BookingActivityTimeline } from "./booking-activity-timeline.js";
+import { BookingBillingDialog } from "./booking-billing-dialog.js";
+import { BookingCancellationDialog } from "./booking-cancellation-dialog.js";
+import { BookingDialog } from "./booking-dialog.js";
+import { BookingGroupSection } from "./booking-group-section.js";
+import { BookingGuaranteeList } from "./booking-guarantee-list.js";
+import { BookingItemList } from "./booking-item-list.js";
+import { BookingNotes } from "./booking-notes.js";
+import { BookingPaymentScheduleList } from "./booking-payment-schedule-list.js";
+import { BookingPaymentsSummary, } from "./booking-payments-summary.js";
+import { StatusBadge } from "./status-badge.js";
+import { StatusChangeDialog } from "./status-change-dialog.js";
+import { SupplierStatusList } from "./supplier-status-list.js";
+import { TravelerList } from "./traveler-list.js";
+export function BookingDetailPage({ id, className, locale, hideBreadcrumb, onBack, onRecordPayment, recordPaymentDisabledReason, addScheduleDisabledReason, paidAmountCents, onItemResourceOpen, onPersonOpen, onOrganizationOpen, onInvoiceOpen, onViewPayment, onEditPayment, onDeletePayment, activeTab, onTabChange, slots, }) {
+    const i18n = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const detailMessages = messages.bookingDetailPage;
+    const resolvedLocale = locale ?? i18n.locale;
+    const [editOpen, setEditOpen] = useState(false);
+    const [statusDialogOpen, setStatusDialogOpen] = useState(false);
+    const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const { data: bookingData, isPending } = useBooking(id);
+    const { remove } = useBookingMutation();
+    const headerPersonId = bookingData?.data?.personId ?? null;
+    const headerOrganizationId = bookingData?.data?.organizationId ?? null;
+    const headerPerson = usePerson(headerPersonId ?? undefined, {
+        enabled: Boolean(headerPersonId),
+    }).data;
+    const headerOrganization = useOrganization(headerOrganizationId ?? undefined, {
+        enabled: Boolean(headerOrganizationId) && !headerPersonId,
+    }).data;
+    // Pull booking items so the subtitle can link to the primary product
+    // + availability slot. We pick the first item (or the one flagged
+    // `isPrimary` when present) — most bookings only have one product.
+    const headerItems = useBookingItems(id).data?.data ?? [];
+    const primaryItem = headerItems.find((item) => item.isPrimary) ??
+        headerItems[0] ??
+        null;
+    if (isPending) {
+        return (_jsx("div", { className: cn("flex items-center justify-center py-12", className), children: _jsx("p", { className: "text-sm text-muted-foreground", children: messages.common.loading }) }));
+    }
+    const booking = bookingData?.data;
+    if (!booking) {
+        return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 py-12", className), children: [_jsx("p", { className: "text-muted-foreground", children: detailMessages.notFound }), onBack ? (_jsx(Button, { variant: "outline", onClick: onBack, children: detailMessages.backToBookings })) : null] }));
+    }
+    const canCancel = ["draft", "on_hold", "confirmed", "in_progress"].includes(booking.status);
+    const sellHint = booking.priceOverride?.isManual
+        ? `${detailMessages.summaryPriceOverride}: ${booking.priceOverride.reason}`
+        : undefined;
+    const billingPersonName = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ") ||
+        (headerPerson
+            ? [headerPerson.firstName, headerPerson.lastName].filter(Boolean).join(" ")
+            : "") ||
+        headerOrganization?.name ||
+        "";
+    const billingHref = headerPersonId
+        ? () => onPersonOpen?.(headerPersonId)
+        : headerOrganizationId
+            ? () => onOrganizationOpen?.(headerOrganizationId)
+            : null;
+    const billingClickable = billingHref && (headerPersonId ? Boolean(onPersonOpen) : Boolean(onOrganizationOpen));
+    const headerDateRange = booking.startDate
+        ? `${formatDate(booking.startDate, resolvedLocale, detailMessages.noValue)} - ${formatDate(booking.endDate, resolvedLocale, detailMessages.noValue)}`
+        : null;
+    const headerPax = booking.pax != null ? `${booking.pax} PAX` : null;
+    const headerProductTitle = primaryItem?.productNameSnapshot ?? primaryItem?.title ?? null;
+    const headerProductId = primaryItem?.productId ?? null;
+    const headerSlotId = primaryItem?.availabilitySlotId ?? null;
+    const headerSubtitleParts = [
+        billingPersonName ? (billingClickable ? (_jsx("button", { type: "button", onClick: billingHref, className: "hover:text-foreground hover:underline", children: billingPersonName }, "billing")) : (_jsx("span", { children: billingPersonName }, "billing"))) : null,
+        headerProductTitle ? (headerProductId && onItemResourceOpen ? (_jsx("button", { type: "button", onClick: () => onItemResourceOpen("product", headerProductId), className: "inline-block max-w-[18rem] truncate align-bottom hover:text-foreground hover:underline", title: headerProductTitle, children: headerProductTitle }, "product")) : (_jsx("span", { className: "inline-block max-w-[18rem] truncate align-bottom", title: headerProductTitle, children: headerProductTitle }, "product"))) : null,
+        headerDateRange ? (headerSlotId && onItemResourceOpen ? (_jsx("button", { type: "button", onClick: () => onItemResourceOpen("availabilitySlot", headerSlotId), className: "hover:text-foreground hover:underline", children: headerDateRange }, "dates")) : (_jsx("span", { children: headerDateRange }, "dates"))) : null,
+        headerPax ? _jsx("span", { children: headerPax }, "pax") : null,
+    ].filter(Boolean);
+    return (_jsxs("div", { "data-slot": "booking-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [hideBreadcrumb ? null : (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-muted-foreground", children: [onBack ? (_jsx("button", { type: "button", onClick: onBack, className: "transition-colors hover:text-foreground", children: detailMessages.breadcrumbBookings })) : (_jsx("span", { children: detailMessages.breadcrumbBookings })), _jsx(ChevronRight, { className: "h-3.5 w-3.5", "aria-hidden": "true" }), _jsx("span", { className: "font-normal text-foreground", children: booking.bookingNumber })] })), _jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: booking.bookingNumber }), _jsx(StatusBadge, { status: booking.status, children: getBookingStatusLabel(booking.status, messages.common.bookingStatusLabels) })] }), headerSubtitleParts.length > 0 ? (_jsx("div", { className: "flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground", children: headerSubtitleParts.map((part, idx) => (_jsxs(Fragment, { children: [idx > 0 ? _jsx("span", { className: "text-muted-foreground/60", children: "/" }) : null, part] }, idx))) })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.editAction] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setStatusDialogOpen(true), children: [_jsx(RefreshCw, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.changeStatusAction] }), canCancel ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCancelDialogOpen(true), children: [_jsx(Ban, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.cancelBookingAction] })) : null, _jsxs(Button, { variant: "outline", size: "sm", className: "text-destructive hover:bg-destructive/10 hover:text-destructive", disabled: remove.isPending, onClick: () => setDeleteDialogOpen(true), children: [_jsx(Trash2, { className: "mr-1.5 h-3.5 w-3.5", "aria-hidden": "true" }), detailMessages.deleteAction] })] })] }), slots?.header?.(booking), _jsxs("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-4", children: [_jsx(StatCard, { label: detailMessages.summaryTotal, hint: sellHint, children: formatAmount(booking.sellAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue) }), _jsx(StatCard, { label: detailMessages.summaryPaid, badge: paidAmountCents != null && booking.sellAmountCents
+                            ? renderPercentBadge(Math.round((paidAmountCents / booking.sellAmountCents) * 100), paidBadgeClass)
+                            : null, children: paidAmountCents != null
+                            ? formatAmount(paidAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue)
+                            : detailMessages.noValue }), _jsx(StatCard, { label: detailMessages.summaryCostMargin, badge: booking.marginPercent != null
+                            ? renderPercentBadge(booking.marginPercent, marginBadgeClass)
+                            : null, children: formatAmount(booking.costAmountCents, booking.sellCurrency, resolvedLocale, detailMessages.noValue) }), _jsx(StatCard, { label: detailMessages.summaryCreated, children: formatDate(booking.createdAt, resolvedLocale, detailMessages.noValue) })] }), slots?.afterSummary?.(booking), _jsxs(Tabs, { defaultValue: "items", value: activeTab, onValueChange: (value) => onTabChange?.(String(value)), children: [_jsxs(TabsList, { className: "w-full justify-start", children: [_jsx(TabsTrigger, { value: "items", children: detailMessages.tabOverview }), _jsx(TabsTrigger, { value: "travelers", children: detailMessages.tabTravelers }), _jsx(TabsTrigger, { value: "finance", children: detailMessages.tabFinance }), slots?.invoicesTab ? (_jsx(TabsTrigger, { value: "invoices", children: slots.invoicesTab.label ?? detailMessages.tabInvoices })) : null, _jsx(TabsTrigger, { value: "documents", children: detailMessages.tabDocuments }), _jsx(TabsTrigger, { value: "suppliers", children: detailMessages.tabSuppliers }), _jsx(TabsTrigger, { value: "activity", children: detailMessages.tabActivity }), _jsx(TabsTrigger, { value: "metadata", children: detailMessages.tabMetadata })] }), _jsxs(TabsContent, { value: "items", className: "mt-4 flex flex-col gap-6", children: [slots?.overviewStart?.(booking), _jsx(BookingItemList, { bookingId: id, onResourceOpen: onItemResourceOpen }), _jsx(BookingGroupSection, { bookingId: id }), visibleInternalNotes(booking.internalNotes) ? (_jsx(Card, { children: _jsxs(CardContent, { className: "py-5", children: [_jsx("p", { className: "mb-1 text-xs font-medium text-muted-foreground", children: detailMessages.internalNotesLabel }), _jsx("p", { className: "whitespace-pre-wrap text-sm", children: visibleInternalNotes(booking.internalNotes) })] }) })) : null, slots?.overviewEnd?.(booking)] }), _jsxs(TabsContent, { value: "travelers", className: "mt-4 flex flex-col gap-6", children: [slots?.travelersStart?.(booking), _jsx(BookingBillingContextCard, { booking: booking, onPersonOpen: onPersonOpen, onOrganizationOpen: onOrganizationOpen }), _jsx(TravelerList, { bookingId: id, autoReveal: true })] }), _jsxs(TabsContent, { value: "finance", className: "mt-4 flex flex-col gap-6", children: [_jsx(BookingPaymentScheduleList, { bookingId: id, addScheduleDisabledReason: addScheduleDisabledReason ?? null }), slots?.paymentsContent ? (renderDetailSlot(slots.paymentsContent, booking)) : (_jsx(BookingPaymentsSummary, { bookingId: id, variant: "admin", onViewPayment: onViewPayment, onInvoiceOpen: onInvoiceOpen, onEditPayment: onEditPayment, onDeletePayment: onDeletePayment, headerAction: onRecordPayment ? (_jsx(RecordPaymentHeaderButton, { label: detailMessages.recordPaymentAction, disabledReason: recordPaymentDisabledReason ?? null, onClick: () => onRecordPayment(booking) })) : null })), slots?.financeStart?.(booking), _jsxs(Collapsible, { children: [_jsxs(CollapsibleTrigger, { className: "group flex w-full items-center justify-between rounded-md border bg-background px-4 py-3 text-sm font-semibold hover:bg-muted/30", children: [messages.bookingGuaranteeList.title, _jsx(ChevronDown, { className: "h-4 w-4 transition-transform group-data-panel-open:rotate-180" })] }), _jsx(CollapsibleContent, { className: "mt-3", children: _jsx(BookingGuaranteeList, { bookingId: id }) })] }), slots?.financeEnd?.(booking)] }), slots?.invoicesTab ? (_jsx(TabsContent, { value: "invoices", className: "mt-4 flex flex-col gap-6", children: renderDetailSlot(slots.invoicesTab.content, booking) })) : null, _jsx(TabsContent, { value: "documents", className: "mt-4 flex flex-col gap-4", children: slots?.documents ? (slots.documents(booking)) : (_jsx("p", { className: "rounded-md border border-dashed p-4 text-sm text-muted-foreground", children: detailMessages.documentsSlotEmpty })) }), _jsx(TabsContent, { value: "suppliers", className: "mt-4", children: _jsx(SupplierStatusList, { bookingId: id }) }), _jsxs(TabsContent, { value: "activity", className: "mt-4 flex flex-col gap-6", children: [_jsx(BookingNotes, { bookingId: id }), _jsx(BookingActivityTimeline, { bookingId: id, additionalEvents: slots?.activityExtraEvents, footer: slots?.activityTimelineFooter }), slots?.activityEnd?.(booking)] }), _jsx(TabsContent, { value: "metadata", className: "mt-4", children: _jsx(BookingMetadataList, { booking: booking, messages: detailMessages.metadataSection, statusLabel: getBookingStatusLabel(booking.status, messages.common.bookingStatusLabels), formatDateTime: i18n.formatDateTime, noValue: detailMessages.noValue }) })] }), _jsx(BookingDialog, { open: editOpen, onOpenChange: setEditOpen, booking: booking }), _jsx(StatusChangeDialog, { open: statusDialogOpen, onOpenChange: setStatusDialogOpen, bookingId: id, currentStatus: booking.status }), _jsx(BookingCancellationDialog, { open: cancelDialogOpen, onOpenChange: setCancelDialogOpen, booking: booking }), _jsx(AlertDialog, { open: deleteDialogOpen, onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteDialogOpen(false);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: detailMessages.deleteConfirm }), _jsx(AlertDialogDescription, { children: booking.bookingNumber
+                                        ? formatMessage(detailMessages.deleteConfirmDescription, {
+                                            number: booking.bookingNumber,
+                                        })
+                                        : detailMessages.deleteConfirmDescriptionFallback })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: detailMessages.deleteCancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: async () => {
+                                        await remove.mutateAsync(id);
+                                        setDeleteDialogOpen(false);
+                                        onBack?.();
+                                    }, children: detailMessages.deleteConfirmAction })] })] }) })] }));
+}
+function RecordPaymentHeaderButton({ label, disabledReason, onClick, }) {
+    if (disabledReason) {
+        return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("span", { tabIndex: 0, className: "inline-block" }), children: _jsxs(Button, { variant: "outline", size: "sm", disabled: true, className: "pointer-events-none", children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), label] }) }), _jsx(TooltipContent, { children: disabledReason })] }));
+    }
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClick, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), label] }));
+}
+function renderDetailSlot(content, booking) {
+    return typeof content === "function" ? content(booking) : content;
+}
+/**
+ * Billing/contact card for the Travelers tab. Snapshot fields on the
+ * booking row are the source of truth (they capture contact info at
+ * the time of booking). When they're empty — typically for bookings
+ * created via flows that don't snapshot — fall back to the linked CRM
+ * person / organization so the operator still sees who they're
+ * billing.
+ */
+export function BookingBillingContextCard({ booking, onPersonOpen, onOrganizationOpen, }) {
+    const messages = useBookingsUiMessagesOrDefault().bookingDetailPage;
+    const [editOpen, setEditOpen] = useState(false);
+    const person = usePerson(booking.personId ?? undefined, {
+        enabled: Boolean(booking.personId),
+    }).data;
+    const organization = useOrganization(booking.organizationId ?? undefined, {
+        enabled: Boolean(booking.organizationId) && !booking.personId,
+    }).data;
+    const payerName = [booking.contactFirstName, booking.contactLastName].filter(Boolean).join(" ") ||
+        (person ? [person.firstName, person.lastName].filter(Boolean).join(" ") : "") ||
+        organization?.name ||
+        "";
+    const email = booking.contactEmail ?? person?.email ?? null;
+    const phone = booking.contactPhone ?? person?.phone ?? null;
+    const taxId = booking.contactTaxId ?? organization?.taxId ?? null;
+    const address = [
+        booking.contactAddressLine1,
+        booking.contactAddressLine2,
+        booking.contactCity,
+        booking.contactRegion,
+        booking.contactPostalCode,
+        booking.contactCountry,
+    ]
+        .filter(Boolean)
+        .join(", ");
+    return (_jsxs("div", { "data-slot": "booking-billing-context", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(CreditCard, { className: "h-4 w-4", "aria-hidden": "true" }), messages.billingPayer] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => setEditOpen(true), children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5", "aria-hidden": "true" }), messages.editAction] })] }), _jsxs("div", { className: "flex flex-col gap-4 rounded-md border p-4", children: [_jsxs("div", { className: "grid gap-4 md:grid-cols-4", children: [_jsx(BillingField, { label: messages.billingPayer, value: payerName ? (booking.personId && onPersonOpen ? (_jsx("button", { type: "button", onClick: () => onPersonOpen(booking.personId), className: "text-left text-primary hover:underline", children: payerName })) : booking.organizationId && !booking.personId && onOrganizationOpen ? (_jsx("button", { type: "button", onClick: () => onOrganizationOpen(booking.organizationId), className: "text-left text-primary hover:underline", children: payerName })) : (payerName)) : (messages.noValue) }), _jsx(BillingField, { label: messages.billingTaxId, value: taxId ?? messages.noValue }), _jsx(BillingField, { label: messages.billingEmail, value: email ?? messages.noValue, icon: _jsx(Mail, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }), _jsx(BillingField, { label: messages.billingPhone, value: phone ?? messages.noValue, icon: _jsx(Phone, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })] }), _jsx(BillingField, { label: messages.billingAddress, value: address || messages.noValue, icon: _jsx(MapPin, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) })] }), _jsx(BookingBillingDialog, { open: editOpen, onOpenChange: setEditOpen, booking: booking })] }));
+}
+function StatCard({ label, children, hint, badge, }) {
+    return (_jsx(Card, { children: _jsxs(CardContent, { className: "flex flex-col gap-1", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("div", { className: "text-xl font-semibold tabular-nums leading-none", children: children }), badge] }), hint ? _jsx("div", { className: "text-xs text-muted-foreground", children: hint }) : null] }) }));
+}
+/**
+ * Definition-list metadata panel for the Metadata tab. Surfaces booking
+ * fields that don't fit any other tab but are still useful for support
+ * / debugging: raw id, booking number, status, communication language,
+ * created/updated timestamps. Label-left, value-right rows matching the
+ * supplier-status / documents / notes tab style.
+ */
+function BookingMetadataList({ booking, messages, statusLabel, formatDateTime, noValue, }) {
+    const rows = [
+        {
+            label: messages.bookingId,
+            value: _jsx("span", { className: "font-mono text-xs", children: booking.id }),
+        },
+        {
+            label: messages.bookingNumber,
+            value: _jsx("span", { className: "font-mono text-xs", children: booking.bookingNumber }),
+        },
+        {
+            label: messages.status,
+            value: _jsx(StatusBadge, { status: booking.status, children: statusLabel }),
+        },
+        {
+            label: messages.communicationLanguage,
+            value: booking.communicationLanguage ? (_jsx("span", { className: "uppercase", children: booking.communicationLanguage })) : (_jsx("span", { className: "text-muted-foreground", children: noValue })),
+        },
+        { label: messages.created, value: formatDateTime(booking.createdAt) },
+        { label: messages.updated, value: formatDateTime(booking.updatedAt) },
+    ];
+    return (_jsxs("div", { "data-slot": "booking-metadata", className: "flex flex-col gap-3", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(Info, { className: "h-4 w-4 text-muted-foreground" }), messages.title] }), _jsx("div", { className: "overflow-hidden rounded-md border bg-background", children: _jsx("dl", { className: "divide-y", children: rows.map((row) => (_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3 text-sm", children: [_jsx("dt", { className: "text-muted-foreground", children: row.label }), _jsx("dd", { className: "text-right", children: row.value })] }, row.label))) }) })] }));
+}
+/**
+ * Traffic-light badge for a percentage value. Color thresholds are
+ * passed in by the caller (Paid uses 0 → red, 0..100 → yellow, 100 →
+ * green; Margin uses <0 → red, 0..10 → yellow, >10 → green).
+ */
+function renderPercentBadge(percent, classFor) {
+    return (_jsxs(Badge, { variant: "outline", className: cn("border-transparent", classFor(percent)), children: [percent, "%"] }));
+}
+function paidBadgeClass(percent) {
+    if (percent <= 0)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    if (percent >= 100)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
+}
+function marginBadgeClass(percent) {
+    if (percent < 0)
+        return "bg-red-500/10 text-red-600 dark:text-red-400";
+    if (percent > 10)
+        return "bg-green-500/10 text-green-600 dark:text-green-400";
+    return "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400";
+}
+function BillingField({ label, value, icon, }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "mb-1 flex items-center gap-1.5 text-xs font-medium text-muted-foreground", children: [icon, label] }), _jsx("div", { className: "truncate text-sm font-medium", children: value })] }));
+}
+function getBookingStatusLabel(status, labels) {
+    return labels[status] ?? status;
+}
+function formatAmount(cents, currency, locale, empty) {
+    if (cents == null)
+        return empty;
+    const amount = cents / 100;
+    const amountText = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: 0,
+    }).format(amount);
+    // RON's "symbol" is just the ISO code itself, so a `<symbol> <amount> <code>`
+    // layout would print "RON 1.185 RON" — collapse it back to "1.185 RON".
+    if (currency.toUpperCase() === "RON") {
+        return `${amountText} ${currency}`;
+    }
+    // Extract the locale's native symbol so we can always render
+    // `<symbol> <amount> <code>` regardless of where Intl would otherwise
+    // place the symbol for this locale (e.g. Romanian puts it after).
+    const parts = new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency,
+        currencyDisplay: "narrowSymbol",
+        maximumFractionDigits: 0,
+    }).formatToParts(amount);
+    const symbol = parts.find((p) => p.type === "currency")?.value ?? currency;
+    return `${symbol} ${amountText} ${currency}`;
+}
+function formatDate(iso, locale, empty) {
+    if (!iso)
+        return empty;
+    return new Date(iso).toLocaleDateString(locale, {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+/**
+ * Strip internal markers (`__contract_acceptance__:`,
+ * `__payment_policy_source__:`) before rendering — those are
+ * server-side relays, not human-readable notes. Their canonical home
+ * is on the contract signature row / schedule history; surfacing them
+ * here just confuses operators with raw JSON.
+ */
+function visibleInternalNotes(notes) {
+    if (!notes)
+        return null;
+    const visible = notes
+        .split("\n")
+        .filter((line) => !/^__[a-z0-9_]+__:/i.test(line))
+        .join("\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+    return visible.length > 0 ? visible : null;
+}

package/dist/components/booking-dialog.d.ts

@@ -0,0 +1,28 @@
+import { type BookingRecord } from "../index.js";
+export interface BookingDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    booking?: BookingRecord;
+    onSuccess?: (booking: BookingRecord) => void;
+    /**
+     * Pre-seeds the product picker in create mode. Useful when opened from
+     * a product detail page. Ignored when editing an existing booking.
+     */
+    defaultProductId?: string;
+    /**
+     * Pre-seeds and locks the departure picker in create mode. Useful when opened from
+     * a slot allocation page. Ignored when editing an existing booking.
+     */
+    defaultSlotId?: string;
+}
+/**
+ * Single booking dialog that handles both create and edit:
+ * - Create (no `booking` prop): renders the rich product → option → person
+ *   picker flow via `BookingCreateSheet`, so the draft booking inherits
+ *   pricing, dates, and currency from the catalogue instead of being
+ *   hand-entered.
+ * - Edit (with `booking` prop): renders the flat form below that patches
+ *   the existing row's metadata (status, amounts, dates, notes).
+ */
+export declare function BookingDialog({ open, onOpenChange, booking, onSuccess, defaultProductId, defaultSlotId, }: BookingDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-dialog.d.ts.map

package/dist/components/booking-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-dialog.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,aAAa,CAAA;AA8BpE,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AAWD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,aAAa,GACd,EAAE,kBAAkB,2CAqBpB"}

package/dist/components/booking-dialog.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { CurrencyCombobox } from "@voyant-travel/ui/components/currency-combobox";
+import { CurrencyInput } from "@voyant-travel/ui/components/currency-input";
+import { DateRangePicker } from "@voyant-travel/ui/components/date-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingMutation } from "../index.js";
+import { BookingCreateSheet } from "./booking-create-sheet.js";
+function createBookingFormSchema(messages) {
+    return z.object({
+        bookingNumber: z.string().min(1, messages.bookingDialog.validation.bookingNumberRequired),
+        status: z.enum([
+            "draft",
+            "on_hold",
+            "awaiting_payment",
+            "confirmed",
+            "in_progress",
+            "completed",
+            "expired",
+            "cancelled",
+        ]),
+        sellCurrency: z.string().min(3).max(3, messages.bookingDialog.validation.sellCurrencyInvalid),
+        sellAmountCents: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+        costAmountCents: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+        startDate: z.string().optional().nullable(),
+        endDate: z.string().optional().nullable(),
+        pax: z.coerce.number().int().positive().optional().or(z.literal("")).nullable(),
+        internalNotes: z.string().optional().nullable(),
+    });
+}
+const BOOKING_STATUS_VALUES = [
+    "draft",
+    "confirmed",
+    "in_progress",
+    "completed",
+    "cancelled",
+];
+const DEFAULT_CURRENCY = "EUR"; // i18n-literal-ok ISO default currency
+/**
+ * Single booking dialog that handles both create and edit:
+ * - Create (no `booking` prop): renders the rich product → option → person
+ *   picker flow via `BookingCreateSheet`, so the draft booking inherits
+ *   pricing, dates, and currency from the catalogue instead of being
+ *   hand-entered.
+ * - Edit (with `booking` prop): renders the flat form below that patches
+ *   the existing row's metadata (status, amounts, dates, notes).
+ */
+export function BookingDialog({ open, onOpenChange, booking, onSuccess, defaultProductId, defaultSlotId, }) {
+    if (!booking) {
+        return (_jsx(BookingCreateSheet, { open: open, onOpenChange: onOpenChange, defaultProductId: defaultProductId, defaultSlotId: defaultSlotId, onCreated: onSuccess }));
+    }
+    return (_jsx(BookingEditDialog, { open: open, onOpenChange: onOpenChange, booking: booking, onSuccess: onSuccess }));
+}
+function BookingEditDialog({ open, onOpenChange, booking, onSuccess }) {
+    const { update } = useBookingMutation();
+    const messages = useBookingsUiMessagesOrDefault();
+    const bookingFormSchema = createBookingFormSchema(messages);
+    const form = useForm({
+        resolver: zodResolver(bookingFormSchema),
+        defaultValues: {
+            bookingNumber: "",
+            status: "draft",
+            sellCurrency: DEFAULT_CURRENCY,
+            sellAmountCents: "",
+            costAmountCents: "",
+            startDate: "",
+            endDate: "",
+            pax: "",
+            internalNotes: "",
+        },
+    });
+    useEffect(() => {
+        if (!open)
+            return;
+        form.reset({
+            bookingNumber: booking.bookingNumber,
+            status: booking.status === "on_hold" || booking.status === "expired" ? "draft" : booking.status,
+            sellCurrency: booking.sellCurrency,
+            sellAmountCents: booking.sellAmountCents ?? "",
+            costAmountCents: booking.costAmountCents ?? "",
+            startDate: booking.startDate ?? "",
+            endDate: booking.endDate ?? "",
+            pax: booking.pax ?? "",
+            internalNotes: booking.internalNotes ?? "",
+        });
+    }, [booking, form, open]);
+    const onSubmit = async (values) => {
+        const payload = {
+            bookingNumber: values.bookingNumber,
+            status: values.status,
+            sellCurrency: values.sellCurrency,
+            sellAmountCents: typeof values.sellAmountCents === "number" ? values.sellAmountCents : null,
+            costAmountCents: typeof values.costAmountCents === "number" ? values.costAmountCents : null,
+            startDate: values.startDate || null,
+            endDate: values.endDate || null,
+            pax: values.pax && typeof values.pax === "number" ? values.pax : null,
+            internalNotes: values.internalNotes || null,
+        };
+        const saved = await update.mutateAsync({ id: booking.id, input: payload });
+        onOpenChange(false);
+        onSuccess?.(saved);
+    };
+    const isSubmitting = update.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.bookingDialog.editTitle }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.bookingNumber }), _jsx(Input, { ...form.register("bookingNumber"), placeholder: messages.bookingDialog.placeholders.bookingNumber }), form.formState.errors.bookingNumber && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.bookingNumber.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.status }), _jsxs(Select, { value: form.watch("status"), onValueChange: (value) => form.setValue("status", value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: BOOKING_STATUS_VALUES.map((status) => (_jsx(SelectItem, { value: status, children: messages.common.bookingStatusLabels[status] }, status))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.sellCurrency }), _jsx(CurrencyCombobox, { value: form.watch("sellCurrency") || null, onChange: (next) => form.setValue("sellCurrency", next ?? DEFAULT_CURRENCY, {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.travelDates }), _jsx(DateRangePicker, { value: {
+                                                        from: form.watch("startDate") || null,
+                                                        to: form.watch("endDate") || null,
+                                                    }, onChange: (nextValue) => {
+                                                        form.setValue("startDate", nextValue?.from ?? "", { shouldDirty: true });
+                                                        form.setValue("endDate", nextValue?.to ?? "", { shouldDirty: true });
+                                                    }, placeholder: messages.bookingDialog.placeholders.travelDates, className: "w-full" })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.sellAmountCents }), _jsx(CurrencyInput, { value: typeof form.watch("sellAmountCents") === "number"
+                                                        ? form.watch("sellAmountCents")
+                                                        : null, onChange: (next) => form.setValue("sellAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("sellCurrency") })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.costAmountCents }), _jsx(CurrencyInput, { value: typeof form.watch("costAmountCents") === "number"
+                                                        ? form.watch("costAmountCents")
+                                                        : null, onChange: (next) => form.setValue("costAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("sellCurrency") })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.pax }), _jsx(Input, { ...form.register("pax"), type: "number", min: "1", placeholder: messages.bookingDialog.placeholders.pax })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDialog.fields.internalNotes }), _jsx(Textarea, { ...form.register("internalNotes"), placeholder: messages.bookingDialog.placeholders.internalNotes })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.common.saveChanges] })] })] })] }) }));
+}

package/dist/components/booking-document-dialog.d.ts

@@ -0,0 +1,8 @@
+export interface BookingDocumentDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    onSuccess?: () => void;
+}
+export declare function BookingDocumentDialog({ open, onOpenChange, bookingId, onSuccess, }: BookingDocumentDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-document-dialog.d.ts.map

package/dist/components/booking-document-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-document-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-document-dialog.tsx"],"names":[],"mappings":"AAkDA,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,GACV,EAAE,0BAA0B,2CAyK5B"}

package/dist/components/booking-document-dialog.js

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import { DatePicker } from "@voyant-travel/ui/components/date-picker";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingTravelerDocumentMutation, useTravelers } from "../index.js";
+import { FileDropzone } from "./file-dropzone.js";
+const documentTypes = ["visa", "insurance", "health", "passport_copy", "other"];
+const UNASSIGNED = "__unassigned__";
+function createDocumentFormSchema(messages) {
+    return z.object({
+        type: z.enum(documentTypes).default("other"),
+        fileName: z
+            .string()
+            .min(1, messages.bookingDocumentDialog.validation.fileNameRequired)
+            .max(500),
+        fileUrl: z.string().url(messages.bookingDocumentDialog.validation.fileUrlInvalid),
+        travelerId: z.string().optional().nullable(),
+        expiresAt: z.string().optional().nullable(),
+        notes: z.string().optional().nullable(),
+    });
+}
+export function BookingDocumentDialog({ open, onOpenChange, bookingId, onSuccess, }) {
+    const { create } = useBookingTravelerDocumentMutation(bookingId);
+    const { data: travelersData } = useTravelers(bookingId);
+    const travelers = travelersData?.data ?? [];
+    const messages = useBookingsUiMessagesOrDefault();
+    const documentFormSchema = createDocumentFormSchema(messages);
+    const typeItems = useMemo(() => documentTypes.map((t) => ({
+        value: t,
+        label: messages.bookingDocumentDialog.documentTypeLabels[t],
+    })), [messages.bookingDocumentDialog.documentTypeLabels]);
+    const travelerItems = useMemo(() => [
+        {
+            value: UNASSIGNED,
+            label: messages.bookingDocumentDialog.placeholders.travelerUnassigned,
+        },
+        ...travelers.map((t) => ({
+            value: t.id,
+            label: `${t.firstName} ${t.lastName}`,
+        })),
+    ], [travelers, messages.bookingDocumentDialog.placeholders.travelerUnassigned]);
+    const form = useForm({
+        resolver: zodResolver(documentFormSchema),
+        defaultValues: {
+            type: "other",
+            fileName: "",
+            fileUrl: "",
+            travelerId: UNASSIGNED,
+            expiresAt: "",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open) {
+            form.reset();
+        }
+    }, [form, open]);
+    const onSubmit = async (values) => {
+        await create.mutateAsync({
+            type: values.type,
+            fileName: values.fileName,
+            fileUrl: values.fileUrl,
+            travelerId: values.travelerId && values.travelerId !== UNASSIGNED ? values.travelerId : null,
+            expiresAt: values.expiresAt || null,
+            notes: values.notes || null,
+        });
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.bookingDocumentDialog.title }) }), _jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col overflow-hidden", children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("type"), onValueChange: (v) => form.setValue("type", (v ?? "other")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: documentTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingDocumentDialog.documentTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.traveler }), _jsxs(Select, { items: travelerItems, value: form.watch("travelerId") ?? UNASSIGNED, onValueChange: (v) => form.setValue("travelerId", v ?? UNASSIGNED), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: UNASSIGNED, children: messages.bookingDocumentDialog.placeholders.travelerUnassigned }), travelers.map((traveler) => (_jsxs(SelectItem, { value: traveler.id, children: [traveler.firstName, " ", traveler.lastName] }, traveler.id)))] })] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.file }), _jsx(FileDropzone, { accept: "application/pdf,image/*", maxSize: 10 * 1024 * 1024, onUploaded: (upload) => {
+                                                form.setValue("fileUrl", upload.url, { shouldValidate: true });
+                                                form.setValue("fileName", upload.name, { shouldValidate: true });
+                                            }, helperText: messages.bookingDocumentDialog.placeholders.helperText }), form.formState.errors.fileUrl && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.fileUrl.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.expiresAt }), _jsx(DatePicker, { value: form.watch("expiresAt") || null, onChange: (next) => form.setValue("expiresAt", next ?? "", {
+                                                shouldValidate: true,
+                                                shouldDirty: true,
+                                            }), placeholder: messages.bookingDocumentDialog.placeholders.expiresAt, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingDocumentDialog.fields.notes }), _jsx(Textarea, { ...form.register("notes"), placeholder: messages.bookingDocumentDialog.placeholders.notes })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: create.isPending, children: [create.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.bookingDocumentDialog.actions.addDocument] })] })] })] }) }));
+}

package/dist/components/booking-document-list.d.ts

@@ -0,0 +1,5 @@
+export interface BookingDocumentListProps {
+    bookingId: string;
+}
+export declare function BookingDocumentList({ bookingId }: BookingDocumentListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-document-list.d.ts.map

package/dist/components/booking-document-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-document-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-document-list.tsx"],"names":[],"mappings":"AA6BA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CAqH1E"}

package/dist/components/booking-document-list.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, } from "@voyant-travel/ui/components";
+import { ExternalLink, FileText, Plus, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingTravelerDocumentMutation, useBookingTravelerDocuments, useTravelers, } from "../index.js";
+import { BookingDocumentDialog } from "./booking-document-dialog.js";
+const typeVariant = {
+    visa: "default",
+    insurance: "secondary",
+    health: "secondary",
+    passport_copy: "outline",
+    other: "outline",
+};
+export function BookingDocumentList({ bookingId }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const { data } = useBookingTravelerDocuments(bookingId);
+    const { data: travelersData } = useTravelers(bookingId);
+    const { remove } = useBookingTravelerDocumentMutation(bookingId);
+    const { formatDate } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const documents = data?.data ?? [];
+    const travelers = travelersData?.data ?? [];
+    const travelerMap = new Map();
+    for (const traveler of travelers) {
+        travelerMap.set(traveler.id, traveler);
+    }
+    return (_jsxs(Card, { "data-slot": "booking-document-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "h-4 w-4" }), messages.bookingDocumentList.title] }), _jsxs(Button, { size: "sm", onClick: () => setDialogOpen(true), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.bookingDocumentList.addDocument] })] }), _jsx(CardContent, { children: documents.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingDocumentList.empty })) : (_jsx("div", { className: "rounded border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingDocumentList.columns.type }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingDocumentList.columns.file }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingDocumentList.columns.traveler }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingDocumentList.columns.expires }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.bookingDocumentList.columns.notes }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: documents.map((doc) => {
+                                    const traveler = doc.travelerId ? travelerMap.get(doc.travelerId) : undefined;
+                                    return (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "p-2", children: _jsx(Badge, { variant: typeVariant[doc.type] ?? "outline", children: messages.bookingDocumentDialog.documentTypeLabels[doc.type] }) }), _jsx("td", { className: "p-2", children: _jsxs("a", { href: doc.fileUrl, target: "_blank", rel: "noopener noreferrer", className: "inline-flex items-center gap-1 hover:underline", children: [doc.fileName, _jsx(ExternalLink, { className: "h-3 w-3 text-muted-foreground" })] }) }), _jsx("td", { className: "p-2", children: traveler
+                                                    ? `${traveler.firstName} ${traveler.lastName}`
+                                                    : doc.travelerId
+                                                        ? doc.travelerId
+                                                        : messages.bookingDocumentList.values.travelerUnavailable }), _jsx("td", { className: "p-2", children: doc.expiresAt
+                                                    ? formatDate(doc.expiresAt)
+                                                    : messages.bookingDocumentList.values.expiresUnavailable }), _jsx("td", { className: "max-w-[200px] truncate p-2 text-muted-foreground", children: doc.notes ?? messages.bookingDocumentList.values.notesUnavailable }), _jsx("td", { className: "p-2", children: _jsx("button", { type: "button", onClick: () => {
+                                                        if (confirm(messages.bookingDocumentList.actions.deleteConfirm)) {
+                                                            remove.mutate(doc.id);
+                                                        }
+                                                    }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) }) })] }, doc.id));
+                                }) })] }) })) }), _jsx(BookingDocumentDialog, { open: dialogOpen, onOpenChange: setDialogOpen, bookingId: bookingId })] }));
+}

package/dist/components/booking-group-link-dialog.d.ts

@@ -0,0 +1,10 @@
+export interface BookingGroupLinkDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    productId?: string | null;
+    optionUnitId?: string | null;
+    onLinked?: (groupId: string) => void;
+}
+export declare function BookingGroupLinkDialog({ open, onOpenChange, bookingId, productId, optionUnitId, onLinked, }: BookingGroupLinkDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-group-link-dialog.d.ts.map

package/dist/components/booking-group-link-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-group-link-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-group-link-dialog.tsx"],"names":[],"mappings":"AA2BA,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC;AAMD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,YAAY,EACZ,QAAQ,GACT,EAAE,2BAA2B,2CAqL7B"}