@deenruv/admin-dashboard 1.0.5 → 1.0.9

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDetailView, DetailViewMarker, useSettings, setInArrayBy, EntityCustomFields, } from '@deenruv/react-ui-devkit';
-import { useCallback, useEffect, useMemo } from 'react';
+import { useDetailView, DetailViewMarker, useSettings, setInArrayBy, EntityCustomFields, normalizeString, } from '@deenruv/react-ui-devkit';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { BasicFieldsCard } from './BasicFieldsCard';
 import { AssetsCard } from './AssetsCard';
 export const PRODUCT_FORM_KEYS = [
@@ -16,39 +16,73 @@ export const ProductDetailView = () => {
     const contentLng = useSettings((p) => p.translationsLanguage);
     const selectedChannel = useSettings((p) => p.selectedChannel);
     const { entity, id, form, loading, fetchEntity } = useDetailView('products-detail-view', ...PRODUCT_FORM_KEYS);
-    const { base: { setField, state }, } = form;
+    const { base } = form;
+    // --- Slug auto-generation ---
+    // Track whether the user has manually edited the slug for the current language.
+    // Using a ref avoids extra re-renders; keyed per-language so switching tabs resets.
+    const slugManuallyEditedRef = useRef({});
+    // Reset manual-edit flag when switching to a language whose slug is still empty
+    // (so auto-gen kicks in for new translations).
+    useEffect(() => {
+        if (!contentLng)
+            return;
+        const current = slugManuallyEditedRef.current[contentLng];
+        if (current === undefined) {
+            slugManuallyEditedRef.current[contentLng] = false;
+        }
+    }, [contentLng]);
     useEffect(() => {
         (async () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('translations', res.translations);
-            setField('assetIds', res.assets.map((a) => a.id));
-            setField('featuredAssetId', res.featuredAsset?.id);
+            base.setField('translations', res.translations);
+            base.setField('assetIds', res.assets.map((a) => a.id));
+            base.setField('featuredAssetId', res.featuredAsset?.id);
         })();
     }, [selectedChannel?.id, contentLng]);
-    const translations = state?.translations?.value || [];
+    const translations = base.watch('translations') || [];
     const currentTranslationValue = useMemo(() => {
         return translations.find((v) => v.languageCode === contentLng);
     }, [translations, contentLng]);
     const setTranslationField = useCallback((field, e) => {
-        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
+        const updatedTranslation = {
             ...currentTranslationValue,
             [field]: e,
             languageCode: contentLng,
-        }));
-    }, [contentLng, translations]);
+        };
+        // Auto-generate slug when name changes
+        if (field === 'name') {
+            const isCreate = id === undefined;
+            const existingSlug = currentTranslationValue?.slug;
+            const slugWasManuallyEdited = slugManuallyEditedRef.current[contentLng ?? ''];
+            // Auto-fill slug when:
+            // 1. Create mode: always, unless user manually edited slug
+            // 2. Edit mode: only if the existing slug is empty/missing
+            if (!slugWasManuallyEdited && (isCreate || !existingSlug)) {
+                updatedTranslation.slug = normalizeString(e, '-');
+            }
+        }
+        base.setField('translations', setInArrayBy(translations, (t) => t.languageCode === contentLng, updatedTranslation));
+    }, [contentLng, translations, currentTranslationValue, id]);
+    const handleSlugManualEdit = useCallback(() => {
+        if (contentLng) {
+            slugManuallyEditedRef.current[contentLng] = true;
+        }
+    }, [contentLng]);
     const handleAddAsset = useCallback((newId) => {
         if (!newId)
             return;
-        const currentIds = state.assetIds?.value || [];
-        setField('assetIds', [...currentIds, newId]);
-    }, [state.assetIds?.value, setField]);
-    return (_jsx("div", { children: _jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue, onChange: setTranslationField, errors: state.translations?.errors }), _jsx(DetailViewMarker, { position: 'products-detail-view' }), _jsx(EntityCustomFields, { id: id, entityName: "product", hideButton: true, onChange: (customFields, translations) => {
-                        setField('customFields', customFields);
+        const currentIds = base.watch('assetIds') || [];
+        base.setField('assetIds', [...currentIds, newId]);
+    }, [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) => {
+                        base.setField('customFields', customFields);
                         if (translations)
-                            setField('translations', translations);
+                            base.setField('translations', translations);
                     }, initialValues: entity && 'customFields' in entity
                         ? { customFields: entity.customFields, translations: entity.translations }
-                        : { customFields: {} } }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value, assetsIds: state.assetIds?.value, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) })] }) }));
+                        : { customFields: {} } }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: base.watch('featuredAssetId'), assetsIds: base.watch('assetIds'), onFeaturedAssetChange: (id) => base.setField('featuredAssetId', id), onAssetsChange: (ids) => base.setField('assetIds', ids) })] }) }));
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, CardIcons, ConfirmationDialog, CustomCard, Input, apiClient, setInArrayBy, useGFFLP, EntityCustomFields, useTranslation, EntityChannelManager, } from '@deenruv/react-ui-devkit';
+import { Button, CardIcons, ConfirmationDialog, CustomCard, Input, apiClient, setInArrayBy, useDeenruvForm, z, EntityCustomFields, useTranslation, EntityChannelManager, } from '@deenruv/react-ui-devkit';
 import { CurrencyCode } from '@deenruv/admin-types';
 import { useCallback, useEffect } from 'react';
 import { toast } from 'sonner';
@@ -10,49 +10,89 @@ import { OptionsCard } from "./OptionsCard";
 import { FacetValuesCard } from "./FacetValuesCard";
 export const Variant = ({ variant, currentTranslationLng, onActionCompleted, productId }) => {
     const { t } = useTranslation('products');
-    const { state, setField } = useGFFLP('UpdateProductVariantInput', 'translations', 'price', 'prices', 'sku', 'assetIds', 'featuredAssetId', 'taxCategoryId', 'stockLevels', 'stockOnHand', 'outOfStockThreshold', 'useGlobalOutOfStockThreshold', 'trackInventory', 'facetValueIds', 'optionIds', 'customFields')({});
-    const translations = state?.translations?.value || [];
+    const variantSchema = z.object({
+        translations: z.array(z.any()).default([]),
+        price: z.any().optional(),
+        prices: z.any().optional(),
+        sku: z.any().optional(),
+        assetIds: z.array(z.string()).default([]),
+        featuredAssetId: z.string().nullable().optional(),
+        taxCategoryId: z.string().optional(),
+        stockLevels: z.array(z.any()).default([]),
+        stockOnHand: z.number().optional(),
+        outOfStockThreshold: z.number().optional(),
+        useGlobalOutOfStockThreshold: z.boolean().optional(),
+        trackInventory: z.any().optional(),
+        facetValueIds: z.array(z.string()).default([]),
+        optionIds: z.array(z.string()).default([]),
+        customFields: z.record(z.string(), z.unknown()).default({}),
+    });
+    const form = useDeenruvForm({
+        schema: variantSchema,
+        defaultValues: {
+            translations: [],
+            price: undefined,
+            prices: undefined,
+            sku: undefined,
+            assetIds: [],
+            featuredAssetId: undefined,
+            taxCategoryId: undefined,
+            stockLevels: [],
+            stockOnHand: undefined,
+            outOfStockThreshold: undefined,
+            useGlobalOutOfStockThreshold: undefined,
+            trackInventory: undefined,
+            facetValueIds: [],
+            optionIds: [],
+            customFields: {},
+        },
+    });
+    const formValues = form.watch();
+    const translations = formValues.translations || [];
     const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
     useEffect(() => {
         if (!variant)
             return;
-        setField('sku', variant.sku);
-        setField('price', variant.price);
-        setField('prices', variant.prices);
-        setField('translations', variant.translations);
-        setField('assetIds', variant.assets.map((a) => a.id));
-        setField('featuredAssetId', variant.featuredAsset?.id);
-        setField('taxCategoryId', variant.taxCategory.id);
-        setField('stockLevels', variant.stockLevels.map((sL) => ({ stockLocationId: sL.stockLocationId, stockOnHand: sL.stockOnHand })));
-        setField('stockOnHand', variant.stockOnHand);
-        setField('outOfStockThreshold', variant.outOfStockThreshold);
-        setField('useGlobalOutOfStockThreshold', variant.useGlobalOutOfStockThreshold);
-        setField('trackInventory', variant.trackInventory);
-        setField('facetValueIds', variant.facetValues.map((f) => f.id));
+        form.setField('sku', variant.sku);
+        form.setField('price', variant.price);
+        form.setField('prices', variant.prices);
+        form.setField('translations', variant.translations);
+        form.setField('assetIds', variant.assets.map((a) => a.id));
+        form.setField('featuredAssetId', variant.featuredAsset?.id);
+        form.setField('taxCategoryId', variant.taxCategory.id);
+        form.setField('stockLevels', variant.stockLevels.map((sL) => ({ stockLocationId: sL.stockLocationId, stockOnHand: sL.stockOnHand })));
+        form.setField('stockOnHand', variant.stockOnHand);
+        form.setField('outOfStockThreshold', variant.outOfStockThreshold);
+        form.setField('useGlobalOutOfStockThreshold', variant.useGlobalOutOfStockThreshold);
+        form.setField('trackInventory', variant.trackInventory);
+        form.setField('facetValueIds', variant.facetValues.map((f) => f.id));
     }, [variant]);
     const createVariant = useCallback(() => {
-        if (productId && state.sku?.validatedValue && state.translations?.validatedValue)
+        const values = form.getValues();
+        if (productId && values.sku && values.translations)
             return apiClient('mutation')({
                 createProductVariants: [
                     {
                         input: [
                             {
                                 productId,
-                                translations: state.translations?.validatedValue,
-                                // price: +state.price?.validatedValue,
-                                prices: state.prices?.validatedValue,
-                                sku: state.sku?.validatedValue,
-                                assetIds: state.assetIds?.validatedValue,
-                                featuredAssetId: state.featuredAssetId?.validatedValue,
-                                outOfStockThreshold: state.outOfStockThreshold?.validatedValue,
-                                stockOnHand: state.stockOnHand?.validatedValue,
-                                trackInventory: state.trackInventory?.validatedValue,
-                                taxCategoryId: state.taxCategoryId?.validatedValue,
-                                useGlobalOutOfStockThreshold: state.useGlobalOutOfStockThreshold?.validatedValue,
-                                stockLevels: state.stockLevels?.validatedValue,
-                                facetValueIds: state.facetValueIds?.validatedValue,
-                                optionIds: state.optionIds?.validatedValue,
-                                ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                                translations: values.translations,
+                                // price: +values.price,
+                                prices: values.prices,
+                                sku: values.sku,
+                                assetIds: values.assetIds,
+                                featuredAssetId: values.featuredAssetId,
+                                outOfStockThreshold: values.outOfStockThreshold,
+                                stockOnHand: values.stockOnHand,
+                                trackInventory: values.trackInventory,
+                                taxCategoryId: values.taxCategoryId,
+                                useGlobalOutOfStockThreshold: values.useGlobalOutOfStockThreshold,
+                                stockLevels: values.stockLevels,
+                                facetValueIds: values.facetValueIds,
+                                optionIds: values.optionIds,
+                                ...(values.customFields && Object.keys(values.customFields).length > 0
+                                    ? { customFields: values.customFields }
+                                    : {}),
                             },
                         ],
                     },
@@ -68,30 +108,33 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
                 .catch(() => {
                 toast(t('toasts.createProductVariantErrorToast'));
             });
-    }, [state, productId, onActionCompleted, t]);
+    }, [form, productId, onActionCompleted, t]);
     const updateVariant = useCallback(() => {
         if (!variant)
             return;
+        const values = form.getValues();
         apiClient('mutation')({
             updateProductVariants: [
                 {
                     input: [
                         {
                             id: variant.id,
-                            translations: state.translations?.validatedValue,
-                            // price: +state.price?.validatedValue,
-                            prices: state.prices?.validatedValue,
-                            sku: state.sku?.validatedValue,
-                            assetIds: state.assetIds?.validatedValue,
-                            featuredAssetId: state.featuredAssetId?.validatedValue,
-                            outOfStockThreshold: state.outOfStockThreshold?.validatedValue,
-                            stockOnHand: state.stockOnHand?.validatedValue,
-                            trackInventory: state.trackInventory?.validatedValue,
-                            taxCategoryId: state.taxCategoryId?.validatedValue,
-                            useGlobalOutOfStockThreshold: state.useGlobalOutOfStockThreshold?.validatedValue,
-                            stockLevels: state.stockLevels?.validatedValue,
-                            facetValueIds: state.facetValueIds?.validatedValue,
-                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                            translations: values.translations,
+                            // price: +values.price,
+                            prices: values.prices,
+                            sku: values.sku,
+                            assetIds: values.assetIds,
+                            featuredAssetId: values.featuredAssetId,
+                            outOfStockThreshold: values.outOfStockThreshold,
+                            stockOnHand: values.stockOnHand,
+                            trackInventory: values.trackInventory,
+                            taxCategoryId: values.taxCategoryId,
+                            useGlobalOutOfStockThreshold: values.useGlobalOutOfStockThreshold,
+                            stockLevels: values.stockLevels,
+                            facetValueIds: values.facetValueIds,
+                            ...(values.customFields && Object.keys(values.customFields).length > 0
+                                ? { customFields: values.customFields }
+                                : {}),
                         },
                     ],
                 },
@@ -105,7 +148,7 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
             });
         })
             .catch(() => toast.error(t('toasts.updateProductErrorToast')));
-    }, [state, variant]);
+    }, [form, variant]);
     const deleteVariant = useCallback(() => {
         if (!variant)
             return;
@@ -121,7 +164,13 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
             .catch(() => toast.error(t('toasts.deleteProductVariantErrorToast')));
     }, [variant]);
     const setTranslationField = useCallback((field, e) => {
-        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+        const currentValue = translations.find((t) => t.languageCode === currentTranslationLng);
+        const baseTranslation = currentValue ?? {
+            languageCode: currentTranslationLng,
+            name: '',
+        };
+        form.setField('translations', setInArrayBy(translations, (t) => t.languageCode === currentTranslationLng, {
+            ...baseTranslation,
             [field]: e.target.value,
             languageCode: currentTranslationLng,
         }));
@@ -129,21 +178,20 @@ export const Variant = ({ variant, currentTranslationLng, onActionCompleted, pro
     const handleAddAsset = (id) => {
         if (!id)
             return;
-        const newIds = state.assetIds?.value || [];
+        const newIds = formValues.assetIds || [];
         if (newIds?.includes(id))
             return;
-        newIds?.push(id);
-        setField('assetIds', newIds);
+        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: state.price?.value, taxRateValue: state.taxCategoryId?.value, outOfStockThresholdValue: state.outOfStockThreshold?.value, stockLevelsValue: state.stockLevels?.value, stockOnHandValue: state.stockOnHand?.value, useGlobalOutOfStockThresholdValue: state.useGlobalOutOfStockThreshold?.value, onThresholdChange: (e) => setField('outOfStockThreshold', +e.target.value), onUseGlobalChange: (e) => setField('useGlobalOutOfStockThreshold', e), onTrackInventoryChange: (e) => setField('trackInventory', e), onStockOnHandChange: (e) => setField('stockOnHand', +e.target.value), onStockLocationsChange: (e) => setField('stockLevels', e), allStockLocations: variant?.stockLevels, stockAllocated: variant?.stockAllocated, trackInventoryValue: state.trackInventory?.value })), _jsx(PriceCard, { currencyCode: variant?.currencyCode || CurrencyCode.PLN, priceValue: state.prices?.value, onPriceChange: (e) => setField('prices', e), taxRateValue: state.taxCategoryId?.value ?? undefined, onTaxRateChange: (id) => setField('taxCategoryId', id) }), _jsx(AssetsCard, { onAddAsset: handleAddAsset, featuredAssetId: state.featuredAssetId?.value, assetsIds: state.assetIds?.value, onFeaturedAssetChange: (id) => setField('featuredAssetId', id), onAssetsChange: (ids) => setField('assetIds', ids) }), _jsx(EntityCustomFields, { entityName: "productVariant", id: variant?.id, hideButton: true, onChange: (customFields, translations) => {
-                                    setField('customFields', customFields);
+    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) => {
+                                    form.setField('customFields', customFields);
                                     if (translations)
-                                        setField('translations', 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: state?.sku?.value ?? undefined, onChange: (e) => setField('sku', e.target.value) }), _jsx(Input, { label: t('name'), placeholder: t('name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e) })] }) }), _jsx(EntityChannelManager, { entity: "productVariant", entityId: variant?.id, entityChannels: variant?.channels ?? [], onRemoveSuccess: onActionCompleted, entityName: variant?.name, entityVariantList: {
+                                    : { 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: {
                                     items: [
                                         { price: variant?.price, priceWithTax: variant?.priceWithTax, currencyCode: variant?.currencyCode },
                                     ],
-                                } }), _jsx(OptionsCard, { optionGroups: variant?.options || [], productId: productId, optionIds: state.optionIds?.value ?? undefined, onChange: (e) => setField('optionIds', e), createMode: !variant }), !!variant && (_jsx(FacetValuesCard, { facetValuesIds: state.facetValueIds?.value ?? undefined, onChange: (e) => setField('facetValueIds', e) }))] })] })] }));
+                                } }), _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/promotions/Detail.js

@@ -48,22 +48,24 @@ export const PromotionsDetailPage = () => {
                     onSubmitted: (data) => {
                         if (!data.translations || !data.actions || !data.conditions)
                             throw new Error('Fill required fields.');
+                        const conditions = data.conditions;
+                        const actions = data.actions;
                         const input = {
-                            translations: data.translations?.validatedValue,
-                            enabled: data.enabled?.validatedValue || false,
-                            actions: data.actions?.validatedValue,
-                            conditions: data.conditions?.validatedValue?.map((el) => ({
+                            translations: data.translations,
+                            enabled: data.enabled || false,
+                            actions,
+                            conditions: conditions?.map((el) => ({
                                 ...el,
                                 arguments: el.arguments.map((arg) => ({ ...arg, value: arg.value.toString() })),
                             })),
-                            couponCode: data.couponCode?.validatedValue,
-                            endsAt: data.endsAt?.validatedValue,
-                            startsAt: data.startsAt?.validatedValue,
-                            perCustomerUsageLimit: data.perCustomerUsageLimit?.validatedValue,
-                            usageLimit: data.usageLimit?.validatedValue,
-                            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+                            couponCode: data.couponCode,
+                            endsAt: data.endsAt,
+                            startsAt: data.startsAt,
+                            perCustomerUsageLimit: data.perCustomerUsageLimit,
+                            usageLimit: data.usageLimit,
+                            ...(data.customFields ? { customFields: data.customFields } : {}),
                         };
-                        return id ? update({ input: { id, ...input } }) : create({ input });
+                        return id ? update({ input: { id, ...input } }) : create({ input: input });
                     },
                     onDeleted: () => {
                         if (id)

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

@@ -2,5 +2,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input, CustomCard, CardIcons, useTranslation, DateTimePicker } from '@deenruv/react-ui-devkit';
 export const OptionsCard = ({ startsAt, endsAt, couponCode, perCustomerUsageLimit, usageLimit, setField, }) => {
     const { t } = useTranslation('promotions');
-    return (_jsx(CustomCard, { title: t('options.header'), color: "orange", icon: _jsx(CardIcons.options, {}), children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(DateTimePicker, { value: startsAt ? new Date(startsAt) : undefined, onChange: (date) => setField('startsAt', date ? date.toISOString() : ''), min: new Date(), max: endsAt ? new Date(endsAt) : undefined }), _jsx(DateTimePicker, { value: endsAt ? new Date(endsAt) : undefined, onChange: (date) => setField('endsAt', date ? date.toISOString() : ''), min: startsAt ? new Date(startsAt) : undefined, max: new Date(new Date().getFullYear() + 10, 11, 31) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Input, { label: t('options.couponCode'), placeholder: t('options.couponCode'), value: couponCode, onChange: (e) => setField('couponCode', e.target.value) }), _jsx(Input, { label: t('options.usageLimit'), placeholder: t('options.usageLimit'), value: usageLimit, type: "number", onChange: (e) => setField('usageLimit', +e.target.value) }), _jsx(Input, { label: t('options.perCustomerUsageLimit'), placeholder: t('options.perCustomerUsageLimit'), value: perCustomerUsageLimit, type: "number", onChange: (e) => setField('perCustomerUsageLimit', +e.target.value) })] })] }) }));
+    return (_jsx(CustomCard, { title: t('options.header'), color: "orange", icon: _jsx(CardIcons.options, {}), children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsxs("div", { className: "flex gap-3", children: [_jsx(DateTimePicker, { value: startsAt ? new Date(startsAt) : undefined, onChange: (date) => setField('startsAt', date ? date.toISOString() : ''), min: new Date(), max: endsAt ? new Date(endsAt) : undefined }), _jsx(DateTimePicker, { value: endsAt ? new Date(endsAt) : undefined, onChange: (date) => setField('endsAt', date ? date.toISOString() : ''), min: startsAt ? new Date(startsAt) : undefined, max: new Date(new Date().getFullYear() + 10, 11, 31) })] }), _jsxs("div", { className: "flex gap-3", children: [_jsx(Input, { label: t('options.couponCode'), placeholder: t('options.couponCode'), value: couponCode ?? '', onChange: (e) => setField('couponCode', e.target.value) }), _jsx(Input, { label: t('options.usageLimit'), placeholder: t('options.usageLimit'), value: usageLimit ?? '', type: "number", onChange: (e) => setField('usageLimit', +e.target.value) }), _jsx(Input, { label: t('options.perCustomerUsageLimit'), placeholder: t('options.perCustomerUsageLimit'), value: perCustomerUsageLimit ?? '', type: "number", onChange: (e) => setField('perCustomerUsageLimit', +e.target.value) })] })] }) }));
 };

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

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

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

@@ -28,39 +28,45 @@ export const PromotionQuery = typedGql('query', { scalars })({
 export const PromotionDetailView = () => {
     const contentLng = useSettings((p) => p.translationsLanguage);
     const { form, entity, fetchEntity, id } = useDetailView('promotions-detail-view', ...PROMOTION_FORM_KEYS);
-    const { base: { setField, state }, } = form;
-    // const { data } = useQuery(ConditionsQuery);
-    // const availableConditions = useMemo(() => {
-    //   return data?.promotionConditions.filter((c) => !state.conditions?.value?.some((v) => v.code === c.code)) || [];
-    // }, [data, state.conditions?.value]);
+    const { base } = form;
     useEffect(() => {
         (async () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('translations', res.translations);
-            setField('endsAt', res.endsAt);
-            setField('startsAt', res.startsAt);
-            setField('couponCode', res.couponCode);
-            setField('usageLimit', res.usageLimit);
-            setField('perCustomerUsageLimit', res.perCustomerUsageLimit);
-            setField('conditions', res.conditions.map((c) => ({ code: c.code, arguments: c.args })));
-            setField('actions', res.actions.map((a) => ({ code: a.code, arguments: a.args })));
+            base.setField('translations', res.translations);
+            base.setField('endsAt', res.endsAt);
+            base.setField('startsAt', res.startsAt);
+            base.setField('couponCode', res.couponCode);
+            base.setField('usageLimit', res.usageLimit);
+            base.setField('perCustomerUsageLimit', res.perCustomerUsageLimit);
+            base.setField('conditions', res.conditions.map((c) => ({ code: c.code, arguments: c.args })));
+            base.setField('actions', res.actions.map((a) => ({ code: a.code, arguments: a.args })));
         })();
     }, [contentLng]);
-    const translations = useMemo(() => state?.translations?.value || [], [state?.translations?.value]);
+    const translations = useMemo(() => base.watch('translations') || [], [base.watch('translations')]);
     const currentTranslationValue = useMemo(() => translations.find((v) => v.languageCode === contentLng), [translations, contentLng]);
     const setTranslationField = useCallback((field, e) => {
-        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== contentLng, {
+        const baseTranslation = currentTranslationValue ?? {
+            languageCode: contentLng,
+            name: '',
+            description: '',
+        };
+        base.setField('translations', setInArrayBy(translations, (t) => t.languageCode === contentLng, {
+            ...baseTranslation,
             [field]: e,
             languageCode: contentLng,
         }));
-    }, [contentLng, translations]);
-    return (_jsx("div", { children: _jsxs("form", { className: "flex flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue ?? undefined, onChange: setTranslationField, errors: state.translations?.errors }), _jsx(OptionsCard, { endsAt: state.endsAt?.value, startsAt: state.startsAt?.value, couponCode: state.couponCode?.value ?? undefined, usageLimit: state.usageLimit?.value ?? undefined, perCustomerUsageLimit: state.perCustomerUsageLimit?.value ?? undefined, setField: setField }), _jsx(DetailViewMarker, { position: 'promotions-detail-view' }), _jsx(EntityCustomFields, { entityName: "promotion", id: id, hideButton: true, onChange: (customFields, translations) => {
-                        setField('customFields', customFields);
+    }, [contentLng, translations, currentTranslationValue]);
+    return (_jsx("div", { children: _jsxs("form", { className: "flex flex-col gap-4", children: [_jsx(BasicFieldsCard, { currentTranslationValue: currentTranslationValue ?? undefined, onChange: setTranslationField, errors: base.formState.errors?.translations?.message
+                        ? [base.formState.errors.translations.message]
+                        : undefined }), _jsx(OptionsCard, { endsAt: base.watch('endsAt'), startsAt: base.watch('startsAt'), couponCode: base.watch('couponCode') ?? undefined, usageLimit: base.watch('usageLimit') ?? undefined, perCustomerUsageLimit: base.watch('perCustomerUsageLimit') ?? undefined, setField: base.setField }), _jsx(DetailViewMarker, { position: 'promotions-detail-view' }), _jsx(EntityCustomFields, { entityName: "promotion", id: id, hideButton: true, onChange: (customFields, translations) => {
+                        base.setField('customFields', customFields);
                         if (translations)
-                            setField('translations', translations);
+                            base.setField('translations', translations);
                     }, initialValues: entity && 'customFields' in entity
                         ? { customFields: entity.customFields, translations: entity.translations }
-                        : { customFields: {} } }), _jsx(ConditionsCard, { value: state.conditions?.value, onChange: setField, errors: state.conditions?.errors }), _jsx(ActionsCard, { value: state.actions?.value, onChange: setField, errors: state.actions?.errors })] }) }));
+                        : { customFields: {} } }), _jsx(ConditionsCard, { value: base.watch('conditions'), onChange: base.setField, errors: base.formState.errors?.conditions?.message
+                        ? [base.formState.errors.conditions.message]
+                        : undefined }), _jsx(ActionsCard, { value: base.watch('actions'), onChange: base.setField, errors: base.formState.errors?.actions?.message ? [base.formState.errors.actions.message] : undefined })] }) }));
 };

package/dist/pages/roles/Detail.js

@@ -15,14 +15,14 @@ export const RolesDetailPage = () => {
     const { t } = useTranslation('roles');
     const { nameValidator } = useValidators();
     const onSubmitHandler = useCallback((data) => {
-        if (!data.code?.validatedValue) {
+        if (!data.code) {
             throw new Error('Name is required.');
         }
         const inputData = {
-            code: data.code.validatedValue,
-            channelIds: data.channelIds?.validatedValue,
-            description: data.description?.validatedValue,
-            permissions: data.permissions?.validatedValue,
+            code: data.code,
+            channelIds: data.channelIds,
+            description: data.description,
+            permissions: data.permissions,
         };
         if (id) {
             return update({

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

@@ -5,15 +5,16 @@ import { PermissionsCard } from "./PermissionsCard";
 const ROLE_FORM_KEYS = ['CreateRoleInput', 'code', 'description', 'channelIds', 'permissions'];
 export const RoleDetailView = () => {
     const { form, fetchEntity, id } = useDetailView('roles-detail-view', ...ROLE_FORM_KEYS);
-    const { base: { setField, state }, } = form;
+    const { base } = form;
     const { t } = useTranslation('roles');
     const [allChannelOptions, setAllChannelOptions] = useState([]);
+    const channelIds = base.watch('channelIds');
     const currentChannelOptions = useMemo(() => {
         if (!allChannelOptions)
             return undefined;
         else
-            return state.channelIds?.value?.map((id) => allChannelOptions.find((o) => o.value === id) || { value: id, label: id });
-    }, [allChannelOptions, state.channelIds?.value]);
+            return channelIds?.map((id) => allChannelOptions.find((o) => o.value === id) || { value: id, label: id });
+    }, [allChannelOptions, channelIds]);
     const fetchChannels = useCallback(async () => {
         const response = await apiClient('query')({
             channels: [
@@ -39,11 +40,15 @@ export const RoleDetailView = () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('code', res.code);
-            setField('description', res.description);
-            setField('channelIds', res.channels.map((ch) => ch.id));
-            setField('permissions', res.permissions);
+            base.setField('code', res.code);
+            base.setField('description', res.description);
+            base.setField('channelIds', res.channels.map((ch) => ch.id));
+            base.setField('permissions', res.permissions);
         })();
     }, []);
-    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.description'), value: state.description?.value ?? undefined, onChange: (e) => setField('description', e.target.value), errors: state.description?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.code'), value: state.code?.value ?? undefined, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsxs("div", { className: "flex basis-full flex-col gap-[6px] xl:basis-1/2", children: [_jsx(Label, { children: t('details.basic.channels') }), _jsx(MultipleSelector, { options: allChannelOptions, value: currentChannelOptions, placeholder: t('details.basic.channelsPlaceholder'), onChange: (channelsOptions) => setField('channelIds', channelsOptions.map((o) => o.value)), hideClearAllButton: true })] })] }) }), _jsx(DetailViewMarker, { position: 'roles-detail-view' }), _jsx(PermissionsCard, { currentPermissions: state.permissions?.value ?? undefined, onPermissionsChange: (e) => setField('permissions', e), errors: state.permissions?.errors })] }) }));
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('details.basic.title'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.description'), value: base.watch('description') ?? undefined, onChange: (e) => base.setField('description', e.target.value), errors: base.formState.errors?.description?.message
+                                        ? [base.formState.errors.description.message]
+                                        : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/2 xl:basis-1/4", children: _jsx(Input, { label: t('details.basic.code'), value: base.watch('code') ?? undefined, onChange: (e) => base.setField('code', e.target.value), errors: base.formState.errors?.code?.message ? [base.formState.errors.code.message] : undefined, required: true }) }), _jsxs("div", { className: "flex basis-full flex-col gap-[6px] xl:basis-1/2", children: [_jsx(Label, { children: t('details.basic.channels') }), _jsx(MultipleSelector, { options: allChannelOptions, value: currentChannelOptions, placeholder: t('details.basic.channelsPlaceholder'), onChange: (channelsOptions) => base.setField('channelIds', channelsOptions.map((o) => o.value)), hideClearAllButton: true })] })] }) }), _jsx(DetailViewMarker, { position: 'roles-detail-view' }), _jsx(PermissionsCard, { currentPermissions: base.watch('permissions') ?? undefined, onPermissionsChange: (e) => base.setField('permissions', e), errors: base.formState.errors?.permissions?.message
+                        ? [base.formState.errors.permissions.message]
+                        : undefined })] }) }));
 };

package/dist/pages/sellers/Detail.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { useParams } from 'react-router';
-import { useValidators, getMutation, useMutation, DetailView, createDeenruvForm, } from '@deenruv/react-ui-devkit';
+import { useValidators, getMutation, useMutation, DetailView, createDeenruvForm } from '@deenruv/react-ui-devkit';
 import { SellerDetailView } from "./_components/SellerDetailView.js";
 const CreateSellerMutation = getMutation('createSeller');
 const EditSellerMutation = getMutation('updateSeller');
@@ -13,12 +13,12 @@ export const SellersDetailPage = () => {
     const [remove] = useMutation(DeleteSellerMutation);
     const { nameValidator } = useValidators();
     const onSubmitHandler = useCallback((data) => {
-        if (!data.name?.validatedValue) {
+        if (!data.name) {
             throw new Error('Name is required.');
         }
         const inputData = {
-            name: data.name.validatedValue,
-            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+            name: data.name,
+            ...(data.customFields ? { customFields: data.customFields } : {}),
         };
         if (id) {
             return update({ input: { id, ...inputData } });

package/dist/pages/sellers/_components/SellerDetailView.js

@@ -4,17 +4,17 @@ import { Card, CardContent, CardHeader, CardTitle, DetailViewMarker, Input, useD
 export const SELLER_FORM_KEYS = ['CreateSellerInput', 'name', 'customFields'];
 export const SellerDetailView = () => {
     const { form, fetchEntity, entity, id } = useDetailView('sellers-detail-view', ...SELLER_FORM_KEYS);
-    const { base: { setField, state }, } = form;
+    const { base } = form;
     const { t } = useTranslation('sellers');
     useEffect(() => {
         (async () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('name', res.name);
+            base.setField('name', res.name);
         })();
     }, []);
-    return (_jsx("main", { className: "my-4 min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: t('details.basic.title') }), _jsx(CardContent, { className: "flex flex-col gap-4 p-0 pt-4", children: _jsx("div", { className: "flex flex-col gap-3", children: _jsx(Input, { className: "w-1/2", label: t('details.basic.name'), value: state.name?.value, onChange: (e) => setField('name', e.target.value), errors: state.name?.errors, required: true }) }) })] }) }), _jsx(DetailViewMarker, { position: 'sellers-detail-view' }), _jsx(EntityCustomFields, { entityName: "seller", id: id, hideButton: true, onChange: (customFields) => {
-                        setField('customFields', customFields);
+    return (_jsx("main", { className: "my-4 min-h-96", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Card, { children: _jsxs(CardHeader, { children: [_jsx(CardTitle, { className: "flex flex-row justify-between text-base", children: t('details.basic.title') }), _jsx(CardContent, { className: "flex flex-col gap-4 p-0 pt-4", children: _jsx("div", { className: "flex flex-col gap-3", children: _jsx(Input, { className: "w-1/2", label: t('details.basic.name'), value: base.watch('name'), onChange: (e) => base.setField('name', e.target.value), errors: base.formState.errors?.name?.message ? [base.formState.errors.name.message] : undefined, required: true }) }) })] }) }), _jsx(DetailViewMarker, { position: 'sellers-detail-view' }), _jsx(EntityCustomFields, { entityName: "seller", id: id, hideButton: true, onChange: (customFields) => {
+                        base.setField('customFields', customFields);
                     }, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} } })] }) }));
 };