@voyantjs/products-ui 0.101.2 → 0.103.0

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

@@ -1 +1 @@
-{"version":3,"file":"product-departure-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-departure-form.tsx"],"names":[],"mappings":"AA8EA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IACpD,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAuDD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAwWzF"}
+{"version":3,"file":"product-departure-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-departure-form.tsx"],"names":[],"mappings":"AA+EA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,GAAG,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAA;IACpD,SAAS,EAAE,OAAO,CAAA;IAClB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAA;IACzB,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;IAC3B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAuDD,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAgZzF"}

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

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProductResourceTemplates } from "@voyantjs/availability-react";
 import { formatMessage } from "@voyantjs/i18n";
 import { useProductItineraries } from "@voyantjs/products-react";
 import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
 import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
 import { Loader2 } from "lucide-react";
-import { useEffect } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod/v4";
 import { DatePicker } from "./date-picker.js";
@@ -119,6 +120,25 @@ export function DepartureForm({ productId, slot, onSuccess, onCancel }) {
     const { data: itineraryData } = useProductItineraries(productId);
     const itineraries = itineraryData?.data ?? [];
     const defaultItinerary = itineraries.find((itinerary) => itinerary.isDefault) ?? itineraries[0];
+    // Suggested pax = total physical capacity of the configured departure
+    // inventory (each room/seat type's count × its capacity, e.g. 20 doubles
+    // sleeping 2 = 40). Lets a new departure inherit capacity from the rooms the
+    // operator already set up, while staying editable for an override.
+    const { data: resourceTemplateData } = useProductResourceTemplates({ productId });
+    const suggestedPax = useMemo(() => (resourceTemplateData?.data ?? []).reduce((optionTotal, option) => optionTotal +
+        option.templates.reduce((sum, template) => sum + (template.defaultCount ?? 0) * template.capacity, 0), 0), [resourceTemplateData?.data]);
+    // Pre-fill capacity once for a brand-new departure, only while the field is
+    // still untouched — never clobber an edit or an existing slot's value.
+    const prefilledPaxRef = useRef(false);
+    useEffect(() => {
+        if (isEditing || prefilledPaxRef.current || suggestedPax <= 0)
+            return;
+        const current = form.getValues("initialPax");
+        if (current === "" || current == null) {
+            form.setValue("initialPax", suggestedPax);
+            prefilledPaxRef.current = true;
+        }
+    }, [isEditing, suggestedPax, form]);
     const nights = (() => {
         if (!startDate || !endDate || typeof endDate !== "string" || endDate.length === 0)
             return 0;
@@ -213,5 +233,5 @@ export function DepartureForm({ productId, slot, onSuccess, onCancel }) {
                                 }, children: [_jsx(ComboboxInput, { placeholder: departureMessages.timezoneSearchPlaceholder, className: "w-full" }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: departureMessages.timezoneEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
                                                         const tz = TIMEZONE_OPTIONS.find((t) => t.id === id);
                                                         return (_jsxs(ComboboxItem, { value: id, children: [_jsx("span", { className: "font-mono text-xs", children: id }), tz ? (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: tz.label })) : null] }, id));
-                                                    } }) })] })] }), form.formState.errors.timezone && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.timezone.message }))] })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: departureMessages.availabilityLegend }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.statusLabel }), _jsxs(Select, { value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), items: slotStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: slotStatuses.map((s) => (_jsx(SelectItem, { value: s.value, children: s.label }, s.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.capacityLabel }), _jsx(Input, { ...form.register("initialPax"), type: "number", min: "0", step: "1", placeholder: "0", disabled: unlimited })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "unlimited", checked: unlimited, onCheckedChange: (c) => form.setValue("unlimited", c) }), _jsx(Label, { htmlFor: "unlimited", className: "font-normal cursor-pointer", children: departureMessages.unlimitedLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: departureMessages.notesPlaceholder })] }), _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 : departureMessages.create] })] })] }));
+                                                    } }) })] })] }), form.formState.errors.timezone && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.timezone.message }))] })] }), _jsxs("fieldset", { className: "grid gap-3", children: [_jsx("legend", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: departureMessages.availabilityLegend }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.statusLabel }), _jsxs(Select, { value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), items: slotStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: slotStatuses.map((s) => (_jsx(SelectItem, { value: s.value, children: s.label }, s.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.capacityLabel }), _jsx(Input, { ...form.register("initialPax"), type: "number", min: "0", step: "1", placeholder: "0", disabled: unlimited }), !unlimited && suggestedPax > 0 ? (_jsx("button", { type: "button", onClick: () => form.setValue("initialPax", suggestedPax), className: "text-left text-xs text-muted-foreground hover:text-foreground", children: formatMessage(departureMessages.capacityAutoHint, { count: suggestedPax }) })) : null] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "unlimited", checked: unlimited, onCheckedChange: (c) => form.setValue("unlimited", c) }), _jsx(Label, { htmlFor: "unlimited", className: "font-normal cursor-pointer", children: departureMessages.unlimitedLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: departureMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: departureMessages.notesPlaceholder })] }), _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 : departureMessages.create] })] })] }));
 }

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,2CAqWzF"}
+{"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(),
@@ -64,13 +73,16 @@ export function ProductDetailForm({ product, onSuccess, onCancel }) {
         { value: "active", label: productMessages.statusActive },
         { value: "archived", label: productMessages.statusArchived },
     ];
+    // Ordered most-common-first for this operator (multi-day tours, then day
+    // trips). The chosen mode also drives the option pricing layout
+    // (rooms vs per-person seats) — see deriveOptionPricingLayout.
     const bookingModes = [
+        { value: "itinerary", label: productMessages.bookingModeItinerary },
+        { value: "stay", label: productMessages.bookingModeStay },
         { value: "date", label: productMessages.bookingModeDate },
         { value: "date_time", label: productMessages.bookingModeDateTime },
-        { value: "open", label: productMessages.bookingModeOpen },
-        { value: "stay", label: productMessages.bookingModeStay },
         { value: "transfer", label: productMessages.bookingModeTransfer },
-        { value: "itinerary", label: productMessages.bookingModeItinerary },
+        { value: "open", label: productMessages.bookingModeOpen },
         { value: "other", label: productMessages.bookingModeOther },
     ];
     const form = useForm({
@@ -108,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,
@@ -119,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);
@@ -144,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":"AAgCA,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,10 +14,9 @@ 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 { getDeparturePriceOverridesQueryOptions } from "./product-options-shared.js";
+import { deriveOptionPricingLayout, getDeparturePriceOverridesQueryOptions, } from "./product-options-shared.js";
 import { ProductPaymentPolicySection } from "./product-payment-policy-section.js";
 import { ScheduleDialog } from "./product-schedule-dialog.js";
 import { useProductDetailData } from "./use-product-detail-data.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) => (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(PricingPanel, { productId: id, optionId: option.id, productCurrency: product.sellCurrency }), 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

@@ -0,0 +1,16 @@
+import { type OptionPricingLayout } from "./product-options-shared.js";
+export interface OptionPricingGridProps {
+    productId: string;
+    optionId: string;
+    optionName: string;
+    productCurrency: string;
+    layout: OptionPricingLayout;
+}
+/**
+ * The everyday pricing surface for a booking option: one table that merges
+ * inventory (rooms / traveler types) with what each traveler pays. The single
+ * default rate plan is auto-managed and hidden — agents never see catalogs or
+ * rate-plan chrome here (that lives under Advanced).
+ */
+export declare function OptionPricingGrid({ productId, optionId, optionName, productCurrency, layout, }: OptionPricingGridProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-pricing-grid.d.ts.map

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

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