@voyantjs/products-ui 0.101.1 → 0.102.0

package/dist/components/product-detail/product-option-price-rule-form.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOptionPriceRuleMutation } from "@voyantjs/pricing-react";
+import { CancellationPolicyCombobox } from "@voyantjs/pricing-ui/components/cancellation-policy-combobox";
+import { PriceCatalogCombobox } from "@voyantjs/pricing-ui/components/price-catalog-combobox";
+import { PriceScheduleCombobox } from "@voyantjs/pricing-ui/components/price-schedule-combobox";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailMessages } from "./host.js";
+import { zodResolver } from "./zod-resolver.js";
+const buildRuleFormSchema = (messages) => z.object({
+    priceCatalogId: z.string().min(1, messages.validationCatalogRequired),
+    priceScheduleId: z.string().optional().nullable(),
+    cancellationPolicyId: z.string().optional().nullable(),
+    name: z.string().min(1, messages.validationNameRequired).max(255),
+    code: z.string().max(100).optional().nullable(),
+    description: z.string().optional().nullable(),
+    pricingMode: z.enum(["per_person", "per_booking", "starting_from", "free", "on_request"]),
+    baseSell: z.coerce.number().min(0),
+    baseCost: z.coerce.number().min(0),
+    minPerBooking: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+    maxPerBooking: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+    allPricingCategories: z.boolean(),
+    isDefault: z.boolean(),
+    active: z.boolean(),
+    notes: z.string().optional().nullable(),
+});
+function initialValues(rule) {
+    if (rule) {
+        return {
+            priceCatalogId: rule.priceCatalogId,
+            priceScheduleId: rule.priceScheduleId ?? "",
+            cancellationPolicyId: rule.cancellationPolicyId ?? "",
+            name: rule.name,
+            code: rule.code ?? "",
+            description: rule.description ?? "",
+            pricingMode: rule.pricingMode,
+            baseSell: (rule.baseSellAmountCents ?? 0) / 100,
+            baseCost: (rule.baseCostAmountCents ?? 0) / 100,
+            minPerBooking: rule.minPerBooking ?? "",
+            maxPerBooking: rule.maxPerBooking ?? "",
+            allPricingCategories: rule.allPricingCategories,
+            isDefault: rule.isDefault,
+            active: rule.active,
+            notes: rule.notes ?? "",
+        };
+    }
+    return {
+        priceCatalogId: "",
+        priceScheduleId: "",
+        cancellationPolicyId: "",
+        name: "",
+        code: "",
+        description: "",
+        pricingMode: "per_person",
+        baseSell: 0,
+        baseCost: 0,
+        minPerBooking: "",
+        maxPerBooking: "",
+        allPricingCategories: true,
+        isDefault: false,
+        active: true,
+        notes: "",
+    };
+}
+export function OptionPriceRuleForm({ productId, optionId, rule, onSuccess, onCancel, }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const isEditing = !!rule;
+    const { create, update } = useOptionPriceRuleMutation();
+    const ruleFormSchema = buildRuleFormSchema(priceRuleMessages);
+    const pricingModes = [
+        { value: "per_person", label: priceRuleMessages.pricingModePerPerson },
+        { value: "per_booking", label: priceRuleMessages.pricingModePerBooking },
+        { value: "starting_from", label: priceRuleMessages.pricingModeStartingFrom },
+        { value: "free", label: priceRuleMessages.pricingModeFree },
+        { value: "on_request", label: priceRuleMessages.pricingModeOnRequest },
+    ];
+    const form = useForm({
+        resolver: zodResolver(ruleFormSchema),
+        defaultValues: initialValues(rule),
+    });
+    const watchedCatalogId = form.watch("priceCatalogId");
+    useEffect(() => {
+        form.reset(initialValues(rule));
+    }, [rule, form]);
+    const onSubmit = async (values) => {
+        const payload = {
+            productId,
+            optionId,
+            priceCatalogId: values.priceCatalogId,
+            priceScheduleId: values.priceScheduleId || null,
+            cancellationPolicyId: values.cancellationPolicyId || null,
+            name: values.name,
+            code: values.code || null,
+            description: values.description || null,
+            pricingMode: values.pricingMode,
+            baseSellAmountCents: Math.round(values.baseSell * 100),
+            baseCostAmountCents: Math.round(values.baseCost * 100),
+            minPerBooking: typeof values.minPerBooking === "number" ? values.minPerBooking : null,
+            maxPerBooking: typeof values.maxPerBooking === "number" ? values.maxPerBooking : null,
+            allPricingCategories: values.allPricingCategories,
+            isDefault: values.isDefault,
+            active: values.active,
+            notes: values.notes || null,
+        };
+        if (isEditing) {
+            await update.mutateAsync({ id: rule.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.catalogLabel }), _jsx(PriceCatalogCombobox, { value: form.watch("priceCatalogId"), onChange: (value) => {
+                                            form.setValue("priceCatalogId", value ?? "", {
+                                                shouldDirty: true,
+                                                shouldValidate: true,
+                                            });
+                                            form.setValue("priceScheduleId", "", { shouldDirty: true });
+                                        } }), form.formState.errors.priceCatalogId && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.priceCatalogId.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: priceRuleMessages.namePlaceholder }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.scheduleLabel }), _jsx(PriceScheduleCombobox, { priceCatalogId: watchedCatalogId, value: form.watch("priceScheduleId"), onChange: (value) => form.setValue("priceScheduleId", value ?? "", { shouldDirty: true }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.cancellationPolicyLabel }), _jsx(CancellationPolicyCombobox, { value: form.watch("cancellationPolicyId"), onChange: (value) => form.setValue("cancellationPolicyId", value ?? "", { shouldDirty: true }) })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.pricingModeLabel }), _jsxs(Select, { value: form.watch("pricingMode"), onValueChange: (v) => form.setValue("pricingMode", v), items: pricingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((m) => (_jsx(SelectItem, { value: m.value, children: m.label }, m.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.baseSellInputLabel }), _jsx(Input, { ...form.register("baseSell"), type: "number", step: "0.01", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.baseCostInputLabel }), _jsx(Input, { ...form.register("baseCost"), type: "number", step: "0.01", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.codeLabel }), _jsx(Input, { ...form.register("code"), placeholder: priceRuleMessages.codePlaceholder })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.descriptionLabel }), _jsx(Input, { ...form.register("description") })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.minPerBookingLabel }), _jsx(Input, { ...form.register("minPerBooking"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.maxPerBookingLabel }), _jsx(Input, { ...form.register("maxPerBooking"), type: "number", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("allPricingCategories"), onCheckedChange: (v) => form.setValue("allPricingCategories", v) }), _jsx(Label, { children: priceRuleMessages.allCategoriesSwitchLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("isDefault"), onCheckedChange: (v) => form.setValue("isDefault", v) }), _jsx(Label, { children: priceRuleMessages.defaultSwitchLabel })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (v) => form.setValue("active", v) }), _jsx(Label, { children: priceRuleMessages.activeSwitchLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: priceRuleMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes") })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : priceRuleMessages.create] })] })] }));
+}

package/dist/components/product-detail/product-option-pricing-grid.d.ts

@@ -0,0 +1,16 @@
+import { type OptionPricingLayout } from "./product-options-shared.js";
+export interface OptionPricingGridProps {
+    productId: string;
+    optionId: string;
+    optionName: string;
+    productCurrency: string;
+    layout: OptionPricingLayout;
+}
+/**
+ * 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 declare function OptionPricingGrid({ productId, optionId, optionName, productCurrency, layout, }: OptionPricingGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-pricing-grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-pricing-grid.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-option-pricing-grid.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAML,KAAK,mBAAmB,EACzB,MAAM,6BAA6B,CAAA;AA8BpC,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,mBAAmB,CAAA;CAC5B;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,UAAU,EACV,eAAe,EACf,MAAM,GACP,EAAE,sBAAsB,2CAoWxB"}

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

@@ -0,0 +1,193 @@
+"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, } 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, 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 { 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 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 [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 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: () => 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);
+                                        return (_jsxs("th", { className: "p-2.5 text-left font-medium", 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] }, 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(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: 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: 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

@@ -0,0 +1,34 @@
+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, onSuccess, }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    units: OptionUnitData[];
+    nextSortOrder: number;
+    onSuccess: () => void;
+}): 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

@@ -0,0 +1 @@
+{"version":3,"file":"product-options-pricing.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-options-pricing.tsx"],"names":[],"mappings":"AAuCA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AAMpD,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;AAwcD,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAa,EACb,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,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,2CAgNA;AAgOD,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,UAG1F"}