@deenruv/admin-dashboard 1.0.6 → 1.0.11

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

@@ -1,64 +1,54 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SurchargeTable } from './';
-import { useTranslation, Button, Checkbox, Input, Label, useGFFLP, useOrder, CustomCard, } from '@deenruv/react-ui-devkit';
+import { useTranslation, Button, Checkbox, Input, Label, useDeenruvForm, z, useOrder, CustomCard, } from '@deenruv/react-ui-devkit';
 import { useCallback, useState } from 'react';
 import { PlusCircle, DollarSign, Tag, FileText, Percent, Receipt, Loader2 } from 'lucide-react';
+const surchargeSchema = z.object({
+    description: z.string().min(1),
+    sku: z.string().min(1),
+    price: z.number().positive(),
+    priceIncludesTax: z.boolean().default(false),
+    taxDescription: z.string().default(''),
+    taxRate: z.number().default(0),
+});
 export const SurchargeCard = () => {
     const { t } = useTranslation('orders');
     const { setModifyOrderInput, modifyOrderInput, setModifiedOrder, modifiedOrder } = useOrder();
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const { state, setField } = useGFFLP('SurchargeInput', 'description', 'price', 'priceIncludesTax', 'sku', 'taxDescription', 'taxRate')({
-        description: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('surcharge.validation.descriptionRequired', 'Description is required')];
-            },
-        },
-        sku: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('surcharge.validation.skuRequired', 'SKU is required')];
-            },
-        },
-        price: {
-            initialValue: 0,
-            validate: (v) => {
-                if (v === undefined || v === null)
-                    return [t('surcharge.validation.priceRequired', 'Price is required')];
-                if (v <= 0)
-                    return [t('surcharge.validation.pricePositive', 'Price must be greater than zero')];
-            },
-        },
-        priceIncludesTax: {
-            initialValue: false,
-        },
-        taxDescription: {
-            initialValue: '',
-        },
-        taxRate: {
-            initialValue: 0,
+    const form = useDeenruvForm({
+        schema: surchargeSchema,
+        defaultValues: {
+            description: '',
+            sku: '',
+            price: 0,
+            priceIncludesTax: false,
+            taxDescription: '',
+            taxRate: 0,
         },
     });
+    const description = form.watch('description');
+    const sku = form.watch('sku');
+    const price = form.watch('price');
+    const priceIncludesTax = form.watch('priceIncludesTax');
+    const taxDescription = form.watch('taxDescription');
+    const taxRate = form.watch('taxRate');
     const handleAddSurcharge = useCallback(async () => {
         // Validate all fields
-        if (!state.description?.value || !state.sku?.value || !state.price?.value || state.price?.value <= 0) {
+        if (!description || !sku || !price || price <= 0) {
             return;
         }
         setIsSubmitting(true);
         try {
             const orderWithSurcharge = Object.assign({}, modifyOrderInput);
-            const { description, price, priceIncludesTax, sku, taxDescription, taxRate } = state;
             const surchargesArray = modifyOrderInput?.surcharges || [];
             surchargesArray.push({
-                description: description?.value || '',
-                price: price?.value,
-                priceIncludesTax: priceIncludesTax?.value || false,
-                sku: sku?.value,
-                taxDescription: taxDescription?.value,
-                taxRate: taxRate?.value,
+                description: description || '',
+                price,
+                priceIncludesTax: priceIncludesTax || false,
+                sku,
+                taxDescription,
+                taxRate,
             });
             orderWithSurcharge.surcharges = surchargesArray;
             if (modifiedOrder)
@@ -67,33 +57,41 @@ export const SurchargeCard = () => {
                     surcharges: [
                         ...modifiedOrder.surcharges,
                         {
-                            description: description?.value || '',
-                            price: taxRate?.value && priceIncludesTax?.value ? price?.value / (1 + taxRate.value / 100) : price?.value,
-                            sku: sku?.value,
+                            description: description || '',
+                            price: taxRate && priceIncludesTax ? price / (1 + taxRate / 100) : price,
+                            sku,
                             createdAt: new Date().toDateString(),
-                            priceWithTax: taxRate?.value && !priceIncludesTax?.value
-                                ? +price?.value * (+taxRate?.value / 100) + +price?.value
-                                : +price?.value,
-                            taxRate: taxRate?.value || 0,
+                            priceWithTax: taxRate && !priceIncludesTax ? +price * (+taxRate / 100) + +price : +price,
+                            taxRate: taxRate || 0,
                         },
                     ],
                 });
             setModifyOrderInput(orderWithSurcharge);
             // Reset form fields
-            setField('description', '');
-            setField('sku', '');
-            setField('price', 0);
-            setField('priceIncludesTax', false);
-            setField('taxDescription', '');
-            setField('taxRate', 0);
+            form.reset({
+                description: '',
+                sku: '',
+                price: 0,
+                priceIncludesTax: false,
+                taxDescription: '',
+                taxRate: 0,
+            });
         }
         finally {
             setIsSubmitting(false);
         }
-    }, [state, modifiedOrder, modifyOrderInput, setModifiedOrder, setModifyOrderInput, setField]);
-    return (_jsx(CustomCard, { color: "yellow", description: t('surcharge.description', 'Add additional fees or charges to this order'), title: t('surcharge.title', 'Order Surcharges'), icon: _jsx(Receipt, { className: "size-5 text-yellow-500 dark:text-yellow-400" }), bottomRight: _jsx(Button, { onClick: handleAddSurcharge, disabled: isSubmitting ||
-                !state.description?.value ||
-                !state.sku?.value ||
-                !state.price?.value ||
-                state.price?.value <= 0, className: "ml-auto gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('surcharge.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(PlusCircle, { className: "size-4" }), t('surcharge.addButton', 'Add Surcharge')] })) }), children: _jsxs("div", { className: "space-y-6", children: [_jsx(SurchargeTable, {}), _jsx("div", { children: _jsxs("div", { className: "mb-4 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-description", className: "text-sm font-medium", children: [t('surcharge.labels.description', 'Description'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-description", placeholder: t('surcharge.placeholders.description', 'Enter surcharge description'), value: state.description?.value || '', onChange: (e) => setField('description', e.target.value), className: "pl-9", errors: state.description?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-sku", className: "text-sm font-medium", children: [t('surcharge.labels.sku', 'SKU'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-sku", placeholder: t('surcharge.placeholders.sku', 'Enter SKU code'), value: state.sku?.value || '', onChange: (e) => setField('sku', e.target.value), className: "pl-9", errors: state.sku?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Tag, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-price", className: "text-sm font-medium", children: [t('surcharge.labels.price', 'Price'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-price", type: "currency", endAdornment: modifiedOrder?.currencyCode, step: "0.01", min: "0", placeholder: t('surcharge.placeholders.price', 'Enter price'), value: state.price?.value || '', onChange: (e) => setField('price', +e.target.value), className: "pl-9", errors: state.price?.errors }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(DollarSign, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-rate", className: "text-sm font-medium", children: t('surcharge.labels.taxRate', 'Tax Rate (%)') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-rate", type: "number", step: "0.01", min: "0", placeholder: t('surcharge.placeholders.taxRate', 'Enter tax rate'), value: state.taxRate?.value || 0, onChange: (e) => setField('taxRate', +e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Percent, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-description", className: "text-sm font-medium", children: t('surcharge.labels.taxDescription', 'Tax Description') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-description", placeholder: t('surcharge.placeholders.taxDescription', 'Enter tax description'), value: state.taxDescription?.value || '', onChange: (e) => setField('taxDescription', e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-included", className: "text-sm font-medium", children: t('surcharge.labels.includesTax', { value: state.taxRate?.value }) }), _jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(Checkbox, { id: "surcharge-tax-included", checked: state.priceIncludesTax?.value || false, onCheckedChange: (e) => setField('priceIncludesTax', Boolean(e)) }), _jsx(Label, { htmlFor: "surcharge-tax-included", className: "cursor-pointer text-sm", children: t('surcharge.placeholders.taxIncluded', 'Tax is included in the price') })] })] })] }) })] }) }));
+    }, [
+        description,
+        sku,
+        price,
+        priceIncludesTax,
+        taxDescription,
+        taxRate,
+        modifiedOrder,
+        modifyOrderInput,
+        setModifiedOrder,
+        setModifyOrderInput,
+        form,
+    ]);
+    return (_jsx(CustomCard, { color: "yellow", description: t('surcharge.description', 'Add additional fees or charges to this order'), title: t('surcharge.title', 'Order Surcharges'), icon: _jsx(Receipt, { className: "size-5 text-yellow-500 dark:text-yellow-400" }), bottomRight: _jsx(Button, { onClick: handleAddSurcharge, disabled: isSubmitting || !description || !sku || !price || price <= 0, className: "ml-auto gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('surcharge.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(PlusCircle, { className: "size-4" }), t('surcharge.addButton', 'Add Surcharge')] })) }), children: _jsxs("div", { className: "space-y-6", children: [_jsx(SurchargeTable, {}), _jsx("div", { children: _jsxs("div", { className: "mb-4 grid grid-cols-1 gap-4 md:grid-cols-3 lg:grid-cols-5", children: [_jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-description", className: "text-sm font-medium", children: [t('surcharge.labels.description', 'Description'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-description", placeholder: t('surcharge.placeholders.description', 'Enter surcharge description'), value: description || '', onChange: (e) => form.setField('description', e.target.value), className: "pl-9", errors: form.formState.errors.description?.message ? [form.formState.errors.description.message] : undefined }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-sku", className: "text-sm font-medium", children: [t('surcharge.labels.sku', 'SKU'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-sku", placeholder: t('surcharge.placeholders.sku', 'Enter SKU code'), value: sku || '', onChange: (e) => form.setField('sku', e.target.value), className: "pl-9", errors: form.formState.errors.sku?.message ? [form.formState.errors.sku.message] : undefined }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Tag, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsxs(Label, { htmlFor: "surcharge-price", className: "text-sm font-medium", children: [t('surcharge.labels.price', 'Price'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-price", type: "currency", endAdornment: modifiedOrder?.currencyCode, step: "0.01", min: "0", placeholder: t('surcharge.placeholders.price', 'Enter price'), value: price || '', onChange: (e) => form.setField('price', +e.target.value), className: "pl-9", errors: form.formState.errors.price?.message ? [form.formState.errors.price.message] : undefined }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(DollarSign, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-rate", className: "text-sm font-medium", children: t('surcharge.labels.taxRate', 'Tax Rate (%)') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-rate", type: "number", step: "0.01", min: "0", placeholder: t('surcharge.placeholders.taxRate', 'Enter tax rate'), value: taxRate || 0, onChange: (e) => form.setField('taxRate', +e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(Percent, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-description", className: "text-sm font-medium", children: t('surcharge.labels.taxDescription', 'Tax Description') }), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: "surcharge-tax-description", placeholder: t('surcharge.placeholders.taxDescription', 'Enter tax description'), value: taxDescription || '', onChange: (e) => form.setField('taxDescription', e.target.value), className: "pl-9" }), _jsx("div", { className: "absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground", children: _jsx(FileText, { className: "size-4" }) })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "surcharge-tax-included", className: "text-sm font-medium", children: t('surcharge.labels.includesTax', { value: taxRate }) }), _jsxs("div", { className: "flex items-center gap-2 pt-2", children: [_jsx(Checkbox, { id: "surcharge-tax-included", checked: priceIncludesTax || false, onCheckedChange: (e) => form.setField('priceIncludesTax', Boolean(e)) }), _jsx(Label, { htmlFor: "surcharge-tax-included", className: "cursor-pointer text-sm", children: t('surcharge.placeholders.taxIncluded', 'Tax is included in the price') })] })] })] }) })] }) }));
 };

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

@@ -6,6 +6,7 @@ import { PossibleOrderStates } from "./PossibleOrderStates";
 import { DeletionResult, HistoryEntryType } from '@deenruv/admin-types';
 import { ChevronLeft, EllipsisVerticalIcon, Info } from 'lucide-react';
 import { useMemo, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
 import { ORDER_STATE } from "../../../graphql/base";
@@ -14,7 +15,7 @@ import { CancelAndRefundDialog, ModifyAcceptModal } from './index.js';
 import React from 'react';
 export const TopActions = () => {
     const { currentPossibilities, manualChange, setManualChange, fetchOrderHistory, fetchOrder, order, changeOrderState, cancelOrder: _cancelOrder, cancelAndRefundOrder, } = useOrder();
-    const orderProcess = useServer((p) => p.serverConfig?.orderProcess || []);
+    const orderProcess = useServer(useShallow((p) => p.serverConfig?.orderProcess || []));
     const { t } = useTranslation('orders');
     const navigate = useNavigate();
     const { getDetailViewActions } = usePluginStore();

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

@@ -14,22 +14,23 @@ export const PaymentMethodsDetailPage = () => {
     const { t } = useTranslation('paymentMethods');
     const { translationsValidator, stringValidator, configurableOperationValidator } = useValidators();
     const onSubmitHandler = useCallback((data) => {
-        if (!data.code?.validatedValue) {
+        if (!data.code) {
             throw new Error('Name is required.');
         }
+        const checker = data.checker;
         const inputData = {
-            code: data.code?.validatedValue,
-            handler: data.handler?.validatedValue,
-            enabled: data.enabled?.validatedValue || data.enabled?.initialValue,
-            translations: data.translations?.validatedValue,
-            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+            code: data.code,
+            handler: data.handler,
+            enabled: (data.enabled ?? false),
+            translations: data.translations,
+            ...(data.customFields ? { customFields: data.customFields } : {}),
         };
         if (id) {
             return update({
                 input: {
                     id,
                     ...inputData,
-                    checker: data.checker?.validatedValue?.code !== '' ? data.checker?.validatedValue : undefined,
+                    checker: checker?.code !== '' ? checker : undefined,
                 },
             });
         }

package/dist/pages/payment-methods/_components/PaymentMethodDetailView.js

@@ -13,8 +13,7 @@ const PAYMENT_METHOD_FORM_KEYS = [
 ];
 export const PaymentMethodDetailView = () => {
     const { form, fetchEntity, entity, id } = useDetailView('paymentMethods-detail-view', ...PAYMENT_METHOD_FORM_KEYS);
-    const { base: { setField, state }, } = form;
-    // const editMode = useMemo(() => !!id, [id]);
+    const { base } = form;
     const { t } = useTranslation('paymentMethods');
     const { translationsLanguage: currentTranslationLng } = useSettings();
     useEffect(() => {
@@ -22,32 +21,41 @@ export const PaymentMethodDetailView = () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('code', res.code);
-            setField('enabled', res.enabled);
-            setField('translations', res.translations);
-            setField('handler', {
+            base.setField('code', res.code);
+            base.setField('enabled', res.enabled);
+            base.setField('translations', res.translations);
+            base.setField('handler', {
                 arguments: res.handler.args,
                 code: res.handler.code,
             });
-            setField('checker', {
+            base.setField('checker', {
                 arguments: res.checker?.args || [],
                 code: res.checker?.code || '',
             });
         })();
     }, []);
-    const translations = state?.translations?.value || [];
+    const translations = base.watch('translations') || [];
     const currentTranslationValue = translations.find((v) => v.languageCode === currentTranslationLng);
     const setTranslationField = useCallback((field, e) => {
-        setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+        // Merge with existing translation to preserve other fields (name, description, etc.)
+        const baseTranslation = currentTranslationValue ?? {
+            languageCode: currentTranslationLng,
+            name: '',
+            description: '',
+        };
+        base.setField('translations', setInArrayBy(translations, (t) => t.languageCode === currentTranslationLng, {
+            ...baseTranslation,
             [field]: e,
             languageCode: currentTranslationLng,
         }));
-    }, [currentTranslationLng, translations]);
-    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", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", 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: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: state.enabled?.value ?? undefined, onCheckedChange: (e) => setField('enabled', e) }), _jsx(Label, { children: t('details.basic.enabled') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? undefined, onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(DetailViewMarker, { position: 'paymentMethods-detail-view' }), _jsx(EntityCustomFields, { entityName: "paymentMethod", id: id, hideButton: true, onChange: (customFields, translations) => {
-                        setField('customFields', customFields);
+    }, [currentTranslationLng, translations, currentTranslationValue]);
+    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", children: [_jsxs("div", { className: "flex w-full flex-wrap items-start gap-4 p-0 pt-4 xl:flex-nowrap", children: [_jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.name'), value: currentTranslationValue?.name ?? '', onChange: (e) => setTranslationField('name', e.target.value), errors: base.formState.errors?.translations?.message
+                                                ? [base.formState.errors.translations.message]
+                                                : undefined, required: true }) }), _jsx("div", { className: "flex basis-full md:basis-1/3", children: _jsx(Input, { label: t('details.basic.code'), value: base.watch('code') ?? '', 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: "mt-7 flex basis-full items-center gap-3 md:basis-1/3", children: [_jsx(Switch, { checked: base.watch('enabled') ?? false, onCheckedChange: (e) => base.setField('enabled', e) }), _jsx(Label, { children: t('details.basic.enabled') })] })] }), _jsxs("div", { className: "flex basis-full flex-col", children: [_jsx(Label, { className: "mb-2", children: t('details.basic.description') }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (e) => setTranslationField('description', e) })] })] }) }), _jsx(DetailViewMarker, { position: 'paymentMethods-detail-view' }), _jsx(EntityCustomFields, { entityName: "paymentMethod", 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(OptionsCard, { currentHandlerValue: state.handler?.value ?? undefined, currentCheckerValue: state.checker?.value ?? undefined, onHandlerValueChange: (handler) => setField('handler', handler), onCheckerValueChange: (checker) => setField('checker', checker), handlerErrors: state.handler?.errors })] }) }));
+                        : { customFields: {} } }), _jsx(OptionsCard, { currentHandlerValue: base.watch('handler') ?? undefined, currentCheckerValue: base.watch('checker') ?? undefined, onHandlerValueChange: (handler) => base.setField('handler', handler), onCheckerValueChange: (checker) => base.setField('checker', checker), handlerErrors: base.formState.errors?.handler?.message ? [base.formState.errors.handler.message] : undefined })] }) }));
 };

package/dist/pages/products/Detail.js

@@ -41,6 +41,8 @@ export const ProductsDetailPage = () => {
                     config: {
                         translations: {
                             validate: (v) => {
+                                if (!v || !v.length)
+                                    return [t('validation.nameSlugRequired')];
                                 const { name, slug } = v[0];
                                 if (!name || !slug)
                                     return [t('validation.nameSlugRequired')];
@@ -51,14 +53,14 @@ export const ProductsDetailPage = () => {
                         if (!data.translations)
                             throw new Error('Name is required.');
                         const input = {
-                            translations: data.translations?.validatedValue,
-                            assetIds: data.assetIds?.validatedValue,
-                            featuredAssetId: data.featuredAssetId?.validatedValue,
-                            facetValueIds: data.facetValueIds?.validatedValue,
-                            enabled: data.enabled?.validatedValue,
-                            ...(data.customFields?.validatedValue ? { customFields: data.customFields?.validatedValue } : {}),
+                            translations: data.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 });
+                        return id ? update({ input: { id, ...input } }) : create({ input: input });
                     },
                     onDeleted: () => {
                         if (id)

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

@@ -1,23 +1,45 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogHeader, DialogTitle, Input, Dialog, DialogContent, DialogTrigger, Label, DialogFooter, apiClient, useGFFLP, setInArrayBy, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Button, DialogHeader, DialogTitle, Input, Dialog, DialogContent, DialogTrigger, Label, DialogFooter, apiClient, setInArrayBy, EntityCustomFields, useTranslation, useDeenruvForm, z, } from '@deenruv/react-ui-devkit';
 import { useCallback, useState } from 'react';
 import { toast } from 'sonner';
+const addOptionGroupSchema = z.object({
+    code: z.string().default(''),
+    translations: z
+        .array(z
+        .object({
+        name: z.string(),
+        languageCode: z.string(),
+    })
+        .passthrough())
+        .default([]),
+    customFields: z.record(z.string(), z.unknown()).optional().default({}),
+});
 export const AddOptionGroupDialog = ({ currentTranslationLng, productId, onSuccess, }) => {
     const { t } = useTranslation('products');
     const [open, setOpen] = useState(false);
-    const { state, setField } = useGFFLP('CreateProductOptionGroupInput', 'code', 'translations', 'customFields')({});
-    const translations = state?.translations?.value || [];
+    const form = useDeenruvForm({
+        schema: addOptionGroupSchema,
+        defaultValues: {
+            code: '',
+            translations: [],
+            customFields: {},
+        },
+    });
+    const translations = form.watch('translations') || [];
     const [codeEditedManually, setCodeEditedManually] = useState(false);
     const createGroup = useCallback(() => {
-        if (state.code?.validatedValue && state.translations?.validatedValue)
+        const code = form.getValues('code');
+        const currentTranslations = form.getValues('translations');
+        const customFields = form.getValues('customFields');
+        if (code && currentTranslations)
             return apiClient('mutation')({
                 createProductOptionGroup: [
                     {
                         input: {
-                            code: state.code?.validatedValue,
+                            code,
                             options: [],
-                            translations: state.translations.validatedValue,
-                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                            translations: currentTranslations,
+                            ...(customFields && Object.keys(customFields).length > 0 ? { customFields } : {}),
                         },
                     },
                     {
@@ -47,19 +69,19 @@ export const AddOptionGroupDialog = ({ currentTranslationLng, productId, onSucce
                 .catch(() => {
                 toast(t('toasts.createOptionGroupErrorToast'));
             });
-    }, [state.code, state.translations, productId, onSuccess, t]);
-    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { className: "self-end", children: t('addOptionGroupDialog.title') }) }), _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('addOptionGroupDialog.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.name') }), _jsx(Input, { className: "mt-1", value: state.translations?.value[0].name ?? undefined, onChange: (e) => {
-                                            setField('translations', setInArrayBy(translations, (t) => t.languageCode !== currentTranslationLng, {
+    }, [form, productId, onSuccess, t]);
+    return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { className: "self-end", children: t('addOptionGroupDialog.title') }) }), _jsxs(DialogContent, { children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: t('addOptionGroupDialog.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.name') }), _jsx(Input, { className: "mt-1", value: translations[0]?.name ?? undefined, onChange: (e) => {
+                                            form.setField('translations', setInArrayBy(translations, (t) => t.languageCode === currentTranslationLng, {
                                                 name: e.target.value,
                                                 languageCode: currentTranslationLng,
                                             }));
                                             if (!codeEditedManually) {
-                                                setField('code', e.target.value.replace(/\s+/g, '-'));
+                                                form.setField('code', e.target.value.replace(/\s+/g, '-'));
                                             }
-                                        } })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.code') }), _jsx(Input, { className: "mt-1", value: state.code?.value, onChange: (e) => {
+                                        } })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addOptionGroupDialog.code') }), _jsx(Input, { className: "mt-1", value: form.watch('code'), onChange: (e) => {
                                             setCodeEditedManually(true);
-                                            setField('code', e.target.value);
+                                            form.setField('code', e.target.value);
                                         } })] }), _jsx(EntityCustomFields, { id: undefined, entityName: "productOptionGroup", hideButton: true, onChange: (cf) => {
-                                    setField('customFields', cf);
+                                    form.setField('customFields', cf);
                                 }, additionalData: {}, withoutBorder: true })] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { onClick: () => setOpen(false), children: t('addOptionGroupDialog.cancel') }), _jsx(Button, { onClick: createGroup, children: t('addOptionGroupDialog.add') })] })] })] }));
 };

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

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation, Input, CustomCard, CardIcons, RichTextEditor } from '@deenruv/react-ui-devkit';
-export const BasicFieldsCard = ({ currentTranslationValue, onChange, errors }) => {
+export const BasicFieldsCard = ({ currentTranslationValue, onChange, errors, onSlugManualEdit, }) => {
     const { t } = useTranslation('products');
-    return (_jsx(CustomCard, { title: t('details.basicInfo'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('name'), placeholder: t('name'), value: currentTranslationValue?.name ?? '', onChange: (e) => onChange('name', e.target.value), errors: errors }), _jsx(Input, { value: currentTranslationValue?.slug ?? '', label: t('slug'), placeholder: t('slug'), onChange: (e) => onChange('slug', e.target.value) })] }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (value) => onChange('description', value) })] }) }));
+    return (_jsx(CustomCard, { title: t('details.basicInfo'), icon: _jsx(CardIcons.basic, {}), color: "blue", children: _jsxs("div", { className: "flex flex-1 flex-col gap-y-4", children: [_jsxs("div", { className: "flex items-start gap-3", children: [_jsx(Input, { label: t('name'), placeholder: t('name'), value: currentTranslationValue?.name ?? '', onChange: (e) => onChange('name', e.target.value), errors: errors }), _jsx(Input, { value: currentTranslationValue?.slug ?? '', label: t('slug'), placeholder: t('slug'), onChange: (e) => {
+                                onSlugManualEdit?.();
+                                onChange('slug', e.target.value);
+                            } })] }), _jsx(RichTextEditor, { content: currentTranslationValue?.description ?? '', onContentChanged: (value) => onChange('description', value) })] }) }));
 };

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EntityChannelManager, Routes, useDetailView } from '@deenruv/react-ui-devkit';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { SettingsCard } from './SettingsCard';
 import { CollectionsCard } from "./CollectionsCard";
 import { FacetValuesCard } from "./FacetValuesCard";
@@ -16,15 +16,23 @@ const PRODUCT_FORM_KEYS = [
 export const ProductDetailSidebar = ({ marker }) => {
     const { form, entity } = useDetailView('products-detail-view', ...PRODUCT_FORM_KEYS);
     const navigate = useNavigate();
-    const { base: { state, setField }, } = form;
+    const { base } = form;
+    // Guard: only set creation-mode defaults once to avoid rerender churn.
+    const creationDefaultsApplied = useRef(false);
     useEffect(() => {
         if (!entity) {
-            setField('facetValueIds', []);
-            setField('enabled', true);
+            if (!creationDefaultsApplied.current) {
+                creationDefaultsApplied.current = true;
+                base.setField('facetValueIds', []);
+                base.setField('enabled', true);
+            }
             return;
         }
-        setField('facetValueIds', entity.facetValues.map((f) => f.id));
-        setField('enabled', entity.enabled);
+        // When entity arrives, reset the guard so a subsequent unmount/remount
+        // of the sidebar (e.g. tab switch) can reinitialise if needed.
+        creationDefaultsApplied.current = false;
+        base.setField('facetValueIds', entity.facetValues.map((f) => f.id));
+        base.setField('enabled', entity.enabled);
     }, [entity]);
-    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(SettingsCard, { enabledValue: state.enabled?.value ?? undefined, onEnabledChange: (e) => setField('enabled', e) }), _jsx(FacetValuesCard, { facetValuesIds: state.facetValueIds?.value ?? undefined, onChange: (e) => setField('facetValueIds', e) }), !!entity?.channels?.length && (_jsx(EntityChannelManager, { entity: "product", entityChannels: entity.channels, entityId: entity.id, onRemoveSuccess: () => navigate(Routes.products.list), entitySlug: entity.slug, entityName: entity.name })), !!entity?.collections?.length && _jsx(CollectionsCard, { collections: entity.collections })] }));
+    return (_jsxs("div", { className: "flex w-full flex-col gap-4", children: [_jsx(SettingsCard, { enabledValue: base.watch('enabled') ?? undefined, onEnabledChange: (e) => base.setField('enabled', e) }), _jsx(FacetValuesCard, { facetValuesIds: base.watch('facetValueIds') ?? undefined, onChange: (e) => base.setField('facetValueIds', e) }), !!entity?.channels?.length && (_jsx(EntityChannelManager, { entity: "product", entityChannels: entity.channels, entityId: entity.id, onRemoveSuccess: () => navigate(Routes.products.list), entitySlug: entity.slug, entityName: entity.name })), !!entity?.collections?.length && _jsx(CollectionsCard, { collections: entity.collections })] }));
 };