@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Checkbox, DialogContent, DialogHeader, DialogTitle, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, apiClient, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
+import { ArrowRight } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { CollectionListSelector } from "../../../graphql/collections";
+import { toast } from 'sonner';
+export const MoveCollectionsToCollections = ({ close, reject, resolve, data: selectedCollections }) => {
+    const [allCollections, setAllCollections] = useState([]);
+    useEffect(() => {
+        const fetchCollections = async () => {
+            const response = await apiClient('query')({
+                collections: [{ options: { topLevelOnly: false } }, { items: CollectionListSelector }],
+            });
+            setAllCollections(response.collections.items);
+        };
+        fetchCollections();
+    }, []);
+    const selectedTableData = useMemo(() => selectedCollections?.map(({ original }) => original), [selectedCollections]);
+    const { t } = useTranslation('collections');
+    const [rowSelection, setRowSelection] = useState({});
+    const [columnFilters, setColumnFilters] = useState([{ id: 'name', value: '' }]);
+    const moveCollection = async () => {
+        const selectedCollection = allCollectionsTable.getSelectedRowModel().rows[0].original.id;
+        const payload = selectedTableData?.map((collection) => ({
+            collectionId: collection.id,
+            parentId: selectedCollection,
+            index: 0,
+        }));
+        if (!payload) {
+            toast.error(t('moveCollectionsToCollections.selectCollection'));
+            return;
+        }
+        resolve(payload);
+    };
+    const columns = [
+        {
+            accessorKey: 'id',
+            enableHiding: false,
+            enableColumnFilter: false,
+            header: () => _jsx(TableLabel, { children: t('table.id') }),
+            meta: { isPlaceholder: true },
+            cell: ({ row }) => (_jsxs(Badge, { variant: "outline", className: "flex w-full items-center justify-center", children: [row.original?.id ?? row.id, _jsx(ArrowRight, { className: "pl-1", size: 16 })] })),
+        },
+        {
+            accessorKey: 'name',
+            header: () => _jsx(TableLabel, { children: t('table.name') }),
+            filterFn: 'includesString',
+        },
+        {
+            accessorKey: 'breadcrumbs',
+            header: () => _jsx(TableLabel, { children: t('table.breadcrumb') }),
+            accessorFn: (row) => row.breadcrumbs
+                ?.filter((crumb) => !crumb.slug.includes('root_collection'))
+                .reduce((acc, curr) => (acc += `/${curr.slug}`), ''),
+        },
+        {
+            accessorKey: 'slug',
+            header: () => _jsx(TableLabel, { children: t('table.slug') }),
+        },
+    ];
+    const allCollectionsColumns = [
+        {
+            id: 'select',
+            cell: ({ row, table }) => (_jsx("div", { className: "flex items-center gap-2", children: _jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => {
+                        table.toggleAllRowsSelected(false);
+                        row.toggleSelected(!!value);
+                    } }) })),
+            enableSorting: false,
+            enableHiding: false,
+            enableColumnFilter: false,
+            size: 28,
+            minSize: 28,
+            maxSize: 28,
+            meta: {
+                isFixedWidth: true,
+            },
+        },
+        ...columns,
+    ];
+    const allTableData = useMemo(() => allCollections.filter((row) => selectedTableData?.every((selectedRow) => selectedRow.id !== row.id)), [allCollections, selectedTableData]);
+    const selectedTable = useReactTable({
+        data: selectedTableData || [],
+        manualPagination: true,
+        enableExpanding: true,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const allCollectionsTable = useReactTable({
+        data: allTableData || [],
+        manualPagination: true,
+        enableExpanding: true,
+        columns: allCollectionsColumns,
+        getCoreRowModel: getCoreRowModel(),
+        onRowSelectionChange: setRowSelection,
+        getFilteredRowModel: getFilteredRowModel(),
+        state: {
+            rowSelection,
+            columnFilters,
+        },
+    });
+    return (_jsxs(DialogContent, { className: "flex h-[90dvh] w-[90vw] max-w-full flex-col", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx("span", { children: t('moveCollectionsToCollections.moveCollections') }) }) }), _jsxs("div", { className: "grid h-full min-h-0  grid-cols-[1fr_auto_1fr]", children: [_jsxs("div", { className: "flex h-full min-h-0 flex-col ", children: [_jsx("h1", { className: "p-4", children: t('moveCollectionsToCollections.selected') }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "bg-primary-foreground sticky top-0", children: selectedTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                                return (_jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                            }) }, headerGroup.id))) }), _jsx(TableBody, { children: selectedTable.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }), _jsx("div", { className: "mx-4 h-full w-px bg-stone-700" }), _jsxs("div", { className: "flex h-full min-h-0 flex-col ", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("h1", { className: "shrink-0 p-4", children: [" ", t('moveCollectionsToCollections.targetCollection')] }), _jsx(Input, { placeholder: t('moveCollectionsToCollections.searchByName'), className: "max-w-48", value: columnFilters[0].value, onChange: (e) => setColumnFilters([{ id: 'name', value: e.target.value }]) }), _jsx(Button, { className: "ml-auto", onClick: moveCollection, children: t('moveCollectionsToCollections.move') })] }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "bg-primary-foreground sticky top-0", children: allCollectionsTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                                return (_jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                            }) }, headerGroup.id))) }), _jsxs(TableBody, { children: [allCollectionsTable.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))), ' '] })] })] })] }), ' '] }));
+};

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

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge, Button, Checkbox, DialogContent, DialogHeader, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, channelSelector, apiClient, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
+import { ArrowRight } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+import { DialogTitle } from '@radix-ui/react-dialog';
+export const MoveEntityToChannels = ({ close, reject, resolve, data: selectedCollections }) => {
+    const selectedTableData = useMemo(() => selectedCollections?.map(({ original }) => original), [selectedCollections]);
+    const { t } = useTranslation('collections');
+    const [rowSelection, setRowSelection] = useState({});
+    const [columnFilters, setColumnFilters] = useState([
+        { id: 'code', value: '' },
+        { id: 'token', value: '' },
+    ]);
+    const [channels, setChannels] = useState({ channels: [] });
+    const moveCollectionToChannel = async () => {
+        const channelId = channelsTable.getSelectedRowModel().rows[0].original.id;
+        const ids = selectedTableData?.map((collection) => collection.id).filter((id) => !!id) ?? [];
+        resolve({ channelId, ids });
+    };
+    useEffect(() => {
+        (async () => {
+            const channelsResponse = await apiClient('query')({
+                channels: [{ options: { take: 10 } }, { items: channelSelector, totalItems: true }],
+                activeChannel: channelSelector,
+            });
+            setChannels({ channels: channelsResponse.channels.items, activeChannel: channelsResponse.activeChannel });
+        })();
+    }, []);
+    const columns = [
+        {
+            accessorKey: 'id',
+            enableHiding: false,
+            enableColumnFilter: false,
+            header: () => _jsx(TableLabel, { children: t('table.id') }),
+            meta: { isPlaceholder: true },
+            cell: ({ row }) => (_jsxs(Badge, { variant: "outline", className: "flex w-full items-center justify-center", children: [row.original?.id ?? row.id, _jsx(ArrowRight, { className: "pl-1", size: 16 })] })),
+        },
+        {
+            accessorKey: 'name',
+            header: () => _jsx(TableLabel, { children: t('table.name') }),
+        },
+        {
+            accessorKey: 'breadcrumbs',
+            header: () => _jsx(TableLabel, { children: t('table.breadcrumb') }),
+            accessorFn: (row) => row.breadcrumbs
+                ?.filter((crumb) => !crumb.slug.includes('root_collection'))
+                .reduce((acc, curr) => (acc += `/${curr.slug}`), ''),
+        },
+        {
+            accessorKey: 'slug',
+            header: () => _jsx(TableLabel, { children: t('table.slug') }),
+        },
+    ];
+    const channelsColumns = [
+        {
+            id: 'select',
+            cell: ({ row, table }) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Checkbox, { disabled: row.original.id === channels.activeChannel?.id, checked: row.getIsSelected(), onCheckedChange: (value) => {
+                            table.toggleAllRowsSelected(false);
+                            row.toggleSelected(!!value);
+                        } }), ' '] })),
+            enableSorting: false,
+            enableHiding: false,
+            enableColumnFilter: false,
+            size: 28,
+            minSize: 28,
+            maxSize: 28,
+            meta: {
+                isFixedWidth: true,
+            },
+        },
+        {
+            accessorKey: 'code',
+            header: () => _jsx(TableLabel, { children: t('moveCollectionsToChannels.table.code') }),
+        },
+        {
+            accessorKey: 'token',
+            header: () => _jsx(TableLabel, { children: t('moveCollectionsToChannels.table.token') }),
+        },
+        {
+            accessorKey: 'active',
+            header: () => null,
+            cell: ({ row }) => row.original.id === channels.activeChannel?.id ? (_jsx(Badge, { variant: "outline", className: "border-green-500", children: t('moveCollectionsToChannels.table.active') })) : null,
+        },
+    ];
+    const selectedTable = useReactTable({
+        data: selectedTableData || [],
+        manualPagination: true,
+        enableExpanding: true,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+    const channelsTable = useReactTable({
+        data: channels.channels || [],
+        manualPagination: true,
+        enableExpanding: true,
+        columns: channelsColumns,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onRowSelectionChange: setRowSelection,
+        state: {
+            rowSelection,
+            columnFilters,
+        },
+    });
+    const handleInputChange = (id, value) => setColumnFilters((p) => {
+        const filtered = p.filter((filter) => filter.id !== id);
+        return [...filtered, { id, value }];
+    });
+    return (_jsxs(DialogContent, { className: "flex h-[90dvh] w-[90vw] max-w-full flex-col", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: _jsx("span", { children: t('moveCollectionsToChannels.moveCollections') }) }) }), _jsxs("div", { className: "grid h-full min-h-0  grid-cols-[1fr_auto_1fr]", children: [_jsxs("div", { className: "flex h-full min-h-0 flex-col ", children: [_jsx("h1", { className: "p-4", children: t('moveCollectionsToChannels.selected') }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "bg-primary-foreground sticky top-0", children: selectedTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                                return (_jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                            }) }, headerGroup.id))) }), _jsx(TableBody, { children: selectedTable.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }), _jsx("div", { className: "mx-4 h-full w-px bg-stone-700" }), _jsxs("div", { className: "flex h-full min-h-0 flex-col ", children: [_jsxs("div", { className: "flex items-center  gap-2", children: [_jsx("h1", { className: "p-4", children: t('moveCollectionsToChannels.availableChannels') }), _jsx(Input, { placeholder: t('moveCollectionsToChannels.searchByCode'), className: "max-w-48", value: columnFilters.find((filter) => filter.id === 'code')?.value ?? '', onChange: (e) => handleInputChange('code', e.target.value) }), _jsx(Input, { placeholder: t('moveCollectionsToChannels.searchByToken'), className: "max-w-48", value: columnFilters.find((filter) => filter.id === 'token')?.value ?? '', onChange: (e) => handleInputChange('token', e.target.value) }), _jsx(Button, { className: "ml-auto", onClick: moveCollectionToChannel, children: t('moveCollectionsToChannels.move') })] }), _jsxs(Table, { children: [_jsx(TableHeader, { className: "bg-primary-foreground sticky top-0", children: channelsTable.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                                return (_jsx(TableHead, { children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                            }) }, headerGroup.id))) }), _jsxs(TableBody, { children: [channelsTable.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && 'selected', children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))), ' '] })] })] })] })] }));
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Routes, Button, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SimpleTooltip, useTranslation, } from '@deenruv/react-ui-devkit';
+import { LanguageCode } from '@deenruv/admin-types';
+import { format } from 'date-fns';
+import { ChevronLeft } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+export const PageHeader = ({ collection, editMode, buttonDisabled, onCreate, onEdit, currentTranslationLng, onCurrentLanguageChange, }) => {
+    const navigate = useNavigate();
+    const { t } = useTranslation('collections');
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Button, { variant: "outline", size: "icon", className: "size-7", onClick: () => navigate(Routes.collections.list, { viewTransition: true }), children: _jsx(ChevronLeft, { className: "size-4" }) }), _jsx("h1", { className: "flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0", children: editMode ? collection?.name : t('create') })] }), _jsxs("div", { className: "ml-auto flex gap-3", children: [_jsxs(Select, { defaultValue: LanguageCode.en, value: currentTranslationLng, onValueChange: onCurrentLanguageChange, children: [_jsx(SelectTrigger, { className: "w-[180px]", children: _jsx(SelectValue, { placeholder: "Theme" }) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: LanguageCode.en, children: LanguageCode.en }), _jsx(SelectItem, { value: LanguageCode.pl, children: LanguageCode.pl })] })] }), _jsx(SimpleTooltip, { content: buttonDisabled ? (editMode ? t('noChangesTooltip') : t('buttonDisabledTooltip')) : undefined, children: _jsx(Button, { disabled: buttonDisabled, onClick: editMode ? onEdit : onCreate, children: editMode ? t('edit') : t('create') }) })] })] }), editMode && collection && (_jsxs("div", { className: "flex flex-row flex-wrap gap-x-4 gap-y-2", children: [_jsx(Label, { className: "text-muted-foreground", children: t('baseInfoId', { value: collection.id }) }), _jsx(Label, { className: "text-muted-foreground", children: "|" }), _jsx(Label, { className: "text-muted-foreground", children: t('baseInfoCreated', { value: format(new Date(collection.createdAt), 'dd.MM.yyyy hh:mm') }) }), _jsx(Label, { className: "text-muted-foreground", children: "|" }), _jsx(Label, { className: "text-muted-foreground", children: t('baseInfoUpdated', { value: format(new Date(collection.updatedAt), 'dd.MM.yyyy hh:mm') }) })] }))] }));
+};

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeleteCollectionsFromChannel } from './DeleteCollectionsFromChannel.js';
+import { useTranslation, DialogHeader } from '@deenruv/react-ui-devkit';
+import { DialogDescription, DialogTitle } from '@radix-ui/react-dialog';
+import { DuplicateEntity } from "../../../components/DuplicateEntry";
+export const SelectedCollectionsModalContent = ({ collectionAction, allCollections, selectedCollections, refetchCollections, onClose, }) => {
+    const { t } = useTranslation('collections');
+    switch (collectionAction) {
+        case 'DELETE_FROM_CHANNEL':
+            return (_jsx(DeleteCollectionsFromChannel, { onClose: onClose, collectionsToRemove: selectedCollections.map((c) => ({ name: c.original.name, id: c.original.id })), refetchCollections: refetchCollections }));
+        case 'COPY': {
+            const inputs = selectedCollections.map(({ original }) => ({
+                entityId: original.id,
+                entityName: 'Collection',
+                duplicatorInput: { code: 'collection-duplicator', arguments: [] },
+            }));
+            return (_jsx(DuplicateEntity, { inputs: inputs, onClose: onClose, onSuccess: refetchCollections, children: _jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('duplicateCollection') }), _jsx(DialogDescription, { children: selectedCollections.map(({ original }) => (_jsxs("div", { children: ["- ", original.name] }, original.id))) })] }) }));
+        }
+        default:
+            return null;
+    }
+};

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, MultipleSelector, apiClient } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+export const VariantsSelector = ({ type, label, value, singleSelection, onChange, }) => {
+    const [options, setOptions] = useState();
+    const fetchVariants = useCallback(async () => {
+        const response = await apiClient('query')({
+            productVariants: [
+                {},
+                {
+                    items: {
+                        name: true,
+                        id: true,
+                    },
+                },
+            ],
+        });
+        setOptions(response.productVariants.items.map((v) => ({ label: v.name, value: v.id })));
+    }, []);
+    const fetchProducts = useCallback(async () => {
+        const response = await apiClient('query')({
+            products: [
+                {},
+                {
+                    items: {
+                        name: true,
+                        id: true,
+                    },
+                },
+            ],
+        });
+        setOptions(response.products.items.map((v) => ({ label: v.name, value: v.id })));
+    }, []);
+    useEffect(() => {
+        type === 'product' ? fetchProducts() : fetchVariants();
+    }, [type, fetchProducts, fetchVariants]);
+    return (_jsxs("div", { className: "flex basis-full flex-col gap-2", children: [_jsx(Label, { children: label }), _jsx(MultipleSelector, { options: options, value: !value
+                    ? []
+                    : value.map((id) => ({
+                        label: options?.find((o) => o.value === id)?.label || id,
+                        value: id,
+                    })), placeholder: label, onChange: (e) => onChange(e.map((e) => e.value)), ...(singleSelection && { maxSelected: 1 }), hideClearAllButton: true })] }));
+};

package/dist/pages/collections/consts.js

@@ -0,0 +1,7 @@
+export var CollectionAction;
+(function (CollectionAction) {
+    CollectionAction["MOVE"] = "MOVE";
+    CollectionAction["COPY"] = "COPY";
+    CollectionAction["ASSING_TO_CHANNGEL"] = "ASSING_TO_CHANNGEL";
+    CollectionAction["DELETE_FROM_CHANNEL"] = "DELETE_FROM_CHANNEL";
+})(CollectionAction || (CollectionAction = {}));

package/dist/pages/collections/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';

package/dist/pages/countries/Detail.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { CountryDetailView } from "./_components/CountryDetailView.js";
+import { useCallback } from 'react';
+const CreateCountryMutation = getMutation('createCountry');
+const EditCountryMutation = getMutation('updateCountry');
+const DeleteCountryMutation = getMutation('deleteCountry');
+export const CountriesDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('countries');
+    const [update] = useMutation(EditCountryMutation);
+    const [create] = useMutation(CreateCountryMutation);
+    const [remove] = useMutation(DeleteCountryMutation);
+    const { translationsValidator, stringValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Code is required.');
+        }
+        const inputData = {
+            code: data.code.validatedValue,
+            enabled: data.enabled?.validatedValue || data.enabled?.initialValue,
+            translations: data.translations?.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({ input: { id, ...inputData } });
+        }
+        else {
+            return create({ input: inputData });
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ input: { 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',
+                label: 'Country',
+                component: _jsx(CountryDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateCountryInput',
+                    keys: ['code', 'enabled', 'translations'],
+                    config: {
+                        enabled: {
+                            initialValue: true,
+                        },
+                        code: stringValidator(t('validation.required')),
+                        translations: translationsValidator,
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/countries/List.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { Routes, apiClient, DetailList, deepMerge, ListLocations } from '@deenruv/react-ui-devkit';
+const tableId = 'countries-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['countries']: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['countries'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteCountries } = await apiClient('mutation')({
+            deleteCountries: [
+                { ids },
+                {
+                    message: true,
+                    result: true,
+                },
+            ],
+        });
+        return !!deleteCountries.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const CountriesListPage = () => {
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'name', operator: 'StringOperators' },
+            { key: 'enabled', operator: 'BooleanOperators' },
+            { key: 'code', operator: 'StringOperators' },
+        ], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['customFields', 'translations'], entityName: 'Country', route: Routes['countries'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateCountry], deletePermissions: [Permission.DeleteCountry] }));
+};

package/dist/pages/countries/_components/CountryDetailView.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { Input, Label, Switch, useSettings, useDetailView, DetailViewMarker, CustomCard, CardIcons, setInArrayBy, useTranslation, } from '@deenruv/react-ui-devkit';
+export const CountryDetailView = () => {
+    const { form, entity, fetchEntity, id } = useDetailView('countries-detail-view', 'CreateCountryInput', 'code', 'enabled', 'translations', 'customFields');
+    const { base: { setField, state }, } = form;
+    const { t } = useTranslation('countries');
+    const { translationsLanguage: currentTranslationLng } = useSettings();
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    useEffect(() => {
+        (async () => {
+            const resp = await fetchEntity();
+            if (!resp)
+                return;
+            setField('code', resp.code);
+            setField('translations', resp.translations);
+            setField('enabled', resp.enabled);
+        })();
+    }, []);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+            [field]: e,
+            languageCode: currentTranslationLng,
+        }));
+    }, [currentTranslationLng, translations]);
+    return (_jsx("main", { className: "min-h-96", children: _jsxs("div", { className: "mx-auto mt-2 flex w-full max-w-[1440px] flex-col gap-4 2xl:px-8", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex items-start gap-3", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: state.enabled?.value, onCheckedChange: (e) => setField('enabled', e) }), _jsx(Label, { children: t('details.basic.enabled') })] })] }) }), _jsx(DetailViewMarker, { position: 'countries-detail-view' })] }) }));
+};

package/dist/pages/countries/index.js

@@ -0,0 +1,2 @@
+export * from './Detail';
+export * from './List';

package/dist/pages/customer-groups/Detail.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, useMutation } from '@deenruv/react-ui-devkit';
+import { CustomerGroupsDetailView } from './_components/CustomerGroupsDetailView';
+import { typedGql, scalars, $, Permission } from '@deenruv/admin-types';
+import { useCallback } from 'react';
+const CreateCustomerGroupMutation = typedGql('mutation', { scalars })({
+    createCustomerGroup: [
+        {
+            input: $('input', 'CreateCustomerGroupInput!'),
+        },
+        { id: true },
+    ],
+});
+const EditCustomerGroupMutation = typedGql('mutation', { scalars })({
+    updateCustomerGroup: [
+        {
+            input: $('input', 'UpdateCustomerGroupInput!'),
+        },
+        { id: true },
+    ],
+});
+const DeleteCustomerGroupMutation = typedGql('mutation', { scalars })({
+    deleteCustomerGroup: [
+        {
+            id: $('id', 'ID!'),
+        },
+        { message: true, result: true },
+    ],
+});
+export const CustomerGroupsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditCustomerGroupMutation);
+    const [create] = useMutation(CreateCustomerGroupMutation);
+    const [remove] = useMutation(DeleteCustomerGroupMutation);
+    const { nameValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.name?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            name: data.name.validatedValue,
+            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+        };
+        if (id) {
+            return update({ input: { id, ...inputData } });
+        }
+        else {
+            return create({ input: inputData });
+        }
+    }, [id, update, create]);
+    const onDeleteHandler = useCallback(() => {
+        if (!id) {
+            throw new Error('Could not find the id.');
+        }
+        return remove({ id });
+    }, [remove, id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "customerGroups-detail-view", main: {
+                name: 'customerGroup',
+                label: 'Customer Group',
+                component: _jsx(CustomerGroupsDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateCustomerGroupInput',
+                    keys: ['name'],
+                    config: {
+                        name: nameValidator,
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            }, permissions: {
+                create: Permission.CreateCustomerGroup,
+                edit: Permission.UpdateCustomerGroup,
+                delete: Permission.DeleteCustomerGroup,
+            } }) }));
+};

package/dist/pages/customer-groups/List.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Routes, apiClient, DetailList, deepMerge, ListLocations } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'customerGroups-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        customerGroups: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response.customerGroups;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteCustomerGroups } = await apiClient('mutation')({
+            deleteCustomerGroups: [
+                { ids },
+                {
+                    message: true,
+                    result: true,
+                },
+            ],
+        });
+        return !!deleteCustomerGroups.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const CustomerGroupsListPage = () => (_jsx(DetailList, { filterFields: [{ key: 'name', operator: 'StringOperators' }], detailLinkColumn: "id", searchFields: ['name'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'CustomerGroupList', route: Routes['customerGroups'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateCustomerGroup], deletePermissions: [Permission.DeleteCustomerGroup] }));

package/dist/pages/customer-groups/_components/CustomerGroupsDetailView.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { EntityCustomFields, Input, useSettings, useDetailView, DetailViewMarker, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+const CUSTOMER_GROUPS_FORM_KEYS = ['CreateCustomerGroupInput', 'name', 'customFields'];
+export const CustomerGroupsDetailView = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { t } = useTranslation('customerGroups');
+    const { id, form, entity, fetchEntity } = useDetailView('customerGroups-detail-view', ...CUSTOMER_GROUPS_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('name', res.name);
+        })();
+    }, [contentLng]);
+    return (_jsx("main", { className: "min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('basic.header'), icon: _jsx(CardIcons.basic, {}), children: _jsx(Input, { className: "w-1/2", label: t('basic.name'), value: state.name?.value, onChange: (e) => setField('name', e.target.value), errors: state.name?.errors, required: true }) }), _jsx(DetailViewMarker, { position: 'customerGroups-detail-view' }), _jsx(EntityCustomFields, { entityName: "customerGroup", id: id, hideButton: true, onChange: (customFields) => {
+                        setField('customFields', customFields);
+                    }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } })] }) }));
+};

package/dist/pages/customer-groups/index.js

@@ -0,0 +1,2 @@
+export * from './Detail.js';
+export * from './List.js';