@deenruv/admin-dashboard 1.0.16 → 1.0.17-dev.14

package/dist/pages/products/Detail.js

@@ -4,7 +4,7 @@ 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 { DEFAULT_CHANNEL_CODE, useTranslation, createDeenruvForm, DetailView, useMutation, useSettings, } from '@deenruv/react-ui-devkit';
 import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
 import { useMemo } from 'react';
 const EditProductMutation = typedGql('mutation', { scalars })({
@@ -13,6 +13,12 @@ const EditProductMutation = typedGql('mutation', { scalars })({
 const CreateProductMutation = typedGql('mutation', { scalars })({
     createProduct: [{ input: $('input', 'CreateProductInput!') }, { id: true }],
 });
+const CreateProductVariantsMutation = typedGql('mutation', { scalars })({
+    createProductVariants: [{ input: $('input', '[CreateProductVariantInput!]!') }, { id: true }],
+});
+const AssignProductVariantsToChannelMutation = typedGql('mutation', { scalars })({
+    assignProductVariantsToChannel: [{ input: $('input', 'AssignProductVariantsToChannelInput!') }, { id: true }],
+});
 const DeleteProductMutation = typedGql('mutation', { scalars })({
     deleteProduct: [{ id: $('id', 'ID!') }, { result: true }],
 });
@@ -21,7 +27,10 @@ export const ProductsDetailPage = () => {
     const { t } = useTranslation('products');
     const [update] = useMutation(EditProductMutation);
     const [create] = useMutation(CreateProductMutation);
+    const [createVariants] = useMutation(CreateProductVariantsMutation);
+    const [assignProductVariantsToChannel] = useMutation(AssignProductVariantsToChannelMutation);
     const [remove] = useMutation(DeleteProductMutation);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
     const defaultTabs = useMemo(() => {
         const tabs = [];
         if (id) {
@@ -48,19 +57,64 @@ export const ProductsDetailPage = () => {
                                     return [t('validation.nameSlugRequired')];
                             },
                         },
+                        ...{
+                            initialVariantSku: {
+                                validate: (v) => {
+                                    if (!id && (!v || typeof v !== 'string' || !v.trim())) {
+                                        return [t('validation.initialVariantSkuRequired')];
+                                    }
+                                },
+                            },
+                            initialVariantPrice: {
+                                initialValue: 0,
+                            },
+                            initialVariantName: {},
+                        },
                     },
-                    onSubmitted: (data) => {
+                    onSubmitted: async (data) => {
                         if (!data.translations)
                             throw new Error('Name is required.');
+                        const translations = data.translations;
                         const input = {
-                            translations: data.translations,
+                            translations,
                             assetIds: data.assetIds,
                             featuredAssetId: data.featuredAssetId,
                             facetValueIds: data.facetValueIds,
                             enabled: data.enabled,
                             ...(data.customFields ? { customFields: data.customFields } : {}),
                         };
-                        return id ? update({ input: { id, ...input } }) : create({ input: input });
+                        if (id)
+                            return update({ input: { id, ...input } });
+                        const response = await create({ input });
+                        const initialVariantName = typeof data.initialVariantName === 'string' ? data.initialVariantName.trim() : '';
+                        const initialVariantSku = typeof data.initialVariantSku === 'string' ? data.initialVariantSku.trim() : '';
+                        const initialVariantPrice = Number(data.initialVariantPrice ?? 0);
+                        const variantsResponse = await createVariants({
+                            input: [
+                                {
+                                    productId: response.createProduct.id,
+                                    translations: translations.map((translation) => ({
+                                        languageCode: translation.languageCode,
+                                        name: initialVariantName || translation.name || initialVariantSku,
+                                    })),
+                                    sku: initialVariantSku,
+                                    price: Number.isFinite(initialVariantPrice) ? initialVariantPrice : 0,
+                                },
+                            ],
+                        });
+                        const createdVariantId = variantsResponse.createProductVariants?.[0]?.id;
+                        if (createdVariantId &&
+                            selectedChannel?.id &&
+                            selectedChannel.code &&
+                            selectedChannel.code !== DEFAULT_CHANNEL_CODE) {
+                            await assignProductVariantsToChannel({
+                                input: {
+                                    productVariantIds: [createdVariantId],
+                                    channelId: selectedChannel.id,
+                                },
+                            });
+                        }
+                        return response;
                     },
                     onDeleted: () => {
                         if (id)

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

@@ -1,5 +1,5 @@
 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 { DropdownMenuItem, Label, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuTrigger, apiClient, cn, CustomCard, CardIcons, AssetsModalInput, AssetUploadButton, useTranslation, createDialogFromComponent, } from '@deenruv/react-ui-devkit';
 import { assetsSelector } from "../../../graphql/base";
 import { ImageOff } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
@@ -31,5 +31,18 @@ export const AssetsCard = ({ featuredAssetId, assetsIds, onAddAsset, onFeaturedA
         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') })) })] })] }) }) }));
+    const handleAssetAdded = useCallback((id) => {
+        if (!id)
+            return;
+        if (!assetsIds?.includes(id)) {
+            onAddAsset(id);
+        }
+        if (!featuredAssetId) {
+            onFeaturedAssetChange(id);
+        }
+    }, [assetsIds, featuredAssetId, onAddAsset, onFeaturedAssetChange]);
+    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')] })) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(AssetsModalInput, { setValue: (a) => handleAssetAdded(a?.id) }), _jsx(AssetUploadButton, { buttonProps: { size: 'sm' }, cb: (asset) => {
+                                                    handleAssetAdded(asset.id);
+                                                    return {};
+                                                }, children: t('details.uploadAsset') })] })] })] }), _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/OptionsCard.js

@@ -1,10 +1,12 @@
 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 { Table, TableBody, TableCell, TableRow, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, apiClient, CustomCard, CardIcons, useTranslation, useSettings, } from '@deenruv/react-ui-devkit';
 import { OptionGroupSelector } from "../../../graphql/products";
 import { toast } from 'sonner';
+import { AddOptionGroupDialog } from "./AddOptionGroupDialog";
 export const OptionsCard = ({ optionGroups: options, productId, onChange, optionIds, createMode, }) => {
     const { t } = useTranslation('products');
+    const contentLng = useSettings((p) => p.translationsLanguage);
     const [optionGroups, setOptionGroups] = useState();
     const fetchOptionGroups = useCallback(async () => {
         if (productId) {
@@ -23,7 +25,7 @@ export const OptionsCard = ({ optionGroups: options, productId, onChange, option
                 toast.error(t('toasts.fetchProductErrorToast'));
             }
         }
-    }, [productId]);
+    }, [productId, t]);
     useEffect(() => {
         fetchOptionGroups();
     }, [fetchOptionGroups]);
@@ -32,7 +34,7 @@ export const OptionsCard = ({ optionGroups: options, productId, onChange, option
         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)))) }));
+    return (_jsx(CustomCard, { title: t('options'), icon: _jsx(CardIcons.options, {}), color: "orange", upperRight: createMode ? (_jsx(AddOptionGroupDialog, { currentTranslationLng: contentLng, onSuccess: fetchOptionGroups, productId: productId })) : undefined, 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 === undefined ? null : optionGroups.length ? (_jsx("div", { className: "flex flex-col gap-3", children: 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))) })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: t('addVariantDialog.createOptionsHint') })) }));
 };

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

@@ -1,13 +1,20 @@
 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, }) => {
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export const PriceCard = ({ priceValue, onPriceChange, currencyCode, taxRateValue, onTaxRateChange, showDefaultPriceWhenEmpty = false, }) => {
     const { t } = useTranslation('products');
     const [taxCategories, setTaxCategories] = useState([]);
     const [currentTaxCategory, setCurrentTaxCategory] = useState();
+    const defaultPrice = useMemo(() => ({
+        currencyCode,
+        price: 0,
+    }), [currencyCode]);
+    const pricesToRender = useMemo(() => (priceValue?.length ? priceValue : showDefaultPriceWhenEmpty ? [defaultPrice] : []), [defaultPrice, priceValue, showDefaultPriceWhenEmpty]);
     useEffect(() => {
-        fetchTaxRates();
-    }, []);
+        if (showDefaultPriceWhenEmpty && !priceValue?.length) {
+            onPriceChange([defaultPrice]);
+        }
+    }, [defaultPrice, onPriceChange, priceValue?.length, showDefaultPriceWhenEmpty]);
     const fetchTaxRates = useCallback(async () => {
         const response = await apiClient('query')({
             taxCategories: [{}, { items: { id: true, name: true } }],
@@ -19,9 +26,15 @@ export const PriceCard = ({ priceValue, onPriceChange, currencyCode, taxRateValu
         }));
         setTaxCategories(categoriesWithRates);
     }, []);
+    useEffect(() => {
+        fetchTaxRates();
+    }, [fetchTaxRates]);
+    useEffect(() => {
+        setCurrentTaxCategory(taxCategories.find((category) => category.id === taxRateValue));
+    }, [taxCategories, taxRateValue]);
     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}%`] }) }));
+        const newPrices = pricesToRender.map((p) => (p.currencyCode === currencyCode ? { ...p, price: value } : p));
+        onPriceChange(newPrices);
+    }, [onPriceChange, pricesToRender]);
+    return (_jsx(CustomCard, { title: t('details.price'), color: "rose", icon: _jsx(CardIcons.calc, {}), children: _jsxs("div", { className: "flex flex-col gap-y-4", children: [pricesToRender.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/ProductDetailView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDetailView, DetailViewMarker, useSettings, setInArrayBy, EntityCustomFields, normalizeString, } from '@deenruv/react-ui-devkit';
+import { useDetailView, DetailViewMarker, useSettings, setInArrayBy, EntityCustomFields, normalizeString, CustomCard, CardIcons, Input, useTranslation, } from '@deenruv/react-ui-devkit';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { BasicFieldsCard } from './BasicFieldsCard';
 import { AssetsCard } from './AssetsCard';
@@ -13,9 +13,10 @@ export const PRODUCT_FORM_KEYS = [
     'customFields',
 ];
 export const ProductDetailView = () => {
+    const { t } = useTranslation('products');
     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 { entity, id, form, fetchEntity } = useDetailView('products-detail-view', ...PRODUCT_FORM_KEYS);
     const { base } = form;
     // --- Slug auto-generation ---
     // Track whether the user has manually edited the slug for the current language.
@@ -42,6 +43,7 @@ export const ProductDetailView = () => {
         })();
     }, [selectedChannel?.id, contentLng]);
     const translations = base.watch('translations') || [];
+    const initialVariantPrice = base.watch('initialVariantPrice') ?? 0;
     const currentTranslationValue = useMemo(() => {
         return translations.find((v) => v.languageCode === contentLng);
     }, [translations, contentLng]);
@@ -78,7 +80,9 @@ export const ProductDetailView = () => {
     }, [base, base.setField]);
     return (_jsx("div", { children: _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue, onChange: setTranslationField, onSlugManualEdit: handleSlugManualEdit, errors: base.formState.errors?.translations?.message
                         ? [base.formState.errors.translations.message]
-                        : undefined }), _jsx(DetailViewMarker, { position: 'products-detail-view' }), _jsx(EntityCustomFields, { id: id, entityName: "product", hideButton: true, onChange: (customFields, translations) => {
+                        : undefined }), !id && (_jsx(CustomCard, { title: t('initialVariant.title'), icon: _jsx(CardIcons.tag, {}), color: "rose", children: _jsxs("div", { className: "flex flex-col gap-4 pt-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('initialVariant.description') }), _jsxs("div", { className: "grid gap-4 md:grid-cols-3", children: [_jsx(Input, { label: t('initialVariant.sku'), value: base.watch('initialVariantSku') ?? '', onChange: (e) => base.setField('initialVariantSku', e.target.value), errors: base.formState.errors?.initialVariantSku?.message
+                                            ? [base.formState.errors.initialVariantSku.message]
+                                            : undefined, required: true }), _jsx(Input, { type: "currency", label: t('initialVariant.price'), value: initialVariantPrice, onChange: (e) => base.setField('initialVariantPrice', +e.target.value), startAdornment: selectedChannel?.currencyCode, step: 0.01 }), _jsx(Input, { label: t('initialVariant.name'), placeholder: t('initialVariant.namePlaceholder'), value: base.watch('initialVariantName') ?? '', onChange: (e) => base.setField('initialVariantName', e.target.value) })] })] }) })), _jsx(DetailViewMarker, { position: 'products-detail-view' }), _jsx(EntityCustomFields, { id: id, entityName: "product", hideButton: true, onChange: (customFields, translations) => {
                         base.setField('customFields', customFields);
                         if (translations)
                             base.setField('translations', translations);

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

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CardIcons, ConfirmationDialog, CustomCard, Input, apiClient, setInArrayBy, useDeenruvForm, z, EntityCustomFields, useTranslation, EntityChannelManager, } from '@deenruv/react-ui-devkit';
-import { CurrencyCode } from '@deenruv/admin-types';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, CardIcons, ConfirmationDialog, CustomCard, Input, apiClient, setInArrayBy, useDeenruvForm, z, EntityCustomFields, useTranslation, useSettings, EntityChannelManager, DEFAULT_CHANNEL_CODE, } from '@deenruv/react-ui-devkit';
+import { CurrencyCode, DeletionResult } from '@deenruv/admin-types';
 import { useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
 import { AssetsCard } from "./AssetsCard";
@@ -10,6 +10,7 @@ import { OptionsCard } from "./OptionsCard";
 import { FacetValuesCard } from "./FacetValuesCard";
 export const Variant = ({ variant, currentTranslationLng, onActionCompleted, productId }) => {
     const { t } = useTranslation('products');
+    const selectedChannel = useSettings((p) => p.selectedChannel);
     const variantSchema = z.object({
         translations: z.array(z.any()).default([]),
         price: z.any().optional(),
@@ -50,6 +51,8 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
     const formValues = form.watch();
     const translations = formValues.translations || [];
     const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
+    const variantDisplayName = currentTranslationValue?.name || variant?.name || t('addVariantDialog.new');
+    const variantDisplaySku = formValues.sku || variant?.sku;
     useEffect(() => {
         if (!variant)
             return;
@@ -67,18 +70,20 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
         form.setField('trackInventory', variant.trackInventory);
         form.setField('facetValueIds', variant.facetValues.map((f) => f.id));
     }, [variant]);
-    const createVariant = useCallback(() => {
+    const createVariant = useCallback(async () => {
         const values = form.getValues();
-        if (productId && values.sku && values.translations)
-            return apiClient('mutation')({
+        const firstPrice = Array.isArray(values.prices) ? values.prices[0]?.price : undefined;
+        if (!productId || !values.sku || !values.translations)
+            return;
+        try {
+            const response = await apiClient('mutation')({
                 createProductVariants: [
                     {
                         input: [
                             {
                                 productId,
                                 translations: values.translations,
-                                // price: +values.price,
-                                prices: values.prices,
+                                price: firstPrice,
                                 sku: values.sku,
                                 assetIds: values.assetIds,
                                 featuredAssetId: values.featuredAssetId,
@@ -100,15 +105,31 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
                         id: true,
                     },
                 ],
-            })
-                .then(() => {
-                toast(t('toasts.createProductVariantSuccessToast'));
-                onActionCompleted();
-            })
-                .catch(() => {
-                toast(t('toasts.createProductVariantErrorToast'));
             });
-    }, [form, productId, onActionCompleted, t]);
+            const createdVariantId = response.createProductVariants?.[0]?.id;
+            if (createdVariantId &&
+                selectedChannel?.id &&
+                selectedChannel.code &&
+                selectedChannel.code !== DEFAULT_CHANNEL_CODE) {
+                await apiClient('mutation')({
+                    assignProductVariantsToChannel: [
+                        {
+                            input: {
+                                productVariantIds: [createdVariantId],
+                                channelId: selectedChannel.id,
+                            },
+                        },
+                        { id: true },
+                    ],
+                });
+            }
+            toast(t('toasts.createProductVariantSuccessToast'));
+            onActionCompleted();
+        }
+        catch {
+            toast(t('toasts.createProductVariantErrorToast'));
+        }
+    }, [form, productId, selectedChannel?.id, selectedChannel?.code, onActionCompleted, t]);
     const updateVariant = useCallback(() => {
         if (!variant)
             return;
@@ -153,16 +174,22 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
         if (!variant)
             return;
         apiClient('mutation')({
-            deleteProductVariant: [{ id: variant.id }, { message: true }],
+            deleteProductVariant: [{ id: variant.id }, { message: true, result: true }],
         })
-            .then(() => {
-            onActionCompleted();
-            toast(t('toasts.deleteProductVariantSuccessToast'), {
-                description: new Date().toLocaleString(),
+            .then(({ deleteProductVariant }) => {
+            if (deleteProductVariant.result === DeletionResult.DELETED) {
+                onActionCompleted();
+                toast(t('toasts.deleteProductVariantSuccessToast'), {
+                    description: new Date().toLocaleString(),
+                });
+                return;
+            }
+            toast.error(t('toasts.deleteProductVariantErrorToast'), {
+                description: deleteProductVariant.message,
             });
         })
             .catch(() => toast.error(t('toasts.deleteProductVariantErrorToast')));
-    }, [variant]);
+    }, [variant, onActionCompleted, t]);
     const setTranslationField = useCallback((field, e) => {
         const currentValue = translations.find((t) => t.languageCode === currentTranslationLng);
         const baseTranslation = currentValue ?? {
@@ -183,15 +210,15 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
             return;
         form.setField('assetIds', [...newIds, id]);
     };
-    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: formValues.price, taxRateValue: formValues.taxCategoryId, outOfStockThresholdValue: formValues.outOfStockThreshold, stockLevelsValue: formValues.stockLevels, stockOnHandValue: formValues.stockOnHand, useGlobalOutOfStockThresholdValue: formValues.useGlobalOutOfStockThreshold, onThresholdChange: (e) => form.setField('outOfStockThreshold', +e.target.value), onUseGlobalChange: (e) => form.setField('useGlobalOutOfStockThreshold', e), onTrackInventoryChange: (e) => form.setField('trackInventory', e), onStockOnHandChange: (e) => form.setField('stockOnHand', +e.target.value), onStockLocationsChange: (e) => form.setField('stockLevels', e), allStockLocations: variant?.stockLevels, stockAllocated: variant?.stockAllocated, trackInventoryValue: formValues.trackInventory })), _jsx(PriceCard, { currencyCode: variant?.currencyCode || CurrencyCode.PLN, priceValue: formValues.prices, onPriceChange: (e) => form.setField('prices', e), taxRateValue: formValues.taxCategoryId ?? undefined, onTaxRateChange: (id) => form.setField('taxCategoryId', id) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: formValues.featuredAssetId, assetsIds: formValues.assetIds, onFeaturedAssetChange: (id) => form.setField('featuredAssetId', id), onAssetsChange: (ids) => form.setField('assetIds', ids) }), _jsx(EntityCustomFields, { entityName: "productVariant", id: variant?.id, hideButton: true, onChange: (customFields, translations) => {
+    return (_jsxs("div", { className: "mt-4 flex flex-col gap-4", children: [_jsxs("div", { className: "flex flex-col gap-2 rounded-lg border bg-muted/30 p-4 sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: t('variants') }), _jsx("h3", { className: "truncate text-lg font-semibold", children: variantDisplayName })] }), _jsxs("div", { className: "text-sm text-muted-foreground sm:text-right", children: [_jsxs("span", { className: "font-medium text-foreground", children: [t('sku'), ":"] }), " ", variantDisplaySku || '—'] })] }), _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: formValues.price, taxRateValue: formValues.taxCategoryId, outOfStockThresholdValue: formValues.outOfStockThreshold, stockLevelsValue: formValues.stockLevels, stockOnHandValue: formValues.stockOnHand, useGlobalOutOfStockThresholdValue: formValues.useGlobalOutOfStockThreshold, onThresholdChange: (e) => form.setField('outOfStockThreshold', +e.target.value), onUseGlobalChange: (e) => form.setField('useGlobalOutOfStockThreshold', e), onTrackInventoryChange: (e) => form.setField('trackInventory', e), onStockOnHandChange: (e) => form.setField('stockOnHand', +e.target.value), onStockLocationsChange: (e) => form.setField('stockLevels', e), allStockLocations: variant?.stockLevels, stockAllocated: variant?.stockAllocated, trackInventoryValue: formValues.trackInventory })), _jsx(PriceCard, { currencyCode: variant?.currencyCode || CurrencyCode.PLN, priceValue: formValues.prices, onPriceChange: (e) => form.setField('prices', e), taxRateValue: formValues.taxCategoryId ?? undefined, onTaxRateChange: (id) => form.setField('taxCategoryId', id), showDefaultPriceWhenEmpty: !variant }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: formValues.featuredAssetId, assetsIds: formValues.assetIds, onFeaturedAssetChange: (id) => form.setField('featuredAssetId', id), onAssetsChange: (ids) => form.setField('assetIds', ids) }), _jsx(EntityCustomFields, { entityName: "productVariant", id: variant?.id, hideButton: true, onChange: (customFields, translations) => {
                                     form.setField('customFields', customFields);
                                     if (translations)
                                         form.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: formValues.sku ?? undefined, onChange: (e) => form.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: {
+                                    : { 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: formValues.sku ?? undefined, onChange: (e) => form.setField('sku', e.target.value) }), _jsx(Input, { label: t('name'), placeholder: t('name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e) })] }) }), variant && (_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 },
+                                        { price: variant.price, priceWithTax: variant.priceWithTax, currencyCode: variant.currencyCode },
                                     ],
-                                } }), _jsx(OptionsCard, { optionGroups: variant?.options || [], productId: productId, optionIds: formValues.optionIds ?? undefined, onChange: (e) => form.setField('optionIds', e), createMode: !variant }), !!variant && (_jsx(FacetValuesCard, { facetValuesIds: formValues.facetValueIds ?? undefined, onChange: (e) => form.setField('facetValueIds', e) }))] })] })] }));
+                                } })), _jsx(OptionsCard, { optionGroups: variant?.options || [], productId: productId, optionIds: formValues.optionIds ?? undefined, onChange: (e) => form.setField('optionIds', e), createMode: !variant }), !!variant && (_jsx(FacetValuesCard, { facetValuesIds: formValues.facetValueIds ?? undefined, onChange: (e) => form.setField('facetValueIds', e) }))] })] })] }));
 };

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

@@ -42,5 +42,5 @@ export const VariantsTab = () => {
     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') })) }))] }) })] }));
+    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, className: "max-w-xs", children: _jsxs("span", { className: "flex min-w-0 flex-col items-start text-left leading-tight", children: [_jsx("span", { className: "max-w-full truncate", children: v.name?.trim() || t('variantsTab.unnamedVariant') }), v.sku && (_jsx("span", { className: "max-w-full truncate text-xs font-normal text-muted-foreground", children: v.sku }))] }) }, 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/promotions/Detail.js

@@ -1,9 +1,38 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useParams } from 'react-router';
-import { useTranslation, useValidators, createDeenruvForm, DetailView, useMutation } from '@deenruv/react-ui-devkit';
+import { useTranslation, useValidators, createDeenruvForm, DetailView, useMutation, useSettings, } from '@deenruv/react-ui-devkit';
 import { $, Permission, scalars, typedGql } from '@deenruv/admin-types';
 import { PromotionDetailView } from "./_components/PromotionDetailView";
 import { PromotionDetailSidebar } from "./_components/PromotionDetailSidebar";
+const DEFAULT_PROMOTION_LANGUAGE_CODE = 'en';
+const ensureDefaultPromotionTranslation = (translations, defaultLanguageCode) => {
+    const sourceTranslation = translations.find((translation) => !!translation.name?.trim()) ?? translations[0];
+    if (!sourceTranslation?.name?.trim())
+        return translations;
+    let hasDefaultLanguage = false;
+    const normalizedTranslations = translations.map((translation) => {
+        if (translation.languageCode !== defaultLanguageCode)
+            return translation;
+        hasDefaultLanguage = true;
+        if (translation.name?.trim())
+            return translation;
+        return {
+            ...translation,
+            name: sourceTranslation.name,
+            description: translation.description ?? sourceTranslation.description ?? '',
+        };
+    });
+    if (hasDefaultLanguage)
+        return normalizedTranslations;
+    return [
+        ...normalizedTranslations,
+        {
+            languageCode: defaultLanguageCode,
+            name: sourceTranslation.name,
+            description: sourceTranslation.description ?? '',
+        },
+    ];
+};
 const EditPromotionMutation = typedGql('mutation', { scalars })({
     updatePromotion: [{ input: $('input', 'UpdatePromotionInput!') }, { '...on Promotion': { id: true } }],
 });
@@ -20,6 +49,7 @@ export const PromotionsDetailPage = () => {
     const [create] = useMutation(CreatePromotionMutation);
     const [remove] = useMutation(DeletePromotionMutation);
     const { translationsValidator, configurableOperationArrayValidator } = useValidators();
+    const defaultLanguageCode = useSettings((state) => state.selectedChannel?.defaultLanguageCode ?? DEFAULT_PROMOTION_LANGUAGE_CODE);
     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',
@@ -50,9 +80,10 @@ export const PromotionsDetailPage = () => {
                             throw new Error('Fill required fields.');
                         const conditions = data.conditions;
                         const actions = data.actions;
+                        const translations = data.translations;
                         const input = {
-                            translations: data.translations,
-                            enabled: data.enabled || false,
+                            translations: id ? translations : ensureDefaultPromotionTranslation(translations, defaultLanguageCode),
+                            enabled: typeof data.enabled === 'boolean' ? data.enabled : true,
                             actions,
                             conditions: conditions?.map((el) => ({
                                 ...el,

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

@@ -1,6 +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') })] }) }));
+    const { t } = useTranslation('promotions');
+    return (_jsx(CustomCard, { title: t('enabled.header'), icon: _jsx(CardIcons.default, {}), color: "teal", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Switch, { id: "promotion-enabled", checked: enabledValue ?? false, onCheckedChange: onEnabledChange }), _jsx(Label, { htmlFor: "promotion-enabled", children: t('enabled.label') })] }) }));
 };

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

@@ -6,6 +6,7 @@ import { useEffect } from 'react';
 export const PromotionDetailSidebar = () => {
     const { id, form } = useDetailView('promotions-detail-view', 'CreatePromotionInput', 'enabled');
     const { base } = form;
+    const enabledValue = base.watch('enabled');
     // Always call useQuery unconditionally to preserve hook order.
     // Pass a placeholder id when none exists; the result will simply be ignored.
     const { data } = useQuery(PromotionQuery, { initialVariables: { id: id ?? '' } });
@@ -14,5 +15,5 @@ export const PromotionDetailSidebar = () => {
             base.setField('enabled', data.promotion.enabled);
         }
     }, [data, id]);
-    return (_jsx("div", { className: "flex w-full flex-col gap-4", children: _jsx(EnabledCard, { enabledValue: base.watch('enabled'), onEnabledChange: (e) => base.setField('enabled', e) }) }));
+    return (_jsx("div", { className: "flex w-full flex-col gap-4", children: _jsx(EnabledCard, { enabledValue: id ? enabledValue : (enabledValue ?? true), onEnabledChange: (e) => base.setField('enabled', e) }) }));
 };

package/dist/pages/roles/Detail.js

@@ -42,7 +42,7 @@ export const RolesDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ 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',

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

@@ -2,7 +2,6 @@ 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();

package/dist/pages/sellers/Detail.js

@@ -31,7 +31,7 @@ export const SellersDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ id });
     }, [remove, id]);
     return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "sellers-detail-view", main: {
                 name: 'seller',

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

@@ -3,6 +3,10 @@ import { useCallback } from 'react';
 import { useParams } from 'react-router';
 import { useTranslation, DetailView, createDeenruvForm, getMutation, useMutation } from '@deenruv/react-ui-devkit';
 import { ShippingMethodDetailView } from "./_components/ShippingMethodDetailView.js";
+const isMissingConfigArgValue = (value) => value == null || value.trim() === '';
+const hasMissingConfigArgs = (operation) => {
+    return !!operation?.arguments?.some((argument) => isMissingConfigArgValue(argument.value));
+};
 const CreateShippingMethodMutation = getMutation('createShippingMethod');
 const EditShippingMethodMutation = getMutation('updateShippingMethod');
 const DeleteShippingMethodMutation = getMutation('deleteShippingMethod');
@@ -44,7 +48,7 @@ export const ShippingMethodsDetailPage = () => {
         if (!id) {
             throw new Error('Could not find the id.');
         }
-        return remove({ input: { id } });
+        return remove({ id });
     }, [remove, id]);
     return (_jsx("div", { className: "relative flex flex-col gap-y-4", children: _jsx(DetailView, { id: id, locationId: "shippingMethods-detail-view", main: {
                 name: 'shippingMethod',
@@ -63,11 +67,11 @@ export const ShippingMethodsDetailPage = () => {
                         checker: {
                             validate: (v) => {
                                 const hasCode = !!v?.code;
-                                const hasArguments = v?.arguments.filter((a) => a.value).length;
+                                const hasInvalidArguments = hasMissingConfigArgs(v);
                                 const errors = [];
                                 if (!hasCode)
                                     errors.push(t('validation.checkerCodeRequired'));
-                                if (!hasArguments)
+                                if (hasInvalidArguments)
                                     errors.push(t('validation.checkerArgsRequired'));
                                 return errors;
                             },
@@ -75,12 +79,12 @@ export const ShippingMethodsDetailPage = () => {
                         calculator: {
                             validate: (v) => {
                                 const hasCode = !!v?.code;
-                                const hasInvalidArguments = v?.arguments.filter((a) => !a.value || a.value === 'false').length; // args have 'false' value by default
+                                const hasInvalidArguments = hasMissingConfigArgs(v);
                                 const errors = [];
                                 if (!hasCode)
-                                    errors.push(t('validation.checkerCodeRequired'));
+                                    errors.push(t('validation.calculatorCodeRequired'));
                                 if (hasInvalidArguments)
-                                    errors.push(t('validation.checkerArgsRequired'));
+                                    errors.push(t('validation.calculatorArgsRequired'));
                                 return errors;
                             },
                         },