@deenruv/admin-dashboard 1.0.0

package/dist/pages/promotions/Detail.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { useTranslation, useValidators, createDeenruvForm, DetailView, useMutation } from '@deenruv/react-ui-devkit';
+import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
+import { PromotionDetailView } from "./_components/PromotionDetailView";
+import { PromotionDetailSidebar } from "./_components/PromotionDetailSidebar";
+const EditPromotionMutation = typedGql('mutation', { scalars })({
+    updatePromotion: [{ input: $('input', 'UpdatePromotionInput!') }, { '...on Promotion': { id: true } }],
+});
+const CreatePromotionMutation = typedGql('mutation', { scalars })({
+    createPromotion: [{ input: $('input', 'CreatePromotionInput!') }, { '...on Promotion': { id: true } }],
+});
+const DeletePromotionMutation = typedGql('mutation', { scalars })({
+    deletePromotion: [{ id: $('id', 'ID!') }, { result: true }],
+});
+export const PromotionsDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('common');
+    const [update] = useMutation(EditPromotionMutation);
+    const [create] = useMutation(CreatePromotionMutation);
+    const [remove] = useMutation(DeletePromotionMutation);
+    const { translationsValidator, configurableOperationArrayValidator } = useValidators();
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "promotions-detail-view", main: {
+                name: 'promotion',
+                label: 'Promotion',
+                component: _jsx(PromotionDetailView, {}),
+                sidebar: _jsx(PromotionDetailSidebar, {}),
+                form: createDeenruvForm({
+                    key: 'CreatePromotionInput',
+                    keys: [
+                        'translations',
+                        'enabled',
+                        'startsAt',
+                        'endsAt',
+                        'couponCode',
+                        'perCustomerUsageLimit',
+                        'usageLimit',
+                        'conditions',
+                        'actions',
+                        'translations',
+                        'customFields',
+                    ],
+                    config: {
+                        translations: translationsValidator,
+                        actions: configurableOperationArrayValidator(t('validation.actionsCode'), t('validation.actionsArgs')),
+                        conditions: configurableOperationArrayValidator(t('validation.conditionsCode'), t('validation.conditionsArgs')),
+                    },
+                    onSubmitted: (data) => {
+                        if (!data.translations || !data.actions || !data.conditions)
+                            throw new Error('Fill required fields.');
+                        const input = {
+                            translations: data.translations?.validatedValue,
+                            enabled: data.enabled?.validatedValue || false,
+                            actions: data.actions?.validatedValue,
+                            conditions: data.conditions?.validatedValue?.map((el) => ({
+                                ...el,
+                                arguments: el.arguments.map((arg) => ({ ...arg, value: arg.value.toString() })),
+                            })),
+                            couponCode: data.couponCode?.validatedValue,
+                            endsAt: data.endsAt?.validatedValue,
+                            startsAt: data.startsAt?.validatedValue,
+                            perCustomerUsageLimit: data.perCustomerUsageLimit?.validatedValue,
+                            usageLimit: data.usageLimit?.validatedValue,
+                            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+                        };
+                        return id ? update({ input: { id, ...input } }) : create({ input });
+                    },
+                    onDeleted: () => {
+                        if (id)
+                            return remove({ id });
+                        else
+                            throw new Error('No id');
+                    },
+                }),
+            }, permissions: {
+                create: Permission.CreatePromotion,
+                edit: Permission.UpdatePromotion,
+                delete: Permission.DeletePromotion,
+            } }) }));
+};

package/dist/pages/promotions/List.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { apiClient, deepMerge, DetailList, EntityChannelManagementBulkAction, ListLocations, Routes, } from '@deenruv/react-ui-devkit';
+const tableId = 'promotions-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['promotions']: [
+            {
+                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['promotions'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deletePromotions } = await apiClient('mutation')({
+            deletePromotions: [{ ids }, { message: true, result: true }],
+        });
+        return !!deletePromotions.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const PromotionsListPage = () => (_jsx(DetailList, { filterFields: [
+        { key: 'name', operator: 'StringOperators' },
+        { key: 'enabled', operator: 'BooleanOperators' },
+    ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], searchFields: ['name'], entityName: 'Promotion', route: Routes['promotions'], tableId: tableId, fetch: fetch, onRemove: onRemove, detailLinkColumn: "id", createPermissions: [Permission.CreatePromotion], deletePermissions: [Permission.DeletePromotion] }));

package/dist/pages/promotions/_components/ActionsCard.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Button, useQuery, Separator, ErrorMessage, ArgumentFieldsComponent, CustomCard, CardIcons, useTranslation, PromotionConditionAndActionSelector, } from '@deenruv/react-ui-devkit';
+import { typedGql, scalars } from '@deenruv/admin-types';
+import { useCallback, useMemo } from 'react';
+import { X } from 'lucide-react';
+export const ActionsQuery = typedGql('query', { scalars })({
+    promotionActions: PromotionConditionAndActionSelector,
+});
+export const ActionsCard = ({ value, onChange, errors }) => {
+    const { t } = useTranslation('promotions');
+    const { data } = useQuery(ActionsQuery);
+    const availableActions = useMemo(() => {
+        return data?.promotionActions.filter((a) => !value?.some((v) => v.code === a.code)) || [];
+    }, [data, value]);
+    const handleActionsValueChange = useCallback((index, code, args) => {
+        const correspondingAction = data?.promotionActions.find((h) => h.code === code);
+        if (correspondingAction && value) {
+            const newFiltersValue = [...value];
+            newFiltersValue[index] = {
+                code: correspondingAction.code,
+                arguments: args ||
+                    correspondingAction.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            };
+            onChange('actions', newFiltersValue);
+        }
+    }, [data, onChange, value]);
+    const removeAction = useCallback((code) => {
+        if (value) {
+            let newValue = [...value];
+            newValue = newValue.filter((v) => v.code !== code);
+            onChange('actions', newValue);
+        }
+    }, [onChange, value, data]);
+    const addAction = useCallback((action) => {
+        const newValue = [
+            ...(value || []),
+            {
+                code: action.code,
+                arguments: action.args.map((a) => ({ name: a.name, value: a.type === 'boolean' ? 'false' : a.defaultValue })),
+            },
+        ];
+        onChange('actions', newValue);
+    }, [onChange, value, data]);
+    return (_jsx(CustomCard, { title: t('actions.header'), color: "red", icon: _jsx(CardIcons.action, {}), upperRight: _jsx(ErrorMessage, { errors: errors }), bottomRight: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { disabled: !availableActions.length, children: t(`actions.add`) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: t(`actions.header`) }), _jsx(DropdownMenuSeparator, {}), availableActions.map((action) => {
+                            const translated = t(`actions.codes.${action.code}`);
+                            return (_jsx(DropdownMenuItem, { onClick: () => addAction(action), children: translated !== `actions.codes.${action.code}` ? translated : action.description }, action.code));
+                        })] })] }), children: _jsx("div", { className: "flex flex-1 flex-col gap-y-4", children: !value?.length ? (_jsx("p", { children: t('actions.emptyState') })) : (value?.map((action, index) => {
+                const translated = t(`actions.codes.${action.code}`);
+                const available = availableActions.find((a) => a.code === action.code);
+                return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex items-center gap-3", children: action?.code && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'destructive', size: 'sm', className: "h-auto p-1", onClick: (e) => {
+                                            e.preventDefault();
+                                            removeAction(action.code);
+                                        }, children: _jsx(X, { size: 16 }) }), _jsx("h5", { children: translated !== `actions.codes.${action.code}`
+                                            ? translated
+                                            : available?.description || action.code })] })) }), _jsx(ArgumentFieldsComponent, { actions: data?.promotionActions, args: action.arguments, setArg: (argument, data) => {
+                                const newArgs = action.arguments.map((arg) => {
+                                    if (arg.name === argument.name)
+                                        return { ...arg, value: data.value };
+                                    return arg;
+                                });
+                                handleActionsValueChange(index, action.code, newArgs);
+                            } }), _jsx(Separator, { className: "my-4" })] }, index));
+            })) }) }));
+};

package/dist/pages/promotions/_components/BasicFieldsCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Input, Label, CustomCard, CardIcons, RichTextEditor } from '@deenruv/react-ui-devkit';
+export const BasicFieldsCard = ({ currentTranslationValue, onChange, errors }) => {
+    const { t } = useTranslation('promotions');
+    return (_jsx(CustomCard, { title: t('basicInfo.header'), color: "blue", icon: _jsx(CardIcons.basic, {}), children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsx("div", { className: "flex gap-3", children: _jsx(Input, { label: t('basicInfo.name'), placeholder: t('basicInfo.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => onChange('name', e.target.value), errors: errors }) }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('basicInfo.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? undefined, onContentChanged: (value) => onChange('description', value) })] })] }) }));
+};

package/dist/pages/promotions/_components/ConditionsCard.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Button, useQuery, Separator, ErrorMessage, ArgumentFieldsComponent, CustomCard, CardIcons, useTranslation, PromotionConditionAndActionSelector, } from '@deenruv/react-ui-devkit';
+import { typedGql, scalars } from '@deenruv/admin-types';
+import { useCallback, useMemo } from 'react';
+import { X } from 'lucide-react';
+export const ConditionsQuery = typedGql('query', { scalars })({
+    promotionConditions: PromotionConditionAndActionSelector,
+});
+export const ConditionsCard = ({ value, onChange, errors }) => {
+    const { t } = useTranslation('promotions');
+    const { data } = useQuery(ConditionsQuery);
+    const availableConditions = useMemo(() => {
+        return data?.promotionConditions.filter((c) => !value?.some((v) => v.code === c.code)) || [];
+    }, [data, value]);
+    const handleConditionsValueChange = useCallback((index, code, args) => {
+        const correspondingCondition = data?.promotionConditions.find((h) => h.code === code);
+        if (correspondingCondition && value) {
+            const newFiltersValue = [...value];
+            newFiltersValue[index] = {
+                code: correspondingCondition.code,
+                arguments: args ||
+                    correspondingCondition.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            };
+            onChange('conditions', newFiltersValue);
+        }
+    }, [data, onChange, value]);
+    const removeCondition = useCallback((code) => {
+        if (value) {
+            let newValue = [...value];
+            newValue = newValue.filter((v) => v.code !== code);
+            onChange('conditions', newValue);
+        }
+    }, [onChange, value, data]);
+    const addCondition = useCallback((condition) => {
+        const newValue = [
+            ...(value || []),
+            {
+                code: condition.code,
+                arguments: condition.args.map((a) => ({
+                    name: a.name,
+                    value: a.type === 'boolean' ? 'false' : a.defaultValue,
+                })),
+            },
+        ];
+        onChange('conditions', newValue);
+    }, [onChange, value, data]);
+    return (_jsx(CustomCard, { title: t('conditions.header'), color: "yellow", icon: _jsx(CardIcons.check, {}), upperRight: _jsx(ErrorMessage, { errors: errors }), bottomRight: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { disabled: !availableConditions.length, children: t(`conditions.add`) }) }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: t(`conditions.header`) }), _jsx(DropdownMenuSeparator, {}), availableConditions.map((condition) => {
+                            const translated = t(`conditions.codes.${condition.code}`);
+                            return (_jsx(DropdownMenuItem, { onClick: () => addCondition(condition), children: translated !== `conditions.codes.${condition.code}` ? translated : condition.description }, condition.code));
+                        })] })] }), children: _jsx("div", { className: "flex flex-1 flex-col gap-y-4", children: !value?.length ? (_jsx("p", { children: t('conditions.emptyState') })) : (value?.map((condition, index) => {
+                const translated = t(`conditions.codes.${condition.code}`);
+                const available = availableConditions.find((c) => c.code === condition.code);
+                return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex items-center gap-3", children: condition?.code && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: 'destructive', size: 'sm', className: "h-auto p-1", onClick: (e) => {
+                                            e.preventDefault();
+                                            removeCondition(condition.code);
+                                        }, children: _jsx(X, { size: 16 }) }), _jsx("h5", { children: translated !== `conditions.codes.${condition.code}`
+                                            ? translated
+                                            : available?.description || condition.code })] })) }), _jsx(ArgumentFieldsComponent, { actions: data?.promotionConditions, args: condition.arguments, setArg: (argument, data) => {
+                                const newArgs = condition.arguments.map((arg) => {
+                                    if (arg.name === argument.name)
+                                        return { ...arg, value: data.value };
+                                    return arg;
+                                });
+                                handleConditionsValueChange(index, condition.code, newArgs);
+                            } }), _jsx(Separator, { className: "my-4" })] }, index));
+            })) }) }));
+};

package/dist/pages/promotions/_components/CustomerGroupsSelector.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, apiClient, SimpleSelect } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export const CustomerGroupsSelector = ({ label, value, onChange }) => {
+    const [options, setOptions] = useState([]);
+    const valueParsed = useMemo(() => (value?.startsWith('"') ? JSON.parse(value) : value), [value]);
+    const fetchCustomerGroups = useCallback(async () => {
+        const response = await apiClient('query')({
+            customerGroups: [
+                {},
+                {
+                    items: {
+                        name: true,
+                        id: true,
+                    },
+                },
+            ],
+        });
+        setOptions(response.customerGroups.items?.map((v) => ({ label: v.name, value: v.id })));
+    }, []);
+    useEffect(() => {
+        fetchCustomerGroups();
+    }, [fetchCustomerGroups]);
+    return (_jsxs("div", { className: "flex basis-full flex-col gap-2", children: [_jsx(Label, { children: label }), _jsx(SimpleSelect, { options: options, value: valueParsed, onValueChange: (e) => onChange(e) })] }));
+};

package/dist/pages/promotions/_components/EnabledCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Label, Switch, CustomCard, CardIcons } from '@deenruv/react-ui-devkit';
+export const EnabledCard = ({ onEnabledChange, enabledValue }) => {
+    const { t } = useTranslation('products');
+    return (_jsx(CustomCard, { title: t('details.basicInfo'), icon: _jsx(CardIcons.default, {}), color: "teal", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Switch, { id: "product-enabled", checked: enabledValue, onCheckedChange: onEnabledChange }), _jsx(Label, { htmlFor: "product-enabled", children: t('enabled') })] }) }));
+};

package/dist/pages/promotions/_components/OptionsCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, CustomCard, CardIcons, useTranslation, DateTimePicker } from '@deenruv/react-ui-devkit';
+export const OptionsCard = ({ startsAt, endsAt, couponCode, perCustomerUsageLimit, usageLimit, setField, }) => {
+    const { t } = useTranslation('promotions');
+    return (_jsx(CustomCard, { title: t('options.header'), color: "orange", icon: _jsx(CardIcons.options, {}), children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(DateTimePicker, { value: startsAt ? new Date(startsAt) : undefined, onChange: (date) => setField('startsAt', date ? date.toISOString() : ''), min: new Date(), max: endsAt ? new Date(endsAt) : undefined }), _jsx(DateTimePicker, { value: endsAt ? new Date(endsAt) : undefined, onChange: (date) => setField('endsAt', date ? date.toISOString() : ''), min: startsAt ? new Date(startsAt) : undefined, max: new Date(new Date().getFullYear() + 10, 11, 31) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Input, { label: t('options.couponCode'), placeholder: t('options.couponCode'), value: couponCode, onChange: (e) => setField('couponCode', e.target.value) }), _jsx(Input, { label: t('options.usageLimit'), placeholder: t('options.usageLimit'), value: usageLimit, type: "number", onChange: (e) => setField('usageLimit', +e.target.value) }), _jsx(Input, { label: t('options.perCustomerUsageLimit'), placeholder: t('options.perCustomerUsageLimit'), value: perCustomerUsageLimit, type: "number", onChange: (e) => setField('perCustomerUsageLimit', +e.target.value) })] })] }) }));
+};

package/dist/pages/promotions/_components/PromotionDetailSidebar.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EnabledCard } from "./EnabledCard";
+import { PromotionQuery } from "./PromotionDetailView";
+import { useDetailView, useQuery } from '@deenruv/react-ui-devkit';
+import { useEffect } from 'react';
+export const PromotionDetailSidebar = () => {
+    const { id, form } = useDetailView('promotions-detail-view', 'CreatePromotionInput', 'enabled');
+    const { base: { state, setField }, } = form;
+    const { data } = id ? useQuery(PromotionQuery, { initialVariables: { id } }) : { data: undefined };
+    useEffect(() => {
+        if (data)
+            setField('enabled', data.promotion.enabled);
+    }, [data]);
+    return (_jsx("div", { className: "flex w-full flex-col gap-4", children: _jsx(EnabledCard, { enabledValue: state.enabled?.value, onEnabledChange: (e) => setField('enabled', e) }) }));
+};

package/dist/pages/promotions/_components/PromotionDetailView.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDetailView, useSettings, DetailViewMarker, PromotionDetailSelector, setInArrayBy, EntityCustomFields, PromotionConditionAndActionSelector, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useMemo } from 'react';
+import { BasicFieldsCard } from "./BasicFieldsCard";
+import { OptionsCard } from "./OptionsCard";
+import { ConditionsCard } from "./ConditionsCard";
+import { ActionsCard } from "./ActionsCard";
+import { typedGql, scalars, $ } from '@deenruv/admin-types';
+export const ConditionsQuery = typedGql('query', { scalars })({
+    promotionConditions: PromotionConditionAndActionSelector,
+});
+const PROMOTION_FORM_KEYS = [
+    'CreatePromotionInput',
+    'enabled',
+    'startsAt',
+    'endsAt',
+    'couponCode',
+    'perCustomerUsageLimit',
+    'usageLimit',
+    'conditions',
+    'actions',
+    'translations',
+    'customFields',
+];
+export const PromotionQuery = typedGql('query', { scalars })({
+    promotion: [{ id: $('id', 'ID!') }, PromotionDetailSelector],
+});
+export const PromotionDetailView = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { form, entity, fetchEntity, id } = useDetailView('promotions-detail-view', ...PROMOTION_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    // const { data } = useQuery(ConditionsQuery);
+    // const availableConditions = useMemo(() => {
+    //   return data?.promotionConditions.filter((c) => !state.conditions?.value?.some((v) => v.code === c.code)) || [];
+    // }, [data, state.conditions?.value]);
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('translations', res.translations);
+            setField('endsAt', res.endsAt);
+            setField('startsAt', res.startsAt);
+            setField('couponCode', res.couponCode);
+            setField('usageLimit', res.usageLimit);
+            setField('perCustomerUsageLimit', res.perCustomerUsageLimit);
+            setField('conditions', res.conditions.map((c) => ({ code: c.code, arguments: c.args })));
+            setField('actions', res.actions.map((a) => ({ code: a.code, arguments: a.args })));
+        })();
+    }, [contentLng]);
+    const translations = useMemo(() => state?.translations?.value || [], [state?.translations?.value]);
+    const currentTranslationValue = useMemo(() => translations.find((v) => v.languageCode === contentLng), [translations, contentLng]);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
+            [field]: e,
+            languageCode: contentLng,
+        }));
+    }, [contentLng, translations]);
+    return (_jsx("div", { children: _jsxs("form", { className: "flex flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue ?? undefined, onChange: setTranslationField, errors: state.translations?.errors }), _jsx(OptionsCard, { endsAt: state.endsAt?.value, startsAt: state.startsAt?.value, couponCode: state.couponCode?.value ?? undefined, usageLimit: state.usageLimit?.value ?? undefined, perCustomerUsageLimit: state.perCustomerUsageLimit?.value ?? undefined, setField: setField }), _jsx(DetailViewMarker, { position: 'promotions-detail-view' }), _jsx(EntityCustomFields, { entityName: "promotion", 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: {} } }), _jsx(ConditionsCard, { value: state.conditions?.value, onChange: setField, errors: state.conditions?.errors }), _jsx(ActionsCard, { value: state.actions?.value, onChange: setField, errors: state.actions?.errors })] }) }));
+};

package/dist/pages/promotions/_components/PromotionFieldRender.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PromotionFieldRender = () => {
+    return _jsx("div", { children: "PromotionFieldRender" });
+};

package/dist/pages/promotions/index.js

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

package/dist/pages/roles/Detail.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Permission } from '@deenruv/admin-types';
+import { RoleDetailView } from "./_components/RoleDetailView.js";
+const CreateRoleMutation = getMutation('createRole');
+const EditRoleMutation = getMutation('updateRole');
+const DeleteRoleMutation = getMutation('deleteRole');
+export const RolesDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditRoleMutation);
+    const [create] = useMutation(CreateRoleMutation);
+    const [remove] = useMutation(DeleteRoleMutation);
+    const { t } = useTranslation('roles');
+    const { nameValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            code: data.code.validatedValue,
+            channelIds: data.channelIds?.validatedValue,
+            description: data.description?.validatedValue,
+            permissions: data.permissions?.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: "roles-detail-view", main: {
+                name: 'role',
+                label: 'Role',
+                component: _jsx(RoleDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreateRoleInput',
+                    keys: ['code', 'description', 'channelIds', 'permissions'],
+                    config: {
+                        code: {
+                            validate: (v) => (!v || v === '' ? [t('validation.codeRequired')] : undefined),
+                        },
+                        permissions: {
+                            // initialValue: DEFAULT_VALUES.permissions,
+                            validate: (v) => (!v || !v.length ? [t('validation.permissionsRequired')] : undefined),
+                        },
+                        description: nameValidator,
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            }, permissions: {
+                create: Permission.CreateAdministrator,
+                delete: Permission.DeleteAdministrator,
+                edit: Permission.UpdateAdministrator,
+            } }) }));
+};

package/dist/pages/roles/List.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { apiClient, DetailList, deepMerge, DEFAULT_CHANNEL_CODE, ListBadge, ListLocations, useTranslation, Routes, TableLabel, EntityChannelManagementBulkAction, } from '@deenruv/react-ui-devkit';
+import { Permission, SortOrder } from '@deenruv/admin-types';
+const tableId = 'roles-list-view';
+const { selector } = ListLocations[tableId];
+const DEFAULT_ROLE_CODES = ['__customer_role__', '__super_admin_role__'];
+const isDefaultRole = (row) => DEFAULT_ROLE_CODES.includes(row.original.code);
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        roles: [
+            {
+                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.roles;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteRoles } = await apiClient('mutation')({
+            deleteRoles: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteRoles.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const RolesListPage = () => {
+    const { t } = useTranslation('roles');
+    const renderElements = useCallback((elements) => {
+        const LIMIT_TO = 3;
+        const elementsRemain = elements.length - LIMIT_TO;
+        const renderedElements = elements
+            .filter((_e, i) => i + 1 <= LIMIT_TO)
+            .map((e) => _jsx(ListBadge, { children: e }, e));
+        return (_jsxs(_Fragment, { children: [renderedElements, elementsRemain > 0 && _jsxs(ListBadge, { children: ["+", elementsRemain] }, 'plus')] }));
+    }, []);
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'id', operator: 'IDOperators' },
+            { key: 'description', operator: 'StringOperators' },
+            { key: 'code', operator: 'StringOperators' },
+        ], detailLinkColumn: "description", searchFields: ['code', 'description'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId)], additionalColumns: [
+            {
+                accessorKey: 'permissions',
+                enableSorting: false,
+                enableColumnFilter: false,
+                header: () => _jsx(TableLabel, { children: t('table.permissions') }),
+                cell: ({ row }) => (_jsx("div", { className: "flex gap-1", children: isDefaultRole(row) ? (_jsx("p", { className: "flex w-full items-center justify-center py-2 text-[12px] font-medium text-gray-500", children: t('table.defaultRoleInfo') })) : (renderElements(row.original.permissions)) })),
+            },
+            {
+                accessorKey: 'channels',
+                enableSorting: false,
+                enableColumnFilter: false,
+                header: () => _jsx(TableLabel, { children: t('table.channels') }),
+                cell: ({ row }) => (_jsx("div", { className: "flex gap-1", children: isDefaultRole(row)
+                        ? ''
+                        : row.original.channels.map((ch) => (_jsx(ListBadge, { children: ch.code === DEFAULT_CHANNEL_CODE ? t('defaultChannel') : ch.code }, ch.code))) })),
+            },
+        ], entityName: 'Role', route: Routes['roles'], tableId: "roles-list-view", fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateAdministrator], deletePermissions: [Permission.DeleteAdministrator] }));
+};

package/dist/pages/roles/_components/PermissionsCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation, ErrorMessage, CustomCard, CardIcons } from '@deenruv/react-ui-devkit';
+import { PermissionsTable } from "./PermissionsTable";
+export const PermissionsCard = ({ currentPermissions, onPermissionsChange, errors, }) => {
+    const { t } = useTranslation('roles');
+    return (_jsx(CustomCard, { title: t('details.permissions.title'), icon: _jsx(CardIcons.permissions, {}), color: "teal", upperRight: _jsx(ErrorMessage, { errors: errors }), children: _jsx(PermissionsTable, { currentPermissions: currentPermissions, onPermissionsChange: onPermissionsChange }) }));
+};

package/dist/pages/roles/_components/PermissionsTable.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation, cn, Table, TableBody, TableCell, TableRow, useServer } from '@deenruv/react-ui-devkit';
+import { CircleCheckBig } from 'lucide-react';
+import permissionsJson from "../../../locales/en/permissions.json";
+export const PermissionsTable = ({ currentPermissions, onPermissionsChange }) => {
+    const { t } = useTranslation('permissions');
+    const [groupedPermissions, setGroupedPermissions] = useState();
+    const { serverConfig } = useServer();
+    const groupPermissions = useCallback((allPermissions) => {
+        const permissionGroups = {};
+        allPermissions?.forEach((permission) => {
+            const match = permission.match(/(Create|Read|Update|Delete)(.*)/);
+            if (match) {
+                const resource = match[2];
+                if (!permissionGroups[resource]) {
+                    permissionGroups[resource] = [];
+                }
+                permissionGroups[resource].push(permission);
+            }
+        });
+        setGroupedPermissions(permissionGroups);
+    }, []);
+    useEffect(() => {
+        if (serverConfig)
+            groupPermissions(serverConfig.permissions.map((p) => p.name));
+    }, [serverConfig]);
+    const handlePermissionsChange = useCallback((permission) => {
+        if (!onPermissionsChange)
+            return;
+        const isPresent = currentPermissions?.includes(permission);
+        const permissions = currentPermissions ? [...currentPermissions] : [];
+        if (isPresent) {
+            onPermissionsChange(permissions?.filter((p) => p !== permission));
+        }
+        else {
+            onPermissionsChange([...permissions, permission]);
+        }
+    }, [currentPermissions, onPermissionsChange]);
+    return (_jsx(Table, { children: _jsx(TableBody, { children: groupedPermissions &&
+                Object.entries(groupedPermissions).map(([key, values]) => (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "dark:bg-secondary bg-slate-50 px-4 py-2", colSpan: values.length + 1, children: _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("p", { className: "text-base font-semibold", children: t(`${key}.title`) }), _jsx("p", { className: "text-xs", children: t(`${key}.description`) })] }) }), values.map((v) => (_jsx(TableCell, { className: cn('py-4', onPermissionsChange && 'cursor-pointer'), onClick: () => handlePermissionsChange(v), children: _jsxs("div", { className: cn('flex items-center gap-2 text-gray-400', currentPermissions?.includes(v) && 'font-medium text-green-600'), children: [_jsx(CircleCheckBig, { size: 18, strokeWidth: 2.5 }), _jsx("p", { children: v })] }) }, v)))] }, key))) }) }));
+};