@voyantjs/products-ui 0.102.0 → 0.104.0

package/dist/components/product-detail/product-detail-form.d.ts

@@ -3,6 +3,9 @@ export type ProductData = {
     name: string;
     status: "draft" | "active" | "archived";
     description: string | null;
+    inclusionsHtml: string | null;
+    exclusionsHtml: string | null;
+    termsHtml: string | null;
     bookingMode: "date" | "date_time" | "open" | "stay" | "transfer" | "itinerary" | "other";
     productTypeId: string | null;
     taxClassId: string | null;

package/dist/components/product-detail/product-detail-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-detail-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-form.tsx"],"names":[],"mappings":"AAuCA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACnC,CAAA;AAgBD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA6BD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAwWzF"}
+{"version":3,"file":"product-detail-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-form.tsx"],"names":[],"mappings":"AAuCA,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAA;IACxF,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,CAAA;IACpB,IAAI,EAAE,MAAM,EAAE,CAAA;IACd,kBAAkB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACnC,CAAA;AAgBD,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAmCD,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CA8ZzF"}

package/dist/components/product-detail/product-detail-form.js

@@ -20,6 +20,9 @@ function initialValues(product) {
             name: product.name,
             status: product.status,
             description: product.description ?? "",
+            inclusionsHtml: product.inclusionsHtml ?? "",
+            exclusionsHtml: product.exclusionsHtml ?? "",
+            termsHtml: product.termsHtml ?? "",
             bookingMode: product.bookingMode,
             productTypeId: product.productTypeId ?? "",
             taxClassId: product.taxClassId ?? "",
@@ -32,6 +35,9 @@ function initialValues(product) {
         name: "",
         status: "draft",
         description: "",
+        inclusionsHtml: "",
+        exclusionsHtml: "",
+        termsHtml: "",
         bookingMode: "itinerary",
         productTypeId: "",
         taxClassId: "",
@@ -49,6 +55,9 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
         name: z.string().min(1, productMessages.validationNameRequired),
         status: z.enum(["draft", "active", "archived"]),
         description: z.string().optional().nullable(),
+        inclusionsHtml: z.string().optional().nullable(),
+        exclusionsHtml: z.string().optional().nullable(),
+        termsHtml: z.string().optional().nullable(),
         bookingMode: z.enum(["date", "date_time", "open", "stay", "transfer", "itinerary", "other"]),
         productTypeId: z.string().optional().nullable(),
         taxClassId: z.string().optional().nullable(),
@@ -111,6 +120,9 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
             name: values.name,
             status: values.status,
             description: values.description || null,
+            inclusionsHtml: values.inclusionsHtml || null,
+            exclusionsHtml: values.exclusionsHtml || null,
+            termsHtml: values.termsHtml || null,
             bookingMode: values.bookingMode,
             productTypeId: values.productTypeId || null,
             taxClassId: values.taxClassId || null,
@@ -122,6 +134,9 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
             defaultLanguageTag: resolvedDefaultLanguage,
             baseName: values.name,
             baseDescription: values.description ?? "",
+            baseInclusionsHtml: values.inclusionsHtml ?? "",
+            baseExclusionsHtml: values.exclusionsHtml ?? "",
+            baseTermsHtml: values.termsHtml ?? "",
         };
         if (isEditing) {
             await api.patch(`/v1/products/${product.id}`, payload);
@@ -147,7 +162,16 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
                         }, translations: translations, messages: productMessages, placeholder: productMessages.namePlaceholder, autoFocus: true, error: form.formState.errors.name?.message }), _jsx(TranslatableField, { label: productMessages.descriptionLabel, type: "richtext", field: "description", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, base: {
                             value: form.watch("description") ?? "",
                             onChange: (value) => form.setValue("description", value, { shouldDirty: true }),
-                        }, translations: translations, messages: productMessages, placeholder: productMessages.descriptionPlaceholder }), _jsx(TranslatableField, { label: productMessages.slugLabel, type: "text", field: "slug", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, translations: translations, messages: productMessages, placeholder: productMessages.slugPlaceholder }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.defaultLanguageLabel }), _jsx(LanguageCombobox, { value: form.watch("defaultLanguageTag")?.trim() || adminBaseLocale, onValueChange: (code) => form.setValue("defaultLanguageTag", code, { shouldDirty: true }), placeholder: productMessages.translationLanguageSearch, emptyLabel: productMessages.translationLanguageEmpty }), _jsx("p", { className: "text-xs text-muted-foreground", children: productMessages.defaultLanguageHint })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.tagsLabel }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: (form.watch("tags") ?? []).map((tag) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 text-xs", children: [tag, _jsx("button", { type: "button", className: "ml-0.5 rounded-full hover:text-destructive", onClick: () => {
+                        }, translations: translations, messages: productMessages, placeholder: productMessages.descriptionPlaceholder }), _jsx(TranslatableField, { label: productMessages.slugLabel, type: "text", field: "slug", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, translations: translations, messages: productMessages, placeholder: productMessages.slugPlaceholder }), _jsx(TranslatableField, { label: productMessages.inclusionsLabel, type: "richtext", field: "inclusionsHtml", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, base: {
+                            value: form.watch("inclusionsHtml") ?? "",
+                            onChange: (value) => form.setValue("inclusionsHtml", value, { shouldDirty: true }),
+                        }, translations: translations, messages: productMessages, placeholder: productMessages.inclusionsPlaceholder }), _jsx(TranslatableField, { label: productMessages.exclusionsLabel, type: "richtext", field: "exclusionsHtml", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, base: {
+                            value: form.watch("exclusionsHtml") ?? "",
+                            onChange: (value) => form.setValue("exclusionsHtml", value, { shouldDirty: true }),
+                        }, translations: translations, messages: productMessages, placeholder: productMessages.exclusionsPlaceholder }), _jsx(TranslatableField, { label: productMessages.termsLabel, type: "richtext", field: "termsHtml", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, base: {
+                            value: form.watch("termsHtml") ?? "",
+                            onChange: (value) => form.setValue("termsHtml", value, { shouldDirty: true }),
+                        }, translations: translations, messages: productMessages, placeholder: productMessages.termsPlaceholder }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.defaultLanguageLabel }), _jsx(LanguageCombobox, { value: form.watch("defaultLanguageTag")?.trim() || adminBaseLocale, onValueChange: (code) => form.setValue("defaultLanguageTag", code, { shouldDirty: true }), placeholder: productMessages.translationLanguageSearch, emptyLabel: productMessages.translationLanguageEmpty }), _jsx("p", { className: "text-xs text-muted-foreground", children: productMessages.defaultLanguageHint })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.tagsLabel }), _jsx("div", { className: "flex flex-wrap gap-1.5", children: (form.watch("tags") ?? []).map((tag) => (_jsxs(Badge, { variant: "secondary", className: "gap-1 text-xs", children: [tag, _jsx("button", { type: "button", className: "ml-0.5 rounded-full hover:text-destructive", onClick: () => {
                                                 const current = form.getValues("tags") ?? [];
                                                 form.setValue("tags", current.filter((t) => t !== tag), { shouldDirty: true });
                                             }, children: _jsx(X, { className: "h-3 w-3" }) })] }, tag))) }), _jsx(Input, { value: tagInput, onChange: (e) => setTagInput(e.target.value), onKeyDown: (e) => {

package/dist/components/product-detail/product-detail-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-page.tsx"],"names":[],"mappings":"AAmCA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CAgNvD"}
+{"version":3,"file":"product-detail-page.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-page.tsx"],"names":[],"mappings":"AAkCA,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,EAAE;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,2CA8MvD"}

package/dist/components/product-detail/product-detail-page.js

@@ -14,7 +14,6 @@ import { ProductDetailHeader } from "./product-detail-header.js";
 import { ProductDetailItinerarySection } from "./product-detail-itinerary-section.js";
 import { ProductBrochureSection, ProductChannelsSection, ProductDeparturesSection, ProductDetailsSection, ProductMediaSection, ProductOrganizeSection, ProductSchedulesSection, } from "./product-detail-sections.js";
 import { ProductDetailSkeleton } from "./product-detail-skeleton.js";
-import { ProductExtrasSection } from "./product-extras-section.js";
 import { ProductMarketRulesSection } from "./product-market-rules-section.js";
 import { PricingPanel } from "./product-options-pricing.js";
 import { deriveOptionPricingLayout, getDeparturePriceOverridesQueryOptions, } from "./product-options-shared.js";
@@ -82,7 +81,7 @@ export function ProductDetailPage({ id }) {
                                     if (confirm(productMessages.deleteScheduleConfirm)) {
                                         mutations.deleteRule.mutate(ruleId);
                                     }
-                                } }), _jsx(ProductDetailItinerarySection, { productId: id }), _jsx(ProductsUiMessagesProvider, { locale: resolvedLocale, children: _jsx(ProductOptionsSection, { productId: id, renderOptionDetails: (option) => (_jsx(PricingPanel, { productId: id, optionId: option.id, optionName: option.name, productCurrency: product.sellCurrency, layout: deriveOptionPricingLayout(product.bookingMode), extras: renderOptionExtras?.(id, option.id) })) }) }), _jsx(ProductExtrasSection, { productId: id }), _jsx(ProductPaymentPolicySection, { product: product, onSuccess: invalidateProduct }), _jsx(ProductMarketRulesSection, { productId: id })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(ProductChannelsSection, { allChannels: channels, mappings: mappings, onAddChannel: (channelId) => mutations.addChannelMapping.mutate(channelId), onRemoveChannel: (mappingId) => mutations.removeChannelMapping.mutate(mappingId) }), _jsx(ProductOrganizeSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductBrochureSection, { brochure: brochure, isGenerating: mutations.generateBrochure.isPending, onGenerate: () => mutations.generateBrochure.mutate() }), _jsx(ProductActivitySection, { productId: id })] })] }), _jsx(ProductDialog, { open: dialogs.edit.open, onOpenChange: dialogs.edit.setOpen, product: product, onSuccess: () => {
+                                } }), _jsx(ProductDetailItinerarySection, { productId: id }), _jsx(ProductsUiMessagesProvider, { locale: resolvedLocale, children: _jsx(ProductOptionsSection, { productId: id, renderOptionDetails: (option) => (_jsx(PricingPanel, { productId: id, optionId: option.id, optionName: option.name, productCurrency: product.sellCurrency, layout: deriveOptionPricingLayout(product.bookingMode), extras: renderOptionExtras?.(id, option.id) })) }) }), _jsx(ProductPaymentPolicySection, { product: product, onSuccess: invalidateProduct }), _jsx(ProductMarketRulesSection, { productId: id })] }), _jsxs("div", { className: "flex flex-col gap-6", children: [_jsx(ProductChannelsSection, { allChannels: channels, mappings: mappings, onAddChannel: (channelId) => mutations.addChannelMapping.mutate(channelId), onRemoveChannel: (mappingId) => mutations.removeChannelMapping.mutate(mappingId) }), _jsx(ProductOrganizeSection, { product: product, onEdit: dialogs.edit.openNow }), _jsx(ProductBrochureSection, { brochure: brochure, isGenerating: mutations.generateBrochure.isPending, onGenerate: () => mutations.generateBrochure.mutate() }), _jsx(ProductActivitySection, { productId: id })] })] }), _jsx(ProductDialog, { open: dialogs.edit.open, onOpenChange: dialogs.edit.setOpen, product: product, onSuccess: () => {
                     dialogs.edit.close();
                     invalidateProduct();
                 } }), _jsx(DepartureDialog, { open: dialogs.departure.open, onOpenChange: dialogs.departure.setOpen, productId: id, slot: dialogs.departure.editing, onSuccess: () => {

package/dist/components/product-detail/product-extra-dialog.d.ts

@@ -0,0 +1,21 @@
+import { type ProductExtraRecord } from "@voyantjs/extras-react";
+import { useProductDetailMessages } from "./host.js";
+type ExtraMessages = ReturnType<typeof useProductDetailMessages>["products"]["operations"]["extras"];
+export declare function getExtraPricingModeLabel(value: ProductExtraRecord["pricingMode"], messages: ExtraMessages): string;
+export interface ProductExtraDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    extra?: ProductExtraRecord;
+    /** Sort order to use when creating a new extra. */
+    nextSortOrder?: number;
+    onSuccess: () => void;
+}
+/**
+ * Create / edit the *definition* of a product extra (name, selection,
+ * pricing mode, quantities). The extra's actual price is set separately, per
+ * booking option, via the extra-price-rule editor.
+ */
+export declare function ProductExtraDialog({ open, onOpenChange, productId, extra, nextSortOrder, onSuccess, }: ProductExtraDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-extra-dialog.d.ts.map

package/dist/components/product-detail/product-extra-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-extra-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-extra-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,wBAAwB,CAAA;AAqBzF,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAA;AA0DpD,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,wBAAwB,CAAC,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC,CAAC,QAAQ,CAAC,CAAA;AAiBpG,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,kBAAkB,CAAC,aAAa,CAAC,EACxC,QAAQ,EAAE,aAAa,UAkBxB;AAED,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,aAAiB,EACjB,SAAS,GACV,EAAE,uBAAuB,2CA4KzB"}

package/dist/components/product-detail/product-extra-dialog.js

@@ -0,0 +1,131 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProductExtraMutation } from "@voyantjs/extras-react";
+import { Button, Checkbox, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
+import * as React from "react";
+import { useProductDetailMessages } from "./host.js";
+const selectionTypes = ["optional", "required", "default_selected", "unavailable"];
+const pricingModes = [
+    "included",
+    "per_person",
+    "per_booking",
+    "quantity_based",
+    "on_request",
+    "free",
+];
+const emptyForm = {
+    name: "",
+    code: "",
+    description: "",
+    selectionType: "optional",
+    pricingMode: "per_booking",
+    pricedPerPerson: false,
+    minQuantity: "",
+    maxQuantity: "",
+    defaultQuantity: "",
+    active: true,
+};
+function formFromExtra(extra) {
+    return {
+        name: extra.name,
+        code: extra.code ?? "",
+        description: extra.description ?? "",
+        selectionType: extra.selectionType,
+        pricingMode: extra.pricingMode,
+        pricedPerPerson: extra.pricedPerPerson,
+        minQuantity: extra.minQuantity == null ? "" : String(extra.minQuantity),
+        maxQuantity: extra.maxQuantity == null ? "" : String(extra.maxQuantity),
+        defaultQuantity: extra.defaultQuantity == null ? "" : String(extra.defaultQuantity),
+        active: extra.active,
+    };
+}
+function parseNullableInt(value) {
+    const parsed = Number.parseInt(value, 10);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function getSelectionTypeLabel(value, messages) {
+    switch (value) {
+        case "optional":
+            return messages.selectionOptional;
+        case "required":
+            return messages.selectionRequired;
+        case "default_selected":
+            return messages.selectionDefaultSelected;
+        case "unavailable":
+            return messages.selectionUnavailable;
+        default:
+            return value;
+    }
+}
+export function getExtraPricingModeLabel(value, messages) {
+    switch (value) {
+        case "included":
+            return messages.pricingIncluded;
+        case "per_person":
+            return messages.pricingPerPerson;
+        case "per_booking":
+            return messages.pricingPerBooking;
+        case "quantity_based":
+            return messages.pricingQuantityBased;
+        case "on_request":
+            return messages.pricingOnRequest;
+        case "free":
+            return messages.pricingFree;
+        default:
+            return value;
+    }
+}
+/**
+ * Create / edit the *definition* of a product extra (name, selection,
+ * pricing mode, quantities). The extra's actual price is set separately, per
+ * booking option, via the extra-price-rule editor.
+ */
+export function ProductExtraDialog({ open, onOpenChange, productId, extra, nextSortOrder = 0, onSuccess, }) {
+    const messages = useProductDetailMessages();
+    const extraMessages = messages.products.operations.extras;
+    const { create, update } = useProductExtraMutation();
+    const [form, setForm] = React.useState(emptyForm);
+    const isEditing = !!extra;
+    React.useEffect(() => {
+        if (open)
+            setForm(extra ? formFromExtra(extra) : emptyForm);
+    }, [open, extra]);
+    const save = async () => {
+        const payload = {
+            productId,
+            name: form.name.trim(),
+            code: form.code.trim() || null,
+            description: form.description.trim() || null,
+            selectionType: form.selectionType,
+            pricingMode: form.pricingMode,
+            pricedPerPerson: form.pricedPerPerson,
+            minQuantity: parseNullableInt(form.minQuantity),
+            maxQuantity: parseNullableInt(form.maxQuantity),
+            defaultQuantity: parseNullableInt(form.defaultQuantity),
+            active: form.active,
+            sortOrder: extra?.sortOrder ?? nextSortOrder,
+        };
+        if (!payload.name)
+            return;
+        if (extra)
+            await update.mutateAsync({ id: extra.id, input: payload });
+        else
+            await create.mutateAsync(payload);
+        onSuccess();
+    };
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing ? extraMessages.editTitle : extraMessages.newTitle }), _jsx(DialogDescription, { children: extraMessages.dialogDescription })] }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(Field, { label: extraMessages.nameLabel, children: _jsx(Input, { value: form.name, onChange: (event) => setForm({ ...form, name: event.target.value }) }) }), _jsx(Field, { label: extraMessages.codeLabel, children: _jsx(Input, { value: form.code, onChange: (event) => setForm({ ...form, code: event.target.value }) }) })] }), _jsx(Field, { label: extraMessages.descriptionLabel, children: _jsx(Textarea, { value: form.description, onChange: (event) => setForm({ ...form, description: event.target.value }) }) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(Field, { label: extraMessages.selectionLabel, children: _jsxs(Select, { value: form.selectionType, onValueChange: (value) => setForm({
+                                            ...form,
+                                            selectionType: (value ?? "optional"),
+                                        }), items: selectionTypes.map((type) => ({
+                                            value: type,
+                                            label: getSelectionTypeLabel(type, extraMessages),
+                                        })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: selectionTypes.map((type) => (_jsx(SelectItem, { value: type, children: getSelectionTypeLabel(type, extraMessages) }, type))) })] }) }), _jsx(Field, { label: extraMessages.pricingLabel, children: _jsxs(Select, { value: form.pricingMode, onValueChange: (value) => setForm({
+                                            ...form,
+                                            pricingMode: (value ?? "per_booking"),
+                                        }), items: pricingModes.map((mode) => ({
+                                            value: mode,
+                                            label: getExtraPricingModeLabel(mode, extraMessages),
+                                        })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((mode) => (_jsx(SelectItem, { value: mode, children: getExtraPricingModeLabel(mode, extraMessages) }, mode))) })] }) }), _jsx(Field, { label: extraMessages.defaultQuantityLabel, children: _jsx(Input, { value: form.defaultQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, defaultQuantity: event.target.value }) }) }), _jsx(Field, { label: extraMessages.minQuantityLabel, children: _jsx(Input, { value: form.minQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, minQuantity: event.target.value }) }) }), _jsx(Field, { label: extraMessages.maxQuantityLabel, children: _jsx(Input, { value: form.maxQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, maxQuantity: event.target.value }) }) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: "product-extra-priced-per-person", checked: form.pricedPerPerson, onCheckedChange: (checked) => setForm({ ...form, pricedPerPerson: checked === true }) }), _jsx(Label, { htmlFor: "product-extra-priced-per-person", children: extraMessages.perTravelerLabel })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: "product-extra-active", checked: form.active, onCheckedChange: (checked) => setForm({ ...form, active: checked === true }) }), _jsx(Label, { htmlFor: "product-extra-active", children: extraMessages.activeLabel })] })] })] }), _jsxs(DialogFooter, { className: "-mx-6 -mb-6", children: [_jsx(Button, { variant: "ghost", onClick: () => onOpenChange(false), children: extraMessages.cancel }), _jsx(Button, { onClick: () => void save(), disabled: !form.name.trim(), children: isEditing ? extraMessages.saveChanges : extraMessages.create })] })] }) }));
+}
+function Field({ label, children }) {
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: label }), children] }));
+}

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

@@ -1 +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"}
+{"version":3,"file":"product-option-pricing-grid.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-option-pricing-grid.tsx"],"names":[],"mappings":"AAyBA,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,2CAybxB"}

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

@@ -2,13 +2,13 @@
 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 { 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, formatProductMoney, getCategoryCondition, TravelerCategoryDialog, } from "./product-options-pricing.js";
+import { categoryAppliesToUnit, ExtraPriceRulesPanel, formatProductMoney, getCategoryCondition, isTravelerCategory, 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";
@@ -38,6 +38,7 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
     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));
@@ -52,6 +53,7 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
     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: () => {
@@ -67,6 +69,7 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
     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();
@@ -91,7 +94,8 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
     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) &&
+        ((isTravelerCategory(category) &&
+            (category.productId == null || category.productId === productId) &&
             (category.optionId == null || category.optionId === optionId)) ||
             referencedCategoryIds.has(category.id)))
         .slice()
@@ -151,10 +155,42 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
         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: () => 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) => {
+    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);
-                                        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__"));
+                                        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) => {
@@ -176,12 +212,17 @@ export function OptionPricingGrid({ productId, optionId, optionName, productCurr
                                                                 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: () => {
+                            }) })] }) })), _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: setCategoryDialogOpen, productId: productId, units: units, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
+                } }), _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);

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

@@ -1,8 +1,12 @@
+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 isTravelerCategory(category: {
+    categoryType: PricingCategoryRecord["categoryType"];
+}): boolean;
 export declare function getCategoryCondition(metadata: Record<string, unknown> | null | undefined): string | null;
 export declare function categoryAppliesToUnit(category: {
     id: string | null;
@@ -22,13 +26,21 @@ export declare function PricingPanel({ productId, optionId, optionName, productC
     layout: OptionPricingLayout;
     extras?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function TravelerCategoryDialog({ open, onOpenChange, productId, units, nextSortOrder, onSuccess, }: {
+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":"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"}
+{"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;AAcD,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE;IAC3C,YAAY,EAAE,qBAAqB,CAAC,cAAc,CAAC,CAAA;CACpD,WAEA;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;AAydD,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,6 +1,6 @@
 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";
@@ -9,6 +9,7 @@ import { Checkbox } from "@voyantjs/ui/components/checkbox";
 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";
@@ -47,6 +48,20 @@ export function getUnitTypeLabel(type, messages) {
             return type;
     }
 }
+// Pricing categories that describe the *unit* dimension (room/vehicle — already
+// the grid's rows) or a standalone add-on (`service`, handled by the extras
+// panel) are not per-traveler price columns. Excluding them stops a product
+// whose data carries such categories — e.g. legacy data migrated with a
+// "Double room" pricing category alongside the real Adult/Child split — from
+// rendering one bogus price column per room next to the traveler columns.
+const NON_TRAVELER_CATEGORY_TYPES = new Set([
+    "room",
+    "vehicle",
+    "service",
+]);
+export function isTravelerCategory(category) {
+    return !NON_TRAVELER_CATEGORY_TYPES.has(category.categoryType);
+}
 export function getCategoryCondition(metadata) {
     const condition = metadata?.condition;
     return typeof condition === "string" && condition.trim().length > 0 ? condition : null;
@@ -139,7 +154,8 @@ function UnitPriceMatrix({ productId, optionPriceRuleId, optionId, pricingMode,
     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) &&
+        ((isTravelerCategory(category) &&
+            (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");
@@ -217,6 +233,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)
@@ -224,11 +255,12 @@ function parseOptionalInteger(value) {
     const parsed = Number(trimmed);
     return Number.isFinite(parsed) ? Math.trunc(parsed) : null;
 }
-export 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 = [
@@ -241,10 +273,10 @@ export function TravelerCategoryDialog({ open, onOpenChange, productId, units, n
     ];
     useEffect(() => {
         if (open) {
-            setState(initialTravelerCategoryState());
+            setState(category ? stateFromCategory(category) : initialTravelerCategoryState());
             setError(null);
         }
-    }, [open]);
+    }, [open, category]);
     const toggleUnit = (unitId, checked) => {
         setState((prev) => ({
             ...prev,
@@ -271,59 +303,110 @@ export function TravelerCategoryDialog({ open, onOpenChange, productId, units, n
             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] }));

package/dist/components/product-detail/product-translation-popover.d.ts

@@ -1,6 +1,6 @@
 import type { useProductDetailMessages } from "./host.js";
 type ProductCoreMessages = ReturnType<typeof useProductDetailMessages>["products"]["core"];
-export type TranslatableField = "name" | "description" | "slug";
+export type TranslatableField = "name" | "description" | "slug" | "inclusionsHtml" | "exclusionsHtml" | "termsHtml";
 export type TranslationDraft = {
     id: string | null;
     languageTag: string;
@@ -20,6 +20,9 @@ export interface PersistTranslationsOptions {
     defaultLanguageTag: string;
     baseName: string;
     baseDescription: string;
+    baseInclusionsHtml: string;
+    baseExclusionsHtml: string;
+    baseTermsHtml: string;
 }
 export interface ProductTranslationDrafts {
     drafts: TranslationDraft[];

package/dist/components/product-detail/product-translation-popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-translation-popover.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-translation-popover.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"product-translation-popover.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-translation-popover.tsx"],"names":[],"mappings":"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"}

package/dist/components/product-detail/product-translation-popover.js

@@ -9,6 +9,12 @@ import { cn } from "@voyantjs/ui/lib/utils";
 import { languages } from "@voyantjs/utils/languages";
 import { Globe, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const RICH_TEXT_FIELDS = new Set([
+    "description",
+    "inclusionsHtml",
+    "exclusionsHtml",
+    "termsHtml",
+]);
 function recordToDraft(record) {
     return {
         id: record.id,
@@ -47,14 +53,23 @@ export function richTextHasContent(html) {
         .trim().length > 0);
 }
 function fieldHasContent(draft, field) {
-    if (field === "description")
-        return richTextHasContent(draft.description);
-    return draft[field].trim().length > 0;
+    const value = draft[field] ?? "";
+    if (RICH_TEXT_FIELDS.has(field))
+        return richTextHasContent(value);
+    return value.trim().length > 0;
 }
 export function languageLabel(tag) {
     const base = tag.split("-")[0]?.toLowerCase() ?? tag;
     return languages[base] ?? tag;
 }
+// Resolve a rich-text translation column: the default-language row mirrors the
+// base product column (when it has content), every row otherwise uses its own
+// draft, and empty markup collapses to null so the column stays clean.
+function resolveRichText(isDefault, baseValue, draftValue) {
+    if (isDefault && richTextHasContent(baseValue))
+        return baseValue;
+    return richTextHasContent(draftValue ?? "") ? (draftValue ?? "") : null;
+}
 /**
  * Manages an in-memory draft of a product's translations so Name/Description/
  * Slug can be edited in context from the edit sheet. Seeds from the saved
@@ -102,7 +117,7 @@ export function useProductTranslationDrafts(productId) {
         setDrafts((prev) => prev.filter((draft) => draft.languageTag !== languageTag));
     }, []);
     const persist = useCallback(async (resolvedProductId, options) => {
-        const { defaultLanguageTag, baseName, baseDescription } = options;
+        const { defaultLanguageTag, baseName, baseDescription, baseInclusionsHtml, baseExclusionsHtml, baseTermsHtml, } = options;
         const original = existingRef.current;
         const currentLanguages = new Set(drafts.map((draft) => draft.languageTag));
         const deletes = original
@@ -128,22 +143,27 @@ export function useProductTranslationDrafts(productId) {
                     ? draft.description
                     : null;
             const slug = draft.slug.trim() ? draft.slug.trim() : null;
+            const inclusionsHtml = resolveRichText(isDefault, baseInclusionsHtml, draft.inclusionsHtml);
+            const exclusionsHtml = resolveRichText(isDefault, baseExclusionsHtml, draft.exclusionsHtml);
+            const termsHtml = resolveRichText(isDefault, baseTermsHtml, draft.termsHtml);
+            const richInput = { inclusionsHtml, exclusionsHtml, termsHtml };
             if (draft.id) {
                 return mutations.update.mutateAsync({
                     productId: resolvedProductId,
                     translationId: draft.id,
-                    input: { name, description, slug },
+                    input: { name, description, slug, ...richInput },
                 });
             }
             // A brand-new row is only worth creating once it carries content.
+            const hasRichContent = !!inclusionsHtml || !!exclusionsHtml || !!termsHtml;
             const isEmpty = isDefault
-                ? !slug
-                : !draft.name.trim() && !richTextHasContent(draft.description) && !slug;
+                ? !slug && !hasRichContent
+                : !draft.name.trim() && !richTextHasContent(draft.description) && !slug && !hasRichContent;
             if (isEmpty)
                 return Promise.resolve(null);
             return mutations.create.mutateAsync({
                 productId: resolvedProductId,
-                input: { languageTag: draft.languageTag, name, description, slug },
+                input: { languageTag: draft.languageTag, name, description, slug, ...richInput },
             });
         });
         await Promise.all([...deletes, ...upserts]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/products-ui",
-  "version": "0.102.0",
+  "version": "0.104.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,26 +50,26 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.102.0",
-    "@voyantjs/availability-react": "0.102.0",
-    "@voyantjs/catalog-react": "0.102.0",
-    "@voyantjs/extras-react": "0.102.0",
-    "@voyantjs/finance": "0.102.0",
-    "@voyantjs/finance-ui": "0.102.0",
-    "@voyantjs/markets-react": "0.102.0",
-    "@voyantjs/pricing-react": "0.102.0",
-    "@voyantjs/pricing-ui": "0.102.0",
-    "@voyantjs/products-react": "0.102.0",
-    "@voyantjs/suppliers-react": "0.102.0",
-    "@voyantjs/ui": "0.102.0",
-    "@voyantjs/utils": "0.102.0"
+    "@voyantjs/availability": "0.104.0",
+    "@voyantjs/availability-react": "0.104.0",
+    "@voyantjs/catalog-react": "0.104.0",
+    "@voyantjs/extras-react": "0.104.0",
+    "@voyantjs/finance": "0.104.0",
+    "@voyantjs/finance-ui": "0.104.0",
+    "@voyantjs/markets-react": "0.104.0",
+    "@voyantjs/pricing-react": "0.104.0",
+    "@voyantjs/pricing-ui": "0.104.0",
+    "@voyantjs/products-react": "0.104.0",
+    "@voyantjs/suppliers-react": "0.104.0",
+    "@voyantjs/ui": "0.104.0",
+    "@voyantjs/utils": "0.104.0"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
     "motion": "^12.38.0",
     "react-day-picker": "^9.8.0",
     "sonner": "^2.0.7",
-    "@voyantjs/i18n": "0.102.0"
+    "@voyantjs/i18n": "0.104.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.100.11",
@@ -82,20 +82,20 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.102.0",
-    "@voyantjs/availability-react": "0.102.0",
-    "@voyantjs/catalog-react": "0.102.0",
-    "@voyantjs/extras-react": "0.102.0",
-    "@voyantjs/finance": "0.102.0",
-    "@voyantjs/finance-ui": "0.102.0",
-    "@voyantjs/i18n": "0.102.0",
-    "@voyantjs/markets-react": "0.102.0",
-    "@voyantjs/pricing-react": "0.102.0",
-    "@voyantjs/pricing-ui": "0.102.0",
-    "@voyantjs/products-react": "0.102.0",
-    "@voyantjs/suppliers-react": "0.102.0",
-    "@voyantjs/ui": "0.102.0",
-    "@voyantjs/utils": "0.102.0",
+    "@voyantjs/availability": "0.104.0",
+    "@voyantjs/availability-react": "0.104.0",
+    "@voyantjs/catalog-react": "0.104.0",
+    "@voyantjs/extras-react": "0.104.0",
+    "@voyantjs/finance": "0.104.0",
+    "@voyantjs/finance-ui": "0.104.0",
+    "@voyantjs/i18n": "0.104.0",
+    "@voyantjs/markets-react": "0.104.0",
+    "@voyantjs/pricing-react": "0.104.0",
+    "@voyantjs/pricing-ui": "0.104.0",
+    "@voyantjs/products-react": "0.104.0",
+    "@voyantjs/suppliers-react": "0.104.0",
+    "@voyantjs/ui": "0.104.0",
+    "@voyantjs/utils": "0.104.0",
     "@voyantjs/voyant-typescript-config": "0.1.0"
   },
   "files": [

package/dist/components/product-detail/product-extras-section.d.ts

@@ -1,4 +0,0 @@
-export declare function ProductExtrasSection({ productId }: {
-    productId: string;
-}): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=product-extras-section.d.ts.map

package/dist/components/product-detail/product-extras-section.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"product-extras-section.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-extras-section.tsx"],"names":[],"mappings":"AAmEA,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,2CAiQxE"}

package/dist/components/product-detail/product-extras-section.js

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useProductExtraMutation, useProductExtras, } from "@voyantjs/extras-react";
-import { formatMessage } from "@voyantjs/i18n";
-import { Badge, Button, Checkbox, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
-import { Pencil, Plus, Trash2 } from "lucide-react";
-import * as React from "react";
-import { useProductDetailMessages } from "./host.js";
-import { ActionMenu, EmptyState, Section } from "./product-detail-sections.js";
-const selectionTypes = ["optional", "required", "default_selected", "unavailable"];
-const pricingModes = [
-    "included",
-    "per_person",
-    "per_booking",
-    "quantity_based",
-    "on_request",
-    "free",
-];
-const emptyForm = {
-    name: "",
-    code: "",
-    description: "",
-    selectionType: "optional",
-    pricingMode: "per_booking",
-    pricedPerPerson: false,
-    minQuantity: "",
-    maxQuantity: "",
-    defaultQuantity: "",
-    active: true,
-};
-export function ProductExtrasSection({ productId }) {
-    const messages = useProductDetailMessages();
-    const extraMessages = messages.products.operations.extras;
-    const [open, setOpen] = React.useState(false);
-    const [editing, setEditing] = React.useState(null);
-    const [form, setForm] = React.useState(emptyForm);
-    const { data, isPending, refetch } = useProductExtras({ productId, limit: 100 });
-    const { create, update, remove } = useProductExtraMutation();
-    const rows = data?.data ?? [];
-    const startCreate = () => {
-        setEditing(null);
-        setForm(emptyForm);
-        setOpen(true);
-    };
-    const startEdit = (extra) => {
-        setEditing(extra);
-        setForm({
-            name: extra.name,
-            code: extra.code ?? "",
-            description: extra.description ?? "",
-            selectionType: extra.selectionType,
-            pricingMode: extra.pricingMode,
-            pricedPerPerson: extra.pricedPerPerson,
-            minQuantity: extra.minQuantity == null ? "" : String(extra.minQuantity),
-            maxQuantity: extra.maxQuantity == null ? "" : String(extra.maxQuantity),
-            defaultQuantity: extra.defaultQuantity == null ? "" : String(extra.defaultQuantity),
-            active: extra.active,
-        });
-        setOpen(true);
-    };
-    const save = async () => {
-        const payload = {
-            productId,
-            name: form.name.trim(),
-            code: form.code.trim() || null,
-            description: form.description.trim() || null,
-            selectionType: form.selectionType,
-            pricingMode: form.pricingMode,
-            pricedPerPerson: form.pricedPerPerson,
-            minQuantity: parseNullableInt(form.minQuantity),
-            maxQuantity: parseNullableInt(form.maxQuantity),
-            defaultQuantity: parseNullableInt(form.defaultQuantity),
-            active: form.active,
-            sortOrder: editing?.sortOrder ?? rows.length,
-        };
-        if (!payload.name)
-            return;
-        if (editing)
-            await update.mutateAsync({ id: editing.id, input: payload });
-        else
-            await create.mutateAsync(payload);
-        setOpen(false);
-        setEditing(null);
-        setForm(emptyForm);
-        void refetch();
-    };
-    return (_jsxs(Section, { title: extraMessages.sectionTitle, actions: _jsxs(Button, { variant: "outline", size: "sm", onClick: startCreate, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), extraMessages.addAction] }), contentClassName: "px-6 py-4", children: [rows.length === 0 ? (_jsx(EmptyState, { message: isPending ? extraMessages.loading : extraMessages.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: rows.map((extra) => (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm", children: extra.name }), _jsx(Badge, { variant: extra.active ? "default" : "outline", children: extra.active ? extraMessages.activeBadge : extraMessages.inactiveBadge }), _jsx(Badge, { variant: "secondary", children: getPricingModeLabel(extra.pricingMode, extraMessages) }), extra.pricedPerPerson ? (_jsx(Badge, { variant: "outline", children: extraMessages.perTravelerBadge })) : null] }), extra.description ? (_jsx("p", { className: "text-muted-foreground text-xs", children: extra.description })) : null] }), _jsxs(ActionMenu, { children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm", onClick: () => startEdit(extra), children: [_jsx(Pencil, { className: "h-4 w-4" }), extraMessages.editAction] }), _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-2 py-1.5 text-destructive text-sm", onClick: () => {
-                                        if (confirm(formatMessage(extraMessages.deleteConfirm, { name: extra.name })))
-                                            remove.mutate(extra.id, { onSuccess: () => void refetch() });
-                                    }, children: [_jsx(Trash2, { className: "h-4 w-4" }), extraMessages.deleteAction] })] })] }, extra.id))) })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: editing ? extraMessages.editTitle : extraMessages.newTitle }), _jsx(DialogDescription, { children: extraMessages.dialogDescription })] }), _jsxs(DialogBody, { className: "grid gap-4", children: [_jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(Field, { label: extraMessages.nameLabel, children: _jsx(Input, { value: form.name, onChange: (event) => setForm({ ...form, name: event.target.value }) }) }), _jsx(Field, { label: extraMessages.codeLabel, children: _jsx(Input, { value: form.code, onChange: (event) => setForm({ ...form, code: event.target.value }) }) })] }), _jsx(Field, { label: extraMessages.descriptionLabel, children: _jsx(Textarea, { value: form.description, onChange: (event) => setForm({ ...form, description: event.target.value }) }) }), _jsxs("div", { className: "grid gap-3 md:grid-cols-3", children: [_jsx(Field, { label: extraMessages.selectionLabel, children: _jsxs(Select, { value: form.selectionType, onValueChange: (value) => setForm({
-                                                    ...form,
-                                                    selectionType: (value ?? "optional"),
-                                                }), items: selectionTypes.map((type) => ({
-                                                    value: type,
-                                                    label: getSelectionTypeLabel(type, extraMessages),
-                                                })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: selectionTypes.map((type) => (_jsx(SelectItem, { value: type, children: getSelectionTypeLabel(type, extraMessages) }, type))) })] }) }), _jsx(Field, { label: extraMessages.pricingLabel, children: _jsxs(Select, { value: form.pricingMode, onValueChange: (value) => setForm({
-                                                    ...form,
-                                                    pricingMode: (value ?? "per_booking"),
-                                                }), items: pricingModes.map((mode) => ({
-                                                    value: mode,
-                                                    label: getPricingModeLabel(mode, extraMessages),
-                                                })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((mode) => (_jsx(SelectItem, { value: mode, children: getPricingModeLabel(mode, extraMessages) }, mode))) })] }) }), _jsx(Field, { label: extraMessages.defaultQuantityLabel, children: _jsx(Input, { value: form.defaultQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, defaultQuantity: event.target.value }) }) }), _jsx(Field, { label: extraMessages.minQuantityLabel, children: _jsx(Input, { value: form.minQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, minQuantity: event.target.value }) }) }), _jsx(Field, { label: extraMessages.maxQuantityLabel, children: _jsx(Input, { value: form.maxQuantity, type: "number", min: "0", onChange: (event) => setForm({ ...form, maxQuantity: event.target.value }) }) })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-6", children: [_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: "product-extra-priced-per-person", checked: form.pricedPerPerson, onCheckedChange: (checked) => setForm({ ...form, pricedPerPerson: checked === true }) }), _jsx(Label, { htmlFor: "product-extra-priced-per-person", children: extraMessages.perTravelerLabel })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Checkbox, { id: "product-extra-active", checked: form.active, onCheckedChange: (checked) => setForm({ ...form, active: checked === true }) }), _jsx(Label, { htmlFor: "product-extra-active", children: extraMessages.activeLabel })] })] })] }), _jsxs(DialogFooter, { className: "-mx-6 -mb-6", children: [_jsx(Button, { variant: "ghost", onClick: () => setOpen(false), children: extraMessages.cancel }), _jsx(Button, { onClick: () => void save(), disabled: !form.name.trim(), children: editing ? extraMessages.saveChanges : extraMessages.create })] })] }) })] }));
-}
-function Field({ label, children }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: label }), children] }));
-}
-function parseNullableInt(value) {
-    const parsed = Number.parseInt(value, 10);
-    return Number.isFinite(parsed) ? parsed : null;
-}
-function getSelectionTypeLabel(value, messages) {
-    switch (value) {
-        case "optional":
-            return messages.selectionOptional;
-        case "required":
-            return messages.selectionRequired;
-        case "default_selected":
-            return messages.selectionDefaultSelected;
-        case "unavailable":
-            return messages.selectionUnavailable;
-        default:
-            return value;
-    }
-}
-function getPricingModeLabel(value, messages) {
-    switch (value) {
-        case "included":
-            return messages.pricingIncluded;
-        case "per_person":
-            return messages.pricingPerPerson;
-        case "per_booking":
-            return messages.pricingPerBooking;
-        case "quantity_based":
-            return messages.pricingQuantityBased;
-        case "on_request":
-            return messages.pricingOnRequest;
-        case "free":
-            return messages.pricingFree;
-        default:
-            return value;
-    }
-}