@deenruv/admin-dashboard 1.0.16 → 1.0.17-dev.14

package/dist/pages/collections/List.js

@@ -1,39 +1,108 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownSquareIcon, ArrowUpSquareIcon, Folder, FolderOpen, XSquareIcon } from 'lucide-react';
+import { ArrowDownSquareIcon, ArrowRight, ArrowUpSquareIcon, CornerDownRight, Folder, FolderOpen } from 'lucide-react';
 import { Permission, SortOrder } from '@deenruv/admin-types';
 import { CollectionProductVariantsDrawer } from './_components/CollectionProductVariantsDrawer.js';
-import { DrawerTrigger, Routes, apiClient, ListBadge, DetailList, deepMerge, ListLocations, EntityChannelManagementBulkAction, EntityFacetManagementBulkAction, } from '@deenruv/react-ui-devkit';
-import { ArrowRight } from 'lucide-react';
+import { Button, DrawerTrigger, Routes, apiClient, ListBadge, DetailList, deepMerge, ListLocations, EntityChannelManagementBulkAction, EntityFacetManagementBulkAction, useDetailList, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useNavigate } from 'react-router';
 const tableId = 'collections-list-view';
 const { selector } = ListLocations[tableId];
+const COLLECTION_TREE_FETCH_LIMIT = 1000;
+const hasActiveFilter = (filter) => {
+    if (!filter) {
+        return false;
+    }
+    return Object.values(filter).some((value) => {
+        if (value === null || value === undefined || value === '') {
+            return false;
+        }
+        if (Array.isArray(value)) {
+            return value.length > 0;
+        }
+        if (typeof value === 'object') {
+            return Object.values(value).some((operatorValue) => operatorValue !== null && operatorValue !== undefined && operatorValue !== '');
+        }
+        return true;
+    });
+};
+const buildCollectionTree = (items) => {
+    const itemsById = new Map();
+    items.forEach((item) => {
+        itemsById.set(item.id, { ...item, children: [] });
+    });
+    const roots = [];
+    itemsById.forEach((item) => {
+        const parent = item.parentId ? itemsById.get(item.parentId) : undefined;
+        if (parent && parent.id !== item.id) {
+            parent.children?.push(item);
+        }
+        else {
+            roots.push(item);
+        }
+    });
+    return roots;
+};
+const withoutNestedChildren = (items) => {
+    return items.map((item) => ({ ...item, children: [] }));
+};
+const CollectionNameHeader = () => {
+    const { sortButton } = useDetailList();
+    const { t } = useTranslation('table');
+    return sortButton('name', t('columns.name'));
+};
 const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const isFiltered = hasActiveFilter(filter);
     const response = await apiClient('query')({
         ['collections']: [
             {
                 options: {
-                    take: perPage,
-                    skip: (page - 1) * perPage,
+                    take: isFiltered ? perPage : COLLECTION_TREE_FETCH_LIMIT,
+                    skip: isFiltered ? (page - 1) * perPage : 0,
                     filterOperator: filterOperator,
-                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    sort: sort ? { [sort.key]: sort.sortDir } : { position: SortOrder.ASC },
                     ...(filter && { filter }),
-                    topLevelOnly: true,
+                    ...(!isFiltered && { topLevelOnly: false }),
                 },
             },
             { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
         ],
     });
-    return response['collections'];
+    const collections = response['collections'];
+    const items = collections.items;
+    if (isFiltered) {
+        return {
+            ...collections,
+            items: withoutNestedChildren(items),
+        };
+    }
+    const rootCollections = buildCollectionTree(items);
+    const pageStart = (page - 1) * perPage;
+    return {
+        ...collections,
+        items: rootCollections.slice(pageStart, pageStart + perPage),
+        totalItems: rootCollections.length,
+    };
+};
+const onRemove = async (items) => {
+    const ids = items.map((item) => item.id);
+    const { deleteCollections } = await apiClient('mutation')({
+        deleteCollections: [{ ids }, { message: true, result: true }],
+    });
+    return !!deleteCollections.length;
 };
 export const CollectionsListPage = () => {
-    return (_jsx(DetailList, { filterFields: [], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['translations', 'breadcrumbs', 'description'], getSubRows: (row) => row.children, additionalColumns: [
+    const navigate = useNavigate();
+    return (_jsx(DetailList, { filterFields: [], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['translations', 'breadcrumbs', 'description', 'children'], getSubRows: (row) => row.children, additionalColumns: [
             {
-                accessorKey: 'children',
-                header: 'Children',
-                cell: ({ row, getValue }) => {
-                    const value = getValue();
+                accessorKey: 'name',
+                header: () => _jsx(CollectionNameHeader, {}),
+                cell: ({ row }) => {
                     const isExpanded = row.getIsExpanded();
-                    return (_jsx("div", { style: { paddingLeft: `${row.depth * 2}rem` }, children: _jsx(ListBadge, { onClick: row.getToggleExpandedHandler(),
-                            style: { cursor: 'pointer' }, children: isExpanded ? (_jsx(FolderOpen, { size: 16 })) : value?.length > 0 ? (_jsx(Folder, { size: 16 })) : (_jsx(XSquareIcon, { size: 16 })) }) }));
+                    const canExpand = row.getCanExpand();
+                    return (_jsxs("div", { className: "flex items-center gap-2", style: { paddingLeft: `${row.depth * 1.5}rem` }, children: [canExpand ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "size-7 shrink-0 text-stone-700 hover:text-stone-950", onClick: row.getToggleExpandedHandler(), "aria-expanded": isExpanded, "aria-label": `${isExpanded ? 'Collapse' : 'Expand'} ${row.original.name}`, children: isExpanded ? _jsx(FolderOpen, { size: 16 }) : _jsx(Folder, { size: 16 }) })) : (_jsx("span", { className: "flex size-7 shrink-0 items-center justify-center text-stone-400", "aria-hidden": "true", children: row.depth > 0 && _jsx(CornerDownRight, { size: 14 }) })), _jsxs(Button, { type: "button", variant: "outline", className: "h-7 min-w-0 justify-start gap-1 px-2 text-left", title: row.original.name, onClick: () => {
+                                    navigate(Routes.collections.to(row.original.id), {
+                                        viewTransition: true,
+                                    });
+                                }, children: [_jsx("span", { className: "truncate", children: row.original.name }), _jsx(ArrowRight, { className: "shrink-0 pl-1", size: 16 })] })] }));
                 },
             },
             {
@@ -50,7 +119,7 @@ export const CollectionsListPage = () => {
             {
                 icon: _jsx(FolderOpen, { size: 16 }),
                 label: 'Przenieś zaznaczone kolekcje',
-                onClick: async ({ table, data, refetch }) => {
+                onClick: async ({ table }) => {
                     const selectedRows = table.getSelectedRowModel().flatRows.map((row) => row);
                     if (selectedRows.length === 0) {
                         return { error: 'Nie zaznaczono żadnej kolekcji' };
@@ -118,7 +187,7 @@ export const CollectionsListPage = () => {
             {
                 icon: _jsx(FolderOpen, { size: 16 }),
                 label: 'Przenieś kolekcje',
-                onClick: async ({ row, refetch }) => {
+                onClick: async () => {
                     try {
                         // const result = await createDialogFromComponent(MoveCollectionsToCollections, [row]);
                     }
@@ -128,7 +197,5 @@ export const CollectionsListPage = () => {
                     return { success: '' };
                 },
             },
-        ], entityName: 'Collection', route: Routes['collections'], tableId: tableId, fetch: fetch, onRemove: async () => {
-            return true;
-        }, createPermissions: [Permission.CreateCollection], deletePermissions: [Permission.DeleteCollection] }));
+        ], entityName: 'Collection', route: Routes['collections'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateCollection], deletePermissions: [Permission.DeleteCollection] }));
 };

package/dist/pages/collections/_components/CollectionDetailView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
-import { EntityCustomFields, Input, Label, Switch, CustomCard, CardIcons, useDetailView, useSettings, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, normalizeString, } from '@deenruv/react-ui-devkit';
+import { EntityCustomFields, Input, Label, Switch, Checkbox, CustomCard, CardIcons, useDetailView, useSettings, useServer, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, normalizeString, } from '@deenruv/react-ui-devkit';
 import { FiltersCard } from "./FiltersCard";
 import { ContentsCard } from "./ContentsCard";
 import { AssetsCard } from "../../products/_components/AssetsCard.js";
@@ -9,6 +9,7 @@ export const CollectionsDetailView = () => {
     const { t } = useTranslation('collections');
     const contentLng = useSettings((p) => p.translationsLanguage);
     const selectedChannel = useSettings((p) => p.selectedChannel);
+    const channels = useServer((p) => p.channels);
     const navigate = useNavigate();
     const { form, fetchEntity, entity, id } = useDetailView('collections-detail-view', 'CreateCollectionInput', 'translations', 'assetIds', 'featuredAssetId', 'isPrivate', 'inheritFilters', 'filters', 'customFields');
     const { base } = form;
@@ -40,7 +41,15 @@ export const CollectionsDetailView = () => {
         })();
     }, [contentLng, selectedChannel?.id]);
     const translations = base.watch('translations') || [];
+    const additionalChannelIds = base.watch('additionalChannelIds') ?? [];
     const currentTranslationValue = translations.find((v) => v.languageCode === contentLng);
+    const toggleAdditionalChannel = useCallback((channelId, checked) => {
+        if (channelId === selectedChannel?.id)
+            return;
+        const currentIds = base.watch('additionalChannelIds') ?? [];
+        const nextIds = checked ? [...new Set([...currentIds, channelId])] : currentIds.filter((id) => id !== channelId);
+        base.setField('additionalChannelIds', nextIds);
+    }, [base, selectedChannel?.id]);
     const handleAddAsset = useCallback((newId) => {
         if (!newId)
             return;
@@ -85,7 +94,11 @@ export const CollectionsDetailView = () => {
                                                 : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.slug'), value: currentTranslationValue?.slug ?? '', onChange: (e) => {
                                                 handleSlugManualEdit();
                                                 setTranslationField('slug', e.target.value);
-                                            }, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId') ?? undefined, assetsIds: base.watch('assetIds') ?? undefined, onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) }), _jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) }), _jsx(FiltersCard, { currentFiltersValue: base.watch('filters') ?? undefined, onFiltersValueChange: (filters) => base.setField('filters', filters ?? []), inheritValue: base.watch('inheritFilters') ?? false, onInheritChange: (e) => base.setField('inheritFilters', e), errors: base.formState.errors?.filters?.message ? [base.formState.errors.filters.message] : undefined }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
+                                            }, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId') ?? undefined, assetsIds: base.watch('assetIds') ?? undefined, onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) }), id ? (_jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) })) : (_jsx(CustomCard, { title: t('details.channels.title'), icon: _jsx(CardIcons.shipping, {}), color: "green", children: _jsxs("div", { className: "flex flex-col gap-4 pt-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('details.channels.description') }), _jsx("div", { className: "grid gap-3 md:grid-cols-2", children: channels.map((channel) => {
+                                    const isCurrentChannel = channel.id === selectedChannel?.id;
+                                    const checked = isCurrentChannel || additionalChannelIds.includes(channel.id);
+                                    return (_jsxs("label", { className: "flex items-center gap-3 rounded-md border p-3 text-sm transition-colors hover:bg-muted/50", children: [_jsx(Checkbox, { checked: checked, disabled: isCurrentChannel, onCheckedChange: (value) => toggleAdditionalChannel(channel.id, !!value) }), _jsx("span", { className: "font-medium", children: channel.code }), isCurrentChannel && (_jsx("span", { className: "ml-auto rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground", children: t('details.channels.currentChannel') }))] }, channel.id));
+                                }) }), !channels.length && _jsx("p", { className: "text-sm text-muted-foreground", children: t('details.channels.noChannels') })] }) })), _jsx(FiltersCard, { currentFiltersValue: base.watch('filters') ?? undefined, onFiltersValueChange: (filters) => base.setField('filters', filters ?? []), inheritValue: base.watch('inheritFilters') ?? false, onInheritChange: (e) => base.setField('inheritFilters', e), errors: base.formState.errors?.filters?.message ? [base.formState.errors.filters.message] : undefined }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
                         base.setField('customFields', customFields);
                         if (translations)
                             base.setField('translations', translations);

package/dist/pages/collections/_components/FiltersCard.js

@@ -5,6 +5,44 @@ import { X } from 'lucide-react';
 import { FacetsSelector } from "./FacetsSelector";
 import { CombinationMode } from "./CombinationMode";
 import { VariantsSelector } from "./VariantsSelector";
+const getArgumentComponent = (argument) => argument?.ui?.component;
+const getArgumentOptions = (argument) => argument?.ui?.options ?? [];
+const stringifyDefaultValue = (value) => {
+    if (Array.isArray(value) || (typeof value === 'object' && value !== null)) {
+        return JSON.stringify(value);
+    }
+    if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+        return String(value);
+    }
+    return '';
+};
+const getDefaultArgumentValue = (argument) => {
+    if (argument.defaultValue !== undefined && argument.defaultValue !== null) {
+        return stringifyDefaultValue(argument.defaultValue);
+    }
+    const component = getArgumentComponent(argument);
+    if (argument.list || component === 'facet-value-form-input' || component === 'product-multi-form-input') {
+        return '[]';
+    }
+    if (component === 'select-form-input') {
+        return getArgumentOptions(argument)[0]?.value ?? '';
+    }
+    if (argument.type === 'boolean') {
+        return 'false';
+    }
+    return '';
+};
+const parseStringArrayValue = (value) => {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : [];
+    }
+    catch {
+        return [];
+    }
+};
 export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inheritValue, onInheritChange, errors, }) => {
     const { t } = useTranslation('collections');
     const codesTranslations = t('details.filters.labels.codes', { returnObjects: true });
@@ -27,14 +65,14 @@ export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inherit
     }, [fetchOptions]);
     const handleFiltersValueChange = useCallback((index, code, args) => {
         const correspondingFilter = filters.find((h) => h?.code === code);
-        if (correspondingFilter && currentFiltersValue) {
-            const newFiltersValue = [...currentFiltersValue];
+        if (correspondingFilter) {
+            const newFiltersValue = [...(currentFiltersValue || [])];
             newFiltersValue[index] = {
                 code: correspondingFilter.code,
                 arguments: args ||
                     correspondingFilter.args.map((a) => ({
                         name: a.name,
-                        value: 'false',
+                        value: getDefaultArgumentValue(a),
                     })),
             };
             onFiltersValueChange(newFiltersValue);
@@ -49,38 +87,40 @@ export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inherit
     }, [onFiltersValueChange, currentFiltersValue]);
     const handleAddFilter = useCallback(() => {
         const defaultFilter = filters[0];
+        if (!defaultFilter)
+            return;
         const newFiltersValue = [
             ...(currentFiltersValue || []),
             {
                 code: defaultFilter.code,
                 arguments: defaultFilter.args.map((a) => ({
                     name: a.name,
-                    value: 'false',
+                    value: getDefaultArgumentValue(a),
                 })),
             },
         ];
         onFiltersValueChange(newFiltersValue);
-    }, [onFiltersValueChange, currentFiltersValue]);
-    return (_jsx(CustomCard, { title: t('details.filters.title'), upperRight: _jsx(ErrorMessage, { errors: errors }), color: "orange", icon: _jsx(CardIcons.filter, {}), children: _jsx("div", { className: "flex- flex flex-wrap gap-4 xl:flex-nowrap", children: _jsxs("div", { className: "flex basis-full flex-col gap-4", children: [_jsxs("div", { className: "mb-2 flex basis-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: inheritValue, onCheckedChange: onInheritChange }), _jsx(Label, { children: t('details.filters.inherit') })] }), _jsx(Button, { className: "ml-auto", onClick: handleAddFilter, children: t('details.filters.addCondition') })] }), currentFiltersValue?.map((filter, index) => {
+    }, [filters, onFiltersValueChange, currentFiltersValue]);
+    return (_jsx(CustomCard, { title: t('details.filters.title'), upperRight: _jsx(ErrorMessage, { errors: errors }), color: "orange", icon: _jsx(CardIcons.filter, {}), children: _jsx("div", { className: "flex- flex flex-wrap gap-4 xl:flex-nowrap", children: _jsxs("div", { className: "flex basis-full flex-col gap-4", children: [_jsxs("div", { className: "mb-2 flex basis-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: inheritValue, onCheckedChange: onInheritChange }), _jsx(Label, { children: t('details.filters.inherit') })] }), _jsx(Button, { className: "ml-auto", onClick: handleAddFilter, disabled: filters.length === 0, title: filters.length === 0 ? t('details.filters.noAvailableConditions') : undefined, children: t('details.filters.addCondition') })] }), currentFiltersValue?.map((filter, index) => {
                         return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Separator, {}), _jsxs("div", { className: "flex w-1/2 items-end gap-1", children: [_jsx(SimpleSelect, { label: t('details.filters.condition'), value: filter ? filter.code : '', onValueChange: (e) => handleFiltersValueChange(index, e), options: allFiltersOptions }), filter?.code && (_jsx(Button, { variant: 'secondary', className: "p-2", onClick: (e) => {
                                                 e.preventDefault();
                                                 handleRemoveFilter(filter.code);
                                             }, children: _jsx(X, { size: 20 }) }))] }), _jsx("div", { className: "flex items-start justify-center gap-4", children: filter?.arguments.map((e, i) => {
                                         const _filter = filters?.find((f) => f.code === filter.code);
                                         const argument = _filter?.args.find((a) => a.name === e.name);
-                                        return argument?.ui?.component === 'facet-value-form-input' ? (_jsx(FacetsSelector, { value: JSON.parse(filter?.arguments[i].value), onChange: (e) => {
+                                        return getArgumentComponent(argument) === 'facet-value-form-input' ? (_jsx(FacetsSelector, { value: parseStringArrayValue(filter?.arguments[i].value), onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: JSON.stringify(e) };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            } })) : argument?.ui?.component === 'select-form-input' ? (_jsx(SimpleSelect, { label: argument?.label || argument.name, value: filter?.arguments[i].value, onValueChange: (e) => {
+                                            } })) : getArgumentComponent(argument) === 'select-form-input' ? (_jsx(SimpleSelect, { label: argument?.label || argument?.name || '', value: filter?.arguments[i].value, onValueChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: e };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            }, options: (argument?.ui?.options).map((o) => ({
+                                            }, options: getArgumentOptions(argument).map((o) => ({
                                                 label: o.value,
                                                 value: o.value,
-                                            })) || [] }, i)) : argument?.ui?.component === 'combination-mode-form-input' ? (_jsx(CombinationMode, { label: t('details.filters.labels.arguments.combination-mode'), value: filter?.arguments[i].value, onChange: (e) => {
+                                            })) || [] }, i)) : getArgumentComponent(argument) === 'combination-mode-form-input' ? (_jsx(CombinationMode, { label: t('details.filters.labels.arguments.combination-mode'), value: filter?.arguments[i].value, onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: e };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            } })) : argument?.ui?.component === 'product-multi-form-input' ? (_jsx(VariantsSelector, { type: argument?.ui?.selectionMode, label: argument?.label || argument.name, value: JSON.parse(filter?.arguments[i].value), onChange: (e) => {
+                                            } })) : getArgumentComponent(argument) === 'product-multi-form-input' ? (_jsx(VariantsSelector, { type: argument?.ui?.selectionMode, label: argument?.label || argument?.name || '', value: parseStringArrayValue(filter?.arguments[i].value), onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: JSON.stringify(e) };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
                                             } })) : argument?.type === 'int' ? (_jsx("div", { className: "flex basis-full", children: _jsx(Input, { type: "number", step: 0.01, label: argument?.label || argument.name, value: filter?.arguments[i].value, onChange: (e) => {

package/dist/pages/countries/Detail.js

@@ -34,7 +34,7 @@ export const CountriesDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ id });
     }, [remove, id]);
     return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "countries-detail-view", main: {
                 name: 'country',

package/dist/pages/customers/_components/PersonalDataCard.js

@@ -2,5 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation, CardIcons, CustomCard, Input } from '@deenruv/react-ui-devkit';
 export const PersonalDataCard = ({ setField, state }) => {
     const { t } = useTranslation('customers');
-    return (_jsx(CustomCard, { title: t('personalData.header'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex w-1/4 gap-3", children: _jsx(Input, { label: t('personalData.title'), value: state.title?.value, onChange: (e) => setField('title', e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.firstName'), value: state.firstName?.value, onChange: (e) => setField('firstName', e.target.value), errors: state.firstName?.errors, required: true }), _jsx(Input, { label: t('personalData.lastName'), value: state.lastName?.value, onChange: (e) => setField('lastName', e.target.value), errors: state.lastName?.errors, required: true })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.emailAddress'), value: state.emailAddress?.value, onChange: (e) => setField('emailAddress', e.target.value), errors: state.emailAddress?.errors, required: true }), _jsx(Input, { label: t('personalData.phoneNumber'), value: state.phoneNumber?.value, onChange: (e) => setField('phoneNumber', e.target.value) })] })] }) }));
+    const getFieldErrors = (fieldName) => state.formState.errors?.[fieldName]?.message ? [state.formState.errors[fieldName].message] : undefined;
+    return (_jsx(CustomCard, { title: t('personalData.header'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex w-1/4 gap-3", children: _jsx(Input, { label: t('personalData.title'), value: state.watch('title') ?? undefined, onChange: (e) => setField('title', e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.firstName'), value: state.watch('firstName') ?? undefined, onChange: (e) => setField('firstName', e.target.value), errors: getFieldErrors('firstName'), required: true }), _jsx(Input, { label: t('personalData.lastName'), value: state.watch('lastName') ?? undefined, onChange: (e) => setField('lastName', e.target.value), errors: getFieldErrors('lastName'), required: true })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.emailAddress'), value: state.watch('emailAddress') ?? undefined, onChange: (e) => setField('emailAddress', e.target.value), errors: getFieldErrors('emailAddress'), required: true }), _jsx(Input, { label: t('personalData.phoneNumber'), value: state.watch('phoneNumber') ?? undefined, onChange: (e) => setField('phoneNumber', e.target.value) })] })] }) }));
 };

package/dist/pages/extensions/Extensions.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, PageBlock, Separator, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePluginStore, } from '@deenruv/react-ui-devkit';
+import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, PageBlock, Separator, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePluginStore, } from '@deenruv/react-ui-devkit';
 import { BarChart3, Box, Check, ChevronDown, Code2, Cog, FileCode, Filter, Grid3X3, Info, LayoutDashboard, List, MessageSquare, Puzzle, RefreshCw, Search, Settings, Table, X, } from 'lucide-react';
 const getCategoryIcon = (category) => {
     switch (category) {
@@ -33,7 +33,7 @@ const getStatusBadge = (status) => {
     }
 };
 export const Extensions = () => {
-    const { allPlugins: _plugins, changePluginStatus } = usePluginStore();
+    const { allPlugins: _plugins } = usePluginStore();
     const [searchTerm, setSearchTerm] = useState('');
     const [categoryFilter, setCategoryFilter] = useState('all');
     const [statusFilter, setStatusFilter] = useState('all');
@@ -65,9 +65,5 @@ export const Extensions = () => {
                                 setCategoryFilter('all');
                                 setStatusFilter('all');
                                 setSearchTerm('');
-                            }, children: "Reset filters" })] })) : view === 'grid' ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsx(CardTitle, { className: "text-lg", children: plugin.name })] }), getStatusBadge(plugin.status)] }), _jsx(CardDescription, { className: "mt-2", children: plugin.description })] }), _jsxs(CardContent, { className: "pb-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Version:" }), _jsx("span", { children: plugin.version })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Author:" }), _jsx("span", { children: plugin.author })] })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tables?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tables" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tabs?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tabs" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.components?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Components" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.widgets?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Widgets" })] })] })] }), _jsxs(CardFooter, { className: "flex justify-between pt-2", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Info, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "View details" })] }) }), _jsx("div", { className: "flex gap-2", children: _jsx(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
-                                                changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
-                                            } }) })] })] }, plugin.name))) })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "grid grid-cols-12 gap-4 p-4 font-medium", children: [_jsx("div", { className: "col-span-4", children: "Name" }), _jsx("div", { className: "col-span-3", children: "Author" }), _jsx("div", { className: "col-span-1 text-center", children: "Version" }), _jsx("div", { className: "col-span-1 text-center", children: "Status" }), _jsx("div", { className: "col-span-3 text-right", children: "Actions" })] }), _jsx(Separator, {}), filteredPlugins.map((plugin, index) => (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-12 items-center gap-4 p-4", children: [_jsx("div", { className: "col-span-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: plugin.description })] })] }) }), _jsx("div", { className: "col-span-3", children: plugin.author }), _jsx("div", { className: "col-span-1 text-center", children: plugin.version }), _jsx("div", { className: "col-span-1 text-center", children: getStatusBadge(plugin.status) }), _jsxs("div", { className: "col-span-3 flex justify-end gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Settings, { className: "mr-2 size-3" }), "Configure"] }), _jsx(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
-                                                        changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
-                                                    } })] })] }), index < filteredPlugins.length - 1 && _jsx(Separator, {})] }, plugin.name)))] }))] }) }));
+                            }, children: "Reset filters" })] })) : view === 'grid' ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsx(CardTitle, { className: "text-lg", children: plugin.name })] }), getStatusBadge(plugin.status)] }), _jsx(CardDescription, { className: "mt-2", children: plugin.description })] }), _jsxs(CardContent, { className: "pb-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Version:" }), _jsx("span", { children: plugin.version })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Author:" }), _jsx("span", { children: plugin.author })] })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tables?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tables" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tabs?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tabs" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.components?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Components" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.widgets?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Widgets" })] })] })] }), _jsx(CardFooter, { className: "flex justify-between pt-2", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Info, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "View details" })] }) }) })] }, plugin.name))) })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "grid grid-cols-12 gap-4 p-4 font-medium", children: [_jsx("div", { className: "col-span-4", children: "Name" }), _jsx("div", { className: "col-span-3", children: "Author" }), _jsx("div", { className: "col-span-1 text-center", children: "Version" }), _jsx("div", { className: "col-span-1 text-center", children: "Status" }), _jsx("div", { className: "col-span-3 text-right", children: "Actions" })] }), _jsx(Separator, {}), filteredPlugins.map((plugin, index) => (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-12 items-center gap-4 p-4", children: [_jsx("div", { className: "col-span-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: plugin.description })] })] }) }), _jsx("div", { className: "col-span-3", children: plugin.author }), _jsx("div", { className: "col-span-1 text-center", children: plugin.version }), _jsx("div", { className: "col-span-1 text-center", children: getStatusBadge(plugin.status) }), _jsx("div", { className: "col-span-3 flex justify-end gap-2", children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Settings, { className: "mr-2 size-3" }), "Configure"] }) })] }), index < filteredPlugins.length - 1 && _jsx(Separator, {})] }, plugin.name)))] }))] }) }));
 };

package/dist/pages/facets/Detail.js

@@ -35,7 +35,7 @@ export const FacetsDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ id });
     }, [remove, id]);
     return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "facets-detail-view", main: {
                 name: 'facet',

package/dist/pages/orders/Detail.js

@@ -1,17 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { useParams } from 'react-router';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
 import { OrderSummary, RealizationCard, CustomerSelectCard, AddressCard, ShippingMethod, TaxSummary, OrderHistory, ProductsCard, TopActions, Payments, SurchargeCard, } from "./_components";
-import { useTranslation, useOrder, ORDER_STATE, EntityCustomFields, LoadingMask, DetailViewMarker, } from '@deenruv/react-ui-devkit';
+import { useTranslation, useOrder, ORDER_STATE, EntityCustomFields, LoadingMask, DetailViewMarker, apiClient, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Routes, } from '@deenruv/react-ui-devkit';
 import { PromotionsList } from "./_components/PromotionsList.js";
+import { toast } from 'sonner';
+const createDraftOrder = async () => {
+    const response = await apiClient('mutation')({
+        createDraftOrder: { id: true },
+    });
+    return response.createDraftOrder.id;
+};
+const DraftOrderCreateStart = () => {
+    const { t } = useTranslation('orders');
+    const navigate = useNavigate();
+    const [isCreating, setIsCreating] = useState(false);
+    const onCreate = async () => {
+        try {
+            setIsCreating(true);
+            const id = await createDraftOrder();
+            if (!id) {
+                toast.error(t('createDraftOrder.error'));
+                return;
+            }
+            navigate(Routes.orders.to(id), { viewTransition: true });
+        }
+        catch {
+            toast.error(t('createDraftOrder.error'));
+        }
+        finally {
+            setIsCreating(false);
+        }
+    };
+    return (_jsx("main", { className: "my-4", children: _jsx("div", { className: "mx-auto flex min-h-[70vh] w-full max-w-[720px] items-center px-4 2xl:px-8", children: _jsxs(Card, { className: "w-full", children: [_jsxs(CardHeader, { className: "space-y-2 text-center sm:text-left", children: [_jsx(CardTitle, { children: t('createDraftOrder.title') }), _jsx(CardDescription, { children: t('createDraftOrder.description') })] }), _jsx(CardContent, { children: _jsxs("div", { className: "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", children: [_jsx(Button, { variant: "outline", onClick: () => navigate(Routes.orders.list, { viewTransition: true }), disabled: isCreating, children: t('createDraftOrder.cancelButton') }), _jsx(Button, { onClick: onCreate, disabled: isCreating, children: isCreating ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }), t('createDraftOrder.creating')] })) : (t('createDraftOrder.startButton')) })] }) })] }) }) }));
+};
 export const OrdersDetailPage = () => {
     const { id } = useParams();
     const { t } = useTranslation('orders');
     const { order, mode, fetchOrder, loading } = useOrder();
+    const isCreateRoute = id === 'new';
     useEffect(() => {
-        if (id)
+        if (id && !isCreateRoute)
             fetchOrder(id);
-    }, [id]);
+    }, [id, isCreateRoute]);
+    if (isCreateRoute)
+        return _jsx(DraftOrderCreateStart, {});
     if (loading)
         return _jsx(LoadingMask, {});
     if (!order || !mode) {

package/dist/pages/orders/List.js

@@ -4,15 +4,8 @@ import { Routes, apiClient, DetailList, deepMerge, OrderStateBadge, priceFormatt
 import { useCallback } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
 const tableId = 'orders-list-view';
 const { selector } = ListLocations[tableId];
-const createDraftOrder = async () => {
-    const response = await apiClient('mutation')({
-        createDraftOrder: { id: true },
-    });
-    return response.createDraftOrder.id;
-};
 const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
     const response = await apiClient('query')({
         ['orders']: [
@@ -71,15 +64,7 @@ export const OrdersListPage = () => {
                 },
             },
         ], detailLinkColumn: "id", searchFields: ['code', 'customerLastName'], entityName: "Order", route: {
-            create: () => {
-                createDraftOrder()
-                    .then((id) => {
-                    if (!id)
-                        toast.error('Failed to create draft order');
-                    navigate(Routes.orders.to(id), { viewTransition: true });
-                })
-                    .catch(() => toast.error('Failed to create draft order'));
-            },
+            create: () => navigate(Routes.orders.new, { viewTransition: true }),
             edit: (id) => navigate(Routes.orders.to(id), { viewTransition: true }),
         }, tableId: tableId, fetch: fetch, createPermissions: [Permission.CreateOrder], deletePermissions: [Permission.DeleteOrder], hideColumns: ['active', 'totalQuantity', 'currencyCode'], additionalColumns: [
             {

package/dist/pages/orders/_components/CancelAndRefundDialog.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, } from '@deenruv/react-ui-devkit';
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Undo2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 import { ProductsTable } from "./";
 import { RefundPaymentCard } from "./RefundPaymentCard.js";
 export const CancelAndRefundDialog = ({ refundReason, setRefundReason, onConfirm, }) => {

package/dist/pages/orders/_components/OrderLineCustomFields.js

@@ -3,7 +3,7 @@ import { Button, Dialog, DialogContent, DialogTitle, ScrollArea, useOrder, useSe
 import { useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 export const OrderLineCustomFields = ({ line, order, mode }) => {
-    const { setModifiedOrder } = useOrder(({ setModifiedOrder }) => ({ setModifiedOrder }));
+    const setModifiedOrder = useOrder(({ setModifiedOrder }) => setModifiedOrder);
     const orderLineCustomFields = useServer(useShallow((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []));
     const { t } = useTranslation('common');
     const [open, setOpen] = useState(false);

package/dist/pages/orders/_components/ProductsTable.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OrderLineCustomFields } from "./OrderLineCustomFields.js";
-import { Checkbox, ImageWithPreview, Input, Label, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, } from '@deenruv/react-ui-devkit';
+import { Checkbox, ImageWithPreview, Input, Label, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Tag } from 'lucide-react';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 export const ProductsTable = ({ setRefundLines, refundLines }) => {
     const { t } = useTranslation('orders');
     const { mode, currentOrder } = useOrder();

package/dist/pages/orders/_components/RefundPaymentCard.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, CustomCard, Input, Label, priceFormatter, Textarea, useOrder } from '@deenruv/react-ui-devkit';
-import { useTranslation } from 'react-i18next';
+import { Checkbox, CustomCard, Input, Label, priceFormatter, Textarea, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 export const RefundPaymentCard = ({ refundReason, setRefundReason, cancelShipping, setCancelShipping, refundAmount, setRefundAmount, }) => {
     const { t } = useTranslation('orders');
     const { modifiedOrder } = useOrder();

package/dist/pages/payment-methods/Detail.js

@@ -44,7 +44,7 @@ export const PaymentMethodsDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ id });
     }, [remove, id]);
     return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "paymentMethods-detail-view", main: {
                 name: 'paymentMethod',

package/dist/pages/product-variants/List.js

@@ -24,10 +24,10 @@ const fetch = async ({ page, perPage, filter, filterOperator, sort }, additional
 const onRemove = async (items) => {
     try {
         const ids = items.map((item) => item.id);
-        const { deleteProducts } = await apiClient('mutation')({
-            deleteProducts: [{ ids }, { message: true, result: true }],
+        const { deleteProductVariants } = await apiClient('mutation')({
+            deleteProductVariants: [{ ids }, { message: true, result: true }],
         });
-        return !!deleteProducts.length;
+        return !!deleteProductVariants.length;
     }
     catch (error) {
         return error;