@voyantjs/products-ui 0.16.0 → 0.18.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +201 -109
- package/README.md +11 -0
- package/dist/components/option-unit-dialog.d.ts.map +1 -1
- package/dist/components/option-unit-dialog.js +7 -3
- package/dist/components/option-unit-form.d.ts.map +1 -1
- package/dist/components/option-unit-form.js +16 -9
- package/dist/components/product-category-combobox.d.ts.map +1 -1
- package/dist/components/product-category-combobox.js +6 -4
- package/dist/components/product-category-dialog.d.ts.map +1 -1
- package/dist/components/product-category-dialog.js +7 -3
- package/dist/components/product-category-form.d.ts.map +1 -1
- package/dist/components/product-category-form.js +8 -4
- package/dist/components/product-category-list.d.ts.map +1 -1
- package/dist/components/product-category-list.js +11 -5
- package/dist/components/product-day-dialog.d.ts.map +1 -1
- package/dist/components/product-day-dialog.js +7 -3
- package/dist/components/product-day-form.d.ts.map +1 -1
- package/dist/components/product-day-form.js +9 -3
- package/dist/components/product-itinerary-dialog.d.ts.map +1 -1
- package/dist/components/product-itinerary-dialog.js +13 -5
- package/dist/components/product-media-dialog.d.ts.map +1 -1
- package/dist/components/product-media-dialog.js +7 -3
- package/dist/components/product-media-form.d.ts.map +1 -1
- package/dist/components/product-media-form.js +16 -7
- package/dist/components/product-media-section.d.ts.map +1 -1
- package/dist/components/product-media-section.js +19 -11
- package/dist/components/product-option-dialog.d.ts.map +1 -1
- package/dist/components/product-option-dialog.js +7 -3
- package/dist/components/product-option-form.d.ts.map +1 -1
- package/dist/components/product-option-form.js +11 -8
- package/dist/components/product-options-section.d.ts.map +1 -1
- package/dist/components/product-options-section.js +17 -13
- package/dist/components/product-tag-dialog.d.ts.map +1 -1
- package/dist/components/product-tag-dialog.js +7 -3
- package/dist/components/product-tag-form.d.ts.map +1 -1
- package/dist/components/product-tag-form.js +7 -3
- package/dist/components/product-tag-list.d.ts.map +1 -1
- package/dist/components/product-tag-list.js +9 -5
- package/dist/components/product-type-combobox.d.ts +1 -1
- package/dist/components/product-type-combobox.d.ts.map +1 -1
- package/dist/components/product-type-combobox.js +6 -2
- package/dist/components/product-version-dialog.d.ts.map +1 -1
- package/dist/components/product-version-dialog.js +5 -3
- package/dist/components/product-versions-section.d.ts.map +1 -1
- package/dist/components/product-versions-section.js +7 -2
- package/dist/i18n/en.d.ts +402 -0
- package/dist/i18n/en.d.ts.map +1 -0
- package/dist/i18n/en.js +401 -0
- package/dist/i18n/index.d.ts +5 -0
- package/dist/i18n/index.d.ts.map +1 -0
- package/dist/i18n/index.js +3 -0
- package/dist/i18n/messages.d.ts +402 -0
- package/dist/i18n/messages.d.ts.map +1 -0
- package/dist/i18n/messages.js +1 -0
- package/dist/i18n/provider.d.ts +826 -0
- package/dist/i18n/provider.d.ts.map +1 -0
- package/dist/i18n/provider.js +44 -0
- package/dist/i18n/ro.d.ts +402 -0
- package/dist/i18n/ro.d.ts.map +1 -0
- package/dist/i18n/ro.js +401 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +35 -14
|
@@ -8,6 +8,7 @@ import { Input } from "@voyantjs/ui/components/input";
|
|
|
8
8
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
|
|
9
9
|
import { CheckCircle2, Loader2, MoreHorizontal, Pencil, Plus, Search, Trash2 } from "lucide-react";
|
|
10
10
|
import * as React from "react";
|
|
11
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
11
12
|
import { ProductCategoryDialog } from "./product-category-dialog";
|
|
12
13
|
export function ProductCategoryList({ pageSize = 200 } = {}) {
|
|
13
14
|
const [search, setSearch] = React.useState("");
|
|
@@ -20,23 +21,28 @@ export function ProductCategoryList({ pageSize = 200 } = {}) {
|
|
|
20
21
|
offset,
|
|
21
22
|
});
|
|
22
23
|
const { remove } = useProductCategoryMutation();
|
|
24
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
23
25
|
const categories = data?.data ?? [];
|
|
24
26
|
const total = data?.total ?? 0;
|
|
25
27
|
const page = Math.floor(offset / pageSize) + 1;
|
|
26
28
|
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
|
27
29
|
const categoryById = new Map(categories.map((category) => [category.id, category]));
|
|
28
|
-
return (_jsxs("div", { "data-slot": "product-category-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder:
|
|
30
|
+
return (_jsxs("div", { "data-slot": "product-category-list", className: "flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "relative w-full max-w-sm", children: [_jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { placeholder: messages.productCategoryList.searchPlaceholder, value: search, onChange: (event) => {
|
|
29
31
|
setSearch(event.target.value);
|
|
30
32
|
setOffset(0);
|
|
31
33
|
}, className: "pl-9" })] }), _jsxs(Button, { onClick: () => {
|
|
32
34
|
setEditing(undefined);
|
|
33
35
|
setDialogOpen(true);
|
|
34
|
-
}, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
|
|
36
|
+
}, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productCategoryList.addCategory] })] }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.productCategoryList.columns.name }), _jsx(TableHead, { children: messages.productCategoryList.columns.slug }), _jsx(TableHead, { children: messages.productCategoryList.columns.parent }), _jsx(TableHead, { children: messages.productCategoryList.columns.status }), _jsx(TableHead, { className: "w-[80px] text-right", children: messages.productCategoryList.columns.actions })] }) }), _jsx(TableBody, { children: isPending ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center", children: _jsx(Loader2, { className: "mx-auto size-4 animate-spin text-muted-foreground" }) }) })) : isError ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center text-sm text-destructive", children: messages.productCategoryList.loadingError }) })) : categories.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 5, className: "h-24 text-center text-sm text-muted-foreground", children: messages.productCategoryList.empty }) })) : (categories.map((category) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: category.name }), _jsx(TableCell, { children: category.slug }), _jsx(TableCell, { children: category.parentId
|
|
37
|
+
? (categoryById.get(category.parentId)?.name ?? messages.common.none)
|
|
38
|
+
: messages.common.none }), _jsx(TableCell, { children: category.active ? (_jsxs(Badge, { variant: "default", className: "gap-1", children: [_jsx(CheckCircle2, { className: "size-3.5" }), messages.common.active] })) : (_jsx(Badge, { variant: "secondary", children: messages.common.inactive })) }), _jsx(TableCell, { className: "text-right", children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-hidden hover:bg-accent hover:text-accent-foreground", children: _jsx(MoreHorizontal, { className: "size-4" }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsxs(DropdownMenuItem, { onClick: () => {
|
|
35
39
|
setEditing(category);
|
|
36
40
|
setDialogOpen(true);
|
|
37
|
-
}, children: [_jsx(Pencil, { className: "size-4" }),
|
|
38
|
-
if (confirm(
|
|
41
|
+
}, children: [_jsx(Pencil, { className: "size-4" }), messages.productCategoryList.edit] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { variant: "destructive", onClick: () => {
|
|
42
|
+
if (confirm(messages.productCategoryList.deleteConfirm)) {
|
|
39
43
|
remove.mutate(category.id);
|
|
40
44
|
}
|
|
41
|
-
}, children: [_jsx(Trash2, { className: "size-4" }),
|
|
45
|
+
}, children: [_jsx(Trash2, { className: "size-4" }), messages.productCategoryList.delete] })] })] }) })] }, category.id)))) })] }) }), _jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [_jsx("span", { children: messages.productCategoryList.showingSummary
|
|
46
|
+
.replace("{count}", String(categories.length))
|
|
47
|
+
.replace("{total}", String(total)) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", disabled: offset === 0, onClick: () => setOffset((prev) => Math.max(0, prev - pageSize)), children: messages.common.previous }), _jsxs("span", { children: [messages.common.page, " ", page, " / ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: offset + pageSize >= total, onClick: () => setOffset((prev) => prev + pageSize), children: messages.common.next })] })] }), _jsx(ProductCategoryDialog, { open: dialogOpen, onOpenChange: setDialogOpen, category: editing })] }));
|
|
42
48
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-day-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-day-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-day-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-day-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAA;AAahE,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,CAAC,EAAE,gBAAgB,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;CAC5C;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,GAAG,EACH,aAAa,EACb,SAAS,GACV,EAAE,qBAAqB,2CAgCvB"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
|
|
4
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
4
5
|
import { ProductDayForm } from "./product-day-form";
|
|
5
6
|
export function ProductDayDialog({ open, onOpenChange, productId, day, nextDayNumber, onSuccess, }) {
|
|
6
7
|
const isEdit = Boolean(day);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
9
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-day-dialog", className: "sm:max-w-[640px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit
|
|
10
|
+
? messages.productDayDialog.titles.edit
|
|
11
|
+
: messages.productDayDialog.titles.create }), _jsx(DialogDescription, { children: isEdit
|
|
12
|
+
? messages.productDayDialog.descriptions.edit
|
|
13
|
+
: messages.productDayDialog.descriptions.create })] }), _jsx(ProductDayForm, { mode: day ? { kind: "edit", productId, day } : { kind: "create", productId, nextDayNumber }, onSuccess: (savedDay) => {
|
|
10
14
|
onSuccess?.(savedDay);
|
|
11
15
|
onOpenChange(false);
|
|
12
16
|
}, onCancel: () => onOpenChange(false) })] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-day-form.d.ts","sourceRoot":"","sources":["../../src/components/product-day-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAyB,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-day-form.d.ts","sourceRoot":"","sources":["../../src/components/product-day-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAyB,MAAM,0BAA0B,CAAA;AAUvF,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,aAAa,CAAC,EAAE,MAAM,CAAA;CAAE,GAC7D;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,gBAAgB,CAAA;CAAE,CAAA;AAE9D,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC3C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA2BD,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CA0HhF"}
|
|
@@ -7,6 +7,7 @@ import { Label } from "@voyantjs/ui/components/label";
|
|
|
7
7
|
import { Textarea } from "@voyantjs/ui/components/textarea";
|
|
8
8
|
import { Loader2 } from "lucide-react";
|
|
9
9
|
import * as React from "react";
|
|
10
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
10
11
|
function initialState(mode) {
|
|
11
12
|
if (mode.kind === "edit") {
|
|
12
13
|
return {
|
|
@@ -27,6 +28,7 @@ export function ProductDayForm({ mode, onSuccess, onCancel }) {
|
|
|
27
28
|
const [state, setState] = React.useState(() => initialState(mode));
|
|
28
29
|
const [error, setError] = React.useState(null);
|
|
29
30
|
const { create, update } = useProductDayMutation();
|
|
31
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
30
32
|
React.useEffect(() => {
|
|
31
33
|
setState(initialState(mode));
|
|
32
34
|
setError(null);
|
|
@@ -40,7 +42,7 @@ export function ProductDayForm({ mode, onSuccess, onCancel }) {
|
|
|
40
42
|
setError(null);
|
|
41
43
|
const dayNumber = Number.parseInt(state.dayNumber || "0", 10);
|
|
42
44
|
if (!Number.isFinite(dayNumber) || dayNumber < 1) {
|
|
43
|
-
setError(
|
|
45
|
+
setError(messages.productDayForm.validation.dayNumberMin);
|
|
44
46
|
return;
|
|
45
47
|
}
|
|
46
48
|
const payload = {
|
|
@@ -60,8 +62,12 @@ export function ProductDayForm({ mode, onSuccess, onCancel }) {
|
|
|
60
62
|
onSuccess?.(day);
|
|
61
63
|
}
|
|
62
64
|
catch (submissionError) {
|
|
63
|
-
setError(submissionError instanceof Error
|
|
65
|
+
setError(submissionError instanceof Error
|
|
66
|
+
? submissionError.message
|
|
67
|
+
: messages.productDayForm.validation.saveFailed);
|
|
64
68
|
}
|
|
65
69
|
};
|
|
66
|
-
return (_jsxs("form", { "data-slot": "product-day-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-number", children:
|
|
70
|
+
return (_jsxs("form", { "data-slot": "product-day-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-number", children: messages.productDayForm.fields.dayNumber }), _jsx(Input, { id: "product-day-number", type: "number", min: "1", autoFocus: true, required: true, value: state.dayNumber, onChange: (event) => field("dayNumber")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-location", children: messages.productDayForm.fields.location }), _jsx(Input, { id: "product-day-location", value: state.location, onChange: (event) => field("location")(event.target.value), placeholder: messages.productDayForm.placeholders.location })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-title", children: messages.productDayForm.fields.title }), _jsx(Input, { id: "product-day-title", value: state.title, onChange: (event) => field("title")(event.target.value), placeholder: messages.productDayForm.placeholders.title })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-day-description", children: messages.productDayForm.fields.description }), _jsx(Textarea, { id: "product-day-description", value: state.description, onChange: (event) => field("description")(event.target.value), placeholder: messages.productDayForm.placeholders.description })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
|
|
71
|
+
? messages.productDayForm.actions.addDay
|
|
72
|
+
: messages.productDayForm.actions.saveDay] })] })] }));
|
|
67
73
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-itinerary-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-itinerary-dialog.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"product-itinerary-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-itinerary-dialog.tsx"],"names":[],"mappings":"AAmBA,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,WAAW,2BAA2B;IAC1C,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,aAAa,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;IACtB,SAAS,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C;AAED,wBAAgB,sBAAsB,CAAC,EACrC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,SAAS,EACT,cAAc,EACd,SAAS,GACV,EAAE,2BAA2B,2CAuI7B"}
|
|
@@ -8,6 +8,7 @@ import { Input } from "@voyantjs/ui/components/input";
|
|
|
8
8
|
import { Label } from "@voyantjs/ui/components/label";
|
|
9
9
|
import { Loader2 } from "lucide-react";
|
|
10
10
|
import * as React from "react";
|
|
11
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
11
12
|
export function ProductItineraryDialog({ open, onOpenChange, productId, itinerary, itineraryCount, onSuccess, }) {
|
|
12
13
|
const isEditing = !!itinerary;
|
|
13
14
|
const isFirstItinerary = !isEditing && itineraryCount === 0;
|
|
@@ -15,6 +16,7 @@ export function ProductItineraryDialog({ open, onOpenChange, productId, itinerar
|
|
|
15
16
|
const [name, setName] = React.useState("");
|
|
16
17
|
const [isDefault, setIsDefault] = React.useState(false);
|
|
17
18
|
const [error, setError] = React.useState(null);
|
|
19
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
18
20
|
const { create, update } = useProductItineraryMutation();
|
|
19
21
|
const pending = create.isPending || update.isPending;
|
|
20
22
|
React.useEffect(() => {
|
|
@@ -35,7 +37,7 @@ export function ProductItineraryDialog({ open, onOpenChange, productId, itinerar
|
|
|
35
37
|
setError(null);
|
|
36
38
|
const trimmed = name.trim();
|
|
37
39
|
if (!trimmed) {
|
|
38
|
-
setError(
|
|
40
|
+
setError(messages.productItineraryDialog.validation.nameRequired);
|
|
39
41
|
return;
|
|
40
42
|
}
|
|
41
43
|
try {
|
|
@@ -68,10 +70,16 @@ export function ProductItineraryDialog({ open, onOpenChange, productId, itinerar
|
|
|
68
70
|
onOpenChange(false);
|
|
69
71
|
}
|
|
70
72
|
catch (submissionError) {
|
|
71
|
-
setError(submissionError instanceof Error
|
|
73
|
+
setError(submissionError instanceof Error
|
|
74
|
+
? submissionError.message
|
|
75
|
+
: messages.productItineraryDialog.validation.saveFailed);
|
|
72
76
|
}
|
|
73
77
|
};
|
|
74
|
-
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-itinerary-dialog", className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing
|
|
75
|
-
?
|
|
76
|
-
:
|
|
78
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-itinerary-dialog", className: "sm:max-w-md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEditing
|
|
79
|
+
? messages.productItineraryDialog.titles.edit
|
|
80
|
+
: messages.productItineraryDialog.titles.create }), _jsx(DialogDescription, { children: isEditing
|
|
81
|
+
? messages.productItineraryDialog.descriptions.edit
|
|
82
|
+
: messages.productItineraryDialog.descriptions.create })] }), _jsxs("form", { className: "flex flex-col gap-4", onSubmit: handleSubmit, children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-itinerary-name", children: messages.productItineraryDialog.fields.name }), _jsx(Input, { id: "product-itinerary-name", autoFocus: true, value: name, onChange: (event) => setName(event.target.value), placeholder: messages.productItineraryDialog.placeholders.name })] }), _jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Checkbox, { id: "product-itinerary-default", checked: isDefault, disabled: defaultLocked || isFirstItinerary, onCheckedChange: (checked) => setIsDefault(checked === true) }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Label, { htmlFor: "product-itinerary-default", className: "text-sm font-normal", children: messages.productItineraryDialog.fields.defaultItinerary }), defaultLocked ? (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.productItineraryDialog.fields.notesDefaultLocked })) : isFirstItinerary ? (_jsx("p", { className: "text-xs text-muted-foreground", children: messages.productItineraryDialog.fields.notesFirstDefault })) : null] })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "ghost", onClick: () => onOpenChange(false), children: messages.common.cancel }), _jsxs(Button, { type: "submit", disabled: pending, children: [pending ? _jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" }) : null, isEditing
|
|
83
|
+
? messages.common.saveChanges
|
|
84
|
+
: messages.productItineraryDialog.actions.createItinerary] })] })] })] }) }));
|
|
77
85
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-media-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-media-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-media-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-media-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAalE,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,kBAAkB,CAAA;IAC1B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;CAChD;AAED,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,uBAAuB,2CA8BzB"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
|
|
4
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
4
5
|
import { ProductMediaForm } from "./product-media-form";
|
|
5
6
|
export function ProductMediaDialog({ open, onOpenChange, productId, dayId, media, onSuccess, }) {
|
|
6
7
|
const isEdit = Boolean(media);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
9
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-media-dialog", className: "sm:max-w-[720px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit
|
|
10
|
+
? messages.productMediaDialog.titles.edit
|
|
11
|
+
: messages.productMediaDialog.titles.create }), _jsx(DialogDescription, { children: isEdit
|
|
12
|
+
? messages.productMediaDialog.descriptions.edit
|
|
13
|
+
: messages.productMediaDialog.descriptions.create })] }), _jsx(ProductMediaForm, { mode: media ? { kind: "edit", media } : { kind: "create", productId, dayId }, onSuccess: (savedMedia) => {
|
|
10
14
|
onSuccess?.(savedMedia);
|
|
11
15
|
onOpenChange(false);
|
|
12
16
|
}, onCancel: () => onOpenChange(false) })] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-media-form.d.ts","sourceRoot":"","sources":["../../src/components/product-media-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-media-form.d.ts","sourceRoot":"","sources":["../../src/components/product-media-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,kBAAkB,EAA2B,MAAM,0BAA0B,CAAA;AAoB3F,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,GACrD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,kBAAkB,CAAA;CAAE,CAAA;AAE/C,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAgDD,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAuMpF"}
|
|
@@ -9,10 +9,11 @@ import { Switch } from "@voyantjs/ui/components/switch";
|
|
|
9
9
|
import { Textarea } from "@voyantjs/ui/components/textarea";
|
|
10
10
|
import { Loader2 } from "lucide-react";
|
|
11
11
|
import * as React from "react";
|
|
12
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
12
13
|
const MEDIA_TYPES = [
|
|
13
|
-
{ value: "image"
|
|
14
|
-
{ value: "video"
|
|
15
|
-
{ value: "document"
|
|
14
|
+
{ value: "image" },
|
|
15
|
+
{ value: "video" },
|
|
16
|
+
{ value: "document" },
|
|
16
17
|
];
|
|
17
18
|
function initialState(mode) {
|
|
18
19
|
if (mode.kind === "edit") {
|
|
@@ -44,6 +45,7 @@ export function ProductMediaForm({ mode, onSuccess, onCancel }) {
|
|
|
44
45
|
const [state, setState] = React.useState(() => initialState(mode));
|
|
45
46
|
const [error, setError] = React.useState(null);
|
|
46
47
|
const { create, update } = useProductMediaMutation();
|
|
48
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
47
49
|
React.useEffect(() => {
|
|
48
50
|
setState(initialState(mode));
|
|
49
51
|
setError(null);
|
|
@@ -56,11 +58,11 @@ export function ProductMediaForm({ mode, onSuccess, onCancel }) {
|
|
|
56
58
|
event.preventDefault();
|
|
57
59
|
setError(null);
|
|
58
60
|
if (!state.name.trim()) {
|
|
59
|
-
setError(
|
|
61
|
+
setError(messages.productMediaForm.validation.nameRequired);
|
|
60
62
|
return;
|
|
61
63
|
}
|
|
62
64
|
if (!state.url.trim()) {
|
|
63
|
-
setError(
|
|
65
|
+
setError(messages.productMediaForm.validation.urlRequired);
|
|
64
66
|
return;
|
|
65
67
|
}
|
|
66
68
|
const payload = {
|
|
@@ -85,8 +87,15 @@ export function ProductMediaForm({ mode, onSuccess, onCancel }) {
|
|
|
85
87
|
onSuccess?.(media);
|
|
86
88
|
}
|
|
87
89
|
catch (submissionError) {
|
|
88
|
-
setError(submissionError instanceof Error
|
|
90
|
+
setError(submissionError instanceof Error
|
|
91
|
+
? submissionError.message
|
|
92
|
+
: messages.productMediaForm.validation.saveFailed);
|
|
89
93
|
}
|
|
90
94
|
};
|
|
91
|
-
return (_jsxs("form", { "data-slot": "product-media-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children:
|
|
95
|
+
return (_jsxs("form", { "data-slot": "product-media-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: messages.productMediaForm.fields.mediaType }), _jsxs(Select, { items: MEDIA_TYPES.map((type) => ({
|
|
96
|
+
label: messages.common.mediaTypeLabels[type.value],
|
|
97
|
+
value: type.value,
|
|
98
|
+
})), value: state.mediaType, onValueChange: (value) => field("mediaType")(value), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: MEDIA_TYPES.map((type) => (_jsx(SelectItem, { value: type.value, children: messages.common.mediaTypeLabels[type.value] }, type.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-name", children: messages.productMediaForm.fields.name }), _jsx(Input, { id: "product-media-name", autoFocus: true, required: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: messages.productMediaForm.placeholders.name })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-url", children: messages.productMediaForm.fields.url }), _jsx(Input, { id: "product-media-url", type: "url", required: true, value: state.url, onChange: (event) => field("url")(event.target.value), placeholder: messages.productMediaForm.placeholders.url })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-storage-key", children: messages.productMediaForm.fields.storageKey }), _jsx(Input, { id: "product-media-storage-key", value: state.storageKey, onChange: (event) => field("storageKey")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-mime-type", children: messages.productMediaForm.fields.mimeType }), _jsx(Input, { id: "product-media-mime-type", value: state.mimeType, onChange: (event) => field("mimeType")(event.target.value), placeholder: messages.productMediaForm.placeholders.mimeType })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-3", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-file-size", children: messages.productMediaForm.fields.fileSize }), _jsx(Input, { id: "product-media-file-size", type: "number", min: "0", value: state.fileSize, onChange: (event) => field("fileSize")(event.target.value) })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-sort-order", children: messages.productMediaForm.fields.sortOrder }), _jsx(Input, { id: "product-media-sort-order", type: "number", value: state.sortOrder, onChange: (event) => field("sortOrder")(event.target.value) })] }), _jsxs("div", { className: "flex items-end gap-2 pb-2", children: [_jsx(Switch, { checked: state.isCover, onCheckedChange: (checked) => field("isCover")(checked) }), _jsx(Label, { children: messages.productMediaForm.fields.coverMedia })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-media-alt-text", children: messages.productMediaForm.fields.altText }), _jsx(Textarea, { id: "product-media-alt-text", value: state.altText, onChange: (event) => field("altText")(event.target.value), placeholder: messages.productMediaForm.placeholders.altText })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
|
|
99
|
+
? messages.productMediaForm.actions.addMedia
|
|
100
|
+
: messages.productMediaForm.actions.saveMedia] })] })] }));
|
|
92
101
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-media-section.d.ts","sourceRoot":"","sources":["../../src/components/product-media-section.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-media-section.d.ts","sourceRoot":"","sources":["../../src/components/product-media-section.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,kBAAkB,EAGxB,MAAM,0BAA0B,CAAA;AAwBjC,MAAM,WAAW,wBAAwB;IACvC,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,yBAAyB,GAAG,CACtC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAC3C,OAAO,CAAC,wBAAwB,CAAC,CAAA;AAEtC,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,yBAAyB,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAe,EACf,WAAW,EACX,YAAgD,GACjD,EAAE,wBAAwB,2CAgQ1B"}
|
|
@@ -7,10 +7,10 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@voy
|
|
|
7
7
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@voyantjs/ui/components/table";
|
|
8
8
|
import { ImageIcon, Loader2, Pencil, Plus, Star, Trash2, Upload } from "lucide-react";
|
|
9
9
|
import * as React from "react";
|
|
10
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
10
11
|
import { ProductMediaDialog } from "./product-media-dialog";
|
|
11
|
-
export function ProductMediaSection({ productId, dayId, title =
|
|
12
|
-
|
|
13
|
-
: "Manage product-level media assets and cover selection.", compact = false, uploadMedia, uploadAccept = "image/*,video/*,application/pdf", }) {
|
|
12
|
+
export function ProductMediaSection({ productId, dayId, title, description, compact = false, uploadMedia, uploadAccept = "image/*,video/*,application/pdf", }) {
|
|
13
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
14
14
|
const [dialogOpen, setDialogOpen] = React.useState(false);
|
|
15
15
|
const [editingMedia, setEditingMedia] = React.useState();
|
|
16
16
|
const [isUploading, setIsUploading] = React.useState(false);
|
|
@@ -21,7 +21,15 @@ export function ProductMediaSection({ productId, dayId, title = dayId ? "Day med
|
|
|
21
21
|
const media = React.useMemo(() => (data?.data ?? [])
|
|
22
22
|
.slice()
|
|
23
23
|
.sort((left, right) => Number(right.isCover) - Number(left.isCover) || left.sortOrder - right.sortOrder), [data?.data]);
|
|
24
|
-
const
|
|
24
|
+
const resolvedTitle = title ??
|
|
25
|
+
(dayId
|
|
26
|
+
? messages.productMediaSection.titles.dayMedia
|
|
27
|
+
: messages.productMediaSection.titles.media);
|
|
28
|
+
const resolvedDescription = description ??
|
|
29
|
+
(dayId
|
|
30
|
+
? messages.productMediaSection.descriptions.dayMedia
|
|
31
|
+
: messages.productMediaSection.descriptions.media);
|
|
32
|
+
const header = (_jsxs("div", { className: "space-y-1", children: [_jsx(CardTitle, { className: compact ? "text-base" : undefined, children: resolvedTitle }), _jsx(CardDescription, { children: resolvedDescription })] }));
|
|
25
33
|
const handleUpload = async (file) => {
|
|
26
34
|
if (!uploadMedia)
|
|
27
35
|
return;
|
|
@@ -51,13 +59,13 @@ export function ProductMediaSection({ productId, dayId, title = dayId ? "Day med
|
|
|
51
59
|
});
|
|
52
60
|
}
|
|
53
61
|
catch (error) {
|
|
54
|
-
setUploadError(error instanceof Error ? error.message :
|
|
62
|
+
setUploadError(error instanceof Error ? error.message : messages.productMediaSection.uploadFailed);
|
|
55
63
|
}
|
|
56
64
|
finally {
|
|
57
65
|
setIsUploading(false);
|
|
58
66
|
}
|
|
59
67
|
};
|
|
60
|
-
const actions = (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [uploadMedia ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: compact ? "outline" : "secondary", disabled: isUploading, onClick: () => fileInputRef.current?.click(), children: [isUploading ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : (_jsx(Upload, { className: "mr-2 size-4", "aria-hidden": "true" })),
|
|
68
|
+
const actions = (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [uploadMedia ? (_jsxs(_Fragment, { children: [_jsxs(Button, { variant: compact ? "outline" : "secondary", disabled: isUploading, onClick: () => fileInputRef.current?.click(), children: [isUploading ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : (_jsx(Upload, { className: "mr-2 size-4", "aria-hidden": "true" })), messages.productMediaSection.actions.upload] }), _jsx("input", { ref: fileInputRef, type: "file", accept: uploadAccept, className: "hidden", onChange: (event) => {
|
|
61
69
|
const file = event.target.files?.[0];
|
|
62
70
|
if (file) {
|
|
63
71
|
void handleUpload(file);
|
|
@@ -66,14 +74,14 @@ export function ProductMediaSection({ productId, dayId, title = dayId ? "Day med
|
|
|
66
74
|
} })] })) : null, _jsxs(Button, { onClick: () => {
|
|
67
75
|
setEditingMedia(undefined);
|
|
68
76
|
setDialogOpen(true);
|
|
69
|
-
}, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }),
|
|
70
|
-
const body = (_jsxs(_Fragment, { children: [uploadError ? _jsx("p", { className: "text-sm text-destructive", children: uploadError }) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children:
|
|
77
|
+
}, children: [_jsx(Plus, { className: "mr-2 size-4", "aria-hidden": "true" }), messages.productMediaSection.actions.addMedia] })] }));
|
|
78
|
+
const body = (_jsxs(_Fragment, { children: [uploadError ? _jsx("p", { className: "text-sm text-destructive", children: uploadError }) : null, isPending ? (_jsx("div", { className: "flex min-h-24 items-center justify-center", children: _jsx(Loader2, { className: "size-4 animate-spin text-muted-foreground" }) })) : isError ? (_jsx("p", { className: "text-sm text-destructive", children: messages.productMediaSection.loadingError })) : media.length === 0 ? (_jsx("p", { className: "text-sm text-muted-foreground", children: messages.productMediaSection.empty })) : (_jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: messages.productMediaSection.columns.name }), _jsx(TableHead, { children: messages.productMediaSection.columns.type }), _jsx(TableHead, { children: messages.productMediaSection.columns.url }), _jsx(TableHead, { children: messages.productMediaSection.columns.sort }), _jsx(TableHead, { className: "w-32" })] }) }), _jsx(TableBody, { children: media.map((item) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: item.name }), item.altText ? (_jsx("div", { className: "text-xs text-muted-foreground", children: item.altText })) : null] }), item.isCover ? (_jsx(Badge, { children: messages.productMediaSection.coverBadge })) : null] }) }), _jsx(TableCell, { children: _jsx(Badge, { variant: "outline", children: messages.common.mediaTypeLabels[item.mediaType] }) }), _jsx(TableCell, { className: "max-w-[320px]", children: _jsx("a", { href: item.url, target: "_blank", rel: "noreferrer", className: "truncate text-sm text-primary underline-offset-4 hover:underline", children: item.url }) }), _jsx(TableCell, { children: item.sortOrder }), _jsx(TableCell, { children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [!item.isCover ? (_jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => setCover.mutate(item.id), "aria-label": messages.productMediaSection.actions.markCover, children: _jsx(Star, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
|
|
71
79
|
setEditingMedia(item);
|
|
72
80
|
setDialogOpen(true);
|
|
73
|
-
}, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
|
|
74
|
-
if (confirm(
|
|
81
|
+
}, "aria-label": messages.productMediaSection.actions.edit, children: _jsx(Pencil, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", onClick: () => {
|
|
82
|
+
if (confirm(messages.productMediaSection.deleteConfirm)) {
|
|
75
83
|
remove.mutate(item.id);
|
|
76
84
|
}
|
|
77
|
-
}, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }) })] }, item.id))) })] }) }))] }));
|
|
85
|
+
}, "aria-label": messages.productMediaSection.actions.delete, children: _jsx(Trash2, { className: "size-4", "aria-hidden": "true" }) })] }) })] }, item.id))) })] }) }))] }));
|
|
78
86
|
return (_jsxs(_Fragment, { children: [compact ? (_jsxs("div", { "data-slot": "product-media-section", className: "flex flex-col gap-3 rounded-md border bg-background p-3", children: [_jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), body] })) : (_jsxs(Card, { "data-slot": "product-media-section", children: [_jsxs(CardHeader, { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [header, actions] }), _jsx(CardContent, { children: body })] })), _jsx(ProductMediaDialog, { open: dialogOpen, onOpenChange: setDialogOpen, productId: productId, dayId: dayId, media: editingMedia, onSuccess: () => setEditingMedia(undefined) })] }));
|
|
79
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-option-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-option-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-option-dialog.d.ts","sourceRoot":"","sources":["../../src/components/product-option-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAA;AAanE,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,mBAAmB,CAAA;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;CAClD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,MAAM,EACN,SAAS,EACT,SAAS,GACV,EAAE,wBAAwB,2CA8B1B"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "@voyantjs/ui/components/dialog";
|
|
4
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
4
5
|
import { ProductOptionForm } from "./product-option-form";
|
|
5
6
|
export function ProductOptionDialog({ open, onOpenChange, productId, option, sortOrder, onSuccess, }) {
|
|
6
7
|
const isEdit = Boolean(option);
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
9
|
+
return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { "data-slot": "product-option-dialog", className: "sm:max-w-[640px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: isEdit
|
|
10
|
+
? messages.productOptionDialog.titles.edit
|
|
11
|
+
: messages.productOptionDialog.titles.create }), _jsx(DialogDescription, { children: isEdit
|
|
12
|
+
? messages.productOptionDialog.descriptions.edit
|
|
13
|
+
: messages.productOptionDialog.descriptions.create })] }), _jsx(ProductOptionForm, { mode: option ? { kind: "edit", option } : { kind: "create", productId, sortOrder }, onSuccess: (saved) => {
|
|
10
14
|
onSuccess?.(saved);
|
|
11
15
|
onOpenChange(false);
|
|
12
16
|
}, onCancel: () => onOpenChange(false) })] }) }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-option-form.d.ts","sourceRoot":"","sources":["../../src/components/product-option-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,0BAA0B,CAAA;
|
|
1
|
+
{"version":3,"file":"product-option-form.d.ts","sourceRoot":"","sources":["../../src/components/product-option-form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,mBAAmB,EAEzB,MAAM,0BAA0B,CAAA;AAmBjC,KAAK,IAAI,GACL;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GACzD;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,mBAAmB,CAAA;CAAE,CAAA;AAEjD,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,IAAI,CAAA;IACV,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,IAAI,CAAA;IACjD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AA2DD,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAwKtF"}
|
|
@@ -10,11 +10,8 @@ import { Switch } from "@voyantjs/ui/components/switch";
|
|
|
10
10
|
import { Textarea } from "@voyantjs/ui/components/textarea";
|
|
11
11
|
import { Loader2 } from "lucide-react";
|
|
12
12
|
import * as React from "react";
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
{ value: "active", label: "Active" },
|
|
16
|
-
{ value: "archived", label: "Archived" },
|
|
17
|
-
];
|
|
13
|
+
import { useProductsUiMessagesOrDefault } from "../i18n/provider";
|
|
14
|
+
const OPTION_STATUSES = [{ value: "draft" }, { value: "active" }, { value: "archived" }];
|
|
18
15
|
function initialState(mode) {
|
|
19
16
|
if (mode.kind === "edit") {
|
|
20
17
|
return {
|
|
@@ -59,6 +56,7 @@ export function ProductOptionForm({ mode, onSuccess, onCancel }) {
|
|
|
59
56
|
const [state, setState] = React.useState(() => initialState(mode));
|
|
60
57
|
const [error, setError] = React.useState(null);
|
|
61
58
|
const { create, update } = useProductOptionMutation();
|
|
59
|
+
const messages = useProductsUiMessagesOrDefault();
|
|
62
60
|
React.useEffect(() => {
|
|
63
61
|
setState(initialState(mode));
|
|
64
62
|
setError(null);
|
|
@@ -71,7 +69,7 @@ export function ProductOptionForm({ mode, onSuccess, onCancel }) {
|
|
|
71
69
|
event.preventDefault();
|
|
72
70
|
setError(null);
|
|
73
71
|
if (!state.name.trim()) {
|
|
74
|
-
setError(
|
|
72
|
+
setError(messages.productOptionForm.validation.nameRequired);
|
|
75
73
|
return;
|
|
76
74
|
}
|
|
77
75
|
try {
|
|
@@ -81,8 +79,13 @@ export function ProductOptionForm({ mode, onSuccess, onCancel }) {
|
|
|
81
79
|
onSuccess?.(option);
|
|
82
80
|
}
|
|
83
81
|
catch (err) {
|
|
84
|
-
setError(err instanceof Error ? err.message :
|
|
82
|
+
setError(err instanceof Error ? err.message : messages.productOptionForm.validation.saveFailed);
|
|
85
83
|
}
|
|
86
84
|
};
|
|
87
|
-
return (_jsxs("form", { "data-slot": "product-option-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-name", children:
|
|
85
|
+
return (_jsxs("form", { "data-slot": "product-option-form", onSubmit: handleSubmit, className: "flex flex-col gap-4", children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-name", children: messages.productOptionForm.fields.name }), _jsx(Input, { id: "product-option-name", required: true, autoFocus: true, value: state.name, onChange: (event) => field("name")(event.target.value), placeholder: messages.productOptionForm.placeholders.name })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-code", children: messages.productOptionForm.fields.code }), _jsx(Input, { id: "product-option-code", value: state.code, onChange: (event) => field("code")(event.target.value), placeholder: messages.productOptionForm.placeholders.code })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-description", children: messages.productOptionForm.fields.description }), _jsx(Textarea, { id: "product-option-description", value: state.description, onChange: (event) => field("description")(event.target.value), placeholder: messages.productOptionForm.placeholders.description })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { children: messages.productOptionForm.fields.status }), _jsxs(Select, { value: state.status, onValueChange: (value) => value && field("status")(value), items: OPTION_STATUSES.map((status) => ({
|
|
86
|
+
label: messages.common.optionStatusLabels[status.value],
|
|
87
|
+
value: status.value,
|
|
88
|
+
})), children: [_jsx(SelectTrigger, { className: "w-full", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: OPTION_STATUSES.map((status) => (_jsx(SelectItem, { value: status.value, children: messages.common.optionStatusLabels[status.value] }, status.value))) })] })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-sort-order", children: messages.productOptionForm.fields.sortOrder }), _jsx(Input, { id: "product-option-sort-order", type: "number", value: state.sortOrder, onChange: (event) => field("sortOrder")(event.target.value) })] })] }), _jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-available-from", children: messages.productOptionForm.fields.availableFrom }), _jsx(DatePicker, { value: state.availableFrom || null, onChange: (next) => field("availableFrom")(next ?? ""), placeholder: messages.productOptionForm.placeholders.availableFrom, className: "w-full" })] }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: "product-option-available-to", children: messages.productOptionForm.fields.availableTo }), _jsx(DatePicker, { value: state.availableTo || null, onChange: (next) => field("availableTo")(next ?? ""), placeholder: messages.productOptionForm.placeholders.availableTo, className: "w-full" })] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Switch, { checked: state.isDefault, onCheckedChange: (checked) => field("isDefault")(checked) }), _jsx(Label, { htmlFor: "product-option-default", children: messages.productOptionForm.fields.defaultOption })] }), error ? _jsx("p", { className: "text-sm text-destructive", children: error }) : null, _jsxs("div", { className: "flex items-center justify-end gap-2", children: [onCancel ? (_jsx(Button, { type: "button", variant: "ghost", onClick: onCancel, disabled: isSubmitting, children: messages.common.cancel })) : null, _jsxs(Button, { type: "submit", disabled: isSubmitting, children: [isSubmitting ? (_jsx(Loader2, { className: "mr-2 size-4 animate-spin", "aria-hidden": "true" })) : null, mode.kind === "create"
|
|
89
|
+
? messages.productOptionForm.actions.createOption
|
|
90
|
+
: messages.common.saveChanges] })] })] }));
|
|
88
91
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,mBAAmB,EAMzB,MAAM,0BAA0B,CAAA;AAmBjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"product-options-section.d.ts","sourceRoot":"","sources":["../../src/components/product-options-section.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,mBAAmB,EAMzB,MAAM,0BAA0B,CAAA;AAmBjC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoB9B,MAAM,WAAW,0BAA0B;IACzC,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE,mBAAmB,KAAK,KAAK,CAAC,SAAS,CAAA;CACvE;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,QAAc,EACd,KAAK,EACL,WAAW,EACX,mBAAmB,GACpB,EAAE,0BAA0B,2CAoH5B"}
|