@voyantjs/bookings-ui 0.13.0

package/README.md

@@ -0,0 +1,13 @@
+# @voyantjs/bookings-ui
+
+Importable React UI components for Voyant bookings. Bundler-consumed (Vite, Next.js, webpack, etc.).
+
+## Install
+
+```bash
+pnpm add @voyantjs/bookings-ui @voyantjs/bookings-react @voyantjs/voyant-ui @tanstack/react-query react react-dom
+```
+
+`@voyantjs/voyant-ui` provides the design-system primitives. `@voyantjs/bookings-react` provides the data-layer hooks. Both are required peers.
+
+All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.

package/dist/components/booking-activity-timeline.d.ts

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

package/dist/components/booking-activity-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"booking-activity-timeline.d.ts","sourceRoot":"","sources":["../../src/components/booking-activity-timeline.tsx"],"names":[],"mappings":"AA0BA,MAAM,WAAW,4BAA4B;IAC3C,SAAS,EAAE,MAAM,CAAA;CAClB;AA+CD,wBAAgB,uBAAuB,CAAC,EAAE,SAAS,EAAE,EAAE,4BAA4B,2CAqFlF"}

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

@@ -0,0 +1,83 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingActivity, useBookingTravelerDocuments } from "@voyantjs/bookings-react";
+import { usePublicBookingPayments } from "@voyantjs/finance-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, } from "@voyantjs/voyant-ui/components";
+import { Activity, Clock, CreditCard, ExternalLink, FileText, Pencil, Plus, RefreshCw, UserPlus, } from "lucide-react";
+import * as React from "react";
+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,
+    passenger_update: UserPlus,
+    note_added: Pencil,
+};
+const sourceLabel = {
+    activity: "Activity",
+    document: "Document",
+    payment: "Payment",
+};
+const sourceVariant = {
+    activity: "outline",
+    document: "secondary",
+    payment: "default",
+};
+export function BookingActivityTimeline({ bookingId }) {
+    const [filter, setFilter] = React.useState("all");
+    const { data: activityData } = useBookingActivity(bookingId);
+    const { data: documentsData } = useBookingTravelerDocuments(bookingId);
+    const { data: paymentsData } = usePublicBookingPayments(bookingId);
+    const events = React.useMemo(() => {
+        const merged = [];
+        for (const entry of activityData?.data ?? []) {
+            merged.push({
+                id: `activity:${entry.id}`,
+                source: "activity",
+                title: entry.description,
+                actorId: 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, " ")} uploaded`,
+                description: doc.fileName,
+                timestamp: doc.createdAt,
+                icon: FileText,
+                link: { href: doc.fileUrl, label: "View file" },
+            });
+        }
+        for (const payment of paymentsData?.data?.payments ?? []) {
+            merged.push({
+                id: `payment:${payment.id}`,
+                source: "payment",
+                title: `Payment ${payment.status} — ${(payment.amountCents / 100).toFixed(2)} ${payment.currency}`,
+                description: `Invoice ${payment.invoiceNumber} · ${payment.paymentMethod.replace(/_/g, " ")}`,
+                timestamp: payment.paymentDate,
+                icon: CreditCard,
+            });
+        }
+        merged.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
+        return merged;
+    }, [activityData, documentsData, paymentsData]);
+    const visible = filter === "all" ? events : events.filter((e) => e.source === filter);
+    const filterChips = ["all", "activity", "document", "payment"];
+    return (_jsxs(Card, { "data-slot": "booking-activity-timeline", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Activity, { className: "h-4 w-4" }), "Activity Timeline"] }), _jsx("div", { className: "flex 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" ? "All" : sourceLabel[chip] }, chip))) })] }), _jsx(CardContent, { children: visible.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: "No events yet." })) : (_jsx("div", { className: "flex flex-col gap-3", children: visible.map((event) => (_jsx(TimelineEventItem, { event: event }, event.id))) })) })] }));
+}
+function TimelineEventItem({ event }) {
+    const Icon = event.icon;
+    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 })), _jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [event.actorId && event.actorId !== "system" ? `By ${event.actorId} · ` : "", new Date(event.timestamp).toLocaleString()] }), 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-cancellation-dialog.d.ts

@@ -0,0 +1,18 @@
+import { type BookingRecord } from "@voyantjs/bookings-react";
+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":"AAEA,OAAO,EACL,KAAK,aAAa,EAGnB,MAAM,0BAA0B,CAAA;AA4CjC,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,2CAwMhC"}

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

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useBookingCancelMutation, useBookingPrimaryProduct, } from "@voyantjs/bookings-react";
+import { useEvaluateCancellation, useResolvePolicy } from "@voyantjs/legal-react";
+import { Badge, Button, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Textarea, } from "@voyantjs/voyant-ui/components";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import * as React from "react";
+function formatAmount(cents, currency) {
+    return `${(cents / 100).toFixed(2)} ${currency}`;
+}
+function formatPercent(basisPoints) {
+    return `${(basisPoints / 100).toFixed(0)}%`;
+}
+function daysBetween(from, to) {
+    const diffMs = to.getTime() - from.getTime();
+    return Math.max(0, Math.floor(diffMs / (1000 * 60 * 60 * 24)));
+}
+const refundTypeLabel = {
+    cash: "Cash refund",
+    credit: "Credit",
+    cash_or_credit: "Cash or credit",
+    none: "No refund",
+};
+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 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;
+    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" }), "Cancel Booking"] }) }), _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: "Booking" }), _jsx("div", { className: "font-mono text-xs", children: booking.bookingNumber })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Start date" }), _jsx("div", { children: booking.startDate ?? "TBD" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Total" }), _jsx("div", { className: "font-mono", children: total != null ? formatAmount(total, booking.sellCurrency) : "—" })] }), _jsxs("div", { children: [_jsx("div", { className: "text-xs text-muted-foreground", children: "Days before departure" }), _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" }), "Resolving cancellation policy..."] })) : !policy ? (_jsx("div", { className: "rounded-md border border-dashed p-3 text-sm text-muted-foreground", children: "No cancellation policy configured for this booking. Proceeding will cancel without a refund preview." })) : (_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: "Applicable policy" }), _jsx("div", { className: "text-sm font-medium", children: policy.policy.name })] }), evaluation && (_jsx(Badge, { variant: refundTypeVariant[evaluation.refundType] ?? "secondary", children: refundTypeLabel[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" }), "Calculating refund..."] })) : 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: "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: "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: "Rule" }), _jsx("div", { className: "text-xs", children: evaluation.appliedRule?.label ??
+                                                        (evaluation.appliedRule?.daysBeforeDeparture != null
+                                                            ? `≥ ${evaluation.appliedRule.daysBeforeDeparture} days`
+                                                            : "—") })] })] })) : total == null ? (_jsx("p", { className: "border-t pt-3 text-sm text-muted-foreground", children: "Booking has no total amount \u2014 refund cannot be calculated." })) : null] })), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { children: ["Reason ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsx(Textarea, { value: reason, onChange: (e) => setReason(e.target.value), placeholder: "Why is this booking being cancelled?", required: true })] }), cancelMutation.error && (_jsx("p", { className: "text-xs text-destructive", children: cancelMutation.error instanceof Error
+                                ? cancelMutation.error.message
+                                : "Cancellation failed" }))] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onOpenChange(false), disabled: cancelMutation.isPending, children: "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" }), "Confirm Cancellation"] })] })] }) }));
+}

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

@@ -0,0 +1,21 @@
+import { type BookingRecord } from "@voyantjs/bookings-react";
+export interface BookingCreateDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated?: (booking: BookingRecord) => void;
+    /** When provided, pre-selects this product and hides the product picker. */
+    defaultProductId?: string;
+}
+/**
+ * Operator booking-create dialog. Composes the booking-create picker
+ * sections — product, departure, rooms, person, shared-room, passengers,
+ * price breakdown, voucher, payment schedule — and submits via the atomic
+ * `POST /v1/bookings/quick-create` endpoint so partial failures can't
+ * leave orphan state.
+ *
+ * Normally consumed via `BookingDialog` which delegates here when no
+ * `booking` prop is passed. Apps that need a bespoke flow can install the
+ * sections individually and assemble their own dialog instead of forking.
+ */
+export declare function BookingCreateDialog({ open, onOpenChange, onCreated, defaultProductId, }: BookingCreateDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=booking-create-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-create-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-create-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,aAAa,EAOnB,MAAM,0BAA0B,CAAA;AAqJjC,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,EAAE,wBAAwB,2CAoW1B"}

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

@@ -0,0 +1,313 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSlots, useSlotUnitAvailability } from "@voyantjs/availability-react";
+import { useBookingQuickCreateMutation, useBookingStatusByIdMutation, } from "@voyantjs/bookings-react";
+import { usePersonMutation } from "@voyantjs/crm-react";
+import { Button, Checkbox, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/voyant-ui/components";
+import { Loader2 } from "lucide-react";
+import * as React from "react";
+import { emptyPassengerListValue, PassengersSection, } from "./passengers-section";
+import { emptyPaymentScheduleValue, PaymentScheduleSection, } from "./payment-schedule-section";
+import { emptyPersonPickerValue, PersonPickerSection, } from "./person-picker-section";
+import { PriceBreakdownSection } from "./price-breakdown-section";
+import { ProductPickerSection } from "./product-picker-section";
+import { emptyRoomsStepperValue, RoomsStepperSection, } from "./rooms-stepper-section";
+import { emptySharedRoomValue, SharedRoomSection, } from "./shared-room-section";
+import { emptyVoucherPickerValue, VoucherPickerSection, } from "./voucher-picker-section";
+function generateBookingNumber() {
+    const now = new Date();
+    const y = now.getFullYear().toString().slice(-2);
+    const m = String(now.getMonth() + 1).padStart(2, "0");
+    const seq = String(Math.floor(Math.random() * 9000) + 1000);
+    return `BK-${y}${m}-${seq}`;
+}
+function paymentScheduleToRows(value, currency, totalAmountCents) {
+    if (value.mode === "unpaid")
+        return [];
+    if (value.mode === "full") {
+        if (!value.fullDueDate || totalAmountCents === null)
+            return [];
+        return [
+            {
+                scheduleType: "balance",
+                status: "due",
+                dueDate: value.fullDueDate,
+                currency,
+                amountCents: totalAmountCents,
+            },
+        ];
+    }
+    if (value.mode === "advance") {
+        if (!value.advanceDueDate || value.advanceAmountCents == null)
+            return [];
+        const rows = [
+            {
+                scheduleType: "deposit",
+                status: "due",
+                dueDate: value.advanceDueDate,
+                currency,
+                amountCents: value.advanceAmountCents,
+            },
+        ];
+        if (totalAmountCents !== null && totalAmountCents > value.advanceAmountCents) {
+            rows.push({
+                scheduleType: "balance",
+                status: "pending",
+                dueDate: value.advanceDueDate,
+                currency,
+                amountCents: totalAmountCents - value.advanceAmountCents,
+            });
+        }
+        return rows;
+    }
+    // split
+    const rows = [];
+    if (value.splitFirstDueDate && value.splitFirstAmountCents != null) {
+        rows.push({
+            scheduleType: "installment",
+            status: "due",
+            dueDate: value.splitFirstDueDate,
+            currency,
+            amountCents: value.splitFirstAmountCents,
+        });
+    }
+    if (value.splitSecondDueDate && value.splitSecondAmountCents != null) {
+        rows.push({
+            scheduleType: "installment",
+            status: "pending",
+            dueDate: value.splitSecondDueDate,
+            currency,
+            amountCents: value.splitSecondAmountCents,
+        });
+    }
+    return rows;
+}
+function passengersToRows(value) {
+    return value.passengers.map((p) => ({
+        firstName: p.firstName.trim(),
+        lastName: p.lastName.trim(),
+        email: p.email.trim() || null,
+        participantType: "traveler",
+        travelerCategory: p.role === "child"
+            ? "child"
+            : p.role === "infant"
+                ? "infant"
+                : p.role === "adult"
+                    ? "adult"
+                    : null,
+        isPrimary: p.role === "lead",
+        roomUnitId: p.roomUnitId,
+    }));
+}
+/**
+ * Operator booking-create dialog. Composes the booking-create picker
+ * sections — product, departure, rooms, person, shared-room, passengers,
+ * price breakdown, voucher, payment schedule — and submits via the atomic
+ * `POST /v1/bookings/quick-create` endpoint so partial failures can't
+ * leave orphan state.
+ *
+ * Normally consumed via `BookingDialog` which delegates here when no
+ * `booking` prop is passed. Apps that need a bespoke flow can install the
+ * sections individually and assemble their own dialog instead of forking.
+ */
+export function BookingCreateDialog({ open, onOpenChange, onCreated, defaultProductId, }) {
+    const [product, setProduct] = React.useState({
+        productId: defaultProductId ?? "",
+        optionId: null,
+    });
+    const [slotId, setSlotId] = React.useState(null);
+    const [rooms, setRooms] = React.useState(emptyRoomsStepperValue);
+    const [person, setPerson] = React.useState(emptyPersonPickerValue);
+    const [sharedRoom, setSharedRoom] = React.useState(emptySharedRoomValue);
+    const [passengers, setPassengers] = React.useState(emptyPassengerListValue);
+    const [voucher, setVoucher] = React.useState(emptyVoucherPickerValue);
+    const [paymentSchedule, setPaymentSchedule] = React.useState(emptyPaymentScheduleValue);
+    const [notes, setNotes] = React.useState("");
+    /**
+     * Optional post-create transition: set status to `confirmed` right after
+     * create succeeds. When the parent app has the notifications module's
+     * `autoConfirmAndDispatch` enabled, this fires the doc bundle + traveler
+     * email via the `booking.confirmed` subscriber. When it isn't, the
+     * booking simply lands in `confirmed` instead of `draft`.
+     */
+    const [confirmAfterCreate, setConfirmAfterCreate] = React.useState(false);
+    const [error, setError] = React.useState(null);
+    React.useEffect(() => {
+        if (!open) {
+            setProduct({ productId: defaultProductId ?? "", optionId: null });
+            setSlotId(null);
+            setRooms(emptyRoomsStepperValue);
+            setPerson(emptyPersonPickerValue);
+            setSharedRoom(emptySharedRoomValue);
+            setPassengers(emptyPassengerListValue);
+            setVoucher(emptyVoucherPickerValue);
+            setPaymentSchedule(emptyPaymentScheduleValue);
+            setNotes("");
+            setConfirmAfterCreate(false);
+            setError(null);
+        }
+        else if (defaultProductId) {
+            setProduct((prev) => prev.productId === defaultProductId
+                ? prev
+                : { productId: defaultProductId, optionId: null });
+        }
+    }, [open, defaultProductId]);
+    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally only resets when product/option changes
+    React.useEffect(() => {
+        setSlotId(null);
+        setRooms(emptyRoomsStepperValue);
+    }, [product.productId, product.optionId]);
+    const { data: slotsData } = useSlots({
+        productId: product.productId || undefined,
+        status: "open",
+        limit: 100,
+        enabled: open && Boolean(product.productId),
+    });
+    const slots = React.useMemo(() => {
+        const nowIso = new Date().toISOString();
+        return (slotsData?.data ?? [])
+            .filter((slot) => slot.startsAt >= nowIso)
+            .filter((slot) => {
+            if (!product.optionId)
+                return true;
+            return slot.optionId === null || slot.optionId === product.optionId;
+        })
+            .sort((a, b) => a.startsAt.localeCompare(b.startsAt));
+    }, [slotsData, product.optionId]);
+    const formatSlotLabel = React.useCallback((slot) => {
+        const date = new Date(slot.startsAt).toLocaleDateString(undefined, {
+            year: "numeric",
+            month: "short",
+            day: "numeric",
+        });
+        const remaining = !slot.unlimited && typeof slot.remainingPax === "number" ? ` · ${slot.remainingPax} left` : "";
+        return `${date}${remaining}`;
+    }, []);
+    const slotUnitAvailability = useSlotUnitAvailability({
+        slotId: slotId ?? undefined,
+        enabled: open && Boolean(slotId),
+    });
+    const roomUnitOptions = React.useMemo(() => {
+        const units = slotUnitAvailability.data?.data ?? [];
+        if (units.length === 0)
+            return [];
+        return units
+            .filter((unit) => (rooms.quantities[unit.optionUnitId] ?? 0) > 0)
+            .map((unit) => {
+            const qty = rooms.quantities[unit.optionUnitId] ?? 0;
+            const occupancyMax = 1;
+            const seats = qty * occupancyMax;
+            const assigned = passengers.passengers.filter((p) => p.roomUnitId === unit.optionUnitId).length;
+            return {
+                unitId: unit.optionUnitId,
+                unitName: unit.unitName,
+                remainingCapacity: Math.max(0, seats - assigned),
+            };
+        });
+    }, [slotUnitAvailability.data, rooms.quantities, passengers.passengers]);
+    // Currency placeholder — used for voucher + payment schedule display.
+    // Consumers hooking in real product data should override this by wrapping
+    // the component or swapping in their own currency-aware hook.
+    const currency = "EUR";
+    const { create: createPerson } = usePersonMutation();
+    const quickCreateMutation = useBookingQuickCreateMutation();
+    const statusMutation = useBookingStatusByIdMutation();
+    const handleSubmit = async () => {
+        setError(null);
+        if (!product.productId) {
+            setError("Select a product");
+            return;
+        }
+        let resolvedPersonId = null;
+        try {
+            if (person.mode === "existing") {
+                if (!person.personId) {
+                    setError("Select a person or switch to create mode");
+                    return;
+                }
+                resolvedPersonId = person.personId;
+            }
+            else {
+                if (!person.newPerson.firstName.trim() || !person.newPerson.lastName.trim()) {
+                    setError("First and last name are required");
+                    return;
+                }
+                const created = await createPerson.mutateAsync({
+                    firstName: person.newPerson.firstName.trim(),
+                    lastName: person.newPerson.lastName.trim(),
+                    email: person.newPerson.email.trim() || null,
+                    phone: person.newPerson.phone.trim() || null,
+                });
+                resolvedPersonId = created.id;
+            }
+            if (sharedRoom.enabled && sharedRoom.mode === "join" && !sharedRoom.groupId) {
+                setError("Select a shared-room group to join");
+                return;
+            }
+            const bookingNumber = generateBookingNumber();
+            const paymentSchedules = paymentScheduleToRows(paymentSchedule, currency, null);
+            const travelers = passengersToRows(passengers);
+            const voucherRedemption = voucher.picked && voucher.picked.remainingAmountCents != null
+                ? {
+                    voucherId: voucher.picked.id,
+                    amountCents: voucher.picked.remainingAmountCents,
+                }
+                : undefined;
+            const groupMembership = sharedRoom.enabled
+                ? sharedRoom.mode === "create"
+                    ? {
+                        action: "create",
+                        kind: "shared_room",
+                        label: `Shared room — ${bookingNumber}`,
+                        optionUnitId: product.optionId,
+                        makeBookingPrimary: true,
+                    }
+                    : sharedRoom.groupId
+                        ? { action: "join", groupId: sharedRoom.groupId, role: "shared" }
+                        : undefined
+                : undefined;
+            const { booking } = await quickCreateMutation.mutateAsync({
+                productId: product.productId,
+                bookingNumber,
+                optionId: product.optionId,
+                slotId,
+                personId: resolvedPersonId,
+                organizationId: person.organizationId,
+                internalNotes: notes.trim() || null,
+                travelers: travelers.length > 0 ? travelers : undefined,
+                paymentSchedules: paymentSchedules.length > 0 ? paymentSchedules : undefined,
+                voucherRedemption,
+                groupMembership,
+            });
+            // Optional post-create confirm. If the app has autoConfirmAndDispatch
+            // wired on the notifications module, the status transition triggers
+            // the doc bundle + traveler email subscriber. A failed status change
+            // doesn't roll back the booking — it exists, operator can confirm
+            // manually later.
+            let finalBooking = booking;
+            if (confirmAfterCreate) {
+                try {
+                    finalBooking = await statusMutation.mutateAsync({
+                        bookingId: booking.id,
+                        currentStatus: booking.status,
+                        status: "confirmed",
+                    });
+                }
+                catch (statusErr) {
+                    setError(statusErr instanceof Error
+                        ? `Booking created but confirm failed: ${statusErr.message}`
+                        : "Booking created but confirm failed");
+                    onCreated?.(booking);
+                    return;
+                }
+            }
+            onOpenChange(false);
+            onCreated?.(finalBooking);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Failed to create booking");
+        }
+    };
+    const isSubmitting = quickCreateMutation.isPending || createPerson.isPending || statusMutation.isPending;
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Quick Book" }) }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductPickerSection, { value: product, onChange: setProduct, enabled: open, lockProduct: Boolean(defaultProductId) }), product.productId ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: "Departure" }), _jsxs(Select, { value: slotId ?? "__none__", onValueChange: (v) => setSlotId(v === "__none__" ? null : (v ?? null)), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select a departure..." }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", children: "No specific departure" }), slots.length === 0 ? (_jsx(SelectItem, { value: "__empty__", disabled: true, children: "No open departures for this product" })) : (slots.map((slot) => (_jsx(SelectItem, { value: slot.id, children: formatSlotLabel(slot) }, slot.id))))] })] })] })) : null, slotId ? (_jsx(RoomsStepperSection, { value: rooms, onChange: setRooms, slotId: slotId, enabled: open })) : null, _jsx(PersonPickerSection, { value: person, onChange: setPerson, enabled: open }), _jsx(SharedRoomSection, { value: sharedRoom, onChange: setSharedRoom, productId: product.productId || undefined, enabled: open }), product.productId ? (_jsx(PassengersSection, { value: passengers, onChange: setPassengers, roomUnits: roomUnitOptions.length > 0 ? roomUnitOptions : undefined })) : null, product.productId ? (_jsx(PriceBreakdownSection, { productId: product.productId, optionId: product.optionId, unitQuantities: rooms.quantities })) : null, _jsx(VoucherPickerSection, { value: voucher, onChange: setVoucher, currency: currency }), _jsx(PaymentScheduleSection, { value: paymentSchedule, onChange: setPaymentSchedule, currency: currency }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: "Internal Notes" }), _jsx(Textarea, { value: notes, onChange: (e) => setNotes(e.target.value), placeholder: "Quick context for this booking..." })] }), _jsxs("div", { className: "flex items-start gap-2 rounded-md border p-3", children: [_jsx(Checkbox, { id: "quickbook-confirm-after-create", checked: confirmAfterCreate, onCheckedChange: (v) => setConfirmAfterCreate(v === true), className: "mt-0.5" }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "quickbook-confirm-after-create", className: "cursor-pointer text-sm", children: "Confirm & notify traveler after creating" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Transitions to confirmed after create. When the notifications module's auto-dispatch is on, this fires the doc bundle + traveler email via the booking.confirmed subscriber." })] })] }), 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: "Cancel" }), _jsxs(Button, { type: "button", size: "sm", onClick: handleSubmit, disabled: isSubmitting || !product.productId, children: [isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Create Draft Booking"] })] })] }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"booking-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAsB,MAAM,0BAA0B,CAAA;AA2CjF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,aAAa,CAAA;IACvB,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAUD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,SAAS,EACT,gBAAgB,GACjB,EAAE,kBAAkB,2CAoBpB"}