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

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/payment-methods/Detail.js

@@ -44,7 +44,7 @@ export const PaymentMethodsDetailPage = () => {
         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: "paymentMethods-detail-view", main: {
                 name: 'paymentMethod',

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

@@ -24,10 +24,10 @@ const fetch = async ({ page, perPage, filter, filterOperator, sort }, additional
 const onRemove = async (items) => {
     try {
         const ids = items.map((item) => item.id);
-        const { deleteProducts } = await apiClient('mutation')({
-            deleteProducts: [{ ids }, { message: true, result: true }],
+        const { deleteProductVariants } = await apiClient('mutation')({
+            deleteProductVariants: [{ ids }, { message: true, result: true }],
         });
-        return !!deleteProducts.length;
+        return !!deleteProductVariants.length;
     }
     catch (error) {
         return error;

package/dist/pages/products/Detail.js

@@ -4,7 +4,8 @@ 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 { ProductStorefrontAction } from './_components/productStorefrontAction';
+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 +14,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 +28,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 +58,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)
@@ -69,7 +124,9 @@ export const ProductsDetailPage = () => {
                             throw new Error('No id');
                     },
                 }),
-            }, defaultTabs: defaultTabs, permissions: {
+            }, defaultTabs: defaultTabs, topActions: {
+                inline: [_jsx(ProductStorefrontAction, {}, "product-storefront-action")],
+            }, permissions: {
                 create: Permission.CreateProduct,
                 edit: Permission.UpdateProduct,
                 delete: Permission.DeleteProduct,

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/products/_components/productStorefrontAction/ProductStorefrontAction.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDetailView, useGlobalStore, useSettings, useTranslation } from '@deenruv/react-ui-devkit';
+import { StorefrontAction } from "../../../../components/storefrontAction";
+import { getProductStorefrontActionState, } from './ProductStorefrontAction.logic';
+const PRODUCT_STOREFRONT_FORM_KEYS = ['CreateProductInput', 'translations', 'enabled'];
+export const ProductStorefrontAction = () => {
+    const { t } = useTranslation('products');
+    const selectedChannelCode = useSettings((state) => state.selectedChannel?.code);
+    const languageCode = useSettings((state) => state.translationsLanguage);
+    const resolveStorefrontEntityUrl = useGlobalStore((state) => state.ui?.resolveStorefrontEntityUrl);
+    const { entity, form, id } = useDetailView('products-detail-view', ...PRODUCT_STOREFRONT_FORM_KEYS);
+    const formTranslations = form.base.watch('translations');
+    const formEnabled = form.base.watch('enabled');
+    if (!id || !entity || !resolveStorefrontEntityUrl)
+        return null;
+    const state = getProductStorefrontActionState({
+        product: entity,
+        selectedChannelCode,
+        languageCode,
+        formTranslations,
+        formEnabled,
+        resolveStorefrontEntityUrl,
+    });
+    const label = t('storefrontAction.label');
+    if (state.kind === 'hidden')
+        return null;
+    const disabledTooltips = {
+        productDisabled: t('storefrontAction.disabled.productDisabled'),
+        missingChannel: t('storefrontAction.disabled.missingChannel'),
+        channelNotAssigned: t('storefrontAction.disabled.channelNotAssigned'),
+        missingSlug: t('storefrontAction.disabled.missingSlug'),
+        unsavedSlug: t('storefrontAction.disabled.unsavedSlug'),
+        unsavedEnabled: t('storefrontAction.disabled.unsavedEnabled'),
+        resolverFailed: t('storefrontAction.disabled.resolverFailed'),
+        resolverEmpty: t('storefrontAction.disabled.resolverEmpty'),
+        urlNotAbsolute: t('storefrontAction.disabled.urlNotAbsolute'),
+        unsupportedProtocol: t('storefrontAction.disabled.unsupportedProtocol'),
+    };
+    return (_jsx(StorefrontAction, { label: label, state: state.kind === 'ready'
+            ? { kind: 'ready', url: state.url }
+            : { kind: 'disabled', tooltip: disabledTooltips[state.reason] } }));
+};

package/dist/pages/products/_components/productStorefrontAction/ProductStorefrontAction.logic.js

@@ -0,0 +1,39 @@
+import { getStorefrontEntityUrlState, } from '../../../../components/storefrontAction/StorefrontAction.logic';
+const getFormSlug = (formTranslations, languageCode) => {
+    if (!Array.isArray(formTranslations))
+        return undefined;
+    const translation = formTranslations.find((value) => typeof value === 'object' && value !== null && 'languageCode' in value && value.languageCode === languageCode);
+    return typeof translation?.slug === 'string' ? translation.slug : undefined;
+};
+export const getProductStorefrontActionState = ({ product, selectedChannelCode, languageCode, formTranslations, formEnabled, resolveStorefrontEntityUrl, }) => {
+    if (!selectedChannelCode)
+        return { kind: 'disabled', reason: 'missingChannel' };
+    const persistedTranslation = languageCode
+        ? product.translations.find((translation) => translation.languageCode === languageCode)
+        : undefined;
+    if (!languageCode || typeof persistedTranslation?.slug !== 'string' || !persistedTranslation.slug.trim()) {
+        return { kind: 'disabled', reason: 'missingSlug' };
+    }
+    const context = {
+        entityType: 'product',
+        entityId: product.id,
+        slug: persistedTranslation.slug,
+        channelCode: selectedChannelCode,
+        languageCode,
+    };
+    const urlState = getStorefrontEntityUrlState(context, resolveStorefrontEntityUrl);
+    if (urlState.kind === 'hidden')
+        return urlState;
+    if (!product.enabled)
+        return { kind: 'disabled', reason: 'productDisabled' };
+    if (!product.channels.some(({ code }) => code === selectedChannelCode)) {
+        return { kind: 'disabled', reason: 'channelNotAssigned' };
+    }
+    if (formEnabled !== product.enabled) {
+        return { kind: 'disabled', reason: 'unsavedEnabled' };
+    }
+    if (getFormSlug(formTranslations, languageCode) !== persistedTranslation.slug) {
+        return { kind: 'disabled', reason: 'unsavedSlug' };
+    }
+    return urlState.kind === 'ready' ? { ...urlState, context } : urlState;
+};

package/dist/pages/products/_components/productStorefrontAction/index.js

@@ -0,0 +1,2 @@
+export * from './ProductStorefrontAction';
+export * from './ProductStorefrontAction.logic';