@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { useValidators, DetailView, createDeenruvForm, useMutation, getMutation, useTranslation, } from '@deenruv/react-ui-devkit';
+import { PaymentMethodDetailView } from "./_components/PaymentMethodDetailView.js";
+const CreatePaymentMethodMutation = getMutation('createPaymentMethod');
+const EditPaymentMethodMutation = getMutation('updatePaymentMethod');
+const DeletePaymentMethodMutation = getMutation('deletePaymentMethod');
+export const PaymentMethodsDetailPage = () => {
+    const { id } = useParams();
+    const [update] = useMutation(EditPaymentMethodMutation);
+    const [create] = useMutation(CreatePaymentMethodMutation);
+    const [remove] = useMutation(DeletePaymentMethodMutation);
+    const { t } = useTranslation('paymentMethods');
+    const { translationsValidator, stringValidator, configurableOperationValidator } = useValidators();
+    const onSubmitHandler = useCallback((data) => {
+        if (!data.code?.validatedValue) {
+            throw new Error('Name is required.');
+        }
+        const inputData = {
+            code: data.code?.validatedValue,
+            handler: data.handler?.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,
+                    checker: data.checker?.validatedValue?.code !== '' ? data.checker?.validatedValue : undefined,
+                },
+            });
+        }
+        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: "paymentMethods-detail-view", main: {
+                name: 'paymentMethod',
+                label: 'Payment method',
+                component: _jsx(PaymentMethodDetailView, {}),
+                form: createDeenruvForm({
+                    key: 'CreatePaymentMethodInput',
+                    keys: ['code', 'enabled', 'translations', 'handler', 'checker', 'customFields'],
+                    config: {
+                        enabled: {
+                            initialValue: false,
+                        },
+                        translations: translationsValidator,
+                        code: stringValidator(t('validation.codeRequired')),
+                        handler: configurableOperationValidator(t('validation.handlerCodeRequired'), t('validation.handlerArgsRequired')),
+                    },
+                    onSubmitted: onSubmitHandler,
+                    onDeleted: onDeleteHandler,
+                }),
+            } }) }));
+};

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

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

package/dist/pages/payment-methods/_components/OptionsCard.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { useTranslation, Checkbox, Label, apiClient, ErrorMessage, CustomCard, CardIcons, SimpleSelect, PaymentMethodHandlerSelector, } from '@deenruv/react-ui-devkit';
+export const OptionsCard = ({ currentHandlerValue, currentCheckerValue, onHandlerValueChange, onCheckerValueChange, handlerErrors, }) => {
+    const { t } = useTranslation('paymentMethods');
+    const [handlers, setHandlers] = useState([]);
+    const [checkers, setCheckers] = useState([]);
+    const [allHandlersOptions, setAllHandlersOptions] = useState([]);
+    const [allCheckersOptions, setAllCheckersOptions] = useState([]);
+    const fetchOptions = useCallback(async () => {
+        const response = await apiClient('query')({
+            paymentMethodHandlers: PaymentMethodHandlerSelector,
+            paymentMethodEligibilityCheckers: PaymentMethodHandlerSelector,
+        });
+        setHandlers(response.paymentMethodHandlers);
+        setAllHandlersOptions(response.paymentMethodHandlers.map((h) => ({
+            value: h.code,
+            label: h.code,
+        })));
+        setAllCheckersOptions(response.paymentMethodEligibilityCheckers.map((h) => ({
+            value: h.code,
+            label: h.code,
+        })));
+        setCheckers(response.paymentMethodEligibilityCheckers);
+    }, [setAllHandlersOptions, setAllCheckersOptions]);
+    useEffect(() => {
+        fetchOptions();
+    }, [fetchOptions]);
+    const handleHandlerValueChange = useCallback((code, args) => {
+        const correspondingHandler = handlers.find((h) => h.code === code);
+        if (correspondingHandler)
+            onHandlerValueChange({
+                code: correspondingHandler.code,
+                arguments: args ||
+                    correspondingHandler.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            });
+    }, [handlers, onHandlerValueChange]);
+    const handleCheckerValueChange = useCallback((code, args) => {
+        const correspondingChecker = checkers.find((h) => h.code === code);
+        if (correspondingChecker)
+            onCheckerValueChange({
+                code: correspondingChecker.code,
+                arguments: args ||
+                    correspondingChecker.args.map((a) => ({
+                        name: a.name,
+                        value: 'false',
+                    })),
+            });
+    }, [checkers, onCheckerValueChange]);
+    return (_jsx(CustomCard, { title: t('details.options.title'), icon: _jsx(CardIcons.options, {}), color: "teal", children: _jsxs("div", { className: "flex flex-wrap gap-4 xl:flex-nowrap", children: [_jsxs("div", { className: "flex basis-full flex-col gap-3 md:basis-1/2", children: [_jsx(SimpleSelect, { label: t('details.options.handler'), value: currentHandlerValue?.code, onValueChange: handleHandlerValueChange, options: allHandlersOptions }), _jsx("div", { className: "flex", children: currentHandlerValue?.arguments.map((e, i) => {
+                                const handler = handlers?.find((h) => h.code === currentHandlerValue.code);
+                                const argument = handler?.args.find((a) => a.name === a.name);
+                                return (_jsxs("div", { className: "mb-2 flex basis-full items-center gap-3", children: [_jsx(Checkbox, { checked: currentHandlerValue?.arguments[i].value === 'true' ? true : false, onCheckedChange: (e) => handleHandlerValueChange(currentHandlerValue?.code, [
+                                                { name: argument?.name || '', value: e ? 'true' : 'false' },
+                                            ]) }), _jsx(Label, { children: argument?.label })] }, e.name));
+                            }) }), _jsx(ErrorMessage, { errors: handlerErrors })] }), _jsx("div", { className: "flex basis-full md:basis-1/2", children: _jsx(SimpleSelect, { label: t('details.options.checker'), value: currentCheckerValue?.code, onValueChange: handleCheckerValueChange, options: allCheckersOptions }) })] }) }));
+};

package/dist/pages/payment-methods/_components/PaymentMethodDetailView.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { useTranslation, CardIcons, CustomCard, DetailViewMarker, Input, Label, setInArrayBy, Switch, useDetailView, useSettings, EntityCustomFields, RichTextEditor, } from '@deenruv/react-ui-devkit';
+import { OptionsCard } from "./OptionsCard";
+const PAYMENT_METHOD_FORM_KEYS = [
+    'CreatePaymentMethodInput',
+    'code',
+    'enabled',
+    'translations',
+    'handler',
+    'checker',
+    'customFields',
+];
+export const PaymentMethodDetailView = () => {
+    const { form, fetchEntity, entity, id } = useDetailView('paymentMethods-detail-view', ...PAYMENT_METHOD_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    // const editMode = useMemo(() => !!id, [id]);
+    const { t } = useTranslation('paymentMethods');
+    const { translationsLanguage: currentTranslationLng } = useSettings();
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('code', res.code);
+            setField('enabled', res.enabled);
+            setField('translations', res.translations);
+            setField('handler', {
+                arguments: res.handler.args,
+                code: res.handler.code,
+            });
+            setField('checker', {
+                arguments: res.checker?.args || [],
+                code: res.checker?.code || '',
+            });
+        })();
+    }, []);
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+            [field]: e,
+            languageCode: currentTranslationLng,
+        }));
+    }, [currentTranslationLng, translations]);
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", 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.code'), value: state.code?.value ?? undefined, 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 ?? undefined, onCheckedChange: (e) => setField('enabled', e) }), _jsx(Label, { children: t('details.basic.enabled') })] })] }), _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(DetailViewMarker, { position: 'paymentMethods-detail-view' }), _jsx(EntityCustomFields, { entityName: "paymentMethod", 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(OptionsCard, { currentHandlerValue: state.handler?.value ?? undefined, currentCheckerValue: state.checker?.value ?? undefined, onHandlerValueChange: (handler) => setField('handler', handler), onCheckerValueChange: (checker) => setField('checker', checker), handlerErrors: state.handler?.errors })] }) }));
+};

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

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

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

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

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

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { useTranslation, apiClient, Badge, deepMerge, DetailList, ListLocations, Routes, TableLabel, FacetIdsSelector, EntityChannelManagementBulkAction, EntityFacetManagementBulkAction, } from '@deenruv/react-ui-devkit';
+import { useNavigate } from 'react-router-dom';
+const tableId = 'productVariants-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
+    const response = await apiClient('query')({
+        productVariants: [
+            {
+                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.productVariants;
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteProducts } = await apiClient('mutation')({
+            deleteProducts: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteProducts.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const ProductVariantsListPage = () => {
+    const navigate = useNavigate();
+    const { t } = useTranslation('products');
+    return (_jsx(DetailList, { additionalBulkActions: [...EntityChannelManagementBulkAction(tableId), EntityFacetManagementBulkAction(tableId)], filterFields: [
+            { key: 'sku', operator: 'StringOperators' },
+            { key: 'name', operator: 'StringOperators' },
+            { key: 'enabled', operator: 'BooleanOperators' },
+            { key: 'price', operator: 'NumberOperators' },
+            { key: 'priceWithTax', operator: 'NumberOperators' },
+            { key: 'stockOnHand', operator: 'NumberOperators' },
+            { key: 'stockAllocated', operator: 'NumberOperators' },
+            {
+                key: 'facetValueId',
+                component: (props) => {
+                    return (_jsx(FacetIdsSelector, { onChange: (facetValuesId) => {
+                            if (facetValuesId.length === 0) {
+                                props.onChange(undefined);
+                                return;
+                            }
+                            props.onChange({ in: facetValuesId.map((o) => o) });
+                        }, facetValuesIds: props.value.in }));
+                },
+            },
+        ], detailLinkColumn: "id", searchFields: ['name', 'sku'], hideColumns: ['customFields', 'productId', 'stockOnHand', 'stockAllocated'], entityName: 'ProductVariant', route: {
+            ...Routes.productVariants,
+            edit: (variantId, row) => {
+                navigate(`/admin-ui/products/${row.original['productId']}?tab=variants&variantId=${variantId}`, {
+                    viewTransition: true,
+                });
+            },
+        }, noCreateButton: true, tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct], deletePermissions: [Permission.DeleteProduct], additionalColumns: [
+            {
+                id: 'stock',
+                accessorKey: 'stock',
+                header: () => _jsx(TableLabel, { children: t('table.stock') }),
+                cell: ({ row }) => {
+                    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs(Badge, { className: "flex justify-between gap-1", variant: row.original.stockOnHand <= 0 ? 'destructive' : 'outline', children: [_jsx("span", { children: t('table.stockOnHand') }), _jsx("span", { children: row.original.stockOnHand })] }), _jsxs(Badge, { className: "flex justify-between gap-1", variant: 'outline', children: [_jsx("span", { children: t('table.stockAllocated') }), _jsx("span", { children: row.original.stockAllocated })] })] }));
+                },
+            },
+        ] }));
+};

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

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

package/dist/pages/products/Detail.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useParams } from 'react-router-dom';
+import { VariantsTab } from "./_components/VariantsTab";
+import { OptionsTab } from "./_components/OptionsTab";
+import { ProductDetailView } from './_components/ProductDetailView';
+import { ProductDetailSidebar } from './_components/ProductDetailSidebar';
+import { useTranslation, createDeenruvForm, DetailView, useMutation } from '@deenruv/react-ui-devkit';
+import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
+import { useMemo } from 'react';
+const EditProductMutation = typedGql('mutation', { scalars })({
+    updateProduct: [{ input: $('input', 'UpdateProductInput!') }, { id: true }],
+});
+const CreateProductMutation = typedGql('mutation', { scalars })({
+    createProduct: [{ input: $('input', 'CreateProductInput!') }, { id: true }],
+});
+const DeleteProductMutation = typedGql('mutation', { scalars })({
+    deleteProduct: [{ id: $('id', 'ID!') }, { result: true }],
+});
+export const ProductsDetailPage = () => {
+    const { id } = useParams();
+    const { t } = useTranslation('products');
+    const [update] = useMutation(EditProductMutation);
+    const [create] = useMutation(CreateProductMutation);
+    const [remove] = useMutation(DeleteProductMutation);
+    const defaultTabs = useMemo(() => {
+        const tabs = [];
+        if (id) {
+            tabs.push({ label: t('options'), name: 'options', component: _jsx(OptionsTab, {}), hideSidebar: true });
+            tabs.push({ label: t('variants'), name: 'variants', component: _jsx(VariantsTab, {}), hideSidebar: true });
+        }
+        return tabs;
+    }, [id]);
+    return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "products-detail-view", main: {
+                name: 'product',
+                label: t('product'),
+                component: _jsx(ProductDetailView, {}),
+                sidebar: _jsx(ProductDetailSidebar, {}),
+                form: createDeenruvForm({
+                    key: 'CreateProductInput',
+                    keys: ['translations', 'featuredAssetId', 'enabled', 'assetIds', 'facetValueIds', 'customFields'],
+                    config: {
+                        translations: {
+                            validate: (v) => {
+                                const { name, slug } = v[0];
+                                if (!name || !slug)
+                                    return [t('validation.nameSlugRequired')];
+                            },
+                        },
+                    },
+                    onSubmitted: (data) => {
+                        if (!data.translations)
+                            throw new Error('Name is required.');
+                        const input = {
+                            translations: data.translations?.validatedValue,
+                            assetIds: data.assetIds?.validatedValue,
+                            featuredAssetId: data.featuredAssetId?.validatedValue,
+                            facetValueIds: data.facetValueIds?.validatedValue,
+                            enabled: data.enabled?.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');
+                    },
+                }),
+            }, defaultTabs: defaultTabs, permissions: {
+                create: Permission.CreateProduct,
+                edit: Permission.UpdateProduct,
+                delete: Permission.DeleteProduct,
+            } }) }));
+};

package/dist/pages/products/List.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Permission, SortOrder } from '@deenruv/admin-types';
+import { apiClient, deepMerge, DetailList, ListBadge, ListLocations, Routes, TableLabel, useTranslation, FacetIdsSelector, EntityChannelManagementBulkAction, EntityFacetManagementBulkAction, } from '@deenruv/react-ui-devkit';
+// import { FacetValueSelector } from '@deenruv/react-ui-devkit/FacetValueSelector.js';
+const tableId = 'products-list-view';
+const { selector } = ListLocations[tableId];
+const fetch = async ({ page, perPage, filter, filterOperator, sort }, customFieldsSelector, additionalSelector) => {
+    const response = await apiClient('query')({
+        ['products']: [
+            {
+                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['products'];
+};
+const onRemove = async (items) => {
+    try {
+        const ids = items.map((item) => item.id);
+        const { deleteProducts } = await apiClient('mutation')({
+            deleteProducts: [{ ids }, { message: true, result: true }],
+        });
+        return !!deleteProducts.length;
+    }
+    catch (error) {
+        return error;
+    }
+};
+export const ProductsListPage = () => {
+    const { t } = useTranslation('products');
+    return (_jsx(DetailList, { filterFields: [
+            { key: 'slug', operator: 'StringOperators' },
+            { key: 'enabled', operator: 'BooleanOperators' },
+            { key: 'sku', operator: 'StringOperators' },
+            { key: 'name', operator: 'StringOperators' },
+            {
+                key: 'facetValueId',
+                component: (props) => {
+                    return (_jsx(FacetIdsSelector, { onChange: (facetValuesId) => {
+                            if (facetValuesId.length === 0) {
+                                props.onChange({});
+                                return;
+                            }
+                            props.onChange({ in: facetValuesId.map((o) => o) });
+                        }, facetValuesIds: props.value.in }));
+                },
+            },
+        ], additionalBulkActions: [...EntityChannelManagementBulkAction(tableId), EntityFacetManagementBulkAction(tableId)], detailLinkColumn: "id", searchFields: ['name', 'slug', 'sku'], hideColumns: ['customFields', 'translations', 'collections', 'variantList'], entityName: 'Product', route: Routes['products'], tableId: tableId, fetch: fetch, onRemove: onRemove, createPermissions: [Permission.CreateProduct], deletePermissions: [Permission.DeleteProduct], suggestedOrderColumns: {
+            featuredAsset: 4,
+            variants: 99,
+        }, additionalColumns: [
+            {
+                id: 'variants',
+                accessorKey: 'variants',
+                header: () => _jsx(TableLabel, { children: t('table.variants') }),
+                cell: ({ row }) => row.original.variantList.totalItems,
+            },
+            {
+                id: 'allVariantsStock',
+                accessorKey: 'allVariantsStock',
+                header: () => _jsx(TableLabel, { children: t('table.allVariantsStock') }),
+                cell: ({ row }) => {
+                    const { stockOnHandTotal, stockAllocatedTotal } = row.original.variantList.items.reduce((totals, item) => {
+                        totals.stockOnHandTotal += item.stockOnHand;
+                        totals.stockAllocatedTotal += item.stockAllocated;
+                        return totals;
+                    }, { stockOnHandTotal: 0, stockAllocatedTotal: 0 });
+                    return (_jsxs(ListBadge, { children: [stockOnHandTotal, " (", stockAllocatedTotal, " ", t('table.allocated'), ")"] }));
+                },
+            },
+        ] }));
+};

package/dist/pages/products/_components/AddOptionGroupDialog.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, DialogHeader, DialogTitle, Input, Dialog, DialogContent, DialogTrigger, Label, DialogFooter, apiClient, useGFFLP, setInArrayBy, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+export const AddOptionGroupDialog = ({ currentTranslationLng, productId, onSuccess, }) => {
+    const { t } = useTranslation('products');
+    const [open, setOpen] = useState(false);
+    const { state, setField } = useGFFLP('CreateProductOptionGroupInput', 'code', 'translations', 'customFields')({});
+    const translations = state?.translations?.value || [];
+    const [codeEditedManually, setCodeEditedManually] = useState(false);
+    const createGroup = useCallback(() => {
+        if (state.code?.validatedValue && state.translations?.validatedValue)
+            return apiClient('mutation')({
+                createProductOptionGroup: [
+                    {
+                        input: {
+                            code: state.code?.validatedValue,
+                            options: [],
+                            translations: state.translations.validatedValue,
+                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                        },
+                    },
+                    {
+                        id: true,
+                    },
+                ],
+            })
+                .then((res) => {
+                if (productId)
+                    return apiClient('mutation')({
+                        addOptionGroupToProduct: [
+                            {
+                                productId,
+                                optionGroupId: res.createProductOptionGroup.id,
+                            },
+                            {
+                                id: true,
+                            },
+                        ],
+                    });
+            })
+                .then(() => {
+                toast(t('toasts.createOptionGroupSuccessToast'));
+                setOpen(false);
+                onSuccess();
+            })
+                .catch(() => {
+                toast(t('toasts.createOptionGroupErrorToast'));
+            });
+    }, [state.code, state.translations, productId, onSuccess, t]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { className: "self-end", children: t('addOptionGroupDialog.title') }) }), _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('addOptionGroupDialog.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.name') }), _jsx(Input, { className: "mt-1", value: state.translations?.value[0].name ?? undefined, onChange: (e) => {
+                                            setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+                                                name: e.target.value,
+                                                languageCode: currentTranslationLng,
+                                            }));
+                                            if (!codeEditedManually) {
+                                                setField('code', e.target.value.replace(/\s+/g, '-'));
+                                            }
+                                        } })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.code') }), _jsx(Input, { className: "mt-1", value: state.code?.value, onChange: (e) => {
+                                            setCodeEditedManually(true);
+                                            setField('code', e.target.value);
+                                        } })] }), _jsx(EntityCustomFields, { id: undefined, entityName: "productOptionGroup", hideButton: true, onChange: (cf) => {
+                                    setField('customFields', cf);
+                                }, additionalData: {}, withoutBorder: true })] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { onClick: () => setOpen(false), children: t('addOptionGroupDialog.cancel') }), _jsx(Button, { onClick: createGroup, children: t('addOptionGroupDialog.add') })] })] })] }));
+};

package/dist/pages/products/_components/AssetsCard.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropdownMenuItem, Label, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, apiClient, cn, CustomCard, CardIcons, AssetsModalInput, useTranslation, createDialogFromComponent, } from '@deenruv/react-ui-devkit';
+import { assetsSelector } from "../../../graphql/base";
+import { ImageOff } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { EditAssetDialog } from "../../assets/_components/EditAssetDialog.js";
+export const AssetsCard = ({ featuredAssetId, assetsIds, onAddAsset, onFeaturedAssetChange, onAssetsChange, }) => {
+    const { t } = useTranslation('products');
+    const [featureAsset, setFeatureAsset] = useState();
+    const [assets, setAssets] = useState([]);
+    const getAsset = useCallback(async (id) => {
+        const response = await apiClient('query')({
+            asset: [{ id: id }, assetsSelector],
+        });
+        return response.asset;
+    }, [assetsIds]);
+    useEffect(() => {
+        if (featuredAssetId)
+            getAsset(featuredAssetId).then((a) => setFeatureAsset(a));
+    }, [featuredAssetId]);
+    useEffect(() => {
+        const promises = [];
+        if (assetsIds)
+            assetsIds.forEach((id) => promises.push(getAsset(id)));
+        Promise.all(promises).then((assets) => {
+            const existingAssets = assets.filter((item) => item !== undefined);
+            setAssets(existingAssets);
+        });
+    }, [assetsIds?.toString()]);
+    const handleRemoveAsset = useCallback((id) => {
+        const newAssets = assetsIds?.filter((aId) => aId !== id);
+        onAssetsChange(newAssets || []);
+    }, [assetsIds, onAssetsChange]);
+    return (_jsx(CustomCard, { title: t('assets'), color: "green", icon: _jsx(CardIcons.asset, {}), children: _jsx("div", { className: "flex flex-col gap-6", children: _jsxs("div", { className: "flex gap-6", children: [_jsxs("div", { children: [_jsx(Label, { children: t('details.featuredAsset') }), _jsxs("div", { className: "flex flex-col pt-3", children: [_jsx("div", { className: "mb-4 flex h-36 min-w-36 items-center justify-center border border-solid border-gray-300 p-2 shadow", children: featureAsset?.preview ? (_jsx("img", { src: featureAsset.preview, className: "h-32", alt: "Main image preview" })) : (_jsxs("div", { className: "flex size-full flex-col items-center justify-center gap-2 bg-gray-200 p-3", children: [_jsx(ImageOff, { size: 32 }), t('details.noFeaturedAsset')] })) }), _jsx(AssetsModalInput, { setValue: (a) => onAddAsset(a?.id) })] })] }), _jsxs("div", { children: [_jsx(Label, { children: t('details.otherAssets') }), _jsx("div", { className: "flex gap-3 pt-3", children: assets?.length ? (assets.map((asset) => (_jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("div", { className: cn('flex h-20 min-w-20 cursor-pointer items-center justify-center border border-solid border-gray-300 p-2 shadow', asset.id === featuredAssetId && 'border-2 border-blue-500'), children: asset?.preview && _jsx("img", { src: asset.preview, className: "h-16" }) }) }), _jsx(DropdownMenuContent, { className: "w-56", side: "bottom", align: "end", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuItem, { onClick: () => createDialogFromComponent(EditAssetDialog, asset, { className: 'max-w-4xl' }), children: t('details.editAsset') }), _jsx(DropdownMenuItem, { onClick: () => onFeaturedAssetChange(asset.id), children: t('details.setAsFeatured') }), _jsx(DropdownMenuItem, { onClick: () => handleRemoveAsset(asset.id), children: t('details.removeAsset') })] }) })] }, asset.id)))) : (_jsx("p", { children: t('details.noAssets') })) })] })] }) }) }));
+};

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

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

package/dist/pages/products/_components/ChannelsCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation, Badge, CardIcons, CustomCard, DEFAULT_CHANNEL_CODE } from '@deenruv/react-ui-devkit';
+export const ChannelsCard = ({ channels }) => {
+    const { t } = useTranslation(['products', 'channels']);
+    return (_jsx(CustomCard, { title: t('products:channels'), color: "orange", icon: _jsx(CardIcons.default, {}), children: _jsx("div", { className: "flex flex-wrap gap-2", children: channels.map((p) => (_jsx(Badge, { children: p.code === DEFAULT_CHANNEL_CODE ? t('channels:defaultChannel') : p.code }, p.id))) }) }));
+};

package/dist/pages/products/_components/CollectionsCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation, Badge, CardIcons, CustomCard } from '@deenruv/react-ui-devkit';
+export const CollectionsCard = ({ collections }) => {
+    const { t } = useTranslation('products');
+    return (_jsx(CustomCard, { title: t('collections'), color: "teal", icon: _jsx(CardIcons.group, {}), children: _jsx("div", { className: "flex flex-wrap gap-2", children: collections.map((c) => (_jsx(Badge, { variant: "secondary", children: c.name }, c.slug))) }) }));
+};

package/dist/pages/products/_components/Container.js

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

package/dist/pages/products/_components/DiscountRatingCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Input, Card, CardHeader, CardTitle, CardContent } from '@deenruv/react-ui-devkit';
+export const DiscountRatingCard = ({ discountByValue, onDiscountByChange, searchMetricsScoreValue, onSearchMetricsScoreChange, }) => {
+    const { t } = useTranslation('products');
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: t('customFields.discountRating.title') }) }), _jsx(CardContent, { children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Input, { type: "number", step: 0.01, label: t('customFields.discountRating.discountedBy'), placeholder: t('customFields.discountRating.discountedBy'), value: discountByValue, onChange: onDiscountByChange }), _jsx(Input, { type: "number", label: t('customFields.discountRating.rating'), placeholder: t('customFields.discountRating.rating'), value: searchMetricsScoreValue, onChange: onSearchMetricsScoreChange })] }) })] }));
+};

package/dist/pages/products/_components/FacetValuesCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslation, CardIcons, CustomCard, FacetIdsSelector } from '@deenruv/react-ui-devkit';
+export const FacetValuesCard = ({ facetValuesIds, onChange }) => {
+    const { t } = useTranslation('products');
+    return (_jsx(CustomCard, { title: t('facets'), color: "indigo", icon: _jsx(CardIcons.tag, {}), children: _jsx(FacetIdsSelector, { fixedDropdown: true, facetValuesIds: facetValuesIds, onChange: (options) => onChange(options) }) }));
+};

package/dist/pages/products/_components/ImagesCard.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation, Card, CardHeader, CardTitle, CardContent, } from '@deenruv/react-ui-devkit';
+export const ImagesCard = ({ customFields, onMainImageChange, onHoverImageChange }) => {
+    const { t } = useTranslation('products');
+    return (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: t('details.image') }) }), _jsx(CardContent, { children: _jsx("div", { className: "flex flex-col gap-6" }) })] }));
+};