@deenruv/admin-dashboard 1.0.0

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

@@ -0,0 +1,93 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DeletionResult } from '@deenruv/admin-types';
+import { useTranslation, Button, MultipleSelector, TableCell, TableRow, apiClient, } from '@deenruv/react-ui-devkit';
+import { Trash } from 'lucide-react';
+import { useCallback, useState } from 'react';
+import { toast } from 'sonner';
+export const OptionGroup = ({ group, productId, contentLanguage, optionsUsedByVariants, onActionCompleted, }) => {
+    const { t } = useTranslation('products');
+    const [state, setState] = useState(group.options
+        ?.sort((a, b) => a.id.localeCompare(b.id))
+        .map((o) => ({ label: o.name, value: o.id, ...(optionsUsedByVariants.includes(o.id) && { fixed: true }) })));
+    const removeGroup = useCallback((optionGroupId) => {
+        if (!productId)
+            return;
+        apiClient('mutation')({
+            removeOptionGroupFromProduct: [
+                { optionGroupId, productId: productId },
+                { '...on Product': { id: true }, '...on ProductOptionInUseError': { message: true } },
+            ],
+        })
+            .then(() => {
+            toast(t('toasts.deletionOptionSuccessToast'));
+            onActionCompleted();
+        })
+            .catch(() => {
+            toast.error(t('toasts.deletionOptionErrorToast'));
+        });
+    }, [productId, onActionCompleted, t]);
+    const addOption = useCallback((option, optionGroupId) => {
+        if (!productId)
+            return;
+        apiClient('mutation')({
+            createProductOption: [
+                {
+                    input: {
+                        code: option.label.replace(/\s/g, ''),
+                        productOptionGroupId: optionGroupId,
+                        translations: [{ languageCode: contentLanguage, name: option.label }],
+                    },
+                },
+                { id: true },
+            ],
+        })
+            .then(() => {
+            toast(t('toasts.createOptionSuccessToast'));
+            onActionCompleted();
+        })
+            .catch(() => {
+            toast(t('toasts.createOptionErrorToast'));
+        });
+    }, [productId, contentLanguage, t]);
+    const deleteOption = useCallback((optionId) => {
+        if (!productId)
+            return;
+        apiClient('mutation')({
+            deleteProductOption: [
+                {
+                    id: optionId,
+                },
+                {
+                    result: true,
+                },
+            ],
+        })
+            .then((resp) => {
+            if (resp.deleteProductOption.result === DeletionResult.DELETED) {
+                toast(t('toasts.createOptionSuccessToast'));
+                onActionCompleted();
+            }
+            else {
+                toast.error(t('toasts.createOptionInUseToast'));
+            }
+        })
+            .catch(() => {
+            toast.error(t('toasts.createOptionErrorToast'));
+        });
+    }, [productId, contentLanguage, t]);
+    const handleChange = useCallback((currentOptions, optionGroupId) => {
+        const added = group?.options.length < currentOptions.length;
+        if (added) {
+            setState(currentOptions);
+            const newOption = currentOptions[currentOptions.length - 1];
+            addOption(newOption, optionGroupId);
+        }
+        else {
+            const unpickedOption = state.find((o) => !currentOptions.includes(o));
+            if (unpickedOption) {
+                deleteOption(unpickedOption.value);
+            }
+        }
+    }, [group, addOption]);
+    return (_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: group.name }), _jsx(TableCell, { children: _jsx(MultipleSelector, { className: "h-20", value: state, placeholder: t('optionsTab.placeholder'), onChange: (e) => handleChange(e, group.id), options: [], hideClearAllButton: true, creatable: true }) }), _jsx(TableCell, { className: "w-12", children: _jsx(Button, { size: 'icon', variant: 'outline', className: "size-8", onClick: () => removeGroup(group.id), children: _jsx(Trash, { size: 20, className: "text-red-600" }) }) })] }, group.id));
+};

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { Button, Input, Card, CardHeader, CardTitle, CardContent, apiClient, useGFFLP, setInArrayBy, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+export const OptionValueCard = ({ productOption, onEdited, currentTranslationLng, optionGroupId, }) => {
+    const { t } = useTranslation('products');
+    const { state, setField } = useGFFLP('UpdateProductOptionInput', 'code', 'translations', 'customFields')({});
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    useEffect(() => {
+        setField('code', productOption.code);
+        setField('translations', productOption.translations);
+        if ('customFields' in productOption) {
+            setField('customFields', productOption.customFields);
+        }
+    }, [productOption]);
+    const editOption = useCallback(() => {
+        if (productOption.id) {
+            console.log('INPUT', {
+                id: productOption.id,
+                code: state.code?.validatedValue,
+                customFields: state.customFields?.validatedValue,
+                translations: state.translations?.validatedValue,
+            });
+            return apiClient('mutation')({
+                updateProductOption: [
+                    {
+                        input: {
+                            id: productOption.id,
+                            code: state.code?.validatedValue,
+                            customFields: state.customFields?.validatedValue,
+                            translations: state.translations?.validatedValue,
+                        },
+                    },
+                    { id: true },
+                ],
+            })
+                .then(() => {
+                toast(t('toasts.updateOptionSuccessToast'));
+                onEdited();
+            })
+                .catch(() => {
+                toast(t('toasts.updateOptionErrorToast'));
+            });
+        }
+    }, [state, productOption, t, onEdited]);
+    return (_jsxs(Card, { className: "flex-grow basis-1/5", children: [_jsx(CardHeader, { children: _jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: productOption.name }) }), _jsxs(CardContent, { children: [_jsx("div", { className: "flex flex-col justify-between gap-6", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Input, { label: "name", value: currentTranslationValue?.name ?? undefined, onChange: (e) => {
+                                        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+                                            name: e.target.value,
+                                            languageCode: currentTranslationLng,
+                                        }));
+                                    } }), _jsx(Input, { label: "code", value: state.code?.value ?? undefined, onChange: (e) => {
+                                        setField('code', e.target.value);
+                                    } }), _jsx(EntityCustomFields, { entityName: "productOption", withoutBorder: true, id: productOption.id, currentLanguage: currentTranslationLng, initialValues: state && 'customFields' in state
+                                        ? { customFields: state.customFields?.validatedValue }
+                                        : { customFields: {} }, onChange: (cf) => {
+                                        setField('customFields', cf);
+                                    }, additionalData: {} })] }) }), _jsx(Button, { size: 'sm', className: "mt-4", onClick: editOption, children: t('editOption') })] })] }));
+};

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

@@ -0,0 +1,38 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { Table, TableBody, TableCell, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, apiClient, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+import { OptionGroupSelector } from "../../../graphql/products";
+import { toast } from 'sonner';
+export const OptionsCard = ({ optionGroups: options, productId, onChange, optionIds, createMode, }) => {
+    const { t } = useTranslation('products');
+    const [optionGroups, setOptionGroups] = useState();
+    const fetchOptionGroups = useCallback(async () => {
+        if (productId) {
+            const response = await apiClient('query')({
+                product: [
+                    {
+                        id: productId,
+                    },
+                    {
+                        optionGroups: OptionGroupSelector,
+                    },
+                ],
+            });
+            setOptionGroups(response.product?.optionGroups);
+            if (!response.product) {
+                toast.error(t('toasts.fetchProductErrorToast'));
+            }
+        }
+    }, [productId]);
+    useEffect(() => {
+        fetchOptionGroups();
+    }, [fetchOptionGroups]);
+    const handleOptionChange = useCallback((optionId, groupIdx) => {
+        const newState = [...(optionIds || [])];
+        newState[groupIdx] = optionId;
+        onChange(newState);
+    }, [optionIds, onChange]);
+    return (_jsx(CustomCard, { title: t('options'), icon: _jsx(CardIcons.options, {}), color: "orange", children: !createMode ? (_jsx(Table, { children: _jsx(TableBody, { children: options?.map((o) => (_jsxs(TableRow, { children: [_jsxs(TableCell, { className: "font-semibold capitalize", children: [o.group.name, ":"] }), _jsx(TableCell, { className: "capitalize", children: o.name })] }, o.name))) }) })) : (optionGroups?.map((group, i) => (_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "w-1/3 font-semibold", children: [group.name, ":"] }), _jsx("div", { className: "w-2/3", children: _jsxs(Select, { value: optionIds?.[i] || '', onValueChange: (e) => {
+                            handleOptionChange(e, i);
+                        }, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: t('addVariantDialog.selectOption') }) }), _jsx(SelectContent, { children: group.options.map((o) => (_jsx(SelectItem, { value: o.id, className: "capitalize", children: o.name }, o.id))) })] }) })] }, group.name)))) }));
+};

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

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { OptionGroupSelector } from "../../../graphql/products";
+import { useCallback, useEffect, useState } from 'react';
+import { Table, TableBody, TableHead, TableHeader, TableRow, useDetailView, apiClient, useSettings, EmptyState, CustomCard, CardIcons, Separator, useTranslation, } from '@deenruv/react-ui-devkit';
+import { toast } from 'sonner';
+import { AddOptionGroupDialog } from "./AddOptionGroupDialog";
+import { OptionValueCard } from "./OptionValueCard";
+import { OptionGroup } from "./OptionGroup";
+import { Info } from 'lucide-react';
+export const OptionsTab = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const { id, getMarker, setLoading } = useDetailView('products-detail-view', 'CreateProductInput');
+    const { t } = useTranslation('products');
+    const [optionGroups, setOptionGroups] = useState();
+    const [optionsUsedByVariants, setOptionsUsedByVariants] = useState([]);
+    const fetchOptionGroups = useCallback(async () => {
+        setLoading(true);
+        if (id) {
+            const response = await apiClient('query')({
+                product: [{ id }, { optionGroups: OptionGroupSelector, variants: { options: { id: true } } }],
+            });
+            setOptionGroups(response.product?.optionGroups);
+            setOptionsUsedByVariants(response.product?.variants.flatMap((v) => v.options.map((o) => o.id)) || []);
+            setLoading(false);
+            if (!response.product) {
+                toast.error(t('toasts.fetchProductErrorToast'));
+            }
+        }
+    }, [id]);
+    useEffect(() => {
+        fetchOptionGroups();
+    }, [fetchOptionGroups]);
+    return (_jsx("div", { className: "flex flex-col items-end", children: _jsxs("div", { className: "flex w-full flex-col gap-3", children: [getMarker(), _jsx(CustomCard, { title: t('optionGroups'), color: "purple", icon: _jsx(CardIcons.group, {}), upperRight: _jsx(AddOptionGroupDialog, { currentTranslationLng: contentLng, onSuccess: fetchOptionGroups, productId: id }), children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { children: t('optionsTab.groupName') }), _jsx(TableHead, { children: t('optionsTab.values') }), _jsx(TableHead, {})] }) }), _jsx(TableBody, { children: id && optionGroups?.length ? (optionGroups
+                                    ?.sort((a, b) => a.id.localeCompare(b.id))
+                                    ?.map((group) => (_jsx(OptionGroup, { contentLanguage: contentLng, group: group, productId: id, onActionCompleted: fetchOptionGroups, optionsUsedByVariants: optionsUsedByVariants })))) : (_jsx(EmptyState, { columnsLength: 2, title: t('optionsTab.emptyState.title'), description: t('optionsTab.emptyState.description') })) })] }) }), _jsx(Separator, {}), optionGroups
+                    ?.sort((a, b) => a.id.localeCompare(b.id))
+                    ?.map((oG) => (_jsx(CustomCard, { variant: "group", title: `${t('group')}: ${oG.name}`, icon: _jsx(CardIcons.default, {}), collapsed: true, notCollapsible: !oG.options.length, upperRight: !oG.options.length && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Info, { className: "size-4" }), t('optionsTab.noOptionValues')] })), children: _jsx("div", { className: "grid grid-cols-4 gap-3", children: oG.options
+                            ?.sort((a, b) => a.id.localeCompare(b.id))
+                            .map((o) => (_jsx(OptionValueCard, { currentTranslationLng: contentLng, productOption: o, optionGroupId: oG.id, onEdited: fetchOptionGroups }, o.id))) }) }, oG.id)))] }) }));
+};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, apiClient, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useState } from 'react';
+export const PriceCard = ({ priceValue, onPriceChange, currencyCode, taxRateValue, onTaxRateChange, }) => {
+    const { t } = useTranslation('products');
+    const [taxCategories, setTaxCategories] = useState([]);
+    const [currentTaxCategory, setCurrentTaxCategory] = useState();
+    useEffect(() => {
+        fetchTaxRates();
+    }, []);
+    const fetchTaxRates = useCallback(async () => {
+        const response = await apiClient('query')({
+            taxCategories: [{}, { items: { id: true, name: true } }],
+            taxRates: [{}, { items: { value: true, category: { id: true } } }],
+        });
+        const categoriesWithRates = response.taxCategories.items.map((c) => ({
+            ...c,
+            value: response.taxRates.items.find((r) => r.category.id === c.id)?.value,
+        }));
+        setTaxCategories(categoriesWithRates);
+    }, []);
+    const handlePriceChange = useCallback((currencyCode, value) => {
+        const newPrices = priceValue?.map((p) => (p.currencyCode === currencyCode ? { ...p, price: value } : p));
+        onPriceChange(newPrices || []);
+    }, [priceValue, onPriceChange]);
+    return (_jsx(CustomCard, { title: t('details.price'), color: "rose", icon: _jsx(CardIcons.calc, {}), children: _jsxs("div", { className: "flex flex-col gap-y-4", children: [priceValue?.map((price) => (_jsx("div", { className: "flex items-center gap-x-2", children: _jsx(Input, { type: "currency", placeholder: t('price'), value: price.price, onChange: (e) => handlePriceChange(price.currencyCode, +e.target.value), step: 0.01, startAdornment: price.currencyCode }) }, price.currencyCode))), _jsxs(Select, { value: taxRateValue, onValueChange: onTaxRateChange, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Tax rate" }) }), _jsx(SelectContent, { children: taxCategories.map((tR) => (_jsx(SelectItem, { value: tR.id.toString(), children: tR.name }, tR.id))) })] }), currentTaxCategory?.value !== undefined && `${t('details.taxRateDescription')} ${currentTaxCategory?.value}%`] }) }));
+};

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EntityChannelManager, Routes, useDetailView } from '@deenruv/react-ui-devkit';
+import { useEffect } from 'react';
+import { SettingsCard } from './SettingsCard';
+import { CollectionsCard } from "./CollectionsCard";
+import { FacetValuesCard } from "./FacetValuesCard";
+import { useNavigate } from 'react-router-dom';
+const PRODUCT_FORM_KEYS = [
+    'CreateProductInput',
+    'translations',
+    'assetIds',
+    'featuredAssetId',
+    'facetValueIds',
+    'enabled',
+];
+export const ProductDetailSidebar = ({ marker }) => {
+    const { form, entity } = useDetailView('products-detail-view', ...PRODUCT_FORM_KEYS);
+    const navigate = useNavigate();
+    const { base: { state, setField }, } = form;
+    useEffect(() => {
+        if (!entity) {
+            setField('facetValueIds', []);
+            setField('enabled', true);
+            return;
+        }
+        setField('facetValueIds', entity.facetValues.map((f) => f.id));
+        setField('enabled', entity.enabled);
+    }, [entity]);
+    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(SettingsCard, { enabledValue: state.enabled?.value ?? undefined, onEnabledChange: (e) => setField('enabled', e) }), _jsx(FacetValuesCard, { facetValuesIds: state.facetValueIds?.value ?? undefined, onChange: (e) => setField('facetValueIds', e) }), !!entity?.channels?.length && (_jsx(EntityChannelManager, { entity: "product", entityChannels: entity.channels, entityId: entity.id, onRemoveSuccess: () => navigate(Routes.products.list), entitySlug: entity.slug, entityName: entity.name })), !!entity?.collections?.length && _jsx(CollectionsCard, { collections: entity.collections })] }));
+};

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDetailView, DetailViewMarker, useSettings, setInArrayBy, EntityCustomFields, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useMemo } from 'react';
+import { BasicFieldsCard } from './BasicFieldsCard';
+import { AssetsCard } from './AssetsCard';
+export const PRODUCT_FORM_KEYS = [
+    'CreateProductInput',
+    'translations',
+    'assetIds',
+    'featuredAssetId',
+    'facetValueIds',
+    'enabled',
+    'customFields',
+];
+export const ProductDetailView = () => {
+    const contentLng = useSettings((p) => p.translationsLanguage);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
+    const { entity, id, form, loading, fetchEntity } = useDetailView('products-detail-view', ...PRODUCT_FORM_KEYS);
+    const { base: { setField, state }, } = form;
+    useEffect(() => {
+        (async () => {
+            const res = await fetchEntity();
+            if (!res)
+                return;
+            setField('translations', res.translations);
+            setField('assetIds', res.assets.map((a) => a.id));
+            setField('featuredAssetId', res.featuredAsset?.id);
+        })();
+    }, [selectedChannel?.id, contentLng]);
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = useMemo(() => {
+        return translations.find((v) => v.languageCode === contentLng);
+    }, [translations, contentLng]);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
+            ...currentTranslationValue,
+            [field]: e,
+            languageCode: contentLng,
+        }));
+    }, [contentLng, translations]);
+    const handleAddAsset = useCallback((newId) => {
+        if (!newId)
+            return;
+        const currentIds = state.assetIds?.value || [];
+        setField('assetIds', [...currentIds, newId]);
+    }, [state.assetIds?.value, setField]);
+    return (_jsx("div", { children: _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue, onChange: setTranslationField, errors: state.translations?.errors }), _jsx(DetailViewMarker, { position: 'products-detail-view' }), _jsx(EntityCustomFields, { id: id, entityName: "product", 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(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value, assetsIds: state.assetIds?.value, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) })] }) }));
+};

package/dist/pages/products/_components/SettingsCard.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 SettingsCard = ({ onEnabledChange, enabledValue }) => {
+    const { t } = useTranslation('products');
+    return (_jsx(CustomCard, { title: t('details.settings'), color: "gray", icon: _jsx(CardIcons.options, {}), 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/products/_components/StockCard.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Switch, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, DropdownMenuItem, Separator, apiClient, CustomCard, CardIcons, useTranslation, } from '@deenruv/react-ui-devkit';
+import { GlobalFlag } from '@deenruv/admin-types';
+import { MapPin } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export const StockCard = ({ outOfStockThresholdValue, stockOnHandValue, useGlobalOutOfStockThresholdValue, trackInventoryValue, stockAllocated, stockLevelsValue, allStockLocations, onThresholdChange, onUseGlobalChange, onTrackInventoryChange, onStockOnHandChange, onStockLocationsChange, }) => {
+    const { t } = useTranslation('products');
+    const [stockLocations, setStockLocations] = useState([]);
+    const notUsedStockLocations = useMemo(() => stockLocations.filter((sL) => stockLevelsValue?.findIndex((v) => v.stockLocationId === sL.id) === -1), [stockLocations, stockLevelsValue]);
+    const fetchStockLocations = useCallback(async () => {
+        const response = await apiClient('query')({
+            stockLocations: [
+                {},
+                {
+                    items: {
+                        id: true,
+                        name: true,
+                    },
+                },
+            ],
+        });
+        setStockLocations(response.stockLocations.items);
+    }, []);
+    useEffect(() => {
+        fetchStockLocations();
+    }, [fetchStockLocations]);
+    const handleChangeStockLocation = useCallback((location) => {
+        const newLevels = stockLevelsValue ? [...stockLevelsValue] : [];
+        const elementIdx = newLevels.findIndex((l) => l.stockLocationId === location.stockLocationId);
+        if (elementIdx !== -1) {
+            newLevels[elementIdx].stockOnHand = location.stockOnHand;
+        }
+        else {
+            newLevels.push(location);
+        }
+        onStockLocationsChange(newLevels);
+    }, [onStockLocationsChange, stockLevelsValue]);
+    const getLocationAllocatedValue = useCallback((id) => allStockLocations?.find((e) => e.stockLocationId === id)?.stockAllocated, [allStockLocations]);
+    return (_jsx(CustomCard, { title: t('details.stockLevels'), color: "blue", icon: _jsx(CardIcons.stock, {}), children: _jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsxs("div", { className: "flex items-start justify-start gap-x-4", children: [_jsx("div", { className: "w-1/2", children: _jsx(Input, { type: "number", placeholder: t('details.outThreshold'), label: t('details.outThreshold'), value: outOfStockThresholdValue ?? undefined, onChange: onThresholdChange }) }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Label, { children: t('details.useGlobal') }), _jsx(Switch, { checked: useGlobalOutOfStockThresholdValue ?? undefined, onCheckedChange: onUseGlobalChange })] })] }), _jsxs("div", { className: "flex flex-col items-start justify-start gap-2", children: [_jsx(Label, { children: t('details.trackInventory') }), _jsxs(Select, { value: trackInventoryValue ?? undefined, onValueChange: (value) => onTrackInventoryChange(value), children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, {}) }), _jsxs(SelectContent, { children: [_jsx(SelectItem, { value: GlobalFlag.INHERIT, children: t('details.inherit') }), _jsx(SelectItem, { value: GlobalFlag.TRUE, children: t('details.track') }), _jsx(SelectItem, { value: GlobalFlag.FALSE, children: t('details.notTrack') })] })] })] }), _jsx(Separator, { orientation: "horizontal" }), _jsxs("div", { className: "flex items-start justify-start gap-4", children: [_jsx("div", { className: "w-1/2", children: _jsx(Input, { type: "number", label: t('details.defaultStock1'), value: stockOnHandValue ?? undefined, disabled: true }) }), _jsxs("div", { className: "flex w-1/2 flex-col gap-3", children: [_jsx(Label, { children: t('details.defaultStock2') }), stockAllocated] })] }), stockLevelsValue?.map((sL) => (_jsxs("div", { className: "flex items-start justify-start gap-4", children: [_jsx("div", { className: "w-1/2", children: _jsx(Input, { type: "number", label: `Stock location: ${stockLocations.find((l) => l.id === sL.stockLocationId)?.name}`, value: sL.stockOnHand, onChange: (e) => handleChangeStockLocation({ stockLocationId: sL.stockLocationId, stockOnHand: +e.target.value }) }) }), _jsxs("div", { className: "flex w-1/2 flex-col gap-3", children: [_jsx(Label, { children: "Allocated" }), getLocationAllocatedValue(sL.stockLocationId)] })] }, 'inputs' + sL.stockLocationId))), _jsx("div", { className: "flex", children: _jsxs(DropdownMenu, { modal: false, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: !notUsedStockLocations.length, children: _jsx(Button, { size: 'sm', className: "mt-4", children: t('details.addStockLocation') }) }), _jsx(DropdownMenuContent, { className: "w-56", side: "bottom", align: "end", children: _jsx(DropdownMenuGroup, { children: notUsedStockLocations.map((sL) => (_jsxs(DropdownMenuItem, { onClick: () => handleChangeStockLocation({ stockLocationId: sL.id, stockOnHand: 0 }), children: [_jsx(MapPin, { className: "mr-2" }), sL.name] }, 'dropdown' + sL.id))) }) })] }) })] }) }));
+};

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

@@ -0,0 +1,149 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CardIcons, ConfirmationDialog, CustomCard, Input, apiClient, setInArrayBy, useGFFLP, EntityCustomFields, useTranslation, EntityChannelManager, } from '@deenruv/react-ui-devkit';
+import { CurrencyCode } from '@deenruv/admin-types';
+import { useCallback, useEffect } from 'react';
+import { toast } from 'sonner';
+import { AssetsCard } from "./AssetsCard";
+import { PriceCard } from "./PriceCard";
+import { StockCard } from "./StockCard";
+import { OptionsCard } from "./OptionsCard";
+import { FacetValuesCard } from "./FacetValuesCard";
+export const Variant = ({ variant, currentTranslationLng, onActionCompleted, productId }) => {
+    const { t } = useTranslation('products');
+    const { state, setField } = useGFFLP('UpdateProductVariantInput', 'translations', 'price', 'prices', 'sku', 'assetIds', 'featuredAssetId', 'taxCategoryId', 'stockLevels', 'stockOnHand', 'outOfStockThreshold', 'useGlobalOutOfStockThreshold', 'trackInventory', 'facetValueIds', 'optionIds', 'customFields')({});
+    const translations = state?.translations?.value || [];
+    const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    useEffect(() => {
+        if (!variant)
+            return;
+        setField('sku', variant.sku);
+        setField('price', variant.price);
+        setField('prices', variant.prices);
+        setField('translations', variant.translations);
+        setField('assetIds', variant.assets.map((a) => a.id));
+        setField('featuredAssetId', variant.featuredAsset?.id);
+        setField('taxCategoryId', variant.taxCategory.id);
+        setField('stockLevels', variant.stockLevels.map((sL) => ({ stockLocationId: sL.stockLocationId, stockOnHand: sL.stockOnHand })));
+        setField('stockOnHand', variant.stockOnHand);
+        setField('outOfStockThreshold', variant.outOfStockThreshold);
+        setField('useGlobalOutOfStockThreshold', variant.useGlobalOutOfStockThreshold);
+        setField('trackInventory', variant.trackInventory);
+        setField('facetValueIds', variant.facetValues.map((f) => f.id));
+    }, [variant]);
+    const createVariant = useCallback(() => {
+        if (productId && state.sku?.validatedValue && state.translations?.validatedValue)
+            return apiClient('mutation')({
+                createProductVariants: [
+                    {
+                        input: [
+                            {
+                                productId,
+                                translations: state.translations?.validatedValue,
+                                // price: +state.price?.validatedValue,
+                                prices: state.prices?.validatedValue,
+                                sku: state.sku?.validatedValue,
+                                assetIds: state.assetIds?.validatedValue,
+                                featuredAssetId: state.featuredAssetId?.validatedValue,
+                                outOfStockThreshold: state.outOfStockThreshold?.validatedValue,
+                                stockOnHand: state.stockOnHand?.validatedValue,
+                                trackInventory: state.trackInventory?.validatedValue,
+                                taxCategoryId: state.taxCategoryId?.validatedValue,
+                                useGlobalOutOfStockThreshold: state.useGlobalOutOfStockThreshold?.validatedValue,
+                                stockLevels: state.stockLevels?.validatedValue,
+                                facetValueIds: state.facetValueIds?.validatedValue,
+                                optionIds: state.optionIds?.validatedValue,
+                                ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                            },
+                        ],
+                    },
+                    {
+                        id: true,
+                    },
+                ],
+            })
+                .then(() => {
+                toast(t('toasts.createProductVariantSuccessToast'));
+                onActionCompleted();
+            })
+                .catch(() => {
+                toast(t('toasts.createProductVariantErrorToast'));
+            });
+    }, [state, productId, onActionCompleted, t]);
+    const updateVariant = useCallback(() => {
+        if (!variant)
+            return;
+        apiClient('mutation')({
+            updateProductVariants: [
+                {
+                    input: [
+                        {
+                            id: variant.id,
+                            translations: state.translations?.validatedValue,
+                            // price: +state.price?.validatedValue,
+                            prices: state.prices?.validatedValue,
+                            sku: state.sku?.validatedValue,
+                            assetIds: state.assetIds?.validatedValue,
+                            featuredAssetId: state.featuredAssetId?.validatedValue,
+                            outOfStockThreshold: state.outOfStockThreshold?.validatedValue,
+                            stockOnHand: state.stockOnHand?.validatedValue,
+                            trackInventory: state.trackInventory?.validatedValue,
+                            taxCategoryId: state.taxCategoryId?.validatedValue,
+                            useGlobalOutOfStockThreshold: state.useGlobalOutOfStockThreshold?.validatedValue,
+                            stockLevels: state.stockLevels?.validatedValue,
+                            facetValueIds: state.facetValueIds?.validatedValue,
+                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                        },
+                    ],
+                },
+                { id: true },
+            ],
+        })
+            .then(() => {
+            onActionCompleted();
+            toast(t('toasts.updateProductSuccessToast'), {
+                description: new Date().toLocaleString(),
+            });
+        })
+            .catch(() => toast.error(t('toasts.updateProductErrorToast')));
+    }, [state, variant]);
+    const deleteVariant = useCallback(() => {
+        if (!variant)
+            return;
+        apiClient('mutation')({
+            deleteProductVariant: [{ id: variant.id }, { message: true }],
+        })
+            .then(() => {
+            onActionCompleted();
+            toast(t('toasts.deleteProductVariantSuccessToast'), {
+                description: new Date().toLocaleString(),
+            });
+        })
+            .catch(() => toast.error(t('toasts.deleteProductVariantErrorToast')));
+    }, [variant]);
+    const setTranslationField = useCallback((field, e) => {
+        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+            [field]: e.target.value,
+            languageCode: currentTranslationLng,
+        }));
+    }, [currentTranslationLng, translations]);
+    const handleAddAsset = (id) => {
+        if (!id)
+            return;
+        const newIds = state.assetIds?.value || [];
+        if (newIds?.includes(id))
+            return;
+        newIds?.push(id);
+        setField('assetIds', newIds);
+    };
+    return (_jsxs("div", { className: "mt-4 flex flex-col gap-4", children: [_jsx("div", { className: "flex gap-3 self-end", children: variant ? (_jsxs(_Fragment, { children: [_jsx(ConfirmationDialog, { onConfirm: deleteVariant, children: _jsx(Button, { variant: 'destructive', children: t('forms.removeVariant') }) }), _jsx(Button, { onClick: updateVariant, children: t('forms.updateVariant') })] })) : (_jsx(Button, { onClick: createVariant, children: t('addVariantDialog.add') })) }), _jsxs("div", { className: "flex gap-4", children: [_jsxs("div", { className: "flex w-2/3 flex-col gap-4", children: [!!variant && (_jsx(StockCard, { priceValue: state.price?.value, taxRateValue: state.taxCategoryId?.value, outOfStockThresholdValue: state.outOfStockThreshold?.value, stockLevelsValue: state.stockLevels?.value, stockOnHandValue: state.stockOnHand?.value, useGlobalOutOfStockThresholdValue: state.useGlobalOutOfStockThreshold?.value, onThresholdChange: (e) => setField('outOfStockThreshold', +e.target.value), onUseGlobalChange: (e) => setField('useGlobalOutOfStockThreshold', e), onTrackInventoryChange: (e) => setField('trackInventory', e), onStockOnHandChange: (e) => setField('stockOnHand', +e.target.value), onStockLocationsChange: (e) => setField('stockLevels', e), allStockLocations: variant?.stockLevels, stockAllocated: variant?.stockAllocated, trackInventoryValue: state.trackInventory?.value })), _jsx(PriceCard, { currencyCode: variant?.currencyCode || CurrencyCode.PLN, priceValue: state.prices?.value, onPriceChange: (e) => setField('prices', e), taxRateValue: state.taxCategoryId?.value ?? undefined, onTaxRateChange: (id) => setField('taxCategoryId', id) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value, assetsIds: state.assetIds?.value, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) }), _jsx(EntityCustomFields, { entityName: "productVariant", id: variant?.id, hideButton: true, onChange: (customFields, translations) => {
+                                    setField('customFields', customFields);
+                                    if (translations)
+                                        setField('translations', translations);
+                                }, initialValues: variant && 'customFields' in variant
+                                    ? { customFields: variant.customFields, translations: variant.translations }
+                                    : { customFields: {} } })] }), _jsxs("div", { className: "flex w-1/3 flex-col gap-4", children: [_jsx(CustomCard, { title: t('name'), icon: _jsx(CardIcons.basic, {}), color: "purple", children: _jsxs("div", { className: "flex flex-col gap-y-4", children: [_jsx(Input, { label: t('sku'), placeholder: t('sku'), value: state?.sku?.value ?? undefined, onChange: (e) => setField('sku', e.target.value) }), _jsx(Input, { label: t('name'), placeholder: t('name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e) })] }) }), _jsx(EntityChannelManager, { entity: "productVariant", entityId: variant?.id, entityChannels: variant?.channels ?? [], onRemoveSuccess: onActionCompleted, entityName: variant?.name, entityVariantList: {
+                                    items: [
+                                        { price: variant?.price, priceWithTax: variant?.priceWithTax, currencyCode: variant?.currencyCode },
+                                    ],
+                                } }), _jsx(OptionsCard, { optionGroups: variant?.options || [], productId: productId, optionIds: state.optionIds?.value ?? undefined, onChange: (e) => setField('optionIds', e), createMode: !variant }), !!variant && (_jsx(FacetValuesCard, { facetValuesIds: state.facetValueIds?.value ?? undefined, onChange: (e) => setField('facetValueIds', e) }))] })] })] }));
+};

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

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { apiClient, EmptyState, Tabs, TabsContent, TabsList, TabsTrigger, useDetailView, useSettings, useTranslation, } from '@deenruv/react-ui-devkit';
+import { ProductVariantSelector } from "../../../graphql/products";
+import { Variant } from "./Variant";
+import { useCallback, useEffect, useState } from 'react';
+import { PlusCircle } from 'lucide-react';
+import { useSearchParams } from 'react-router-dom';
+const NEW_VARIANT_TAB_VALUE = 'new';
+export const VariantsTab = () => {
+    const contentLanguage = useSettings((p) => p.translationsLanguage);
+    const { id, getMarker, setLoading } = useDetailView('products-detail-view', 'CreateProductInput');
+    const [activeTab, setActiveTab] = useState(undefined);
+    const { t } = useTranslation('products');
+    const [searchParams, setSearchParams] = useSearchParams();
+    const handleTabChange = (tab) => {
+        setActiveTab(tab);
+        const updatedParams = new URLSearchParams(searchParams);
+        updatedParams.set('variantId', tab);
+        setSearchParams(updatedParams);
+    };
+    useEffect(() => {
+        const variantId = searchParams.get('variantId');
+        if (variantId)
+            setActiveTab(variantId);
+    }, []);
+    const [variants, setVariants] = useState();
+    const fetchData = useCallback(async () => {
+        if (id) {
+            setLoading(true);
+            const response = await apiClient('query')({
+                productVariants: [{ productId: id }, { items: ProductVariantSelector }],
+            });
+            setLoading(false);
+            if (response.productVariants) {
+                setVariants(response.productVariants.items);
+                if (activeTab === undefined) {
+                    setActiveTab(response.productVariants.items[0]?.id);
+                }
+            }
+        }
+    }, [id, activeTab]);
+    useEffect(() => {
+        fetchData();
+    }, [fetchData]);
+    return (_jsxs("div", { className: "flex flex-col", children: [getMarker(), _jsx("div", { className: "flex flex-col items-end gap-4", children: _jsxs(Tabs, { defaultValue: variants?.[0]?.id, className: "w-full", value: activeTab, onValueChange: handleTabChange, children: [_jsxs(TabsList, { className: "h-auto flex-wrap justify-start", children: [_jsxs(TabsTrigger, { value: NEW_VARIANT_TAB_VALUE, className: "text-blue-600", children: [_jsx(PlusCircle, { size: 16, className: "mr-2 translate-y-px" }), t('addVariantDialog.new')] }, 'new-variant'), variants?.map((v) => (_jsx(TabsTrigger, { value: v.id, children: v.name }, v.id + '-trigger')))] }), _jsx(TabsContent, { value: NEW_VARIANT_TAB_VALUE, children: id && _jsx(Variant, { currentTranslationLng: contentLanguage, onActionCompleted: fetchData, productId: id }) }, 'new-variant-content'), id && variants?.length ? (variants?.map((v) => (_jsx(TabsContent, { value: v.id, children: _jsx(Variant, { currentTranslationLng: contentLanguage, variant: v, onActionCompleted: fetchData, productId: id }) }, v.id + '-content')))) : (_jsx("div", { className: "flex w-full items-center justify-center", children: activeTab !== NEW_VARIANT_TAB_VALUE && (_jsx(EmptyState, { columnsLength: 1, title: t('variantsTab.emptyState.title'), description: t('variantsTab.emptyState.description') })) }))] }) })] }));
+};

package/dist/pages/products/index.js

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