@voyantjs/bookings-ui 0.34.0 → 0.37.0

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePricingPreview } from "@voyantjs/bookings-react";
-import { Label } from "@voyantjs/ui/components";
+import { Button, Label, Textarea } from "@voyantjs/ui/components";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import * as React from "react";
 import { useBookingsUiI18nOrDefault, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 /**
@@ -32,7 +33,7 @@ function matchTier(tiers, qty) {
  * - `free` / `included` — render 0.00 without an on-request badge.
  * - `on_request` / anything else — render "On request"; total excludes it.
  */
-export function PriceBreakdownSection({ productId, optionId, unitQuantities, catalogId, labels, }) {
+export function PriceBreakdownSection({ productId, optionId, unitQuantities, catalogId, labels, onChange, }) {
     const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.priceBreakdownSection.labels, ...labels };
@@ -42,6 +43,14 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
         catalogId: catalogId ?? null,
         enabled: Boolean(productId),
     });
+    const quantitiesKey = React.useMemo(() => JSON.stringify(unitQuantities), [unitQuantities]);
+    const [manualAmountCents, setManualAmountCents] = React.useState(null);
+    const [overrideReason, setOverrideReason] = React.useState("");
+    // biome-ignore lint/correctness/useExhaustiveDependencies: reset manual confirmation when the priced selection changes
+    React.useEffect(() => {
+        setManualAmountCents(null);
+        setOverrideReason("");
+    }, [productId, optionId, catalogId, quantitiesKey]);
     const snapshot = preview.data?.data;
     const currency = snapshot?.catalog.currencyCode ?? null;
     const formatAmount = React.useCallback((cents) => currency
@@ -147,16 +156,38 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
         }
         return { lines: out, total: anyOnRequest ? null : runningTotal };
     }, [snapshot, unitQuantities, merged.onRequest, merged.groupRate]);
+    const confirmedAmountCents = manualAmountCents ?? total;
+    const isManualOverride = manualAmountCents != null && (total === null || manualAmountCents !== total);
+    const requiresReason = isManualOverride && overrideReason.trim().length === 0;
+    React.useEffect(() => {
+        onChange?.({
+            catalogAmountCents: total,
+            confirmedAmountCents,
+            currency,
+            priceOverrideReason: overrideReason,
+            isManualOverride,
+            requiresReason,
+        });
+    }, [
+        confirmedAmountCents,
+        currency,
+        isManualOverride,
+        onChange,
+        overrideReason,
+        requiresReason,
+        total,
+    ]);
+    const manualTotalControls = (_jsxs("div", { className: "flex flex-col gap-2 border-t pt-2", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-end", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.manualTotal }), _jsx(CurrencyInput, { value: manualAmountCents, onChange: setManualAmountCents, currency: currency ?? undefined, placeholder: total === null ? merged.onRequest : formatAmount(total) })] }), manualAmountCents != null ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => setManualAmountCents(null), children: merged.useCatalogTotal })) : null] }), isManualOverride ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.overrideReason }), _jsx(Textarea, { value: overrideReason, onChange: (event) => setOverrideReason(event.target.value), placeholder: merged.overrideReasonPlaceholder, rows: 2 }), requiresReason ? (_jsx("p", { className: "text-xs text-destructive", children: merged.overrideReasonRequired })) : null] })) : null] }));
     // Empty states
     if (!productId)
         return null;
     if (preview.isError || (preview.isSuccess && !snapshot)) {
-        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.noPricing })] }));
+        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.noPricing }), manualTotalControls] }));
     }
     if (lines.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.empty })] }));
+        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.empty }), manualTotalControls] }));
     }
     return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Label, { children: merged.heading }), _jsx("div", { className: "flex flex-col gap-1.5", children: lines.map((line) => (_jsxs("div", { className: "flex items-baseline justify-between text-sm", children: [_jsxs("div", { className: "flex items-baseline gap-2", children: [_jsxs("span", { className: "tabular-nums", children: [formatNumber(line.quantity), "x"] }), _jsx("span", { children: line.label }), line.tierLabel ? (_jsxs("span", { className: "text-xs text-muted-foreground", children: ["\u00B7 ", line.tierLabel] })) : null] }), _jsx("div", { className: "tabular-nums", children: line.totalAmountCents === null
                                 ? merged.onRequest
-                                : formatAmount(line.totalAmountCents) })] }, line.unitId))) }), _jsxs("div", { className: "mt-1 flex items-baseline justify-between border-t pt-2 text-sm font-medium", children: [_jsx("span", { children: merged.total }), _jsx("span", { className: "tabular-nums", children: total === null ? merged.onRequest : formatAmount(total) })] })] }));
+                                : formatAmount(line.totalAmountCents) })] }, line.unitId))) }), _jsxs("div", { className: "mt-1 flex items-baseline justify-between border-t pt-2 text-sm font-medium", children: [_jsx("span", { children: merged.total }), _jsx("span", { className: "tabular-nums", children: total === null ? merged.onRequest : formatAmount(total) })] }), _jsxs("div", { className: "flex items-baseline justify-between text-sm font-medium", children: [_jsx("span", { children: merged.confirmedTotal }), _jsx("span", { className: "tabular-nums", children: confirmedAmountCents === null ? merged.onRequest : formatAmount(confirmedAmountCents) })] }), manualTotalControls] }));
 }

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":"AAiBA,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,2CAkF3B"}
+{"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"}

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

@@ -1,7 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useProductOptions, useProducts } from "@voyantjs/products-react";
-import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { useProduct, useProductOptions, useProducts, } from "@voyantjs/products-react";
+import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
 import * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 const OPTION_NONE = "__none__";
@@ -19,14 +20,47 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
         limit: 20,
         enabled: enabled && !lockProduct,
     });
-    const products = productsData?.data ?? [];
+    const selectedProductQuery = useProduct(value.productId || undefined, {
+        enabled: enabled && Boolean(value.productId),
+    });
+    const products = React.useMemo(() => {
+        const map = new Map();
+        for (const product of productsData?.data ?? [])
+            map.set(product.id, product);
+        if (selectedProductQuery.data)
+            map.set(selectedProductQuery.data.id, selectedProductQuery.data);
+        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 [productInputValue, setProductInputValue] = React.useState(selectedProductLabel);
+    React.useEffect(() => {
+        if (selectedProductLabel)
+            setProductInputValue(selectedProductLabel);
+    }, [selectedProductLabel]);
     const { data: optionsData } = useProductOptions({
         productId: value.productId || undefined,
         limit: 50,
         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: "*" })] }), _jsx(Input, { placeholder: merged.productSearchPlaceholder, value: productSearch, onChange: (e) => setProductSearch(e.target.value) }), _jsxs(Select, { items: products.map((p) => ({ label: p.name, value: p.id })), value: value.productId, onValueChange: (v) => onChange({ productId: v ?? "", optionId: null }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: merged.productSelectPlaceholder }) }), _jsx(SelectContent, { children: products.map((p) => (_jsx(SelectItem, { value: p.id, children: p.name }, p.id))) })] })] })), value.productId && options.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.option }), _jsxs(Select, { items: [
+    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) => {
+                            setProductInputValue(next);
+                            setProductSearch(next);
+                            if (!next)
+                                onChange({ productId: "", optionId: null });
+                        }, onValueChange: (next) => {
+                            const productId = next ?? "";
+                            onChange({ productId, optionId: null });
+                            setProductInputValue(productId ? (productMap.get(productId)?.name ?? "") : "");
+                        }, 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)
+                                                    return null;
+                                                return (_jsx(ComboboxItem, { value: product.id, children: _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("span", { className: "truncate font-medium", children: product.name }), _jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [product.sellCurrency, product.sellAmountCents != null
+                                                                        ? ` · ${product.sellAmountCents / 100}`
+                                                                        : ""] })] }) }, product.id));
+                                            } }) })] })] })] })), value.productId && options.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.option }), _jsxs(Select, { items: [
                             { label: merged.optionNone, value: OPTION_NONE },
                             ...options.map((o) => ({ label: o.name, value: o.id })),
                         ], value: value.optionId ?? OPTION_NONE, onValueChange: (v) => onChange({

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

@@ -4,6 +4,8 @@ export interface SharedRoomValue {
     mode: SharedRoomMode;
     /** Only meaningful in "join" mode. */
     groupId: string;
+    /** Optional label used when creating a new shared-room group. */
+    groupLabel?: string;
 }
 export declare const emptySharedRoomValue: SharedRoomValue;
 export interface SharedRoomSectionProps {
@@ -11,7 +13,7 @@ export interface SharedRoomSectionProps {
     onChange: (value: SharedRoomValue) => void;
     /**
      * The product context for fetching joinable groups. When unset, the join
-     * dropdown is disabled even if the user toggles into join mode.
+     * combobox is disabled even if the user toggles into join mode.
      */
     productId?: string;
     enabled?: boolean;
@@ -22,16 +24,15 @@ export interface SharedRoomSectionProps {
         selectPlaceholder?: string;
         noGroups?: string;
         createHint?: string;
+        createSheetTitle?: string;
+        groupLabel?: string;
+        groupLabelPlaceholder?: string;
+        createAction?: string;
     };
 }
 /**
- * Shared-room (partaj) attachment section. Operators use it to either create a
- * new `booking_groups` row at booking-create time or join an existing group
- * that already has a primary booking.
- *
- * The section only handles the *selection* — the parent dialog owns the
- * create-group + add-member mutations because they fire *after* the booking
- * insert (we need the new booking id to attach).
+ * 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.
  */
 export declare function SharedRoomSection({ value, onChange, productId, enabled, labels, }: SharedRoomSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=shared-room-section.d.ts.map

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":"AAiBA,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;CAChB;AAED,eAAO,MAAM,oBAAoB,EAAE,eAIlC,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;KACpB,CAAA;CACF;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAc,EACd,MAAM,GACP,EAAE,sBAAsB,2CAoFxB"}
+{"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"}

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

@@ -1,34 +1,87 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useBookingGroups } from "@voyantjs/bookings-react";
-import { Button, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyantjs/ui/components";
+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 * as React from "react";
 import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
-const GROUP_NONE = "__none__";
 export const emptySharedRoomValue = {
     enabled: false,
     mode: "create",
     groupId: "",
+    groupLabel: "",
 };
 /**
- * Shared-room (partaj) attachment section. Operators use it to either create a
- * new `booking_groups` row at booking-create time or join an existing group
- * that already has a primary booking.
- *
- * The section only handles the *selection* — the parent dialog owns the
- * create-group + add-member mutations because they fire *after* the booking
- * insert (we need the new booking id to attach).
+ * 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.
  */
 export function SharedRoomSection({ value, onChange, productId, enabled = true, labels, }) {
+    const [groupSearch, setGroupSearch] = React.useState("");
+    const [groupInputValue, setGroupInputValue] = React.useState("");
+    const [createSheetOpen, setCreateSheetOpen] = React.useState(false);
+    const [draftGroupLabel, setDraftGroupLabel] = React.useState(value.groupLabel ?? "");
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.sharedRoomSection.labels, ...labels };
     const { data: groupsData } = useBookingGroups({
+        kind: "shared_room",
         productId: productId || undefined,
         limit: 50,
         enabled: enabled && value.enabled && value.mode === "join" && Boolean(productId),
     });
-    const existingGroups = groupsData?.data ?? [];
+    const existingGroups = React.useMemo(() => {
+        const normalizedSearch = groupSearch.trim().toLowerCase();
+        const groups = groupsData?.data ?? [];
+        if (!normalizedSearch)
+            return groups;
+        return groups.filter((group) => group.label.toLowerCase().includes(normalizedSearch));
+    }, [groupsData?.data, groupSearch]);
+    const groupsMap = React.useMemo(() => new Map((groupsData?.data ?? []).map((group) => [group.id, group])), [groupsData?.data]);
+    const selectedGroupLabel = value.groupId ? (groupsMap.get(value.groupId)?.label ?? "") : "";
+    React.useEffect(() => {
+        if (selectedGroupLabel)
+            setGroupInputValue(selectedGroupLabel);
+    }, [selectedGroupLabel]);
+    React.useEffect(() => {
+        if (createSheetOpen)
+            setDraftGroupLabel(value.groupLabel ?? "");
+    }, [createSheetOpen, value.groupLabel]);
     const set = (patch) => onChange({ ...value, ...patch });
-    return (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("input", { id: "shared-room-toggle", type: "checkbox", checked: value.enabled, onChange: (e) => set({ enabled: e.target.checked }) }), _jsx(Label, { htmlFor: "shared-room-toggle", className: "text-sm", children: merged.toggle })] }), value.enabled && (_jsxs("div", { className: "flex flex-col gap-2 pl-6", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", size: "sm", variant: value.mode === "create" ? "default" : "ghost", onClick: () => set({ mode: "create" }), children: merged.createMode }), _jsx(Button, { type: "button", size: "sm", variant: value.mode === "join" ? "default" : "ghost", onClick: () => set({ mode: "join" }), children: merged.joinMode })] }), value.mode === "join" && (_jsxs(Select, { items: existingGroups.length === 0
-                            ? [{ label: merged.noGroups, value: GROUP_NONE }]
-                            : existingGroups.map((g) => ({ label: g.label, value: g.id })), value: value.groupId || GROUP_NONE, onValueChange: (v) => set({ groupId: v === GROUP_NONE ? "" : (v ?? "") }), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: merged.selectPlaceholder }) }), _jsx(SelectContent, { children: existingGroups.length === 0 ? (_jsx(SelectItem, { value: GROUP_NONE, disabled: true, children: merged.noGroups })) : (existingGroups.map((g) => (_jsx(SelectItem, { value: g.id, children: g.label }, g.id)))) })] })), value.mode === "create" && (_jsx("p", { className: "text-xs text-muted-foreground", children: merged.createHint }))] }))] }));
+    const selectCreateMode = () => {
+        if (!enabled)
+            return;
+        setCreateSheetOpen(true);
+    };
+    const selectJoinMode = () => {
+        if (!enabled)
+            return;
+        set({ enabled: true, mode: "join", groupLabel: "" });
+    };
+    const saveCreateLabel = () => {
+        set({
+            enabled: true,
+            mode: "create",
+            groupId: "",
+            groupLabel: draftGroupLabel.trim(),
+        });
+        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) => {
+                            setGroupInputValue(next);
+                            setGroupSearch(next);
+                            if (!next)
+                                set({ groupId: "" });
+                        }, onValueChange: (next) => {
+                            const groupId = next ?? "";
+                            set({ groupId });
+                            setGroupInputValue(groupId ? (groupsMap.get(groupId)?.label ?? "") : "");
+                        }, children: [_jsx(ComboboxInput, { placeholder: merged.selectPlaceholder, showClear: !!value.groupId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.noGroups }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                const group = groupsMap.get(id);
+                                                if (!group)
+                                                    return null;
+                                                return _jsx(SharedRoomGroupItem, { group: group }, group.id);
+                                            } }) })] })] })) : null] }), _jsx(Sheet, { open: createSheetOpen, onOpenChange: setCreateSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "default", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: merged.createSheetTitle }) }), _jsx(SheetBody, { children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "shared-room-group-label", children: merged.groupLabel }), _jsx(Input, { id: "shared-room-group-label", value: draftGroupLabel, onChange: (event) => setDraftGroupLabel(event.target.value), placeholder: merged.groupLabelPlaceholder }), _jsx("p", { className: "text-xs text-muted-foreground", children: merged.createHint })] }) }), _jsxs(SheetFooter, { children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => setCreateSheetOpen(false), children: messages.common.cancel }), _jsx(Button, { type: "button", onClick: saveCreateLabel, children: merged.createAction })] })] }) })] }));
+}
+function SharedRoomGroupItem({ group }) {
+    return (_jsx(ComboboxItem, { value: group.id, children: _jsx("span", { className: "truncate font-medium", children: group.label }) }));
 }

package/dist/components/traveler-list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"traveler-list.d.ts","sourceRoot":"","sources":["../../src/components/traveler-list.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,EAAE,iBAAiB,2CA+HhF"}
+{"version":3,"file":"traveler-list.d.ts","sourceRoot":"","sources":["../../src/components/traveler-list.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,UAAkB,EAAE,EAAE,iBAAiB,2CAqIhF"}

package/dist/components/traveler-list.js

@@ -4,7 +4,7 @@ import { useBookingTravelerDocuments, useRevealTraveler, useTravelerMutation, us
 import { Button, Card, CardContent, CardHeader, CardTitle } from "@voyantjs/ui/components";
 import { Eye, EyeOff, Loader2, Pencil, Plus, Trash2, Users } from "lucide-react";
 import * as React from "react";
-import { useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
+import { formatMessage, useBookingsUiMessagesOrDefault } from "../i18n/provider.js";
 import { TravelerDialog } from "./traveler-dialog.js";
 export function TravelerList({ bookingId, autoReveal = false }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);
@@ -47,7 +47,7 @@ export function TravelerList({ bookingId, autoReveal = false }) {
     return (_jsxs(Card, { "data-slot": "traveler-list", children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Users, { className: "h-4 w-4" }), messages.travelerList.title] }), _jsxs(Button, { size: "sm", onClick: () => {
                             setEditing(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.travelerList.addTraveler] })] }), _jsx(CardContent, { children: travelers.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.travelerList.empty })) : (_jsx("div", { className: "overflow-x-auto rounded border bg-background", children: _jsxs("table", { className: "w-full min-w-[980px] text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.name }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.email }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.phone }), _jsx("th", { className: "p-2 text-left font-medium", children: "Role" }), _jsx("th", { className: "p-2 text-left font-medium", children: "DOB / age" }), _jsx("th", { className: "p-2 text-left font-medium", children: "Documents" }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: travelers.map((traveler) => (_jsx(TravelerRow, { bookingId: bookingId, traveler: traveler, documents: documentsByTraveler.get(traveler.id) ?? [], revealed: autoReveal || revealedIds.has(traveler.id), onToggleReveal: autoReveal || allAlreadyRevealed ? undefined : () => toggleReveal(traveler.id), emailUnavailable: messages.travelerList.values.emailUnavailable, phoneUnavailable: messages.travelerList.values.phoneUnavailable, onEdit: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), messages.travelerList.addTraveler] })] }), _jsx(CardContent, { children: travelers.length === 0 ? (_jsx("p", { className: "py-4 text-center text-sm text-muted-foreground", children: messages.travelerList.empty })) : (_jsx("div", { className: "overflow-x-auto rounded border bg-background", children: _jsxs("table", { className: "w-full min-w-[980px] text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.name }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.email }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.phone }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.role }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.dobAge }), _jsx("th", { className: "p-2 text-left font-medium", children: messages.travelerList.columns.documents }), _jsx("th", { className: "w-20 p-2" })] }) }), _jsx("tbody", { children: travelers.map((traveler) => (_jsx(TravelerRow, { bookingId: bookingId, traveler: traveler, documents: documentsByTraveler.get(traveler.id) ?? [], revealed: autoReveal || revealedIds.has(traveler.id), onToggleReveal: autoReveal || allAlreadyRevealed ? undefined : () => toggleReveal(traveler.id), emailUnavailable: messages.travelerList.values.emailUnavailable, phoneUnavailable: messages.travelerList.values.phoneUnavailable, onEdit: () => {
                                         setEditing(traveler);
                                         setDialogOpen(true);
                                     }, onDelete: () => {
@@ -69,6 +69,7 @@ export function TravelerList({ bookingId, autoReveal = false }) {
  * the server, so toggling the eye button creates a permanent record.
  */
 function TravelerRow({ bookingId, traveler, documents, revealed, onToggleReveal, emailUnavailable, phoneUnavailable, onEdit, onDelete, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     const reveal = useRevealTraveler(bookingId, traveler.id, { enabled: revealed });
     // Use the revealed copy when available; otherwise fall back to
     // the masked row from the list endpoint. This keeps the UI snappy
@@ -79,29 +80,39 @@ function TravelerRow({ bookingId, traveler, documents, revealed, onToggleReveal,
     const travelDetails = revealed && revealedTraveler ? revealedTraveler.travelDetails : null;
     const showLoading = revealed && reveal.isLoading;
     const revealError = revealed && reveal.error;
-    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: "border-b", children: [_jsx("td", { className: "p-2", children: showLoading ? (_jsx(RowLoading, {})) : (`${display.firstName ?? ""} ${display.lastName ?? ""}`.trim()) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.email ?? emailUnavailable) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.phone ?? phoneUnavailable) }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [display.isPrimary ? _jsx(MiniPill, { children: "Primary" }) : null, travelDetails?.isLeadTraveler ? _jsx(MiniPill, { children: "Lead" }) : null, display.travelerCategory ? _jsx(MiniPill, { children: display.travelerCategory }) : null] }) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : formatDobAge(travelDetails?.dateOfBirth) }), _jsx("td", { className: "p-2", children: documents.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [documents.slice(0, 2).map((document) => (_jsx(MiniPill, { children: document.type.replaceAll("_", " ") }, document.id))), documents.length > 2 ? _jsxs(MiniPill, { children: ["+", documents.length - 2] }) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }), _jsxs("td", { className: "p-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [onToggleReveal ? (_jsx("button", { type: "button", onClick: onToggleReveal, className: "text-muted-foreground hover:text-foreground", title: revealed ? "Hide details" : "Reveal contact details", "aria-label": revealed ? "Hide traveler contact details" : "Reveal traveler contact details", children: revealed ? _jsx(EyeOff, { className: "h-3.5 w-3.5" }) : _jsx(Eye, { className: "h-3.5 w-3.5" }) })) : null, _jsx("button", { type: "button", onClick: onEdit, className: "text-muted-foreground hover:text-foreground", "aria-label": "Edit traveler", children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "text-muted-foreground hover:text-destructive", "aria-label": "Delete traveler", children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), revealError ? (_jsx("div", { className: "mt-1 text-[10px] text-destructive", children: revealError instanceof Error ? revealError.message : "Reveal failed" })) : null] })] }), _jsx("tr", { className: "border-b last:border-b-0", children: _jsx("td", { colSpan: 7, className: "bg-muted/20 px-2 py-3", children: _jsx(TravelerContextGrid, { traveler: display, travelDetails: travelDetails, documents: documents, loading: showLoading }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { className: "border-b", children: [_jsx("td", { className: "p-2", children: showLoading ? (_jsx(RowLoading, {})) : (`${display.firstName ?? ""} ${display.lastName ?? ""}`.trim()) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.email ?? emailUnavailable) }), _jsx("td", { className: "p-2", children: showLoading ? _jsx(RowLoading, {}) : (display.phone ?? phoneUnavailable) }), _jsx("td", { className: "p-2", children: _jsxs("div", { className: "flex flex-wrap gap-1.5", children: [display.isPrimary ? _jsx(MiniPill, { children: messages.travelerList.roles.primary }) : null, travelDetails?.isLeadTraveler ? (_jsx(MiniPill, { children: messages.travelerList.roles.lead })) : null, display.travelerCategory ? _jsx(MiniPill, { children: display.travelerCategory }) : null] }) }), _jsx("td", { className: "p-2", children: showLoading ? (_jsx(RowLoading, {})) : (formatDobAge(travelDetails?.dateOfBirth, messages.travelerList.values.fieldUnavailable)) }), _jsx("td", { className: "p-2", children: documents.length > 0 ? (_jsxs("div", { className: "flex flex-wrap gap-1.5", children: [documents.slice(0, 2).map((document) => (_jsx(MiniPill, { children: document.type.replaceAll("_", " ") }, document.id))), documents.length > 2 ? _jsxs(MiniPill, { children: ["+", documents.length - 2] }) : null] })) : (_jsx("span", { className: "text-muted-foreground", children: messages.travelerList.values.documentsUnavailable })) }), _jsxs("td", { className: "p-2", children: [_jsxs("div", { className: "flex items-center gap-1", children: [onToggleReveal ? (_jsx("button", { type: "button", onClick: onToggleReveal, className: "text-muted-foreground hover:text-foreground", title: revealed
+                                            ? messages.travelerList.actions.hideContactDetails
+                                            : messages.travelerList.actions.revealContactDetails, "aria-label": revealed
+                                            ? messages.travelerList.actions.hideTravelerContactDetails
+                                            : messages.travelerList.actions.revealTravelerContactDetails, children: revealed ? _jsx(EyeOff, { className: "h-3.5 w-3.5" }) : _jsx(Eye, { className: "h-3.5 w-3.5" }) })) : null, _jsx("button", { type: "button", onClick: onEdit, className: "text-muted-foreground hover:text-foreground", "aria-label": messages.travelerList.actions.editTraveler, children: _jsx(Pencil, { className: "h-3.5 w-3.5" }) }), _jsx("button", { type: "button", onClick: onDelete, className: "text-muted-foreground hover:text-destructive", "aria-label": messages.travelerList.actions.deleteTraveler, children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })] }), revealError ? (_jsx("div", { className: "mt-1 text-[10px] text-destructive", children: revealError instanceof Error
+                                    ? revealError.message
+                                    : messages.travelerList.validation.revealFailed })) : null] })] }), _jsx("tr", { className: "border-b last:border-b-0", children: _jsx("td", { colSpan: 7, className: "bg-muted/20 px-2 py-3", children: _jsx(TravelerContextGrid, { traveler: display, travelDetails: travelDetails, documents: documents, loading: showLoading }) }) })] }));
 }
 function RowLoading() {
-    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), _jsx("span", { className: "text-xs", children: "Decrypting\u2026" })] }));
+    const messages = useBookingsUiMessagesOrDefault();
+    return (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [_jsx(Loader2, { className: "h-3 w-3 animate-spin" }), _jsx("span", { className: "text-xs", children: messages.travelerList.loading.decrypting })] }));
 }
 function TravelerContextGrid({ traveler, travelDetails, documents, loading, }) {
+    const messages = useBookingsUiMessagesOrDefault();
     if (loading)
         return _jsx(RowLoading, {});
     const fields = [
-        ["Nationality", travelDetails?.nationality],
-        ["Passport", travelDetails?.passportNumber],
-        ["Passport expiry", formatDateValue(travelDetails?.passportExpiry)],
-        ["Language", traveler.preferredLanguage],
-        ["Dietary", travelDetails?.dietaryRequirements],
-        ["Accessibility", travelDetails?.accessibilityNeeds],
-        ["Special requests", traveler.specialRequests],
-        ["Notes", traveler.notes],
+        [messages.travelerList.context.nationality, travelDetails?.nationality],
+        [messages.travelerList.context.passport, travelDetails?.passportNumber],
+        [messages.travelerList.context.passportExpiry, formatDateValue(travelDetails?.passportExpiry)],
+        [messages.travelerList.context.language, traveler.preferredLanguage],
+        [messages.travelerList.context.dietary, travelDetails?.dietaryRequirements],
+        [messages.travelerList.context.accessibility, travelDetails?.accessibilityNeeds],
+        [messages.travelerList.context.specialRequests, traveler.specialRequests],
+        [messages.travelerList.context.notes, traveler.notes],
     ];
     const visibleFields = fields.filter(([, value]) => Boolean(value));
     if (visibleFields.length === 0 && documents.length === 0) {
-        return _jsx("span", { className: "text-xs text-muted-foreground", children: "No additional traveler context" });
+        return (_jsx("span", { className: "text-xs text-muted-foreground", children: messages.travelerList.values.noAdditionalContext }));
     }
-    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [visibleFields.map(([label, value]) => (_jsx(DetailField, { label: label, value: value ?? "-" }, label))), documents.map((document) => (_jsx(DetailField, { label: `Document · ${document.type.replaceAll("_", " ")}`, value: document.fileName }, document.id)))] }));
+    return (_jsxs("div", { className: "grid gap-3 md:grid-cols-4", children: [visibleFields.map(([label, value]) => (_jsx(DetailField, { label: label, value: value ?? messages.travelerList.values.fieldUnavailable }, label))), documents.map((document) => (_jsx(DetailField, { label: formatMessage(messages.travelerList.context.documentLabel, {
+                    type: document.type.replaceAll("_", " "),
+                }), value: document.fileName }, document.id)))] }));
 }
 function DetailField({ label, value }) {
     return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "text-[10px] font-medium uppercase text-muted-foreground", children: label }), _jsx("div", { className: "truncate text-xs text-foreground", children: value })] }));
@@ -109,9 +120,9 @@ function DetailField({ label, value }) {
 function MiniPill({ children }) {
     return (_jsx("span", { className: "inline-flex h-5 items-center rounded-full border px-2 text-[11px] capitalize text-muted-foreground", children: children }));
 }
-function formatDobAge(value) {
+function formatDobAge(value, unavailable) {
     if (!value)
-        return "-";
+        return unavailable;
     const date = new Date(value);
     if (Number.isNaN(date.getTime()))
         return value;