@voyantjs/bookings-ui 0.50.7 → 0.51.0

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

@@ -1 +1 @@
-{"version":3,"file":"booking-create-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-create-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,aAAa,EAGnB,MAAM,0BAA0B,CAAA;AAsMjC,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,EAAE,wBAAwB,2CAqB1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,gBAAgB,EAChB,OAAc,EACd,QAAQ,GACT,EAAE,sBAAsB,2CAgiBxB"}
+{"version":3,"file":"booking-create-dialog.d.ts","sourceRoot":"","sources":["../../src/components/booking-create-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,aAAa,EAGnB,MAAM,0BAA0B,CAAA;AAsNjC,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,CAAC,EAAE,CAAC,OAAO,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sEAAsE;IACtE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,gBAAgB,GACjB,EAAE,wBAAwB,2CAqB1B;AAED,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,gBAAgB,EAChB,OAAc,EACd,QAAQ,GACT,EAAE,sBAAsB,2CAojBxB"}

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

@@ -115,6 +115,19 @@ function travelersToRows(value) {
         roomUnitId: traveler.roomUnitId,
     }));
 }
+function sameRoomUnits(left, right) {
+    if (left.length !== right.length)
+        return false;
+    return left.every((unit, index) => {
+        const other = right[index];
+        return (other !== undefined &&
+            unit.optionId === other.optionId &&
+            unit.optionUnitId === other.optionUnitId &&
+            unit.unitName === other.unitName &&
+            unit.occupancyMax === other.occupancyMax &&
+            unit.remaining === other.remaining);
+    });
+}
 /**
  * Operator booking-create dialog. Composes the booking-create picker
  * sections — product, departure, rooms, person, shared-room, travelers,
@@ -140,6 +153,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
     });
     const [slotId, setSlotId] = React.useState(null);
     const [rooms, setRooms] = React.useState(emptyRoomsStepperValue);
+    const [roomUnits, setRoomUnits] = React.useState([]);
     const [person, setPerson] = React.useState(emptyPersonPickerValue);
     const [sharedRoom, setSharedRoom] = React.useState(emptySharedRoomValue);
     const [travelers, setTravelers] = React.useState(emptyTravelerListValue);
@@ -165,6 +179,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
             setProduct({ productId: defaultProductId ?? "", optionId: null });
             setSlotId(null);
             setRooms(emptyRoomsStepperValue);
+            setRoomUnits([]);
             setPerson(emptyPersonPickerValue);
             setSharedRoom(emptySharedRoomValue);
             setTravelers(emptyTravelerListValue);
@@ -187,6 +202,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
     React.useEffect(() => {
         setSlotId(null);
         setRooms(emptyRoomsStepperValue);
+        setRoomUnits([]);
         setSharedRoom(emptySharedRoomValue);
     }, [product.productId]);
     const [slotsFromIso, setSlotsFromIso] = React.useState(() => new Date().toISOString());
@@ -223,6 +239,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
     }, [allOpenSlots, product.optionId]);
     React.useEffect(() => {
         setRooms(emptyRoomsStepperValue);
+        setRoomUnits([]);
         if (!slotId || !product.optionId)
             return;
         const selectedSlot = allOpenSlots.find((slot) => slot.id === slotId);
@@ -245,15 +262,18 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
         slotId: slotId ?? undefined,
         enabled: enabled && Boolean(slotId),
     });
+    const handleRoomUnitsChange = React.useCallback((units) => {
+        setRoomUnits((prev) => (sameRoomUnits(prev, units) ? prev : units));
+    }, []);
     const roomUnitOptions = React.useMemo(() => {
-        const units = slotUnitAvailability.data?.data ?? [];
+        const units = roomUnits.length > 0 ? roomUnits : (slotUnitAvailability.data?.data ?? []);
         if (units.length === 0)
             return [];
         return units
             .filter((unit) => (rooms.quantities[unit.optionUnitId] ?? 0) > 0)
             .map((unit) => {
             const qty = rooms.quantities[unit.optionUnitId] ?? 0;
-            const occupancyMax = 1;
+            const occupancyMax = Math.max(1, unit.occupancyMax ?? 1);
             const seats = qty * occupancyMax;
             const assigned = travelers.travelers.filter((traveler) => traveler.roomUnitId === unit.optionUnitId).length;
             return {
@@ -262,13 +282,14 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
                 remainingCapacity: Math.max(0, seats - assigned),
             };
         });
-    }, [slotUnitAvailability.data, rooms.quantities, travelers.travelers]);
+    }, [roomUnits, slotUnitAvailability.data, rooms.quantities, travelers.travelers]);
     // Currency placeholder — used for voucher + payment schedule display.
     // Consumers hooking in real product data should override this by wrapping
     // the component or swapping in their own currency-aware hook.
     const currency = messages.bookingCreateDialog.labels.currency;
     const pricingCurrency = pricing?.currency ?? currency;
     const pricingTotalAmountCents = pricing?.confirmedAmountCents ?? undefined;
+    const roomUnitLabels = React.useMemo(() => Object.fromEntries(roomUnits.map((unit) => [unit.optionUnitId, unit.unitName])), [roomUnits]);
     const createBookingMutation = useBookingCreateMutation();
     const statusMutation = useBookingStatusByIdMutation();
     const handleSubmit = async () => {
@@ -307,7 +328,12 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
                 return;
             }
             const paymentSchedules = paymentScheduleToRows(paymentSchedule, pricingCurrency, confirmedSellAmountCents);
-            const itemLines = itemLinesToRows(rooms.quantities, slotUnitAvailability.data?.data ?? [], pricing);
+            const itemLines = itemLinesToRows(rooms.quantities, roomUnits.length > 0
+                ? roomUnits
+                : (slotUnitAvailability.data?.data ?? []).map((unit) => ({
+                    ...unit,
+                    optionId: product.optionId,
+                })), pricing);
             const travelerRows = travelersToRows(travelers);
             const voucherRedemption = voucher.picked && voucher.picked.remainingAmountCents != null
                 ? {
@@ -384,7 +410,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
     const isSubmitting = createBookingMutation.isPending || statusMutation.isPending;
     return (_jsxs(_Fragment, { children: [_jsxs(DialogBody, { className: "grid gap-4", children: [_jsx(ProductPickerSection, { value: product, onChange: setProduct, enabled: enabled, lockProduct: Boolean(defaultProductId), labels: {
                             optionNone: messages.bookingCreateDialog.labels.noSpecificOption,
-                        } }), product.productId ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: messages.bookingCreateDialog.fields.departure }), _jsxs(Select, { value: slotId ?? "__none__", onValueChange: (v) => setSelectedSlot(v === "__none__" ? null : (v ?? null)), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: messages.bookingCreateDialog.placeholders.departure }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", children: messages.bookingCreateDialog.placeholders.departureNone }), slots.length === 0 ? (_jsx(SelectItem, { value: "__empty__", disabled: true, children: messages.bookingCreateDialog.placeholders.departureEmpty })) : (slots.map((slot) => (_jsx(SelectItem, { value: slot.id, children: formatSlotLabel(slot) }, slot.id))))] })] })] })) : null, product.optionId ? (_jsx(RoomsStepperSection, { value: rooms, onChange: setRooms, slotId: slotId ?? undefined, optionId: product.optionId, enabled: enabled, labels: {
+                        }, showOptionPicker: false }), product.productId ? (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { children: messages.bookingCreateDialog.fields.departure }), _jsxs(Select, { value: slotId ?? "__none__", onValueChange: (v) => setSelectedSlot(v === "__none__" ? null : (v ?? null)), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: messages.bookingCreateDialog.placeholders.departure }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", children: messages.bookingCreateDialog.placeholders.departureNone }), slots.length === 0 ? (_jsx(SelectItem, { value: "__empty__", disabled: true, children: messages.bookingCreateDialog.placeholders.departureEmpty })) : (slots.map((slot) => (_jsx(SelectItem, { value: slot.id, children: formatSlotLabel(slot) }, slot.id))))] })] })] })) : null, product.productId ? (_jsx(RoomsStepperSection, { value: rooms, onChange: setRooms, productId: product.productId, slotId: slotId ?? undefined, optionId: product.optionId, enabled: enabled, onUnitsChange: handleRoomUnitsChange, labels: {
                             heading: messages.bookingCreateDialog.labels.roomsHeading,
                             noOption: messages.bookingCreateDialog.labels.roomsNoOption,
                             noSlot: messages.bookingCreateDialog.labels.roomsNoSlot,
@@ -421,7 +447,7 @@ export function BookingCreateForm({ onCreated, defaultProductId, enabled = true,
                             noRoom: messages.bookingCreateDialog.labels.travelerNoRoom,
                             remove: messages.bookingCreateDialog.labels.travelerRemove,
                             empty: messages.bookingCreateDialog.labels.travelerEmpty,
-                        } })) : null, product.productId ? (_jsx(PriceBreakdownSection, { productId: product.productId, optionId: product.optionId, unitQuantities: rooms.quantities, labels: {
+                        } })) : null, product.productId ? (_jsx(PriceBreakdownSection, { productId: product.productId, optionId: product.optionId, unitQuantities: rooms.quantities, unitLabels: roomUnitLabels, labels: {
                             heading: messages.bookingCreateDialog.labels.breakdownHeading,
                             total: messages.bookingCreateDialog.labels.breakdownTotal,
                             onRequest: messages.bookingCreateDialog.labels.breakdownOnRequest,

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

@@ -8,6 +8,7 @@ export interface DepartureSlotSearchRecord {
     status?: string;
 }
 export interface BookingCreateUnitLineRecord {
+    optionId: string | null;
     optionUnitId: string;
     unitName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"booking-create-utils.d.ts","sourceRoot":"","sources":["../../src/components/booking-create-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE7D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,GAAG,cAAc,CAAC,CAAA;AAEpG,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,2BAA2B;IAC1C,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,KAAK,EAAE,8BAA8B,EAAE,CAAA;CACxC;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAIjG;AAED,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,yBAAyB,GAAG,IAAI,GAAG,SAAS,EACrD,KAAK,EAAE,MAAM,GACZ,OAAO,CAKT;AAED,wBAAgB,yBAAyB,CAAC,KAAK,SAAS,yBAAyB,EAC/E,KAAK,EAAE,SAAS,KAAK,EAAE,EACvB,OAAO,EAAE;IACP,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,GACA,KAAK,EAAE,CAST;AAED,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,KAAK,EAAE,2BAA2B,EAAE,EACpC,OAAO,EAAE,0BAA0B,GAAG,IAAI,GACzC,0BAA0B,EAAE,CAuC9B;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAE7F"}
+{"version":3,"file":"booking-create-utils.d.ts","sourceRoot":"","sources":["../../src/components/booking-create-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAA;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAE7D,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,GAAG,cAAc,CAAC,CAAA;AAEpG,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,MAAM,WAAW,8BAA8B;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,MAAM,WAAW,0BAA0B;IACzC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,KAAK,EAAE,8BAA8B,EAAE,CAAA;CACxC;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhE;AAED,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAIjG;AAED,wBAAgB,0BAA0B,CACxC,OAAO,EAAE,yBAAyB,GAAG,IAAI,GAAG,SAAS,EACrD,KAAK,EAAE,MAAM,GACZ,OAAO,CAKT;AAED,wBAAgB,yBAAyB,CAAC,KAAK,SAAS,yBAAyB,EAC/E,KAAK,EAAE,SAAS,KAAK,EAAE,EACvB,OAAO,EAAE;IACP,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;CACxB,GACA,KAAK,EAAE,CAST;AAED,wBAAgB,eAAe,CAC7B,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAClC,KAAK,EAAE,2BAA2B,EAAE,EACpC,OAAO,EAAE,0BAA0B,GAAG,IAAI,GACzC,0BAA0B,EAAE,CAyC9B;AAED,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,MAAM,GAAG,IAAI,CAE7F"}

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

@@ -28,6 +28,7 @@ export function getBookableDepartureSlots(slots, options) {
         .sort((left, right) => left.startsAt.localeCompare(right.startsAt));
 }
 export function itemLinesToRows(quantities, units, pricing) {
+    const unitsById = new Map(units.map((unit) => [unit.optionUnitId, unit]));
     const unitNames = new Map(units.map((unit) => [unit.optionUnitId, unit.unitName]));
     const pricedLines = new Map((pricing?.lines ?? []).map((line) => [line.unitId, line]));
     const selectedLines = Object.entries(quantities).filter(([, quantity]) => quantity > 0);
@@ -54,6 +55,7 @@ export function itemLinesToRows(quantities, units, pricing) {
         const unitSellAmountCents = pricedLine?.unitAmountCents ??
             (totalSellAmountCents != null ? Math.floor(totalSellAmountCents / quantity) : null);
         return {
+            optionId: unitsById.get(optionUnitId)?.optionId ?? null,
             optionUnitId,
             quantity,
             title: pricedLine?.label ?? unitNames.get(optionUnitId) ?? null,

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

@@ -1 +1 @@
-{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,CAAA;AACjD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEzD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,IAAI,EAAE,gBAAgB,CAAA;IACtB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,SAAS,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,cAK5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAMpC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAA;QACrC,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,MAAM,GACP,EAAE,wBAAwB,2CAiQ1B"}
+{"version":3,"file":"person-picker-section.d.ts","sourceRoot":"","sources":["../../src/components/person-picker-section.tsx"],"names":[],"mappings":"AAiCA,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,KAAK,CAAA;AACjD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,CAAA;AAEzD,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,IAAI,EAAE,gBAAgB,CAAA;IACtB,oCAAoC;IACpC,QAAQ,EAAE,MAAM,CAAA;IAChB,gCAAgC;IAChC,SAAS,EAAE,cAAc,CAAA;IACzB,yCAAyC;IACzC,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;CAC9B;AAED,eAAO,MAAM,cAAc,EAAE,cAK5B,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,iBAMpC,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,MAAM,CAAC,EAAE;QACP,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,YAAY,CAAC,EAAE,MAAM,CAAA;QACrB,kBAAkB,CAAC,EAAE,MAAM,CAAA;QAC3B,eAAe,CAAC,EAAE,MAAM,CAAA;QACxB,qBAAqB,CAAC,EAAE,MAAM,CAAA;QAC9B,sBAAsB,CAAC,EAAE,MAAM,CAAA;QAC/B,4BAA4B,CAAC,EAAE,MAAM,CAAA;QACrC,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,uBAAuB,CAAC,EAAE,MAAM,CAAA;QAChC,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,SAAS,CAAC,EAAE,MAAM,CAAA;QAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;QAC7B,QAAQ,CAAC,EAAE,MAAM,CAAA;QACjB,mBAAmB,CAAC,EAAE,MAAM,CAAA;QAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,KAAK,CAAC,EAAE,MAAM,CAAA;QACd,gBAAgB,CAAC,EAAE,MAAM,CAAA;QACzB,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,6BAA6B,CAAC,EAAE,MAAM,CAAA;QACtC,iBAAiB,CAAC,EAAE,MAAM,CAAA;QAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAC1B,CAAA;CACF;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,EACR,OAAc,EACd,gBAAuB,EACvB,MAAM,GACP,EAAE,wBAAwB,2CA+Q1B"}

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

@@ -29,6 +29,8 @@ export const emptyPersonPickerValue = {
 export function PersonPickerSection({ value, onChange, enabled = true, showOrganization = true, labels, }) {
     const [personSearch, setPersonSearch] = React.useState("");
     const [orgSearch, setOrgSearch] = React.useState("");
+    const cachedPeopleRef = React.useRef(new Map());
+    const cachedOrgsRef = React.useRef(new Map());
     const [personInputValue, setPersonInputValue] = React.useState("");
     const [orgInputValue, setOrgInputValue] = React.useState("");
     const [personSheetOpen, setPersonSheetOpen] = React.useState(false);
@@ -45,11 +47,12 @@ export function PersonPickerSection({ value, onChange, enabled = true, showOrgan
         enabled: enabled && billingTarget === "person" && Boolean(value.personId),
     });
     const people = React.useMemo(() => {
-        const map = new Map();
+        const map = new Map(cachedPeopleRef.current);
         for (const person of peopleData?.data ?? [])
             map.set(person.id, person);
         if (selectedPersonQuery.data)
             map.set(selectedPersonQuery.data.id, selectedPersonQuery.data);
+        cachedPeopleRef.current = map;
         return Array.from(map.values());
     }, [peopleData?.data, selectedPersonQuery.data]);
     const peopleMap = React.useMemo(() => new Map(people.map((person) => [person.id, person])), [people]);
@@ -62,19 +65,20 @@ export function PersonPickerSection({ value, onChange, enabled = true, showOrgan
         enabled: enabled && billingTarget === "organization" && Boolean(value.organizationId),
     });
     const orgs = React.useMemo(() => {
-        const map = new Map();
+        const map = new Map(cachedOrgsRef.current);
         for (const org of orgsData?.data ?? [])
             map.set(org.id, org);
         if (selectedOrgQuery.data)
             map.set(selectedOrgQuery.data.id, selectedOrgQuery.data);
+        cachedOrgsRef.current = map;
         return Array.from(map.values());
     }, [orgsData?.data, selectedOrgQuery.data]);
     const orgsMap = React.useMemo(() => new Map(orgs.map((org) => [org.id, org])), [orgs]);
     const setPerson = (patch) => onChange({ ...value, ...patch });
-    const selectedPersonLabel = value.personId ? formatPerson(peopleMap.get(value.personId)) : "";
-    const selectedOrgLabel = value.organizationId
-        ? (orgsMap.get(value.organizationId)?.name ?? "")
-        : "";
+    const resolvePersonLabel = React.useCallback((personId) => formatPerson(peopleMap.get(personId) ?? cachedPeopleRef.current.get(personId)), [peopleMap]);
+    const resolveOrgLabel = React.useCallback((organizationId) => orgsMap.get(organizationId)?.name ?? cachedOrgsRef.current.get(organizationId)?.name ?? "", [orgsMap]);
+    const selectedPersonLabel = value.personId ? resolvePersonLabel(value.personId) : "";
+    const selectedOrgLabel = value.organizationId ? resolveOrgLabel(value.organizationId) : "";
     React.useEffect(() => {
         if (selectedPersonLabel)
             setPersonInputValue(selectedPersonLabel);
@@ -83,7 +87,7 @@ export function PersonPickerSection({ value, onChange, enabled = true, showOrgan
         if (selectedOrgLabel)
             setOrgInputValue(selectedOrgLabel);
     }, [selectedOrgLabel]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.billTo }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs(Button, { type: "button", variant: billingTarget === "person" ? "default" : "outline", onClick: () => setPerson({ billTo: "person", organizationId: null }), disabled: !enabled, children: [_jsx(User, { className: "mr-2 h-4 w-4" }), merged.billToPerson] }), _jsxs(Button, { type: "button", variant: billingTarget === "organization" ? "default" : "outline", onClick: () => setPerson({ billTo: "organization", personId: "" }), disabled: !enabled || !showOrganization, children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), merged.billToOrganization] })] })] }), billingTarget === "person" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.person, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setPersonSheetOpen(true), disabled: !enabled, children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewPerson] })] }), _jsxs(Combobox, { items: people.map((person) => person.id), value: value.personId || null, inputValue: personInputValue, autoHighlight: true, disabled: !enabled, itemToStringValue: (id) => formatPerson(peopleMap.get(id)), onInputValueChange: (next) => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: merged.billTo }), _jsxs("div", { className: "grid grid-cols-2 gap-2", children: [_jsxs(Button, { type: "button", variant: billingTarget === "person" ? "default" : "outline", onClick: () => setPerson({ billTo: "person", organizationId: null }), disabled: !enabled, children: [_jsx(User, { className: "mr-2 h-4 w-4" }), merged.billToPerson] }), _jsxs(Button, { type: "button", variant: billingTarget === "organization" ? "default" : "outline", onClick: () => setPerson({ billTo: "organization", personId: "" }), disabled: !enabled || !showOrganization, children: [_jsx(Building2, { className: "mr-2 h-4 w-4" }), merged.billToOrganization] })] })] }), billingTarget === "person" ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.person, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setPersonSheetOpen(true), disabled: !enabled, children: [_jsx(UserPlus, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewPerson] })] }), _jsxs(Combobox, { items: people.map((person) => person.id), value: value.personId || null, inputValue: personInputValue, autoHighlight: true, disabled: !enabled, itemToStringLabel: (id) => resolvePersonLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
                             setPersonInputValue(next);
                             setPersonSearch(next);
                             if (!next)
@@ -91,13 +95,13 @@ export function PersonPickerSection({ value, onChange, enabled = true, showOrgan
                         }, onValueChange: (next) => {
                             const personId = next ?? "";
                             setPerson({ personId });
-                            setPersonInputValue(personId ? formatPerson(peopleMap.get(personId)) : "");
+                            setPersonInputValue(personId ? resolvePersonLabel(personId) : "");
                         }, children: [_jsx(ComboboxInput, { placeholder: merged.personSearchPlaceholder, showClear: !!value.personId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.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));
-                                            } }) })] })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.organization, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setOrgSheetOpen(true), disabled: !enabled, children: [_jsx(Building2, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewOrganization] })] }), _jsxs(Combobox, { items: orgs.map((org) => org.id), value: value.organizationId ?? null, inputValue: orgInputValue, autoHighlight: true, disabled: !enabled, itemToStringValue: (id) => orgsMap.get(id)?.name ?? "", onInputValueChange: (next) => {
+                                            } }) })] })] })] })) : (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs(Label, { children: [merged.organization, " ", _jsx("span", { className: "text-destructive", children: "*" })] }), _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7", onClick: () => setOrgSheetOpen(true), disabled: !enabled, children: [_jsx(Building2, { className: "mr-1 h-3.5 w-3.5" }), merged.createNewOrganization] })] }), _jsxs(Combobox, { items: orgs.map((org) => org.id), value: value.organizationId ?? null, inputValue: orgInputValue, autoHighlight: true, disabled: !enabled, itemToStringLabel: (id) => resolveOrgLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
                             setOrgInputValue(next);
                             setOrgSearch(next);
                             if (!next)
@@ -105,7 +109,7 @@ export function PersonPickerSection({ value, onChange, enabled = true, showOrgan
                         }, onValueChange: (next) => {
                             const organizationId = next ?? null;
                             setPerson({ organizationId });
-                            setOrgInputValue(organizationId ? (orgsMap.get(organizationId)?.name ?? "") : "");
+                            setOrgInputValue(organizationId ? resolveOrgLabel(organizationId) : "");
                         }, children: [_jsx(ComboboxInput, { placeholder: merged.organizationSearchPlaceholder, showClear: !!value.organizationId }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: merged.organizationEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
                                                 const org = orgsMap.get(id);
                                                 if (!org)

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

@@ -27,6 +27,8 @@ export interface PriceBreakdownSectionProps {
     optionId?: string | null;
     /** Quantity per option_unit id, typically from RoomsStepperSection. */
     unitQuantities: Record<string, number>;
+    /** Display labels keyed by option_unit id. */
+    unitLabels?: Record<string, string>;
     /**
      * Force a specific catalog. Defaults to the public catalog the storefront
      * uses — matches what a customer would see.
@@ -60,5 +62,5 @@ export interface PriceBreakdownSectionProps {
  * - `free` / `included` — render 0.00 without an on-request badge.
  * - `on_request` / anything else — render "On request"; total excludes it.
  */
-export declare function PriceBreakdownSection({ productId, optionId, unitQuantities, catalogId, labels, onChange, }: PriceBreakdownSectionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PriceBreakdownSection({ productId, optionId, unitQuantities, unitLabels, catalogId, labels, onChange, }: PriceBreakdownSectionProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=price-breakdown-section.d.ts.map

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;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"}
+{"version":3,"file":"price-breakdown-section.d.ts","sourceRoot":"","sources":["../../src/components/price-breakdown-section.tsx"],"names":[],"mappings":"AASA,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,8CAA8C;IAC9C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACnC;;;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,UAAU,EACV,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE,0BAA0B,kDAoS5B"}

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

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { usePricingPreview } from "@voyantjs/bookings-react";
+import { useProduct } from "@voyantjs/products-react";
 import { Button, Label, Textarea } from "@voyantjs/ui/components";
 import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
 import * as React from "react";
@@ -33,7 +34,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, onChange, }) {
+export function PriceBreakdownSection({ productId, optionId, unitQuantities, unitLabels, catalogId, labels, onChange, }) {
     const { formatCurrency, formatNumber } = useBookingsUiI18nOrDefault();
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.priceBreakdownSection.labels, ...labels };
@@ -43,16 +44,19 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
         catalogId: catalogId ?? null,
         enabled: Boolean(productId),
     });
+    const productQuery = useProduct(productId, { 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
+    // biome-ignore lint/correctness/useExhaustiveDependencies: #935 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 fallbackProduct = productQuery.data;
+    const fallbackUnitAmountCents = fallbackProduct?.sellAmountCents ?? null;
+    const currency = snapshot?.catalog.currencyCode ?? fallbackProduct?.sellCurrency ?? null;
     const formatAmount = React.useCallback((cents) => currency
         ? formatCurrency(cents / 100, currency)
         : formatNumber(cents / 100, {
@@ -63,8 +67,26 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
         const out = [];
         let runningTotal = 0;
         let anyOnRequest = false;
-        if (!snapshot)
-            return { lines: out, total: null };
+        if (!snapshot) {
+            if (fallbackUnitAmountCents === null)
+                return { lines: out, total: null };
+            for (const [unitId, quantity] of Object.entries(unitQuantities)) {
+                if (quantity <= 0)
+                    continue;
+                const lineTotal = fallbackUnitAmountCents * quantity;
+                out.push({
+                    unitId,
+                    label: unitLabels?.[unitId] ?? fallbackProduct?.name ?? unitId,
+                    quantity,
+                    unitAmountCents: fallbackUnitAmountCents,
+                    totalAmountCents: lineTotal,
+                    tierLabel: null,
+                    isGroupRate: false,
+                });
+                runningTotal += lineTotal;
+            }
+            return { lines: out, total: runningTotal };
+        }
         // Pick the default price rule for the resolved option (snapshot already
         // filters options by the caller's optionId; rules keep isDefault-first
         // ordering from the server).
@@ -89,7 +111,7 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
                 // operator knows they need to quote manually.
                 out.push({
                     unitId,
-                    label: unitId,
+                    label: unitLabels?.[unitId] ?? unitId,
                     quantity,
                     unitAmountCents: null,
                     totalAmountCents: null,
@@ -99,7 +121,7 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
                 anyOnRequest = true;
                 continue;
             }
-            const label = up.unitName || unitId;
+            const label = unitLabels?.[unitId] ?? up.unitName ?? unitId;
             if (up.pricingMode === "on_request") {
                 out.push({
                     unitId,
@@ -155,7 +177,15 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
             runningTotal += lineTotal;
         }
         return { lines: out, total: anyOnRequest ? null : runningTotal };
-    }, [snapshot, unitQuantities, merged.onRequest, merged.groupRate]);
+    }, [
+        snapshot,
+        fallbackProduct?.name,
+        fallbackUnitAmountCents,
+        unitQuantities,
+        unitLabels,
+        merged.onRequest,
+        merged.groupRate,
+    ]);
     const confirmedAmountCents = manualAmountCents ?? total;
     const isManualOverride = manualAmountCents != null && (total === null || manualAmountCents !== total);
     const requiresReason = isManualOverride && overrideReason.trim().length === 0;
@@ -183,7 +213,7 @@ export function PriceBreakdownSection({ productId, optionId, unitQuantities, cat
     // Empty states
     if (!productId)
         return null;
-    if (preview.isError || (preview.isSuccess && !snapshot)) {
+    if ((preview.isError || (preview.isSuccess && !snapshot)) && fallbackUnitAmountCents === null) {
         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) {

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

@@ -10,6 +10,8 @@ export interface ProductPickerSectionProps {
     enabled?: boolean;
     /** When true, hide the product picker and fix the productId (e.g., launched from a product page). */
     lockProduct?: boolean;
+    /** When false, product options are selected downstream as quantities instead of a single global choice. */
+    showOptionPicker?: boolean;
     labels?: {
         product?: string;
         productSearchPlaceholder?: string;
@@ -23,5 +25,5 @@ export interface ProductPickerSectionProps {
  * replace the whole section (e.g., with a typeahead against a custom catalog)
  * without reimplementing the cascade logic, or keep this one and swap labels.
  */
-export declare function ProductPickerSection({ value, onChange, enabled, lockProduct, labels, }: ProductPickerSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductPickerSection({ value, onChange, enabled, lockProduct, showOptionPicker, labels, }: ProductPickerSectionProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=product-picker-section.d.ts.map

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":"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"}
+{"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,2GAA2G;IAC3G,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,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,gBAAuB,EACvB,MAAM,GACP,EAAE,yBAAyB,2CAyI3B"}

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

@@ -12,7 +12,7 @@ const OPTION_NONE = "__none__";
  * replace the whole section (e.g., with a typeahead against a custom catalog)
  * without reimplementing the cascade logic, or keep this one and swap labels.
  */
-export function ProductPickerSection({ value, onChange, enabled = true, lockProduct = false, labels, }) {
+export function ProductPickerSection({ value, onChange, enabled = true, lockProduct = false, showOptionPicker = true, labels, }) {
     const [productSearch, setProductSearch] = React.useState("");
     const cachedProductsRef = React.useRef(new Map());
     const messages = useBookingsUiMessagesOrDefault();
@@ -45,7 +45,7 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
     const { data: optionsData } = useProductOptions({
         productId: value.productId || undefined,
         limit: 50,
-        enabled: enabled && Boolean(value.productId),
+        enabled: enabled && showOptionPicker && 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, filter: (id, query) => productMatchesPickerSearch(productMap.get(id), query), itemToStringLabel: (id) => resolveProductLabel(id) || id, itemToStringValue: (id) => id, onInputValueChange: (next) => {
@@ -64,7 +64,7 @@ export function ProductPickerSection({ value, onChange, enabled = true, lockProd
                                                 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: [
+                                            } }) })] })] })] })), showOptionPicker && 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/rooms-stepper-section.d.ts

@@ -3,9 +3,20 @@ export interface RoomsStepperValue {
     quantities: Record<string, number>;
 }
 export declare const emptyRoomsStepperValue: RoomsStepperValue;
+export interface RoomsStepperUnit {
+    optionId: string | null;
+    optionUnitId: string;
+    unitName: string;
+    occupancyMax: number | null;
+    initial: number | null;
+    reserved: number;
+    remaining: number | null;
+}
 export interface RoomsStepperSectionProps {
     value: RoomsStepperValue;
     onChange: (value: RoomsStepperValue) => void;
+    /** Product whose options become selectable room quantity rows. */
+    productId?: string;
     /**
      * Departure the operator picked. Departure-specific availability wins
      * when present; otherwise the section falls back to option-level units.
@@ -17,6 +28,7 @@ export interface RoomsStepperSectionProps {
      */
     optionId?: string | null;
     enabled?: boolean;
+    onUnitsChange?: (units: RoomsStepperUnit[]) => void;
     labels?: {
         heading?: string;
         noOption?: string;
@@ -29,8 +41,8 @@ export interface RoomsStepperSectionProps {
 /**
  * Rooms / per-unit stepper for booking-create flows. Drives
  * `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.
+ * departure is selected, and product option-level units before departure
+ * selection, so operators can 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
@@ -46,5 +58,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, optionId, enabled, labels, }: RoomsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function RoomsStepperSection({ value, onChange, productId, slotId, optionId, enabled, onUnitsChange, 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":"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"}
+{"version":3,"file":"rooms-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/rooms-stepper-section.tsx"],"names":[],"mappings":"AAgBA,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,gBAAgB;IAC/B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,iBAAiB,CAAA;IACxB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAA;IACnD,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,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAc,EACd,aAAa,EACb,MAAM,GACP,EAAE,wBAAwB,2CAmI1B"}

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

@@ -1,16 +1,18 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
 import { useSlotUnitAvailability } from "@voyantjs/availability-react";
-import { useOptionUnits } from "@voyantjs/products-react";
+import { getOptionUnitsQueryOptions, useProductOptions, useVoyantProductsContext, } from "@voyantjs/products-react";
 import { Button, Label } from "@voyantjs/ui/components";
 import { Minus, Plus } from "lucide-react";
+import * as React from "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 when a
- * departure is selected, and option-level units before departure selection,
- * so operators can still build "2 double rooms and 1 single" drafts.
+ * departure is selected, and product option-level units before departure
+ * selection, so operators can 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
@@ -26,29 +28,56 @@ 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, optionId, enabled = true, labels, }) {
+export function RoomsStepperSection({ value, onChange, productId, slotId, optionId, enabled = true, onUnitsChange, labels, }) {
+    const productsClient = useVoyantProductsContext();
     const messages = useBookingsUiMessagesOrDefault();
     const merged = { ...messages.roomsStepperSection.labels, ...labels };
     const availability = useSlotUnitAvailability({ slotId, enabled: enabled && Boolean(slotId) });
-    const optionUnits = useOptionUnits({
-        optionId: optionId ?? undefined,
+    const optionsQuery = useProductOptions({
+        productId,
+        status: "active",
         limit: 100,
-        enabled: enabled && !slotId && Boolean(optionId),
+        enabled: enabled && !slotId && Boolean(productId),
     });
-    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) {
+    const productOptions = React.useMemo(() => {
+        const options = optionsQuery.data?.data ?? [];
+        if (!optionId)
+            return options;
+        const selected = options.find((option) => option.id === optionId);
+        const rest = options.filter((option) => option.id !== optionId);
+        return selected ? [selected, ...rest] : options;
+    }, [optionsQuery.data?.data, optionId]);
+    const optionUnitQueries = useQueries({
+        queries: productOptions.map((option) => ({
+            ...getOptionUnitsQueryOptions(productsClient, {
+                optionId: option.id,
+                limit: 100,
+            }),
+            enabled: enabled && !slotId && Boolean(productId),
+        })),
+    });
+    const optionUnitRows = React.useMemo(() => {
+        const rows = [];
+        productOptions.forEach((option, index) => {
+            const units = optionUnitQueries[index]?.data?.data ?? [];
+            rows.push(...units.map((unit) => optionUnitToStepperUnit(option, unit, units.length)));
+        });
+        return rows;
+    }, [productOptions, optionUnitQueries]);
+    const availabilityUnitRows = React.useMemo(() => (availability.data?.data ?? []).map((unit) => ({
+        ...unit,
+        optionId: optionId ?? null,
+    })), [availability.data?.data, optionId]);
+    const units = slotId ? availabilityUnitRows : optionUnitRows;
+    React.useEffect(() => {
+        onUnitsChange?.(units);
+    }, [onUnitsChange, units]);
+    if (!slotId && !productId && !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 })] }));
     }
-    const loaded = slotId ? availability.isSuccess : optionUnits.isSuccess;
+    const loaded = slotId
+        ? availability.isSuccess
+        : optionsQuery.isSuccess && optionUnitQueries.every((query) => query.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 })] }));
     }
@@ -69,3 +98,14 @@ export function RoomsStepperSection({ value, onChange, slotId, optionId, enabled
                     return (_jsxs("div", { className: "flex items-center gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "flex-1", children: [_jsx("div", { className: "text-sm font-medium", children: unit.unitName }), _jsx("div", { className: "text-xs text-muted-foreground", children: remainingLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(unit.optionUnitId, Math.max(0, qty - 1)), disabled: qty <= 0, "aria-label": `${merged.decreaseUnitPrefix} ${unit.unitName}`, children: _jsx(Minus, { className: "h-3.5 w-3.5" }) }), _jsx("span", { className: "min-w-[1.5rem] text-center text-sm tabular-nums", children: qty }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 w-7 p-0", onClick: () => setQuantity(unit.optionUnitId, qty + 1), disabled: atMax, "aria-label": `${merged.increaseUnitPrefix} ${unit.unitName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }, unit.optionUnitId));
                 }) })] }));
 }
+function optionUnitToStepperUnit(option, unit, unitCount) {
+    return {
+        optionId: option.id,
+        optionUnitId: unit.id,
+        unitName: unitCount === 1 ? option.name : `${option.name} - ${unit.name}`,
+        occupancyMax: unit.occupancyMax,
+        initial: null,
+        reserved: 0,
+        remaining: unit.maxQuantity ?? null,
+    };
+}

package/dist/i18n/en.js

@@ -455,7 +455,7 @@ export const bookingsUiEn = {
             onRequest: "On request",
             groupRate: "group rate",
             empty: "Pick units above to see the breakdown.",
-            noPricing: "No pricing catalog available for this product.",
+            noPricing: "Pricing preview is unavailable for this selection.",
             confirmedTotal: "Confirmed total",
             manualTotal: "Manual total",
             useCatalogTotal: "Use catalog",
@@ -1087,7 +1087,7 @@ export const bookingsUiEn = {
             breakdownOnRequest: "On request",
             breakdownGroupRate: "group rate",
             breakdownEmpty: "Pick units above to see the breakdown.",
-            breakdownNoPricing: "No pricing catalog available for this product.",
+            breakdownNoPricing: "Pricing preview is unavailable for this selection.",
             breakdownConfirmedTotal: "Confirmed total",
             breakdownManualTotal: "Manual total",
             breakdownUseCatalogTotal: "Use catalog",

package/dist/i18n/ro.js

@@ -455,7 +455,7 @@ export const bookingsUiRo = {
             onRequest: "La cerere",
             groupRate: "tarif de grup",
             empty: "Alege unitatile de mai sus pentru a vedea descompunerea.",
-            noPricing: "Nu exista catalog de preturi pentru acest produs.",
+            noPricing: "Previzualizarea pretului nu este disponibila pentru aceasta selectie.",
             confirmedTotal: "Total confirmat",
             manualTotal: "Total manual",
             useCatalogTotal: "Foloseste catalogul",
@@ -1087,7 +1087,7 @@ export const bookingsUiRo = {
             breakdownOnRequest: "La cerere",
             breakdownGroupRate: "tarif de grup",
             breakdownEmpty: "Alege unitatile de mai sus pentru a vedea descompunerea.",
-            breakdownNoPricing: "Nu exista catalog de preturi pentru acest produs.",
+            breakdownNoPricing: "Previzualizarea pretului nu este disponibila pentru aceasta selectie.",
             breakdownConfirmedTotal: "Total confirmat",
             breakdownManualTotal: "Total manual",
             breakdownUseCatalogTotal: "Foloseste catalogul",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/bookings-ui",
-  "version": "0.50.7",
+  "version": "0.51.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -51,20 +51,20 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/availability-react": "0.50.7",
-    "@voyantjs/bookings-react": "0.50.7",
-    "@voyantjs/catalog": "0.50.7",
-    "@voyantjs/catalog-react": "0.50.7",
-    "@voyantjs/crm-react": "0.50.7",
-    "@voyantjs/crm-ui": "0.50.7",
-    "@voyantjs/finance-react": "0.50.7",
-    "@voyantjs/legal-react": "0.50.7",
-    "@voyantjs/products-react": "0.50.7",
-    "@voyantjs/suppliers-react": "0.50.7",
-    "@voyantjs/ui": "0.50.7"
+    "@voyantjs/availability-react": "0.51.0",
+    "@voyantjs/bookings-react": "0.51.0",
+    "@voyantjs/catalog": "0.51.0",
+    "@voyantjs/catalog-react": "0.51.0",
+    "@voyantjs/crm-react": "0.51.0",
+    "@voyantjs/crm-ui": "0.51.0",
+    "@voyantjs/finance-react": "0.51.0",
+    "@voyantjs/legal-react": "0.51.0",
+    "@voyantjs/products-react": "0.51.0",
+    "@voyantjs/suppliers-react": "0.51.0",
+    "@voyantjs/ui": "0.51.0"
   },
   "dependencies": {
-    "@voyantjs/i18n": "0.50.7"
+    "@voyantjs/i18n": "0.51.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.96.2",
@@ -77,18 +77,18 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/availability-react": "0.50.7",
-    "@voyantjs/bookings-react": "0.50.7",
-    "@voyantjs/catalog": "0.50.7",
-    "@voyantjs/catalog-react": "0.50.7",
-    "@voyantjs/crm-react": "0.50.7",
-    "@voyantjs/crm-ui": "0.50.7",
-    "@voyantjs/finance-react": "0.50.7",
-    "@voyantjs/legal-react": "0.50.7",
-    "@voyantjs/products-react": "0.50.7",
-    "@voyantjs/suppliers-react": "0.50.7",
+    "@voyantjs/availability-react": "0.51.0",
+    "@voyantjs/bookings-react": "0.51.0",
+    "@voyantjs/catalog": "0.51.0",
+    "@voyantjs/catalog-react": "0.51.0",
+    "@voyantjs/crm-react": "0.51.0",
+    "@voyantjs/crm-ui": "0.51.0",
+    "@voyantjs/finance-react": "0.51.0",
+    "@voyantjs/legal-react": "0.51.0",
+    "@voyantjs/products-react": "0.51.0",
+    "@voyantjs/suppliers-react": "0.51.0",
     "@voyantjs/voyant-typescript-config": "0.1.0",
-    "@voyantjs/ui": "0.50.7"
+    "@voyantjs/ui": "0.51.0"
   },
   "files": [
     "dist",