@deenruv/admin-dashboard 1.0.15 → 1.0.17-dev.4

package/dist/locales/pl/products.json

@@ -42,6 +42,14 @@
         "removeVariant": "Usuń wariant",
         "removeVariantFromChannel": "Usuń wariant z kanału"
     },
+    "initialVariant": {
+        "title": "Początkowy wariant",
+        "description": "Utwórz jeden domyślny wariant razem z tym produktem. Jeśli nazwa wariantu jest pusta, zostanie użyta nazwa produktu.",
+        "sku": "SKU",
+        "price": "Cena",
+        "name": "Nazwa wariantu",
+        "namePlaceholder": "Użyj nazwy produktu"
+    },
     "optionsTab": {
         "placeholder": "Wpisz, aby dodać nową wartość opcji",
         "groupName": "Nazwa grupy",
@@ -53,6 +61,7 @@
         "noOptionValues": "Dodaj opcje powyżej, aby znaleźć je tutaj"
     },
     "variantsTab": {
+        "unnamedVariant": "Nienazwany wariant",
         "emptyState": {
             "title": "Nic tutaj nie ma",
             "description": "Nie ma jeszcze żadnych wariantów. Użyj przycisku powyżej, aby je dodać, pod warunkiem, że dodałeś już jakieś opcje. Jeśli nie, utwórz je najpierw w zakładce Opcje."
@@ -128,6 +137,7 @@
         "noAssets": "Nie ma jeszcze żadnych aktywów",
         "setAsFeatured": "Ustaw jako polecane",
         "editAsset": "Edytuj zdjęcie",
+        "uploadAsset": "Prześlij obraz",
         "removeAsset": "Usuń zasób",
         "usedForColorsDesc": "Użyj tego atrybutu dla facetów, którzy są kolorami",
         "colorsCollectionDesc": "Użyj tego dla ścieżek produktu w KOLORZE (BLAT/CORPUS)",
@@ -186,9 +196,11 @@
         "new": "Nowy wariant",
         "selectOption": "Wybierz opcję",
         "createBasic": "Dane podstawowe",
-        "createOptions": "Opcje"
+        "createOptions": "Opcje",
+        "createOptionsHint": "Dodaj grupę opcji w tym panelu, aby rozpocząć wybieranie opcji wariantu. Wartości opcji możesz później dopracować w zakładce Opcje."
     },
     "validation": {
-        "nameSlugRequired": "Pola nazwy i slug są wymagane"
+        "nameSlugRequired": "Pola nazwy i slug są wymagane",
+        "initialVariantSkuRequired": "SKU wariantu jest wymagane"
     }
 }

package/dist/locales/pl/promotions.json

@@ -13,6 +13,10 @@
         "usageLimit": "Limit użycia",
         "perCustomerUsageLimit": "Limit użycia na klienta"
     },
+    "enabled": {
+        "header": "Status",
+        "label": "Promocja aktywna"
+    },
     "conditions": {
         "header": "Warunki",
         "add": "Dodaj nowy warunek",

package/dist/pages/Root.js

@@ -248,5 +248,5 @@ export const Root = ({ allPaths }) => {
             await init();
         });
     }, []);
-    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground", children: [_jsx(Menu, { children: loaded ? _jsx(Outlet, {}) : _jsx(ContentAreaSkeleton, {}) }), loaded && (_jsxs(_Fragment, { children: [_jsx(GlobalSearch, {}), _jsx(CanLeaveRouteDialog, {}), isLocalhost ? _jsx(DeenruvDeveloperIndicator, {}) : null] }))] }) }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex max-h-screen w-full max-w-full overflow-hidden bg-background text-foreground antialiased", children: [_jsx(Menu, { children: loaded ? _jsx(Outlet, {}) : _jsx(ContentAreaSkeleton, {}) }), loaded && (_jsxs(_Fragment, { children: [_jsx(GlobalSearch, {}), _jsx(CanLeaveRouteDialog, {}), isLocalhost ? _jsx(DeenruvDeveloperIndicator, {}) : null] }))] }) }));
 };

package/dist/pages/collections/Detail.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useParams } from 'react-router';
-import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation } from '@deenruv/react-ui-devkit';
+import { useValidators, DetailView, createDeenruvForm, getMutation, useMutation, useSettings, } from '@deenruv/react-ui-devkit';
 import { CollectionsDetailView } from "./_components/CollectionDetailView.js";
 const CreateCollectionMutation = getMutation('createCollection');
 const EditCollectionMutation = getMutation('updateCollection');
 const DeleteCollectionMutation = getMutation('deleteCollection');
+const AssignCollectionsToChannelMutation = getMutation('assignCollectionsToChannel');
 export const CollectionsDetailPage = () => {
     const { id } = useParams();
     const [update] = useMutation(EditCollectionMutation);
     const [create] = useMutation(CreateCollectionMutation);
     const [remove] = useMutation(DeleteCollectionMutation);
+    const [assignCollectionsToChannel] = useMutation(AssignCollectionsToChannelMutation);
+    const selectedChannel = useSettings((p) => p.selectedChannel);
     const { configurableOperationArrayValidator, translationsValidator } = useValidators();
-    const onSubmitHandler = useCallback((data) => {
+    const onSubmitHandler = useCallback(async (data) => {
         const translations = data.translations;
         const inputData = {
             assetIds: data.assetIds,
@@ -29,9 +32,16 @@ export const CollectionsDetailPage = () => {
         };
         if (id)
             return update({ input: { id, ...inputData } });
-        else
-            return create({ input: inputData });
-    }, [id, update, create]);
+        const response = await create({ input: inputData });
+        const collectionId = response.createCollection.id;
+        const additionalChannelIds = Array.isArray(data.additionalChannelIds)
+            ? data.additionalChannelIds.filter((channelId) => typeof channelId === 'string' && channelId !== selectedChannel?.id)
+            : [];
+        for (const channelId of additionalChannelIds) {
+            await assignCollectionsToChannel({ input: { collectionIds: [collectionId], channelId } });
+        }
+        return response;
+    }, [id, update, create, assignCollectionsToChannel, selectedChannel?.id]);
     const onDeleteHandler = useCallback(() => {
         if (!id) {
             throw new Error('Could not find the id.');
@@ -52,6 +62,11 @@ export const CollectionsDetailPage = () => {
                         inheritFilters: {
                             initialValue: true,
                         },
+                        ...{
+                            additionalChannelIds: {
+                                initialValue: [],
+                            },
+                        },
                         translations: translationsValidator,
                         filters: configurableOperationArrayValidator(),
                     },

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef } from 'react';
-import { EntityCustomFields, Input, Label, Switch, CustomCard, CardIcons, useDetailView, useSettings, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, normalizeString, } from '@deenruv/react-ui-devkit';
+import { EntityCustomFields, Input, Label, Switch, Checkbox, CustomCard, CardIcons, useDetailView, useSettings, useServer, RichTextEditor, useTranslation, setInArrayBy, EntityChannelManager, Routes, normalizeString, } from '@deenruv/react-ui-devkit';
 import { FiltersCard } from "./FiltersCard";
 import { ContentsCard } from "./ContentsCard";
 import { AssetsCard } from "../../products/_components/AssetsCard.js";
@@ -9,6 +9,7 @@ export const CollectionsDetailView = () => {
     const { t } = useTranslation('collections');
     const contentLng = useSettings((p) => p.translationsLanguage);
     const selectedChannel = useSettings((p) => p.selectedChannel);
+    const channels = useServer((p) => p.channels);
     const navigate = useNavigate();
     const { form, fetchEntity, entity, id } = useDetailView('collections-detail-view', 'CreateCollectionInput', 'translations', 'assetIds', 'featuredAssetId', 'isPrivate', 'inheritFilters', 'filters', 'customFields');
     const { base } = form;
@@ -40,7 +41,15 @@ export const CollectionsDetailView = () => {
         })();
     }, [contentLng, selectedChannel?.id]);
     const translations = base.watch('translations') || [];
+    const additionalChannelIds = base.watch('additionalChannelIds') ?? [];
     const currentTranslationValue = translations.find((v) => v.languageCode === contentLng);
+    const toggleAdditionalChannel = useCallback((channelId, checked) => {
+        if (channelId === selectedChannel?.id)
+            return;
+        const currentIds = base.watch('additionalChannelIds') ?? [];
+        const nextIds = checked ? [...new Set([...currentIds, channelId])] : currentIds.filter((id) => id !== channelId);
+        base.setField('additionalChannelIds', nextIds);
+    }, [base, selectedChannel?.id]);
     const handleAddAsset = useCallback((newId) => {
         if (!newId)
             return;
@@ -85,7 +94,11 @@ export const CollectionsDetailView = () => {
                                                 : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.slug'), value: currentTranslationValue?.slug ?? '', onChange: (e) => {
                                                 handleSlugManualEdit();
                                                 setTranslationField('slug', e.target.value);
-                                            }, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId') ?? undefined, assetsIds: base.watch('assetIds') ?? undefined, onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) }), _jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) }), _jsx(FiltersCard, { currentFiltersValue: base.watch('filters') ?? undefined, onFiltersValueChange: (filters) => base.setField('filters', filters ?? []), inheritValue: base.watch('inheritFilters') ?? false, onInheritChange: (e) => base.setField('inheritFilters', e), errors: base.formState.errors?.filters?.message ? [base.formState.errors.filters.message] : undefined }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
+                                            }, required: true }) }), _jsxs("div", { className: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx(Label, { children: t('details.basic.isPrivate') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId') ?? undefined, assetsIds: base.watch('assetIds') ?? undefined, onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) }), id ? (_jsx(EntityChannelManager, { entity: "collection", entityId: id, entityChannels: [{ id: selectedChannel?.id, code: selectedChannel?.code }], onRemoveSuccess: () => navigate(Routes.collections.list) })) : (_jsx(CustomCard, { title: t('details.channels.title'), icon: _jsx(CardIcons.shipping, {}), color: "green", children: _jsxs("div", { className: "flex flex-col gap-4 pt-4", children: [_jsx("p", { className: "text-sm text-muted-foreground", children: t('details.channels.description') }), _jsx("div", { className: "grid gap-3 md:grid-cols-2", children: channels.map((channel) => {
+                                    const isCurrentChannel = channel.id === selectedChannel?.id;
+                                    const checked = isCurrentChannel || additionalChannelIds.includes(channel.id);
+                                    return (_jsxs("label", { className: "flex items-center gap-3 rounded-md border p-3 text-sm transition-colors hover:bg-muted/50", children: [_jsx(Checkbox, { checked: checked, disabled: isCurrentChannel, onCheckedChange: (value) => toggleAdditionalChannel(channel.id, !!value) }), _jsx("span", { className: "font-medium", children: channel.code }), isCurrentChannel && (_jsx("span", { className: "ml-auto rounded-full bg-muted px-2 py-1 text-xs text-muted-foreground", children: t('details.channels.currentChannel') }))] }, channel.id));
+                                }) }), !channels.length && _jsx("p", { className: "text-sm text-muted-foreground", children: t('details.channels.noChannels') })] }) })), _jsx(FiltersCard, { currentFiltersValue: base.watch('filters') ?? undefined, onFiltersValueChange: (filters) => base.setField('filters', filters ?? []), inheritValue: base.watch('inheritFilters') ?? false, onInheritChange: (e) => base.setField('inheritFilters', e), errors: base.formState.errors?.filters?.message ? [base.formState.errors.filters.message] : undefined }), _jsx(EntityCustomFields, { entityName: "collection", id: id, hideButton: true, onChange: (customFields, translations) => {
                         base.setField('customFields', customFields);
                         if (translations)
                             base.setField('translations', translations);

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

@@ -5,6 +5,44 @@ import { X } from 'lucide-react';
 import { FacetsSelector } from "./FacetsSelector";
 import { CombinationMode } from "./CombinationMode";
 import { VariantsSelector } from "./VariantsSelector";
+const getArgumentComponent = (argument) => argument?.ui?.component;
+const getArgumentOptions = (argument) => argument?.ui?.options ?? [];
+const stringifyDefaultValue = (value) => {
+    if (Array.isArray(value) || (typeof value === 'object' && value !== null)) {
+        return JSON.stringify(value);
+    }
+    if (typeof value === 'boolean' || typeof value === 'number' || typeof value === 'string') {
+        return String(value);
+    }
+    return '';
+};
+const getDefaultArgumentValue = (argument) => {
+    if (argument.defaultValue !== undefined && argument.defaultValue !== null) {
+        return stringifyDefaultValue(argument.defaultValue);
+    }
+    const component = getArgumentComponent(argument);
+    if (argument.list || component === 'facet-value-form-input' || component === 'product-multi-form-input') {
+        return '[]';
+    }
+    if (component === 'select-form-input') {
+        return getArgumentOptions(argument)[0]?.value ?? '';
+    }
+    if (argument.type === 'boolean') {
+        return 'false';
+    }
+    return '';
+};
+const parseStringArrayValue = (value) => {
+    if (!value)
+        return [];
+    try {
+        const parsed = JSON.parse(value);
+        return Array.isArray(parsed) ? parsed.filter((item) => typeof item === 'string') : [];
+    }
+    catch {
+        return [];
+    }
+};
 export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inheritValue, onInheritChange, errors, }) => {
     const { t } = useTranslation('collections');
     const codesTranslations = t('details.filters.labels.codes', { returnObjects: true });
@@ -27,14 +65,14 @@ export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inherit
     }, [fetchOptions]);
     const handleFiltersValueChange = useCallback((index, code, args) => {
         const correspondingFilter = filters.find((h) => h?.code === code);
-        if (correspondingFilter && currentFiltersValue) {
-            const newFiltersValue = [...currentFiltersValue];
+        if (correspondingFilter) {
+            const newFiltersValue = [...(currentFiltersValue || [])];
             newFiltersValue[index] = {
                 code: correspondingFilter.code,
                 arguments: args ||
                     correspondingFilter.args.map((a) => ({
                         name: a.name,
-                        value: 'false',
+                        value: getDefaultArgumentValue(a),
                     })),
             };
             onFiltersValueChange(newFiltersValue);
@@ -49,38 +87,40 @@ export const FiltersCard = ({ currentFiltersValue, onFiltersValueChange, inherit
     }, [onFiltersValueChange, currentFiltersValue]);
     const handleAddFilter = useCallback(() => {
         const defaultFilter = filters[0];
+        if (!defaultFilter)
+            return;
         const newFiltersValue = [
             ...(currentFiltersValue || []),
             {
                 code: defaultFilter.code,
                 arguments: defaultFilter.args.map((a) => ({
                     name: a.name,
-                    value: 'false',
+                    value: getDefaultArgumentValue(a),
                 })),
             },
         ];
         onFiltersValueChange(newFiltersValue);
-    }, [onFiltersValueChange, currentFiltersValue]);
-    return (_jsx(CustomCard, { title: t('details.filters.title'), upperRight: _jsx(ErrorMessage, { errors: errors }), color: "orange", icon: _jsx(CardIcons.filter, {}), children: _jsx("div", { className: "flex- flex flex-wrap gap-4 xl:flex-nowrap", children: _jsxs("div", { className: "flex basis-full flex-col gap-4", children: [_jsxs("div", { className: "mb-2 flex basis-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: inheritValue, onCheckedChange: onInheritChange }), _jsx(Label, { children: t('details.filters.inherit') })] }), _jsx(Button, { className: "ml-auto", onClick: handleAddFilter, children: t('details.filters.addCondition') })] }), currentFiltersValue?.map((filter, index) => {
+    }, [filters, onFiltersValueChange, currentFiltersValue]);
+    return (_jsx(CustomCard, { title: t('details.filters.title'), upperRight: _jsx(ErrorMessage, { errors: errors }), color: "orange", icon: _jsx(CardIcons.filter, {}), children: _jsx("div", { className: "flex- flex flex-wrap gap-4 xl:flex-nowrap", children: _jsxs("div", { className: "flex basis-full flex-col gap-4", children: [_jsxs("div", { className: "mb-2 flex basis-full", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(Switch, { checked: inheritValue, onCheckedChange: onInheritChange }), _jsx(Label, { children: t('details.filters.inherit') })] }), _jsx(Button, { className: "ml-auto", onClick: handleAddFilter, disabled: filters.length === 0, title: filters.length === 0 ? t('details.filters.noAvailableConditions') : undefined, children: t('details.filters.addCondition') })] }), currentFiltersValue?.map((filter, index) => {
                         return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Separator, {}), _jsxs("div", { className: "flex w-1/2 items-end gap-1", children: [_jsx(SimpleSelect, { label: t('details.filters.condition'), value: filter ? filter.code : '', onValueChange: (e) => handleFiltersValueChange(index, e), options: allFiltersOptions }), filter?.code && (_jsx(Button, { variant: 'secondary', className: "p-2", onClick: (e) => {
                                                 e.preventDefault();
                                                 handleRemoveFilter(filter.code);
                                             }, children: _jsx(X, { size: 20 }) }))] }), _jsx("div", { className: "flex items-start justify-center gap-4", children: filter?.arguments.map((e, i) => {
                                         const _filter = filters?.find((f) => f.code === filter.code);
                                         const argument = _filter?.args.find((a) => a.name === e.name);
-                                        return argument?.ui?.component === 'facet-value-form-input' ? (_jsx(FacetsSelector, { value: JSON.parse(filter?.arguments[i].value), onChange: (e) => {
+                                        return getArgumentComponent(argument) === 'facet-value-form-input' ? (_jsx(FacetsSelector, { value: parseStringArrayValue(filter?.arguments[i].value), onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: JSON.stringify(e) };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            } })) : argument?.ui?.component === 'select-form-input' ? (_jsx(SimpleSelect, { label: argument?.label || argument.name, value: filter?.arguments[i].value, onValueChange: (e) => {
+                                            } })) : getArgumentComponent(argument) === 'select-form-input' ? (_jsx(SimpleSelect, { label: argument?.label || argument?.name || '', value: filter?.arguments[i].value, onValueChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: e };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            }, options: (argument?.ui?.options).map((o) => ({
+                                            }, options: getArgumentOptions(argument).map((o) => ({
                                                 label: o.value,
                                                 value: o.value,
-                                            })) || [] }, i)) : argument?.ui?.component === 'combination-mode-form-input' ? (_jsx(CombinationMode, { label: t('details.filters.labels.arguments.combination-mode'), value: filter?.arguments[i].value, onChange: (e) => {
+                                            })) || [] }, i)) : getArgumentComponent(argument) === 'combination-mode-form-input' ? (_jsx(CombinationMode, { label: t('details.filters.labels.arguments.combination-mode'), value: filter?.arguments[i].value, onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: e };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
-                                            } })) : argument?.ui?.component === 'product-multi-form-input' ? (_jsx(VariantsSelector, { type: argument?.ui?.selectionMode, label: argument?.label || argument.name, value: JSON.parse(filter?.arguments[i].value), onChange: (e) => {
+                                            } })) : getArgumentComponent(argument) === 'product-multi-form-input' ? (_jsx(VariantsSelector, { type: argument?.ui?.selectionMode, label: argument?.label || argument?.name || '', value: parseStringArrayValue(filter?.arguments[i].value), onChange: (e) => {
                                                 filter.arguments[i] = { name: argument?.name || '', value: JSON.stringify(e) };
                                                 handleFiltersValueChange(index, filter?.code, filter.arguments);
                                             } })) : argument?.type === 'int' ? (_jsx("div", { className: "flex basis-full", children: _jsx(Input, { type: "number", step: 0.01, label: argument?.label || argument.name, value: filter?.arguments[i].value, onChange: (e) => {

package/dist/pages/customers/_components/PersonalDataCard.js

@@ -2,5 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation, CardIcons, CustomCard, Input } from '@deenruv/react-ui-devkit';
 export const PersonalDataCard = ({ setField, state }) => {
     const { t } = useTranslation('customers');
-    return (_jsx(CustomCard, { title: t('personalData.header'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex w-1/4 gap-3", children: _jsx(Input, { label: t('personalData.title'), value: state.title?.value, onChange: (e) => setField('title', e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.firstName'), value: state.firstName?.value, onChange: (e) => setField('firstName', e.target.value), errors: state.firstName?.errors, required: true }), _jsx(Input, { label: t('personalData.lastName'), value: state.lastName?.value, onChange: (e) => setField('lastName', e.target.value), errors: state.lastName?.errors, required: true })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.emailAddress'), value: state.emailAddress?.value, onChange: (e) => setField('emailAddress', e.target.value), errors: state.emailAddress?.errors, required: true }), _jsx(Input, { label: t('personalData.phoneNumber'), value: state.phoneNumber?.value, onChange: (e) => setField('phoneNumber', e.target.value) })] })] }) }));
+    const getFieldErrors = (fieldName) => state.formState.errors?.[fieldName]?.message ? [state.formState.errors[fieldName].message] : undefined;
+    return (_jsx(CustomCard, { title: t('personalData.header'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("div", { className: "flex w-1/4 gap-3", children: _jsx(Input, { label: t('personalData.title'), value: state.watch('title') ?? undefined, onChange: (e) => setField('title', e.target.value) }) }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.firstName'), value: state.watch('firstName') ?? undefined, onChange: (e) => setField('firstName', e.target.value), errors: getFieldErrors('firstName'), required: true }), _jsx(Input, { label: t('personalData.lastName'), value: state.watch('lastName') ?? undefined, onChange: (e) => setField('lastName', e.target.value), errors: getFieldErrors('lastName'), required: true })] }), _jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('personalData.emailAddress'), value: state.watch('emailAddress') ?? undefined, onChange: (e) => setField('emailAddress', e.target.value), errors: getFieldErrors('emailAddress'), required: true }), _jsx(Input, { label: t('personalData.phoneNumber'), value: state.watch('phoneNumber') ?? undefined, onChange: (e) => setField('phoneNumber', e.target.value) })] })] }) }));
 };

package/dist/pages/extensions/Extensions.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
-import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, PageBlock, Separator, Switch, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePluginStore, } from '@deenruv/react-ui-devkit';
+import { Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, PageBlock, Separator, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, usePluginStore, } from '@deenruv/react-ui-devkit';
 import { BarChart3, Box, Check, ChevronDown, Code2, Cog, FileCode, Filter, Grid3X3, Info, LayoutDashboard, List, MessageSquare, Puzzle, RefreshCw, Search, Settings, Table, X, } from 'lucide-react';
 const getCategoryIcon = (category) => {
     switch (category) {
@@ -33,7 +33,7 @@ const getStatusBadge = (status) => {
     }
 };
 export const Extensions = () => {
-    const { allPlugins: _plugins, changePluginStatus } = usePluginStore();
+    const { allPlugins: _plugins } = usePluginStore();
     const [searchTerm, setSearchTerm] = useState('');
     const [categoryFilter, setCategoryFilter] = useState('all');
     const [statusFilter, setStatusFilter] = useState('all');
@@ -65,9 +65,5 @@ export const Extensions = () => {
                                 setCategoryFilter('all');
                                 setStatusFilter('all');
                                 setSearchTerm('');
-                            }, children: "Reset filters" })] })) : view === 'grid' ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsx(CardTitle, { className: "text-lg", children: plugin.name })] }), getStatusBadge(plugin.status)] }), _jsx(CardDescription, { className: "mt-2", children: plugin.description })] }), _jsxs(CardContent, { className: "pb-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Version:" }), _jsx("span", { children: plugin.version })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Author:" }), _jsx("span", { children: plugin.author })] })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tables?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tables" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tabs?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tabs" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.components?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Components" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.widgets?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Widgets" })] })] })] }), _jsxs(CardFooter, { className: "flex justify-between pt-2", children: [_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Info, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "View details" })] }) }), _jsx("div", { className: "flex gap-2", children: _jsx(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
-                                                changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
-                                            } }) })] })] }, plugin.name))) })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "grid grid-cols-12 gap-4 p-4 font-medium", children: [_jsx("div", { className: "col-span-4", children: "Name" }), _jsx("div", { className: "col-span-3", children: "Author" }), _jsx("div", { className: "col-span-1 text-center", children: "Version" }), _jsx("div", { className: "col-span-1 text-center", children: "Status" }), _jsx("div", { className: "col-span-3 text-right", children: "Actions" })] }), _jsx(Separator, {}), filteredPlugins.map((plugin, index) => (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-12 items-center gap-4 p-4", children: [_jsx("div", { className: "col-span-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: plugin.description })] })] }) }), _jsx("div", { className: "col-span-3", children: plugin.author }), _jsx("div", { className: "col-span-1 text-center", children: plugin.version }), _jsx("div", { className: "col-span-1 text-center", children: getStatusBadge(plugin.status) }), _jsxs("div", { className: "col-span-3 flex justify-end gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Settings, { className: "mr-2 size-3" }), "Configure"] }), _jsx(Switch, { checked: plugin.status === 'active', onCheckedChange: (checked) => {
-                                                        changePluginStatus(plugin.name, checked ? 'active' : 'inactive');
-                                                    } })] })] }), index < filteredPlugins.length - 1 && _jsx(Separator, {})] }, plugin.name)))] }))] }) }));
+                            }, children: "Reset filters" })] })) : view === 'grid' ? (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: filteredPlugins.map((plugin) => (_jsxs(Card, { className: "overflow-hidden", children: [_jsxs(CardHeader, { className: "pb-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsx(CardTitle, { className: "text-lg", children: plugin.name })] }), getStatusBadge(plugin.status)] }), _jsx(CardDescription, { className: "mt-2", children: plugin.description })] }), _jsxs(CardContent, { className: "pb-2", children: [_jsxs("div", { className: "grid grid-cols-2 gap-2 text-sm", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Version:" }), _jsx("span", { children: plugin.version })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: "Author:" }), _jsx("span", { children: plugin.author })] })] }), _jsx(Separator, { className: "my-3" }), _jsxs("div", { className: "grid grid-cols-4 gap-2 text-center text-sm", children: [_jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tables?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tables" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.tabs?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Tabs" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.components?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Components" })] }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.widgets?.length || 0 }), _jsx("div", { className: "text-xs text-muted-foreground", children: "Widgets" })] })] })] }), _jsx(CardFooter, { className: "flex justify-between pt-2", children: _jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Info, { className: "size-4" }) }) }), _jsx(TooltipContent, { children: "View details" })] }) }) })] }, plugin.name))) })) : (_jsxs("div", { className: "rounded-md border", children: [_jsxs("div", { className: "grid grid-cols-12 gap-4 p-4 font-medium", children: [_jsx("div", { className: "col-span-4", children: "Name" }), _jsx("div", { className: "col-span-3", children: "Author" }), _jsx("div", { className: "col-span-1 text-center", children: "Version" }), _jsx("div", { className: "col-span-1 text-center", children: "Status" }), _jsx("div", { className: "col-span-3 text-right", children: "Actions" })] }), _jsx(Separator, {}), filteredPlugins.map((plugin, index) => (_jsxs("div", { children: [_jsxs("div", { className: "grid grid-cols-12 items-center gap-4 p-4", children: [_jsx("div", { className: "col-span-4", children: _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "rounded-md bg-primary/10 p-2", children: getCategoryIcon(plugin.category) }), _jsxs("div", { children: [_jsx("div", { className: "font-medium", children: plugin.name }), _jsx("div", { className: "text-xs text-muted-foreground", children: plugin.description })] })] }) }), _jsx("div", { className: "col-span-3", children: plugin.author }), _jsx("div", { className: "col-span-1 text-center", children: plugin.version }), _jsx("div", { className: "col-span-1 text-center", children: getStatusBadge(plugin.status) }), _jsx("div", { className: "col-span-3 flex justify-end gap-2", children: _jsxs(Button, { variant: "outline", size: "sm", children: [_jsx(Settings, { className: "mr-2 size-3" }), "Configure"] }) })] }), index < filteredPlugins.length - 1 && _jsx(Separator, {})] }, plugin.name)))] }))] }) }));
 };

package/dist/pages/orders/Detail.js

@@ -1,17 +1,50 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
-import { useParams } from 'react-router';
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router';
 import { OrderSummary, RealizationCard, CustomerSelectCard, AddressCard, ShippingMethod, TaxSummary, OrderHistory, ProductsCard, TopActions, Payments, SurchargeCard, } from "./_components";
-import { useTranslation, useOrder, ORDER_STATE, EntityCustomFields, LoadingMask, DetailViewMarker, } from '@deenruv/react-ui-devkit';
+import { useTranslation, useOrder, ORDER_STATE, EntityCustomFields, LoadingMask, DetailViewMarker, apiClient, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Routes, } from '@deenruv/react-ui-devkit';
 import { PromotionsList } from "./_components/PromotionsList.js";
+import { toast } from 'sonner';
+const createDraftOrder = async () => {
+    const response = await apiClient('mutation')({
+        createDraftOrder: { id: true },
+    });
+    return response.createDraftOrder.id;
+};
+const DraftOrderCreateStart = () => {
+    const { t } = useTranslation('orders');
+    const navigate = useNavigate();
+    const [isCreating, setIsCreating] = useState(false);
+    const onCreate = async () => {
+        try {
+            setIsCreating(true);
+            const id = await createDraftOrder();
+            if (!id) {
+                toast.error(t('createDraftOrder.error'));
+                return;
+            }
+            navigate(Routes.orders.to(id), { viewTransition: true });
+        }
+        catch {
+            toast.error(t('createDraftOrder.error'));
+        }
+        finally {
+            setIsCreating(false);
+        }
+    };
+    return (_jsx("main", { className: "my-4", children: _jsx("div", { className: "mx-auto flex min-h-[70vh] w-full max-w-[720px] items-center px-4 2xl:px-8", children: _jsxs(Card, { className: "w-full", children: [_jsxs(CardHeader, { className: "space-y-2 text-center sm:text-left", children: [_jsx(CardTitle, { children: t('createDraftOrder.title') }), _jsx(CardDescription, { children: t('createDraftOrder.description') })] }), _jsx(CardContent, { children: _jsxs("div", { className: "flex flex-col-reverse gap-3 sm:flex-row sm:justify-end", children: [_jsx(Button, { variant: "outline", onClick: () => navigate(Routes.orders.list, { viewTransition: true }), disabled: isCreating, children: t('createDraftOrder.cancelButton') }), _jsx(Button, { onClick: onCreate, disabled: isCreating, children: isCreating ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-current border-r-transparent" }), t('createDraftOrder.creating')] })) : (t('createDraftOrder.startButton')) })] }) })] }) }) }));
+};
 export const OrdersDetailPage = () => {
     const { id } = useParams();
     const { t } = useTranslation('orders');
     const { order, mode, fetchOrder, loading } = useOrder();
+    const isCreateRoute = id === 'new';
     useEffect(() => {
-        if (id)
+        if (id && !isCreateRoute)
             fetchOrder(id);
-    }, [id]);
+    }, [id, isCreateRoute]);
+    if (isCreateRoute)
+        return _jsx(DraftOrderCreateStart, {});
     if (loading)
         return _jsx(LoadingMask, {});
     if (!order || !mode) {

package/dist/pages/orders/List.js

@@ -4,15 +4,8 @@ import { Routes, apiClient, DetailList, deepMerge, OrderStateBadge, priceFormatt
 import { useCallback } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { useNavigate } from 'react-router';
-import { toast } from 'sonner';
 const tableId = 'orders-list-view';
 const { selector } = ListLocations[tableId];
-const createDraftOrder = async () => {
-    const response = await apiClient('mutation')({
-        createDraftOrder: { id: true },
-    });
-    return response.createDraftOrder.id;
-};
 const fetch = async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
     const response = await apiClient('query')({
         ['orders']: [
@@ -71,15 +64,7 @@ export const OrdersListPage = () => {
                 },
             },
         ], detailLinkColumn: "id", searchFields: ['code', 'customerLastName'], entityName: "Order", route: {
-            create: () => {
-                createDraftOrder()
-                    .then((id) => {
-                    if (!id)
-                        toast.error('Failed to create draft order');
-                    navigate(Routes.orders.to(id), { viewTransition: true });
-                })
-                    .catch(() => toast.error('Failed to create draft order'));
-            },
+            create: () => navigate(Routes.orders.new, { viewTransition: true }),
             edit: (id) => navigate(Routes.orders.to(id), { viewTransition: true }),
         }, tableId: tableId, fetch: fetch, createPermissions: [Permission.CreateOrder], deletePermissions: [Permission.DeleteOrder], hideColumns: ['active', 'totalQuantity', 'currencyCode'], additionalColumns: [
             {

package/dist/pages/orders/_components/CancelAndRefundDialog.js

@@ -1,8 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, } from '@deenruv/react-ui-devkit';
+import { Button, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DropdownMenuItem, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Undo2 } from 'lucide-react';
-import { useTranslation } from 'react-i18next';
 import { ProductsTable } from "./";
 import { RefundPaymentCard } from "./RefundPaymentCard.js";
 export const CancelAndRefundDialog = ({ refundReason, setRefundReason, onConfirm, }) => {

package/dist/pages/orders/_components/OrderLineCustomFields.js

@@ -3,7 +3,7 @@ import { Button, Dialog, DialogContent, DialogTitle, ScrollArea, useOrder, useSe
 import { useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 export const OrderLineCustomFields = ({ line, order, mode }) => {
-    const { setModifiedOrder } = useOrder(({ setModifiedOrder }) => ({ setModifiedOrder }));
+    const setModifiedOrder = useOrder(({ setModifiedOrder }) => setModifiedOrder);
     const orderLineCustomFields = useServer(useShallow((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []));
     const { t } = useTranslation('common');
     const [open, setOpen] = useState(false);

package/dist/pages/orders/_components/ProductsTable.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OrderLineCustomFields } from "./OrderLineCustomFields.js";
-import { Checkbox, ImageWithPreview, Input, Label, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, } from '@deenruv/react-ui-devkit';
+import { Checkbox, ImageWithPreview, Input, Label, priceFormatter, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 import { Tag } from 'lucide-react';
 import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
 export const ProductsTable = ({ setRefundLines, refundLines }) => {
     const { t } = useTranslation('orders');
     const { mode, currentOrder } = useOrder();

package/dist/pages/orders/_components/RefundPaymentCard.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Checkbox, CustomCard, Input, Label, priceFormatter, Textarea, useOrder } from '@deenruv/react-ui-devkit';
-import { useTranslation } from 'react-i18next';
+import { Checkbox, CustomCard, Input, Label, priceFormatter, Textarea, useOrder, useTranslation, } from '@deenruv/react-ui-devkit';
 export const RefundPaymentCard = ({ refundReason, setRefundReason, cancelShipping, setCancelShipping, refundAmount, setRefundAmount, }) => {
     const { t } = useTranslation('orders');
     const { modifiedOrder } = useOrder();

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)