@deenruv/admin-dashboard 1.0.5 → 1.0.9

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button, Tabs, TabsList, TabsTrigger, TabsContent, Input, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, OrderDetailSelector, Label, useGFFLP, CustomCard, EntityCustomFields, useTranslation, CustomerSearch, } from '@deenruv/react-ui-devkit';
+import { Button, Tabs, TabsList, TabsTrigger, TabsContent, Input, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, OrderDetailSelector, Label, useDeenruvForm, z, CustomCard, EntityCustomFields, useTranslation, CustomerSearch, } from '@deenruv/react-ui-devkit';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
 import { Edit, User, Check, Mail, Phone, Loader2, UserPlus, Search, AlertCircle } from 'lucide-react';
@@ -11,49 +11,35 @@ export const CustomerSelectCard = () => {
     const [selected, setSelected] = useState(order?.customer);
     const [open, setOpen] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const { state, checkIfAllFieldsAreValid, setField, clearAllForm } = useGFFLP('CreateCustomerInput', 'firstName', 'lastName', 'title', 'phoneNumber', 'emailAddress', 'customFields')({
-        firstName: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('form.requiredError')];
-            },
-        },
-        lastName: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('form.requiredError')];
-            },
-        },
-        phoneNumber: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('form.requiredError')];
-                // if (!phoneNumberRegExp.test(v)) return [t('form.phoneError')];
-            },
-        },
-        emailAddress: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('form.requiredError')];
-            },
-        },
-        customFields: {
-            initialValue: {},
+    const customerSchema = z.object({
+        firstName: z.string().min(1, t('form.requiredError')),
+        lastName: z.string().min(1, t('form.requiredError')),
+        title: z.string().default(''),
+        phoneNumber: z.string().min(1, t('form.requiredError')),
+        emailAddress: z.string().min(1, t('form.requiredError')),
+        customFields: z.record(z.string(), z.unknown()).default({}),
+    });
+    const form = useDeenruvForm({
+        schema: customerSchema,
+        defaultValues: {
+            firstName: '',
+            lastName: '',
+            title: '',
+            phoneNumber: '',
+            emailAddress: '',
+            customFields: {},
         },
     });
+    const formValues = form.watch();
     useEffect(() => setSelected(order?.customer), [order]);
     useEffect(() => {
         if (tab === 'create')
-            clearAllForm();
+            form.reset({ firstName: '', lastName: '', title: '', phoneNumber: '', emailAddress: '', customFields: {} });
     }, [tab]);
     const validateAndSubmitIfCorrect = async () => {
         if (!order?.id)
             return;
-        if (tab === 'create' && !checkIfAllFieldsAreValid()) {
+        if (tab === 'create' && !(await form.trigger())) {
             return;
         }
         setIsSubmitting(true);
@@ -66,6 +52,7 @@ export const CustomerSelectCard = () => {
                 });
             }
             else {
+                const values = form.getValues();
                 const { setCustomerForDraftOrder } = await apiClient('mutation')({
                     setCustomerForDraftOrder: [
                         {
@@ -74,11 +61,11 @@ export const CustomerSelectCard = () => {
                                 ? { customerId: selected?.id }
                                 : {
                                     input: {
-                                        title: state.title?.validatedValue,
-                                        firstName: state.firstName?.validatedValue || '',
-                                        lastName: state.lastName?.validatedValue || '',
-                                        emailAddress: state.emailAddress?.validatedValue || '',
-                                        phoneNumber: state.phoneNumber?.validatedValue,
+                                        title: values.title,
+                                        firstName: values.firstName || '',
+                                        lastName: values.lastName || '',
+                                        emailAddress: values.emailAddress || '',
+                                        phoneNumber: values.phoneNumber,
                                     },
                                 }),
                         },
@@ -109,9 +96,17 @@ export const CustomerSelectCard = () => {
     if (!order)
         return null;
     return (_jsx(CustomCard, { notCollapsible: true, color: order?.customer ? 'indigo' : 'gray', description: t('create.selectCustomer.description', 'Choose an existing customer or create a new one for this order'), title: t('create.selectCustomer.select', 'Customer Information'), icon: _jsx(User, {}), upperRight: mode !== 'view' &&
-            mode !== 'update' && (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Edit, { size: 16, className: "text-indigo-500 dark:text-indigo-400" }) }) }), _jsxs(DialogContent, { className: "min-w-max", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [_jsx(User, { className: "size-5 text-indigo-500 dark:text-indigo-400" }), t('create.selectCustomer.label', 'Select Customer')] }), _jsx(DialogDescription, { className: "mt-2 text-muted-foreground", children: t('create.selectCustomer.description', 'Choose an existing customer or create a new one for this order') })] }), _jsxs(Tabs, { value: tab, onValueChange: (e) => setTab(e), children: [_jsxs(TabsList, { className: "my-4 grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { className: "w-full", value: "select", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "size-4" }), t('create.selectCustomer.selectTab', 'Find Customer')] }) }), _jsx(TabsTrigger, { className: "w-full", value: "create", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UserPlus, { className: "size-4" }), t('create.selectCustomer.createTab', 'Create New')] }) })] }), _jsx(TabsContent, { className: "focus-visible:ring-transparent", value: "select", children: _jsx(CustomerSearch, { selectedCustomer: selected, onSelect: (selected) => setSelected(selected) }) }), _jsx(TabsContent, { value: "create", className: "h-fit max-h-[calc(80vh-230px)] overflow-y-auto pt-2", children: _jsxs("div", { className: "space-y-4 px-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "title", className: "text-sm font-medium", children: t('create.selectCustomer.titleLabel', 'Title') }), _jsx(Input, { id: "title", name: "title", placeholder: t('create.selectCustomer.titlePlaceholder', 'Mr., Mrs., Dr., etc.'), value: state.title?.value ?? undefined, onChange: (e) => setField('title', e.target.value), errors: state.title?.errors })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "firstName", className: "text-sm font-medium", children: [t('create.selectCustomer.firstNameLabel', 'First Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "firstName", name: "firstName", placeholder: t('create.selectCustomer.firstNamePlaceholder', 'Enter first name'), value: state.firstName?.value, onChange: (e) => setField('firstName', e.target.value), className: cn(state.firstName?.errors?.length && 'border-red-300'), required: true, errors: state.firstName?.errors })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "lastName", className: "text-sm font-medium", children: [t('create.selectCustomer.lastNameLabel', 'Last Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "lastName", name: "lastName", placeholder: t('create.selectCustomer.lastNamePlaceholder', 'Enter last name'), value: state.lastName?.value, onChange: (e) => setField('lastName', e.target.value), className: cn(state.lastName?.errors?.length && 'border-red-300'), required: true, errors: state.lastName?.errors })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "email", className: "text-sm font-medium", children: [t('create.selectCustomer.emailLabel', 'Email Address'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "email", name: "emailAddress", type: "email", placeholder: t('create.selectCustomer.emailPlaceholder', 'Enter email address'), value: state.emailAddress?.value, onChange: (e) => setField('emailAddress', e.target.value), className: cn(state.emailAddress?.errors?.length && 'border-red-300'), required: true, errors: state.emailAddress?.errors })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "phone", className: "text-sm font-medium", children: [t('create.selectCustomer.phoneNumberLabel', 'Phone Number'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "phone", name: "phoneNumber", placeholder: t('create.selectCustomer.phonePlaceholder', 'Enter phone number'), value: state.phoneNumber?.value ?? undefined, onChange: (e) => setField('phoneNumber', e.target.value), className: cn(state.phoneNumber?.errors?.length && 'border-red-300'), required: true, errors: state.phoneNumber?.errors })] }), _jsx(EntityCustomFields, { id: selected?.id, entityName: "customer", hideButton: true, initialValues: selected && 'customFields' in selected
+            mode !== 'update' && (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", children: _jsx(Edit, { size: 16, className: "text-indigo-500 dark:text-indigo-400" }) }) }), _jsxs(DialogContent, { className: "min-w-max", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center gap-2 text-xl", children: [_jsx(User, { className: "size-5 text-indigo-500 dark:text-indigo-400" }), t('create.selectCustomer.label', 'Select Customer')] }), _jsx(DialogDescription, { className: "mt-2 text-muted-foreground", children: t('create.selectCustomer.description', 'Choose an existing customer or create a new one for this order') })] }), _jsxs(Tabs, { value: tab, onValueChange: (e) => setTab(e), children: [_jsxs(TabsList, { className: "my-4 grid w-full grid-cols-2", children: [_jsx(TabsTrigger, { className: "w-full", value: "select", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Search, { className: "size-4" }), t('create.selectCustomer.selectTab', 'Find Customer')] }) }), _jsx(TabsTrigger, { className: "w-full", value: "create", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(UserPlus, { className: "size-4" }), t('create.selectCustomer.createTab', 'Create New')] }) })] }), _jsx(TabsContent, { className: "focus-visible:ring-transparent", value: "select", children: _jsx(CustomerSearch, { selectedCustomer: selected, onSelect: (selected) => setSelected(selected) }) }), _jsx(TabsContent, { value: "create", className: "h-fit max-h-[calc(80vh-230px)] overflow-y-auto pt-2", children: _jsxs("div", { className: "space-y-4 px-1", children: [_jsxs("div", { className: "space-y-1", children: [_jsx(Label, { htmlFor: "title", className: "text-sm font-medium", children: t('create.selectCustomer.titleLabel', 'Title') }), _jsx(Input, { id: "title", name: "title", placeholder: t('create.selectCustomer.titlePlaceholder', 'Mr., Mrs., Dr., etc.'), value: formValues.title ?? undefined, onChange: (e) => form.setField('title', e.target.value), errors: form.formState.errors.title?.message ? [form.formState.errors.title.message] : undefined })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "firstName", className: "text-sm font-medium", children: [t('create.selectCustomer.firstNameLabel', 'First Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "firstName", name: "firstName", placeholder: t('create.selectCustomer.firstNamePlaceholder', 'Enter first name'), value: formValues.firstName, onChange: (e) => form.setField('firstName', e.target.value), className: cn(form.formState.errors.firstName && 'border-red-300'), required: true, errors: form.formState.errors.firstName?.message
+                                                                    ? [form.formState.errors.firstName.message]
+                                                                    : undefined })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "lastName", className: "text-sm font-medium", children: [t('create.selectCustomer.lastNameLabel', 'Last Name'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "lastName", name: "lastName", placeholder: t('create.selectCustomer.lastNamePlaceholder', 'Enter last name'), value: formValues.lastName, onChange: (e) => form.setField('lastName', e.target.value), className: cn(form.formState.errors.lastName && 'border-red-300'), required: true, errors: form.formState.errors.lastName?.message
+                                                                    ? [form.formState.errors.lastName.message]
+                                                                    : undefined })] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "email", className: "text-sm font-medium", children: [t('create.selectCustomer.emailLabel', 'Email Address'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "email", name: "emailAddress", type: "email", placeholder: t('create.selectCustomer.emailPlaceholder', 'Enter email address'), value: formValues.emailAddress, onChange: (e) => form.setField('emailAddress', e.target.value), className: cn(form.formState.errors.emailAddress && 'border-red-300'), required: true, errors: form.formState.errors.emailAddress?.message
+                                                            ? [form.formState.errors.emailAddress.message]
+                                                            : undefined })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs(Label, { htmlFor: "phone", className: "text-sm font-medium", children: [t('create.selectCustomer.phoneNumberLabel', 'Phone Number'), ' ', _jsx("span", { className: "text-red-500", children: "*" })] }), _jsx(Input, { id: "phone", name: "phoneNumber", placeholder: t('create.selectCustomer.phonePlaceholder', 'Enter phone number'), value: formValues.phoneNumber ?? undefined, onChange: (e) => form.setField('phoneNumber', e.target.value), className: cn(form.formState.errors.phoneNumber && 'border-red-300'), required: true, errors: form.formState.errors.phoneNumber?.message
+                                                            ? [form.formState.errors.phoneNumber.message]
+                                                            : undefined })] }), _jsx(EntityCustomFields, { id: selected?.id, entityName: "customer", hideButton: true, initialValues: selected && 'customFields' in selected
                                                     ? { customFields: selected.customFields }
-                                                    : { customFields: {} }, onChange: (customFields, translations) => {
-                                                    setField('customFields', customFields);
+                                                    : { customFields: {} }, onChange: (customFields) => {
+                                                    form.setField('customFields', customFields);
                                                 }, additionalData: {} })] }) })] }), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: isSubmitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { disabled: (tab === 'select' && !selected) || isSubmitting, className: "gap-2", onClick: validateAndSubmitIfCorrect, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), t(tab === 'create' ? 'create.selectCustomer.create' : 'create.selectCustomer.selectButton')] })) })] })] })] })), children: _jsx("div", { className: "rounded-lg border border-border bg-muted/50 p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !order?.customer ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "mt-0.5 flex size-8 items-center justify-center rounded-full bg-secondary", children: _jsx(AlertCircle, { className: "size-4 text-green-500 dark:text-green-600" }) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm text-muted-foreground italic", children: t('create.selectCustomer.noCustomer', 'No customer assigned to this order') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => setOpen(true), children: [_jsx(UserPlus, { className: "size-3.5" }), t('create.selectCustomer.addCustomer', 'Add Customer')] }))] })] })) : (_jsx(_Fragment, { children: _jsx("div", { className: "flex-1", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("p", { className: "text-sm font-medium", children: [order.customer.title && `${order.customer.title} `, order.customer.firstName, " ", order.customer.lastName] }), _jsx("span", { className: "rounded-full bg-indigo-100 px-2 py-0.5 text-xs text-indigo-800 dark:bg-indigo-900/50 dark:text-indigo-300", children: t('create.selectCustomer.customer', 'Customer') })] }), _jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Mail, { className: "size-3.5 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { children: order.customer.emailAddress })] }), order.customer.phoneNumber && (_jsxs("div", { className: "flex items-center gap-2 text-sm", children: [_jsx(Phone, { className: "size-3.5 text-indigo-500 dark:text-indigo-400" }), _jsx("span", { children: order.customer.phoneNumber })] }))] }) }) })) }) }) }));
 };

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

@@ -1,27 +1,45 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { TableHeader, TableRow, TableHead, TableBody, TableCell, Button, ScrollArea, Table, Input, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, useServer, Badge, priceFormatter, ArgumentFieldsComponent, CustomCard, useGFFLP, useTranslation, } from '@deenruv/react-ui-devkit';
+import { TableHeader, TableRow, TableHead, TableBody, TableCell, Button, ScrollArea, Table, Input, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, useServer, Badge, priceFormatter, ArgumentFieldsComponent, CustomCard, useDeenruvForm, z, useTranslation, } from '@deenruv/react-ui-devkit';
 import { LineItem } from './LineItem.js';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { Package, Truck, MapPin, User, Building, Phone, Box, CheckCircle2, AlertCircle, Loader2 } from 'lucide-react';
+const fulfillOrderSchema = z.object({
+    lines: z
+        .array(z.object({
+        orderLineId: z.string(),
+        quantity: z.number(),
+        customFields: z.record(z.string(), z.unknown()).optional(),
+    }))
+        .default([]),
+    handler: z
+        .object({
+        code: z.string().optional(),
+        arguments: z
+            .array(z.object({
+            name: z.string(),
+            value: z.string(),
+        }))
+            .optional(),
+    })
+        .default({ code: undefined, arguments: [] }),
+});
 export const FulfillmentModal = ({ order, onSubmitted, disabled }) => {
     const { t } = useTranslation('orders');
     const [open, setOpen] = useState(false);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const neededFulfillmentHandlers = order?.shippingLines?.map((line) => line.shippingMethod.fulfillmentHandlerCode);
-    const filteredFulfillmentHandlers = useServer((p) => {
-        return p.fulfillmentHandlers.filter((handler) => neededFulfillmentHandlers.includes(handler?.code));
-    });
-    const { state, setField } = useGFFLP('FulfillOrderInput')({
-        lines: {
-            initialValue: order.lines.map((line) => ({
+    const fulfillmentHandlers = useServer((p) => p.fulfillmentHandlers);
+    const filteredFulfillmentHandlers = useMemo(() => fulfillmentHandlers.filter((handler) => neededFulfillmentHandlers.includes(handler?.code)), [fulfillmentHandlers, neededFulfillmentHandlers]);
+    const form = useDeenruvForm({
+        schema: fulfillOrderSchema,
+        defaultValues: {
+            lines: order.lines.map((line) => ({
                 orderLineId: line.id,
                 quantity: line.quantity || 1,
                 customFields: {},
             })),
-        },
-        handler: {
-            initialValue: {
+            handler: {
                 code: filteredFulfillmentHandlers[0]?.code,
                 arguments: filteredFulfillmentHandlers[0]?.args.map((arg) => ({
                     name: arg.name,
@@ -30,17 +48,19 @@ export const FulfillmentModal = ({ order, onSubmitted, disabled }) => {
             },
         },
     });
+    const linesValue = form.watch('lines');
+    const handlerValue = form.watch('handler');
     const handleSubmit = async (e) => {
         e.preventDefault();
-        if (!state.lines?.value || !state.handler?.value)
+        if (!linesValue || !handlerValue)
             return;
-        const lines = state.lines?.value.map((line) => ({
+        const lines = linesValue.map((line) => ({
             orderLineId: line.orderLineId,
             quantity: line.quantity,
         }));
         setIsSubmitting(true);
         try {
-            await onSubmitted({ lines, handler: state.handler?.value });
+            await onSubmitted({ lines, handler: handlerValue });
             setOpen(false);
         }
         catch (error) {
@@ -52,34 +72,33 @@ export const FulfillmentModal = ({ order, onSubmitted, disabled }) => {
     };
     return (_jsxs(Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { disabled: disabled, size: "sm", className: "gap-2", children: [_jsx(Package, { className: "size-4" }), t('fulfillment.completeOrderButton', 'Fulfill Order')] }) }), _jsxs(DialogContent, { className: "flex h-[80vh] max-w-[80vw] flex-col gap-0 overflow-hidden p-0", children: [_jsxs(DialogHeader, { className: "border-b px-6 py-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-5 text-primary" }), _jsx(DialogTitle, { children: t('fulfillment.completeDialogTitle', 'Complete Order Fulfillment') })] }), _jsx(DialogDescription, { children: t('fulfillment.completeDialogDescription', 'Prepare items for shipping and complete the fulfillment process') })] }), _jsxs("div", { className: "flex size-full flex-col overflow-hidden md:flex-row", children: [_jsxs("div", { className: "flex size-full flex-col border-r p-6 md:w-1/2", children: [_jsxs("div", { className: "mb-4 flex items-center gap-2", children: [_jsx(Box, { className: "size-5 text-blue-500 dark:text-blue-400" }), _jsx("h3", { className: "text-lg font-medium", children: t('fulfillment.itemsToFulfill', 'Items to Fulfill') })] }), _jsx(ScrollArea, { className: "h-[calc(100%-3rem)] w-full rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: _jsxs(TableRow, { noHover: true, className: "bg-muted/50", children: [_jsx(TableHead, { className: "py-3", children: t('fulfillment.product', 'Product') }), _jsx(TableHead, { className: "py-3", children: t('fulfillment.sku', 'SKU') }), _jsx(TableHead, { className: "py-3", children: t('fulfillment.fulfilled', 'Quantity') })] }) }), _jsx(TableBody, { className: "w-full", children: order?.lines.length ? (order.lines.map((line) => {
                                                         const onStock = line.productVariant.stockLevels.reduce((acc, stock) => acc + stock.stockOnHand, 0);
-                                                        const stateLine = state.lines?.value?.find((l) => l.orderLineId === line.id);
+                                                        const stateLine = linesValue?.find((l) => l.orderLineId === line.id);
                                                         const isLowStock = onStock < line.quantity;
                                                         return (_jsx(LineItem, { variant: line.productVariant, children: _jsx(TableCell, { className: "py-3", children: _jsx("div", { className: "flex items-center", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx(Input, { type: "number", className: "w-20", value: stateLine?.quantity, onChange: (e) => {
-                                                                                        const value = state.lines?.value;
-                                                                                        if (!value)
-                                                                                            return;
+                                                                                        const value = linesValue ? [...linesValue] : [];
                                                                                         const index = value.findIndex((v) => v.orderLineId === line.id);
                                                                                         if (index === -1)
                                                                                             return;
                                                                                         if (Number.parseInt(e.target.value) < 1)
                                                                                             return;
                                                                                         if (Number.parseInt(e.target.value) <= line.quantity) {
-                                                                                            value[index].quantity = Number.parseInt(e.target.value);
-                                                                                            setField('lines', value);
+                                                                                            value[index] = { ...value[index], quantity: Number.parseInt(e.target.value) };
+                                                                                            form.setField('lines', value);
                                                                                         }
                                                                                     }, endAdornment: _jsxs("span", { className: "text-sm", children: ["/ ", line.quantity] }) }) }), _jsx("div", { className: "flex items-center gap-1", children: isLowStock ? (_jsxs("div", { className: "flex items-center gap-1 text-amber-500", children: [_jsx(AlertCircle, { className: "size-4" }), _jsx("p", { className: "text-xs font-medium", children: t('fulfillment.lowStock', 'Low stock') })] })) : (_jsxs("div", { className: "flex items-center gap-1 text-green-500", children: [_jsx(CheckCircle2, { className: "size-4" }), _jsx("p", { className: "text-xs font-medium", children: t('fulfillment.inStock', 'In stock') })] })) }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["(", t('fulfillment.onStockValue', { value: onStock }), ")"] })] }) }) }) }, line.id));
-                                                    })) : (_jsx(TableRow, { noHover: true, children: _jsx(TableCell, { colSpan: 4, className: "py-6 text-center text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(Box, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("p", { children: t('fulfillment.emptyState', 'No items to fulfill') }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('fulfillment.emptyStateHint', 'Add products to the order before fulfillment') })] }) }) })) })] }) })] }), _jsx(ScrollArea, { className: "flex h-full md:w-1/2", children: _jsx("div", { className: "flex size-full flex-col p-6", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex h-full flex-col gap-6", children: [_jsxs(CustomCard, { title: t('fulfillment.shippingAddress', 'Shipping Address'), color: "blue", icon: _jsx(MapPin, {}), children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('fullName', 'Full Name') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.fullName || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Building, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('company', 'Company') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.company || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('street1', 'Street Address') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine1 || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('street2', 'Street Address 2') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine2 || '—' })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('city', 'City') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.city || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('postalCode', 'Postal Code') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.postalCode || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('country', 'Country') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.country || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('phoneNumber', 'Phone Number') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.phoneNumber || '—' })] })] })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: t('fulfillment.shippingMethod', 'Shipping Method') }), order.shippingLines.map((line) => (_jsxs("div", { className: "flex items-center justify-between rounded-md bg-muted/50 p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "font-medium", children: line.shippingMethod.name })] }), _jsx(Badge, { variant: "outline", className: "font-mono", children: priceFormatter(line.priceWithTax, order.currencyCode) })] }, line.id)))] })] }), _jsx(CustomCard, { color: "green", title: t('fulfillment.fulfillmentOptions', 'Fulfillment Options'), icon: _jsx(Package, {}), bottomRight: _jsx(Button, { type: "submit", className: "w-full gap-2", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('fulfillment.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "size-4" }), t('fulfillment.fulfill', 'Complete Fulfillment')] })) }), children: _jsx(ArgumentFieldsComponent, { actions: filteredFulfillmentHandlers, args: state.handler?.value.arguments?.length
-                                                        ? state.handler.value.arguments
-                                                        : state.handler?.initialValue?.arguments?.length
-                                                            ? state.handler.initialValue.arguments
-                                                            : [], setArg: (argument, data) => {
-                                                        const newArgs = state.handler?.value.arguments.map((arg) => {
+                                                    })) : (_jsx(TableRow, { noHover: true, children: _jsx(TableCell, { colSpan: 4, className: "py-6 text-center text-muted-foreground", children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-2", children: [_jsx("div", { className: "rounded-full bg-blue-100 p-3 dark:bg-blue-900/30", children: _jsx(Box, { className: "size-6 text-blue-500 dark:text-blue-400" }) }), _jsx("p", { children: t('fulfillment.emptyState', 'No items to fulfill') }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('fulfillment.emptyStateHint', 'Add products to the order before fulfillment') })] }) }) })) })] }) })] }), _jsx(ScrollArea, { className: "flex h-full md:w-1/2", children: _jsx("div", { className: "flex size-full flex-col p-6", children: _jsxs("form", { onSubmit: handleSubmit, className: "flex h-full flex-col gap-6", children: [_jsxs(CustomCard, { title: t('fulfillment.shippingAddress', 'Shipping Address'), color: "blue", icon: _jsx(MapPin, {}), children: [_jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('fullName', 'Full Name') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.fullName || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Building, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('company', 'Company') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.company || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('street1', 'Street Address') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine1 || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('street2', 'Street Address 2') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.streetLine2 || '—' })] })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('city', 'City') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.city || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('postalCode', 'Postal Code') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.postalCode || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('country', 'Country') }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.country || '—' })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Phone, { className: "size-4 text-muted-foreground" }), _jsx("p", { className: "text-xs font-medium text-muted-foreground", children: t('phoneNumber', 'Phone Number') })] }), _jsx("p", { className: "text-sm font-medium", children: order.shippingAddress?.phoneNumber || '—' })] })] })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsx("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: t('fulfillment.shippingMethod', 'Shipping Method') }), order.shippingLines.map((line) => (_jsxs("div", { className: "flex items-center justify-between rounded-md bg-muted/50 p-2", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), _jsx("span", { className: "font-medium", children: line.shippingMethod.name })] }), _jsx(Badge, { variant: "outline", className: "font-mono", children: priceFormatter(line.priceWithTax, order.currencyCode) })] }, line.id)))] })] }), _jsx(CustomCard, { color: "green", title: t('fulfillment.fulfillmentOptions', 'Fulfillment Options'), icon: _jsx(Package, {}), bottomRight: _jsx(Button, { type: "submit", className: "w-full gap-2", disabled: isSubmitting, children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('fulfillment.processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(CheckCircle2, { className: "size-4" }), t('fulfillment.fulfill', 'Complete Fulfillment')] })) }), children: _jsx(ArgumentFieldsComponent, { actions: filteredFulfillmentHandlers, args: handlerValue?.arguments?.length
+                                                        ? handlerValue.arguments
+                                                        : filteredFulfillmentHandlers[0]?.args.map((arg) => ({
+                                                            name: arg.name,
+                                                            value: JSON.stringify(arg.defaultValue ?? ''),
+                                                        })) || [], setArg: (argument, data) => {
+                                                        const newArgs = handlerValue?.arguments?.map((arg) => {
                                                             if (arg.name === argument.name)
                                                                 return { ...arg, value: data.value };
                                                             return arg;
                                                         });
-                                                        if (!state.handler?.value.code || !newArgs)
+                                                        if (!handlerValue?.code || !newArgs)
                                                             return;
-                                                        setField('handler', { code: state.handler?.value.code, arguments: newArgs });
+                                                        form.setField('handler', { code: handlerValue.code, arguments: newArgs });
                                                     } }) })] }) }) })] })] })] }));
 };

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

@@ -1,16 +1,33 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { useOrder, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Label, Textarea, Tooltip, TooltipContent, TooltipTrigger, Separator, useGFFLP, useTranslation, } from '@deenruv/react-ui-devkit';
+import { useOrder, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Checkbox, Label, Textarea, Tooltip, TooltipContent, TooltipTrigger, Separator, useDeenruvForm, z, useTranslation, } from '@deenruv/react-ui-devkit';
 import { toast } from 'sonner';
 import { PriceChangedInfo } from "./PriceChangedInfo.js";
 import { FileEdit, Truck, Tag, CreditCard, AlertCircle, Save, Loader2, RefreshCw } from 'lucide-react';
 import { RefundCard } from "./RefundCard.js";
+const modifyOrderSchema = z.object({
+    note: z.string().default(''),
+    options: z
+        .object({
+        recalculateShipping: z.boolean().default(false),
+        freezePromotions: z.boolean().default(false),
+    })
+        .default({ recalculateShipping: false, freezePromotions: false }),
+});
 export const ModifyingCard = ({ onNoteModified, onOptionsChange, changes }) => {
     const { t } = useTranslation('orders');
     const { modifiedOrder, setModifyOrderInput, modifyOrder, modifyOrderInput } = useOrder();
     const [isSubmitting, setIsSubmitting] = useState(false);
-    const { state, setField } = useGFFLP('ModifyOrderInput')({});
+    const form = useDeenruvForm({
+        schema: modifyOrderSchema,
+        defaultValues: {
+            note: '',
+            options: { recalculateShipping: false, freezePromotions: false },
+        },
+    });
+    const note = form.watch('note');
+    const options = form.watch('options');
     const [noteAdded, setNoteAdded] = useState(false);
     const [sendRefund, setSendRefund] = useState(false);
     const [refundReason, setRefundReason] = useState('');
@@ -25,13 +42,13 @@ export const ModifyingCard = ({ onNoteModified, onOptionsChange, changes }) => {
         if (priceDifference < 0)
             setSendRefund(true);
     }, [priceDifference]);
-    useEffect(() => setNoteAdded(!!state.note?.value), [state.note?.value]);
+    useEffect(() => setNoteAdded(!!note), [note]);
     useEffect(() => {
-        if (modifiedOrder && state.note?.value) {
+        if (modifiedOrder && note) {
             setModifyOrderInput({
                 ...modifyOrderInput,
-                note: state.note?.value,
-                options: state.options?.value,
+                note,
+                options,
                 refund: sendRefund && currentPayment?.transactionId
                     ? {
                         paymentId: currentPayment.transactionId,
@@ -41,7 +58,7 @@ export const ModifyingCard = ({ onNoteModified, onOptionsChange, changes }) => {
                     : undefined,
             });
         }
-    }, [state, modifiedOrder]);
+    }, [note, options, modifiedOrder]);
     const acceptModifiedChanges = async () => {
         if (!noteAdded)
             return;
@@ -59,19 +76,19 @@ export const ModifyingCard = ({ onNoteModified, onOptionsChange, changes }) => {
             setIsSubmitting(false);
         }
     };
-    return (_jsx("form", { className: "h-full max-h-[calc(100vh-200px)]", children: _jsxs(Card, { className: "flex h-full flex-col border-l-4 border-l-blue-500 shadow-sm transition-shadow duration-200 hover:shadow dark:border-l-blue-400", children: [_jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileEdit, { className: "size-5 text-blue-500 dark:text-blue-400" }), _jsxs("div", { children: [_jsx(CardTitle, { children: t('orderModification', 'Order Modification') }), _jsx(CardDescription, { className: "mt-1", children: t('orderModificationDescription', 'Modify order details and apply changes') })] })] }) }), _jsxs(CardContent, { className: "flex-1 space-y-6 overflow-y-auto", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { htmlFor: "note", className: "text-sm font-medium", children: [t('note', 'Modification Note'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter a note explaining the reason for these modifications...'), value: state.note?.value ?? '', onChange: (e) => setField('note', e.target.value), className: "min-h-[60px] resize-y" }), !state.note?.value && (_jsx("div", { className: "absolute top-3 right-3 text-amber-500", children: _jsx(AlertCircle, { className: "size-4" }) }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('noteRequired', 'A note is required to explain why these changes are being made') })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: t('modificationOptions', 'Modification Options') }), _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "space-y-4 rounded-md border border-border bg-muted/20 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(RefreshCw, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('processingOptions', 'Processing Options') })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "recalculateShipping", checked: state.options?.value?.recalculateShipping ?? false, onCheckedChange: (e) => {
+    return (_jsx("form", { className: "h-full max-h-[calc(100vh-200px)]", children: _jsxs(Card, { className: "flex h-full flex-col border-l-4 border-l-blue-500 shadow-sm transition-shadow duration-200 hover:shadow dark:border-l-blue-400", children: [_jsx(CardHeader, { className: "pb-4", children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileEdit, { className: "size-5 text-blue-500 dark:text-blue-400" }), _jsxs("div", { children: [_jsx(CardTitle, { children: t('orderModification', 'Order Modification') }), _jsx(CardDescription, { className: "mt-1", children: t('orderModificationDescription', 'Modify order details and apply changes') })] })] }) }), _jsxs(CardContent, { className: "flex-1 space-y-6 overflow-y-auto", children: [_jsxs("div", { className: "space-y-3", children: [_jsxs(Label, { htmlFor: "note", className: "text-sm font-medium", children: [t('note', 'Modification Note'), " ", _jsx("span", { className: "text-red-500", children: "*" })] }), _jsxs("div", { className: "relative", children: [_jsx(Textarea, { id: "note", placeholder: t('notePlaceholder', 'Enter a note explaining the reason for these modifications...'), value: note ?? '', onChange: (e) => form.setField('note', e.target.value), className: "min-h-[60px] resize-y" }), !note && (_jsx("div", { className: "absolute top-3 right-3 text-amber-500", children: _jsx(AlertCircle, { className: "size-4" }) }))] }), _jsx("p", { className: "text-xs text-muted-foreground", children: t('noteRequired', 'A note is required to explain why these changes are being made') })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-3", children: [_jsx("h3", { className: "text-sm font-medium text-muted-foreground", children: t('modificationOptions', 'Modification Options') }), _jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "space-y-4 rounded-md border border-border bg-muted/20 p-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "flex size-8 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900/30", children: _jsx(RefreshCw, { className: "size-4 text-blue-500 dark:text-blue-400" }) }), _jsx("h4", { className: "font-medium", children: t('processingOptions', 'Processing Options') })] }), _jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "recalculateShipping", checked: options?.recalculateShipping ?? false, onCheckedChange: (e) => {
                                                                         const optionsObj = {
-                                                                            freezePromotions: state?.options?.value?.freezePromotions || false,
+                                                                            freezePromotions: options?.freezePromotions || false,
                                                                             recalculateShipping: !!e,
                                                                         };
-                                                                        setField('options', optionsObj);
+                                                                        form.setField('options', optionsObj);
                                                                         onOptionsChange(optionsObj);
-                                                                    } }), _jsxs(Label, { htmlFor: "recalculateShipping", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('recalculateShipping', 'Recalculate Shipping')] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "freezePromotions", checked: state.options?.value?.freezePromotions ?? false, onCheckedChange: (e) => {
+                                                                    } }), _jsxs(Label, { htmlFor: "recalculateShipping", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Truck, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('recalculateShipping', 'Recalculate Shipping')] })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "freezePromotions", checked: options?.freezePromotions ?? false, onCheckedChange: (e) => {
                                                                         const optionsObj = {
                                                                             freezePromotions: !!e,
-                                                                            recalculateShipping: state?.options?.value?.recalculateShipping || false,
+                                                                            recalculateShipping: options?.recalculateShipping || false,
                                                                         };
-                                                                        setField('options', optionsObj);
+                                                                        form.setField('options', optionsObj);
                                                                         onOptionsChange(optionsObj);
                                                                     } }), _jsxs(Label, { htmlFor: "freezePromotions", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(Tag, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('freezePromotions', 'Freeze Promotions')] })] }), !!priceDifference && (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "refund", checked: sendRefund, onCheckedChange: (e) => setSendRefund(e) }), _jsxs(Label, { htmlFor: "refund", className: "flex cursor-pointer items-center gap-2 text-sm font-medium", children: [_jsx(CreditCard, { className: "size-4 text-blue-500 dark:text-blue-400" }), t('refund', 'Process Refund')] })] }))] })] }), sendRefund && (_jsx(RefundCard, { priceDifference: priceDifference, refundReason: refundReason, setRefundReason: setRefundReason }))] })] }), _jsx("div", { className: "flex justify-end", children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("span", { tabIndex: 0, children: _jsx(Button, { onClick: acceptModifiedChanges, disabled: !noteAdded || isSubmitting, type: "button", className: "gap-2", children: isSubmitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('processing', 'Processing...')] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "size-4" }), t('applyChanges', 'Apply Changes')] })) }) }) }), !noteAdded && (_jsx(TooltipContent, { className: "border border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800 dark:bg-amber-900/50 dark:text-amber-200", children: _jsxs("div", { className: "flex items-center gap-2 px-1", children: [_jsx(AlertCircle, { className: "size-4" }), t('disabledBtnTooltip', 'A note is required to apply changes')] }) }))] }) })] }), _jsx(PriceChangedInfo, { changes })] }) }));
 };

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

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button, Dialog, DialogContent, DialogTitle, ScrollArea, useOrder, useServer, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
 import { useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 export const OrderLineCustomFields = ({ line, order, mode }) => {
     const { setModifiedOrder } = useOrder(({ setModifiedOrder }) => ({ setModifiedOrder }));
-    const orderLineCustomFields = useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []);
+    const orderLineCustomFields = useServer(useShallow((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []));
     const { t } = useTranslation('common');
     const [open, setOpen] = useState(false);
     if (!order)

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

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { ScrollArea, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, Timeline, TimelineItem, TimelineLine, TimelineDot, TimelineContent, TimelineHeading, useServer, Button, Badge, useTranslation, } from '@deenruv/react-ui-devkit';
 import { ArrowRight, Check, CircleDot } from 'lucide-react';
 export const PossibleOrderStates = ({ orderState }) => {
     const { t } = useTranslation('orders');
     const { t: tCommon } = useTranslation('common');
-    const orderProcess = useServer((p) => p.serverConfig?.orderProcess || []);
+    const orderProcess = useServer(useShallow((p) => p.serverConfig?.orderProcess || []));
     const statesAfterCancelled = useMemo(() => {
         const cancelledIndex = orderProcess.findIndex((s) => s.name === 'Cancelled');
         if (cancelledIndex === -1)

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

@@ -4,6 +4,7 @@ import { TableHeader, TableRow, TableHead, TableBody, TableCell, Table, Dropdown
 import { removeOrderItemsResultSelector, updateOrderItemsSelector, updatedDraftOrderSelector, } from "../../../graphql/draft_order";
 import { EllipsisVertical, InfoIcon, Trash2, ShoppingCart, Package, Tag, Edit } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { toast } from 'sonner';
 import { OrderLineActionModal } from './OrderLineActionModal/index.js';
 import { CustomComponent } from './CustomComponent.js';
@@ -11,7 +12,7 @@ import { OrderLineCustomFields } from './OrderLineCustomFields.js';
 import { SpecialLineItem } from './SpecialLineItem.js';
 export const ProductsCard = () => {
     const { t } = useTranslation('orders');
-    const orderLineCustomFields = useServer((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []);
+    const orderLineCustomFields = useServer(useShallow((p) => p.serverConfig?.entityCustomFields?.find((el) => el.entityName === 'OrderLine')?.customFields || []));
     const { mode, order, setOrder, setModifiedOrder, modifiedOrder, fetchOrder } = useOrder();
     const currentOrder = useMemo(() => (mode === 'update' ? (modifiedOrder ? modifiedOrder : order) : order), [mode, order, modifiedOrder]);
     const [open, setOpen] = useState(false);