@voyantjs/bookings-ui 0.52.3 → 0.52.4

package/dist/components/option-units-stepper-section.d.ts

@@ -67,4 +67,24 @@ export interface OptionUnitsStepperSectionProps {
  *   would 409 at insert time.
  */
 export declare function OptionUnitsStepperSection({ value, onChange, productId, slotId, optionId, enabled, onUnitsChange, labels, }: OptionUnitsStepperSectionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the `optionId` the slot is bound to, derived from the first
+ * slot-availability row whose `optionUnitId` we can map to a known
+ * product option. Falls back to the caller's `fallbackOptionId` (the
+ * dialog's currently-selected option) when no rows resolve — that lets
+ * the existing `optionId` prop drive the previous-behavior path for
+ * unit pickers that haven't loaded yet.
+ */
+export declare function resolveSlotOptionId(slotRows: ReadonlyArray<{
+    optionUnitId: string;
+}>, optionByUnitId: ReadonlyMap<string, string>, fallbackOptionId: string | null): string | null;
+/**
+ * Merges slot-bound per-unit availability with the product's option-unit
+ * catalog. Slot rows are authoritative for the slot's option (they carry
+ * real-time `remaining`); product-level rows fill in the other options
+ * the product offers so the operator can still pick mixes the slot isn't
+ * explicitly tracking. When the slot is product-level (no `option_id`)
+ * or hasn't loaded slot rows yet, the product-level rows cover everything.
+ */
+export declare function mergeStepperUnits(slotRows: ReadonlyArray<OptionUnitsStepperUnit>, productRows: ReadonlyArray<OptionUnitsStepperUnit>, slotOptionId: string | null, hasSlot: boolean): OptionUnitsStepperUnit[];
 //# sourceMappingURL=option-units-stepper-section.d.ts.map

package/dist/components/option-units-stepper-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"option-units-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/option-units-stepper-section.tsx"],"names":[],"mappings":"AAgBA,iEAAiE;AACjE,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,4BAA4B,EAAE,uBAA4C,CAAA;AAEvF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAA;IAC/E,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,8BAA8B;IAC7C,KAAK,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAClD,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,sBAAsB,EAAE,KAAK,IAAI,CAAA;IACzD,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,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAc,EACd,aAAa,EACb,MAAM,GACP,EAAE,8BAA8B,2CAqLhC"}
+{"version":3,"file":"option-units-stepper-section.d.ts","sourceRoot":"","sources":["../../src/components/option-units-stepper-section.tsx"],"names":[],"mappings":"AAgBA,iEAAiE;AACjE,MAAM,WAAW,uBAAuB;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CACnC;AAED,eAAO,MAAM,4BAA4B,EAAE,uBAA4C,CAAA;AAEvF,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,YAAY,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,MAAM,CAAA;IAChB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,gEAAgE;IAChE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,IAAI,CAAA;IAC/E,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,8BAA8B;IAC7C,KAAK,EAAE,uBAAuB,CAAA;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;IAClD,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,sBAAsB,EAAE,KAAK,IAAI,CAAA;IACzD,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,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAM,EACN,QAAQ,EACR,OAAc,EACd,aAAa,EACb,MAAM,GACP,EAAE,8BAA8B,2CA+MhC;AAED;;;;;;;GAOG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,aAAa,CAAC;IAAE,YAAY,EAAE,MAAM,CAAA;CAAE,CAAC,EACjD,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,EAC3C,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAC9B,MAAM,GAAG,IAAI,CAMf;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,aAAa,CAAC,sBAAsB,CAAC,EAC/C,WAAW,EAAE,aAAa,CAAC,sBAAsB,CAAC,EAClD,YAAY,EAAE,MAAM,GAAG,IAAI,EAC3B,OAAO,EAAE,OAAO,GACf,sBAAsB,EAAE,CAM1B"}

package/dist/components/option-units-stepper-section.js

@@ -68,16 +68,36 @@ export function OptionUnitsStepperSection({ value, onChange, productId, slotId,
         });
         return rows;
     }, [productOptions, optionUnitQueries]);
+    // optionUnitId → optionId lookup, derived from the product's own option
+    // catalog. The slot-availability endpoint only returns option_unit rows
+    // for the slot's bound option and doesn't stamp the option_id on each
+    // row, so we look it up from the units we already fetched per option.
+    const optionByUnitId = React.useMemo(() => {
+        const map = new Map();
+        productOptions.forEach((option, index) => {
+            const units = optionUnitQueries[index]?.data?.data ?? [];
+            for (const unit of units) {
+                map.set(unit.id, option.id);
+            }
+        });
+        return map;
+    }, [productOptions, optionUnitQueries]);
+    // The slot's bound option, derived from the first availability row.
+    // `null` when the slot is product-level (no option_id) — that path goes
+    // through the product-level fallback below.
+    const slotOptionId = React.useMemo(() => resolveSlotOptionId(availability.data?.data ?? [], optionByUnitId, optionId ?? null), [availability.data?.data, optionByUnitId, optionId]);
     const availabilityUnitRows = React.useMemo(() => (availability.data?.data ?? []).map((unit) => ({
         ...unit,
-        optionId: optionId ?? null,
-    })), [availability.data?.data, optionId]);
-    // Slot-specific per-unit availability wins when it actually returns
-    // rows; otherwise fall back to the product's option-level units so
-    // the operator can still pick quantities. Product-level slots (no
-    // option_id) report no per-unit availability — but the product's
-    // options still describe the bookable units.
-    const units = slotId && availabilityUnitRows.length > 0 ? availabilityUnitRows : optionUnitRows;
+        optionId: slotOptionId ?? optionId ?? null,
+    })), [availability.data?.data, slotOptionId, optionId]);
+    // Slot-bound per-unit availability stays authoritative for the slot's
+    // option (real-time `remaining` from active bookings). For *other*
+    // options the same product offers, fall back to the product-level
+    // option_units so the operator can still pick a DBL/TWN even when the
+    // slot is option-scoped to SGL. Product-level slots (no option_id) hit
+    // the no-slot-rows branch and use the product fallback for everything.
+    // See issue #960.
+    const units = React.useMemo(() => mergeStepperUnits(availabilityUnitRows, optionUnitRows, slotOptionId, Boolean(slotId)), [availabilityUnitRows, optionUnitRows, slotOptionId, slotId]);
     React.useEffect(() => {
         onUnitsChange?.(units);
     }, [onUnitsChange, units]);
@@ -149,6 +169,37 @@ export function OptionUnitsStepperSection({ value, onChange, productId, slotId,
                     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: optionName }), _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(primary.optionUnitId, Math.max(0, qty - 1)), disabled: qty <= 0, "aria-label": `${merged.decreaseUnitPrefix} ${optionName}`, 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(primary.optionUnitId, qty + 1), disabled: atMax, "aria-label": `${merged.increaseUnitPrefix} ${optionName}`, children: _jsx(Plus, { className: "h-3.5 w-3.5" }) })] })] }, optionKey));
                 }) })] }));
 }
+/**
+ * Returns the `optionId` the slot is bound to, derived from the first
+ * slot-availability row whose `optionUnitId` we can map to a known
+ * product option. Falls back to the caller's `fallbackOptionId` (the
+ * dialog's currently-selected option) when no rows resolve — that lets
+ * the existing `optionId` prop drive the previous-behavior path for
+ * unit pickers that haven't loaded yet.
+ */
+export function resolveSlotOptionId(slotRows, optionByUnitId, fallbackOptionId) {
+    for (const row of slotRows) {
+        const resolved = optionByUnitId.get(row.optionUnitId);
+        if (resolved)
+            return resolved;
+    }
+    return fallbackOptionId;
+}
+/**
+ * Merges slot-bound per-unit availability with the product's option-unit
+ * catalog. Slot rows are authoritative for the slot's option (they carry
+ * real-time `remaining`); product-level rows fill in the other options
+ * the product offers so the operator can still pick mixes the slot isn't
+ * explicitly tracking. When the slot is product-level (no `option_id`)
+ * or hasn't loaded slot rows yet, the product-level rows cover everything.
+ */
+export function mergeStepperUnits(slotRows, productRows, slotOptionId, hasSlot) {
+    if (!hasSlot || slotRows.length === 0 || !slotOptionId) {
+        return [...productRows];
+    }
+    const otherOptionRows = productRows.filter((row) => row.optionId !== slotOptionId);
+    return [...slotRows, ...otherOptionRows];
+}
 function isAdultUnit(unit) {
     // The seed creates ADULT / CHILD / SENIOR unit codes; the stepper
     // unit object doesn't carry the code, so fall back to name-matching

package/package.json

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