@voyantjs/products-ui 0.101.1 → 0.101.2

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 "@voyantjs/finance-ui";
+import { useProductMutation, } from "@voyantjs/products-react";
+import { Badge, Button, Label, Switch } from "@voyantjs/ui/components";
+import { Separator } from "@voyantjs/ui/components/separator";
+import { Loader2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+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":"AAGA,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 "@voyantjs/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":"AAuEA,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,222 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, } from "@voyantjs/ui/components";
+import { Combobox, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, } from "@voyantjs/ui/components/combobox";
+import { ToggleGroup, ToggleGroupItem } from "@voyantjs/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/availability/rules/${rule.id}`, payload);
+        }
+        else {
+            await api.post("/v1/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":"AAGA,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 "@voyantjs/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"}

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

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
+import { CurrencyCombobox } from "@voyantjs/ui/components/currency-combobox";
+import { Loader2 } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod/v4";
+import { useProductDetailApi, useProductDetailMessages } from "./host.js";
+import { zodResolver } from "./zod-resolver.js";
+const buildServiceFormSchema = (messages) => z.object({
+    serviceType: z.enum(["accommodation", "transfer", "experience", "guide", "meal", "other"]),
+    name: z.string().min(1, messages.validationNameRequired),
+    description: z.string().optional().nullable(),
+    countryCode: z
+        .string()
+        .trim()
+        .max(2, messages.validationCountryCode)
+        .optional()
+        .or(z.literal(""))
+        .nullable(),
+    supplierServiceId: z.string().optional().nullable(),
+    costCurrency: z.string().min(3).max(3, messages.validationIsoCurrency),
+    costAmount: z.coerce.number().min(0, messages.validationCostNonNegative),
+    quantity: z.coerce.number().int().positive().default(1),
+    sortOrder: z.coerce.number().int().optional().or(z.literal("")).nullable(),
+    notes: z.string().optional().nullable(),
+});
+function initialValues(service) {
+    if (service) {
+        return {
+            serviceType: service.serviceType,
+            name: service.name,
+            description: service.description ?? "",
+            countryCode: service.countryCode ?? "",
+            supplierServiceId: service.supplierServiceId ?? "",
+            costCurrency: service.costCurrency,
+            costAmount: service.costAmountCents / 100,
+            quantity: service.quantity,
+            sortOrder: service.sortOrder ?? "",
+            notes: service.notes ?? "",
+        };
+    }
+    return {
+        serviceType: "accommodation",
+        name: "",
+        description: "",
+        countryCode: "",
+        supplierServiceId: "",
+        costCurrency: "EUR",
+        costAmount: 0,
+        quantity: 1,
+        sortOrder: "",
+        notes: "",
+    };
+}
+function getServiceTypeLabel(type, messages) {
+    switch (type) {
+        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 type;
+    }
+}
+export function ServiceForm({ productId, dayId, service, onSuccess, onCancel }) {
+    const messages = useProductDetailMessages();
+    const api = useProductDetailApi();
+    const productMessages = messages.products.core;
+    const serviceMessages = messages.products.operations.services;
+    const isEditing = !!service;
+    const serviceFormSchema = buildServiceFormSchema(serviceMessages);
+    const serviceTypes = [
+        { value: "accommodation", label: serviceMessages.serviceTypeAccommodation },
+        { value: "transfer", label: serviceMessages.serviceTypeTransfer },
+        { value: "experience", label: serviceMessages.serviceTypeExperience },
+        { value: "guide", label: serviceMessages.serviceTypeGuide },
+        { value: "meal", label: serviceMessages.serviceTypeMeal },
+        { value: "other", label: serviceMessages.serviceTypeOther },
+    ];
+    const { data: suppliersData } = useQuery({
+        queryKey: ["suppliers-for-picker"],
+        queryFn: async () => {
+            const res = await api.get("/v1/suppliers?limit=100");
+            const options = [];
+            for (const supplier of res.data) {
+                const servicesRes = await api.get(`/v1/suppliers/${supplier.id}/services`);
+                for (const svc of servicesRes.data) {
+                    options.push({
+                        id: svc.id,
+                        supplierId: supplier.id,
+                        supplierName: supplier.name,
+                        serviceType: svc.serviceType,
+                        name: svc.name,
+                    });
+                }
+            }
+            return options;
+        },
+    });
+    const form = useForm({
+        resolver: zodResolver(serviceFormSchema),
+        defaultValues: initialValues(service),
+    });
+    useEffect(() => {
+        form.reset(initialValues(service));
+    }, [service, form]);
+    const handleSupplierServiceSelect = (supplierServiceId) => {
+        const nextSupplierServiceId = supplierServiceId ?? "";
+        form.setValue("supplierServiceId", nextSupplierServiceId);
+        const option = suppliersData?.find((o) => o.id === nextSupplierServiceId);
+        if (option) {
+            form.setValue("name", option.name);
+            form.setValue("serviceType", option.serviceType);
+        }
+    };
+    const onSubmit = async (values) => {
+        const payload = {
+            serviceType: values.serviceType,
+            name: values.name,
+            description: values.description || null,
+            countryCode: values.countryCode?.trim().toUpperCase() || null,
+            supplierServiceId: values.supplierServiceId || null,
+            costCurrency: values.costCurrency,
+            costAmountCents: Math.round(values.costAmount * 100),
+            quantity: values.quantity,
+            sortOrder: values.sortOrder && typeof values.sortOrder === "number" ? values.sortOrder : null,
+            notes: values.notes || null,
+        };
+        if (isEditing) {
+            await api.patch(`/v1/products/${productId}/days/${dayId}/services/${service.id}`, payload);
+        }
+        else {
+            await api.post(`/v1/products/${productId}/days/${dayId}/services`, payload);
+        }
+        onSuccess();
+    };
+    return (_jsxs("form", { onSubmit: form.handleSubmit(onSubmit), className: "flex flex-1 flex-col gap-4 overflow-hidden", children: [_jsxs("div", { className: "grid gap-4", children: [suppliersData && suppliersData.length > 0 && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.supplierServiceLabel }), _jsxs(Select, { value: form.watch("supplierServiceId") ?? "", onValueChange: handleSupplierServiceSelect, items: suppliersData.map((opt) => ({
+                                    value: opt.id,
+                                    label: `${opt.supplierName} — ${opt.name} (${getServiceTypeLabel(opt.serviceType, serviceMessages)})`,
+                                })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, { placeholder: serviceMessages.supplierServicePlaceholder }) }), _jsx(SelectContent, { children: suppliersData.map((opt) => (_jsxs(SelectItem, { value: opt.id, children: [opt.supplierName, " \u2014 ", opt.name, " (", getServiceTypeLabel(opt.serviceType, serviceMessages), ")"] }, opt.id))) })] })] })), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.serviceTypeLabel }), _jsxs(Select, { value: form.watch("serviceType"), onValueChange: (v) => form.setValue("serviceType", v), items: serviceTypes, children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: serviceTypes.map((t) => (_jsx(SelectItem, { value: t.value, children: t.label }, t.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.nameLabel }), _jsx(Input, { ...form.register("name"), placeholder: serviceMessages.namePlaceholder }), form.formState.errors.name && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.name.message }))] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.descriptionLabel }), _jsx(Textarea, { ...form.register("description"), placeholder: serviceMessages.descriptionPlaceholder })] }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.countryCodeLabel }), _jsx(Input, { ...form.register("countryCode"), placeholder: serviceMessages.countryCodePlaceholder, maxLength: 2, className: "uppercase" }), form.formState.errors.countryCode && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.countryCode.message }))] }) }), _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.costCurrencyLabel }), _jsx(CurrencyCombobox, { value: form.watch("costCurrency") || null, onChange: (next) => form.setValue("costCurrency", next ?? "", {
+                                            shouldValidate: true,
+                                            shouldDirty: true,
+                                        }), placeholder: serviceMessages.costCurrencyPlaceholder }), form.formState.errors.costCurrency && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.costCurrency.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.costAmountLabel }), _jsx(Input, { ...form.register("costAmount"), type: "number", step: "0.01", min: "0", placeholder: serviceMessages.costAmountPlaceholder }), form.formState.errors.costAmount && (_jsx("p", { className: "text-xs text-destructive", children: form.formState.errors.costAmount.message }))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.quantityLabel }), _jsx(Input, { ...form.register("quantity"), type: "number", min: "1", placeholder: serviceMessages.quantityPlaceholder })] })] }), _jsx("div", { className: "grid grid-cols-2 gap-4", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.sortOrderLabel }), _jsx(Input, { ...form.register("sortOrder"), type: "number", placeholder: serviceMessages.sortOrderPlaceholder })] }) }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Label, { children: serviceMessages.notesLabel }), _jsx(Textarea, { ...form.register("notes"), placeholder: serviceMessages.notesPlaceholder })] })] }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onCancel, children: productMessages.cancel })) : null, _jsxs(Button, { type: "submit", size: "sm", disabled: form.formState.isSubmitting, children: [form.formState.isSubmitting && _jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), isEditing ? productMessages.saveChanges : serviceMessages.create] })] })] }));
+}

package/dist/components/product-detail/product-translation-popover.d.ts

@@ -0,0 +1,91 @@
+import type { useProductDetailMessages } from "./host.js";
+type ProductCoreMessages = ReturnType<typeof useProductDetailMessages>["products"]["core"];
+export type TranslatableField = "name" | "description" | "slug";
+export type TranslationDraft = {
+    id: string | null;
+    languageTag: string;
+    name: string;
+    description: string;
+    slug: string;
+    shortDescription: string | null;
+    inclusionsHtml: string | null;
+    exclusionsHtml: string | null;
+    termsHtml: string | null;
+    seoTitle: string | null;
+    seoDescription: string | null;
+};
+export declare function richTextHasContent(html: string): boolean;
+export declare function languageLabel(tag: string): string;
+export interface PersistTranslationsOptions {
+    defaultLanguageTag: string;
+    baseName: string;
+    baseDescription: string;
+}
+export interface ProductTranslationDrafts {
+    drafts: TranslationDraft[];
+    isLoading: boolean;
+    setFieldValue: (languageTag: string, field: TranslatableField, value: string) => void;
+    addLanguage: (languageTag: string) => void;
+    removeLanguage: (languageTag: string) => void;
+    persist: (productId: string, options: PersistTranslationsOptions) => Promise<void>;
+}
+/**
+ * Manages an in-memory draft of a product's translations so Name/Description/
+ * Slug can be edited in context from the edit sheet. Seeds from the saved
+ * translation records and persists create/update/delete on save.
+ *
+ * The base product columns hold the default language's Name/Description, so the
+ * default-language translation row (if any) just mirrors them and carries the
+ * slug (base has no slug column). Fields we don't edit here (short description,
+ * inclusions, SEO, …) are preserved untouched.
+ */
+export declare function useProductTranslationDrafts(productId: string | null): ProductTranslationDrafts;
+export interface ContentLanguageSwitcherProps {
+    activeLanguage: string;
+    defaultLanguageTag: string;
+    /** The language tags that currently have a translation draft (excluding the default). */
+    languageTags: string[];
+    messages: ProductCoreMessages;
+    onSelect: (languageTag: string) => void;
+    onAddLanguage: (languageTag: string) => void;
+    onRemoveLanguage: (languageTag: string) => void;
+}
+/** Top-of-sheet switcher: picks which language every translatable field edits. */
+export declare function ContentLanguageSwitcher({ activeLanguage, defaultLanguageTag, languageTags, messages, onSelect, onAddLanguage, onRemoveLanguage, }: ContentLanguageSwitcherProps): import("react/jsx-runtime").JSX.Element;
+export interface TranslatableFieldProps {
+    label: string;
+    type: "text" | "richtext";
+    field: TranslatableField;
+    activeLanguage: string;
+    defaultLanguageTag: string;
+    /** The base product value (used when the active language is the default). Omit for slug. */
+    base?: {
+        value: string;
+        onChange: (value: string) => void;
+    };
+    translations: ProductTranslationDrafts;
+    messages: ProductCoreMessages;
+    placeholder?: string;
+    autoFocus?: boolean;
+    error?: string;
+}
+/**
+ * A field bound to the sheet's active language. When that's the default
+ * language (and the field has a base column), it edits the base value;
+ * otherwise it edits the active language's translation draft. The globe is an
+ * informational indicator (green when the field has any non-default translation).
+ */
+export declare function TranslatableField({ label, type, field, activeLanguage, defaultLanguageTag, base, translations, messages, placeholder, autoFocus, error, }: TranslatableFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function TranslationIndicator({ languages: translatedLanguages, messages, }: {
+    languages: string[];
+    messages: ProductCoreMessages;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function LanguageCombobox({ value, onValueChange, exclude, placeholder, emptyLabel, }: {
+    value: string;
+    onValueChange: (languageTag: string) => void;
+    exclude?: string[];
+    placeholder?: string;
+    emptyLabel?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=product-translation-popover.d.ts.map