@voyantjs/products-ui 0.101.1 → 0.101.2

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-options-pricing.d.ts

@@ -0,0 +1,6 @@
+export declare function PricingPanel({ productId, optionId, productCurrency, }: {
+    productId: string;
+    optionId: string;
+    productCurrency: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# 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":"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"}

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

@@ -0,0 +1,363 @@
+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 { 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 { useEffect, useState } from "react";
+import { useProductDetailMessages } from "./host.js";
+import { OptionPriceRuleDialog, } from "./product-option-price-rule-dialog.js";
+import { getOptionPriceRulesQueryOptions, getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
+import { UnitPriceRuleDialog, } from "./product-unit-price-rule-dialog.js";
+function getRulePricingModeLabel(value, messages) {
+    switch (value) {
+        case "per_person":
+            return messages.pricingModePerPerson;
+        case "per_booking":
+            return messages.pricingModePerBooking;
+        case "starting_from":
+            return messages.pricingModeStartingFrom;
+        case "free":
+            return messages.pricingModeFree;
+        case "on_request":
+            return messages.pricingModeOnRequest;
+        default:
+            return value;
+    }
+}
+function getUnitTypeLabel(type, messages) {
+    switch (type) {
+        case "person":
+            return messages.typePerson;
+        case "group":
+            return messages.typeGroup;
+        case "room":
+            return messages.typeRoom;
+        case "vehicle":
+            return messages.typeVehicle;
+        case "service":
+            return messages.typeService;
+        case "other":
+            return messages.typeOther;
+        default:
+            return type;
+    }
+}
+function getCategoryCondition(metadata) {
+    const condition = metadata?.condition;
+    return typeof condition === "string" && condition.trim().length > 0 ? condition : null;
+}
+function categoryAppliesToUnit(category, unit) {
+    if (!category.id)
+        return true;
+    const allowedUnitIds = category.metadata?.allowedUnitIds;
+    if (!Array.isArray(allowedUnitIds) || allowedUnitIds.length === 0)
+        return true;
+    return allowedUnitIds.includes(unit.id);
+}
+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, }) {
+    const messages = useProductDetailMessages();
+    const client = useVoyantProductsContext();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const [ruleDialogOpen, setRuleDialogOpen] = useState(false);
+    const [editingRule, setEditingRule] = useState();
+    const { data, refetch } = useQuery(getOptionPriceRulesQueryOptions(client, optionId));
+    const { remove: removeRule } = useOptionPriceRuleMutation();
+    const deleteMutation = useMutation({
+        mutationFn: (id) => removeRule.mutateAsync(id),
+        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: () => {
+                        setEditingRule(rule);
+                        setRuleDialogOpen(true);
+                    }, onDelete: () => {
+                        if (confirm(formatMessage(priceRuleMessages.deleteRuleConfirm, { name: rule.name }))) {
+                            deleteMutation.mutate(rule.id);
+                        }
+                    } }, rule.id))) })), _jsx(OptionPriceRuleDialog, { open: ruleDialogOpen, onOpenChange: setRuleDialogOpen, productId: productId, optionId: optionId, rule: editingRule, onSuccess: () => {
+                    setRuleDialogOpen(false);
+                    setEditingRule(undefined);
+                    void refetch();
+                } })] }));
+}
+function PriceRuleCard({ rule, productId, optionId, productCurrency, onEdit, onDelete, }) {
+    const messages = useProductDetailMessages();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    return (_jsxs("div", { className: "rounded-lg border bg-background p-4", children: [_jsxs("div", { className: "flex items-start justify-between", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: rule.name }), _jsx(Badge, { variant: "outline", className: "text-xs capitalize", children: getRulePricingModeLabel(rule.pricingMode, priceRuleMessages) }), rule.isDefault && _jsx(Badge, { variant: "secondary", children: priceRuleMessages.defaultBadge }), _jsx(Badge, { variant: rule.active ? "default" : "outline", children: rule.active ? priceRuleMessages.activeBadge : priceRuleMessages.inactiveBadge })] }), _jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [_jsxs("span", { children: [priceRuleMessages.baseSellLabel, ":", " ", _jsx("span", { className: "font-mono text-foreground", children: formatProductMoney(rule.baseSellAmountCents, productCurrency) })] }), _jsxs("span", { children: [priceRuleMessages.baseCostLabel, ":", " ", _jsx("span", { className: "font-mono text-foreground", children: formatProductMoney(rule.baseCostAmountCents, productCurrency) })] }), rule.allPricingCategories && _jsx("span", { children: priceRuleMessages.allCategoriesLabel })] })] }), _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(Pencil, { className: "h-4 w-4" }), priceRuleMessages.editAction] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: onDelete, children: [_jsx(Trash2, { className: "h-4 w-4" }), priceRuleMessages.deleteAction] })] })] }), _jsxs("div", { className: "mt-3", children: [_jsx(UnitPriceMatrix, { productId: productId, optionPriceRuleId: rule.id, optionId: optionId, pricingMode: rule.pricingMode, allPricingCategories: rule.allPricingCategories, productCurrency: productCurrency }), _jsx(ExtraPriceRulesPanel, { productId: productId, optionId: optionId, optionPriceRuleId: rule.id, productCurrency: productCurrency })] })] }));
+}
+function UnitPriceMatrix({ productId, optionPriceRuleId, optionId, pricingMode, allPricingCategories, productCurrency, }) {
+    const messages = useProductDetailMessages();
+    const client = useVoyantProductsContext();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const unitMessages = messages.products.operations.units;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingCell, setEditingCell] = useState();
+    const [preselectedUnitId, setPreselectedUnitId] = useState();
+    const [preselectedCategoryId, setPreselectedCategoryId] = useState();
+    const [categoryDialogOpen, setCategoryDialogOpen] = useState(false);
+    const { data: unitsData } = useQuery(getOptionUnitsQueryOptions(client, optionId));
+    const { data: categoriesData, refetch: refetchCategories } = useQuery(getPricingCategoriesQueryOptions(client));
+    const { data: cellsData, refetch: refetchCells } = useQuery(getOptionUnitPriceRulesQueryOptions(client, optionPriceRuleId));
+    const { remove } = useOptionUnitPriceRuleMutation();
+    const deleteMutation = useMutation({
+        mutationFn: (id) => remove.mutateAsync(id),
+        onSuccess: () => void refetchCells(),
+    });
+    const units = (unitsData?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder);
+    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)));
+    const isPersonOnly = units.length > 0 && units.every((unit) => unit.unitType === "person");
+    const findCell = (unitId, categoryId) => cells.find((cell) => cell.unitId === unitId && (cell.pricingCategoryId ?? null) === categoryId) ?? null;
+    if (units.length === 0) {
+        return _jsx("p", { className: "text-xs italic text-muted-foreground", children: priceRuleMessages.addUnitsHint });
+    }
+    if (pricingMode === "per_booking") {
+        return (_jsx("p", { className: "text-xs italic text-muted-foreground", children: priceRuleMessages.perBookingFlatHint }));
+    }
+    // Per-pax tour with no category cross-cut: render a simple unit-only table
+    // (Sell / Cost) instead of the unit×category matrix. Operators on
+    // accommodation products (or rules with allPricingCategories=false) still
+    // get the full matrix.
+    const useSimpleTable = pricingMode === "per_person" && allPricingCategories;
+    const tableTitle = useSimpleTable
+        ? isPersonOnly
+            ? priceRuleMessages.personUnitPricingTitle
+            : priceRuleMessages.unitPricingTitle
+        : isPersonOnly
+            ? priceRuleMessages.personUnitCategoryTitle
+            : priceRuleMessages.unitCategoryTitle;
+    const unitColumnLabel = isPersonOnly
+        ? priceRuleMessages.tableTravelerUnit
+        : priceRuleMessages.tableUnit;
+    const columns = useSimpleTable
+        ? [{ id: null, name: priceRuleMessages.tableSell }]
+        : categories.length > 0
+            ? categories.map((category) => ({
+                id: category.id,
+                name: category.name,
+                metadata: category.metadata,
+            }))
+            : [{ id: null, name: priceRuleMessages.defaultBadge }];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: tableTitle }), !useSimpleTable ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCategoryDialogOpen(true), children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addTravelerCategory] })) : null] }), _jsx("div", { className: "overflow-x-auto rounded border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/50 text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: unitColumnLabel }), columns.map((category) => {
+                                        const condition = getCategoryCondition(category.metadata);
+                                        return (_jsxs("th", { className: "p-2 text-left font-medium", children: [_jsx("div", { children: category.name }), condition ? (_jsx("div", { className: "mt-0.5 max-w-[220px] text-[10px] font-normal leading-snug text-muted-foreground normal-case", children: condition })) : null] }, category.id ?? "__default__"));
+                                    })] }) }), _jsx("tbody", { children: units.map((unit) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "p-2 font-medium", children: [unit.name, _jsxs("span", { className: "ml-1 text-[10px] text-muted-foreground", children: ["(", getUnitTypeLabel(unit.unitType, unitMessages), ")"] })] }), columns.map((category) => {
+                                        const cell = findCell(unit.id, category.id);
+                                        const canPriceCategory = categoryAppliesToUnit(category, unit);
+                                        return (_jsx("td", { className: "p-2", children: cell ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
+                                                            setEditingCell(cell);
+                                                            setPreselectedUnitId(undefined);
+                                                            setPreselectedCategoryId(undefined);
+                                                            setDialogOpen(true);
+                                                        }, className: "font-mono text-foreground hover:underline", children: formatProductMoney(cell.sellAmountCents, productCurrency) }), _jsx("button", { type: "button", onClick: () => {
+                                                            if (confirm(priceRuleMessages.deleteCellConfirm)) {
+                                                                deleteMutation.mutate(cell.id);
+                                                            }
+                                                        }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })) : canPriceCategory ? (_jsx("button", { type: "button", onClick: () => {
+                                                    setEditingCell(undefined);
+                                                    setPreselectedUnitId(unit.id);
+                                                    setPreselectedCategoryId(category.id);
+                                                    setDialogOpen(true);
+                                                }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Plus, { className: "h-3 w-3" }) })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }, category.id ?? "__default__"));
+                                    })] }, 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: () => {
+                    setDialogOpen(false);
+                    setEditingCell(undefined);
+                    setPreselectedUnitId(undefined);
+                    setPreselectedCategoryId(undefined);
+                    void refetchCells();
+                } })] }));
+}
+function initialTravelerCategoryState() {
+    return {
+        name: "",
+        code: "",
+        categoryType: "child",
+        minAge: "",
+        maxAge: "",
+        condition: "",
+        allowedUnitIds: [],
+    };
+}
+function parseOptionalInteger(value) {
+    const trimmed = value.trim();
+    if (!trimmed)
+        return null;
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? Math.trunc(parsed) : null;
+}
+function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }) {
+    const messages = useProductDetailMessages();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const pricingCategoryMessages = messages.pricing.categories;
+    const { create } = usePricingCategoryMutation();
+    const [state, setState] = useState(() => initialTravelerCategoryState());
+    const [error, setError] = useState(null);
+    const travelerCategoryTypes = [
+        { value: "adult", label: pricingCategoryMessages.typeAdult },
+        { value: "child", label: pricingCategoryMessages.typeChild },
+        { value: "infant", label: pricingCategoryMessages.typeInfant },
+        { value: "senior", label: pricingCategoryMessages.typeSenior },
+        { value: "group", label: pricingCategoryMessages.typeGroup },
+        { value: "other", label: pricingCategoryMessages.typeOther },
+    ];
+    useEffect(() => {
+        if (open) {
+            setState(initialTravelerCategoryState());
+            setError(null);
+        }
+    }, [open]);
+    const toggleUnit = (unitId, checked) => {
+        setState((prev) => ({
+            ...prev,
+            allowedUnitIds: checked
+                ? [...prev.allowedUnitIds, unitId]
+                : prev.allowedUnitIds.filter((id) => id !== unitId),
+        }));
+    };
+    const save = async () => {
+        const name = state.name.trim();
+        if (!name) {
+            setError(priceRuleMessages.travelerCategoryNameRequired);
+            return;
+        }
+        const selectedUnits = units.filter((unit) => state.allowedUnitIds.includes(unit.id));
+        const minAge = parseOptionalInteger(state.minAge);
+        const maxAge = parseOptionalInteger(state.maxAge);
+        const condition = state.condition.trim();
+        const metadata = {};
+        if (condition)
+            metadata.condition = condition;
+        if (selectedUnits.length > 0) {
+            metadata.allowedUnitIds = selectedUnits.map((unit) => unit.id);
+            metadata.allowedUnitCodes = selectedUnits.map((unit) => unit.code).filter(Boolean);
+            metadata.allowedUnitNames = selectedUnits.map((unit) => unit.name);
+        }
+        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,
+            });
+            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) => ({
+                                                ...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 })] })] }) }));
+}
+function ExtraPriceRulesPanel({ productId, optionId, optionPriceRuleId, 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 [pricingExtraId, setPricingExtraId] = useState(null);
+    const extras = extrasQuery.data?.data ?? [];
+    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) => {
+                    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
+                                            ? 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) => {
+                    if (!open)
+                        setPricingExtraId(null);
+                }, optionPriceRuleId: optionPriceRuleId, optionId: optionId, extra: pricingExtra, existingRule: ruleByExtraId.get(pricingExtra.id), nextSortOrder: rules.length, productCurrency: productCurrency, onSuccess: () => {
+                    setPricingExtraId(null);
+                    void rulesQuery.refetch();
+                } })) : null] }));
+}
+function ExtraPriceRuleDialog({ open, onOpenChange, optionPriceRuleId, optionId, extra, existingRule, nextSortOrder, productCurrency, onSuccess, }) {
+    const messages = useProductDetailMessages();
+    const extraPriceMessages = messages.products.operations.extraPrices;
+    const { create, update } = useExtraPriceRuleMutation();
+    const [amount, setAmount] = useState("");
+    const [pricingMode, setPricingMode] = useState("per_booking");
+    const isEditing = !!existingRule;
+    const pricingModes = [
+        { value: "per_booking", label: extraPriceMessages.pricingPerBooking },
+        { value: "per_person", label: extraPriceMessages.pricingPerPerson },
+        { value: "included", label: extraPriceMessages.pricingIncluded },
+        { value: "on_request", label: extraPriceMessages.pricingOnRequest },
+        { value: "unavailable", label: extraPriceMessages.pricingUnavailable },
+    ];
+    useEffect(() => {
+        setAmount(existingRule?.sellAmountCents != null ? String(existingRule.sellAmountCents / 100) : "");
+        setPricingMode(existingRule?.pricingMode ?? defaultExtraPriceRuleMode(extra));
+    }, [existingRule, extra]);
+    const save = async () => {
+        const parsedAmount = amount.trim() === "" ? null : Math.round(Number(amount) * 100);
+        if (parsedAmount != null && (!Number.isFinite(parsedAmount) || parsedAmount < 0))
+            return;
+        const payload = {
+            optionPriceRuleId,
+            optionId,
+            productExtraId: extra.id,
+            optionExtraConfigId: null,
+            pricingMode,
+            sellAmountCents: parsedAmount,
+            costAmountCents: null,
+            active: true,
+            sortOrder: existingRule?.sortOrder ?? nextSortOrder,
+        };
+        if (existingRule)
+            await update.mutateAsync({ id: existingRule.id, input: payload });
+        else
+            await create.mutateAsync(payload);
+        onSuccess();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing ? extraPriceMessages.editTitle : extraPriceMessages.newTitle }), _jsx(DialogDescription, { children: extra.name })] }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: extraPriceMessages.pricingModeLabel }), _jsxs(Select, { value: pricingMode, onValueChange: (value) => setPricingMode((value ?? "per_booking")), items: pricingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((mode) => (_jsx(SelectItem, { value: mode.value, children: mode.label }, mode.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: extraPriceMessages.sellAmountLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { value: amount, type: "number", min: "0", step: "0.01", onChange: (event) => setAmount(event.target.value) }), _jsx("span", { className: "min-w-12 text-muted-foreground text-sm", children: productCurrency })] })] })] }), _jsxs(DialogFooter, { className: "-mx-6 -mb-6", children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: extraPriceMessages.cancel }), _jsx(Button, { onClick: () => void save(), children: extraPriceMessages.save })] })] }) }));
+}
+function defaultExtraPriceRuleMode(extra) {
+    if (extra.pricedPerPerson || extra.pricingMode === "per_person")
+        return "per_person";
+    if (extra.pricingMode === "included" || extra.pricingMode === "free")
+        return "included";
+    if (extra.pricingMode === "on_request")
+        return "on_request";
+    return "per_booking";
+}
+function formatProductMoney(amountCents, currency) {
+    if (amountCents == null)
+        return "-";
+    return `${(amountCents / 100).toFixed(2)} ${currency}`;
+}