@voyant-travel/inventory-react 0.1.0

package/dist/components/product-detail/product-options-unit-price-matrix.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button } from "@voyant-travel/ui/components";
+import { Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useVoyantProductsContext } from "../../index.js";
+import { useOptionUnitPriceRuleMutation } from "./commerce-client.js";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { categoryAppliesToUnit, formatProductMoney, getCategoryCondition, getUnitTypeLabel, isTravelerCategory, } from "./product-options-pricing-helpers.js";
+import { getOptionUnitPriceRulesQueryOptions, getOptionUnitsQueryOptions, getPricingCategoriesQueryOptions, } from "./product-options-shared.js";
+import { TravelerCategoryDialog } from "./product-options-traveler-category-dialog.js";
+import { UnitPriceRuleDialog } from "./product-unit-price-rule-dialog.js";
+export function UnitPriceMatrix({ productId, optionPriceRuleId, optionId, pricingMode, allPricingCategories, productCurrency, }) {
+    const messages = useProductDetailMessages();
+    const productsClient = useVoyantProductsContext();
+    const api = useProductDetailApi();
+    const priceRuleMessages = messages.products.operations.priceRules;
+    const unitMessages = messages.products.operations.units;
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingCell, setEditingCell] = useState();
+    const [preselectedUnitId, setPreselectedUnitId] = useState();
+    const [preselectedCategoryId, setPreselectedCategoryId] = useState();
+    const [categoryDialogOpen, setCategoryDialogOpen] = useState(false);
+    const { data: unitsData } = useQuery(getOptionUnitsQueryOptions(productsClient, optionId));
+    const { data: categoriesData, refetch: refetchCategories } = useQuery(getPricingCategoriesQueryOptions(api));
+    const { data: cellsData, refetch: refetchCells } = useQuery(getOptionUnitPriceRulesQueryOptions(api, optionPriceRuleId));
+    const { remove } = useOptionUnitPriceRuleMutation();
+    const deleteMutation = useMutation({
+        mutationFn: (id) => remove.mutateAsync(id),
+        onSuccess: () => void refetchCells(),
+    });
+    const units = (unitsData?.data ?? []).slice().sort((a, b) => a.sortOrder - b.sortOrder);
+    const cells = cellsData?.data ?? [];
+    const referencedCategoryIds = new Set(cells.flatMap((cell) => (cell.pricingCategoryId ? [cell.pricingCategoryId] : [])));
+    const categories = (categoriesData?.data ?? []).filter((category) => category.active &&
+        ((isTravelerCategory(category) &&
+            (category.productId == null || category.productId === productId) &&
+            (category.optionId == null || category.optionId === optionId)) ||
+            referencedCategoryIds.has(category.id)));
+    const isPersonOnly = units.length > 0 && units.every((unit) => unit.unitType === "person");
+    const findCell = (unitId, categoryId) => cells.find((cell) => cell.unitId === unitId && (cell.pricingCategoryId ?? null) === categoryId) ?? null;
+    if (units.length === 0) {
+        return _jsx("p", { className: "text-xs italic text-muted-foreground", children: priceRuleMessages.addUnitsHint });
+    }
+    if (pricingMode === "per_booking") {
+        return (_jsx("p", { className: "text-xs italic text-muted-foreground", children: priceRuleMessages.perBookingFlatHint }));
+    }
+    // Per-pax tour with no category cross-cut: render a simple unit-only table
+    // (Sell / Cost) instead of the unit×category matrix. Operators on
+    // accommodation products (or rules with allPricingCategories=false) still
+    // get the full matrix.
+    const useSimpleTable = pricingMode === "per_person" && allPricingCategories;
+    const tableTitle = useSimpleTable
+        ? isPersonOnly
+            ? priceRuleMessages.personUnitPricingTitle
+            : priceRuleMessages.unitPricingTitle
+        : isPersonOnly
+            ? priceRuleMessages.personUnitCategoryTitle
+            : priceRuleMessages.unitCategoryTitle;
+    const unitColumnLabel = isPersonOnly
+        ? priceRuleMessages.tableTravelerUnit
+        : priceRuleMessages.tableUnit;
+    const columns = useSimpleTable
+        ? [{ id: null, name: priceRuleMessages.tableSell }]
+        : categories.length > 0
+            ? categories.map((category) => ({
+                id: category.id,
+                name: category.name,
+                metadata: category.metadata,
+            }))
+            : [{ id: null, name: priceRuleMessages.defaultBadge }];
+    return (_jsxs("div", { children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("p", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: tableTitle }), !useSimpleTable ? (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => setCategoryDialogOpen(true), children: [_jsx(Plus, { className: "mr-1 h-3 w-3" }), priceRuleMessages.addTravelerCategory] })) : null] }), _jsx("div", { className: "overflow-x-auto rounded border", children: _jsxs("table", { className: "w-full text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b bg-muted/50 text-muted-foreground", children: [_jsx("th", { className: "p-2 text-left font-medium", children: unitColumnLabel }), columns.map((category) => {
+                                        const condition = getCategoryCondition(category.metadata);
+                                        return (_jsxs("th", { className: "p-2 text-left font-medium", children: [_jsx("div", { children: category.name }), condition ? (_jsx("div", { className: "mt-0.5 max-w-[220px] text-[10px] font-normal leading-snug text-muted-foreground normal-case", children: condition })) : null] }, category.id ?? "__default__"));
+                                    })] }) }), _jsx("tbody", { children: units.map((unit) => (_jsxs("tr", { className: "border-b last:border-b-0", children: [_jsxs("td", { className: "p-2 font-medium", children: [unit.name, _jsxs("span", { className: "ml-1 text-[10px] text-muted-foreground", children: ["(", getUnitTypeLabel(unit.unitType, unitMessages), ")"] })] }), columns.map((category) => {
+                                        const cell = findCell(unit.id, category.id);
+                                        const canPriceCategory = categoryAppliesToUnit(category, unit);
+                                        return (_jsx("td", { className: "p-2", children: cell ? (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("button", { type: "button", onClick: () => {
+                                                            setEditingCell(cell);
+                                                            setPreselectedUnitId(undefined);
+                                                            setPreselectedCategoryId(undefined);
+                                                            setDialogOpen(true);
+                                                        }, className: "font-mono text-foreground hover:underline", children: formatProductMoney(cell.sellAmountCents, productCurrency) }), _jsx("button", { type: "button", onClick: () => {
+                                                            if (confirm(priceRuleMessages.deleteCellConfirm)) {
+                                                                deleteMutation.mutate(cell.id);
+                                                            }
+                                                        }, className: "text-muted-foreground hover:text-destructive", children: _jsx(Trash2, { className: "h-3 w-3" }) })] })) : canPriceCategory ? (_jsx("button", { type: "button", onClick: () => {
+                                                    setEditingCell(undefined);
+                                                    setPreselectedUnitId(unit.id);
+                                                    setPreselectedCategoryId(category.id);
+                                                    setDialogOpen(true);
+                                                }, className: "text-muted-foreground hover:text-foreground", children: _jsx(Plus, { className: "h-3 w-3" }) })) : (_jsx("span", { className: "text-muted-foreground", children: "-" })) }, category.id ?? "__default__"));
+                                    })] }, unit.id))) })] }) }), _jsx(TravelerCategoryDialog, { open: categoryDialogOpen, onOpenChange: setCategoryDialogOpen, productId: productId, units: units, nextSortOrder: categories.length > 0 ? Math.max(...categories.map((c) => c.sortOrder)) + 1 : 0, onSuccess: () => {
+                    setCategoryDialogOpen(false);
+                    void refetchCategories();
+                } }), _jsx(UnitPriceRuleDialog, { open: dialogOpen, onOpenChange: setDialogOpen, optionPriceRuleId: optionPriceRuleId, optionId: optionId, units: units, productCurrency: productCurrency, preselectedUnitId: preselectedUnitId, preselectedCategoryId: preselectedCategoryId, cell: editingCell, onSuccess: () => {
+                    setDialogOpen(false);
+                    setEditingCell(undefined);
+                    setPreselectedUnitId(undefined);
+                    setPreselectedCategoryId(undefined);
+                    void refetchCells();
+                } })] }));
+}

package/dist/components/product-detail/product-payment-policy-section.d.ts

@@ -0,0 +1,17 @@
+import { type ProductRecord } from "../../index.js";
+/**
+ * Per-listing customer payment policy override for a product.
+ *
+ * Wins over the product's category and supplier policies in the
+ * cascade — use this when a single product has stricter / looser
+ * terms than the rest of its catalog group (a luxury-tier offering,
+ * a flash sale, etc.).
+ *
+ * Inherit by default; flipping the toggle off saves an explicit
+ * policy on the product row.
+ */
+export declare function ProductPaymentPolicySection({ product, onSuccess, }: {
+    product: ProductRecord;
+    onSuccess?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-payment-policy-section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-payment-policy-section.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-payment-policy-section.tsx"],"names":[],"mappings":"AASA,OAAO,EAA6B,KAAK,aAAa,EAAsB,MAAM,gBAAgB,CAAA;AAWlG;;;;;;;;;;GAUG;AACH,wBAAgB,2BAA2B,CAAC,EAC1C,OAAO,EACP,SAAS,GACV,EAAE;IACD,OAAO,EAAE,aAAa,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB,2CAwFA"}

package/dist/components/product-detail/product-payment-policy-section.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PaymentPolicyForm, PaymentPolicyPreview } from "@voyant-travel/finance-react/ui";
+import { Badge, Button, Label, Switch } from "@voyant-travel/ui/components";
+import { Separator } from "@voyant-travel/ui/components/separator";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { useProductMutation } from "../../index.js";
+import { useProductDetailMessages } from "./host.js";
+import { Section } from "./product-detail-sections.js";
+const DEFAULT_POLICY = {
+    deposit: { kind: "percent", percent: 50 },
+    minDaysBeforeDepartureForDeposit: 30,
+    balanceDueDaysBeforeDeparture: 30,
+    balanceDueMinDaysFromNow: 7,
+};
+/**
+ * Per-listing customer payment policy override for a product.
+ *
+ * Wins over the product's category and supplier policies in the
+ * cascade — use this when a single product has stricter / looser
+ * terms than the rest of its catalog group (a luxury-tier offering,
+ * a flash sale, etc.).
+ *
+ * Inherit by default; flipping the toggle off saves an explicit
+ * policy on the product row.
+ */
+export function ProductPaymentPolicySection({ product, onSuccess, }) {
+    const t = useProductDetailMessages().products.operations.paymentPolicy;
+    const persisted = product.customerPaymentPolicy ?? null;
+    const [draft, setDraft] = useState(persisted);
+    const { update } = useProductMutation();
+    // One-way sync: when the persisted policy reference changes (after
+    // a save → query invalidation, or external edit), refresh the
+    // draft. Mid-flight typing is preserved because we don't depend on
+    // setState callbacks running on every render.
+    useEffect(() => {
+        setDraft(persisted);
+    }, [persisted]);
+    const isInheriting = draft === null;
+    const isDirty = JSON.stringify(draft) !== JSON.stringify(persisted);
+    const save = () => {
+        update.mutate({
+            id: product.id,
+            input: { customerPaymentPolicy: draft ?? null },
+        }, {
+            onSuccess: () => {
+                toast.success(t.savedToast);
+                onSuccess?.();
+            },
+            onError: (err) => toast.error(err instanceof Error ? err.message : t.saveFailed),
+        });
+    };
+    return (_jsx(Section, { title: t.title, actions: _jsxs(Button, { size: "sm", disabled: !isDirty || update.isPending, onClick: save, children: [update.isPending ? _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }) : null, t.save] }), children: _jsxs("div", { className: "flex flex-col gap-5", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Label, { htmlFor: "payment-policy-inherit", className: "text-sm font-medium", children: t.inheritLabel }), _jsx(Badge, { variant: isInheriting ? "secondary" : "outline", className: "text-[10px]", children: isInheriting ? t.inheritingBadge : t.customBadge })] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t.inheritHint })] }), _jsx(Switch, { id: "payment-policy-inherit", checked: isInheriting, onCheckedChange: (checked) => {
+                                setDraft(checked ? null : (draft ?? DEFAULT_POLICY));
+                            }, disabled: update.isPending })] }), isInheriting ? null : (_jsxs(_Fragment, { children: [_jsx(Separator, {}), _jsx(PaymentPolicyForm, { value: draft, onChange: setDraft, inheritable: false, currency: product.sellCurrency, disabled: update.isPending }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: t.previewHeading }), _jsx(PaymentPolicyPreview, { policy: draft, currency: product.sellCurrency })] })] }))] }) }));
+}

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

@@ -0,0 +1,11 @@
+import { type AvailabilityRule } from "./product-schedule-form.js";
+export type { AvailabilityRule };
+type ScheduleDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    rule?: AvailabilityRule;
+    onSuccess: () => void;
+};
+export declare function ScheduleDialog({ open, onOpenChange, productId, rule, onSuccess, }: ScheduleDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-schedule-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-schedule-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-schedule-dialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,gBAAgB,EAAgB,MAAM,4BAA4B,CAAA;AAEhF,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAEhC,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,IAAI,EACJ,SAAS,GACV,EAAE,mBAAmB,2CAwBrB"}

package/dist/components/product-detail/product-schedule-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 { ScheduleForm } from "./product-schedule-form.js";
+export function ScheduleDialog({ open, onOpenChange, productId, rule, onSuccess, }) {
+    const messages = useProductDetailMessages();
+    const scheduleMessages = messages.products.operations.schedules;
+    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 ? scheduleMessages.editTitle : scheduleMessages.newTitle }) }), _jsx(SheetBody, { children: _jsx(ScheduleForm, { productId: productId, rule: rule, onSuccess: onSuccess, onCancel: () => onOpenChange(false) }) })] }) }));
+}

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

@@ -0,0 +1,17 @@
+export type AvailabilityRule = {
+    id: string;
+    productId: string;
+    timezone: string;
+    recurrenceRule: string;
+    maxCapacity: number;
+    cutoffMinutes: number | null;
+    active: boolean;
+};
+export interface ScheduleFormProps {
+    productId: string;
+    rule?: AvailabilityRule;
+    onSuccess: () => void;
+    onCancel?: () => void;
+}
+export declare function ScheduleForm({ productId, rule, onSuccess, onCancel }: ScheduleFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-schedule-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-schedule-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-schedule-form.tsx"],"names":[],"mappings":"AAwEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAgID,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAgSvF"}

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

@@ -0,0 +1,223 @@
+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 { formatMessage } from "@voyant-travel/i18n";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, } from "@voyant-travel/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyant-travel/ui/components/combobox";
+import { ToggleGroup, ToggleGroupItem } from "@voyant-travel/ui/components/toggle-group";
+import { Loader2 } from "lucide-react";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { getTimezoneLabel, TIMEZONE_IDS, TIMEZONE_OPTIONS } from "./timezone-options.js";
+import { zodResolver } from "./zod-resolver.js";
+const WEEKDAY_VALUES = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
+const FREQUENCY_OPTIONS = ["DAILY", "WEEKLY", "MONTHLY"];
+const buildScheduleFormSchema = (messages) => z
+    .object({
+    timezone: z.string().min(1, messages.validationTimezoneRequired),
+    frequency: z.enum(FREQUENCY_OPTIONS),
+    interval: z.coerce.number().int().min(1).max(365),
+    byWeekdays: z.array(z.enum(WEEKDAY_VALUES)),
+    byMonthDays: z.array(z.coerce.number().int().min(1).max(31)),
+    maxCapacity: z.coerce.number().int().min(0),
+    cutoffMinutes: z.coerce.number().int().min(0).optional().or(z.literal("")).nullable(),
+    active: z.boolean(),
+})
+    .refine((v) => {
+    if (v.frequency !== "WEEKLY")
+        return true;
+    return v.byWeekdays.length > 0;
+}, { message: messages.validationWeekdayRequired, path: ["byWeekdays"] })
+    .refine((v) => {
+    if (v.frequency !== "MONTHLY")
+        return true;
+    return v.byMonthDays.length > 0;
+}, { message: messages.validationMonthdayRequired, path: ["byMonthDays"] });
+function parseRRule(rrule) {
+    const parts = rrule
+        .split(";")
+        .map((p) => p.trim())
+        .filter(Boolean);
+    const map = new Map();
+    for (const part of parts) {
+        const [key, value] = part.split("=");
+        if (key && value !== undefined)
+            map.set(key.toUpperCase(), value);
+    }
+    const rawFreq = (map.get("FREQ") ?? "DAILY").toUpperCase();
+    const frequency = rawFreq === "WEEKLY" || rawFreq === "MONTHLY" ? rawFreq : "DAILY";
+    const interval = Number.parseInt(map.get("INTERVAL") ?? "1", 10) || 1;
+    const byday = map.get("BYDAY") ?? "";
+    const byWeekdays = byday
+        .split(",")
+        .map((d) => d.trim().toUpperCase())
+        .filter((d) => WEEKDAY_VALUES.includes(d));
+    const bymonthday = map.get("BYMONTHDAY") ?? "";
+    const byMonthDays = bymonthday
+        .split(",")
+        .map((d) => Number.parseInt(d.trim(), 10))
+        .filter((n) => Number.isFinite(n) && n >= 1 && n <= 31);
+    return { frequency, interval, byWeekdays, byMonthDays };
+}
+function buildRRule(values) {
+    const parts = [`FREQ=${values.frequency}`];
+    if (values.interval > 1)
+        parts.push(`INTERVAL=${values.interval}`);
+    if (values.frequency === "WEEKLY" && values.byWeekdays.length > 0) {
+        const ordered = WEEKDAY_VALUES.filter((d) => values.byWeekdays.includes(d));
+        parts.push(`BYDAY=${ordered.join(",")}`);
+    }
+    if (values.frequency === "MONTHLY" && values.byMonthDays.length > 0) {
+        const ordered = [...values.byMonthDays].sort((a, b) => a - b);
+        parts.push(`BYMONTHDAY=${ordered.join(",")}`);
+    }
+    return parts.join(";");
+}
+function describeRRule(values, messages, weekdayOptions) {
+    const { frequency, interval, byWeekdays, byMonthDays } = values;
+    const cadence = frequency === "DAILY"
+        ? interval > 1
+            ? formatMessage(messages.previewEveryDays, { interval })
+            : messages.previewEveryDay
+        : frequency === "WEEKLY"
+            ? interval > 1
+                ? formatMessage(messages.previewEveryWeeks, { interval })
+                : messages.previewEveryWeek
+            : interval > 1
+                ? formatMessage(messages.previewEveryMonths, { interval })
+                : messages.previewEveryMonth;
+    if (frequency === "WEEKLY") {
+        if (byWeekdays.length === 0)
+            return `${cadence}${messages.previewPickWeekday}`;
+        const labels = weekdayOptions.filter((d) => byWeekdays.includes(d.value)).map((d) => d.label);
+        return formatMessage(messages.previewWeekly, { cadence, days: labels.join(", ") });
+    }
+    if (frequency === "MONTHLY") {
+        if (byMonthDays.length === 0)
+            return `${cadence}${messages.previewPickMonthday}`;
+        const ordered = [...byMonthDays].sort((a, b) => a - b);
+        return formatMessage(messages.previewMonthly, {
+            cadence,
+            suffix: ordered.length === 1 ? "" : messages.previewSuffixDays,
+            days: ordered.join(", "),
+        });
+    }
+    return cadence;
+}
+const MONTH_DAYS = Array.from({ length: 31 }, (_, i) => i + 1);
+function initialValues(rule, defaultTz) {
+    if (rule) {
+        const parsed = parseRRule(rule.recurrenceRule);
+        return {
+            timezone: rule.timezone,
+            frequency: parsed.frequency,
+            interval: parsed.interval,
+            byWeekdays: parsed.byWeekdays,
+            byMonthDays: parsed.byMonthDays,
+            maxCapacity: rule.maxCapacity,
+            cutoffMinutes: rule.cutoffMinutes ?? "",
+            active: rule.active,
+        };
+    }
+    return {
+        timezone: defaultTz,
+        frequency: "WEEKLY",
+        interval: 1,
+        byWeekdays: ["MO"],
+        byMonthDays: [],
+        maxCapacity: 0,
+        cutoffMinutes: "",
+        active: true,
+    };
+}
+export function ScheduleForm({ productId, rule, onSuccess, onCancel }) {
+    const messages = useProductDetailMessages();
+    const api = useProductDetailApi();
+    const productMessages = messages.products.core;
+    const scheduleMessages = messages.products.operations.schedules;
+    const isEditing = !!rule;
+    const scheduleFormSchema = buildScheduleFormSchema(scheduleMessages);
+    const weekdayOptions = [
+        { value: "MO", label: scheduleMessages.weekdayMon },
+        { value: "TU", label: scheduleMessages.weekdayTue },
+        { value: "WE", label: scheduleMessages.weekdayWed },
+        { value: "TH", label: scheduleMessages.weekdayThu },
+        { value: "FR", label: scheduleMessages.weekdayFri },
+        { value: "SA", label: scheduleMessages.weekdaySat },
+        { value: "SU", label: scheduleMessages.weekdaySun },
+    ];
+    const frequencyOptions = [
+        { value: "DAILY", label: scheduleMessages.frequencyDaily },
+        { value: "WEEKLY", label: scheduleMessages.frequencyWeekly },
+        { value: "MONTHLY", label: scheduleMessages.frequencyMonthly },
+    ];
+    const defaultTz = typeof Intl !== "undefined"
+        ? (Intl.DateTimeFormat().resolvedOptions().timeZone ?? "UTC")
+        : "UTC";
+    const form = useForm({
+        resolver: zodResolver(scheduleFormSchema),
+        defaultValues: initialValues(rule, defaultTz),
+    });
+    const active = form.watch("active");
+    const timezone = form.watch("timezone");
+    const frequency = form.watch("frequency");
+    const interval = form.watch("interval");
+    const byWeekdays = form.watch("byWeekdays");
+    const byMonthDays = form.watch("byMonthDays");
+    const preview = useMemo(() => describeRRule({
+        frequency,
+        interval: typeof interval === "number" ? interval : Number(interval) || 1,
+        byWeekdays,
+        byMonthDays,
+    }, scheduleMessages, weekdayOptions), [byMonthDays, byWeekdays, frequency, interval, scheduleMessages, weekdayOptions]);
+    useEffect(() => {
+        form.reset(initialValues(rule, defaultTz));
+    }, [rule, form, defaultTz]);
+    const onSubmit = async (values) => {
+        const cutoffMinutes = typeof values.cutoffMinutes === "number" ? values.cutoffMinutes : null;
+        const recurrenceRule = buildRRule({
+            frequency: values.frequency,
+            interval: values.interval,
+            byWeekdays: values.byWeekdays,
+            byMonthDays: values.byMonthDays,
+        });
+        const payload = {
+            productId,
+            timezone: values.timezone,
+            recurrenceRule,
+            maxCapacity: values.maxCapacity,
+            cutoffMinutes,
+            active: values.active,
+        };
+        if (isEditing) {
+            await api.patch(`/v1/operations/availability/rules/${rule.id}`, payload);
+        }
+        else {
+            await api.post("/v1/operations/availability/rules", payload);
+        }
+        onSuccess();
+    };
+    const unitLabel = frequency === "DAILY"
+        ? scheduleMessages.unitDays
+        : frequency === "WEEKLY"
+            ? scheduleMessages.unitWeeks
+            : scheduleMessages.unitMonths;
+    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-[160px_1fr] gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.repeatsLabel }), _jsxs(Select, { value: frequency, onValueChange: (v) => form.setValue("frequency", v, {
+                                            shouldValidate: true,
+                                            shouldDirty: true,
+                                        }), items: frequencyOptions, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: frequencyOptions.map((f) => (_jsx(SelectItem, { value: f.value, children: f.label }, f.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.everyLabel }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Input, { ...form.register("interval"), type: "number", min: "1", max: "365", step: "1", className: "w-24" }), _jsx("span", { className: "text-sm text-muted-foreground", children: unitLabel })] }), form.formState.errors.interval && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.interval.message }))] })] }), frequency === "WEEKLY" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.weeklyDaysLabel }), _jsx(ToggleGroup, { multiple: true, value: byWeekdays, onValueChange: (next) => form.setValue("byWeekdays", next, {
+                                    shouldValidate: true,
+                                    shouldDirty: true,
+                                }), variant: "outline", spacing: 1, children: weekdayOptions.map((d) => (_jsx(ToggleGroupItem, { value: d.value, className: "w-14", children: d.label }, d.value))) }), form.formState.errors.byWeekdays && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.byWeekdays.message }))] })), frequency === "MONTHLY" && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.monthlyDaysLabel }), _jsx(ToggleGroup, { multiple: true, value: byMonthDays.map(String), onValueChange: (next) => form.setValue("byMonthDays", next.map((n) => Number.parseInt(n, 10)), { shouldValidate: true, shouldDirty: true }), variant: "outline", spacing: 1, className: "flex-wrap", children: MONTH_DAYS.map((d) => (_jsx(ToggleGroupItem, { value: String(d), className: "w-10", children: d }, d))) }), form.formState.errors.byMonthDays && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.byMonthDays.message }))] })), _jsx("p", { className: "text-xs text-muted-foreground", children: preview }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.timezoneLabel }), _jsxs(Combobox, { items: TIMEZONE_IDS, value: timezone || null, autoHighlight: true, itemToStringValue: (id) => getTimezoneLabel(id), onValueChange: (next) => {
+                                            if (typeof next === "string") {
+                                                form.setValue("timezone", next, {
+                                                    shouldValidate: true,
+                                                    shouldDirty: true,
+                                                });
+                                            }
+                                        }, children: [_jsx(ComboboxInput, { placeholder: scheduleMessages.timezoneSearchPlaceholder }), _jsxs(ComboboxContent, { children: [_jsx(ComboboxEmpty, { children: scheduleMessages.timezoneEmpty }), _jsx(ComboboxList, { children: _jsx(ComboboxCollection, { children: (id) => {
+                                                                const tz = TIMEZONE_OPTIONS.find((t) => t.id === id);
+                                                                return (_jsxs(ComboboxItem, { value: id, children: [_jsx("span", { className: "font-mono text-xs", children: id }), tz ? (_jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: tz.label })) : null] }, id));
+                                                            } }) })] })] }), form.formState.errors.timezone && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.timezone.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.maxCapacityLabel }), _jsx(Input, { ...form.register("maxCapacity"), type: "number", min: "0", step: "1" }), form.formState.errors.maxCapacity && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.maxCapacity.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: scheduleMessages.cutoffLabel }), _jsx(Input, { ...form.register("cutoffMinutes"), type: "number", min: "0", step: "1", placeholder: "0" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { id: "schedule-active", checked: active, onCheckedChange: (c) => form.setValue("active", c) }), _jsx(Label, { htmlFor: "schedule-active", className: "font-normal cursor-pointer", children: scheduleMessages.activeDescription })] })] }), _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 : scheduleMessages.create] })] })] }));
+}

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

@@ -0,0 +1,12 @@
+import { type DayServiceData } from "./product-service-form.js";
+export type { DayServiceData };
+type ServiceDialogProps = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    productId: string;
+    dayId: string;
+    service?: DayServiceData;
+    onSuccess: () => void;
+};
+export declare function ServiceDialog({ open, onOpenChange, productId, dayId, service, onSuccess, }: ServiceDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-service-dialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-service-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-service-dialog.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,2BAA2B,CAAA;AAE5E,YAAY,EAAE,cAAc,EAAE,CAAA;AAE9B,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,SAAS,EAAE,MAAM,IAAI,CAAA;CACtB,CAAA;AAED,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,2CAyBpB"}

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

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

@@ -0,0 +1,22 @@
+export type DayServiceData = {
+    id: string;
+    serviceType: "accommodation" | "transfer" | "experience" | "guide" | "meal" | "other";
+    name: string;
+    description: string | null;
+    countryCode: string | null;
+    supplierServiceId: string | null;
+    costCurrency: string;
+    costAmountCents: number;
+    quantity: number;
+    sortOrder: number | null;
+    notes: string | null;
+};
+export interface ServiceFormProps {
+    productId: string;
+    dayId: string;
+    service?: DayServiceData;
+    onSuccess: () => void;
+    onCancel?: () => void;
+}
+export declare function ServiceForm({ productId, dayId, service, onSuccess, onCancel }: ServiceFormProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-service-form.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-service-form.d.ts","sourceRoot":"","sources":["../../../src/components/product-detail/product-service-form.tsx"],"names":[],"mappings":"AAgDA,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,WAAW,EAAE,eAAe,GAAG,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAA;IACrF,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAUD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAkDD,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAwP/F"}