@voyantjs/products-ui 0.101.1 → 0.102.0

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

@@ -0,0 +1,145 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useOptionUnitPriceRuleMutation } from "@voyantjs/pricing-react";
+import { PricingCategoryCombobox } from "@voyantjs/pricing-ui/components/pricing-category-combobox";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, Textarea, } from "@voyantjs/ui/components";
+import { CurrencyInput } from "@voyantjs/ui/components/currency-input";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailMessages, useProductLocale } from "./host.js";
+import { zodResolver } from "./zod-resolver.js";
+function getUnitTypeLabel(type, messages) {
+    switch (type) {
+        case "person":
+            return messages.typePerson;
+        case "group":
+            return messages.typeGroup;
+        case "room":
+            return messages.typeRoom;
+        case "vehicle":
+            return messages.typeVehicle;
+        case "service":
+            return messages.typeService;
+        case "other":
+            return messages.typeOther;
+        default:
+            return type;
+    }
+}
+// "Min/Max quantity" means different things per pricing mode — travelers for
+// per-person, units for per-unit, the whole booking for per-booking. Label it
+// for what's actually being counted.
+function cellQuantityLabels(pricingMode, m) {
+    switch (pricingMode) {
+        case "per_person":
+            return { min: m.minQuantityPerson, max: m.maxQuantityPerson };
+        case "per_unit":
+            return { min: m.minQuantityUnit, max: m.maxQuantityUnit };
+        case "per_booking":
+            return { min: m.minQuantityBooking, max: m.maxQuantityBooking };
+        default:
+            return { min: m.minQuantityLabel, max: m.maxQuantityLabel };
+    }
+}
+const buildCellFormSchema = (messages) => z.object({
+    unitId: z.string().min(1, messages.validationUnitRequired),
+    pricingCategoryId: z.string().optional().nullable(),
+    pricingMode: z.enum([
+        "per_unit",
+        "per_person",
+        "per_booking",
+        "included",
+        "free",
+        "on_request",
+    ]),
+    // Stored in minor units (cents) so CurrencyInput can render the currency
+    // prefix and parse locale-formatted amounts directly.
+    sell: z.number().int().min(0),
+    cost: z.number().int().min(0),
+    minQuantity: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+    maxQuantity: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+    sortOrder: z.coerce.number().int(),
+    active: z.boolean(),
+    notes: z.string().optional().nullable(),
+});
+function initialValues(cell, preselectedUnitId, preselectedCategoryId) {
+    if (cell) {
+        return {
+            unitId: cell.unitId,
+            pricingCategoryId: cell.pricingCategoryId ?? "",
+            pricingMode: cell.pricingMode,
+            sell: cell.sellAmountCents ?? 0,
+            cost: cell.costAmountCents ?? 0,
+            minQuantity: cell.minQuantity ?? "",
+            maxQuantity: cell.maxQuantity ?? "",
+            sortOrder: cell.sortOrder,
+            active: cell.active,
+            notes: cell.notes ?? "",
+        };
+    }
+    return {
+        unitId: preselectedUnitId ?? "",
+        pricingCategoryId: preselectedCategoryId ?? "",
+        pricingMode: "per_person",
+        sell: 0,
+        cost: 0,
+        minQuantity: "",
+        maxQuantity: "",
+        sortOrder: 0,
+        active: true,
+        notes: "",
+    };
+}
+export function UnitPriceRuleForm({ optionPriceRuleId, optionId, units, productCurrency, preselectedUnitId, preselectedCategoryId, cell, onSuccess, onCancel, }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const unitPriceMessages = messages.products.operations.unitPrices;
+    const unitMessages = messages.products.operations.units;
+    const locale = useProductLocale();
+    const isEditing = !!cell;
+    const { create, update } = useOptionUnitPriceRuleMutation();
+    const cellFormSchema = buildCellFormSchema(unitPriceMessages);
+    const pricingModes = [
+        { value: "per_unit", label: unitPriceMessages.pricingModePerUnit },
+        { value: "per_person", label: unitPriceMessages.pricingModePerPerson },
+        { value: "per_booking", label: unitPriceMessages.pricingModePerBooking },
+        { value: "included", label: unitPriceMessages.pricingModeIncluded },
+        { value: "free", label: unitPriceMessages.pricingModeFree },
+        { value: "on_request", label: unitPriceMessages.pricingModeOnRequest },
+    ];
+    const form = useForm({
+        resolver: zodResolver(cellFormSchema),
+        defaultValues: initialValues(cell, preselectedUnitId, preselectedCategoryId),
+    });
+    useEffect(() => {
+        form.reset(initialValues(cell, preselectedUnitId, preselectedCategoryId));
+    }, [cell, preselectedUnitId, preselectedCategoryId, form]);
+    const onSubmit = async (values) => {
+        const payload = {
+            optionPriceRuleId,
+            optionId,
+            unitId: values.unitId,
+            pricingCategoryId: values.pricingCategoryId || null,
+            pricingMode: values.pricingMode,
+            sellAmountCents: Math.round(values.sell),
+            costAmountCents: Math.round(values.cost),
+            minQuantity: typeof values.minQuantity === "number" ? values.minQuantity : null,
+            maxQuantity: typeof values.maxQuantity === "number" ? values.maxQuantity : null,
+            sortOrder: values.sortOrder,
+            active: values.active,
+            notes: values.notes || null,
+        };
+        if (isEditing) {
+            await update.mutateAsync({ id: cell.id, input: payload });
+        }
+        else {
+            await create.mutateAsync(payload);
+        }
+        onSuccess();
+    };
+    return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.unitLabel }), _jsxs(Select, { value: form.watch("unitId") || undefined, onValueChange: (v) => form.setValue("unitId", v ?? "", { shouldValidate: true }), items: units.map((u) => ({
+                                            value: u.id,
+                                            label: `${u.name} (${getUnitTypeLabel(u.unitType, unitMessages)})`,
+                                        })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: unitPriceMessages.unitPlaceholder }) }), _jsx(SelectContent, { children: units.map((u) => (_jsxs(SelectItem, { value: u.id, children: [u.name, " (", getUnitTypeLabel(u.unitType, unitMessages), ")"] }, u.id))) })] }), form.formState.errors.unitId && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.unitId.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.categoryLabel }), _jsx(PricingCategoryCombobox, { value: form.watch("pricingCategoryId"), onChange: (value) => form.setValue("pricingCategoryId", value ?? "", { shouldDirty: true }), placeholder: unitPriceMessages.categoryPlaceholder })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.pricingModeLabel }), _jsxs(Select, { value: form.watch("pricingMode"), onValueChange: (v) => form.setValue("pricingMode", v), items: pricingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((m) => (_jsx(SelectItem, { value: m.value, children: m.label }, m.value))) })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sellLabel }), _jsx(CurrencyInput, { value: form.watch("sell"), onChange: (value) => form.setValue("sell", value ?? 0, { shouldValidate: true }), currency: productCurrency, locale: locale })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.costLabel }), _jsx(CurrencyInput, { value: form.watch("cost"), onChange: (value) => form.setValue("cost", value ?? 0, { shouldValidate: true }), currency: productCurrency, locale: locale })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: cellQuantityLabels(form.watch("pricingMode"), unitPriceMessages).min }), _jsx(Input, { ...form.register("minQuantity"), type: "number", min: "0" })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: cellQuantityLabels(form.watch("pricingMode"), unitPriceMessages).max }), _jsx(Input, { ...form.register("maxQuantity"), type: "number", min: "0" })] })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: form.watch("active"), onCheckedChange: (v) => form.setValue("active", v) }), _jsx(Label, { children: unitPriceMessages.activeLabel })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: unitPriceMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes") })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : unitPriceMessages.create] })] })] }));
+}

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

@@ -0,0 +1,9 @@
+export type TimezoneOption = {
+    id: string;
+    label: string;
+    offset: number;
+};
+export declare const TIMEZONE_OPTIONS: TimezoneOption[];
+export declare const TIMEZONE_IDS: string[];
+export declare function getTimezoneLabel(id: string): string;
+//# sourceMappingURL=timezone-options.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-options.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/timezone-options.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAsBD,eAAO,MAAM,gBAAgB,kBAAyB,CAAA;AACtD,eAAO,MAAM,YAAY,UAAoC,CAAA;AAI7D,wBAAgB,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAGnD"}

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

@@ -0,0 +1,28 @@
+import { timezones } from "@voyantjs/utils/timezones";
+function buildTimezoneOptions() {
+    const seen = new Map();
+    for (const tz of timezones) {
+        for (const id of tz.utc) {
+            if (seen.has(id))
+                continue;
+            seen.set(id, { id, label: tz.text, offset: tz.offset });
+        }
+    }
+    // Include the browser-resolved zone if not already present
+    const browserZone = typeof Intl !== "undefined" ? Intl.DateTimeFormat().resolvedOptions().timeZone : null;
+    if (browserZone && !seen.has(browserZone)) {
+        seen.set(browserZone, { id: browserZone, label: browserZone, offset: 0 });
+    }
+    return Array.from(seen.values()).sort((a, b) => {
+        if (a.offset !== b.offset)
+            return a.offset - b.offset;
+        return a.id.localeCompare(b.id);
+    });
+}
+export const TIMEZONE_OPTIONS = buildTimezoneOptions();
+export const TIMEZONE_IDS = TIMEZONE_OPTIONS.map((t) => t.id);
+const TIMEZONE_BY_ID = new Map(TIMEZONE_OPTIONS.map((t) => [t.id, t]));
+export function getTimezoneLabel(id) {
+    const tz = TIMEZONE_BY_ID.get(id);
+    return tz ? `${id} — ${tz.label}` : id;
+}

package/dist/components/product-detail/use-product-detail-data.d.ts

@@ -0,0 +1,41 @@
+import { useMutation } from "@tanstack/react-query";
+import { useProduct } from "@voyantjs/products-react";
+import { type AvailabilityRule, type ChannelInfo, type ChannelProductMapping, type DepartureSlot, type ProductMediaItem } from "./product-detail-shared.js";
+export interface UseProductDetailDataResult {
+    product: ReturnType<typeof useProduct>["data"];
+    isPending: boolean;
+    slots: DepartureSlot[];
+    rules: AvailabilityRule[];
+    channels: ChannelInfo[];
+    mappings: ChannelProductMapping[];
+    media: ProductMediaItem[];
+    itineraryNameById: Map<string, string>;
+    refetch: {
+        slots: () => void;
+        rules: () => void;
+        mappings: () => void;
+        media: () => void;
+    };
+    mutations: {
+        addChannelMapping: ReturnType<typeof useMutation<unknown, Error, string>>;
+        removeChannelMapping: ReturnType<typeof useMutation<unknown, Error, string>>;
+        duplicateProduct: ReturnType<typeof useMutation<{
+            data: {
+                id: string;
+            };
+        }, Error, void>>;
+        deleteProduct: ReturnType<typeof useMutation<unknown, Error, void>>;
+        deleteSlot: ReturnType<typeof useMutation<unknown, Error, string>>;
+        deleteRule: ReturnType<typeof useMutation<unknown, Error, string>>;
+        uploadMedia: ReturnType<typeof useMutation<unknown, Error, {
+            file: File;
+            dayId?: string;
+        }>>;
+        deleteMedia: ReturnType<typeof useMutation<unknown, Error, string>>;
+        setCover: ReturnType<typeof useMutation<unknown, Error, string>>;
+        generateBrochure: ReturnType<typeof useMutation<unknown, Error, void>>;
+    };
+    invalidateProduct: () => void;
+}
+export declare function useProductDetailData(productId: string): UseProductDetailDataResult;
+//# sourceMappingURL=use-product-detail-data.d.ts.map

package/dist/components/product-detail/use-product-detail-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-product-detail-data.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/use-product-detail-data.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA4B,MAAM,uBAAuB,CAAA;AAC7E,OAAO,EAAqB,UAAU,EAAyB,MAAM,0BAA0B,CAAA;AAK/F,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAChB,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAMlB,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;IAC9C,SAAS,EAAE,OAAO,CAAA;IAClB,KAAK,EAAE,aAAa,EAAE,CAAA;IACtB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,QAAQ,EAAE,WAAW,EAAE,CAAA;IACvB,QAAQ,EAAE,qBAAqB,EAAE,CAAA;IACjC,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACtC,OAAO,EAAE;QACP,KAAK,EAAE,MAAM,IAAI,CAAA;QACjB,KAAK,EAAE,MAAM,IAAI,CAAA;QACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;QACpB,KAAK,EAAE,MAAM,IAAI,CAAA;KAClB,CAAA;IACD,SAAS,EAAE;QACT,iBAAiB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QACzE,oBAAoB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QAC5E,gBAAgB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC;YAAE,IAAI,EAAE;gBAAE,EAAE,EAAE,MAAM,CAAA;aAAE,CAAA;SAAE,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;QACvF,aAAa,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;QACnE,UAAU,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QAClE,UAAU,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QAClE,WAAW,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE;YAAE,IAAI,EAAE,IAAI,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC,CAAA;QAC3F,WAAW,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QACnE,QAAQ,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAA;QAChE,gBAAgB,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;KACvE,CAAA;IACD,iBAAiB,EAAE,MAAM,IAAI,CAAA;CAC9B;AAED,wBAAgB,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,0BAA0B,CAiKlF"}

package/dist/components/product-detail/use-product-detail-data.js

@@ -0,0 +1,143 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { productsQueryKeys, useProduct, useProductItineraries } from "@voyantjs/products-react";
+import { useMemo } from "react";
+import { useProductDetailHost, useProductDetailMessages } from "./host.js";
+import { getChannelsQueryOptions, getProductChannelMappingsQueryOptions, getProductMediaQueryOptions, getProductRulesQueryOptions, getProductSlotsQueryOptions, } from "./product-detail-shared.js";
+export function useProductDetailData(productId) {
+    const queryClient = useQueryClient();
+    const host = useProductDetailHost();
+    const api = host.api;
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const productQuery = useProduct(productId);
+    const itinerariesQuery = useProductItineraries(productId);
+    const productActionLedgerQueryKey = [...productsQueryKeys.product(productId), "action-ledger"];
+    const slotsQuery = useQuery(getProductSlotsQueryOptions(api, productId));
+    const rulesQuery = useQuery(getProductRulesQueryOptions(api, productId));
+    const channelsQuery = useQuery(getChannelsQueryOptions(api));
+    const mappingsQuery = useQuery(getProductChannelMappingsQueryOptions(api, productId));
+    const mediaQuery = useQuery(getProductMediaQueryOptions(api, productId));
+    const addChannelMapping = useMutation({
+        mutationFn: (channelId) => api.post("/v1/distribution/product-mappings", {
+            channelId,
+            productId,
+            active: true,
+        }),
+        onSuccess: () => {
+            void mappingsQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const removeChannelMapping = useMutation({
+        mutationFn: (mappingId) => api.delete(`/v1/distribution/product-mappings/${mappingId}`),
+        onSuccess: () => {
+            void mappingsQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const deleteProduct = useMutation({
+        mutationFn: () => api.delete(`/v1/products/${productId}`),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: ["products"] });
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const duplicateProduct = useMutation({
+        mutationFn: () => api.post(`/v1/admin/products/${productId}/duplicate`),
+        onSuccess: () => {
+            void queryClient.invalidateQueries({ queryKey: productsQueryKeys.products() });
+        },
+    });
+    const deleteSlot = useMutation({
+        mutationFn: (slotId) => api.delete(`/v1/availability/slots/${slotId}`),
+        onSuccess: () => {
+            void slotsQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const deleteRule = useMutation({
+        mutationFn: (ruleId) => api.delete(`/v1/availability/rules/${ruleId}`),
+        onSuccess: () => {
+            void rulesQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const uploadMedia = useMutation({
+        mutationFn: async ({ file, dayId }) => {
+            if (!host.uploadMedia)
+                throw new Error(productMessages.uploadFailed);
+            const result = await host.uploadMedia(file, { productId, dayId });
+            const endpoint = dayId
+                ? `/v1/products/${productId}/days/${dayId}/media`
+                : `/v1/products/${productId}/media`;
+            return api.post(endpoint, {
+                mediaType: result.mediaType,
+                name: result.name,
+                url: result.url,
+                storageKey: result.storageKey,
+                mimeType: result.mimeType,
+                fileSize: result.fileSize,
+            });
+        },
+        onSuccess: () => {
+            void mediaQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const deleteMedia = useMutation({
+        mutationFn: (mediaId) => api.delete(`/v1/products/media/${mediaId}`),
+        onSuccess: () => {
+            void mediaQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const setCover = useMutation({
+        mutationFn: (mediaId) => api.patch(`/v1/products/media/${mediaId}/set-cover`, {}),
+        onSuccess: () => {
+            void mediaQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const generateBrochure = useMutation({
+        mutationFn: () => api.post(`/v1/admin/products/${productId}/brochure/generate`, {}),
+        onSuccess: () => {
+            void mediaQuery.refetch();
+            void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+        },
+    });
+    const itineraryNameById = useMemo(() => new Map((itinerariesQuery.data?.data ?? []).map((itinerary) => [itinerary.id, itinerary.name])), [itinerariesQuery.data]);
+    const invalidateProduct = () => {
+        void queryClient.invalidateQueries({ queryKey: productsQueryKeys.product(productId) });
+        void queryClient.invalidateQueries({ queryKey: productsQueryKeys.products() });
+        void queryClient.invalidateQueries({ queryKey: productActionLedgerQueryKey });
+    };
+    return {
+        product: productQuery.data,
+        isPending: productQuery.isPending,
+        slots: slotsQuery.data?.data ?? [],
+        rules: rulesQuery.data?.data ?? [],
+        channels: channelsQuery.data?.data ?? [],
+        mappings: mappingsQuery.data?.data ?? [],
+        media: mediaQuery.data?.data ?? [],
+        itineraryNameById,
+        refetch: {
+            slots: () => void slotsQuery.refetch(),
+            rules: () => void rulesQuery.refetch(),
+            mappings: () => void mappingsQuery.refetch(),
+            media: () => void mediaQuery.refetch(),
+        },
+        mutations: {
+            addChannelMapping,
+            removeChannelMapping,
+            duplicateProduct,
+            deleteProduct,
+            deleteSlot,
+            deleteRule,
+            uploadMedia,
+            deleteMedia,
+            setCover,
+            generateBrochure,
+        },
+        invalidateProduct,
+    };
+}

package/dist/components/product-detail/use-product-detail-dialogs.d.ts

@@ -0,0 +1,24 @@
+import type { AvailabilityRule, DepartureSlot } from "./product-detail-shared.js";
+export interface Toggle {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openNow: () => void;
+    close: () => void;
+}
+export interface EditingToggle<T> {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    editing: T | undefined;
+    openNew: () => void;
+    openEdit: (item: T) => void;
+    close: () => void;
+}
+export interface UseProductDetailDialogsResult {
+    edit: Toggle;
+    bookingCreate: Toggle;
+    departure: EditingToggle<DepartureSlot>;
+    departureOverride: EditingToggle<DepartureSlot>;
+    schedule: EditingToggle<AvailabilityRule>;
+}
+export declare function useProductDetailDialogs(): UseProductDetailDialogsResult;
+//# sourceMappingURL=use-product-detail-dialogs.d.ts.map

package/dist/components/product-detail/use-product-detail-dialogs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-product-detail-dialogs.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/use-product-detail-dialogs.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAEjF,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,aAAa,CAAC,CAAC;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,OAAO,EAAE,CAAC,GAAG,SAAS,CAAA;IACtB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAA;IAC3B,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,MAAM,CAAA;IACZ,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;IACvC,iBAAiB,EAAE,aAAa,CAAC,aAAa,CAAC,CAAA;IAC/C,QAAQ,EAAE,aAAa,CAAC,gBAAgB,CAAC,CAAA;CAC1C;AAkCD,wBAAgB,uBAAuB,IAAI,6BAA6B,CAQvE"}

package/dist/components/product-detail/use-product-detail-dialogs.js

@@ -0,0 +1,40 @@
+import { useState } from "react";
+function useToggle() {
+    const [open, setOpen] = useState(false);
+    return {
+        open,
+        setOpen,
+        openNow: () => setOpen(true),
+        close: () => setOpen(false),
+    };
+}
+function useEditingToggle() {
+    const [open, setOpen] = useState(false);
+    const [editing, setEditing] = useState();
+    return {
+        open,
+        setOpen,
+        editing,
+        openNew: () => {
+            setEditing(undefined);
+            setOpen(true);
+        },
+        openEdit: (item) => {
+            setEditing(item);
+            setOpen(true);
+        },
+        close: () => {
+            setOpen(false);
+            setEditing(undefined);
+        },
+    };
+}
+export function useProductDetailDialogs() {
+    return {
+        edit: useToggle(),
+        bookingCreate: useToggle(),
+        departure: useEditingToggle(),
+        departureOverride: useEditingToggle(),
+        schedule: useEditingToggle(),
+    };
+}

package/dist/components/product-detail/zod-resolver.d.ts

@@ -0,0 +1,4 @@
+import type { FieldValues, Resolver } from "react-hook-form";
+import type { z } from "zod/v4";
+export declare function zodResolver<TSchema extends z.ZodType<FieldValues, FieldValues>>(schema: TSchema): Resolver<z.input<TSchema>, unknown, z.output<TSchema>>;
+//# sourceMappingURL=zod-resolver.d.ts.map

package/dist/components/product-detail/zod-resolver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zod-resolver.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/zod-resolver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,WAAW,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACzE,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAA;AA+B/B,wBAAgB,WAAW,CAAC,OAAO,SAAS,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,EAC7E,MAAM,EAAE,OAAO,GACd,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CA6BxD"}

package/dist/components/product-detail/zod-resolver.js

@@ -0,0 +1,39 @@
+function setFieldError(target, path, error) {
+    let current = target;
+    for (let index = 0; index < path.length; index += 1) {
+        const key = String(path[index] ?? "root");
+        if (index === path.length - 1) {
+            current[key] = error;
+            return;
+        }
+        const next = current[key];
+        if (typeof next !== "object" || next === null) {
+            current[key] = {};
+        }
+        current = current[key];
+    }
+}
+export function zodResolver(schema) {
+    return async (values) => {
+        const result = await schema.safeParseAsync(values);
+        if (result.success) {
+            return {
+                values: result.data,
+                errors: {},
+            };
+        }
+        const errors = {};
+        for (const issue of result.error.issues) {
+            const path = issue.path.filter((segment) => typeof segment !== "symbol");
+            const normalizedPath = path.length > 0 ? path : ["root"];
+            setFieldError(errors, normalizedPath, {
+                type: issue.code,
+                message: issue.message,
+            });
+        }
+        return {
+            values: {},
+            errors: errors,
+        };
+    };
+}

package/dist/components/product-options-section.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EAOzB,MAAM,0BAA0B,CAAA;AA6BjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GACjD,OAAO,CAIT;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,EACpF,eAAe,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE,CAAC,GAClF,MAAM,EAAE,CASV;AA0CD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAAK,EACL,WAAW,EACX,mBAAmB,GACpB,EAAE,0BAA0B,2CAsJ5B"}
+{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,gBAAgB,EACrB,KAAK,mBAAmB,EAOzB,MAAM,0BAA0B,CAAA;AA6BjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqC9B,wBAAgB,mCAAmC,CACjD,MAAM,EAAE,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,MAAM,CAAC,GACjD,OAAO,CAIT;AAED,wBAAgB,6BAA6B,CAC3C,OAAO,EAAE,aAAa,CAAC,IAAI,CAAC,mBAAmB,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAC,CAAC,EACpF,eAAe,EAAE,WAAW,CAAC,MAAM,EAAE,SAAS,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EAAE,CAAC,GAClF,MAAM,EAAE,CASV;AA0CD,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAAK,EACL,WAAW,EACX,mBAAmB,GACpB,EAAE,0BAA0B,2CA+J5B"}

package/dist/components/product-options-section.js

@@ -111,34 +111,45 @@ export function ProductOptionsSection({ productId, pageSize = 100, title, descri
     const nextSortOrder = options.length > 0 ? Math.max(...options.map((option) => option.sortOrder)) + 1 : 0;
     const resolvedTitle = title ?? messages.productOptionsSection.titles.default;
     const resolvedDescription = description ?? messages.productOptionsSection.descriptions.default;
+    // A product with a single option needs no option chrome — show its pricing
+    // table directly. Only flatten when a host injects the details (the grid);
+    // bare mounts (apps/dev) keep the expandable units table.
+    const flattenedOption = renderOptionDetails && options.length === 1 ? options[0] : undefined;
+    const editOption = (option) => {
+        setEditingOption(option);
+        setDialogOpen(true);
+    };
+    const duplicateOptionFlow = (option) => {
+        duplicateOption.mutate({ sourceOptionId: option.id, productId }, {
+            onSuccess: async ({ option: duplicatedOption, unitIdMap }) => {
+                await duplicatePricing.mutateAsync({
+                    sourceOptionId: option.id,
+                    targetOptionId: duplicatedOption.id,
+                    productId,
+                    unitIdMap,
+                });
+            },
+        });
+    };
+    const deleteOption = (option) => {
+        if (confirm(messages.productOptionsSection.deleteConfirm.option.replace("{name}", option.name))) {
+            remove.mutate(option.id);
+        }
+    };
     return (_jsxs(Card, { "data-slot": "product-options-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { children: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }), _jsxs(Button, { onClick: () => {
                             setEditingOption(undefined);
                             setDialogOpen(true);
-                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productOptionsSection.actions.addOption] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [showRoomArrangementWarning ? (_jsxs(Alert, { className: "border-amber-500/40 bg-amber-500/10", children: [_jsx(TriangleAlert, { className: "size-4 text-amber-600", "aria-hidden": "true" }), _jsx(AlertTitle, { children: messages.productOptionsSection.configurationWarnings.roomOptionsTitle }), _jsx(AlertDescription, { children: formatMessage(messages.productOptionsSection.configurationWarnings.roomOptionsDescription, { options: roomArrangementOptionNames.join(", ") }) })] })) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: messages.productOptionsSection.loadingError.options })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productOptionsSection.empty.options })) : (options.map((option) => (_jsx(OptionRow, { option: option, expanded: expandedOptionId === option.id, onToggle: () => setExpandedOptionId((current) => (current === option.id ? null : option.id)), onEdit: () => {
-                            setEditingOption(option);
-                            setDialogOpen(true);
-                        }, onDuplicate: () => {
-                            duplicateOption.mutate({ sourceOptionId: option.id, productId }, {
-                                onSuccess: async ({ option: duplicatedOption, unitIdMap }) => {
-                                    await duplicatePricing.mutateAsync({
-                                        sourceOptionId: option.id,
-                                        targetOptionId: duplicatedOption.id,
-                                        productId,
-                                        unitIdMap,
-                                    });
-                                },
-                            });
-                        }, onDelete: () => {
-                            if (confirm(messages.productOptionsSection.deleteConfirm.option.replace("{name}", option.name))) {
-                                remove.mutate(option.id);
-                            }
-                        }, messages: messages, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
+                        }, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productOptionsSection.actions.addOption] })] }), _jsxs(CardContent, { className: "flex flex-col gap-3", children: [showRoomArrangementWarning ? (_jsxs(Alert, { className: "border-amber-500/40 bg-amber-500/10", children: [_jsx(TriangleAlert, { className: "size-4 text-amber-600", "aria-hidden": "true" }), _jsx(AlertTitle, { children: messages.productOptionsSection.configurationWarnings.roomOptionsTitle }), _jsx(AlertDescription, { children: formatMessage(messages.productOptionsSection.configurationWarnings.roomOptionsDescription, { options: roomArrangementOptionNames.join(", ") }) })] })) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: messages.productOptionsSection.loadingError.options })) : options.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productOptionsSection.empty.options })) : flattenedOption ? (
+                    // A single option needs no chrome at all — show its pricing table
+                    // directly. Per-option actions (duplicate/edit/delete) only appear
+                    // once there are 2+ options to disambiguate.
+                    renderOptionDetails?.(flattenedOption)) : (options.map((option) => (_jsx(OptionRow, { option: option, expanded: expandedOptionId === option.id, onToggle: () => setExpandedOptionId((current) => (current === option.id ? null : option.id)), onEdit: () => editOption(option), onDuplicate: () => duplicateOptionFlow(option), onDelete: () => deleteOption(option), messages: messages, children: renderOptionDetails?.(option) }, option.id)))), _jsx(ProductOptionDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, option: editingOption, sortOrder: nextSortOrder, onSuccess: () => {
                             setDialogOpen(false);
                             setEditingOption(undefined);
                         } })] })] }));
 }
 function OptionRow({ option, expanded, onToggle, onEdit, onDuplicate, onDelete, messages, children, }) {
-    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: option.name }), option.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: option.code })) : null, _jsx(Badge, { variant: optionStatusVariant[option.status] ?? "outline", children: messages.common.optionStatusLabels[option.status] }), option.isDefault ? (_jsx(Badge, { variant: "secondary", children: messages.productOptionsSection.badges.defaultOption })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, "aria-label": messages.productOptionsSection.actions.duplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, "aria-label": messages.productOptionsSection.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] })] }), expanded ? (_jsxs("div", { className: "flex flex-col gap-4 border-t bg-muted/30 p-3", children: [_jsx(UnitsPanel, { optionId: option.id, messages: messages }), children] })) : null] }));
+    return (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "size-4" }) : _jsx(ChevronRight, { className: "size-4" }) }), _jsxs("div", { className: "flex flex-1 flex-wrap items-center gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: option.name }), option.code ? (_jsx("span", { className: "font-mono text-xs text-muted-foreground", children: option.code })) : null, _jsx(Badge, { variant: optionStatusVariant[option.status] ?? "outline", children: messages.common.optionStatusLabels[option.status] }), option.isDefault ? (_jsx(Badge, { variant: "secondary", children: messages.productOptionsSection.badges.defaultOption })) : null] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDuplicate, "aria-label": messages.productOptionsSection.actions.duplicate, children: _jsx(Copy, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onEdit, "aria-label": messages.productOptionsSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: onDelete, "aria-label": messages.productOptionsSection.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] })] }), expanded ? (_jsx("div", { className: "flex flex-col gap-4 border-t bg-muted/30 p-3", children: children ?? _jsx(UnitsPanel, { optionId: option.id, messages: messages }) })) : null] }));
 }
 function UnitsPanel({ optionId, messages, }) {
     const [dialogOpen, setDialogOpen] = React.useState(false);