@voyantjs/products-ui 0.101.2 → 0.103.0

package/dist/components/product-detail/product-option-pricing-grid.js

@@ -0,0 +1,233 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { formatMessage } from "@voyantjs/i18n";
+import { useOptionPriceRuleMutation, useOptionUnitPriceRuleMutation, usePriceCatalogMutation, usePricingCategoryMutation, } from "@voyantjs/pricing-react";
+import { useOptionUnitMutation, useVoyantProductsContext } from "@voyantjs/products-react";
+import { Button } from "@voyantjs/ui/components/button";
+import { Pencil, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useProductDetailMessages } from "./host.js";
+import { categoryAppliesToUnit, ExtraPriceRulesPanel, formatProductMoney, getCategoryCondition, TravelerCategoryDialog, } from "./product-options-pricing.js";
+import { getOptionPriceRulesQueryOptions, getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPriceCatalogsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
+import { UnitDialog } from "./product-unit-dialog.js";
+import { UnitPriceRuleDialog, } from "./product-unit-price-rule-dialog.js";
+function formatAvailability(unit, messages) {
+    if (unit.maxQuantity != null && unit.maxQuantity > 0) {
+        return formatMessage(messages.perDeparture, { count: unit.maxQuantity });
+    }
+    return "—";
+}
+function unitSubtitle(unit, layout, messages) {
+    if (layout === "rooms") {
+        const sleeps = unit.occupancyMax ?? unit.occupancyMin;
+        return sleeps != null ? formatMessage(messages.sleeps, { count: sleeps }) : null;
+    }
+    if (unit.minAge != null || unit.maxAge != null) {
+        return `${unit.minAge ?? 0}–${unit.maxAge ?? "∞"}`;
+    }
+    return null;
+}
+/**
+ * The everyday pricing surface for a booking option: one table that merges
+ * inventory (rooms / traveler types) with what each traveler pays. The single
+ * default rate plan is auto-managed and hidden — agents never see catalogs or
+ * rate-plan chrome here (that lives under Advanced).
+ */
+export function OptionPricingGrid({ productId, optionId, optionName, productCurrency, layout, }) {
+    const client = useVoyantProductsContext();
+    const messages = useProductDetailMessages();
+    const t = messages.products.operations.pricingGrid;
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const { data: unitsData, refetch: refetchUnits } = useQuery(getOptionUnitsQueryOptions(client, optionId));
+    const { data: rulesData, refetch: refetchRules } = useQuery(getOptionPriceRulesQueryOptions(client, optionId));
+    const { data: categoriesData, refetch: refetchCategories } = useQuery(getPricingCategoriesQueryOptions(client));
+    const { data: catalogsData } = useQuery(getPriceCatalogsQueryOptions(client));
+    const rules = rulesData?.data ?? [];
+    const defaultRule = rules.find((rule) => rule.isDefault) ?? rules[0];
+    const { data: cellsData, refetch: refetchCells } = useQuery({
+        ...getOptionUnitPriceRulesQueryOptions(client, defaultRule?.id ?? "__none__"),
+        enabled: Boolean(defaultRule?.id),
+    });
+    const { remove: removeUnit } = useOptionUnitMutation();
+    const { remove: removeCell } = useOptionUnitPriceRuleMutation();
+    const { create: createRule } = useOptionPriceRuleMutation();
+    const { create: createCatalog } = usePriceCatalogMutation();
+    const { remove: removeCategory } = usePricingCategoryMutation();
+    const deleteUnitMutation = useMutation({
+        mutationFn: (id) => removeUnit.mutateAsync(id),
+        onSuccess: () => {
+            void refetchUnits();
+            void refetchCells();
+        },
+    });
+    const deleteCellMutation = useMutation({
+        mutationFn: (id) => removeCell.mutateAsync(id),
+        onSuccess: () => void refetchCells(),
+    });
+    const [unitDialogOpen, setUnitDialogOpen] = useState(false);
+    const [editingUnit, setEditingUnit] = useState();
+    const [defaultUnitType, setDefaultUnitType] = useState("room");
+    const [categoryDialogOpen, setCategoryDialogOpen] = useState(false);
+    const [editingCategory, setEditingCategory] = useState();
+    const [cellDialogOpen, setCellDialogOpen] = useState(false);
+    const [cellRuleId, setCellRuleId] = useState();
+    const [editingCell, setEditingCell] = useState();
+    const [preselectedUnitId, setPreselectedUnitId] = useState();
+    const [preselectedCategoryId, setPreselectedCategoryId] = useState();
+    const units = (unitsData?.data ?? [])
+        .filter((unit) => !unit.isHidden)
+        .slice()
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    // Inventory wins over the booking-mode hint: an option that actually holds
+    // rooms (or vehicles/groups) is always priced as a rooms grid, even if the
+    // product's booking mode was set to a per-person type. The `layout` prop only
+    // decides the shape for a brand-new option that has no inventory yet.
+    const hasRoomLikeUnits = units.some((unit) => unit.unitType === "room" || unit.unitType === "vehicle" || unit.unitType === "group");
+    const hasPersonUnits = units.some((unit) => unit.unitType === "person");
+    const effectiveLayout = hasRoomLikeUnits
+        ? "rooms"
+        : hasPersonUnits
+            ? "seats"
+            : layout;
+    const cells = cellsData?.data ?? [];
+    const referencedCategoryIds = new Set(cells.flatMap((cell) => (cell.pricingCategoryId ? [cell.pricingCategoryId] : [])));
+    const categories = (categoriesData?.data ?? [])
+        .filter((category) => category.active &&
+        (((category.productId == null || category.productId === productId) &&
+            (category.optionId == null || category.optionId === optionId)) ||
+            referencedCategoryIds.has(category.id)))
+        .slice()
+        .sort((a, b) => a.sortOrder - b.sortOrder);
+    // Traveler-type columns. Seats layout prices each traveler-type row once
+    // (single price column). Rooms layout splits price by traveler category once
+    // any exist, else shows a single base-price column per room.
+    const columns = effectiveLayout === "rooms" && categories.length > 0
+        ? categories.map((category) => ({
+            id: category.id,
+            name: category.name,
+            metadata: category.metadata,
+        }))
+        : [{ id: null, name: t.priceColumn }];
+    const nextUnitSortOrder = units.length > 0 ? Math.max(...units.map((u) => u.sortOrder)) + 1 : 0;
+    const findCell = (unitId, categoryId) => cells.find((cell) => cell.unitId === unitId && (cell.pricingCategoryId ?? null) === categoryId) ?? null;
+    // Lazily materialize the hidden default rate plan (and a default catalog if
+    // the tenant has none) the first time the agent enters a price. Keeps the
+    // common path free of any rate-plan/catalog ceremony.
+    async function ensureRatePlanId() {
+        if (defaultRule?.id)
+            return defaultRule.id;
+        const catalogs = catalogsData?.data ?? [];
+        const existingCatalog = catalogs.find((catalog) => catalog.isDefault) ?? catalogs[0];
+        const catalogId = existingCatalog?.id ??
+            (await createCatalog.mutateAsync({
+                code: "default",
+                name: t.priceColumn,
+                catalogType: "public",
+                isDefault: true,
+            })).id;
+        const created = await createRule.mutateAsync({
+            productId,
+            optionId,
+            priceCatalogId: catalogId,
+            name: optionName,
+            pricingMode: "per_person",
+            baseSellAmountCents: 0,
+            baseCostAmountCents: 0,
+            allPricingCategories: effectiveLayout === "seats",
+            isDefault: true,
+            active: true,
+        });
+        await refetchRules();
+        return created.id;
+    }
+    async function openCellDialog(unit, categoryId) {
+        const ruleId = await ensureRatePlanId();
+        setCellRuleId(ruleId);
+        setEditingCell(undefined);
+        setPreselectedUnitId(unit.id);
+        setPreselectedCategoryId(categoryId);
+        setCellDialogOpen(true);
+    }
+    const addRoomOrTraveler = () => {
+        setEditingUnit(undefined);
+        setDefaultUnitType(effectiveLayout === "rooms" ? "room" : "person");
+        setUnitDialogOpen(true);
+    };
+    const editTravelerType = (category) => {
+        setEditingCategory(category);
+        setCategoryDialogOpen(true);
+    };
+    async function removeTravelerType(category) {
+        if (!confirm(formatMessage(messages.products.operations.priceRules.travelerCategoryDeleteConfirm, {
+            name: category.name,
+        }))) {
+            return;
+        }
+        // Categories this product/option owns are deleted outright. A global
+        // category only shows here because some cell references it, so removing
+        // its prices drops the column from this option without touching the
+        // shared category.
+        if (category.productId === productId || category.optionId === optionId) {
+            await removeCategory.mutateAsync(category.id);
+            void refetchCategories();
+            void refetchCells();
+        }
+        else {
+            for (const cell of cells.filter((entry) => entry.pricingCategoryId === category.id)) {
+                await removeCell.mutateAsync(cell.id);
+            }
+            void refetchCells();
+        }
+    }
+    const unitColumnLabel = effectiveLayout === "rooms" ? t.roomColumn : t.travelerColumn;
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm font-medium", children: effectiveLayout === "rooms" ? t.roomsTitle : t.seatsTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: effectiveLayout === "rooms" ? t.roomsDescription : t.seatsDescription })] }), _jsxs("div", { className: "flex items-center gap-2", children: [effectiveLayout === "rooms" ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setEditingCategory(undefined);
+                                    setCategoryDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), t.addTravelerType] })) : null, _jsxs(Button, { variant: "outline", size: "sm", onClick: addRoomOrTraveler, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), effectiveLayout === "rooms" ? t.addRoom : t.addTravelerType] })] })] }), units.length === 0 ? (_jsx("p", { className: "rounded-md border bg-background px-3 py-6 text-center text-sm text-muted-foreground", children: effectiveLayout === "rooms" ? t.emptyRooms : t.emptySeats })) : (_jsx("div", { className: "overflow-x-auto rounded-md border bg-background", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/40 text-muted-foreground", children: [_jsx("th", { className: "p-2.5 text-left font-medium", children: unitColumnLabel }), _jsx("th", { className: "p-2.5 text-left font-medium", children: t.availableColumn }), columns.map((column) => {
+                                        const condition = getCategoryCondition(column.metadata);
+                                        const category = column.id
+                                            ? categories.find((entry) => entry.id === column.id)
+                                            : undefined;
+                                        return (_jsx("th", { className: "group p-2.5 text-left font-medium", children: _jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsxs("div", { children: [_jsx("div", { children: column.name }), condition ? (_jsx("div", { className: "mt-0.5 max-w-[220px] text-[10px] font-normal normal-case leading-snug text-muted-foreground", children: condition })) : null] }), category ? (_jsxs("div", { className: "flex shrink-0 items-center gap-0.5 opacity-0 transition group-hover:opacity-100", children: [_jsx("button", { type: "button", "aria-label": priceRuleMessages.travelerCategoryEdit, onClick: () => editTravelerType(category), className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", "aria-label": priceRuleMessages.travelerCategoryDelete, onClick: () => void removeTravelerType(category), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })) : null] }) }, column.id ?? "__base__"));
+                                    }), _jsx("th", { className: "w-[72px] p-2.5 text-right font-medium" })] }) }), _jsx("tbody", { children: units.map((unit) => {
+                                const subtitle = unitSubtitle(unit, effectiveLayout, t);
+                                return (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "p-2.5", children: [_jsx("div", { className: "font-medium", children: unit.name }), subtitle ? (_jsx("div", { className: "text-[11px] text-muted-foreground", children: subtitle })) : null] }), _jsx("td", { className: "p-2.5 text-muted-foreground", children: formatAvailability(unit, t) }), columns.map((column) => {
+                                            const cell = findCell(unit.id, column.id);
+                                            const canPrice = categoryAppliesToUnit(column, unit);
+                                            return (_jsx("td", { className: "p-2.5", children: cell ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx("button", { type: "button", onClick: () => {
+                                                                setCellRuleId(defaultRule?.id);
+                                                                setEditingCell(cell);
+                                                                setPreselectedUnitId(undefined);
+                                                                setPreselectedCategoryId(undefined);
+                                                                setCellDialogOpen(true);
+                                                            }, className: "font-mono text-foreground hover:underline", children: formatProductMoney(cell.sellAmountCents, productCurrency) }), _jsx("button", { type: "button", "aria-label": t.deleteRoom, onClick: () => deleteCellMutation.mutate(cell.id), className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })) : canPrice ? (_jsxs("button", { type: "button", onClick: () => void openCellDialog(unit, column.id), className: "inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(Plus, { className: "h-3 w-3" }), t.setPrice] })) : (_jsx("span", { className: "text-muted-foreground", children: "\u2014" })) }, column.id ?? "__base__"));
+                                        }), _jsx("td", { className: "p-2.5", children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t.editRoom, onClick: () => {
+                                                            setEditingUnit(unit);
+                                                            setDefaultUnitType(unit.unitType);
+                                                            setUnitDialogOpen(true);
+                                                        }, children: _jsx(Pencil, { className: "h-4 w-4" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t.deleteRoom, onClick: () => {
+                                                            if (confirm(formatMessage(t.deleteRoomConfirm, { name: unit.name }))) {
+                                                                deleteUnitMutation.mutate(unit.id);
+                                                            }
+                                                        }, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }) })] }, unit.id));
+                            }) })] }) })), _jsx(ExtraPriceRulesPanel, { productId: productId, optionId: optionId, optionPriceRuleId: defaultRule?.id, ensureOptionPriceRuleId: ensureRatePlanId, productCurrency: productCurrency }), _jsx(UnitDialog, { open: unitDialogOpen, onOpenChange: setUnitDialogOpen, optionId: optionId, unit: editingUnit, defaultUnitType: editingUnit ? undefined : defaultUnitType, lockUnitType: true, nextSortOrder: nextUnitSortOrder, onSuccess: () => {
+                    setUnitDialogOpen(false);
+                    setEditingUnit(undefined);
+                    void refetchUnits();
+                } }), _jsx(TravelerCategoryDialog, { open: categoryDialogOpen, onOpenChange: (open) => {
+                    setCategoryDialogOpen(open);
+                    if (!open)
+                        setEditingCategory(undefined);
+                }, productId: productId, units: units, category: editingCategory, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
+                    setCategoryDialogOpen(false);
+                    setEditingCategory(undefined);
+                    void refetchCategories();
+                } }), _jsx(UnitPriceRuleDialog, { open: cellDialogOpen, onOpenChange: setCellDialogOpen, optionPriceRuleId: cellRuleId ?? defaultRule?.id ?? "", optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
+                    setCellDialogOpen(false);
+                    setEditingCell(undefined);
+                    setPreselectedUnitId(undefined);
+                    setPreselectedCategoryId(undefined);
+                    void refetchCells();
+                } })] }));
+}

package/dist/components/product-detail/product-options-pricing.d.ts

@@ -1,6 +1,43 @@
-export declare function PricingPanel({ productId, optionId, productCurrency, }: {
+import { type PricingCategoryRecord } from "@voyantjs/pricing-react";
+import type * as React from "react";
+import { useProductDetailMessages } from "./host.js";
+import { type OptionPricingLayout } from "./product-options-shared.js";
+import type { OptionUnitData } from "./product-unit-dialog.js";
+export declare function getUnitTypeLabel(type: OptionUnitData["unitType"], messages: ReturnType<typeof useProductDetailMessages>["products"]["operations"]["units"]): string;
+export declare function getCategoryCondition(metadata: Record<string, unknown> | null | undefined): string | null;
+export declare function categoryAppliesToUnit(category: {
+    id: string | null;
+    metadata?: Record<string, unknown> | null;
+}, unit: OptionUnitData): boolean;
+/**
+ * Per-option pricing surface. The everyday view is the merged rooms/seats
+ * grid; the full rate-plan machinery (multiple plans, catalogs, cost prices,
+ * cancellation) plus any injected per-departure inventory live behind an
+ * Advanced disclosure so low-tech agents never have to see them.
+ */
+export declare function PricingPanel({ productId, optionId, optionName, productCurrency, layout, extras, }: {
     productId: string;
     optionId: string;
+    optionName: string;
     productCurrency: string;
+    layout: OptionPricingLayout;
+    extras?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
+export declare function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, category, onSuccess, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    units: OptionUnitData[];
+    nextSortOrder: number;
+    category?: PricingCategoryRecord;
+    onSuccess: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ExtraPriceRulesPanel({ productId, optionId, optionPriceRuleId, ensureOptionPriceRuleId, productCurrency, }: {
+    productId: string;
+    optionId: string;
+    optionPriceRuleId?: string;
+    ensureOptionPriceRuleId?: () => Promise<string>;
+    productCurrency: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function formatProductMoney(amountCents: number | null | undefined, currency: string): string;
 //# sourceMappingURL=product-options-pricing.d.ts.map

package/dist/components/product-detail/product-options-pricing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-options-pricing.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-pricing.tsx"],"names":[],"mappings":"AA+HA,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,eAAe,GAChB,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,eAAe,EAAE,MAAM,CAAA;CACxB,2CA6EA"}
+{"version":3,"file":"product-options-pricing.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-pricing.tsx"],"names":[],"mappings":"AAOA,OAAO,EAEL,KAAK,qBAAqB,EAM3B,MAAM,yBAAyB,CAAA;AA4BhC,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAOpD,OAAO,EAKL,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAA;AACpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AA0B9D,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,cAAc,CAAC,UAAU,CAAC,EAChC,QAAQ,EAAE,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,UAkBzF;AAED,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,iBAGxF;AAED,wBAAgB,qBAAqB,CACnC,QAAQ,EAAE;IAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAA;CAAE,EAC1E,IAAI,EAAE,cAAc,WAMrB;AAeD;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,SAAS,EACT,QAAQ,EACR,UAAU,EACV,eAAe,EACf,MAAM,EACN,MAAM,GACP,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,mBAAmB,CAAA;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB,2CA+CA;AAwdD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE;IACD,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,cAAc,EAAE,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAiOA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,uBAAuB,EACvB,eAAe,GAChB,EAAE;IACD,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAIhB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uBAAuB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;IAC/C,eAAe,EAAE,MAAM,CAAA;CACxB,2CAwJA;AAkID,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAG1F"}

package/dist/components/product-detail/product-options-pricing.js

@@ -1,15 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useProductExtras } from "@voyantjs/extras-react";
+import { useProductExtraMutation, useProductExtras, } from "@voyantjs/extras-react";
 import { formatMessage } from "@voyantjs/i18n";
 import { useExtraPriceRuleMutation, useExtraPriceRules, useOptionPriceRuleMutation, useOptionUnitPriceRuleMutation, usePricingCategoryMutation, } from "@voyantjs/pricing-react";
 import { useVoyantProductsContext } from "@voyantjs/products-react";
 import { Badge, Button, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
 import { Checkbox } from "@voyantjs/ui/components/checkbox";
-import { MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
+import { ChevronDown, ChevronRight, MoreHorizontal, Pencil, Plus, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useProductDetailMessages } from "./host.js";
+import { getExtraPricingModeLabel, ProductExtraDialog } from "./product-extra-dialog.js";
 import { OptionPriceRuleDialog, } from "./product-option-price-rule-dialog.js";
+import { OptionPricingGrid } from "./product-option-pricing-grid.js";
 import { getOptionPriceRulesQueryOptions, getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
 import { UnitPriceRuleDialog, } from "./product-unit-price-rule-dialog.js";
 function getRulePricingModeLabel(value, messages) {
@@ -28,7 +30,7 @@ function getRulePricingModeLabel(value, messages) {
             return value;
     }
 }
-function getUnitTypeLabel(type, messages) {
+export function getUnitTypeLabel(type, messages) {
     switch (type) {
         case "person":
             return messages.typePerson;
@@ -46,11 +48,11 @@ function getUnitTypeLabel(type, messages) {
             return type;
     }
 }
-function getCategoryCondition(metadata) {
+export function getCategoryCondition(metadata) {
     const condition = metadata?.condition;
     return typeof condition === "string" && condition.trim().length > 0 ? condition : null;
 }
-function categoryAppliesToUnit(category, unit) {
+export function categoryAppliesToUnit(category, unit) {
     if (!category.id)
         return true;
     const allowedUnitIds = category.metadata?.allowedUnitIds;
@@ -61,7 +63,19 @@ function categoryAppliesToUnit(category, unit) {
 function ActionMenu({ children }) {
     return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "h-8 w-8 text-muted-foreground", children: _jsx(MoreHorizontal, { className: "h-4 w-4" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: children })] }));
 }
-export function PricingPanel({ productId, optionId, productCurrency, }) {
+/**
+ * Per-option pricing surface. The everyday view is the merged rooms/seats
+ * grid; the full rate-plan machinery (multiple plans, catalogs, cost prices,
+ * cancellation) plus any injected per-departure inventory live behind an
+ * Advanced disclosure so low-tech agents never have to see them.
+ */
+export function PricingPanel({ productId, optionId, optionName, productCurrency, layout, extras, }) {
+    const messages = useProductDetailMessages();
+    const gridMessages = messages.products.operations.pricingGrid;
+    const [advancedOpen, setAdvancedOpen] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(OptionPricingGrid, { productId: productId, optionId: optionId, optionName: optionName, productCurrency: productCurrency, layout: layout }), _jsxs("div", { className: "rounded-md border bg-background/60", children: [_jsxs("button", { type: "button", onClick: () => setAdvancedOpen((open) => !open), className: "flex w-full items-center gap-2 px-3 py-2 text-left text-xs font-medium text-muted-foreground transition-colors hover:text-foreground", children: [advancedOpen ? (_jsx(ChevronDown, { className: "h-3.5 w-3.5" })) : (_jsx(ChevronRight, { className: "h-3.5 w-3.5" })), _jsx("span", { children: gridMessages.advancedToggle }), !advancedOpen ? (_jsxs("span", { className: "font-normal normal-case", children: ["\u2014 ", gridMessages.advancedHint] })) : null] }), advancedOpen ? (_jsx("div", { className: "flex flex-col gap-4 border-t p-3", children: _jsx(AdvancedRatePlans, { productId: productId, optionId: optionId, productCurrency: productCurrency }) })) : null] }), extras] }));
+}
+function AdvancedRatePlans({ productId, optionId, productCurrency, }) {
     const messages = useProductDetailMessages();
     const client = useVoyantProductsContext();
     const priceRuleMessages = messages.products.operations.priceRules;
@@ -74,10 +88,19 @@ export function PricingPanel({ productId, optionId, productCurrency, }) {
         onSuccess: () => void refetch(),
     });
     const rules = data?.data ?? [];
-    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: priceRuleMessages.sectionTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: priceRuleMessages.sectionDescription })] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
-                            setEditingRule(undefined);
-                            setRuleDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addAction] })] }), rules.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: priceRuleMessages.empty })) : (_jsx("div", { className: "flex flex-col gap-3", children: rules.map((rule) => (_jsx(PriceRuleCard, { rule: rule, productId: productId, optionId: optionId, productCurrency: productCurrency, onEdit: () => {
+    // The default rate plan IS the everyday grid above — don't re-render its
+    // identical matrix here. Advanced only manages the *extra* plans (net,
+    // contract, promo) plus the default plan's hidden settings (cost,
+    // cancellation, catalog) via "Edit default pricing".
+    const defaultRule = rules.find((rule) => rule.isDefault) ?? rules[0];
+    const additionalRules = rules.filter((rule) => rule.id !== defaultRule?.id);
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: priceRuleMessages.additionalSectionTitle }), _jsx("p", { className: "text-xs text-muted-foreground", children: priceRuleMessages.additionalSectionDescription })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [defaultRule ? (_jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setEditingRule(defaultRule);
+                                    setRuleDialogOpen(true);
+                                }, children: priceRuleMessages.editDefaultAction })) : null, _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                                    setEditingRule(undefined);
+                                    setRuleDialogOpen(true);
+                                }, children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addAction] })] })] }), additionalRules.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: priceRuleMessages.additionalEmpty })) : (_jsx("div", { className: "flex flex-col gap-3", children: additionalRules.map((rule) => (_jsx(PriceRuleCard, { rule: rule, productId: productId, optionId: optionId, productCurrency: productCurrency, onEdit: () => {
                         setEditingRule(rule);
                         setRuleDialogOpen(true);
                     }, onDelete: () => {
@@ -176,7 +199,7 @@ function UnitPriceMatrix({ productId, optionPriceRuleId, optionId, pricingMode,
                                     })] }, unit.id))) })] }) }), _jsx(TravelerCategoryDialog, { open: categoryDialogOpen, onOpenChange: setCategoryDialogOpen, productId: productId, units: units, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
                     setCategoryDialogOpen(false);
                     void refetchCategories();
-                } }), _jsx(UnitPriceRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
+                } }), _jsx(UnitPriceRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
                     setDialogOpen(false);
                     setEditingCell(undefined);
                     setPreselectedUnitId(undefined);
@@ -195,6 +218,21 @@ function initialTravelerCategoryState() {
         allowedUnitIds: [],
     };
 }
+function stateFromCategory(category) {
+    const metadata = category.metadata ?? {};
+    const allowedUnitIds = Array.isArray(metadata.allowedUnitIds)
+        ? metadata.allowedUnitIds.filter((id) => typeof id === "string")
+        : [];
+    return {
+        name: category.name,
+        code: category.code ?? "",
+        categoryType: category.categoryType,
+        minAge: category.minAge != null ? String(category.minAge) : "",
+        maxAge: category.maxAge != null ? String(category.maxAge) : "",
+        condition: typeof metadata.condition === "string" ? metadata.condition : "",
+        allowedUnitIds,
+    };
+}
 function parseOptionalInteger(value) {
     const trimmed = value.trim();
     if (!trimmed)
@@ -202,11 +240,12 @@ function parseOptionalInteger(value) {
     const parsed = Number(trimmed);
     return Number.isFinite(parsed) ? Math.trunc(parsed) : null;
 }
-function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }) {
+export function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, category, onSuccess, }) {
     const messages = useProductDetailMessages();
     const priceRuleMessages = messages.products.operations.priceRules;
     const pricingCategoryMessages = messages.pricing.categories;
-    const { create } = usePricingCategoryMutation();
+    const { create, update } = usePricingCategoryMutation();
+    const isEditing = !!category;
     const [state, setState] = useState(() => initialTravelerCategoryState());
     const [error, setError] = useState(null);
     const travelerCategoryTypes = [
@@ -219,10 +258,10 @@ function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSort
     ];
     useEffect(() => {
         if (open) {
-            setState(initialTravelerCategoryState());
+            setState(category ? stateFromCategory(category) : initialTravelerCategoryState());
             setError(null);
         }
-    }, [open]);
+    }, [open, category]);
     const toggleUnit = (unitId, checked) => {
         setState((prev) => ({
             ...prev,
@@ -249,59 +288,110 @@ function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSort
             metadata.allowedUnitCodes = selectedUnits.map((unit) => unit.code).filter(Boolean);
             metadata.allowedUnitNames = selectedUnits.map((unit) => unit.name);
         }
+        const payload = {
+            // On edit, preserve the category's existing scope — re-stamping a shared
+            // (global) category with this product's id would silently steal it from
+            // every other product that relies on it. Only a freshly created category
+            // is scoped to the current product.
+            productId: category ? (category.productId ?? null) : productId,
+            optionId: category ? (category.optionId ?? null) : null,
+            unitId: null,
+            name,
+            code: state.code.trim() || null,
+            categoryType: state.categoryType,
+            seatOccupancy: 1,
+            isAgeQualified: minAge != null || maxAge != null,
+            minAge,
+            maxAge,
+            internalUseOnly: false,
+            active: true,
+            sortOrder: category?.sortOrder ?? nextSortOrder,
+            metadata: Object.keys(metadata).length > 0 ? metadata : null,
+        };
         try {
-            await create.mutateAsync({
-                productId,
-                optionId: null,
-                unitId: null,
-                name,
-                code: state.code.trim() || null,
-                categoryType: state.categoryType,
-                seatOccupancy: 1,
-                isAgeQualified: minAge != null || maxAge != null,
-                minAge,
-                maxAge,
-                internalUseOnly: false,
-                active: true,
-                sortOrder: nextSortOrder,
-                metadata: Object.keys(metadata).length > 0 ? metadata : null,
-            });
+            if (category) {
+                await update.mutateAsync({ id: category.id, input: payload });
+            }
+            else {
+                await create.mutateAsync(payload);
+            }
             onSuccess();
         }
         catch (err) {
             setError(err instanceof Error ? err.message : priceRuleMessages.travelerCategorySaveFailed);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: priceRuleMessages.travelerCategoryDialogTitle }), _jsx(DialogDescription, { children: priceRuleMessages.travelerCategoryDialogDescription })] }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-name", children: pricingCategoryMessages.nameLabel }), _jsx(Input, { id: "traveler-category-name", autoFocus: true, value: state.name, placeholder: priceRuleMessages.travelerCategoryNamePlaceholder, onChange: (event) => setState((prev) => ({ ...prev, name: event.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-code", children: pricingCategoryMessages.codeLabel }), _jsx(Input, { id: "traveler-category-code", value: state.code, placeholder: priceRuleMessages.travelerCategoryCodePlaceholder, onChange: (event) => setState((prev) => ({ ...prev, code: event.target.value })) })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: pricingCategoryMessages.typeLabel }), _jsxs(Select, { value: state.categoryType, onValueChange: (value) => setState((prev) => ({
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing
+                                ? priceRuleMessages.travelerCategoryEditTitle
+                                : priceRuleMessages.travelerCategoryDialogTitle }), _jsx(DialogDescription, { children: priceRuleMessages.travelerCategoryDialogDescription })] }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-name", children: pricingCategoryMessages.nameLabel }), _jsx(Input, { id: "traveler-category-name", autoFocus: true, value: state.name, placeholder: priceRuleMessages.travelerCategoryNamePlaceholder, onChange: (event) => setState((prev) => ({ ...prev, name: event.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-code", children: pricingCategoryMessages.codeLabel }), _jsx(Input, { id: "traveler-category-code", value: state.code, placeholder: priceRuleMessages.travelerCategoryCodePlaceholder, onChange: (event) => setState((prev) => ({ ...prev, code: event.target.value })) })] })] }), _jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: pricingCategoryMessages.typeLabel }), _jsxs(Select, { value: state.categoryType, onValueChange: (value) => setState((prev) => ({
                                                 ...prev,
                                                 categoryType: (value ?? "child"),
                                             })), items: travelerCategoryTypes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: travelerCategoryTypes.map((type) => (_jsx(SelectItem, { value: type.value, children: type.label }, type.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-min-age", children: pricingCategoryMessages.minAgeLabel }), _jsx(Input, { id: "traveler-category-min-age", type: "number", min: "0", value: state.minAge, onChange: (event) => setState((prev) => ({ ...prev, minAge: event.target.value })) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-max-age", children: pricingCategoryMessages.maxAgeLabel }), _jsx(Input, { id: "traveler-category-max-age", type: "number", min: "0", value: state.maxAge, onChange: (event) => setState((prev) => ({ ...prev, maxAge: event.target.value })) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: priceRuleMessages.travelerCategoryAppliesToLabel }), _jsx("div", { className: "grid gap-2 rounded border p-3 sm:grid-cols-3", children: units.map((unit) => {
                                         const checkboxId = `traveler-category-unit-${unit.id}`;
                                         return (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: checkboxId, checked: state.allowedUnitIds.includes(unit.id), onCheckedChange: (checked) => toggleUnit(unit.id, checked === true) }), _jsx(Label, { htmlFor: checkboxId, className: "font-normal", children: unit.name })] }, unit.id));
-                                    }) }), _jsx("p", { className: "text-muted-foreground text-xs", children: priceRuleMessages.travelerCategoryAppliesToHint })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-condition", children: priceRuleMessages.travelerCategoryConditionLabel }), _jsx(Textarea, { id: "traveler-category-condition", value: state.condition, placeholder: priceRuleMessages.travelerCategoryConditionPlaceholder, onChange: (event) => setState((prev) => ({ ...prev, condition: event.target.value })) })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }), _jsxs(DialogFooter, { className: "-mx-6 -mb-6", children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: pricingCategoryMessages.cancel }), _jsx(Button, { onClick: () => void save(), disabled: create.isPending, children: priceRuleMessages.createTravelerCategory })] })] }) }));
+                                    }) }), _jsx("p", { className: "text-muted-foreground text-xs", children: priceRuleMessages.travelerCategoryAppliesToHint })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "traveler-category-condition", children: priceRuleMessages.travelerCategoryConditionLabel }), _jsx(Textarea, { id: "traveler-category-condition", value: state.condition, placeholder: priceRuleMessages.travelerCategoryConditionPlaceholder, onChange: (event) => setState((prev) => ({ ...prev, condition: event.target.value })) })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null] }), _jsxs(DialogFooter, { className: "-mx-6 -mb-6", children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: pricingCategoryMessages.cancel }), _jsx(Button, { onClick: () => void save(), disabled: create.isPending || update.isPending, children: isEditing
+                                ? priceRuleMessages.updateTravelerCategory
+                                : priceRuleMessages.createTravelerCategory })] })] }) }));
 }
-function ExtraPriceRulesPanel({ productId, optionId, optionPriceRuleId, productCurrency, }) {
+export function ExtraPriceRulesPanel({ productId, optionId, optionPriceRuleId, ensureOptionPriceRuleId, productCurrency, }) {
     const messages = useProductDetailMessages();
     const extraPriceMessages = messages.products.operations.extraPrices;
-    const extrasQuery = useProductExtras({ productId, active: true, limit: 100 });
-    const rulesQuery = useExtraPriceRules({ optionPriceRuleId, optionId, active: true, limit: 100 });
-    const { remove } = useExtraPriceRuleMutation();
+    const extraMessages = messages.products.operations.extras;
+    const extrasQuery = useProductExtras({ productId, limit: 100 });
+    const rulesQuery = useExtraPriceRules({
+        optionPriceRuleId: optionPriceRuleId ?? "__none__",
+        optionId,
+        active: true,
+        limit: 100,
+        enabled: !!optionPriceRuleId,
+    });
+    const { remove: removeExtra } = useProductExtraMutation();
     const [pricingExtraId, setPricingExtraId] = useState(null);
-    const extras = extrasQuery.data?.data ?? [];
+    const [pricingRuleId, setPricingRuleId] = useState(optionPriceRuleId);
+    const [definitionDialogOpen, setDefinitionDialogOpen] = useState(false);
+    const [editingExtra, setEditingExtra] = useState();
+    const extras = (extrasQuery.data?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder);
     const rules = rulesQuery.data?.data ?? [];
     const ruleByExtraId = new Map(rules.flatMap((rule) => (rule.productExtraId ? [[rule.productExtraId, rule]] : [])));
-    if (extras.length === 0)
-        return null;
     const pricingExtra = extras.find((extra) => extra.id === pricingExtraId) ?? null;
-    return (_jsxs("div", { className: "mt-4 border-t pt-3", children: [_jsx("div", { className: "mb-2 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: extraPriceMessages.sectionTitle }), _jsx("div", { className: "flex flex-col gap-2", children: extras.map((extra) => {
+    return (_jsxs("div", { className: "mt-4 border-t pt-3", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between gap-2", children: [_jsx("div", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: extraMessages.sectionTitle }), _jsxs(Button, { variant: "outline", size: "sm", onClick: () => {
+                            setEditingExtra(undefined);
+                            setDefinitionDialogOpen(true);
+                        }, children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), extraMessages.addAction] })] }), extras.length === 0 ? (_jsx("p", { className: "py-2 text-center text-xs text-muted-foreground", children: extraMessages.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: extras.map((extra) => {
                     const rule = ruleByExtraId.get(extra.id);
-                    return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded border px-2 py-1.5 text-xs", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("span", { className: "font-medium", children: extra.name }), extra.pricedPerPerson ? (_jsx("span", { className: "ml-2 text-muted-foreground", children: extraPriceMessages.perTraveler })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-mono", children: rule?.sellAmountCents != null
+                    return (_jsxs("div", { className: "flex items-center justify-between gap-3 rounded border px-2 py-1.5 text-xs", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "font-medium", children: extra.name }), _jsx(Badge, { variant: "secondary", className: "text-[10px]", children: getExtraPricingModeLabel(extra.pricingMode, extraMessages) }), extra.pricedPerPerson ? (_jsx("span", { className: "text-muted-foreground", children: extraPriceMessages.perTraveler })) : null] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-mono", children: rule?.sellAmountCents != null
                                             ? formatProductMoney(rule.sellAmountCents, productCurrency)
-                                            : extraPriceMessages.noAmount }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setPricingExtraId(extra.id), children: extraPriceMessages.setPrice }), rule ? (_jsx(Button, { variant: "ghost", size: "sm", onClick: () => remove.mutate(rule.id, { onSuccess: () => void rulesQuery.refetch() }), children: extraPriceMessages.remove })) : null] })] }, extra.id));
-                }) }), pricingExtra ? (_jsx(ExtraPriceRuleDialog, { open: !!pricingExtra, onOpenChange: (open) => {
+                                            : extraPriceMessages.noAmount }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                                            void (async () => {
+                                                const ruleId = optionPriceRuleId ??
+                                                    (ensureOptionPriceRuleId ? await ensureOptionPriceRuleId() : undefined);
+                                                if (!ruleId)
+                                                    return;
+                                                setPricingRuleId(ruleId);
+                                                setPricingExtraId(extra.id);
+                                            })();
+                                        }, children: extraPriceMessages.setPrice }), _jsx("button", { type: "button", "aria-label": extraMessages.editAction, onClick: () => {
+                                            setEditingExtra(extra);
+                                            setDefinitionDialogOpen(true);
+                                        }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Pencil, { className: "h-3 w-3" }) }), _jsx("button", { type: "button", "aria-label": extraMessages.deleteAction, onClick: () => {
+                                            if (confirm(formatMessage(extraMessages.deleteConfirm, { name: extra.name }))) {
+                                                removeExtra.mutate(extra.id, {
+                                                    onSuccess: () => void extrasQuery.refetch(),
+                                                });
+                                            }
+                                        }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })] }, extra.id));
+                }) })), _jsx(ProductExtraDialog, { open: definitionDialogOpen, onOpenChange: (open) => {
+                    setDefinitionDialogOpen(open);
+                    if (!open)
+                        setEditingExtra(undefined);
+                }, productId: productId, extra: editingExtra, nextSortOrder: extras.length, onSuccess: () => {
+                    setDefinitionDialogOpen(false);
+                    setEditingExtra(undefined);
+                    void extrasQuery.refetch();
+                } }), pricingExtra && (pricingRuleId ?? optionPriceRuleId) ? (_jsx(ExtraPriceRuleDialog, { open: !!pricingExtra, onOpenChange: (open) => {
                     if (!open)
                         setPricingExtraId(null);
-                }, optionPriceRuleId: optionPriceRuleId, optionId: optionId, extra: pricingExtra, existingRule: ruleByExtraId.get(pricingExtra.id), nextSortOrder: rules.length, productCurrency: productCurrency, onSuccess: () => {
+                }, optionPriceRuleId: (pricingRuleId ?? optionPriceRuleId), optionId: optionId, extra: pricingExtra, existingRule: ruleByExtraId.get(pricingExtra.id), nextSortOrder: rules.length, productCurrency: productCurrency, onSuccess: () => {
                     setPricingExtraId(null);
                     void rulesQuery.refetch();
                 } })) : null] }));
@@ -356,7 +446,7 @@ function defaultExtraPriceRuleMode(extra) {
         return "on_request";
     return "per_booking";
 }
-function formatProductMoney(amountCents, currency) {
+export function formatProductMoney(amountCents, currency) {
     if (amountCents == null)
         return "-";
     return `${(amountCents / 100).toFixed(2)} ${currency}`;

package/dist/components/product-detail/product-options-shared.d.ts

@@ -6,6 +6,20 @@ import { type VoyantProductsContextValue } from "@voyantjs/products-react";
  */
 export type OptionsClient = VoyantProductsContextValue;
 export declare const optionStatusVariant: Record<string, "default" | "secondary" | "outline" | "destructive">;
+/**
+ * Which pricing layout an option shows. "rooms" = a room×traveler-type grid
+ * (accommodation / multi-day). "seats" = a flat traveler-type price list
+ * (single-day excursions, transfers). Derived from the product's bookingMode
+ * so the agent never picks a pricing model directly.
+ */
+export type OptionPricingLayout = "rooms" | "seats";
+/**
+ * Derive the pricing layout from the product's booking mode. Multi-day /
+ * overnight modes imply rooms; single-day activity modes imply per-person
+ * seats. `dayCount` is a fallback for the ambiguous `other` mode (>1 day →
+ * rooms), matching the operator rule "more than one day means rooms".
+ */
+export declare function deriveOptionPricingLayout(bookingMode: string | null | undefined, dayCount?: number): OptionPricingLayout;
 export declare function getProductOptionsQueryOptions(client: OptionsClient, productId: string): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<{
     data: {
         id: string;