@voyantjs/bookings-ui 0.52.1 → 0.52.2

package/dist/components/travelers-section.js

@@ -1,17 +1,115 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePeople, usePerson } from "@voyantjs/crm-react";
+import { usePeople, usePerson, usePersonRelationships, } 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 { Button, 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 { Pencil, 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 { personId: null, firstName: "", lastName: "", email: "", role, roomUnitId: null };
+    return {
+        personId: null,
+        firstName: "",
+        lastName: "",
+        email: "",
+        phone: "",
+        preferredLanguage: "",
+        role,
+        dateOfBirth: null,
+        roomUnitId: null,
+    };
+}
+/**
+ * Compute integer age in full years from an ISO date-of-birth string.
+ * Returns null when the DOB is missing or unparseable.
+ */
+export function computeAgeYears(dob, now = new Date()) {
+    if (!dob)
+        return null;
+    const birth = new Date(dob);
+    if (Number.isNaN(birth.getTime()))
+        return null;
+    let age = now.getFullYear() - birth.getFullYear();
+    const beforeBirthday = now.getMonth() < birth.getMonth() ||
+        (now.getMonth() === birth.getMonth() && now.getDate() < birth.getDate());
+    if (beforeBirthday)
+        age -= 1;
+    return age >= 0 ? age : null;
+}
+/**
+ * Derive the age-banded traveler role from DOB. Falls back to `adult`
+ * when DOB is missing so partial entries still typecheck downstream.
+ *
+ * Thresholds:
+ *   - infant: < 2
+ *   - child:  2 – 17
+ *   - adult:  18+
+ */
+export function deriveTravelerRoleFromDob(dob) {
+    const age = computeAgeYears(dob);
+    if (age == null)
+        return "adult";
+    if (age < 2)
+        return "infant";
+    if (age < 18)
+        return "child";
+    return "adult";
+}
+/**
+ * Find the unit whose `[minAge, maxAge]` window contains the given
+ * DOB-derived age. Returns the unit id, or null if no match (or DOB
+ * unset). Person-typed units are preferred; everything else is
+ * ignored. Caller falls back to a default unit when null.
+ */
+function matchUnitByDob(units, dob) {
+    if (!dob)
+        return null;
+    const age = computeAgeYears(dob);
+    if (age == null)
+        return null;
+    const personUnits = units.filter((u) => u.unitType == null || u.unitType === "person");
+    const match = personUnits.find((u) => (u.minAge == null || age >= u.minAge) && (u.maxAge == null || age <= u.maxAge));
+    return match?.unitId ?? null;
+}
+/**
+ * The Room dropdown lists one item per option (keyed by the option's
+ * primary/ADULT unit id), but a traveler's `roomUnitId` can point at any
+ * age-banded unit within that option. Map the traveler's specific unit
+ * back to the dropdown's primary key so the Select value matches an
+ * existing item — otherwise base-ui falls back to rendering the raw id.
+ */
+function mapUnitIdToGroupPrimary(unitId, roomGroups) {
+    if (!unitId)
+        return null;
+    if (!roomGroups)
+        return unitId;
+    const group = roomGroups.find((g) => g.primaryUnitId === unitId || g.units.some((u) => u.unitId === unitId));
+    return group?.primaryUnitId ?? unitId;
+}
+/**
+ * When the operator changes the Room dropdown, preserve the traveler's
+ * current category code (Adult/Child/Senior/…) in the destination option
+ * if it offers a matching unit. Falls back to the destination's primary
+ * unit when no match exists or the previous unit has no code.
+ */
+function pickUnitForRoomChange(currentUnitId, nextRoomPrimaryId, roomGroups) {
+    if (!roomGroups)
+        return nextRoomPrimaryId;
+    const nextGroup = roomGroups.find((g) => g.primaryUnitId === nextRoomPrimaryId);
+    if (!nextGroup)
+        return nextRoomPrimaryId;
+    if (!currentUnitId)
+        return nextGroup.primaryUnitId;
+    const prevGroup = roomGroups.find((g) => g.primaryUnitId === currentUnitId || g.units.some((u) => u.unitId === currentUnitId));
+    const prevUnit = prevGroup?.units.find((u) => u.unitId === currentUnitId);
+    const prevCode = (prevUnit?.unitCode ?? "").toLowerCase();
+    if (!prevCode)
+        return nextGroup.primaryUnitId;
+    const sameCategory = nextGroup.units.find((u) => (u.unitCode ?? "").toLowerCase() === prevCode);
+    return sameCategory?.unitId ?? nextGroup.primaryUnitId;
 }
 const NO_ROOM = "__unassigned__";
 /**
@@ -31,18 +129,12 @@ const NO_ROOM = "__unassigned__";
  *    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, billingPersonId, labels, }) {
+export function TravelersSection({ value, onChange, roomUnits, roomGroups, 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,
-        child: merged.roleChild,
-        infant: merged.roleInfant,
-    };
     const updateAt = (index, patch) => {
         const next = value.travelers.map((traveler, i) => i === index ? { ...traveler, ...patch } : traveler);
         onChange({ travelers: next });
@@ -50,35 +142,117 @@ export function TravelersSection({ value, onChange, roomUnits, billingPersonId,
     const removeAt = (index) => {
         onChange({ travelers: value.travelers.filter((_, i) => i !== index) });
     };
+    // Auto-pick a room with seats available so operators don't have to
+    // hunt for the dropdown on every traveler — they can still override
+    // manually via the Room select. Picks the first option (ordering
+    // mirrors the upstream `roomUnits` array, which comes from the
+    // stepper in catalog order). When `roomGroups` is wired and the
+    // traveler has DOB, also pre-pick the matching age-banded unit
+    // within that option so the Category buttons land on the right row.
+    const pickRoomUnitIdForNewTraveler = (dateOfBirth = null) => {
+        if (!roomUnits || roomUnits.length === 0)
+            return null;
+        const pickedRoom = roomUnits.find((unit) => unit.remainingCapacity > 0)?.unitId ?? roomUnits[0]?.unitId ?? null;
+        if (!pickedRoom || !roomGroups || roomGroups.length === 0)
+            return pickedRoom;
+        const group = roomGroups.find((g) => g.primaryUnitId === pickedRoom || g.units.some((u) => u.unitId === pickedRoom));
+        if (!group)
+            return pickedRoom;
+        return matchUnitByDob(group.units, dateOfBirth) ?? group.primaryUnitId;
+    };
     const addRow = () => {
         // First traveler defaults to `lead` so the operator doesn't have to
         // remember to flip the role on the initial row.
         const role = value.travelers.length === 0 ? "lead" : "adult";
-        onChange({ travelers: [...value.travelers, createBlankTraveler(role)] });
+        const blank = createBlankTraveler(role);
+        onChange({
+            travelers: [...value.travelers, { ...blank, roomUnitId: pickRoomUnitIdForNewTraveler(null) }],
+        });
     };
     const addBillingPerson = () => {
         if (!billingPerson.data)
             return;
         const role = value.travelers.length === 0 ? "lead" : "adult";
+        const traveler = createTravelerFromPerson(billingPerson.data, role);
         onChange({
-            travelers: [...value.travelers, createTravelerFromPerson(billingPerson.data, role)],
+            travelers: [
+                ...value.travelers,
+                { ...traveler, roomUnitId: pickRoomUnitIdForNewTraveler(traveler.dateOfBirth) },
+            ],
+        });
+    };
+    const addRelatedPersonTraveler = (person) => {
+        const role = value.travelers.length === 0 ? "lead" : "adult";
+        const traveler = createTravelerFromPerson(person, role);
+        onChange({
+            travelers: [
+                ...value.travelers,
+                { ...traveler, roomUnitId: pickRoomUnitIdForNewTraveler(traveler.dateOfBirth) },
+            ],
         });
     };
     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, {
+    // Relationships of the billing person — surfaced as one-click "add as
+    // traveler" chips so the operator can populate family/companions
+    // without searching for them in the picker.
+    const relationshipsQuery = usePersonRelationships(billingPersonId ?? undefined, {
+        enabled: Boolean(billingPersonId),
+    });
+    const alreadyAddedIds = React.useMemo(() => new Set(value.travelers.map((t) => t.personId).filter(Boolean)), [value.travelers]);
+    const relatedPersonIds = React.useMemo(() => {
+        if (!billingPersonId)
+            return [];
+        const seen = new Set();
+        const out = [];
+        for (const rel of relationshipsQuery.data?.data ?? []) {
+            const otherId = rel.fromPersonId === billingPersonId ? rel.toPersonId : rel.fromPersonId;
+            if (seen.has(otherId) || alreadyAddedIds.has(otherId))
+                continue;
+            seen.add(otherId);
+            out.push({ id: otherId, kind: rel.kind });
+        }
+        return out;
+    }, [billingPersonId, relationshipsQuery.data?.data, alreadyAddedIds]);
+    // base-ui's Select reads labels via the `items` prop — without it,
+    // <SelectValue /> falls back to the raw value (the unit id). Memoize
+    // once for all rows so identity is stable across renders.
+    const roomSelectItems = React.useMemo(() => [
+        { label: merged.noRoom, value: NO_ROOM },
+        ...(roomUnits ?? []).map((unit) => ({ label: unit.unitName, value: unit.unitId })),
+    ], [roomUnits, merged.noRoom]);
+    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, relatedPersonIds.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs text-muted-foreground", children: merged.relatedPeopleHeading }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: relatedPersonIds.map((rel) => (_jsx(RelatedPersonChip, { personId: rel.id, kind: rel.kind, addLabel: merged.addRelatedPerson, onAdd: addRelatedPersonTraveler }, rel.id))) })] })) : 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))) }))] }));
+                                phone: person.phone ?? "",
+                                preferredLanguage: person.preferredLanguage ?? "",
+                                dateOfBirth: person.dateOfBirth ?? null,
+                            }), onClear: () => updateAt(index, {
+                                personId: null,
+                                firstName: "",
+                                lastName: "",
+                                email: "",
+                                phone: "",
+                                preferredLanguage: "",
+                                dateOfBirth: null,
+                            }) }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsx(TravelerCategoryButtons, { traveler: traveler, roomGroups: roomGroups, fallbackLabels: {
+                                        category: merged.category,
+                                        adult: merged.roleAdult,
+                                        child: merged.roleChild,
+                                        infant: merged.roleInfant,
+                                    }, onPickUnit: (unitId, nextRole) => updateAt(index, { roomUnitId: unitId, role: nextRole }) }), roomUnits && roomUnits.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: merged.room }), _jsxs(Select, { items: roomSelectItems, value: mapUnitIdToGroupPrimary(traveler.roomUnitId, roomGroups) ?? NO_ROOM, onValueChange: (v) => updateAt(index, {
+                                                roomUnitId: v === NO_ROOM || !v
+                                                    ? null
+                                                    : pickUnitForRoomChange(traveler.roomUnitId, v, roomGroups),
+                                            }), 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, 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("");
+    // One Sheet serves both flows: create when there's no selected person,
+    // edit when the operator clicks the Edit button on a selected one.
+    const [sheetMode, setSheetMode] = React.useState("create");
     const [sheetOpen, setSheetOpen] = React.useState(false);
     const peopleQuery = usePeople({ search: search || undefined, limit: 20 });
     const selectedPersonQuery = usePerson(personId ?? undefined, { enabled: Boolean(personId) });
@@ -98,7 +272,18 @@ function TravelerPersonPicker({ personId, labels, pinnedPeople = [], onSelect, o
         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) => {
+    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("div", { className: "flex items-center gap-1", children: [personId ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", disabled: !selectedPersonQuery.data, onClick: () => {
+                                    setSheetMode("edit");
+                                    setSheetOpen(true);
+                                }, children: [_jsx(Pencil, { className: "mr-1 h-3.5 w-3.5" }), labels.editPerson] })) : null, _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => {
+                                    setSheetMode("create");
+                                    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, 
+                // `itemToStringLabel` drives BOTH the filter pass and the
+                // input display. Without it, base-ui falls back to the raw
+                // value (a `pers_…` typeid), so typing "eliza" matches
+                // nothing and the trigger shows the id instead of the name.
+                itemToStringLabel: (id) => formatPerson(peopleMap.get(id)) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
                     setInputValue(next);
                     setSearch(next);
                     if (!next)
@@ -113,19 +298,30 @@ function TravelerPersonPicker({ personId, labels, pinnedPeople = [], onSelect, o
                                         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) => {
+                                    } }) })] })] }), _jsx(Sheet, { open: sheetOpen, onOpenChange: setSheetOpen, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: sheetMode === "edit" ? labels.editPersonSheetTitle : labels.createPersonSheetTitle }) }), _jsx(SheetBody, { children: _jsx(PersonForm, { mode: sheetMode === "edit" && selectedPersonQuery.data
+                                    ? { kind: "edit", person: selectedPersonQuery.data }
+                                    : { kind: "create" }, onCancel: () => setSheetOpen(false), onSuccess: (saved) => {
                                     onSelect(saved);
                                     setInputValue(formatPerson(saved));
                                     setSheetOpen(false);
                                 } }) })] }) })] }));
 }
 function createTravelerFromPerson(person, role) {
+    // DOB drives age-banded pricing — hydrate from the person record so
+    // the operator doesn't have to re-enter it on every booking. The
+    // caller's `role` still wins (e.g. "lead" on the first traveler) so
+    // the booking-lead flag isn't clobbered by the age-derived category.
+    const dateOfBirth = person.dateOfBirth ?? null;
+    const effectiveRole = role === "lead" ? "lead" : deriveTravelerRoleFromDob(dateOfBirth);
     return {
         personId: person.id,
         firstName: person.firstName,
         lastName: person.lastName,
         email: person.email ?? "",
-        role,
+        phone: person.phone ?? "",
+        preferredLanguage: person.preferredLanguage ?? "",
+        role: effectiveRole,
+        dateOfBirth,
         roomUnitId: null,
     };
 }
@@ -140,3 +336,74 @@ function formatPerson(person) {
     const name = formatPersonName(person);
     return person.email ? `${name} · ${person.email}` : name;
 }
+/**
+ * Dynamic category-button group. Reads the product's actual
+ * person-typed option_units (Adult/Child/Senior, Adult/Child/Infant,
+ * Adult/Senior, etc) from `roomGroups` and renders one button per
+ * unit in the traveler's currently-assigned option.
+ *
+ * Falls back to the old static Adult/Child/Infant buttons when the
+ * parent hasn't wired `roomGroups` (during the brief window before a
+ * product is selected, or in legacy callers that don't pass the prop).
+ */
+function TravelerCategoryButtons({ traveler, roomGroups, fallbackLabels, onPickUnit, }) {
+    const group = React.useMemo(() => {
+        if (!roomGroups || !traveler.roomUnitId)
+            return undefined;
+        return roomGroups.find((g) => g.primaryUnitId === traveler.roomUnitId ||
+            g.units.some((u) => u.unitId === traveler.roomUnitId));
+    }, [roomGroups, traveler.roomUnitId]);
+    // Surface only person-typed units (Adult, Child, Senior, Infant,
+    // …). Vehicles / rooms / services aren't categories the operator
+    // toggles on a per-traveler basis. If the option has only one
+    // person-typed unit (e.g. a "per-person" tour with no age bands),
+    // there's nothing to choose, so the buttons collapse.
+    const categoryUnits = React.useMemo(() => {
+        if (!group)
+            return [];
+        return group.units.filter((u) => u.unitType == null || u.unitType === "person");
+    }, [group]);
+    if (group && categoryUnits.length <= 1) {
+        // Single person-typed unit — no category choice to make.
+        return null;
+    }
+    if (!group || categoryUnits.length === 0) {
+        // Fallback to the static set so the row still renders before a
+        // product/option is selected. Editing here writes the legacy
+        // `role` field only; once roomGroups arrive the buttons re-render
+        // and bind to actual unit ids.
+        return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: fallbackLabels.category }), _jsx("div", { className: "grid grid-cols-3 gap-1", children: [
+                        ["adult", fallbackLabels.adult],
+                        ["child", fallbackLabels.child],
+                        ["infant", fallbackLabels.infant],
+                    ].map(([category, label]) => {
+                        const active = traveler.role === category;
+                        const nextRole = traveler.role === "lead" && category === "adult" ? "lead" : category;
+                        return (_jsx(Button, { type: "button", size: "sm", variant: active ? "default" : "outline", className: "h-7 text-xs", onClick: () => onPickUnit(traveler.roomUnitId, nextRole), children: label }, category));
+                    }) })] }));
+    }
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs", children: fallbackLabels.category }), _jsx("div", { className: "grid gap-1", style: { gridTemplateColumns: `repeat(${categoryUnits.length}, minmax(0, 1fr))` }, children: categoryUnits.map((unit) => {
+                    const active = traveler.roomUnitId === unit.unitId;
+                    // Keep the lead flag when the operator clicks the ADULT-coded
+                    // unit (or one whose age band covers adults); otherwise the
+                    // traveler's role tracks the unit code/name for the submit
+                    // path's travelerCategory mapping.
+                    const codeLower = (unit.unitCode ?? "").toLowerCase();
+                    const inferredRole = codeLower === "child" ? "child" : codeLower === "infant" ? "infant" : "adult";
+                    const nextRole = traveler.role === "lead" && inferredRole === "adult" ? "lead" : inferredRole;
+                    return (_jsx(Button, { type: "button", size: "sm", variant: active ? "default" : "outline", className: "h-7 text-xs", onClick: () => onPickUnit(unit.unitId, nextRole), title: unit.minAge != null || unit.maxAge != null
+                            ? `${unit.minAge ?? "0"}–${unit.maxAge ?? "∞"}`
+                            : undefined, children: unit.unitName }, unit.unitId));
+                }) })] }));
+}
+function RelatedPersonChip({ personId, kind, addLabel, onAdd, }) {
+    const messages = useBookingsUiMessagesOrDefault();
+    const kindLabels = messages.travelersSection.relationshipKindLabels;
+    const query = usePerson(personId);
+    const person = query.data;
+    if (!person)
+        return null;
+    const name = formatPersonName(person) || personId;
+    const kindLabel = kindLabels[kind] ?? kind;
+    return (_jsxs(Button, { type: "button", size: "sm", variant: "outline", className: "h-7 gap-1.5", onClick: () => onAdd(person), "aria-label": addLabel, children: [_jsx(UserPlus, { className: "h-3.5 w-3.5" }), _jsx("span", { className: "text-xs", children: name }), _jsx("span", { className: "rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground", children: kindLabel })] }));
+}

package/dist/i18n/en.d.ts

@@ -357,6 +357,10 @@ export declare const bookingsUiEn: {
             createNewOrganization: string;
             createPersonSheetTitle: string;
             createOrganizationSheetTitle: string;
+            editPerson: string;
+            editOrganization: string;
+            editPersonSheetTitle: string;
+            editOrganizationSheetTitle: string;
             selectExistingPerson: string;
             personSearchPlaceholder: string;
             personSelectPlaceholder: string;
@@ -383,6 +387,8 @@ export declare const bookingsUiEn: {
             lastName: string;
             email: string;
             role: string;
+            category: string;
+            dateOfBirth: string;
             roleLead: string;
             roleAdult: string;
             roleChild: string;
@@ -396,7 +402,24 @@ export declare const bookingsUiEn: {
             personEmpty: string;
             createNewPerson: string;
             createPersonSheetTitle: string;
+            editPerson: string;
+            editPersonSheetTitle: string;
             addBillingPerson: string;
+            relatedPeopleHeading: string;
+            addRelatedPerson: string;
+        };
+        relationshipKindLabels: {
+            spouse: string;
+            partner: string;
+            parent: string;
+            child: string;
+            sibling: string;
+            guardian: string;
+            ward: string;
+            emergency_contact: string;
+            friend: string;
+            travel_companion: string;
+            other: string;
         };
     };
     paymentScheduleSection: {
@@ -794,6 +817,9 @@ export declare const bookingsUiEn: {
         };
         actions: {
             deleteConfirm: string;
+            issueDocument: string;
+            issueInvoice: string;
+            issueProforma: string;
         };
     };
     supplierStatusList: {
@@ -858,6 +884,24 @@ export declare const bookingsUiEn: {
             confirm: string;
         };
     };
+    bookingBillingDialog: {
+        title: string;
+        fields: {
+            firstName: string;
+            lastName: string;
+            email: string;
+            phone: string;
+            address: string;
+            city: string;
+            region: string;
+            postalCode: string;
+            country: string;
+        };
+        actions: {
+            cancel: string;
+            save: string;
+        };
+    };
     bookingGuaranteeDialog: {
         titles: {
             create: string;
@@ -998,6 +1042,10 @@ export declare const bookingsUiEn: {
             internalNotes: string;
             confirmAfterCreate: string;
             confirmAfterCreateHint: string;
+            createAsDraft: string;
+            createAsDraftHint: string;
+            notifyTraveler: string;
+            notifyTravelerHint: string;
         };
         placeholders: {
             departure: string;
@@ -1017,6 +1065,8 @@ export declare const bookingsUiEn: {
         };
         actions: {
             createDraftBooking: string;
+            createConfirmedBooking: string;
+            createAwaitingPaymentBooking: string;
         };
         labels: {
             currency: string;
@@ -1025,6 +1075,7 @@ export declare const bookingsUiEn: {
             createNewPerson: string;
             selectExistingPerson: string;
             organizationNone: string;
+            billingHeading: string;
             addTraveler: string;
             travelerHeading: string;
             travelerRole: string;
@@ -1062,6 +1113,15 @@ export declare const bookingsUiEn: {
             voucherRemainingLabel: string;
             voucherInvalidLabel: string;
             paymentHeading: string;
+            previewHeading: string;
+            previewEmpty: string;
+            previewProduct: string;
+            previewDeparture: string;
+            previewOptions: string;
+            previewTravelers: string;
+            previewTotal: string;
+            previewLoading: string;
+            previewTravelerUnnamed: string;
             paymentModeUnpaid: string;
             paymentModeFull: string;
             paymentModeAdvance: string;
@@ -1094,6 +1154,9 @@ export declare const bookingsUiEn: {
             breakdownOverrideReason: string;
             breakdownOverrideReasonPlaceholder: string;
             breakdownOverrideReasonRequired: string;
+            breakdownSubtotal: string;
+            breakdownTax: string;
+            breakdownTaxIncluded: string;
         };
     };
     bookingList: {

package/dist/i18n/en.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8sCK,CAAA"}
+{"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/i18n/en.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8wCK,CAAA"}