@deenruv/admin-dashboard 1.0.0

package/dist/pages/collections/Detail.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, } from '@deenruv/react-ui-devkit';
+import { CollectionsDetailView } from "./_components/CollectionDetailView.js";
+const CreateCollectionMutation = getMutation('createCollection');
+const EditCollectionMutation = getMutation('updateCollection');
+const DeleteCollectionMutation = getMutation('deleteCollection');
+export const CollectionsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditCollectionMutation);
+    const [create] = useMutation(CreateCollectionMutation);
+    const [remove] = useMutation(DeleteCollectionMutation);
+    const { configurableOperationArrayValidator, translationsValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        const inputData = {
+            assetIds: data.assetIds?.validatedValue,
+            featuredAssetId: data.featuredAssetId?.validatedValue,
+            isPrivate: data.isPrivate?.validatedValue,
+            inheritFilters: data.inheritFilters?.validatedValue,
+            filters: data.filters.validatedValue,
+            translations: data.translations.validatedValue.map((t) => ({
+                description: t.description || '',
+                name: t.name || '',
+                languageCode: t.languageCode,
+                slug: t.slug || '',
+            })),
+        };
+        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: "collections-detail-view", main: {
+                name: 'collection',
+                label: 'Collection',
+                component: _jsx(CollectionsDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateCollectionInput',
+                    keys: ['assetIds', 'featuredAssetId', 'filters', 'inheritFilters', 'isPrivate', 'parentId', 'translations'],
+                    config: {
+                        isPrivate: {
+                            initialValue: false,
+                        },
+                        inheritFilters: {
+                            initialValue: true,
+                        },
+                        translations: translationsValidator,
+                        filters: configurableOperationArrayValidator(),
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

package/dist/pages/collections/List.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowDownSquareIcon, ArrowUpSquareIcon, Folder, FolderOpen, XSquareIcon } 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';
+const tableId = 'collections-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['collections']: [
+            {
+                options: {
+                    take: perPage,
+                    skip: (page - 1) * perPage,
+                    filterOperator: filterOperator,
+                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                    ...(filter && { filter }),
+                    topLevelOnly: true,
+                },
+            },
+            { items: deepMerge(selector, additionalSelector ?? {}), totalItems: true },
+        ],
+    });
+    return response['collections'];
+};
+export const CollectionsListPage = () => {
+    return (_jsx(DetailList, { filterFields: [], detailLinkColumn: "id", searchFields: ['name', 'code'], hideColumns: ['translations', 'breadcrumbs', 'description'], getSubRows: (row) => row.children, additionalColumns: [
+            {
+                accessorKey: 'children',
+                header: 'Children',
+                cell: ({ row, getValue }) => {
+                    const value = getValue();
+                    const isExpanded = row.getIsExpanded();
+                    return (_jsx("div", { style: { paddingLeft: `${row.depth * 2}rem` }, children: _jsx(ListBadge, { paddingLeft: `${row.depth * 2}rem`,
+                            onClick: row.getToggleExpandedHandler(),
+                            style: { cursor: 'pointer' }, children: isExpanded ? (_jsx(FolderOpen, { size: 16 })) : value?.length > 0 ? (_jsx(Folder, { size: 16 })) : (_jsx(XSquareIcon, { size: 16 })) }) }));
+                },
+            },
+            {
+                accessorKey: 'productVariants',
+                header: 'Products',
+                cell: ({ row, getValue }) => {
+                    const value = getValue();
+                    return value?.totalItems > 0 ? (_jsx(CollectionProductVariantsDrawer, { collectionId: row.original.id, collectionName: row.original.name, count: row.original.productVariants.totalItems, children: _jsx(DrawerTrigger, { className: "w-full", children: _jsxs(ListBadge, { children: [value.totalItems, _jsx(ArrowRight, { className: "pl-1", size: 16 })] }) }) })) : (_jsx(ListBadge, { children: value?.totalItems || 0 }));
+                },
+            },
+        ], additionalBulkActions: [
+            ...EntityChannelManagementBulkAction(tableId),
+            EntityFacetManagementBulkAction(tableId),
+            {
+                icon: _jsx(FolderOpen, { size: 16 }),
+                label: 'Przenieś zaznaczone kolekcje',
+                onClick: async ({ table, data, refetch }) => {
+                    const selectedRows = table.getSelectedRowModel().flatRows.map((row) => row);
+                    if (selectedRows.length === 0) {
+                        return { error: 'Nie zaznaczono żadnej kolekcji' };
+                    }
+                    try {
+                        // const result = await createDialogFromComponent(MoveCollectionsToCollections, selectedRows);
+                    }
+                    catch (e) {
+                        console.log(e);
+                    }
+                    return { success: '' };
+                },
+            },
+        ], additionalRowActions: [
+            {
+                icon: _jsx(ArrowUpSquareIcon, { size: 16 }),
+                label: 'Przenieś kolekcje',
+                onClick: async ({ row, refetch }) => {
+                    try {
+                        await apiClient('mutation')({
+                            moveCollection: [
+                                {
+                                    input: {
+                                        collectionId: row.original.id,
+                                        index: row.original.position - 1,
+                                        parentId: row.original.parentId,
+                                    },
+                                },
+                                { id: true },
+                            ],
+                        });
+                        refetch();
+                        return { success: '' };
+                    }
+                    catch {
+                        return { error: '' };
+                    }
+                },
+            },
+            {
+                icon: _jsx(ArrowDownSquareIcon, { size: 16 }),
+                label: 'Przenieś kolekcje',
+                onClick: async ({ row, refetch }) => {
+                    try {
+                        await apiClient('mutation')({
+                            moveCollection: [
+                                {
+                                    input: {
+                                        collectionId: row.original.id,
+                                        index: row.original.position + 1,
+                                        parentId: row.original.parentId,
+                                    },
+                                },
+                                { id: true },
+                            ],
+                        });
+                        refetch();
+                        return { success: '' };
+                    }
+                    catch {
+                        return { error: '' };
+                    }
+                },
+            },
+            {
+                icon: _jsx(FolderOpen, { size: 16 }),
+                label: 'Przenieś kolekcje',
+                onClick: async ({ row, refetch }) => {
+                    try {
+                        // const result = await createDialogFromComponent(MoveCollectionsToCollections, [row]);
+                    }
+                    catch (e) {
+                        console.log(e);
+                    }
+                    return { success: '' };
+                },
+            },
+        ], entityName: 'Collection', route: Routes['collections'], tableId: tableId, fetch: fetch, onRemove: async () => {
+            return true;
+        }, createPermissions: [Permission.CreateCollection], deletePermissions: [Permission.DeleteCollection] }));
+};

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { EntityCustomFields, Input, Label, Switch, CustomCard, CardIcons, useDetailView, useSettings, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, } from '@deenruv/react-ui-devkit';
+import { FiltersCard } from "./FiltersCard";
+import { ContentsCard } from "./ContentsCard";
+import { AssetsCard } from "../../products/_components/AssetsCard.js";
+import { useNavigate } from 'react-router-dom';
+export const CollectionsDetailView = () => {
+    const { t } = useTranslation('collections');
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
+    const navigate = useNavigate();
+    const { form, fetchEntity, entity, id } = useDetailView('collections-detail-view', 'CreateCollectionInput', 'translations', 'assetIds', 'featuredAssetId', 'isPrivate', 'inheritFilters', 'filters', 'customFields');
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const resp = await fetchEntity();
+            if (!resp)
+                return;
+            setField('translations', resp.translations);
+            setField('assetIds', resp.assets.map((a) => a.id));
+            setField('featuredAssetId', resp.featuredAsset?.id);
+            setField('isPrivate', resp.isPrivate);
+            setField('inheritFilters', resp.inheritFilters);
+            setField('filters', resp.filters.map((f) => ({ code: f.code, arguments: f.args })));
+        })();
+    }, [contentLng, selectedChannel?.id]);
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === contentLng);
+    const handleAddAsset = useCallback((newId) => {
+        if (!newId)
+            return;
+        const currentIds = state.assetIds?.value || [];
+        setField('assetIds', [...currentIds, newId]);
+    }, [state.assetIds?.value, setField]);
+    const setTranslationField = useCallback((field, e) => {
+        if (!currentTranslationValue)
+            return;
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
+            ...currentTranslationValue,
+            [field]: e,
+            languageCode: contentLng,
+        }));
+    }, [contentLng, translations]);
+    return (_jsx("main", { children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", 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.slug'), value: currentTranslationValue?.slug ?? undefined, onChange: (e) => 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: state.isPrivate?.value ?? undefined, onCheckedChange: (e) => 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 ?? undefined, onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value ?? undefined, assetsIds: state.assetIds?.value ?? undefined, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) }), _jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) }), _jsx(FiltersCard, { currentFiltersValue: state.filters?.value ?? undefined, onFiltersValueChange: (filters) => setField('filters', filters ?? []), inheritValue: state.inheritFilters?.value ?? undefined, onInheritChange: (e) => setField('inheritFilters', e), errors: state.filters?.errors }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
+                        setField('customFields', customFields);
+                        if (translations)
+                            setField('translations', translations);
+                    }, initialValues: entity && 'customFields' in entity
+                        ? { customFields: entity.customFields, translations: entity.translations }
+                        : { customFields: {} } }), id && _jsx(ContentsCard, { collectionId: id })] }) }));
+};

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, SelectContent, SelectTrigger, SelectValue, Select, SelectItem, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useMemo, useState } from 'react';
+import { ContentsTable } from "./ContentsTable";
+const filterOptions = ['name', 'sku', 'id'];
+export const CollectionProductVariantsDrawer = ({ collectionId, collectionName, children, count, }) => {
+    const [filter, setFilter] = useState({});
+    const { t } = useTranslation(['collections', 'common']);
+    const firstFilterKey = useMemo(() => Object.keys(filter ?? {})[0], [filter]);
+    const handleFilterValue = (key) => {
+        switch (key) {
+            case 'name': {
+                return (_jsx(Input, { placeholder: `${t('drawer.filter.name')}..`, onChange: (e) => setFilter({ [key]: e.target.value ? { contains: e.target.value } : {} }) }, key));
+            }
+            case 'sku': {
+                return (_jsx(Input, { placeholder: `${t('drawer.filter.sku')}..`, onChange: (e) => setFilter({ [key]: e.target.value ? { contains: e.target.value } : {} }) }, key));
+            }
+            case 'id': {
+                return (_jsx(Input, { placeholder: `${t('drawer.filter.id')}..`, onChange: (e) => setFilter({ [key]: e.target.value ? { eq: e.target.value } : {} }) }, key));
+            }
+            default:
+                return null;
+        }
+    };
+    return (_jsx("div", { children: _jsxs(Drawer, { direction: "right", children: [children, _jsxs(DrawerContent, { className: "left-auto right-0 top-0 mt-0 w-[85vw]", children: [_jsxs(DrawerHeader, { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "shrink-0", children: [_jsx(DrawerTitle, { children: t('drawer.title', { collectionName, interpolation: { escapeValue: false } }) }), _jsx(DrawerDescription, { children: t('drawer.count', { count }) }), ' '] }), _jsxs(Select, { value: firstFilterKey, onValueChange: (e) => {
+                                                setFilter({ [e]: {} });
+                                            }, children: [_jsx(SelectTrigger, { className: "w-[280px]", children: _jsx(SelectValue, { placeholder: t('drawer.filter.title') }) }), _jsx(SelectContent, { children: filterOptions.map((i) => (_jsx(SelectItem, { className: "cursor-pointer", value: i, children: t(`drawer.filter.labels.${i}`) }, i))) })] }), filter && handleFilterValue(firstFilterKey)] }), _jsx(DrawerClose, { children: _jsx(Button, { children: t('drawer.close') }) })] }), _jsx(ContentsTable, { collectionId: collectionId, filter: filter })] })] }) }));
+};

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Label, ToggleGroup, ToggleGroupItem } from '@deenruv/react-ui-devkit';
+export const CombinationMode = ({ label, value, onChange }) => {
+    const { t } = useTranslation('collections');
+    return (_jsxs("div", { className: "flex basis-full flex-col gap-3", children: [_jsx(Label, { children: label }), _jsxs(ToggleGroup, { type: "single", value: value, onValueChange: onChange, className: " justify-start", children: [_jsx(ToggleGroupItem, { variant: 'outline', size: 'sm', value: 'true', children: t('details.filters.labels.arguments.and') }), _jsx(ToggleGroupItem, { variant: 'outline', size: 'sm', value: 'false', children: t('details.filters.labels.arguments.or') })] })] }));
+};

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CustomCard, CardIcons, DetailList, Routes, apiClient, deepMerge, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { useCallback } from 'react';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { CollectionProductVariantsSelector } from "../../../graphql/collections.js";
+export const ContentsCard = ({ collectionId }) => {
+    const { t } = useTranslation('collections');
+    const fetch = useCallback(async ({ page, perPage, filter, filterOperator, sort }, customFieldsSelector, additionalSelector) => {
+        const selector = deepMerge(CollectionProductVariantsSelector, additionalSelector ?? {});
+        const response = await apiClient('query')({
+            collection: [
+                { id: collectionId },
+                {
+                    productVariants: [
+                        {
+                            options: {
+                                take: perPage,
+                                skip: (page - 1) * perPage,
+                                filterOperator: filterOperator,
+                                sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                                ...(filter && { filter }),
+                            },
+                        },
+                        { totalItems: true, items: selector },
+                    ],
+                },
+            ],
+        });
+        return (response['collection']?.productVariants ?? {
+            items: [],
+            totalItems: 0,
+        });
+    }, [collectionId]);
+    return (_jsx(CustomCard, { title: t('details.contents.title'), color: "green", icon: _jsx(CardIcons.group, {}), children: _jsx(DetailList, { noPaddings: true, detailLinkColumn: "id", filterFields: [{ key: 'id', operator: 'IDOperators' }], searchFields: ['code', 'name'], hideColumns: ['customFields', 'product', 'updatedAt', 'createdAt'], entityName: 'Product', route: Routes['products'], tableId: "products-list-view", fetch: fetch, noCreateButton: true, createPermissions: [Permission.CreateProduct], deletePermissions: [Permission.DeleteProduct], additionalColumns: [
+                {
+                    accessorKey: 'product',
+                    enableSorting: false,
+                    enableColumnFilter: false,
+                    header: () => _jsx(TableLabel, { children: t('table.product') }),
+                    cell: ({ row }) => _jsx("div", { className: "flex gap-1", children: row.original.product.name }),
+                },
+            ] }) }));
+};

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

@@ -0,0 +1,102 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Skeleton, Routes, EmptyState, apiClient, useDetailListHook, deepMerge, ImageWithPreview, useTranslation, TableLabel, } from '@deenruv/react-ui-devkit';
+import { CollectionProductVariantsSelector } from "../../../graphql/collections";
+import { SortOrder } from '@deenruv/admin-types';
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { ArrowRight } from 'lucide-react';
+import React, { useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { useDebounce } from 'use-debounce';
+export const ContentsTable = ({ collectionId, filter }) => {
+    const { objects, Paginate, Search, SortButton } = useDetailListHook({
+        fakeURLParams: true,
+        fetch: async ({ page, perPage, filter: filterValue, filterOperator, sort }, customFieldsSelector, additionalSelector) => {
+            const selector = deepMerge(CollectionProductVariantsSelector, additionalSelector ?? {});
+            const response = await apiClient('query')({
+                collection: [
+                    { id: collectionId },
+                    {
+                        productVariants: [
+                            {
+                                options: {
+                                    take: perPage,
+                                    skip: (page - 1) * perPage,
+                                    filterOperator: filterOperator,
+                                    sort: sort ? { [sort.key]: sort.sortDir } : { createdAt: SortOrder.DESC },
+                                    ...(filterValue && { filter: filterValue }),
+                                },
+                            },
+                            { totalItems: true, items: selector },
+                        ],
+                    },
+                ],
+            });
+            return (response['collection']?.productVariants ?? {
+                items: [],
+                totalItems: 0,
+            });
+        },
+    });
+    const [tableLoading, setTableLoading] = useState(false);
+    const [debouncedFilter] = useDebounce(filter, 500);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnsVisibilityState, setColumnsVisibilityState] = useState({});
+    const [pagination, setPagination] = React.useState({
+        pageIndex: 0,
+        pageSize: 10,
+    });
+    const { t } = useTranslation(['collections', 'common']);
+    const columns = useMemo(() => [
+        {
+            accessorKey: 'id',
+            enableHiding: false,
+            enableColumnFilter: false,
+            header: () => _jsx(TableLabel, { children: t('table.id') }),
+            cell: ({ row }) => (_jsx(Link, { to: Routes.products.to(`${row.original.product.id}?tab=variants`), className: "text-primary-600", children: _jsxs(Badge, { variant: "outline", className: "flex w-full items-center justify-center", children: [row.original.id, _jsx(ArrowRight, { className: "pl-1", size: 16 })] }) })),
+        },
+        {
+            accessorKey: 'featuredAsset',
+            header: () => _jsx(TableLabel, { children: t('table.featuredAsset') }),
+            cell: ({ row }) => _jsx(ImageWithPreview, { src: row.original.featuredAsset?.preview, alt: row.original.name }),
+        },
+        {
+            accessorKey: 'product.name',
+            header: () => _jsx(TableLabel, { children: t('drawer.product') }),
+        },
+        {
+            accessorKey: 'name',
+            header: () => _jsx(TableLabel, { children: t('drawer.variant') }),
+        },
+        {
+            accessorKey: 'sku',
+            header: () => _jsx(TableLabel, { children: t('drawer.sku') }),
+        },
+    ], [t]);
+    const tableColumns = useMemo(() => tableLoading
+        ? columns.map((column) => ({
+            ...column,
+            cell: () => _jsx(Skeleton, { className: "h-12 w-full rounded-sm" }),
+        }))
+        : columns, [tableLoading]);
+    const tableData = useMemo(() => (tableLoading ? Array(10).fill({}) : objects || []), [tableLoading, objects]);
+    const table = useReactTable({
+        data: tableData || [],
+        manualPagination: true,
+        enableExpanding: true,
+        columns: tableColumns,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnsVisibilityState,
+        state: {
+            columnFilters,
+            columnVisibility: columnsVisibilityState,
+            pagination,
+        },
+    });
+    return (_jsxs(_Fragment, { children: [Search, _jsxs(Table, { className: "w-full", ...(!table.getRowModel().rows?.length && { containerClassName: 'flex' }), children: [_jsx(TableHeader, { className: "bg-primary-foreground sticky top-0", children: table.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: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => (_jsx(_Fragment, { children: _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(EmptyState, { columnsLength: columns.length, filtered: false, title: t(`common:emptyState.default.empty.title`), description: t(`common:emptyState.default.empty.text`) })) })] }), Paginate] }));
+};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, apiClient, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+export const DeleteCollectionsFromChannel = ({ refetchCollections, collectionsToRemove, onClose, }) => {
+    const { t } = useTranslation('collections');
+    const { selectedChannel } = useSettings();
+    const removeCollectionsFromChannel = async () => {
+        try {
+            if (selectedChannel?.id) {
+                await apiClient('mutation')({
+                    removeCollectionsFromChannel: [
+                        {
+                            input: {
+                                collectionIds: collectionsToRemove.map((c) => c.id),
+                                channelId: selectedChannel.id,
+                            },
+                        },
+                        { __typename: true },
+                    ],
+                });
+                toast.success(t('deleteCollectionsFromChannel.removeSuccess'));
+                refetchCollections();
+                return;
+            }
+            toast.error(t('deleteCollectionsFromChannel.removeError'));
+        }
+        catch (e) {
+            console.log(e);
+            toast.error(t('deleteCollectionsFromChannel.removeError'));
+        }
+        finally {
+            onClose();
+        }
+    };
+    return (_jsxs(DialogContent, { className: "", children: [_jsxs(DialogHeader, { className: "pt-6", children: [_jsx(DialogTitle, { children: t('deleteCollectionsFromChannel.areYouSure', { channel: selectedChannel?.code }) }), _jsx(DialogDescription, { children: collectionsToRemove.map((i) => (_jsxs("div", { children: ["- ", i.name] }, i.id))) })] }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { onClick: onClose, variant: "ghost", children: t('deleteCollectionsFromChannel.cancel') }) }), _jsx(Button, { onClick: removeCollectionsFromChannel, variant: "destructive", children: t('deleteCollectionsFromChannel.removeCollection') })] })] }));
+};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Label, MultipleSelector, apiClient } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+export const FacetsSelector = ({ value, onChange }) => {
+    const { t } = useTranslation('collections');
+    const [facetsOptions, setFacetsOptions] = useState();
+    const fetchFacets = useCallback(async () => {
+        const response = await apiClient('query')({
+            facetValues: [
+                {},
+                {
+                    items: {
+                        name: true,
+                        id: true,
+                    },
+                },
+            ],
+        });
+        setFacetsOptions(response.facetValues.items.map((f) => ({ label: f.name, value: f.id })));
+    }, []);
+    useEffect(() => {
+        fetchFacets();
+    }, [fetchFacets]);
+    return (_jsxs("div", { className: "flex basis-full flex-col gap-2", children: [_jsx(Label, { children: t('details.filters.addFacets') }), _jsx(MultipleSelector, { options: facetsOptions, value: !value
+                    ? []
+                    : value.map((id) => ({
+                        label: facetsOptions?.find((o) => o.value === id)?.label || id,
+                        value: id,
+                    })), placeholder: t('details.filters.addFacets'), onChange: (e) => onChange(e.map((e) => e.value)), hideClearAllButton: true })] }));
+};

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

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Checkbox, Input, Label, Switch, Separator, apiClient, ErrorMessage, CustomCard, CardIcons, SimpleSelect, useTranslation, PaymentMethodHandlerSelector, } from '@deenruv/react-ui-devkit';
+import { X } from 'lucide-react';
+import { FacetsSelector } from "./FacetsSelector";
+import { CombinationMode } from "./CombinationMode";
+import { VariantsSelector } from "./VariantsSelector";
+export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inheritValue, onInheritChange, errors, }) => {
+    const { t } = useTranslation('collections');
+    const codesTranslations = t('details.filters.labels.codes', { returnObjects: true });
+    const [filters, setFilters] = useState([]);
+    const [allFiltersOptions, setAllFiltersOptions] = useState([]);
+    const fetchOptions = useCallback(async () => {
+        const response = await apiClient('query')({
+            collectionFilters: PaymentMethodHandlerSelector,
+        });
+        setAllFiltersOptions(response.collectionFilters.map((c) => ({
+            value: c.code,
+            label: codesTranslations[c.code]
+                ? t('details.filters.labels.codes.' + c.code)
+                : c.description,
+        })));
+        setFilters(response.collectionFilters);
+    }, [setAllFiltersOptions]);
+    useEffect(() => {
+        fetchOptions();
+    }, [fetchOptions]);
+    const handleFiltersValueChange = useCallback((index, code, args) => {
+        const correspondingFilter = filters.find((h) => h?.code === code);
+        if (correspondingFilter && currentFiltersValue) {
+            const newFiltersValue = [...currentFiltersValue];
+            newFiltersValue[index] = {
+                code: correspondingFilter.code,
+                arguments: args ||
+                    correspondingFilter.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            };
+            onFiltersValueChange(newFiltersValue);
+        }
+    }, [filters, onFiltersValueChange, currentFiltersValue]);
+    const handleRemoveFilter = useCallback((code) => {
+        if (currentFiltersValue) {
+            let newValue = [...currentFiltersValue];
+            newValue = newValue.filter((v) => v.code !== code);
+            onFiltersValueChange(newValue);
+        }
+    }, [onFiltersValueChange, currentFiltersValue]);
+    const handleAddFilter = useCallback(() => {
+        const defaultFilter = filters[0];
+        const newFiltersValue = [
+            ...(currentFiltersValue || []),
+            {
+                code: defaultFilter.code,
+                arguments: defaultFilter.args.map((a) => ({
+                    name: a.name,
+                    value: 'false',
+                })),
+            },
+        ];
+        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) => {
+                        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) => {
+                                                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) => {
+                                                filter.arguments[i] = { name: argument?.name || '', value: e };
+                                                handleFiltersValueChange(index, filter?.code, filter.arguments);
+                                            }, options: (argument?.ui?.options).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) => {
+                                                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) => {
+                                                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) => {
+                                                    filter.arguments[i] = { name: argument?.name || '', value: e.target.value };
+                                                    handleFiltersValueChange(index, filter?.code, filter.arguments);
+                                                }, required: true }) }, i)) : argument?.type === 'string' ? (_jsx("div", { className: "flex basis-full", children: _jsx(Input, { label: argument?.label || argument.name, value: filter?.arguments[i].value, onChange: (e) => {
+                                                    filter.arguments[i] = { name: argument?.name || '', value: e.target.value };
+                                                    handleFiltersValueChange(index, filter?.code, filter.arguments);
+                                                }, required: true }) }, i)) : argument?.type === 'boolean' ? (_jsxs("div", { className: "flex basis-full flex-col gap-3", children: [_jsx(Label, { children: argument?.label }), _jsx(Checkbox, { checked: filter?.arguments[i].value === 'true' ? true : false, onCheckedChange: (e) => {
+                                                        filter.arguments[i] = { name: argument?.name || '', value: e ? 'true' : 'false' };
+                                                        handleFiltersValueChange(index, filter?.code, filter.arguments);
+                                                    } })] }, e.name)) : (_jsx("div", { className: "flex basis-full", children: _jsx(Input, { type: "number", step: 0.01, label: argument?.label ?? undefined, value: filter?.arguments[i].value, onChange: (e) => {
+                                                    filter.arguments[i] = { name: argument?.name || '', value: e.target.value };
+                                                    handleFiltersValueChange(index, filter?.code, filter.arguments);
+                                                }, required: true }) }, i));
+                                    }) })] }, index));
+                    })] }) }) }));
+};