@voyantjs/bookings-ui 0.50.5 → 0.50.7

package/dist/components/payment-schedule-section.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Label } from "@voyantjs/ui/components";
+import { Button, Checkbox, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
 import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import { DatePicker } from "@voyantjs/ui/components/date-picker";
-import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 export const emptyPaymentScheduleValue = {
     mode: "unpaid",
     fullDueDate: null,
@@ -13,6 +13,22 @@ export const emptyPaymentScheduleValue = {
     splitFirstDueDate: null,
     splitSecondAmountCents: null,
     splitSecondDueDate: null,
+    fullAlreadyPaid: false,
+    fullPaymentDate: null,
+    fullPaymentMethod: "bank_transfer",
+    fullPaymentReference: "",
+    advanceAlreadyPaid: false,
+    advancePaymentDate: null,
+    advancePaymentMethod: "bank_transfer",
+    advancePaymentReference: "",
+    splitFirstAlreadyPaid: false,
+    splitFirstPaymentDate: null,
+    splitFirstPaymentMethod: "bank_transfer",
+    splitFirstPaymentReference: "",
+    splitSecondAlreadyPaid: false,
+    splitSecondPaymentDate: null,
+    splitSecondPaymentMethod: "bank_transfer",
+    splitSecondPaymentReference: "",
 };
 /**
  * Payment schedule picker for booking-create flows. Operators choose one of
@@ -36,6 +52,7 @@ export const emptyPaymentScheduleValue = {
  */
 export function PaymentScheduleSection({ value, onChange, totalAmountCents, currency, labels, }) {
     const messages = useBookingsUiMessagesOrDefault();
+    const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
     const merged = { ...messages.paymentScheduleSection.labels, ...labels };
     const set = (patch) => onChange({ ...value, ...patch });
     const modes = [
@@ -55,5 +72,33 @@ export function PaymentScheduleSection({ value, onChange, totalAmountCents, curr
             splitSecondAmountCents: totalAmountCents - half,
         });
     };
-    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: modes.map((mode) => (_jsx(Button, { type: "button", size: "sm", variant: value.mode === mode.id ? "default" : "ghost", onClick: () => set({ mode: mode.id }), children: mode.label }, mode.id))) }), value.mode === "unpaid" && (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.unpaidHint })), value.mode === "full" && (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(DatePicker, { value: value.fullDueDate ?? "", onChange: (nextValue) => set({ fullDueDate: nextValue }) })] })), value.mode === "advance" && (_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.amount }), _jsx(CurrencyInput, { value: value.advanceAmountCents, onChange: (next) => set({ advanceAmountCents: next }), currency: currency })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(DatePicker, { value: value.advanceDueDate ?? "", onChange: (nextValue) => set({ advanceDueDate: nextValue }) })] })] })), value.mode === "split" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: merged.firstInstallment }), totalAmountCents ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handlePreset5050, children: merged.preset5050 })) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(CurrencyInput, { placeholder: merged.amount, value: value.splitFirstAmountCents, onChange: (next) => set({ splitFirstAmountCents: next }), currency: currency }), _jsx(DatePicker, { value: value.splitFirstDueDate ?? "", onChange: (nextValue) => set({ splitFirstDueDate: nextValue }) })] }), _jsx("div", { className: "text-xs font-medium", children: merged.secondInstallment }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(CurrencyInput, { placeholder: merged.amount, value: value.splitSecondAmountCents, onChange: (next) => set({ splitSecondAmountCents: next }), currency: currency }), _jsx(DatePicker, { value: value.splitSecondDueDate ?? "", onChange: (nextValue) => set({ splitSecondDueDate: nextValue }) })] })] }))] }));
+    const total = typeof totalAmountCents === "number" ? totalAmountCents : null;
+    const scheduledTotal = value.mode === "unpaid"
+        ? 0
+        : value.mode === "full"
+            ? (total ?? 0)
+            : value.mode === "advance"
+                ? (value.advanceAmountCents ?? 0)
+                : (value.splitFirstAmountCents ?? 0) + (value.splitSecondAmountCents ?? 0);
+    const remaining = total === null ? null : Math.max(0, total - scheduledTotal);
+    const formatAmount = (cents) => {
+        if (cents === null)
+            return "-";
+        return currency
+            ? formatCurrency(cents / 100, currency)
+            : formatNumber(cents / 100, {
+                minimumFractionDigits: 2,
+                maximumFractionDigits: 2,
+            });
+    };
+    const paymentMethodLabels = messages.bookingPaymentsSummary.paymentMethodLabels;
+    const renderPaidFields = (prefix, checked) => {
+        const paymentDateKey = `${prefix}PaymentDate`;
+        const paymentMethodKey = `${prefix}PaymentMethod`;
+        const paymentReferenceKey = `${prefix}PaymentReference`;
+        const checkedKey = `${prefix}AlreadyPaid`;
+        const checkboxId = `payment-schedule-${prefix}-already-paid`;
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-dashed p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { id: checkboxId, checked: checked, onCheckedChange: (next) => set({ [checkedKey]: next === true }) }), _jsx(Label, { htmlFor: checkboxId, className: "cursor-pointer text-xs", children: merged.alreadyPaid })] }), checked ? (_jsxs("div", { className: "grid gap-2 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentDate }), _jsx(DatePicker, { value: value[paymentDateKey] ?? "", onChange: (nextValue) => set({ [paymentDateKey]: nextValue }) })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentMethod }), _jsxs(Select, { value: value[paymentMethodKey] ?? "bank_transfer", onValueChange: (nextValue) => set({ [paymentMethodKey]: nextValue ?? "bank_transfer" }), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ["bank_transfer", "credit_card", "cash", "voucher", "other"].map((method) => (_jsx(SelectItem, { value: method, children: paymentMethodLabels[method === "credit_card" ? "card" : method] }, method))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.paymentReference }), _jsx(Input, { value: value[paymentReferenceKey] ?? "", onChange: (event) => set({ [paymentReferenceKey]: event.target.value }) })] })] })) : null] }));
+    };
+    return (_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsxs("div", { className: "grid gap-2 rounded-md bg-muted/40 p-2 text-xs sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.totalDue }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(total) })] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.scheduledTotal }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(scheduledTotal) })] }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-muted-foreground", children: merged.remaining }), _jsx("span", { className: "font-medium tabular-nums", children: formatAmount(remaining) })] })] }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: modes.map((mode) => (_jsx(Button, { type: "button", size: "sm", variant: value.mode === mode.id ? "default" : "ghost", onClick: () => set({ mode: mode.id }), children: mode.label }, mode.id))) }), value.mode === "unpaid" && (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.unpaidHint })), value.mode === "full" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(DatePicker, { value: value.fullDueDate ?? "", onChange: (nextValue) => set({ fullDueDate: nextValue }) })] }), renderPaidFields("full", value.fullAlreadyPaid)] })), value.mode === "advance" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.amount }), _jsx(CurrencyInput, { value: value.advanceAmountCents, onChange: (next) => set({ advanceAmountCents: next }), currency: currency })] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.dueDate }), _jsx(DatePicker, { value: value.advanceDueDate ?? "", onChange: (nextValue) => set({ advanceDueDate: nextValue }) })] })] }), renderPaidFields("advance", value.advanceAlreadyPaid)] })), value.mode === "split" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-xs font-medium", children: merged.firstInstallment }), totalAmountCents ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: handlePreset5050, children: merged.preset5050 })) : null] }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(CurrencyInput, { placeholder: merged.amount, value: value.splitFirstAmountCents, onChange: (next) => set({ splitFirstAmountCents: next }), currency: currency }), _jsx(DatePicker, { value: value.splitFirstDueDate ?? "", onChange: (nextValue) => set({ splitFirstDueDate: nextValue }) })] }), renderPaidFields("splitFirst", value.splitFirstAlreadyPaid), _jsx("div", { className: "text-xs font-medium", children: merged.secondInstallment }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(CurrencyInput, { placeholder: merged.amount, value: value.splitSecondAmountCents, onChange: (next) => set({ splitSecondAmountCents: next }), currency: currency }), _jsx(DatePicker, { value: value.splitSecondDueDate ?? "", onChange: (nextValue) => set({ splitSecondDueDate: nextValue }) })] }), renderPaidFields("splitSecond", value.splitSecondAlreadyPaid)] }))] }));
 }

package/dist/components/price-breakdown-section.d.ts

@@ -20,6 +20,7 @@ export interface PriceBreakdownValue {
     priceOverrideReason: string;
     isManualOverride: boolean;
     requiresReason: boolean;
+    lines: PriceBreakdownLine[];
 }
 export interface PriceBreakdownSectionProps {
     productId?: string;

package/dist/components/price-breakdown-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,4DAA4D;IAC5D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,uEAAuE;IACvE,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,sBAAsB,CAAC,EAAE,MAAM,CAAA;KAChC,CAAA;IACD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,0BAA0B,kDAoQ5B"}
+{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,MAAM,CAAA;IAChB,4EAA4E;IAC5E,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,4DAA4D;IAC5D,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B;;;OAGG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,mBAAmB,EAAE,MAAM,CAAA;IAC3B,gBAAgB,EAAE,OAAO,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,EAAE,kBAAkB,EAAE,CAAA;CAC5B;AAED,MAAM,WAAW,0BAA0B;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,uEAAuE;IACvE,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,cAAc,CAAC,EAAE,MAAM,CAAA;QACvB,yBAAyB,CAAC,EAAE,MAAM,CAAA;QAClC,sBAAsB,CAAC,EAAE,MAAM,CAAA;KAChC,CAAA;IACD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAChD;AA0BD;;;;;;;;;;;GAWG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAQ,EACR,cAAc,EACd,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,0BAA0B,kDAsQ5B"}

package/dist/components/price-breakdown-section.js

@@ -167,11 +167,13 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
             priceOverrideReason: overrideReason,
             isManualOverride,
             requiresReason,
+            lines,
         });
     }, [
         confirmedAmountCents,
         currency,
         isManualOverride,
+        lines,
         onChange,
         overrideReason,
         requiresReason,

package/dist/components/product-picker-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/product-picker-section.tsx"],"names":[],"mappings":"AA8BA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC7C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qGAAqG;IACrG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,WAAmB,EACnB,MAAM,GACP,EAAE,yBAAyB,2CAgI3B"}
+{"version":3,"file":"product-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/product-picker-section.tsx"],"names":[],"mappings":"AA+BA,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,uFAAuF;IACvF,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB;AAED,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,kBAAkB,CAAA;IACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC7C,mEAAmE;IACnE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qGAAqG;IACrG,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,wBAAwB,CAAC,EAAE,MAAM,CAAA;QACjC,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;KACpB,CAAA;CACF;AAED;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,WAAmB,EACnB,MAAM,GACP,EAAE,yBAAyB,2CAyI3B"}

package/dist/components/product-picker-section.js

@@ -5,6 +5,7 @@ import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, }
 import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { productMatchesPickerSearch } from "./booking-create-utils.js";
 const OPTION_NONE = "__none__";
 /**
  * Controlled product + option picker. Splits `value` + `onChange` so apps can
@@ -13,6 +14,7 @@ const OPTION_NONE = "__none__";
  */
 export function ProductPickerSection({ value, onChange, enabled = true, lockProduct = false, labels, }) {
     const [productSearch, setProductSearch] = React.useState("");
+    const cachedProductsRef = React.useRef(new Map());
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.productPickerSection.labels, ...labels };
     const { data: productsData } = useProducts({
@@ -24,15 +26,17 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
         enabled: enabled && Boolean(value.productId),
     });
     const products = React.useMemo(() => {
-        const map = new Map();
+        const map = new Map(cachedProductsRef.current);
         for (const product of productsData?.data ?? [])
             map.set(product.id, product);
         if (selectedProductQuery.data)
             map.set(selectedProductQuery.data.id, selectedProductQuery.data);
+        cachedProductsRef.current = map;
         return Array.from(map.values());
     }, [productsData?.data, selectedProductQuery.data]);
     const productMap = React.useMemo(() => new Map(products.map((product) => [product.id, product])), [products]);
-    const selectedProductLabel = value.productId ? (productMap.get(value.productId)?.name ?? "") : "";
+    const resolveProductLabel = React.useCallback((productId) => productMap.get(productId)?.name ?? cachedProductsRef.current.get(productId)?.name ?? "", [productMap]);
+    const selectedProductLabel = value.productId ? resolveProductLabel(value.productId) : "";
     const [productInputValue, setProductInputValue] = React.useState(selectedProductLabel);
     React.useEffect(() => {
         if (selectedProductLabel)
@@ -44,7 +48,7 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
         enabled: enabled && Boolean(value.productId),
     });
     const options = optionsData?.data ?? [];
-    return (_jsxs(_Fragment, { children: [!lockProduct && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { children: [merged.product, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Combobox, { items: products.map((product) => product.id), value: value.productId || null, inputValue: productInputValue, autoHighlight: true, disabled: !enabled, itemToStringValue: (id) => productMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+    return (_jsxs(_Fragment, { children: [!lockProduct && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs(Label, { children: [merged.product, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Combobox, { items: products.map((product) => product.id), value: value.productId || null, inputValue: productInputValue, autoHighlight: true, disabled: !enabled, filter: (id, query) => productMatchesPickerSearch(productMap.get(id), query), itemToStringLabel: (id) => resolveProductLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
                             setProductInputValue(next);
                             setProductSearch(next);
                             if (!next)
@@ -52,7 +56,7 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
                         }, onValueChange: (next) => {
                             const productId = next ?? "";
                             onChange({ productId, optionId: null });
-                            setProductInputValue(productId ? (productMap.get(productId)?.name ?? "") : "");
+                            setProductInputValue(productId ? resolveProductLabel(productId) : "");
                         }, children: [_jsx(ComboboxInput, { placeholder: merged.productSearchPlaceholder, showClear: !!value.productId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.productEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
                                                 const product = productMap.get(id);
                                                 if (!product)

package/dist/components/rooms-stepper-section.d.ts

@@ -7,14 +7,19 @@ export interface RoomsStepperSectionProps {
     value: RoomsStepperValue;
     onChange: (value: RoomsStepperValue) => void;
     /**
-     * Departure the operator picked. Section renders nothing until a slot is
-     * chosen — per-unit availability is a property of the slot, not the
-     * product, so there's nothing to show before then.
+     * Departure the operator picked. Departure-specific availability wins
+     * when present; otherwise the section falls back to option-level units.
      */
     slotId?: string;
+    /**
+     * Product option whose units should be shown before a departure is picked.
+     * Departure-specific availability wins when `slotId` is present.
+     */
+    optionId?: string | null;
     enabled?: boolean;
     labels?: {
         heading?: string;
+        noOption?: string;
         noSlot?: string;
         noUnits?: string;
         remaining?: string;
@@ -23,9 +28,9 @@ export interface RoomsStepperSectionProps {
 }
 /**
  * Rooms / per-unit stepper for booking-create flows. Drives
- * `GET /v1/availability/slots/:id/unit-availability` from #235 so the
- * operator sees authoritative "3 doubles available" numbers instead of
- * client-side math against a sampled booking list.
+ * `GET /v1/availability/slots/:id/unit-availability` from #235 when a
+ * departure is selected, and option-level units before departure selection,
+ * so operators can still build "2 double rooms and 1 single" drafts.
  *
  * The section only tracks **intent** (how many of each unit the operator
  * wants to book). Actual hold/reservation happens when the parent submits
@@ -41,5 +46,5 @@ export interface RoomsStepperSectionProps {
  *   disables the "+" button — we don't let the UI submit a request that
  *   would 409 at insert time.
  */
-export declare function RoomsStepperSection({ value, onChange, slotId, enabled, labels, }: RoomsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function RoomsStepperSection({ value, onChange, slotId, optionId, enabled, labels, }: RoomsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=rooms-stepper-section.d.ts.map

package/dist/components/rooms-stepper-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rooms-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/rooms-stepper-section.tsx"],"names":[],"mappings":"AAOA,iEAAiE;AACjE,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAsC,CAAA;AAE3E,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAc,EACd,MAAM,GACP,EAAE,wBAAwB,2CAoF1B"}
+{"version":3,"file":"rooms-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/rooms-stepper-section.tsx"],"names":[],"mappings":"AAQA,iEAAiE;AACjE,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAsC,CAAA;AAE3E,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;KACnB,CAAA;CACF;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,OAAc,EACd,MAAM,GACP,EAAE,wBAAwB,2CAmG1B"}

package/dist/components/rooms-stepper-section.js

@@ -1,15 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSlotUnitAvailability } from "@voyantjs/availability-react";
+import { useOptionUnits } from "@voyantjs/products-react";
 import { Button, Label } from "@voyantjs/ui/components";
 import { Minus, Plus } from "lucide-react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 export const emptyRoomsStepperValue = { quantities: {} };
 /**
  * Rooms / per-unit stepper for booking-create flows. Drives
- * `GET /v1/availability/slots/:id/unit-availability` from #235 so the
- * operator sees authoritative "3 doubles available" numbers instead of
- * client-side math against a sampled booking list.
+ * `GET /v1/availability/slots/:id/unit-availability` from #235 when a
+ * departure is selected, and option-level units before departure selection,
+ * so operators can still build "2 double rooms and 1 single" drafts.
  *
  * The section only tracks **intent** (how many of each unit the operator
  * wants to book). Actual hold/reservation happens when the parent submits
@@ -25,15 +26,30 @@ export const emptyRoomsStepperValue = { quantities: {} };
  *   disables the "+" button — we don't let the UI submit a request that
  *   would 409 at insert time.
  */
-export function RoomsStepperSection({ value, onChange, slotId, enabled = true, labels, }) {
+export function RoomsStepperSection({ value, onChange, slotId, optionId, enabled = true, labels, }) {
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.roomsStepperSection.labels, ...labels };
     const availability = useSlotUnitAvailability({ slotId, enabled: enabled && Boolean(slotId) });
-    const units = availability.data?.data ?? [];
-    if (!slotId) {
-        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noSlot })] }));
+    const optionUnits = useOptionUnits({
+        optionId: optionId ?? undefined,
+        limit: 100,
+        enabled: enabled && !slotId && Boolean(optionId),
+    });
+    const units = slotId
+        ? (availability.data?.data ?? [])
+        : (optionUnits.data?.data ?? []).map((unit) => ({
+            optionUnitId: unit.id,
+            unitName: unit.name,
+            occupancyMax: unit.occupancyMax,
+            initial: null,
+            reserved: 0,
+            remaining: unit.maxQuantity ?? null,
+        }));
+    if (!slotId && !optionId) {
+        return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noOption })] }));
     }
-    if (availability.isSuccess && units.length === 0) {
+    const loaded = slotId ? availability.isSuccess : optionUnits.isSuccess;
+    if (loaded && units.length === 0) {
         return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.noUnits })] }));
     }
     const setQuantity = (unitId, qty) => {

package/dist/components/shared-room-section.d.ts

@@ -8,6 +8,7 @@ export interface SharedRoomValue {
     groupLabel?: string;
 }
 export declare const emptySharedRoomValue: SharedRoomValue;
+export declare function clearSharedRoomValue(): SharedRoomValue;
 export interface SharedRoomSectionProps {
     value: SharedRoomValue;
     onChange: (value: SharedRoomValue) => void;
@@ -28,6 +29,7 @@ export interface SharedRoomSectionProps {
         groupLabel?: string;
         groupLabelPlaceholder?: string;
         createAction?: string;
+        remove?: string;
     };
 }
 /**

package/dist/components/shared-room-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared-room-section.d.ts","sourceRoot":"","sources":["../../src/components/shared-room-section.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,cAAc,CAAA;IACpB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,eAKlC,CAAA;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,eAAe,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;KACtB,CAAA;CACF;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAc,EACd,MAAM,GACP,EAAE,sBAAsB,2CAyJxB"}
+{"version":3,"file":"shared-room-section.d.ts","sourceRoot":"","sources":["../../src/components/shared-room-section.tsx"],"names":[],"mappings":"AA2BA,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,MAAM,CAAA;AAE9C,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAA;IAChB,IAAI,EAAE,cAAc,CAAA;IACpB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAA;IACf,iEAAiE;IACjE,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,oBAAoB,EAAE,eAKlC,CAAA;AAED,wBAAgB,oBAAoB,IAAI,eAAe,CAEtD;AAED,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,eAAe,CAAA;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAA;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;CACF;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAc,EACd,MAAM,GACP,EAAE,sBAAsB,2CAyKxB"}

package/dist/components/shared-room-section.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useBookingGroups } from "@voyantjs/bookings-react";
 import { Button, Input, Label, Sheet, SheetBody, SheetContent, SheetFooter, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
 import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
-import { Link2, Plus } from "lucide-react";
+import { Link2, Plus, X } from "lucide-react";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 export const emptySharedRoomValue = {
@@ -12,6 +12,9 @@ export const emptySharedRoomValue = {
     groupId: "",
     groupLabel: "",
 };
+export function clearSharedRoomValue() {
+    return { ...emptySharedRoomValue };
+}
 /**
  * Shared-room (partaj) attachment section. Operators can create a new group in
  * a sheet or join an existing product-scoped group with an async combobox.
@@ -47,6 +50,15 @@ export function SharedRoomSection({ value, onChange, productId, enabled = true,
             setDraftGroupLabel(value.groupLabel ?? "");
     }, [createSheetOpen, value.groupLabel]);
     const set = (patch) => onChange({ ...value, ...patch });
+    const clear = () => {
+        if (!enabled)
+            return;
+        setCreateSheetOpen(false);
+        setDraftGroupLabel("");
+        setGroupInputValue("");
+        setGroupSearch("");
+        onChange(clearSharedRoomValue());
+    };
     const selectCreateMode = () => {
         if (!enabled)
             return;
@@ -66,7 +78,7 @@ export function SharedRoomSection({ value, onChange, productId, enabled = true,
         });
         setCreateSheetOpen(false);
     };
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: merged.toggle }), value.enabled && value.mode === "create" && value.groupLabel ? (_jsx("p", { className: "text-xs text-muted-foreground", children: value.groupLabel })) : value.enabled && value.mode === "create" ? (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.createHint })) : null] }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs(Button, { type: "button", size: "sm", variant: value.enabled && value.mode === "create" ? "default" : "outline", onClick: selectCreateMode, disabled: !enabled, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), merged.createMode] }), _jsxs(Button, { type: "button", size: "sm", variant: value.enabled && value.mode === "join" ? "default" : "outline", onClick: selectJoinMode, disabled: !enabled || !productId, children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), merged.joinMode] })] }), value.enabled && value.mode === "join" ? (_jsxs(Combobox, { items: existingGroups.map((group) => group.id), value: value.groupId || null, inputValue: groupInputValue, autoHighlight: true, disabled: !enabled || !productId, itemToStringValue: (id) => groupsMap.get(id)?.label ?? "", onInputValueChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-3 rounded-md border p-3", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-2", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [_jsx(Label, { children: merged.toggle }), value.enabled && value.mode === "create" && value.groupLabel ? (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: value.groupLabel })) : value.enabled && value.mode === "create" ? (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.createHint })) : null] }), value.enabled ? (_jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: clear, disabled: !enabled, children: [_jsx(X, { className: "mr-2 h-4 w-4" }), merged.remove] })) : null] }), _jsxs("div", { className: "grid gap-2 sm:grid-cols-2", children: [_jsxs(Button, { type: "button", size: "sm", variant: value.enabled && value.mode === "create" ? "default" : "outline", onClick: selectCreateMode, disabled: !enabled, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), merged.createMode] }), _jsxs(Button, { type: "button", size: "sm", variant: value.enabled && value.mode === "join" ? "default" : "outline", onClick: selectJoinMode, disabled: !enabled || !productId, children: [_jsx(Link2, { className: "mr-2 h-4 w-4" }), merged.joinMode] })] }), value.enabled && value.mode === "join" ? (_jsxs(Combobox, { items: existingGroups.map((group) => group.id), value: value.groupId || null, inputValue: groupInputValue, autoHighlight: true, disabled: !enabled || !productId, itemToStringValue: (id) => groupsMap.get(id)?.label ?? "", onInputValueChange: (next) => {
                             setGroupInputValue(next);
                             setGroupSearch(next);
                             if (!next)

package/dist/components/travelers-section.d.ts

@@ -1,5 +1,6 @@
 export type TravelerRole = "lead" | "adult" | "child" | "infant";
 export interface TravelerEntry {
+    personId: string | null;
     firstName: string;
     lastName: string;
     email: string;
@@ -31,6 +32,7 @@ export interface TravelersSectionProps {
      * When provided, each traveler gets a room-assignment dropdown.
      */
     roomUnits?: RoomUnitOption[];
+    billingPersonId?: string | null;
     labels?: {
         heading?: string;
         addTraveler?: string;
@@ -46,27 +48,30 @@ export interface TravelersSectionProps {
         noRoom?: string;
         remove?: string;
         empty?: string;
+        person?: string;
+        personSearchPlaceholder?: string;
+        personEmpty?: string;
+        createNewPerson?: string;
+        createPersonSheetTitle?: string;
+        addBillingPerson?: string;
     };
 }
 /**
- * Traveler list for booking-create flows. Each row carries name + optional
- * email + role + optional room assignment. Inline-create only for now —
- * operators who want to pick an existing CRM person can do so from the
- * booking detail page afterwards, consistent with the lead-person picker's
- * edit-after-create story.
+ * Traveler list for booking-create flows. Each row can point at an existing
+ * CRM person, create a new CRM person, or carry manual name/email details,
+ * plus role and optional room assignment.
  *
  * ### Parent contract
  *
  * At submit time, the parent:
- * 1. Creates a CRM person for each row that doesn't match an existing one
- *    (email match + name, or skip when the operator intentionally left
- *    email blank).
- * 2. Inserts a `booking_travelers` row per traveler with `participantType`
+ * 1. Inserts a `booking_travelers` row per traveler with `participantType`
  *    derived from the role (`lead` / `adult` → traveler; `child` / `infant`
  *    → traveler with travelerCategory set).
+ * 2. Carries `personId` through when the traveler is tied to CRM, including
+ *    when the payer is also traveling.
  * 3. Exactly one row should have `role: "lead"` — enforced at submit, not
  *    here. The UI lets the operator pick whichever layout they want, then
  *    the submit handler errors if the invariant isn't met.
  */
-export declare function TravelersSection({ value, onChange, roomUnits, labels }: TravelersSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TravelersSection({ value, onChange, roomUnits, billingPersonId, labels, }: TravelersSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=travelers-section.d.ts.map

package/dist/components/travelers-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"travelers-section.d.ts","sourceRoot":"","sources":["../../src/components/travelers-section.tsx"],"names":[],"mappings":"AAeA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAIhE,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,YAAY,CAAA;IAClB,+EAA+E;IAC/E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,aAAa,EAAE,CAAA;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAqC,CAAA;AAE1E,qFAAqF;AACrF,wBAAgB,mBAAmB,CAAC,IAAI,GAAE,YAAsB,GAAG,aAAa,CAE/E;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;KACf,CAAA;CACF;AAID;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,qBAAqB,2CA4I7F"}
+{"version":3,"file":"travelers-section.d.ts","sourceRoot":"","sources":["../../src/components/travelers-section.tsx"],"names":[],"mappings":"AAgCA,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAA;AAIhE,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,YAAY,CAAA;IAClB,+EAA+E;IAC/E,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,aAAa,EAAE,CAAA;CAC3B;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAAqC,CAAA;AAE1E,qFAAqF;AACrF,wBAAgB,mBAAmB,CAAC,IAAI,GAAE,YAAsB,GAAG,aAAa,CAE/E;AAED,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,EAAE,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC/B,MAAM,CAAC,EAAE;QACP,OAAO,CAAC,EAAE,MAAM,CAAA;QAChB,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAID;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,eAAe,EACf,MAAM,GACP,EAAE,qBAAqB,2CAuLvB"}

package/dist/components/travelers-section.js

@@ -1,38 +1,42 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
-import { Trash2 } from "lucide-react";
+import { usePeople, usePerson } from "@voyantjs/crm-react";
+import { PersonForm } from "@voyantjs/crm-ui";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyantjs/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import { Trash2, UserPlus } from "lucide-react";
+import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 const ALL_ROLES = ["lead", "adult", "child", "infant"];
 export const emptyTravelerListValue = { travelers: [] };
 /** Factory for a blank row — `role` defaults to `adult` unless the list is empty. */
 export function createBlankTraveler(role = "adult") {
-    return { firstName: "", lastName: "", email: "", role, roomUnitId: null };
+    return { personId: null, firstName: "", lastName: "", email: "", role, roomUnitId: null };
 }
 const NO_ROOM = "__unassigned__";
 /**
- * Traveler list for booking-create flows. Each row carries name + optional
- * email + role + optional room assignment. Inline-create only for now —
- * operators who want to pick an existing CRM person can do so from the
- * booking detail page afterwards, consistent with the lead-person picker's
- * edit-after-create story.
+ * Traveler list for booking-create flows. Each row can point at an existing
+ * CRM person, create a new CRM person, or carry manual name/email details,
+ * plus role and optional room assignment.
  *
  * ### Parent contract
  *
  * At submit time, the parent:
- * 1. Creates a CRM person for each row that doesn't match an existing one
- *    (email match + name, or skip when the operator intentionally left
- *    email blank).
- * 2. Inserts a `booking_travelers` row per traveler with `participantType`
+ * 1. Inserts a `booking_travelers` row per traveler with `participantType`
  *    derived from the role (`lead` / `adult` → traveler; `child` / `infant`
  *    → traveler with travelerCategory set).
+ * 2. Carries `personId` through when the traveler is tied to CRM, including
+ *    when the payer is also traveling.
  * 3. Exactly one row should have `role: "lead"` — enforced at submit, not
  *    here. The UI lets the operator pick whichever layout they want, then
  *    the submit handler errors if the invariant isn't met.
  */
-export function TravelersSection({ value, onChange, roomUnits, labels }) {
+export function TravelersSection({ value, onChange, roomUnits, billingPersonId, labels, }) {
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.travelersSection.labels, ...labels };
+    const billingPerson = usePerson(billingPersonId ?? undefined, {
+        enabled: Boolean(billingPersonId),
+    });
     const roleLabels = {
         lead: merged.roleLead,
         adult: merged.roleAdult,
@@ -52,9 +56,87 @@ export function TravelersSection({ value, onChange, roomUnits, labels }) {
         const role = value.travelers.length === 0 ? "lead" : "adult";
         onChange({ travelers: [...value.travelers, createBlankTraveler(role)] });
     };
-    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: merged.heading }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: addRow, children: merged.addTraveler })] }), value.travelers.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: value.travelers.map((traveler, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { placeholder: merged.firstName, value: traveler.firstName, onChange: (e) => updateAt(index, { firstName: e.target.value }) }), _jsx(Input, { placeholder: merged.lastName, value: traveler.lastName, onChange: (e) => updateAt(index, { lastName: e.target.value }) })] }), _jsx(Input, { type: "email", placeholder: merged.email, value: traveler.email, onChange: (e) => updateAt(index, { email: e.target.value }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.role }), _jsxs(Select, { value: traveler.role, onValueChange: (v) => updateAt(index, { role: (v ?? "adult") }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ALL_ROLES.map((role) => (_jsx(SelectItem, { value: role, children: roleLabels[role] }, role))) })] })] }), roomUnits && roomUnits.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.room }), _jsxs(Select, { value: traveler.roomUnitId ?? NO_ROOM, onValueChange: (v) => updateAt(index, { roomUnitId: v === NO_ROOM ? null : (v ?? null) }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_ROOM, children: merged.noRoom }), roomUnits.map((unit) => (_jsx(SelectItem, { value: unit.unitId, 
+    const addBillingPerson = () => {
+        if (!billingPerson.data)
+            return;
+        const role = value.travelers.length === 0 ? "lead" : "adult";
+        onChange({
+            travelers: [...value.travelers, createTravelerFromPerson(billingPerson.data, role)],
+        });
+    };
+    const hasBillingPersonTraveler = Boolean(billingPersonId && value.travelers.some((traveler) => traveler.personId === billingPersonId));
+    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { children: merged.heading }), _jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: addRow, children: merged.addTraveler })] }), billingPersonId && !hasBillingPersonTraveler ? (_jsx("div", { children: _jsxs(Button, { type: "button", size: "sm", variant: "outline", onClick: addBillingPerson, disabled: !billingPerson.data, children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.addBillingPerson] }) })) : null, value.travelers.length === 0 ? (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: value.travelers.map((traveler, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-2", children: [_jsx(TravelerPersonPicker, { personId: traveler.personId, labels: merged, pinnedPeople: billingPerson.data ? [billingPerson.data] : [], onSelect: (person) => updateAt(index, {
+                                personId: person.id,
+                                firstName: person.firstName,
+                                lastName: person.lastName,
+                                email: person.email ?? "",
+                            }), onClear: () => updateAt(index, { personId: null }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(Input, { placeholder: merged.firstName, value: traveler.firstName, onChange: (e) => updateAt(index, { firstName: e.target.value }) }), _jsx(Input, { placeholder: merged.lastName, value: traveler.lastName, onChange: (e) => updateAt(index, { lastName: e.target.value }) })] }), _jsx(Input, { type: "email", placeholder: merged.email, value: traveler.email, onChange: (e) => updateAt(index, { email: e.target.value }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.role }), _jsxs(Select, { value: traveler.role, onValueChange: (v) => updateAt(index, { role: (v ?? "adult") }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: ALL_ROLES.map((role) => (_jsx(SelectItem, { value: role, children: roleLabels[role] }, role))) })] })] }), roomUnits && roomUnits.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.room }), _jsxs(Select, { value: traveler.roomUnitId ?? NO_ROOM, onValueChange: (v) => updateAt(index, { roomUnitId: v === NO_ROOM ? null : (v ?? null) }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: NO_ROOM, children: merged.noRoom }), roomUnits.map((unit) => (_jsx(SelectItem, { value: unit.unitId, 
                                                             // Only disable other rooms at-capacity — the room the
                                                             // traveler is *already* in should stay selectable so
                                                             // re-renders don't strip the selection.
                                                             disabled: unit.remainingCapacity <= 0 && traveler.roomUnitId !== unit.unitId, children: unit.unitName }, unit.unitId)))] })] })] })) : null] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 text-destructive", onClick: () => removeAt(index), "aria-label": merged.remove, children: [_jsx(Trash2, { className: "mr-1 h-3.5 w-3.5" }), merged.remove] }) })] }, index))) }))] }));
 }
+function TravelerPersonPicker({ personId, labels, pinnedPeople = [], onSelect, onClear, }) {
+    const [search, setSearch] = React.useState("");
+    const [inputValue, setInputValue] = React.useState("");
+    const [sheetOpen, setSheetOpen] = React.useState(false);
+    const peopleQuery = usePeople({ search: search || undefined, limit: 20 });
+    const selectedPersonQuery = usePerson(personId ?? undefined, { enabled: Boolean(personId) });
+    const people = React.useMemo(() => {
+        const map = new Map();
+        for (const person of peopleQuery.data?.data ?? [])
+            map.set(person.id, person);
+        for (const person of pinnedPeople)
+            map.set(person.id, person);
+        if (selectedPersonQuery.data)
+            map.set(selectedPersonQuery.data.id, selectedPersonQuery.data);
+        return Array.from(map.values());
+    }, [peopleQuery.data?.data, pinnedPeople, selectedPersonQuery.data]);
+    const peopleMap = React.useMemo(() => new Map(people.map((person) => [person.id, person])), [people]);
+    const selectedLabel = personId ? formatPerson(peopleMap.get(personId)) : "";
+    React.useEffect(() => {
+        if (selectedLabel)
+            setInputValue(selectedLabel);
+    }, [selectedLabel]);
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx(Label, { className: "text-xs", children: labels.person }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setSheetOpen(true), children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), labels.createNewPerson] })] }), _jsxs(Combobox, { items: people.map((person) => person.id), value: personId, inputValue: inputValue, autoHighlight: true, itemToStringValue: (id) => formatPerson(peopleMap.get(id)), onInputValueChange: (next) => {
+                    setInputValue(next);
+                    setSearch(next);
+                    if (!next)
+                        onClear();
+                }, onValueChange: (next) => {
+                    const nextPerson = peopleMap.get(next ?? "");
+                    if (nextPerson)
+                        onSelect(nextPerson);
+                    setInputValue(nextPerson ? formatPerson(nextPerson) : "");
+                }, children: [_jsx(ComboboxInput, { placeholder: labels.personSearchPlaceholder, showClear: !!personId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: labels.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));
+                                    } }) })] })] }), _jsx(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: labels.createPersonSheetTitle }) }), _jsx(SheetBody, { children: _jsx(PersonForm, { mode: { kind: "create" }, onCancel: () => setSheetOpen(false), onSuccess: (saved) => {
+                                    onSelect(saved);
+                                    setInputValue(formatPerson(saved));
+                                    setSheetOpen(false);
+                                } }) })] }) })] }));
+}
+function createTravelerFromPerson(person, role) {
+    return {
+        personId: person.id,
+        firstName: person.firstName,
+        lastName: person.lastName,
+        email: person.email ?? "",
+        role,
+        roomUnitId: null,
+    };
+}
+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;
+}