@voyantjs/products-ui 0.101.2 → 0.103.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@voyantjs/products-ui",
-  "version": "0.101.2",
+  "version": "0.103.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -50,26 +50,26 @@
     "react-dom": "^19.0.0",
     "react-hook-form": "^7.60.0",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.101.2",
-    "@voyantjs/availability-react": "0.101.2",
-    "@voyantjs/catalog-react": "0.101.2",
-    "@voyantjs/extras-react": "0.101.2",
-    "@voyantjs/finance": "0.101.2",
-    "@voyantjs/finance-ui": "0.101.2",
-    "@voyantjs/markets-react": "0.101.2",
-    "@voyantjs/pricing-react": "0.101.2",
-    "@voyantjs/pricing-ui": "0.101.2",
-    "@voyantjs/products-react": "0.101.2",
-    "@voyantjs/suppliers-react": "0.101.2",
-    "@voyantjs/ui": "0.101.2",
-    "@voyantjs/utils": "0.101.2"
+    "@voyantjs/availability": "0.103.0",
+    "@voyantjs/availability-react": "0.103.0",
+    "@voyantjs/catalog-react": "0.103.0",
+    "@voyantjs/extras-react": "0.103.0",
+    "@voyantjs/finance": "0.103.0",
+    "@voyantjs/finance-ui": "0.103.0",
+    "@voyantjs/markets-react": "0.103.0",
+    "@voyantjs/pricing-react": "0.103.0",
+    "@voyantjs/pricing-ui": "0.103.0",
+    "@voyantjs/products-react": "0.103.0",
+    "@voyantjs/suppliers-react": "0.103.0",
+    "@voyantjs/ui": "0.103.0",
+    "@voyantjs/utils": "0.103.0"
   },
   "dependencies": {
     "date-fns": "^4.1.0",
     "motion": "^12.38.0",
     "react-day-picker": "^9.8.0",
     "sonner": "^2.0.7",
-    "@voyantjs/i18n": "0.101.2"
+    "@voyantjs/i18n": "0.103.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.100.11",
@@ -82,20 +82,20 @@
     "typescript": "^6.0.2",
     "vitest": "^4.1.2",
     "zod": "^4.3.6",
-    "@voyantjs/availability": "0.101.2",
-    "@voyantjs/availability-react": "0.101.2",
-    "@voyantjs/catalog-react": "0.101.2",
-    "@voyantjs/extras-react": "0.101.2",
-    "@voyantjs/finance": "0.101.2",
-    "@voyantjs/finance-ui": "0.101.2",
-    "@voyantjs/i18n": "0.101.2",
-    "@voyantjs/markets-react": "0.101.2",
-    "@voyantjs/pricing-react": "0.101.2",
-    "@voyantjs/pricing-ui": "0.101.2",
-    "@voyantjs/products-react": "0.101.2",
-    "@voyantjs/suppliers-react": "0.101.2",
-    "@voyantjs/ui": "0.101.2",
-    "@voyantjs/utils": "0.101.2",
+    "@voyantjs/availability": "0.103.0",
+    "@voyantjs/availability-react": "0.103.0",
+    "@voyantjs/catalog-react": "0.103.0",
+    "@voyantjs/extras-react": "0.103.0",
+    "@voyantjs/finance": "0.103.0",
+    "@voyantjs/finance-ui": "0.103.0",
+    "@voyantjs/i18n": "0.103.0",
+    "@voyantjs/markets-react": "0.103.0",
+    "@voyantjs/pricing-react": "0.103.0",
+    "@voyantjs/pricing-ui": "0.103.0",
+    "@voyantjs/products-react": "0.103.0",
+    "@voyantjs/suppliers-react": "0.103.0",
+    "@voyantjs/ui": "0.103.0",
+    "@voyantjs/utils": "0.103.0",
     "@voyantjs/voyant-typescript-config": "0.1.0"
   },
   "files": [

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

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

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

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

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

@@ -1,141 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useProductExtraMutation, useProductExtras, } from "@voyantjs/extras-react";
-import { formatMessage } from "@voyantjs/i18n";
-import { Badge, Button, Checkbox, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Textarea, } from "@voyantjs/ui/components";
-import { Pencil, Plus, Trash2 } from "lucide-react";
-import * as React from "react";
-import { useProductDetailMessages } from "./host.js";
-import { ActionMenu, EmptyState, Section } from "./product-detail-sections.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,
-};
-export function ProductExtrasSection({ productId }) {
-    const messages = useProductDetailMessages();
-    const extraMessages = messages.products.operations.extras;
-    const [open, setOpen] = React.useState(false);
-    const [editing, setEditing] = React.useState(null);
-    const [form, setForm] = React.useState(emptyForm);
-    const { data, isPending, refetch } = useProductExtras({ productId, limit: 100 });
-    const { create, update, remove } = useProductExtraMutation();
-    const rows = data?.data ?? [];
-    const startCreate = () => {
-        setEditing(null);
-        setForm(emptyForm);
-        setOpen(true);
-    };
-    const startEdit = (extra) => {
-        setEditing(extra);
-        setForm({
-            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,
-        });
-        setOpen(true);
-    };
-    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: editing?.sortOrder ?? rows.length,
-        };
-        if (!payload.name)
-            return;
-        if (editing)
-            await update.mutateAsync({ id: editing.id, input: payload });
-        else
-            await create.mutateAsync(payload);
-        setOpen(false);
-        setEditing(null);
-        setForm(emptyForm);
-        void refetch();
-    };
-    return (_jsxs(Section, { title: extraMessages.sectionTitle, actions: _jsxs(Button, { variant: "outline", size: "sm", onClick: startCreate, children: [_jsx(Plus, { className: "mr-1 h-3.5 w-3.5" }), extraMessages.addAction] }), contentClassName: "px-6 py-4", children: [rows.length === 0 ? (_jsx(EmptyState, { message: isPending ? extraMessages.loading : extraMessages.empty })) : (_jsx("div", { className: "flex flex-col gap-2", children: rows.map((extra) => (_jsxs("div", { className: "flex items-start justify-between gap-3 rounded-md border px-3 py-2", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "font-medium text-sm", children: extra.name }), _jsx(Badge, { variant: extra.active ? "default" : "outline", children: extra.active ? extraMessages.activeBadge : extraMessages.inactiveBadge }), _jsx(Badge, { variant: "secondary", children: getPricingModeLabel(extra.pricingMode, extraMessages) }), extra.pricedPerPerson ? (_jsx(Badge, { variant: "outline", children: extraMessages.perTravelerBadge })) : null] }), extra.description ? (_jsx("p", { className: "text-muted-foreground text-xs", children: extra.description })) : null] }), _jsxs(ActionMenu, { children: [_jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-2 py-1.5 text-sm", onClick: () => startEdit(extra), children: [_jsx(Pencil, { className: "h-4 w-4" }), extraMessages.editAction] }), _jsxs("button", { type: "button", className: "flex w-full items-center gap-2 px-2 py-1.5 text-destructive text-sm", onClick: () => {
-                                        if (confirm(formatMessage(extraMessages.deleteConfirm, { name: extra.name })))
-                                            remove.mutate(extra.id, { onSuccess: () => void refetch() });
-                                    }, children: [_jsx(Trash2, { className: "h-4 w-4" }), extraMessages.deleteAction] })] })] }, extra.id))) })), _jsx(Dialog, { open: open, onOpenChange: setOpen, children: _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: editing ? 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: getPricingModeLabel(mode, extraMessages),
-                                                })), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: pricingModes.map((mode) => (_jsx(SelectItem, { value: mode, children: getPricingModeLabel(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: () => setOpen(false), children: extraMessages.cancel }), _jsx(Button, { onClick: () => void save(), disabled: !form.name.trim(), children: editing ? extraMessages.saveChanges : extraMessages.create })] })] }) })] }));
-}
-function Field({ label, children }) {
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: label }), children] }));
-}
-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;
-    }
-}
-function getPricingModeLabel(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;
-    }
-}