@voyant-travel/inventory-react 0.1.0

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 { Button, Checkbox, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyant-travel/ui/components";
+import * as React from "react";
+import { useProductExtraMutation } from "../../extras-compat.js";
+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-itinerary-form.d.ts

@@ -0,0 +1,16 @@
+export type ItineraryData = {
+    id: string;
+    name: string;
+    isDefault: boolean;
+};
+export interface ProductItineraryFormProps {
+    itinerary?: ItineraryData;
+    isFirstItinerary?: boolean;
+    onSubmit: (values: {
+        name: string;
+        isDefault: boolean;
+    }) => Promise<void> | void;
+    onCancel?: () => void;
+}
+export declare function ProductItineraryForm({ itinerary, isFirstItinerary, onSubmit, onCancel, }: ProductItineraryFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-itinerary-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-itinerary-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-itinerary-form.tsx"],"names":[],"mappings":"AAsBA,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAChF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,wBAAgB,oBAAoB,CAAC,EACnC,SAAS,EACT,gBAAwB,EACxB,QAAQ,EACR,QAAQ,GACT,EAAE,yBAAyB,2CA6E3B"}

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Checkbox, Input, Label } from "@voyant-travel/ui/components";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailMessages } from "./host.js";
+import { zodResolver } from "./zod-resolver.js";
+const buildItineraryFormSchema = (messages) => z.object({
+    name: z.string().min(1, messages.validationNameRequired).max(255),
+    isDefault: z.boolean(),
+});
+export function ProductItineraryForm({ itinerary, isFirstItinerary = false, onSubmit, onCancel, }) {
+    const messages = useProductDetailMessages();
+    const itineraryMessages = messages.products.operations.itineraries;
+    const isEditing = !!itinerary;
+    const schema = buildItineraryFormSchema(itineraryMessages);
+    const form = useForm({
+        resolver: zodResolver(schema),
+        defaultValues: itinerary
+            ? { name: itinerary.name, isDefault: itinerary.isDefault }
+            : { name: "", isDefault: isFirstItinerary },
+    });
+    useEffect(() => {
+        if (itinerary) {
+            form.reset({ name: itinerary.name, isDefault: itinerary.isDefault });
+        }
+        else {
+            form.reset({ name: "", isDefault: isFirstItinerary });
+        }
+    }, [itinerary, isFirstItinerary, form]);
+    const isDefault = form.watch("isDefault");
+    const defaultLocked = isEditing && itinerary?.isDefault === true;
+    const handleSubmit = async (values) => {
+        await onSubmit(values);
+    };
+    return (_jsxs("form", { onSubmit: form.handleSubmit(handleSubmit), className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { htmlFor: "product-itinerary-name", children: itineraryMessages.nameLabel }), _jsx(Input, { id: "product-itinerary-name", autoFocus: true, placeholder: itineraryMessages.namePlaceholder, ...form.register("name") }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: "product-itinerary-default", checked: isDefault, disabled: defaultLocked || isFirstItinerary, onCheckedChange: (checked) => form.setValue("isDefault", checked === true, { shouldDirty: true }) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "product-itinerary-default", className: "text-sm font-normal", children: itineraryMessages.setDefaultLabel }), defaultLocked ? (_jsx("p", { className: "text-xs text-muted-foreground", children: itineraryMessages.defaultLockHint })) : isFirstItinerary ? (_jsx("p", { className: "text-xs text-muted-foreground", children: itineraryMessages.firstDefaultHint })) : null] })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, children: itineraryMessages.cancel })) : null, _jsxs(Button, { type: "submit", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? itineraryMessages.save : itineraryMessages.create] })] })] }));
+}

package/dist/components/product-detail/product-market-rules-section.d.ts

@@ -0,0 +1,6 @@
+interface ProductMarketRulesSectionProps {
+    productId: string;
+}
+export declare function ProductMarketRulesSection({ productId }: ProductMarketRulesSectionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-market-rules-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-market-rules-section.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-market-rules-section.tsx"],"names":[],"mappings":"AAwCA,UAAU,8BAA8B;IACtC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE,8BAA8B,2CAuItF"}

package/dist/components/product-detail/product-market-rules-section.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, } from "@voyant-travel/ui/components";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@voyant-travel/ui/components/select";
+import { Globe2, Loader2, Plus, Trash2 } from "lucide-react";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { useMarketProductRuleMutation, useMarketProductRules, useMarkets, } from "./commerce-client.js";
+import { useProductDetailMessages } from "./host.js";
+const SELLABILITY = ["sellable", "on_request", "unavailable"];
+const VISIBILITY = ["public", "private", "hidden"];
+export function ProductMarketRulesSection({ productId }) {
+    const t = useProductDetailMessages().products.operations.marketRules;
+    const marketsQuery = useMarkets({ status: "active", limit: 100 });
+    const rulesQuery = useMarketProductRules({ productId, limit: 200 });
+    const mutations = useMarketProductRuleMutation();
+    const markets = marketsQuery.data?.data ?? [];
+    const productRules = (rulesQuery.data?.data ?? []).filter((rule) => !rule.optionId);
+    const marketById = useMemo(() => new Map(markets.map((market) => [market.id, market])), [markets]);
+    const existingMarketIds = new Set(productRules.map((rule) => rule.marketId));
+    const availableMarkets = markets.filter((market) => !existingMarketIds.has(market.id));
+    const [selectedMarketId, setSelectedMarketId] = useState("");
+    const isLoading = marketsQuery.isPending || rulesQuery.isPending;
+    const isMutating = mutations.create.isPending || mutations.update.isPending || mutations.remove.isPending;
+    const addRule = async () => {
+        if (!selectedMarketId)
+            return;
+        try {
+            await mutations.create.mutateAsync({
+                marketId: selectedMarketId,
+                productId,
+                optionId: null,
+                priceCatalogId: null,
+                visibility: "public",
+                sellability: "sellable",
+                channelScope: "all",
+                active: true,
+                availableFrom: null,
+                availableTo: null,
+                notes: null,
+            });
+            setSelectedMarketId("");
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : t.addFailed);
+        }
+    };
+    const updateRule = async (rule, input) => {
+        try {
+            await mutations.update.mutateAsync({ id: rule.id, input });
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : t.updateFailed);
+        }
+    };
+    const removeRule = async (rule) => {
+        const marketName = marketById.get(rule.marketId)?.name ?? rule.marketId;
+        if (!confirm(formatMessage(t.removeConfirm, { market: marketName })))
+            return;
+        try {
+            await mutations.remove.mutateAsync(rule.id);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : t.removeFailed);
+        }
+    };
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { children: [_jsxs(CardTitle, { className: "flex items-center gap-2", children: [_jsx(Globe2, { className: "h-4 w-4" }), t.title] }), _jsx("p", { className: "mt-1 text-muted-foreground text-sm", children: t.description })] }), isLoading ? _jsx(Loader2, { className: "h-4 w-4 animate-spin text-muted-foreground" }) : null] }) }), _jsxs(CardContent, { className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto]", children: [_jsxs(Select, { value: selectedMarketId, onValueChange: (value) => setSelectedMarketId(value ?? ""), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: t.addMarketPlaceholder }) }), _jsx(SelectContent, { children: availableMarkets.map((market) => (_jsxs(SelectItem, { value: market.id, children: [market.name, " \u00B7 ", market.defaultLanguageTag] }, market.id))) })] }), _jsxs(Button, { type: "button", onClick: () => void addRule(), disabled: !selectedMarketId || isMutating, children: [mutations.create.isPending ? (_jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" })) : (_jsx(Plus, { className: "mr-2 h-4 w-4" })), t.addMarketButton] })] }), productRules.length === 0 ? (_jsx("div", { className: "rounded-md border border-dashed p-4 text-muted-foreground text-sm", children: t.empty })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "hidden gap-3 border-b px-3 py-2 text-muted-foreground text-xs font-medium md:grid md:grid-cols-[minmax(0,1fr)_160px_150px_130px_40px] md:items-center", children: [_jsx("span", {}), _jsx("span", { children: t.sellabilityLabel }), _jsx("span", { children: t.visibilityLabel }), _jsx("span", { children: t.statusLabel }), _jsx("span", {})] }), _jsx("div", { className: "divide-y", children: productRules.map((rule) => (_jsx(MarketRuleRow, { rule: rule, marketName: marketById.get(rule.marketId)?.name ?? rule.marketId, languageTag: marketById.get(rule.marketId)?.defaultLanguageTag ?? null, disabled: isMutating, onUpdate: updateRule, onRemove: removeRule, messages: t }, rule.id))) })] }))] })] }));
+}
+function MarketRuleRow({ rule, marketName, languageTag, disabled, onUpdate, onRemove, messages, }) {
+    return (_jsxs("div", { className: "grid gap-3 p-3 md:grid-cols-[minmax(0,1fr)_160px_150px_130px_40px] md:items-center", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-medium text-sm", children: marketName }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: [languageTag ? _jsx(Badge, { variant: "secondary", children: languageTag }) : null, _jsx(Badge, { variant: rule.active ? "default" : "outline", children: rule.active ? messages.activeBadge : messages.inactiveBadge })] })] }), _jsxs(Select, { value: rule.sellability, onValueChange: (value) => {
+                    if (value)
+                        onUpdate(rule, { sellability: value });
+                }, disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: SELLABILITY.map((value) => (_jsx(SelectItem, { value: value, children: messages.sellabilityOptions[value] }, value))) })] }), _jsxs(Select, { value: rule.visibility, onValueChange: (value) => {
+                    if (value)
+                        onUpdate(rule, { visibility: value });
+                }, disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: VISIBILITY.map((value) => (_jsx(SelectItem, { value: value, children: messages.visibilityOptions[value] }, value))) })] }), _jsxs(Select, { value: rule.active ? "active" : "inactive", onValueChange: (value) => {
+                    if (value)
+                        onUpdate(rule, { active: value === "active" });
+                }, disabled: disabled, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: "active", children: messages.activeStatus }), _jsx(SelectItem, { value: "inactive", children: messages.inactiveStatus })] })] }), _jsx(Button, { type: "button", variant: "ghost", size: "icon", onClick: () => onRemove(rule), disabled: disabled, children: _jsx(Trash2, { className: "h-4 w-4" }) })] }));
+}

package/dist/components/product-detail/product-media-gallery.d.ts

@@ -0,0 +1,19 @@
+import type { ProductMediaItem } from "./product-detail-shared.js";
+interface ProductMediaGalleryProps {
+    productId: string;
+    media: ProductMediaItem[];
+    isUploading: boolean;
+    onUpload: (file: File) => void;
+    onSetCover: (mediaId: string) => void;
+    onDelete: (mediaId: string) => void;
+    onReorderLocal?: (items: ProductMediaItem[]) => void;
+}
+/**
+ * Media block for product + itinerary-day photos.
+ * - Featured carousel with prev/next, click-to-lightbox
+ * - Reorder-mode toggle exposes draggable thumbnail row (motion Reorder)
+ * - Per-tile actions: set cover, delete
+ */
+export declare function ProductMediaGallery({ productId, media, isUploading, onUpload, onSetCover, onDelete, onReorderLocal, }: ProductMediaGalleryProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-media-gallery.d.ts.map

package/dist/components/product-detail/product-media-gallery.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-media-gallery.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-media-gallery.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAElE,UAAU,wBAAwB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,gBAAgB,EAAE,CAAA;IACzB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAA;CACrD;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAAc,GACf,EAAE,wBAAwB,2CAyM1B"}

package/dist/components/product-detail/product-media-gallery.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMutation } from "@tanstack/react-query";
+import { formatMessage } from "@voyant-travel/i18n";
+import { Button } from "@voyant-travel/ui/components";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "@voyant-travel/ui/components/carousel";
+import { Dialog, DialogContent, DialogTitle } from "@voyant-travel/ui/components/dialog";
+import { cn } from "@voyant-travel/ui/lib/utils";
+import { ChevronLeft, ChevronRight, GripVertical, Loader2, Star, Trash2, Upload, X, } from "lucide-react";
+import { Reorder } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+/**
+ * Media block for product + itinerary-day photos.
+ * - Featured carousel with prev/next, click-to-lightbox
+ * - Reorder-mode toggle exposes draggable thumbnail row (motion Reorder)
+ * - Per-tile actions: set cover, delete
+ */
+export function ProductMediaGallery({ productId, media, isUploading, onUpload, onSetCover, onDelete, onReorderLocal, }) {
+    const messages = useProductDetailMessages();
+    const api = useProductDetailApi();
+    const mediaMessages = messages.products.operations.media;
+    const fileInputRef = useRef(null);
+    const [carouselApi, setCarouselApi] = useState();
+    const [active, setActive] = useState(0);
+    const [lightboxIndex, setLightboxIndex] = useState(null);
+    const [reorderMode, setReorderMode] = useState(false);
+    const [localOrder, setLocalOrder] = useState(media);
+    // Keep local order in sync with props unless we're actively reordering.
+    useEffect(() => {
+        if (!reorderMode)
+            setLocalOrder(media);
+    }, [media, reorderMode]);
+    useEffect(() => {
+        if (!carouselApi)
+            return;
+        const onSelect = () => setActive(carouselApi.selectedScrollSnap());
+        onSelect();
+        carouselApi.on("select", onSelect);
+        return () => {
+            carouselApi.off("select", onSelect);
+        };
+    }, [carouselApi]);
+    const reorderMutation = useMutation({
+        mutationFn: (items) => api_post_reorder(api, productId, items),
+    });
+    const commitReorder = () => {
+        const items = localOrder.map((m, i) => ({ id: m.id, sortOrder: i }));
+        reorderMutation.mutate(items, {
+            onSuccess: () => {
+                setReorderMode(false);
+                onReorderLocal?.(localOrder);
+            },
+        });
+    };
+    const cancelReorder = () => {
+        setLocalOrder(media);
+        setReorderMode(false);
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-xs text-muted-foreground", children: media.length === 0
+                            ? mediaMessages.emptySummary
+                            : formatMessage(mediaMessages.itemCount, {
+                                count: media.length,
+                                suffix: media.length === 1 ? "" : "s",
+                            }) }), _jsxs("div", { className: "flex items-center gap-2", children: [media.length > 1 ? (reorderMode ? (_jsxs(_Fragment, { children: [_jsx(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: cancelReorder, disabled: reorderMutation.isPending, children: mediaMessages.cancelReorder }), _jsxs(Button, { type: "button", size: "sm", className: "h-8 text-xs", onClick: commitReorder, disabled: reorderMutation.isPending, children: [reorderMutation.isPending ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : null, mediaMessages.saveOrder] })] })) : (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-8 text-xs", onClick: () => setReorderMode(true), children: [_jsx(GripVertical, { className: "mr-1.5 h-3.5 w-3.5" }), mediaMessages.reorder] }))) : null, _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "h-8 text-xs", disabled: isUploading || reorderMode, onClick: () => fileInputRef.current?.click(), children: [isUploading ? (_jsx(Loader2, { className: "mr-1.5 h-3.5 w-3.5 animate-spin" })) : (_jsx(Upload, { className: "mr-1.5 h-3.5 w-3.5" })), mediaMessages.upload] }), _jsx("input", { ref: fileInputRef, type: "file", accept: "image/*,video/*", className: "hidden", onChange: (event) => {
+                                    const file = event.target.files?.[0];
+                                    if (file) {
+                                        onUpload(file);
+                                        event.target.value = "";
+                                    }
+                                } })] })] }), media.length === 0 ? (_jsx("div", { className: "flex h-40 items-center justify-center rounded-lg border border-dashed text-sm text-muted-foreground", children: mediaMessages.emptyState })) : reorderMode ? (_jsx(ReorderGrid, { items: localOrder, onReorder: setLocalOrder, mediaMessages: mediaMessages })) : (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs(Carousel, { setApi: setCarouselApi, opts: { align: "start" }, className: "w-full", children: [_jsx(CarouselContent, { children: media.map((item, idx) => (_jsx(CarouselItem, { children: _jsx(MediaPreview, { item: item, onOpen: () => setLightboxIndex(idx), onSetCover: onSetCover, onDelete: onDelete, mediaMessages: mediaMessages }) }, item.id))) }), media.length > 1 ? (_jsxs(_Fragment, { children: [_jsx(CarouselPrevious, { className: "left-2 size-8" }), _jsx(CarouselNext, { className: "right-2 size-8" })] })) : null] }), media.length > 1 ? (_jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: media.map((item, idx) => (_jsxs("button", { type: "button", onClick: () => carouselApi?.scrollTo(idx), className: cn("relative size-16 flex-shrink-0 overflow-hidden rounded border transition-all", idx === active
+                                ? "border-primary ring-2 ring-primary/30"
+                                : "border-border opacity-60 hover:opacity-100"), children: [item.mediaType === "image" ? (_jsx("img", { src: item.url, alt: item.altText ?? item.name, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-[9px] uppercase text-muted-foreground", children: item.mediaType })), item.isCover ? (_jsx(Star, { className: "absolute left-0.5 top-0.5 h-3 w-3 fill-yellow-400 text-yellow-400" })) : null] }, item.id))) })) : null] })), _jsx(Lightbox, { media: media, index: lightboxIndex, onClose: () => setLightboxIndex(null), mediaMessages: mediaMessages })] }));
+}
+function MediaPreview({ item, onOpen, onSetCover, onDelete, mediaMessages, }) {
+    return (_jsxs("div", { className: "group relative aspect-[16/9] w-full overflow-hidden rounded-lg border bg-muted", children: [item.mediaType === "image" ? (_jsx("button", { type: "button", onClick: onOpen, className: "h-full w-full", children: _jsx("img", { src: item.url, alt: item.altText ?? item.name, className: "h-full w-full cursor-zoom-in object-cover" }) })) : item.mediaType === "video" ? (_jsx("video", { src: item.url, controls: true, className: "h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center text-xs uppercase text-muted-foreground", children: item.mediaType })), item.isCover ? (_jsxs("div", { className: "pointer-events-none absolute left-3 top-3 flex items-center gap-1 rounded-full bg-black/70 px-2.5 py-1 text-[11px] font-medium text-white", children: [_jsx(Star, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }), mediaMessages.cover] })) : null, _jsxs("div", { className: "pointer-events-none absolute inset-0 flex items-end justify-end gap-1.5 bg-gradient-to-t from-black/60 via-black/0 to-black/0 p-3 opacity-0 transition-opacity group-hover:opacity-100", children: [!item.isCover && item.mediaType === "image" ? (_jsxs(Button, { type: "button", size: "sm", variant: "secondary", className: "pointer-events-auto h-8 text-xs", onClick: (e) => {
+                            e.stopPropagation();
+                            onSetCover(item.id);
+                        }, children: [_jsx(Star, { className: "mr-1 h-3 w-3" }), mediaMessages.setCover] })) : null, _jsxs(Button, { type: "button", size: "sm", variant: "destructive", className: "pointer-events-auto h-8 text-xs", onClick: (e) => {
+                            e.stopPropagation();
+                            if (confirm(mediaMessages.deleteConfirm))
+                                onDelete(item.id);
+                        }, children: [_jsx(Trash2, { className: "mr-1 h-3 w-3" }), mediaMessages.delete] })] })] }));
+}
+function ReorderGrid({ items, onReorder, mediaMessages, }) {
+    return (_jsx(Reorder.Group, { axis: "x", values: items, onReorder: onReorder, as: "ul", className: "flex flex-wrap gap-3", children: items.map((item) => (_jsxs(Reorder.Item, { value: item, as: "li", className: "relative size-28 cursor-grab overflow-hidden rounded-lg border bg-muted active:cursor-grabbing", whileDrag: { scale: 1.05, zIndex: 10 }, children: [item.mediaType === "image" ? (_jsx("img", { src: item.url, alt: item.altText ?? item.name, draggable: false, className: "pointer-events-none h-full w-full object-cover" })) : (_jsx("div", { className: "flex h-full w-full items-center justify-center bg-muted text-[10px] uppercase text-muted-foreground", children: item.mediaType })), item.isCover ? (_jsx("div", { className: "pointer-events-none absolute left-1 top-1 rounded-full bg-black/70 p-1", children: _jsx(Star, { className: "h-3 w-3 fill-yellow-400 text-yellow-400" }) })) : null, _jsxs("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex items-center justify-center gap-1 bg-black/60 py-1 text-[10px] text-white", children: [_jsx(GripVertical, { className: "h-3 w-3" }), mediaMessages.drag] })] }, item.id))) }));
+}
+function Lightbox({ media, index, onClose, mediaMessages, }) {
+    const [current, setCurrent] = useState(index ?? 0);
+    useEffect(() => {
+        if (index != null)
+            setCurrent(index);
+    }, [index]);
+    const item = media[current];
+    const open = index != null && item != null;
+    const canPrev = current > 0;
+    const canNext = current < media.length - 1;
+    useEffect(() => {
+        if (!open)
+            return;
+        const onKey = (e) => {
+            if (e.key === "ArrowLeft" && canPrev)
+                setCurrent((c) => c - 1);
+            if (e.key === "ArrowRight" && canNext)
+                setCurrent((c) => c + 1);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => window.removeEventListener("keydown", onKey);
+    }, [open, canPrev, canNext]);
+    return (_jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: _jsxs(DialogContent, { className: "h-screen w-screen max-w-none translate-x-0 translate-y-0 top-0 left-0 gap-0 rounded-none border-0 bg-black/90 p-0 shadow-none ring-0 sm:max-w-none", showCloseButton: false, children: [_jsx(DialogTitle, { className: "sr-only", children: mediaMessages.viewerTitle }), item ? (_jsxs("div", { className: "relative flex h-full w-full items-center justify-center", children: [_jsx("button", { type: "button", onClick: onClose, className: "absolute right-2 top-2 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": mediaMessages.close, children: _jsx(X, { className: "h-5 w-5" }) }), canPrev ? (_jsx("button", { type: "button", onClick: () => setCurrent((c) => c - 1), className: "absolute left-2 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": mediaMessages.previous, children: _jsx(ChevronLeft, { className: "h-6 w-6" }) })) : null, canNext ? (_jsx("button", { type: "button", onClick: () => setCurrent((c) => c + 1), className: "absolute right-2 z-10 rounded-full bg-black/60 p-2 text-white hover:bg-black/80", "aria-label": mediaMessages.next, children: _jsx(ChevronRight, { className: "h-6 w-6" }) })) : null, item.mediaType === "image" ? (_jsx("img", { src: item.url, alt: item.altText ?? item.name, className: "max-h-[95vh] max-w-[95vw] object-contain" })) : item.mediaType === "video" ? (_jsx("video", { src: item.url, controls: true, autoPlay: true, className: "max-h-[95vh] max-w-[95vw]" })) : (_jsx("div", { className: "rounded-lg bg-background p-8 text-sm text-muted-foreground", children: item.name }))] })) : null] }) }));
+}
+async function api_post_reorder(api, productId, items) {
+    return api.post(`/v1/products/${productId}/media/reorder`, { items });
+}

package/dist/components/product-detail/product-option-price-rule-dialog.d.ts

@@ -0,0 +1,12 @@
+import { type OptionPriceRuleData } from "./product-option-price-rule-form.js";
+export type { OptionPriceRuleData };
+type OptionPriceRuleDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    optionId: string;
+    rule?: OptionPriceRuleData;
+    onSuccess: () => void;
+};
+export declare function OptionPriceRuleDialog({ open, onOpenChange, productId, optionId, rule, onSuccess, }: OptionPriceRuleDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-price-rule-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-price-rule-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-option-price-rule-dialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,mBAAmB,EAAuB,MAAM,qCAAqC,CAAA;AAEnG,YAAY,EAAE,mBAAmB,EAAE,CAAA;AAEnC,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,SAAS,GACV,EAAE,0BAA0B,2CAyB5B"}

package/dist/components/product-detail/product-option-price-rule-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 { OptionPriceRuleForm } from "./product-option-price-rule-form.js";
+export function OptionPriceRuleDialog({ open, onOpenChange, productId, optionId, rule, onSuccess, }) {
+    const messages = useProductDetailMessages();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const isEditing = !!rule;
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, children: _jsxs(SheetContent, { side: "right", size: "lg", children: [_jsx(SheetHeader, { children: _jsx(SheetTitle, { children: isEditing ? priceRuleMessages.editTitle : priceRuleMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(OptionPriceRuleForm, { productId: productId, optionId: optionId, rule: rule, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
+}

package/dist/components/product-detail/product-option-price-rule-form.d.ts

@@ -0,0 +1,29 @@
+export type OptionPriceRuleData = {
+    id: string;
+    productId: string;
+    optionId: string;
+    priceCatalogId: string;
+    priceScheduleId: string | null;
+    cancellationPolicyId: string | null;
+    name: string;
+    code: string | null;
+    description: string | null;
+    pricingMode: "per_person" | "per_booking" | "starting_from" | "free" | "on_request";
+    baseSellAmountCents: number | null;
+    baseCostAmountCents: number | null;
+    minPerBooking: number | null;
+    maxPerBooking: number | null;
+    allPricingCategories: boolean;
+    isDefault: boolean;
+    active: boolean;
+    notes: string | null;
+};
+export interface OptionPriceRuleFormProps {
+    productId: string;
+    optionId: string;
+    rule?: OptionPriceRuleData;
+    onSuccess: () => void;
+    onCancel?: () => void;
+}
+export declare function OptionPriceRuleForm({ productId, optionId, rule, onSuccess, onCancel, }: OptionPriceRuleFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-option-price-rule-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-option-price-rule-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-option-price-rule-form.tsx"],"names":[],"mappings":"AAoDA,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAA;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,YAAY,GAAG,aAAa,GAAG,eAAe,GAAG,MAAM,GAAG,YAAY,CAAA;IACnF,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,mBAAmB,EAAE,MAAM,GAAG,IAAI,CAAA;IAClC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,oBAAoB,EAAE,OAAO,CAAA;IAC7B,SAAS,EAAE,OAAO,CAAA;IAClB,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,mBAAmB,CAAA;IAC1B,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAyCD,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,QAAQ,GACT,EAAE,wBAAwB,2CA+M1B"}