@voyant-travel/bookings-react 0.119.3

package/dist/components/booking-group-link-dialog.js

@@ -0,0 +1,79 @@
+"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, } from "@voyant-travel/ui/components";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingGroupMemberMutation, useBookingGroupMutation, useBookingGroups, } from "../index.js";
+const JOIN_PLACEHOLDER = "__none__";
+export function BookingGroupLinkDialog({ open, onOpenChange, bookingId, productId, optionUnitId, onLinked, }) {
+    const [mode, setMode] = React.useState("join");
+    const [selectedGroupId, setSelectedGroupId] = React.useState("");
+    const [newGroupLabel, setNewGroupLabel] = React.useState("");
+    const [error, setError] = React.useState(null);
+    const { formatDate } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    React.useEffect(() => {
+        if (!open) {
+            setMode("join");
+            setSelectedGroupId("");
+            setNewGroupLabel("");
+            setError(null);
+        }
+    }, [open]);
+    const { data } = useBookingGroups({
+        productId: productId ?? undefined,
+        optionUnitId: optionUnitId ?? undefined,
+        limit: 50,
+        enabled: open,
+    });
+    const groups = data?.data ?? [];
+    const { create: createGroup } = useBookingGroupMutation();
+    const { add: addMember } = useBookingGroupMemberMutation();
+    const handleSubmit = async () => {
+        setError(null);
+        try {
+            let targetGroupId = selectedGroupId;
+            let role = "shared";
+            if (mode === "create") {
+                const label = newGroupLabel.trim() ||
+                    `${messages.bookingGroupLinkDialog.labels.generatedLabelPrefix} - ${formatDate(new Date())}`;
+                const group = await createGroup.mutateAsync({
+                    kind: "shared_room",
+                    label,
+                    productId: productId ?? null,
+                    optionUnitId: optionUnitId ?? null,
+                    primaryBookingId: bookingId,
+                });
+                targetGroupId = group.id;
+                role = "primary";
+            }
+            if (!targetGroupId || targetGroupId === JOIN_PLACEHOLDER) {
+                setError(messages.bookingGroupLinkDialog.validation.selectGroup);
+                return;
+            }
+            await addMember.mutateAsync({
+                groupId: targetGroupId,
+                bookingId,
+                role,
+            });
+            onOpenChange(false);
+            onLinked?.(targetGroupId);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : messages.bookingGroupLinkDialog.validation.linkFailed;
+            setError(message);
+        }
+    };
+    const isSubmitting = createGroup.isPending || addMember.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: messages.bookingGroupLinkDialog.title }) }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: mode === "join" ? "default" : "ghost", onClick: () => setMode("join"), children: messages.bookingGroupLinkDialog.modes.join }), _jsx(Button, { type: "button", size: "sm", variant: mode === "create" ? "default" : "ghost", onClick: () => setMode("create"), children: messages.bookingGroupLinkDialog.modes.create })] }), mode === "join" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGroupLinkDialog.fields.existingGroups }), _jsxs(Select, { items: groups.length === 0
+                                        ? [
+                                            {
+                                                label: messages.bookingGroupLinkDialog.placeholders.noExistingGroups,
+                                                value: JOIN_PLACEHOLDER,
+                                            },
+                                        ]
+                                        : groups.map((g) => ({ label: g.label, value: g.id })), value: selectedGroupId || JOIN_PLACEHOLDER, onValueChange: (v) => setSelectedGroupId(v === JOIN_PLACEHOLDER ? "" : (v ?? "")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: messages.bookingGroupLinkDialog.placeholders.selectGroup }) }), _jsx(SelectContent, { children: groups.length === 0 ? (_jsx(SelectItem, { value: JOIN_PLACEHOLDER, disabled: true, children: messages.bookingGroupLinkDialog.placeholders.noExistingGroups })) : (groups.map((g) => (_jsx(SelectItem, { value: g.id, children: g.label }, g.id)))) })] }), productId && (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.bookingGroupLinkDialog.hints.productFiltered }))] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGroupLinkDialog.fields.groupLabel }), _jsx(Input, { value: newGroupLabel, onChange: (e) => setNewGroupLabel(e.target.value), placeholder: messages.bookingGroupLinkDialog.placeholders.groupLabel }), _jsx("p", { className: "text-xs text-muted-foreground", children: messages.bookingGroupLinkDialog.hints.primaryMember })] })), error && _jsx("p", { className: "text-xs text-destructive", children: error })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), disabled: isSubmitting, children: messages.common.cancel }), _jsxs(Button, { type: "button", size: "sm", onClick: handleSubmit, disabled: isSubmitting || (mode === "join" && !selectedGroupId), children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), mode === "create"
+                                    ? messages.bookingGroupLinkDialog.actions.createAndLink
+                                    : messages.bookingGroupLinkDialog.actions.linkToGroup] })] })] }) }));
+}

package/dist/components/booking-group-section.d.ts

@@ -0,0 +1,27 @@
+export interface BookingGroupSectionProps {
+    bookingId: string;
+    /**
+     * Product ID used to scope shared-room group context. Leave unset to
+     * auto-resolve from the booking's items; pass an explicit string or `null`
+     * to override.
+     */
+    productId?: string | null;
+    /**
+     * Option unit ID used to scope shared-room group context. Leave unset to
+     * auto-resolve from the booking's items; pass an explicit string or `null`
+     * to override.
+     */
+    optionUnitId?: string | null;
+    /**
+     * When true (default), the section hides itself when the booking
+     * has no `accommodation` items AND no existing group — shared-room
+     * pairing only makes sense for bookings that include a room. Tours,
+     * ground-transfer, and inquiry bookings see no Shared-Room card.
+     *
+     * Set to `false` to always render the section (e.g. legacy
+     * dashboards that display it for every booking regardless).
+     */
+    hideWithoutAccommodation?: boolean;
+}
+export declare function BookingGroupSection({ bookingId, productId, optionUnitId, hideWithoutAccommodation, }: BookingGroupSectionProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=booking-group-section.d.ts.map

package/dist/components/booking-group-section.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-group-section.d.ts","sourceRoot":"","sources":["../../src/components/booking-group-section.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B;;;;;;;;OAQG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAA;CACnC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,SAAS,EACT,YAAY,EACZ,wBAA+B,GAChC,EAAE,wBAAwB,kDA2I1B"}

package/dist/components/booking-group-section.js

@@ -0,0 +1,51 @@
+"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 { Link2, Unlink, Users } from "lucide-react";
+import * as React from "react";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingGroup, useBookingGroupForBooking, useBookingGroupMemberMutation, useBookingItems, useBookingPrimaryProduct, } from "../index.js";
+import { BookingGroupLinkDialog } from "./booking-group-link-dialog.js";
+export function BookingGroupSection({ bookingId, productId, optionUnitId, hideWithoutAccommodation = true, }) {
+    const [linkDialogOpen, setLinkDialogOpen] = React.useState(false);
+    const messages = useBookingsUiMessagesOrDefault();
+    // Auto-resolve product/option-unit from items when the caller hasn't
+    // supplied them. Explicit `null` is respected as an override.
+    const shouldAutoResolve = productId === undefined || optionUnitId === undefined;
+    const autoResolved = useBookingPrimaryProduct(bookingId, { enabled: shouldAutoResolve });
+    const effectiveProductId = productId === undefined ? autoResolved.productId : productId;
+    const effectiveOptionUnitId = optionUnitId === undefined ? autoResolved.optionUnitId : optionUnitId;
+    // Fetch items to detect whether the booking has accommodation —
+    // shared-room pairing is meaningful only for room-style products.
+    // The `useBookingItems` query is already in cache from
+    // `useBookingPrimaryProduct` above, so this is a free read.
+    const { data: itemsData } = useBookingItems(bookingId);
+    const items = itemsData?.data ?? [];
+    const hasAccommodationItem = items.some((i) => i.itemType === "accommodation");
+    const { data: groupForBookingData } = useBookingGroupForBooking(bookingId);
+    const group = groupForBookingData?.data ?? null;
+    const groupId = group?.id ?? null;
+    const { data: groupDetail } = useBookingGroup(groupId, { enabled: Boolean(groupId) });
+    const members = groupDetail?.data?.members ?? [];
+    const { remove: removeMember } = useBookingGroupMemberMutation();
+    // Hide the section entirely when there's nothing to render or
+    // pair: no group exists yet AND the booking has no accommodation
+    // line item. Operators on tour-only bookings shouldn't see a card
+    // they can't usefully act on.
+    if (hideWithoutAccommodation && !group && !hasAccommodationItem) {
+        return null;
+    }
+    const handleRemove = async () => {
+        if (!groupId)
+            return;
+        if (!confirm(messages.bookingGroupSection.actions.removeConfirm))
+            return;
+        await removeMember.mutateAsync({ groupId, bookingId });
+    };
+    const siblings = members.filter((m) => m.bookingId !== bookingId);
+    return (_jsxs(Card, { "data-slot": "booking-group-section", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-4 w-4" }), messages.bookingGroupSection.title] }), group ? (_jsxs(Button, { size: "sm", variant: "outline", onClick: handleRemove, disabled: removeMember.isPending, children: [_jsx(Unlink, { className: "mr-2 h-4 w-4" }), messages.bookingGroupSection.actions.removeFromGroup] })) : (_jsxs(Button, { size: "sm", onClick: () => setLinkDialogOpen(true), children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), messages.bookingGroupSection.actions.linkToSharedRoom] }))] }), _jsx(CardContent, { children: !group ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.bookingGroupSection.empty })) : (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between rounded-md border bg-muted/30 p-3 text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: messages.bookingGroupSection.group }), _jsx("div", { className: "font-medium", children: group.label })] }), _jsx(Badge, { variant: "outline", children: group.kind === "shared_room"
+                                        ? messages.bookingGroupSection.sharedRoomKind
+                                        : group.kind.replace(/_/g, " ") })] }), _jsxs("div", { children: [_jsx("div", { className: "mb-2 text-xs font-medium text-muted-foreground", children: formatMessage(messages.bookingGroupSection.siblingBookings, {
+                                        count: siblings.length,
+                                    }) }), siblings.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.bookingGroupSection.noSiblingBookings })) : (_jsx("ul", { className: "space-y-1", children: siblings.map((m) => (_jsxs("li", { className: "flex items-center justify-between rounded px-2 py-1 text-sm", children: [_jsx("span", { className: "font-mono text-xs", children: m.booking?.bookingNumber ?? m.bookingId }), _jsxs("div", { className: "flex items-center gap-2", children: [m.role === "primary" && (_jsx(Badge, { variant: "default", className: "text-xs", children: messages.bookingGroupSection.primaryBadge })), m.booking?.status && (_jsx("span", { className: "text-xs text-muted-foreground", children: messages.common.bookingStatusLabels[m.booking.status] }))] })] }, m.id))) }))] })] })) }), _jsx(BookingGroupLinkDialog, { open: linkDialogOpen, onOpenChange: setLinkDialogOpen, bookingId: bookingId, productId: effectiveProductId, optionUnitId: effectiveOptionUnitId })] }));
+}

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

@@ -0,0 +1,10 @@
+import { type BookingGuaranteeRecord } from "@voyant-travel/finance-react";
+export interface BookingGuaranteeDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    guarantee?: BookingGuaranteeRecord;
+    onSuccess?: () => void;
+}
+export declare function BookingGuaranteeDialog({ open, onOpenChange, bookingId, guarantee, onSuccess, }: BookingGuaranteeDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-guarantee-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-guarantee-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,sBAAsB,EAE5B,MAAM,8BAA8B,CAAA;AAiErC,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,sBAAsB,CAAA;IAClC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,SAAS,GACV,EAAE,2BAA2B,2CA+N7B"}

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingGuaranteeMutation, } from "@voyant-travel/finance-react";
+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 { DateTimePicker } from "@voyant-travel/ui/components/date-time-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";
+const guaranteeTypes = [
+    "deposit",
+    "credit_card",
+    "preauth",
+    "card_on_file",
+    "bank_transfer",
+    "voucher",
+    "agency_letter",
+    "other",
+];
+const guaranteeStatuses = [
+    "pending",
+    "active",
+    "released",
+    "failed",
+    "cancelled",
+    "expired",
+];
+const DEFAULT_CURRENCY = "EUR"; // i18n-literal-ok ISO default currency
+function createGuaranteeFormSchema() {
+    return z.object({
+        guaranteeType: z.enum(guaranteeTypes),
+        status: z.enum(guaranteeStatuses).default("pending"),
+        currency: z.string().min(3).max(3).optional().nullable(),
+        amountCents: z.coerce.number().int().min(0).optional().nullable(),
+        provider: z.string().optional().nullable(),
+        referenceNumber: z.string().optional().nullable(),
+        expiresAt: z.string().optional().nullable(),
+        notes: z.string().optional().nullable(),
+    });
+}
+export function BookingGuaranteeDialog({ open, onOpenChange, bookingId, guarantee, onSuccess, }) {
+    const isEditing = Boolean(guarantee);
+    const { create, update } = useBookingGuaranteeMutation(bookingId);
+    const messages = useBookingsUiMessagesOrDefault();
+    const guaranteeFormSchema = createGuaranteeFormSchema();
+    const typeItems = useMemo(() => guaranteeTypes.map((t) => ({
+        value: t,
+        label: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t],
+    })), [messages.bookingGuaranteeDialog.guaranteeTypeLabels]);
+    const statusItems = useMemo(() => guaranteeStatuses.map((s) => ({
+        value: s,
+        label: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s],
+    })), [messages.bookingGuaranteeDialog.guaranteeStatusLabels]);
+    const form = useForm({
+        resolver: zodResolver(guaranteeFormSchema),
+        defaultValues: {
+            guaranteeType: "deposit",
+            status: "pending",
+            currency: DEFAULT_CURRENCY,
+            amountCents: null,
+            provider: "",
+            referenceNumber: "",
+            expiresAt: "",
+            notes: "",
+        },
+    });
+    useEffect(() => {
+        if (open && guarantee) {
+            form.reset({
+                guaranteeType: guarantee.guaranteeType,
+                status: guarantee.status,
+                currency: guarantee.currency,
+                amountCents: guarantee.amountCents,
+                provider: guarantee.provider ?? "",
+                referenceNumber: guarantee.referenceNumber ?? "",
+                expiresAt: guarantee.expiresAt ? guarantee.expiresAt.slice(0, 16) : "",
+                notes: guarantee.notes ?? "",
+            });
+        }
+        else if (open) {
+            form.reset();
+        }
+    }, [form, open, guarantee]);
+    const onSubmit = async (values) => {
+        const payload = {
+            guaranteeType: values.guaranteeType,
+            status: values.status,
+            currency: values.currency || null,
+            amountCents: values.amountCents ?? null,
+            provider: values.provider || null,
+            referenceNumber: values.referenceNumber || null,
+            expiresAt: values.expiresAt || null,
+            notes: values.notes || null,
+        };
+        if (isEditing) {
+            await update.mutateAsync({ id: guarantee.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    const isSubmitting = create.isPending || update.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
+                            ? messages.bookingGuaranteeDialog.titles.edit
+                            : messages.bookingGuaranteeDialog.titles.create }) }), _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.bookingGuaranteeDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("guaranteeType"), onValueChange: (v) => form.setValue("guaranteeType", (v ?? "deposit")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingGuaranteeDialog.guaranteeTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", (v ?? "pending")), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: guaranteeStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[s] }, s))) })] })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.currency }), _jsx(CurrencyCombobox, { value: form.watch("currency") || null, onChange: (next) => form.setValue("currency", next ?? DEFAULT_CURRENCY, {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.amountCents }), _jsx(CurrencyInput, { value: form.watch("amountCents"), onChange: (next) => form.setValue("amountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("currency") })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.provider }), _jsx(Input, { ...form.register("provider"), placeholder: messages.bookingGuaranteeDialog.placeholders.provider })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.referenceNumber }), _jsx(Input, { ...form.register("referenceNumber"), placeholder: messages.bookingGuaranteeDialog.placeholders.referenceNumber })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.expiresAt }), _jsx(DateTimePicker, { value: form.watch("expiresAt") || null, onChange: (next) => form.setValue("expiresAt", next ?? "", {
+                                                shouldValidate: true,
+                                                shouldDirty: true,
+                                            }), placeholder: messages.bookingGuaranteeDialog.placeholders.expiresAt, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingGuaranteeDialog.fields.notes }), _jsx(Textarea, { ...form.register("notes"), placeholder: messages.bookingGuaranteeDialog.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: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing
+                                            ? messages.common.saveChanges
+                                            : messages.bookingGuaranteeDialog.actions.addGuarantee] })] })] })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-guarantee-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-guarantee-list.tsx"],"names":[],"mappings":"AA4BA,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE,yBAAyB,2CAkK5E"}

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

@@ -0,0 +1,86 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingGuaranteeMutation, useBookingGuarantees, } from "@voyant-travel/finance-react";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, Button, } from "@voyant-travel/ui/components";
+import { DataTable } from "@voyant-travel/ui/components/data-table";
+import { Pencil, Plus, ShieldCheck, Trash2 } from "lucide-react";
+import * as React from "react";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { BookingGuaranteeDialog } from "./booking-guarantee-dialog.js";
+import { IconActionButton } from "./icon-action-button.js";
+import { StatusBadge } from "./status-badge.js";
+export function BookingGuaranteeList({ bookingId }) {
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(undefined);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const { data } = useBookingGuarantees(bookingId);
+    const { remove } = useBookingGuaranteeMutation(bookingId);
+    const { formatCurrency, formatDate } = useBookingsUiI18nOrDefault();
+    const messages = useBookingsUiMessagesOrDefault();
+    const t = messages.bookingGuaranteeList;
+    const deleteMessages = t.actions.deleteConfirm;
+    const guarantees = data?.data ?? [];
+    const handleConfirmDelete = async () => {
+        if (!deleteTarget)
+            return;
+        await remove.mutateAsync(deleteTarget.id);
+        setDeleteTarget(null);
+    };
+    const columns = React.useMemo(() => [
+        {
+            accessorKey: "guaranteeType",
+            header: t.columns.type,
+            cell: ({ row }) => messages.bookingGuaranteeDialog.guaranteeTypeLabels[row.original.guaranteeType],
+        },
+        {
+            accessorKey: "amountCents",
+            header: t.columns.amount,
+            cell: ({ row }) => (_jsx("span", { className: "font-mono", children: row.original.amountCents == null || !row.original.currency
+                    ? t.values.amountUnavailable
+                    : formatCurrency(row.original.amountCents / 100, row.original.currency) })),
+        },
+        {
+            accessorKey: "status",
+            header: t.columns.status,
+            cell: ({ row }) => (_jsx(StatusBadge, { status: row.original.status, children: messages.bookingGuaranteeDialog.guaranteeStatusLabels[row.original.status] })),
+        },
+        {
+            accessorKey: "provider",
+            header: t.columns.provider,
+            cell: ({ row }) => row.original.provider ?? t.values.providerUnavailable,
+        },
+        {
+            accessorKey: "referenceNumber",
+            header: t.columns.reference,
+            cell: ({ row }) => (_jsx("span", { className: "block max-w-[180px] truncate font-mono text-xs", children: row.original.referenceNumber ?? t.values.referenceUnavailable })),
+        },
+        {
+            accessorKey: "expiresAt",
+            header: t.columns.expires,
+            cell: ({ row }) => row.original.expiresAt ? formatDate(row.original.expiresAt) : t.values.expiresUnavailable,
+        },
+        {
+            id: "actions",
+            header: "",
+            cell: ({ row }) => (_jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(IconActionButton, { label: t.actions.editGuarantee, icon: _jsx(Pencil, { className: "h-3.5 w-3.5" }), onClick: (e) => {
+                            e.stopPropagation();
+                            setEditing(row.original);
+                            setDialogOpen(true);
+                        } }), _jsx(IconActionButton, { label: t.actions.deleteGuarantee, icon: _jsx(Trash2, { className: "h-3.5 w-3.5" }), className: "text-muted-foreground hover:bg-destructive/10 hover:text-destructive", onClick: (e) => {
+                            e.stopPropagation();
+                            setDeleteTarget(row.original);
+                        } })] })),
+        },
+    ], [formatCurrency, formatDate, messages, t]);
+    return (_jsxs("div", { "data-slot": "booking-guarantee-list", 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(ShieldCheck, { className: "h-4 w-4" }), t.title] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditing(undefined);
+                            setDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), t.addGuarantee] })] }), _jsx(DataTable, { columns: columns, data: guarantees, emptyMessage: t.empty, showPagination: false }), _jsx(BookingGuaranteeDialog, { open: dialogOpen, onOpenChange: (nextOpen) => {
+                    setDialogOpen(nextOpen);
+                    if (!nextOpen)
+                        setEditing(undefined);
+                }, bookingId: bookingId, guarantee: editing, onSuccess: () => setEditing(undefined) }), _jsx(AlertDialog, { open: Boolean(deleteTarget), onOpenChange: (next) => {
+                    if (!next && !remove.isPending)
+                        setDeleteTarget(null);
+                }, children: _jsxs(AlertDialogContent, { size: "sm", children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: deleteMessages.title }), _jsx(AlertDialogDescription, { children: deleteMessages.description })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { disabled: remove.isPending, children: deleteMessages.cancel }), _jsx(AlertDialogAction, { variant: "destructive", disabled: remove.isPending, onClick: () => void handleConfirmDelete(), children: deleteMessages.confirm })] })] }) })] }));
+}

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

@@ -0,0 +1,10 @@
+import { type BookingItemRecord } from "../index.js";
+export interface BookingItemDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    bookingId: string;
+    item?: BookingItemRecord;
+    onSuccess?: () => void;
+}
+export declare function BookingItemDialog({ open, onOpenChange, bookingId, item, onSuccess, }: BookingItemDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-item-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-item-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-dialog.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,KAAK,iBAAiB,EAA0B,MAAM,aAAa,CAAA;AAuC5E,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,iBAAiB,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,wBAAgB,iBAAiB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,sBAAsB,2CA4SxB"}

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

@@ -0,0 +1,155 @@
+"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 { 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 { useBookingItemMutation } from "../index.js";
+const itemTypes = [
+    "unit",
+    "extra",
+    "service",
+    "fee",
+    "tax",
+    "discount",
+    "adjustment",
+    "accommodation",
+    "transport",
+    "other",
+];
+const itemStatuses = ["draft", "on_hold", "confirmed", "cancelled", "expired", "fulfilled"];
+const DEFAULT_CURRENCY = "EUR"; // i18n-literal-ok ISO default currency
+function createBookingItemFormSchema(messages) {
+    return z.object({
+        title: z.string().min(1, messages.bookingItemDialog.validation.titleRequired),
+        itemType: z.enum(itemTypes).default("unit"),
+        status: z.enum(itemStatuses).default("draft"),
+        quantity: z.coerce.number().int().positive().default(1),
+        sellCurrency: z.string().min(3).max(3).default("EUR"),
+        unitSellAmountCents: z.coerce.number().int().optional().nullable(),
+        totalSellAmountCents: z.coerce.number().int().optional().nullable(),
+        costCurrency: z.string().min(3).max(3).optional().nullable(),
+        unitCostAmountCents: z.coerce.number().int().optional().nullable(),
+        totalCostAmountCents: z.coerce.number().int().optional().nullable(),
+        serviceDate: z.string().optional().nullable(),
+        description: z.string().optional().nullable(),
+        notes: z.string().optional().nullable(),
+    });
+}
+export function BookingItemDialog({ open, onOpenChange, bookingId, item, onSuccess, }) {
+    const isEditing = Boolean(item);
+    const { create, update } = useBookingItemMutation(bookingId);
+    const messages = useBookingsUiMessagesOrDefault();
+    const bookingItemFormSchema = createBookingItemFormSchema(messages);
+    const typeItems = useMemo(() => itemTypes.map((t) => ({
+        value: t,
+        label: messages.bookingItemDialog.itemTypeLabels[t],
+    })), [messages.bookingItemDialog.itemTypeLabels]);
+    const statusItems = useMemo(() => itemStatuses.map((s) => ({
+        value: s,
+        label: messages.bookingItemDialog.itemStatusLabels[s],
+    })), [messages.bookingItemDialog.itemStatusLabels]);
+    const form = useForm({
+        resolver: zodResolver(bookingItemFormSchema),
+        defaultValues: {
+            title: "",
+            itemType: "unit",
+            status: "draft",
+            quantity: 1,
+            sellCurrency: DEFAULT_CURRENCY,
+            unitSellAmountCents: null,
+            totalSellAmountCents: null,
+            costCurrency: null,
+            unitCostAmountCents: null,
+            totalCostAmountCents: null,
+            serviceDate: "",
+            description: "",
+            notes: "",
+        },
+    });
+    // `form` is intentionally omitted from deps — react-hook-form returns
+    // a fresh wrapper object on every render even though the underlying
+    // state lives in a ref. Including `form` here would re-run the effect
+    // on every render and re-trigger reset → re-render → loop. The methods
+    // we call (`reset`) are safe to call from a stale closure since they
+    // dispatch into the form's internal store.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: see comment above -- owner: bookings-react; existing suppression is intentional pending typed cleanup.
+    useEffect(() => {
+        if (open && item) {
+            form.reset({
+                title: item.title,
+                itemType: item.itemType,
+                status: item.status,
+                quantity: item.quantity,
+                sellCurrency: item.sellCurrency,
+                unitSellAmountCents: item.unitSellAmountCents,
+                totalSellAmountCents: item.totalSellAmountCents,
+                costCurrency: item.costCurrency,
+                unitCostAmountCents: item.unitCostAmountCents,
+                totalCostAmountCents: item.totalCostAmountCents,
+                serviceDate: item.serviceDate ?? "",
+                description: item.description ?? "",
+                notes: item.notes ?? "",
+            });
+        }
+        else if (open) {
+            form.reset();
+        }
+    }, [open, item]);
+    const onSubmit = async (values) => {
+        const payload = {
+            title: values.title,
+            itemType: values.itemType,
+            status: values.status,
+            quantity: values.quantity,
+            sellCurrency: values.sellCurrency,
+            unitSellAmountCents: values.unitSellAmountCents ?? null,
+            totalSellAmountCents: values.totalSellAmountCents ?? null,
+            costCurrency: values.costCurrency || null,
+            unitCostAmountCents: values.unitCostAmountCents ?? null,
+            totalCostAmountCents: values.totalCostAmountCents ?? null,
+            serviceDate: values.serviceDate || null,
+            description: values.description || null,
+            notes: values.notes || null,
+        };
+        if (isEditing) {
+            await update.mutateAsync({ id: item.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onOpenChange(false);
+        onSuccess?.();
+    };
+    const isSubmitting = create.isPending || update.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: isEditing
+                            ? messages.bookingItemDialog.titles.edit
+                            : messages.bookingItemDialog.titles.create }) }), _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.bookingItemDialog.fields.title }), _jsx(Input, { ...form.register("title"), placeholder: messages.bookingItemDialog.placeholders.title }), form.formState.errors.title && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.title.message }))] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.type }), _jsxs(Select, { items: typeItems, value: form.watch("itemType"), onValueChange: (v) => form.setValue("itemType", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemTypes.map((t) => (_jsx(SelectItem, { value: t, children: messages.bookingItemDialog.itemTypeLabels[t] }, t))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.status }), _jsxs(Select, { items: statusItems, value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemStatuses.map((s) => (_jsx(SelectItem, { value: s, children: messages.bookingItemDialog.itemStatusLabels[s] }, s))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.quantity }), _jsx(Input, { ...form.register("quantity"), type: "number", min: 1 })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.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.bookingItemDialog.fields.unitSellAmountCents }), _jsx(CurrencyInput, { value: form.watch("unitSellAmountCents"), onChange: (next) => form.setValue("unitSellAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("sellCurrency"), placeholder: messages.bookingItemDialog.placeholders.unitSellAmountCents })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.totalSellAmountCents }), _jsx(CurrencyInput, { value: form.watch("totalSellAmountCents"), onChange: (next) => form.setValue("totalSellAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("sellCurrency"), placeholder: messages.bookingItemDialog.placeholders.totalSellAmountCents })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.costCurrency }), _jsx(CurrencyCombobox, { value: form.watch("costCurrency") || null, onChange: (next) => form.setValue("costCurrency", next ?? DEFAULT_CURRENCY, {
+                                                        shouldValidate: true,
+                                                        shouldDirty: true,
+                                                    }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.unitCostAmountCents }), _jsx(CurrencyInput, { value: form.watch("unitCostAmountCents"), onChange: (next) => form.setValue("unitCostAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("costCurrency") || form.watch("sellCurrency"), placeholder: messages.bookingItemDialog.placeholders.unitCostAmountCents })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.totalCostAmountCents }), _jsx(CurrencyInput, { value: form.watch("totalCostAmountCents"), onChange: (next) => form.setValue("totalCostAmountCents", next, {
+                                                        shouldDirty: true,
+                                                        shouldValidate: true,
+                                                    }), currency: form.watch("costCurrency") || form.watch("sellCurrency"), placeholder: messages.bookingItemDialog.placeholders.totalCostAmountCents })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.serviceDate }), _jsx(DatePicker, { value: form.watch("serviceDate") || null, onChange: (next) => form.setValue("serviceDate", next ?? "", {
+                                                shouldValidate: true,
+                                                shouldDirty: true,
+                                            }), placeholder: messages.bookingItemDialog.placeholders.serviceDate, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.description }), _jsx(Textarea, { ...form.register("description"), placeholder: messages.bookingItemDialog.placeholders.description })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: messages.bookingItemDialog.fields.notes }), _jsx(Textarea, { ...form.register("notes"), placeholder: messages.bookingItemDialog.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: isSubmitting, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? messages.common.saveChanges : messages.bookingItemDialog.actions.addItem] })] })] })] }) }));
+}

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

@@ -0,0 +1,12 @@
+export type BookingItemResourceKind = "product" | "availabilitySlot";
+export interface BookingItemListProps {
+    bookingId: string;
+    /**
+     * Open a linked resource (product / availability slot) in the host app.
+     * When omitted, the snapshot sheet renders the names as plain text
+     * instead of clickable links.
+     */
+    onResourceOpen?: (kind: BookingItemResourceKind, id: string) => void;
+}
+export declare function BookingItemList({ bookingId, onResourceOpen }: BookingItemListProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-item-list.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-item-list.d.ts","sourceRoot":"","sources":["../../src/components/booking-item-list.tsx"],"names":[],"mappings":"AA8BA,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,kBAAkB,CAAA;AAEpE,MAAM,WAAW,oBAAoB;IACnC,SAAS,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,uBAAuB,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACrE;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,EAAE,oBAAoB,2CA+NlF"}