@voyant-travel/bookings-react 0.119.3

package/dist/components/booking-activity-timeline.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePublicBookingPayments } from "@voyant-travel/finance-react";
+import { Badge, Button } from "@voyant-travel/ui/components";
+import { Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, } from "@voyant-travel/ui/components/pagination";
+import { Activity, Clock, CreditCard, ExternalLink, FileText, Pencil, Plus, RefreshCw, UserPlus, } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
+import { useBookingActivity, useBookingTravelerDocuments } from "../index.js";
+const activityIcons = {
+    booking_created: Plus,
+    booking_reserved: Plus,
+    booking_converted: RefreshCw,
+    booking_confirmed: Clock,
+    hold_extended: Clock,
+    hold_expired: Clock,
+    status_change: Clock,
+    item_update: Pencil,
+    allocation_released: Clock,
+    fulfillment_issued: FileText,
+    fulfillment_updated: FileText,
+    redemption_recorded: FileText,
+    supplier_update: RefreshCw,
+    traveler_update: UserPlus,
+    note_added: Pencil,
+};
+const sourceVariant = {
+    activity: "outline",
+    document: "secondary",
+    payment: "default",
+    action: "secondary",
+};
+export function BookingActivityTimeline({ bookingId, additionalEvents, footer, pageSize = 10, }) {
+    const [filter, setFilter] = React.useState("all");
+    const [pageIndex, setPageIndex] = React.useState(0);
+    const { data: activityData } = useBookingActivity(bookingId);
+    const { data: documentsData } = useBookingTravelerDocuments(bookingId);
+    const { data: paymentsData } = usePublicBookingPayments(bookingId);
+    const { formatNumber } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const sourceLabel = {
+        activity: messages.bookingActivityTimeline.sourceLabels.activity,
+        document: messages.bookingActivityTimeline.sourceLabels.document,
+        payment: messages.bookingActivityTimeline.sourceLabels.payment,
+        action: messages.bookingActivityTimeline.sourceLabels.action,
+    };
+    const events = React.useMemo(() => {
+        const merged = [];
+        for (const entry of activityData?.data ?? []) {
+            merged.push({
+                id: `activity:${entry.id}`,
+                source: "activity",
+                title: messages.bookingActivityTimeline.activityTitles[entry.activityType] ?? entry.description,
+                description: entry.description,
+                // Prefer the hydrated display name; fall back to email then raw
+                // id (system actors stay null and skip the "By …" render).
+                actorId: entry.actorName || entry.actorEmail || entry.actorId,
+                timestamp: entry.createdAt,
+                icon: activityIcons[entry.activityType] ?? Activity,
+            });
+        }
+        for (const doc of documentsData?.data ?? []) {
+            merged.push({
+                id: `document:${doc.id}`,
+                source: "document",
+                title: `${doc.type.replace(/_/g, " ")} ${messages.bookingActivityTimeline.documentUploadedSuffix}`,
+                description: doc.fileName,
+                timestamp: doc.createdAt,
+                icon: FileText,
+                link: { href: doc.fileUrl, label: messages.bookingActivityTimeline.viewFile },
+            });
+        }
+        for (const payment of paymentsData?.data?.payments ?? []) {
+            const status = messages.bookingPaymentsSummary.paymentStatusLabels[payment.status] ?? payment.status;
+            const amount = `${formatNumber(payment.amountCents / 100, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+            })} ${payment.currency}`;
+            const method = messages.bookingPaymentsSummary.paymentMethodLabels[payment.paymentMethod] ?? payment.paymentMethod;
+            merged.push({
+                id: `payment:${payment.id}`,
+                source: "payment",
+                title: formatMessage(messages.bookingActivityTimeline.paymentTitle, { status, amount }),
+                description: formatMessage(messages.bookingActivityTimeline.paymentDescription, {
+                    invoice: payment.invoiceNumber,
+                    method,
+                }),
+                timestamp: payment.paymentDate,
+                icon: CreditCard,
+            });
+        }
+        for (const extra of additionalEvents ?? []) {
+            merged.push(extra);
+        }
+        merged.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+        return merged;
+    }, [activityData, additionalEvents, documentsData, formatNumber, messages, paymentsData]);
+    const visible = filter === "all" ? events : events.filter((e) => e.source === filter);
+    const pageCount = Math.max(1, Math.ceil(visible.length / pageSize));
+    const safePageIndex = Math.min(pageIndex, pageCount - 1);
+    const pagedVisible = visible.slice(safePageIndex * pageSize, safePageIndex * pageSize + pageSize);
+    // Reset to page 1 whenever the filter changes. React's recommended
+    // pattern for derived state reset — cheaper and lint-clean compared
+    // to a useEffect.
+    const [lastFilter, setLastFilter] = React.useState(filter);
+    if (filter !== lastFilter) {
+        setLastFilter(filter);
+        setPageIndex(0);
+    }
+    const hasActionEvents = (additionalEvents?.length ?? 0) > 0;
+    const filterChips = hasActionEvents
+        ? ["all", "activity", "document", "payment", "action"]
+        : ["all", "activity", "document", "payment"];
+    return (_jsxs("div", { "data-slot": "booking-activity-timeline", className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("h2", { className: "flex items-center gap-2 text-base font-semibold", children: [_jsx(Activity, { className: "h-4 w-4 text-muted-foreground" }), messages.bookingActivityTimeline.title] }), _jsx("div", { className: "flex flex-wrap items-center gap-1", children: filterChips.map((chip) => (_jsx(Button, { variant: filter === chip ? "default" : "ghost", size: "sm", className: "h-7 capitalize", onClick: () => setFilter(chip), children: chip === "all" ? messages.bookingActivityTimeline.filters.all : sourceLabel[chip] }, chip))) })] }), visible.length === 0 ? (_jsx("div", { className: "rounded-md border bg-background p-6 text-center", children: _jsx("p", { className: "text-sm text-muted-foreground", children: messages.bookingActivityTimeline.empty }) })) : (_jsx("div", { className: "flex flex-col gap-2", children: pagedVisible.map((event) => (_jsx(TimelineEventItem, { event: event, sourceLabel: sourceLabel }, event.id))) })), pageCount > 1 ? (_jsx(TimelinePagination, { pageIndex: safePageIndex, pageCount: pageCount, onPageChange: setPageIndex })) : null, footer ? _jsx("div", { className: "mt-1 flex justify-center", children: footer }) : null] }));
+}
+function TimelinePagination({ pageIndex, pageCount, onPageChange, }) {
+    const canPrev = pageIndex > 0;
+    const canNext = pageIndex + 1 < pageCount;
+    // Compact, ellipsis-less list — the timeline rarely paginates past a
+    // handful of pages, and the cards are dense, so a chunky pager would
+    // overwhelm. If we hit > 7 pages in practice we can revisit and add
+    // PaginationEllipsis.
+    const pages = Array.from({ length: pageCount }, (_, idx) => idx);
+    return (_jsx(Pagination, { className: "mt-1", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(PaginationPrevious, { "aria-disabled": !canPrev, tabIndex: canPrev ? 0 : -1, className: canPrev ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canPrev)
+                                onPageChange(pageIndex - 1);
+                        }, href: "#" }) }), pages.map((idx) => (_jsx(PaginationItem, { children: _jsx(PaginationLink, { isActive: idx === pageIndex, onClick: (event) => {
+                            event.preventDefault();
+                            onPageChange(idx);
+                        }, href: "#", children: idx + 1 }) }, idx))), _jsx(PaginationItem, { children: _jsx(PaginationNext, { "aria-disabled": !canNext, tabIndex: canNext ? 0 : -1, className: canNext ? undefined : "pointer-events-none opacity-50", onClick: (event) => {
+                            event.preventDefault();
+                            if (canNext)
+                                onPageChange(pageIndex + 1);
+                        }, href: "#" }) })] }) }));
+}
+function TimelineEventItem({ event, sourceLabel, }) {
+    const Icon = event.icon;
+    const { formatDateTime } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs("div", { className: "flex items-start gap-3 rounded-md border p-3", children: [_jsx(Icon, { className: "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("p", { className: "text-sm font-medium capitalize", children: event.title }), _jsx(Badge, { variant: sourceVariant[event.source], className: "text-xs", children: sourceLabel[event.source] })] }), event.description && (_jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: event.description })), _jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: event.actorId && event.actorId !== "system"
+                            ? formatMessage(messages.bookingActivityTimeline.byActor, {
+                                actor: event.actorId,
+                                timestamp: formatDateTime(event.timestamp),
+                            })
+                            : formatDateTime(event.timestamp) }), event.link && (_jsxs("a", { href: event.link.href, target: "_blank", rel: "noopener noreferrer", className: "mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground hover:underline", children: [event.link.label, _jsx(ExternalLink, { className: "h-3 w-3" })] }))] })] }));
+}

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

@@ -0,0 +1,16 @@
+import { type BookingRecord } from "../index.js";
+export interface BookingBillingDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    booking: BookingRecord;
+    onSuccess?: () => void;
+}
+/**
+ * Edit the billing-contact snapshot on a booking. The snapshot is the
+ * source of truth for the detail-page billing card and for downstream
+ * invoice / document generation — when an operator's data correction
+ * needs to land on documents without modifying the CRM person record,
+ * this is the dialog they reach for.
+ */
+export declare function BookingBillingDialog({ open, onOpenChange, booking, onSuccess, }: BookingBillingDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-billing-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-billing-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-billing-dialog.tsx"],"names":[],"mappings":"AAyCA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,aAAa,CAAA;AA4BpE,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AA2BD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,GACV,EAAE,yBAAyB,2CA0e3B"}

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

@@ -0,0 +1,315 @@
+// 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 { useAddresses } from "@voyant-travel/identity-react";
+import { useOrganization, useOrganizations, usePeople, usePerson, } from "@voyant-travel/relationships-react";
+import { Button, ButtonGroup, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, } from "@voyant-travel/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import { CountryCombobox } from "@voyant-travel/ui/components/country-combobox";
+import { PhoneInput } from "@voyant-travel/ui/components/phone-input";
+import { zodResolver } from "@voyant-travel/ui/lib/zod-resolver";
+import { Building2, Loader2, Search, User } from "lucide-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingMutation } from "../index.js";
+const billingFormSchema = z.object({
+    contactPartyType: z.enum(["individual", "company"]),
+    contactFirstName: z.string().max(255).optional().nullable(),
+    contactLastName: z.string().max(255).optional().nullable(),
+    contactTaxId: z.string().max(100).optional().nullable(),
+    contactEmail: z.string().email().optional().nullable().or(z.literal("")),
+    contactPhone: z.string().max(50).optional().nullable(),
+    contactAddressLine1: z.string().max(500).optional().nullable(),
+    contactAddressLine2: z.string().max(500).optional().nullable(),
+    contactCity: z.string().max(100).optional().nullable(),
+    contactRegion: z.string().max(100).optional().nullable(),
+    contactPostalCode: z.string().max(20).optional().nullable(),
+    contactCountry: z.string().max(2).optional().nullable(),
+});
+function inferBillingPartyType(booking) {
+    if (booking.contactPartyType === "individual" || booking.contactPartyType === "company") {
+        return booking.contactPartyType;
+    }
+    return booking.organizationId && !booking.personId ? "company" : "individual";
+}
+function getBillingFormDefaults(booking) {
+    return {
+        contactPartyType: inferBillingPartyType(booking),
+        contactFirstName: booking.contactFirstName ?? "",
+        contactLastName: booking.contactLastName ?? "",
+        contactTaxId: booking.contactTaxId ?? "",
+        contactEmail: booking.contactEmail ?? "",
+        contactPhone: booking.contactPhone ?? "",
+        contactAddressLine1: booking.contactAddressLine1 ?? "",
+        contactAddressLine2: booking.contactAddressLine2 ?? "",
+        contactCity: booking.contactCity ?? "",
+        contactRegion: booking.contactRegion ?? "",
+        contactPostalCode: booking.contactPostalCode ?? "",
+        contactCountry: booking.contactCountry ?? "",
+    };
+}
+/**
+ * Edit the billing-contact snapshot on a booking. The snapshot is the
+ * source of truth for the detail-page billing card and for downstream
+ * invoice / document generation — when an operator's data correction
+ * needs to land on documents without modifying the CRM person record,
+ * this is the dialog they reach for.
+ */
+export function BookingBillingDialog({ open, onOpenChange, booking, onSuccess, }) {
+    const { update } = useBookingMutation();
+    const messages = useBookingsUiMessagesOrDefault().bookingBillingDialog;
+    const [crmPickerOpen, setCrmPickerOpen] = useState(false);
+    const [personSearch, setPersonSearch] = useState("");
+    const [organizationSearch, setOrganizationSearch] = useState("");
+    const [personInputValue, setPersonInputValue] = useState("");
+    const [organizationInputValue, setOrganizationInputValue] = useState("");
+    const [selectedPersonId, setSelectedPersonId] = useState(booking.personId ?? "");
+    const [selectedOrganizationId, setSelectedOrganizationId] = useState(booking.organizationId ?? null);
+    const cachedPeopleRef = useRef(new Map());
+    const cachedOrganizationsRef = useRef(new Map());
+    const pendingAddressPrefillRef = useRef(null);
+    const form = useForm({
+        resolver: zodResolver(billingFormSchema),
+        defaultValues: getBillingFormDefaults(booking),
+    });
+    const partyType = form.watch("contactPartyType");
+    const peopleQuery = usePeople({
+        search: personSearch || undefined,
+        limit: 20,
+        enabled: open && partyType === "individual",
+    });
+    const selectedPersonQuery = usePerson(selectedPersonId || undefined, {
+        enabled: open && partyType === "individual" && Boolean(selectedPersonId),
+    });
+    const organizationsQuery = useOrganizations({
+        search: organizationSearch || undefined,
+        limit: 20,
+        enabled: open && partyType === "company",
+    });
+    const selectedOrganizationQuery = useOrganization(selectedOrganizationId || undefined, {
+        enabled: open && partyType === "company" && Boolean(selectedOrganizationId),
+    });
+    const people = useMemo(() => {
+        const map = new Map(cachedPeopleRef.current);
+        for (const person of peopleQuery.data?.data ?? [])
+            map.set(person.id, person);
+        if (selectedPersonQuery.data)
+            map.set(selectedPersonQuery.data.id, selectedPersonQuery.data);
+        cachedPeopleRef.current = map;
+        return Array.from(map.values());
+    }, [peopleQuery.data?.data, selectedPersonQuery.data]);
+    const organizations = useMemo(() => {
+        const map = new Map(cachedOrganizationsRef.current);
+        for (const organization of organizationsQuery.data?.data ?? []) {
+            map.set(organization.id, organization);
+        }
+        if (selectedOrganizationQuery.data) {
+            map.set(selectedOrganizationQuery.data.id, selectedOrganizationQuery.data);
+        }
+        cachedOrganizationsRef.current = map;
+        return Array.from(map.values());
+    }, [organizationsQuery.data?.data, selectedOrganizationQuery.data]);
+    const peopleMap = useMemo(() => new Map(people.map((person) => [person.id, person])), [people]);
+    const organizationsMap = useMemo(() => new Map(organizations.map((organization) => [organization.id, organization])), [organizations]);
+    const selectedPersonLabel = selectedPersonId
+        ? formatPerson(peopleMap.get(selectedPersonId) ?? cachedPeopleRef.current.get(selectedPersonId))
+        : "";
+    const selectedOrganizationLabel = selectedOrganizationId
+        ? (organizationsMap.get(selectedOrganizationId)?.name ??
+            cachedOrganizationsRef.current.get(selectedOrganizationId)?.name ??
+            "")
+        : "";
+    const billingAddressKind = partyType === "individual" && selectedPersonId
+        ? "person"
+        : partyType === "company" && selectedOrganizationId
+            ? "organization"
+            : null;
+    const billingAddressEntityId = billingAddressKind === "person"
+        ? selectedPersonId
+        : billingAddressKind === "organization"
+            ? (selectedOrganizationId ?? undefined)
+            : undefined;
+    const billingAddressQuery = useAddresses({
+        entityType: billingAddressKind ?? undefined,
+        entityId: billingAddressEntityId,
+        isPrimary: true,
+        limit: 1,
+        enabled: open && Boolean(billingAddressKind && billingAddressEntityId),
+    });
+    const billingAddress = billingAddressQuery.data?.data?.[0] ?? null;
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see comment -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        // `form` is intentionally omitted — react-hook-form returns a fresh
+        // wrapper object each render even though the store is in a ref, so
+        // including it would re-fire on every render. Resetting from the
+        // latest booking snapshot when the dialog opens is sufficient.
+        if (open) {
+            form.reset(getBillingFormDefaults(booking));
+            setCrmPickerOpen(false);
+            setPersonSearch("");
+            setOrganizationSearch("");
+            setPersonInputValue("");
+            setOrganizationInputValue("");
+            setSelectedPersonId(booking.personId ?? "");
+            setSelectedOrganizationId(booking.organizationId ?? null);
+            pendingAddressPrefillRef.current = null;
+        }
+    }, [open, booking]);
+    useEffect(() => {
+        if (selectedPersonLabel)
+            setPersonInputValue(selectedPersonLabel);
+    }, [selectedPersonLabel]);
+    useEffect(() => {
+        if (selectedOrganizationLabel)
+            setOrganizationInputValue(selectedOrganizationLabel);
+    }, [selectedOrganizationLabel]);
+    const setAddressFields = (values, shouldDirty) => {
+        for (const [key, value] of Object.entries(values)) {
+            form.setValue(key, value ?? "", { shouldDirty, shouldValidate: true });
+        }
+    };
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `setAddressFields` only writes to the stable react-hook-form store. -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        if (!billingAddressQuery.data || !pendingAddressPrefillRef.current)
+            return;
+        const expectedTarget = billingAddressKind && billingAddressEntityId
+            ? `${billingAddressKind}:${billingAddressEntityId}`
+            : null;
+        if (pendingAddressPrefillRef.current !== expectedTarget)
+            return;
+        setAddressFields({
+            contactAddressLine1: billingAddress?.line1 ?? "",
+            contactAddressLine2: billingAddress?.line2 ?? "",
+            contactCity: billingAddress?.city ?? "",
+            contactRegion: billingAddress?.region ?? "",
+            contactPostalCode: billingAddress?.postalCode ?? "",
+            contactCountry: billingAddress?.country ?? "",
+        }, true);
+        pendingAddressPrefillRef.current = null;
+    }, [billingAddress, billingAddressEntityId, billingAddressKind, billingAddressQuery.data]);
+    const prepareAddressPrefill = (kind, id) => {
+        pendingAddressPrefillRef.current = `${kind}:${id}`;
+        setAddressFields({
+            contactAddressLine1: "",
+            contactAddressLine2: "",
+            contactCity: "",
+            contactRegion: "",
+            contactPostalCode: "",
+            contactCountry: "",
+        }, true);
+    };
+    const setPartyType = (next) => {
+        form.setValue("contactPartyType", next, { shouldDirty: true });
+        if (next === "individual") {
+            setSelectedOrganizationId(null);
+            setOrganizationInputValue("");
+        }
+        else {
+            setSelectedPersonId("");
+            setPersonInputValue("");
+        }
+    };
+    const applyPersonPrefill = (person) => {
+        form.setValue("contactPartyType", "individual", { shouldDirty: true });
+        form.setValue("contactFirstName", person.firstName, { shouldDirty: true });
+        form.setValue("contactLastName", person.lastName, { shouldDirty: true });
+        form.setValue("contactTaxId", "", { shouldDirty: true });
+        form.setValue("contactEmail", person.email ?? "", { shouldDirty: true, shouldValidate: true });
+        form.setValue("contactPhone", person.phone ?? "", { shouldDirty: true });
+        setSelectedPersonId(person.id);
+        setSelectedOrganizationId(null);
+        setPersonInputValue(formatPerson(person));
+        prepareAddressPrefill("person", person.id);
+    };
+    const applyOrganizationPrefill = (organization) => {
+        form.setValue("contactPartyType", "company", { shouldDirty: true });
+        form.setValue("contactFirstName", organization.name, { shouldDirty: true });
+        form.setValue("contactLastName", "", { shouldDirty: true });
+        form.setValue("contactTaxId", organization.taxId ?? "", { shouldDirty: true });
+        form.setValue("contactEmail", "", { shouldDirty: true, shouldValidate: true });
+        form.setValue("contactPhone", "", { shouldDirty: true });
+        setSelectedPersonId("");
+        setSelectedOrganizationId(organization.id);
+        setOrganizationInputValue(organization.name);
+        prepareAddressPrefill("organization", organization.id);
+    };
+    const onSubmit = async (values) => {
+        const isCompany = values.contactPartyType === "company";
+        await update.mutateAsync({
+            id: booking.id,
+            input: {
+                personId: isCompany ? null : selectedPersonId || booking.personId || null,
+                organizationId: isCompany ? selectedOrganizationId || booking.organizationId || null : null,
+                contactPartyType: values.contactPartyType,
+                contactFirstName: values.contactFirstName?.trim() || null,
+                contactLastName: isCompany ? null : values.contactLastName?.trim() || null,
+                contactTaxId: isCompany ? values.contactTaxId?.trim() || null : null,
+                contactEmail: values.contactEmail?.trim() || null,
+                contactPhone: values.contactPhone?.trim() || null,
+                contactAddressLine1: values.contactAddressLine1?.trim() || null,
+                contactAddressLine2: values.contactAddressLine2?.trim() || null,
+                contactCity: values.contactCity?.trim() || null,
+                contactRegion: values.contactRegion?.trim() || null,
+                contactPostalCode: values.contactPostalCode?.trim() || null,
+                contactCountry: values.contactCountry?.trim() || null,
+            },
+        });
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.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: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.partyType }), _jsxs(ButtonGroup, { children: [_jsxs(Button, { type: "button", variant: partyType === "individual" ? "secondary" : "outline", size: "sm", "aria-pressed": partyType === "individual", onClick: () => setPartyType("individual"), children: [_jsx(User, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), messages.partyTypeLabels.individual] }), _jsxs(Button, { type: "button", variant: partyType === "company" ? "secondary" : "outline", size: "sm", "aria-pressed": partyType === "company", onClick: () => setPartyType("company"), children: [_jsx(Building2, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), messages.partyTypeLabels.company] })] })] }), _jsxs("div", { className: "rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { children: messages.crmPicker.label }), _jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setCrmPickerOpen((current) => !current), children: [_jsx(Search, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), crmPickerOpen ? messages.actions.hideCrmPicker : messages.actions.selectFromCrm] })] }), crmPickerOpen ? (_jsx("div", { className: "mt-3", children: partyType === "company" ? (_jsxs(Combobox, { items: organizations.map((organization) => organization.id), value: selectedOrganizationId, inputValue: organizationInputValue, autoHighlight: true, itemToStringLabel: (id) => organizationsMap.get(id)?.name ??
+                                                    cachedOrganizationsRef.current.get(id)?.name ??
+                                                    id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
+                                                    setOrganizationInputValue(next);
+                                                    setOrganizationSearch(next);
+                                                    if (!next)
+                                                        setSelectedOrganizationId(null);
+                                                }, onValueChange: (next) => {
+                                                    const id = next ?? null;
+                                                    const organization = id
+                                                        ? (organizationsMap.get(id) ?? cachedOrganizationsRef.current.get(id))
+                                                        : undefined;
+                                                    if (organization)
+                                                        applyOrganizationPrefill(organization);
+                                                }, children: [_jsx(ComboboxInput, { placeholder: messages.crmPicker.organizationSearchPlaceholder, showClear: Boolean(selectedOrganizationId) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: messages.crmPicker.organizationEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                                        const organization = organizationsMap.get(id);
+                                                                        if (!organization)
+                                                                            return null;
+                                                                        return (_jsx(ComboboxItem, { value: organization.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: organization.name }), organization.taxId ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: organization.taxId })) : null] }) }, organization.id));
+                                                                    } }) })] })] })) : (_jsxs(Combobox, { items: people.map((person) => person.id), value: selectedPersonId || null, inputValue: personInputValue, autoHighlight: true, itemToStringLabel: (id) => formatPerson(peopleMap.get(id) ?? cachedPeopleRef.current.get(id)) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
+                                                    setPersonInputValue(next);
+                                                    setPersonSearch(next);
+                                                    if (!next)
+                                                        setSelectedPersonId("");
+                                                }, onValueChange: (next) => {
+                                                    const id = next ?? "";
+                                                    const person = id
+                                                        ? (peopleMap.get(id) ?? cachedPeopleRef.current.get(id))
+                                                        : undefined;
+                                                    if (person)
+                                                        applyPersonPrefill(person);
+                                                }, children: [_jsx(ComboboxInput, { placeholder: messages.crmPicker.personSearchPlaceholder, showClear: Boolean(selectedPersonId) }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: messages.crmPicker.personEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                                        const person = peopleMap.get(id);
+                                                                        if (!person)
+                                                                            return null;
+                                                                        return (_jsx(ComboboxItem, { value: person.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: formatPersonName(person) }), person.email ? (_jsx("span", { className: "truncate text-xs text-muted-foreground", children: person.email })) : null] }) }, person.id));
+                                                                    } }) })] })] })) })) : null] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: partyType === "company"
+                                                        ? messages.fields.companyName
+                                                        : messages.fields.firstName }), _jsx(Input, { ...form.register("contactFirstName") })] }), partyType === "company" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.taxId }), _jsx(Input, { ...form.register("contactTaxId") })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.lastName }), _jsx(Input, { ...form.register("contactLastName") })] }))] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.email }), _jsx(Input, { type: "email", ...form.register("contactEmail") }), form.formState.errors.contactEmail ? (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.contactEmail.message })) : null] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.phone }), _jsx(PhoneInput, { value: form.watch("contactPhone") ?? "", onChange: (next) => form.setValue("contactPhone", next, { shouldDirty: true }) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.addressLine1 }), _jsx(Input, { ...form.register("contactAddressLine1") })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.addressLine2 }), _jsx(Input, { ...form.register("contactAddressLine2") })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.city }), _jsx(Input, { ...form.register("contactCity") })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.region }), _jsx(Input, { ...form.register("contactRegion") })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.postalCode }), _jsx(Input, { ...form.register("contactPostalCode") })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.fields.country }), _jsx(CountryCombobox, { value: form.watch("contactCountry") || null, onChange: (next) => form.setValue("contactCountry", next ?? "", {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            }) })] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), children: messages.actions.cancel }), _jsxs(Button, { type: "submit", size: "sm", disabled: update.isPending, children: [update.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, messages.actions.save] })] })] })] }) }));
+}
+function formatPersonName(person) {
+    if (!person)
+        return "";
+    return [person.firstName, person.lastName].filter(Boolean).join(" ").trim();
+}
+function formatPerson(person) {
+    if (!person)
+        return "";
+    const name = formatPersonName(person);
+    return person.email ? `${name} · ${person.email}` : name;
+}

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

@@ -0,0 +1,18 @@
+import { type BookingRecord } from "../index.js";
+export interface BookingCancellationDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    booking: BookingRecord;
+    /**
+     * Product ID used to resolve the applicable cancellation policy.
+     *
+     * Leave unset (or pass `undefined`) to auto-resolve from the booking's items
+     * — this is what you want for single-product bookings. Pass an explicit
+     * string or `null` to override (e.g. for multi-product bookings or to force
+     * the default non-product-scoped policy).
+     */
+    productId?: string | null;
+    onSuccess?: () => void;
+}
+export declare function BookingCancellationDialog({ open, onOpenChange, booking, productId, onSuccess, }: BookingCancellationDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-cancellation-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-cancellation-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-cancellation-dialog.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAAE,KAAK,aAAa,EAAsD,MAAM,aAAa,CAAA;AAcpG,MAAM,WAAW,8BAA8B;IAC7C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,EAAE,aAAa,CAAA;IACtB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,yBAAyB,CAAC,EACxC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE,8BAA8B,2CAiPhC"}

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

@@ -0,0 +1,79 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEvaluateCancellation, useResolvePolicy } from "@voyant-travel/legal-react";
+import { Badge, Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Textarea, } from "@voyant-travel/ui/components";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault, } from "../i18n/provider.js";
+import { useBookingCancelMutation, useBookingPrimaryProduct } from "../index.js";
+function daysBetween(from, to) {
+    const diffMs = to.getTime() - from.getTime();
+    return Math.max(0, Math.floor(diffMs / (1000 * 60 * 60 * 24)));
+}
+const refundTypeVariant = {
+    cash: "default",
+    credit: "secondary",
+    cash_or_credit: "secondary",
+    none: "destructive",
+};
+export function BookingCancellationDialog({ open, onOpenChange, booking, productId, onSuccess, }) {
+    const [reason, setReason] = React.useState("");
+    const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const daysBeforeDeparture = React.useMemo(() => {
+        if (!booking.startDate)
+            return 0;
+        return daysBetween(new Date(), new Date(booking.startDate));
+    }, [booking.startDate]);
+    // When the caller didn't specify a productId, derive one from the booking's
+    // items so the consumer doesn't have to wire up `useBookingItems` just for
+    // this. Explicit `null` is respected as an override.
+    const shouldAutoResolveProduct = productId === undefined;
+    const autoResolved = useBookingPrimaryProduct(booking.id, {
+        enabled: open && shouldAutoResolveProduct,
+    });
+    const effectiveProductId = shouldAutoResolveProduct ? autoResolved.productId : productId;
+    const { data: resolved, isLoading: resolveLoading } = useResolvePolicy({ kind: "cancellation", productId: effectiveProductId ?? undefined }, { enabled: open });
+    const policy = resolved?.data;
+    const evalInput = React.useMemo(() => {
+        if (booking.sellAmountCents == null)
+            return null;
+        return {
+            daysBeforeDeparture,
+            totalCents: booking.sellAmountCents,
+            currency: booking.sellCurrency,
+        };
+    }, [daysBeforeDeparture, booking.sellAmountCents, booking.sellCurrency]);
+    const { data: evaluationData, isFetching: evaluationLoading } = useEvaluateCancellation(policy?.policy.id ?? null, evalInput, { enabled: open && Boolean(policy) });
+    const evaluation = evaluationData?.data ?? null;
+    const cancelMutation = useBookingCancelMutation(booking.id);
+    React.useEffect(() => {
+        if (!open) {
+            setReason("");
+        }
+    }, [open]);
+    const handleConfirm = async () => {
+        if (!reason.trim())
+            return;
+        await cancelMutation.mutateAsync({ note: reason.trim() });
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    const total = booking.sellAmountCents;
+    const refund = evaluation?.refundCents ?? 0;
+    const penalty = total != null ? Math.max(0, total - refund) : 0;
+    const formatAmount = React.useCallback((cents, currency) => formatCurrency(cents / 100, currency), [formatCurrency]);
+    const formatPercent = React.useCallback((basisPoints) => `${formatNumber(basisPoints / 100, {
+        maximumFractionDigits: 0,
+    })}%`, [formatNumber]);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsxs(DialogTitle, { className: "flex items-center gap-2", children: [_jsx(AlertTriangle, { className: "h-4 w-4 text-destructive" }), messages.bookingCancellationDialog.title] }) }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4 rounded-md border bg-muted/30 p-3 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.summary.booking }), _jsx("div", { className: "font-mono text-xs", children: booking.bookingNumber })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.summary.startDate }), _jsx("div", { children: booking.startDate ?? messages.bookingCancellationDialog.values.startDateTbd })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.summary.total }), _jsx("div", { className: "font-mono", children: total != null
+                                                ? formatAmount(total, booking.sellCurrency)
+                                                : messages.bookingCancellationDialog.values.amountUnavailable })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.summary.daysBeforeDeparture }), _jsx("div", { children: daysBeforeDeparture })] })] }), resolveLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), messages.bookingCancellationDialog.policy.resolving] })) : !policy ? (_jsxs("div", { className: "rounded-md border border-dashed p-3 text-sm text-muted-foreground", children: [messages.bookingCancellationDialog.policy.missing, " ", messages.bookingCancellationDialog.policy.missingHint] })) : (_jsxs("div", { className: "space-y-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.policy.applicablePolicy }), _jsx("div", { className: "text-sm font-medium", children: policy.policy.name })] }), evaluation && (_jsx(Badge, { variant: refundTypeVariant[evaluation.refundType] ?? "secondary", children: messages.bookingCancellationDialog.refundTypeLabels[evaluation.refundType] ?? evaluation.refundType }))] }), evaluationLoading ? (_jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), messages.bookingCancellationDialog.policy.calculating] })) : evaluation && total != null ? (_jsxs("div", { className: "grid grid-cols-3 gap-3 border-t pt-3 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.policy.refund }), _jsx("div", { className: "font-mono font-medium", children: formatAmount(evaluation.refundCents, booking.sellCurrency) }), _jsxs("div", { className: "text-xs text-muted-foreground", children: ["(", formatPercent(evaluation.refundPercent), ")"] })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.policy.penalty }), _jsx("div", { className: "font-mono font-medium text-destructive", children: formatAmount(penalty, booking.sellCurrency) })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingCancellationDialog.policy.rule }), _jsx("div", { className: "text-xs", children: evaluation.appliedRule?.label ??
+                                                        (evaluation.appliedRule?.daysBeforeDeparture != null
+                                                            ? formatMessage(messages.bookingCancellationDialog.values.ruleDaysBeforeDeparture, {
+                                                                days: evaluation.appliedRule.daysBeforeDeparture,
+                                                            })
+                                                            : messages.bookingCancellationDialog.values.ruleFallback) })] })] })) : total == null ? (_jsx("p", { className: "border-t pt-3 text-sm text-muted-foreground", children: messages.bookingCancellationDialog.policy.noTotalAmount })) : null] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { children: [messages.bookingCancellationDialog.fields.reason, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Textarea, { value: reason, onChange: (e) => setReason(e.target.value), placeholder: messages.bookingCancellationDialog.placeholders.reason, required: true })] }), cancelMutation.error && (_jsx("p", { className: "text-xs text-destructive", children: cancelMutation.error instanceof Error
+                                ? cancelMutation.error.message
+                                : messages.bookingCancellationDialog.validation.cancellationFailed }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), disabled: cancelMutation.isPending, children: messages.bookingCancellationDialog.actions.close }), _jsxs(Button, { type: "button", variant: "destructive", size: "sm", onClick: handleConfirm, disabled: !reason.trim() || cancelMutation.isPending, children: [cancelMutation.isPending && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), messages.bookingCancellationDialog.actions.confirm] })] })] }) }));
+}

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

@@ -0,0 +1,13 @@
+export interface BookingComboboxProps {
+    value: string | null | undefined;
+    onChange: (value: string | null) => void;
+    placeholder?: string;
+    emptyText?: string;
+    disabled?: boolean;
+    className?: string;
+    triggerClassName?: string;
+    clearable?: boolean;
+    limit?: number;
+}
+export declare function BookingCombobox({ value, onChange, placeholder, emptyText, disabled, className, triggerClassName, clearable, limit, }: BookingComboboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-combobox.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-combobox.d.ts","sourceRoot":"","sources":["../../src/components/booking-combobox.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACxC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAkCD,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,gBAAgB,EAChB,SAAgB,EAChB,KAAqB,GACtB,EAAE,oBAAoB,2CAiCtB"}