@voyant-travel/inventory-react 0.1.0

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

@@ -0,0 +1,8 @@
+import type { ChannelInfo, ChannelProductMapping } from "./product-detail-shared.js";
+export declare function ProductChannelsSection({ allChannels, mappings, onAddChannel, onRemoveChannel, }: {
+    allChannels: ChannelInfo[];
+    mappings: ChannelProductMapping[];
+    onAddChannel: (channelId: string) => void;
+    onRemoveChannel: (mappingId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-channel-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-channel-section.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-channel-section.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAEpF,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,eAAe,GAChB,EAAE;IACD,WAAW,EAAE,WAAW,EAAE,CAAA;IAC1B,QAAQ,EAAE,qBAAqB,EAAE,CAAA;IACjC,YAAY,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C,2CA2EA"}

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@voyant-travel/ui/components";
+import { Plus, Trash2 } from "lucide-react";
+import { useProductDetailMessages } from "./host.js";
+import { Section } from "./product-detail-section-shell.js";
+export function ProductChannelsSection({ allChannels, mappings, onAddChannel, onRemoveChannel, }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const assignedChannelIds = new Set(mappings.map((mapping) => mapping.channelId));
+    const assignedChannels = allChannels.filter((channel) => assignedChannelIds.has(channel.id));
+    const unassignedChannels = allChannels.filter((channel) => !assignedChannelIds.has(channel.id) && channel.status === "active");
+    return (_jsx(Section, { title: productMessages.channelsTitle, children: _jsxs("div", { className: "flex flex-col gap-3", children: [assignedChannels.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: productMessages.channelsEmpty })) : (_jsx("div", { className: "flex flex-col divide-y", children: assignedChannels.map((channel) => {
+                        const mapping = mappings.find((entry) => entry.channelId === channel.id);
+                        return (_jsxs("div", { className: "flex items-center justify-between py-2 first:pt-0 last:pb-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm", children: channel.name }), _jsx(Badge, { variant: "outline", className: "text-[10px] capitalize", children: channel.kind.replace("_", " ") })] }), mapping ? (_jsx(Button, { variant: "ghost", size: "icon", className: "h-7 w-7 text-muted-foreground hover:text-destructive", onClick: () => onRemoveChannel(mapping.id), children: _jsx(Trash2, { className: "h-3.5 w-3.5" }) })) : null] }, channel.id));
+                    }) })), unassignedChannels.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "w-full", children: [_jsx(Plus, { className: "mr-1.5 h-3.5 w-3.5" }), productMessages.addChannel] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: unassignedChannels.map((channel) => (_jsxs(DropdownMenuItem, { onClick: () => onAddChannel(channel.id), children: [channel.name, _jsx("span", { className: "ml-auto text-xs capitalize text-muted-foreground", children: channel.kind.replace("_", " ") })] }, channel.id))) })] })) : null, allChannels.length === 0 ? (_jsxs("p", { className: "text-xs text-muted-foreground", children: [productMessages.noChannelsDefined, " ", _jsx("a", { href: "/settings/channels", className: "underline", children: productMessages.createChannelsInSettings })] })) : null] }) }));
+}

package/dist/components/product-detail/product-detail-day-row.d.ts

@@ -0,0 +1,14 @@
+import { type DayService, type ProductDay } from "./product-detail-shared.js";
+export interface ProductDetailDayRowProps {
+    day: ProductDay;
+    productId: string;
+    expanded: boolean;
+    onToggle: () => void;
+    onEdit: () => void;
+    onDelete: () => void;
+    onAddService: () => void;
+    onEditService: (service: DayService) => void;
+    onDeleteService: (serviceId: string) => void;
+}
+export declare function ProductDetailDayRow({ day, productId, expanded, onToggle, onEdit, onDelete, onAddService, onEditService, onDeleteService, }: ProductDetailDayRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-day-row.d.ts.map

package/dist/components/product-detail/product-detail-day-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-day-row.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-day-row.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,KAAK,UAAU,EAGf,KAAK,UAAU,EAChB,MAAM,4BAA4B,CAAA;AAEnC,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,UAAU,CAAA;IACf,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,aAAa,EAAE,CAAC,OAAO,EAAE,UAAU,KAAK,IAAI,CAAA;IAC5C,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7C;AAwBD,wBAAgB,mBAAmB,CAAC,EAClC,GAAG,EACH,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,eAAe,GAChB,EAAE,wBAAwB,2CAgI1B"}

package/dist/components/product-detail/product-detail-day-row.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge, DropdownMenuItem, DropdownMenuSeparator } from "@voyant-travel/ui/components";
+import { ChevronDown, ChevronRight, Image as ImageIcon, Pencil, Plus, Trash2 } from "lucide-react";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { ActionMenu } from "./product-detail-sections.js";
+import { getProductDayMediaQueryOptions, getProductDayServicesQueryOptions, } from "./product-detail-shared.js";
+function getServiceTypeLabel(serviceType, messages) {
+    switch (serviceType) {
+        case "accommodation":
+            return messages.serviceTypeAccommodation;
+        case "transfer":
+            return messages.serviceTypeTransfer;
+        case "experience":
+            return messages.serviceTypeExperience;
+        case "guide":
+            return messages.serviceTypeGuide;
+        case "meal":
+            return messages.serviceTypeMeal;
+        case "other":
+            return messages.serviceTypeOther;
+        default:
+            return serviceType;
+    }
+}
+export function ProductDetailDayRow({ day, productId, expanded, onToggle, onEdit, onDelete, onAddService, onEditService, onDeleteService, }) {
+    const api = useProductDetailApi();
+    const messages = useProductDetailMessages();
+    const dayRowMessages = messages.products.operations.dayRows;
+    const serviceMessages = messages.products.operations.services;
+    const { data: servicesData } = useQuery({
+        ...getProductDayServicesQueryOptions(api, productId, day.id),
+        enabled: expanded,
+    });
+    const { data: dayMediaData } = useQuery(getProductDayMediaQueryOptions(api, productId, day.id));
+    const mediaCount = dayMediaData?.data.length ?? 0;
+    const cover = dayMediaData?.data.find((m) => m.isCover) ?? dayMediaData?.data[0];
+    return (_jsxs("div", { className: "rounded-lg border", children: [_jsxs("div", { className: "flex items-center gap-3 px-4 py-3", children: [_jsx("button", { type: "button", onClick: onToggle, className: "text-muted-foreground transition-colors hover:text-foreground", children: expanded ? _jsx(ChevronDown, { className: "h-4 w-4" }) : _jsx(ChevronRight, { className: "h-4 w-4" }) }), cover?.mediaType === "image" ? (_jsx("img", { src: cover.url, alt: cover.altText ?? cover.name, className: "h-10 w-14 flex-shrink-0 rounded object-cover" })) : (_jsx("div", { className: "flex h-10 w-14 flex-shrink-0 items-center justify-center rounded border bg-muted/50 text-muted-foreground", children: _jsx(ImageIcon, { className: "h-4 w-4" }) })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "text-sm font-medium", children: [formatMessage(dayRowMessages.title, { dayNumber: day.dayNumber }), day.title ? `: ${day.title}` : ""] }), day.location ? (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: day.location })) : null] }), mediaCount > 0 ? (_jsx(Badge, { variant: "outline", className: "text-[10px]", children: formatMessage(dayRowMessages.photoCount, {
+                            count: mediaCount,
+                            suffix: mediaCount === 1 ? "" : "s",
+                        }) })) : null, _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: onEdit, children: [_jsx(Pencil, { className: "h-4 w-4" }), dayRowMessages.editAction] }), _jsxs(DropdownMenuItem, { onClick: onAddService, children: [_jsx(Plus, { className: "h-4 w-4" }), dayRowMessages.addServiceAction] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: onDelete, children: [_jsx(Trash2, { className: "h-4 w-4" }), dayRowMessages.deleteAction] })] })] }), expanded ? (_jsx("div", { className: "border-t", children: !servicesData?.data || servicesData.data.length === 0 ? (_jsx("p", { className: "py-4 text-center text-xs text-muted-foreground", children: dayRowMessages.emptyServices })) : (_jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/30 text-muted-foreground", children: [_jsx("th", { className: "py-2 pl-4 pr-3 text-left font-medium", children: dayRowMessages.tableName }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: dayRowMessages.tableType }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: dayRowMessages.tableCost }), _jsx("th", { className: "px-3 py-2 text-left font-medium", children: dayRowMessages.tableQuantity }), _jsx("th", { className: "w-10 px-3 py-2" })] }) }), _jsx("tbody", { children: servicesData.data.map((service) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsx("td", { className: "py-2 pl-4 pr-3", children: service.name }), _jsx("td", { className: "px-3 py-2", children: _jsx(Badge, { variant: "outline", className: "text-xs capitalize", children: getServiceTypeLabel(service.serviceType, serviceMessages) }) }), _jsxs("td", { className: "px-3 py-2 font-mono", children: [(service.costAmountCents / 100).toFixed(2), " ", service.costCurrency] }), _jsx("td", { className: "px-3 py-2", children: service.quantity }), _jsx("td", { className: "px-3 py-2", children: _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { onClick: () => onEditService(service), children: [_jsx(Pencil, { className: "h-4 w-4" }), dayRowMessages.editAction] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => onDeleteService(service.id), children: [_jsx(Trash2, { className: "h-4 w-4" }), dayRowMessages.deleteAction] })] }) })] }, service.id))) })] })) })) : null] }));
+}

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

@@ -0,0 +1,10 @@
+import { type ProductData } from "./product-detail-form.js";
+export type { ProductData };
+type ProductDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    product?: ProductData;
+    onSuccess: (id?: string) => void;
+};
+export declare function ProductDialog({ open, onOpenChange, product, onSuccess }: ProductDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-dialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,WAAW,EAAqB,MAAM,0BAA0B,CAAA;AAE9E,YAAY,EAAE,WAAW,EAAE,CAAA;AAE3B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACjC,CAAA;AAED,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,kBAAkB,2CAuB3F"}

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTitle, } from "@voyant-travel/ui/components";
+import { useProductDetailMessages } from "./host.js";
+import { ProductDetailForm } from "./product-detail-form.js";
+export function ProductDialog({ open, onOpenChange, product, onSuccess }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const isEditing = !!product;
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? productMessages.detailSheetEditTitle : productMessages.detailSheetNewTitle }) }), _jsx(SheetBody, { children: _jsx(ProductDetailForm, { product: product, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
+}

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

@@ -0,0 +1,22 @@
+export type ProductData = {
+    id: string;
+    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;
+    sellCurrency: string;
+    tags: string[];
+    defaultLanguageTag?: string | null;
+};
+export interface ProductDetailFormProps {
+    product?: ProductData;
+    onSuccess: (id?: string) => void;
+    onCancel?: () => void;
+}
+export declare function ProductDetailForm({ product, onSuccess, onCancel }: ProductDetailFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-form.d.ts.map

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

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

@@ -0,0 +1,205 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// agent-quality: file-size exception -- owner: inventory-react; existing UI surface stays co-located until a dedicated split preserves behavior and tests.
+import { useQuery } from "@tanstack/react-query";
+import { Badge, Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components";
+import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import { currencies } from "@voyant-travel/utils/currencies";
+import { Loader2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailApi, useProductDetailMessages, useProductLocale } from "./host.js";
+import { ContentLanguageSwitcher, LanguageCombobox, TranslatableField, useProductTranslationDrafts, } from "./product-translation-popover.js";
+import { zodResolver } from "./zod-resolver.js";
+const CURRENCY_OPTIONS = Object.values(currencies).map((c) => ({
+    value: c.code,
+    label: `${c.code} — ${c.name} (${c.symbol})`,
+}));
+function initialValues(product) {
+    if (product) {
+        return {
+            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 ?? "",
+            sellCurrency: product.sellCurrency,
+            tags: product.tags ?? [],
+            defaultLanguageTag: product.defaultLanguageTag ?? "",
+        };
+    }
+    return {
+        name: "",
+        status: "draft",
+        description: "",
+        inclusionsHtml: "",
+        exclusionsHtml: "",
+        termsHtml: "",
+        bookingMode: "itinerary",
+        productTypeId: "",
+        taxClassId: "",
+        sellCurrency: "EUR",
+        tags: [],
+        defaultLanguageTag: "",
+    };
+}
+export function ProductDetailForm({ product, onSuccess, onCancel }) {
+    const messages = useProductDetailMessages();
+    const api = useProductDetailApi();
+    const productMessages = messages.products.core;
+    const isEditing = !!product;
+    const productFormSchema = z.object({
+        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(),
+        sellCurrency: z
+            .string()
+            .min(3, productMessages.validationIsoCurrency)
+            .max(3, productMessages.validationIsoCurrency),
+        tags: z.array(z.string()).default([]),
+        defaultLanguageTag: z.string().optional().nullable(),
+    });
+    const productStatuses = [
+        { value: "draft", label: productMessages.statusDraft },
+        { 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: "transfer", label: productMessages.bookingModeTransfer },
+        { value: "open", label: productMessages.bookingModeOpen },
+        { value: "other", label: productMessages.bookingModeOther },
+    ];
+    const form = useForm({
+        resolver: zodResolver(productFormSchema),
+        defaultValues: initialValues(product),
+    });
+    const translations = useProductTranslationDrafts(product?.id ?? null);
+    const resolvedLocale = useProductLocale();
+    const adminBaseLocale = resolvedLocale.split("-")[0]?.toLowerCase() || "en";
+    const defaultLanguageTag = form.watch("defaultLanguageTag")?.trim() || adminBaseLocale;
+    const [activeLanguage, setActiveLanguage] = useState(defaultLanguageTag);
+    // Following the default language keeps the active field in sync when the
+    // product changes (form.reset) or the default-language setting is edited.
+    useEffect(() => {
+        setActiveLanguage(defaultLanguageTag);
+    }, [defaultLanguageTag]);
+    const [tagInput, setTagInput] = useState("");
+    const { data: typesData } = useQuery({
+        queryKey: ["product-types"],
+        queryFn: () => api.get("/v1/products/product-types?limit=25&active=true"),
+    });
+    const { data: taxClassesData } = useQuery({
+        queryKey: ["tax-classes"],
+        queryFn: () => api.get("/v1/admin/finance/tax-classes?limit=100&active=true"),
+    });
+    const productTypes = typesData?.data ?? [];
+    const taxClasses = taxClassesData?.data ?? [];
+    useEffect(() => {
+        form.reset(initialValues(product));
+        setTagInput("");
+    }, [product, form]);
+    const onSubmit = async (values) => {
+        const resolvedDefaultLanguage = values.defaultLanguageTag?.trim() || adminBaseLocale;
+        const payload = {
+            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,
+            sellCurrency: values.sellCurrency,
+            tags: values.tags,
+            defaultLanguageTag: resolvedDefaultLanguage,
+        };
+        const persistOptions = {
+            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);
+            await translations.persist(product.id, persistOptions);
+            onSuccess();
+        }
+        else {
+            const result = await api.post("/v1/products", payload);
+            await translations.persist(result.id, persistOptions);
+            onSuccess(result.id);
+        }
+    };
+    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: [_jsx(ContentLanguageSwitcher, { activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, languageTags: translations.drafts.map((draft) => draft.languageTag), messages: productMessages, onSelect: setActiveLanguage, onAddLanguage: (code) => {
+                            translations.addLanguage(code);
+                            setActiveLanguage(code);
+                        }, onRemoveLanguage: (code) => {
+                            translations.removeLanguage(code);
+                            if (activeLanguage === code)
+                                setActiveLanguage(defaultLanguageTag);
+                        } }), _jsx(TranslatableField, { label: productMessages.nameLabel, type: "text", field: "name", activeLanguage: activeLanguage, defaultLanguageTag: defaultLanguageTag, base: {
+                            value: form.watch("name") ?? "",
+                            onChange: (value) => form.setValue("name", value, { shouldDirty: true, shouldValidate: true }),
+                        }, 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 }), _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) => {
+                                    if (e.key === "Enter" || e.key === ",") {
+                                        e.preventDefault();
+                                        const value = tagInput.trim().replace(/,+$/, "");
+                                        const current = form.getValues("tags") ?? [];
+                                        if (value && !current.includes(value)) {
+                                            form.setValue("tags", [...current, value], { shouldDirty: true });
+                                        }
+                                        setTagInput("");
+                                    }
+                                }, placeholder: productMessages.tagInputPlaceholder })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.bookingModeLabel }), _jsxs(Select, { value: form.watch("bookingMode"), onValueChange: (v) => form.setValue("bookingMode", v), items: bookingModes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: bookingModes.map((m) => (_jsx(SelectItem, { value: m.value, children: m.label }, m.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.productTypeLabel }), _jsxs(Select, { value: form.watch("productTypeId") ?? "", onValueChange: (v) => form.setValue("productTypeId", v === "__none__" ? null : v, {
+                                            shouldDirty: true,
+                                        }), items: [
+                                            { value: "__none__", label: productMessages.productTypeNone },
+                                            ...productTypes.map((t) => ({ value: t.id, label: t.name })),
+                                        ], children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: productMessages.productTypeNone }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", children: productMessages.productTypeNone }), productTypes.map((t) => (_jsx(SelectItem, { value: t.id, children: t.name }, t.id)))] })] })] })] }), isEditing && (_jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.statusLabel }), _jsxs(Select, { value: form.watch("status"), onValueChange: (v) => form.setValue("status", v), items: productStatuses, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: productStatuses.map((s) => (_jsx(SelectItem, { value: s.value, children: s.label }, s.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.taxClassLabel }), _jsxs(Select, { value: form.watch("taxClassId") ?? "", onValueChange: (v) => form.setValue("taxClassId", v === "__none__" ? null : v, {
+                                            shouldDirty: true,
+                                        }), items: [
+                                            { value: "__none__", label: productMessages.taxClassNone },
+                                            ...taxClasses.map((taxClass) => ({
+                                                value: taxClass.id,
+                                                label: taxClass.label,
+                                            })),
+                                        ], children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: productMessages.taxClassNone }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "__none__", children: productMessages.taxClassNone }), taxClasses.map((taxClass) => (_jsx(SelectItem, { value: taxClass.id, children: taxClass.label }, taxClass.id)))] })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: productMessages.sellCurrencyLabel }), _jsx(CurrencyCombobox, { value: form.watch("sellCurrency"), onChange: (v) => form.setValue("sellCurrency", v, { shouldDirty: true }), messages: productMessages }), form.formState.errors.sellCurrency && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.sellCurrency.message }))] })] }))] }), _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 : productMessages.createProduct] })] })] }));
+}
+function CurrencyCombobox({ value, onChange, messages, }) {
+    return (_jsxs(Combobox, { value: value, onValueChange: (v) => onChange(v ?? ""), children: [_jsx(ComboboxInput, { placeholder: messages.currencySearchPlaceholder, className: "w-full" }), _jsx(ComboboxContent, { children: _jsxs(ComboboxList, { children: [CURRENCY_OPTIONS.map((c) => (_jsxs(ComboboxItem, { value: c.value, children: [_jsx("span", { className: "font-mono text-xs", children: c.value }), _jsx("span", { className: "truncate text-muted-foreground", children: c.label.split(" — ")[1] })] }, c.value))), _jsx(ComboboxEmpty, { children: messages.currencyEmpty })] }) })] }));
+}

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

@@ -0,0 +1,12 @@
+import type { ProductRecord } from "./product-detail-shared.js";
+export interface ProductDetailHeaderProps {
+    product: ProductRecord;
+    isDuplicating: boolean;
+    isDeleting: boolean;
+    onEdit: () => void;
+    onAddBooking: () => void;
+    onDuplicate: () => void;
+    onDelete: () => void;
+}
+export declare function ProductDetailHeader({ product, isDuplicating, isDeleting, onEdit, onAddBooking, onDuplicate, onDelete, }: ProductDetailHeaderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-detail-header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-detail-header.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-detail-header.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAA;AAG/D,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,aAAa,CAAA;IACtB,aAAa,EAAE,OAAO,CAAA;IACtB,UAAU,EAAE,OAAO,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,aAAa,EACb,UAAU,EACV,MAAM,EACN,YAAY,EACZ,WAAW,EACX,QAAQ,GACT,EAAE,wBAAwB,2CAwC1B"}

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, DropdownMenuItem } from "@voyant-travel/ui/components";
+import { CalendarPlus, Copy, Pencil, Trash2 } from "lucide-react";
+import { useEffect } from "react";
+import { useProductDetailHost, useProductDetailMessages } from "./host.js";
+import { ActionMenu } from "./product-detail-sections.js";
+import { getProductStatusLabel, statusVariant } from "./product-detail-shared.js";
+export function ProductDetailHeader({ product, isDuplicating, isDeleting, onEdit, onAddBooking, onDuplicate, onDelete, }) {
+    const messages = useProductDetailMessages();
+    const productMessages = messages.products.core;
+    const { setBreadcrumbs } = useProductDetailHost();
+    useEffect(() => {
+        setBreadcrumbs?.([
+            { label: productMessages.breadcrumbProducts, href: "/products" },
+            { label: product.name },
+        ]);
+    }, [setBreadcrumbs, productMessages.breadcrumbProducts, product.name]);
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h1", { className: "text-2xl font-bold tracking-tight", children: product.name }), _jsx(Badge, { variant: statusVariant[product.status] ?? "secondary", children: getProductStatusLabel(product.status, messages) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: onEdit, children: [_jsx(Pencil, { className: "h-4 w-4" }), productMessages.edit] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: onAddBooking, children: [_jsx(CalendarPlus, { className: "h-4 w-4" }), productMessages.addBooking] }), _jsxs(ActionMenu, { children: [_jsxs(DropdownMenuItem, { disabled: isDuplicating, onClick: onDuplicate, children: [_jsx(Copy, { className: "h-4 w-4" }), productMessages.duplicate] }), _jsxs(DropdownMenuItem, { variant: "destructive", disabled: isDeleting, onClick: onDelete, children: [_jsx(Trash2, { className: "h-4 w-4" }), productMessages.delete] })] })] })] }));
+}

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

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

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

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