@deenruv/admin-dashboard 1.0.5 → 1.0.9

package/dist/pages/facets/_components/AddFacetValueDialog.js

@@ -1,25 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, DialogHeader, DialogTitle, DialogTrigger, Input, Dialog, DialogContent, Label, DialogFooter, apiClient, useSettings, useGFFLP, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
+import { Button, DialogHeader, DialogTitle, DialogTrigger, Input, Dialog, DialogContent, Label, DialogFooter, apiClient, useSettings, useDeenruvForm, z, EntityCustomFields, useTranslation, } from '@deenruv/react-ui-devkit';
 import { useCallback, useEffect, useMemo } from 'react';
 import { toast } from 'sonner';
+const facetValueSchema = z.object({
+    name: z.string().min(1),
+    code: z.string().min(1),
+    customFields: z.record(z.string(), z.unknown()).optional().default({}),
+});
 export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen, facetValueId, }) => {
     const editMode = useMemo(() => !!facetValueId, [facetValueId]);
     const { t } = useTranslation('facets');
-    const { translationsLanguage: languageCode } = useSettings(({ translationsLanguage }) => ({ translationsLanguage }));
-    const { state, setField } = useGFFLP('FacetValue', 'name', 'code', 'customFields')({
-        name: {
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('requiredError')];
-            },
-        },
-        code: {
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('requiredError')];
-            },
+    const languageCode = useSettings((p) => p.translationsLanguage);
+    const form = useDeenruvForm({
+        schema: facetValueSchema,
+        defaultValues: {
+            name: '',
+            code: '',
+            customFields: {},
         },
     });
+    const nameValue = form.watch('name');
+    const codeValue = form.watch('code');
+    const customFieldsValue = form.watch('customFields');
     const fetchFacetValue = useCallback(() => facetValueId &&
         apiClient('query')({
             facetValues: [
@@ -27,39 +29,37 @@ export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen
                 { items: { code: true, translations: { languageCode: true, name: true } } },
             ],
         }).then((resp) => {
-            setField('code', resp.facetValues.items[0].code);
-            setField('name', resp.facetValues.items[0].translations.find((t) => t.languageCode === languageCode)?.name || '');
+            form.setField('code', resp.facetValues.items[0].code);
+            form.setField('name', resp.facetValues.items[0].translations.find((t) => t.languageCode === languageCode)?.name || '');
             if ('customFields' in resp.facetValues.items[0])
-                setField('customFields', resp.facetValues.items[0].customFields);
+                form.setField('customFields', resp.facetValues.items[0].customFields);
         }), [facetValueId, t, languageCode]);
     useEffect(() => {
         fetchFacetValue();
     }, [fetchFacetValue, facetValueId]);
     useEffect(() => {
-        if (editMode || !state.name?.value)
+        if (editMode || !nameValue)
             return;
-        const facetCode = state.name?.value.toLowerCase().replace(/\s+/g, '-');
+        const facetCode = nameValue.toLowerCase().replace(/\s+/g, '-');
         if (facetCode)
-            setField('code', facetCode);
-    }, [state, editMode, setField]);
-    useEffect(() => {
-        console.log('ST', state);
-    }, [state]);
+            form.setField('code', facetCode);
+    }, [nameValue, editMode, form.setField]);
     const resetValues = useCallback(() => {
         onFacetValueChange();
         setOpen(false);
-        setField('name', '');
-        setField('code', '');
-    }, [onFacetValueChange, setField]);
+        form.reset({ name: '', code: '', customFields: {} });
+    }, [onFacetValueChange, form]);
     const saveFacetValue = useCallback(() => apiClient('mutation')({
         createFacetValues: [
             {
                 input: [
                     {
                         facetId,
-                        code: state.code.value,
-                        translations: [{ languageCode, name: state.name?.value }],
-                        ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                        code: codeValue,
+                        translations: [{ languageCode, name: nameValue }],
+                        ...(customFieldsValue && Object.keys(customFieldsValue).length > 0
+                            ? { customFields: customFieldsValue }
+                            : {}),
                     },
                 ],
             },
@@ -70,7 +70,7 @@ export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen
         toast.message(t('addValueModal.success'));
         resetValues();
     })
-        .catch((err) => toast.message(t('addValueModal.error') + ': ' + err)), [state, languageCode, facetId, resetValues, t]);
+        .catch((err) => toast.message(t('addValueModal.error') + ': ' + err)), [nameValue, codeValue, customFieldsValue, languageCode, facetId, resetValues, t]);
     const updateFacetValue = useCallback(() => {
         if (!facetValueId)
             return;
@@ -80,9 +80,11 @@ export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen
                     input: [
                         {
                             id: facetValueId,
-                            code: state.code.value,
-                            translations: [{ languageCode, name: state.name?.value }],
-                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                            code: codeValue,
+                            translations: [{ languageCode, name: nameValue }],
+                            ...(customFieldsValue && Object.keys(customFieldsValue).length > 0
+                                ? { customFields: customFieldsValue }
+                                : {}),
                         },
                     ],
                 },
@@ -94,12 +96,10 @@ export const AddFacetValueDialog = ({ facetId, onFacetValueChange, open, setOpen
             resetValues();
         })
             .catch((err) => toast.message(t('addValueModal.error') + ': ' + err));
-    }, [state, languageCode, facetId, resetValues, t]);
+    }, [nameValue, codeValue, customFieldsValue, languageCode, facetValueId, resetValues, t]);
     return (_jsxs(Dialog, { open: open, onOpenChange: resetValues, children: [_jsx(DialogTrigger, { children: _jsx(Button, { onClick: () => {
                         setOpen(true);
-                    }, children: "Create" }) }), _jsxs(DialogContent, { className: "sm:max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editMode ? t('addValueModal.editTitle') : t('addValueModal.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.nameLabel') }), _jsx(Input, { className: "mt-1", value: state.name?.value, onChange: (e) => setField('name', e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.codeLabel') }), _jsx(Input, { className: "mt-1", value: state.code?.value, onChange: (e) => setField('code', e.target.value) })] }), _jsx(EntityCustomFields, { entityName: "facetValue", id: facetValueId, hideButton: true, initialValues: state && 'customFields' in state
-                                    ? { customFields: state.customFields?.validatedValue }
-                                    : { customFields: {} }, onChange: (cf) => {
-                                    setField('customFields', cf);
+                    }, children: "Create" }) }), _jsxs(DialogContent, { className: "sm:max-w-3xl", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: editMode ? t('addValueModal.editTitle') : t('addValueModal.title') }) }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.nameLabel') }), _jsx(Input, { className: "mt-1", value: nameValue, onChange: (e) => form.setField('name', e.target.value) })] }), _jsxs("div", { children: [_jsx(Label, { children: t('addValueModal.codeLabel') }), _jsx(Input, { className: "mt-1", value: codeValue, onChange: (e) => form.setField('code', e.target.value) })] }), _jsx(EntityCustomFields, { entityName: "facetValue", id: facetValueId, hideButton: true, initialValues: customFieldsValue ? { customFields: customFieldsValue } : { customFields: {} }, onChange: (cf) => {
+                                    form.setField('customFields', cf);
                                 }, additionalData: {} })] }), _jsx(DialogFooter, { className: "mt-2", children: _jsx(Button, { onClick: editMode ? updateFacetValue : saveFacetValue, children: editMode ? t('addValueModal.editButton') : t('addValueModal.button') }) })] })] }));
 };

package/dist/pages/facets/_components/FacetDetailView.js

@@ -27,20 +27,25 @@ const STOCK_LOCATION_FORM_KEYS = [
 ];
 export const FacetsDetailView = () => {
     const { form, fetchEntity, entity, additionalData, setAdditionalData, id } = useDetailView('facets-detail-view', ...STOCK_LOCATION_FORM_KEYS);
-    const { base: { setField, state }, } = form;
+    const { base } = form;
     const editMode = useMemo(() => !!id, [id]);
     const { t } = useTranslation(['common', 'facets']);
     const [facetValueIdInModal, setFacetValueIdInModal] = useState(null);
     const [open, setOpen] = useState(false);
     const { translationsLanguage: currentTranslationLng } = useSettings();
-    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, {
+        const baseTranslation = currentTranslationValue ?? {
+            languageCode: currentTranslationLng,
+            name: '',
+        };
+        base.setField('translations', setInArrayBy(translations, (t) => t.languageCode === currentTranslationLng, {
+            ...baseTranslation,
             [field]: e,
             languageCode: currentTranslationLng,
         }));
-    }, [currentTranslationLng, translations]);
+    }, [currentTranslationLng, translations, currentTranslationValue]);
     const fetchFacetValues = useCallback(async ({ page, perPage, filter, filterOperator, sort }, additionalSelector) => {
         // if (!id) return Promise.resolve([]);
         const response = await apiClient('query')({
@@ -64,22 +69,24 @@ export const FacetsDetailView = () => {
             const res = await fetchEntity();
             if (!res)
                 return;
-            setField('translations', res.translations);
-            setField('code', res.code);
-            setField('isPrivate', res.isPrivate);
+            base.setField('translations', res.translations);
+            base.setField('code', res.code);
+            base.setField('isPrivate', res.isPrivate);
             if ('customFields' in res)
-                setField('customFields', res.customFields);
+                base.setField('customFields', res.customFields);
         })();
     }, []);
     useEffect(() => {
         if (!editMode && currentTranslationValue?.name) {
-            setField('code', currentTranslationValue.name.toLowerCase().replace(/\s+/g, '-'));
+            base.setField('code', currentTranslationValue.name.toLowerCase().replace(/\s+/g, '-'));
         }
     }, [currentTranslationValue?.name, editMode]);
-    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('facets:details.basicInfo'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex gap-8 p-0 pt-2", children: [_jsx("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.name'), value: currentTranslationValue?.name ?? undefined, onChange: (e) => setTranslationField('name', e.target.value), errors: state.translations?.errors, required: true }) }), _jsx("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.code'), value: state.code?.value, onChange: (e) => setField('code', e.target.value), errors: state.code?.errors, required: true }) }), _jsxs("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: [_jsx(Label, { children: t('facets:table.isPrivate') }), _jsxs("div", { className: "mt-2 flex gap-3", children: [_jsx(Switch, { checked: state.isPrivate?.value, onCheckedChange: (e) => setField('isPrivate', e) }), _jsx("p", { children: state.isPrivate?.value ? t('facets:table.isPrivate') : t('facets:table.public') })] })] })] }) }), _jsx(DetailViewMarker, { position: 'facets-detail-view' }), _jsx(EntityCustomFields, { entityName: "facet", id: id, hideButton: true, onChange: (customFields, translations) => {
-                        setField('customFields', customFields);
+    return (_jsx("main", { className: "my-4", children: _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(CustomCard, { title: t('facets:details.basicInfo'), icon: _jsx(CardIcons.basic, {}), color: "green", children: _jsxs("div", { className: "flex gap-8 p-0 pt-2", children: [_jsx("div", { className: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.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: "basis-full md:basis-1/2 xl:basis-1/3", children: _jsx(Input, { label: t('facets:table.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: "basis-full md:basis-1/2 xl:basis-1/3", children: [_jsx(Label, { children: t('facets:table.isPrivate') }), _jsxs("div", { className: "mt-2 flex gap-3", children: [_jsx(Switch, { checked: base.watch('isPrivate') ?? false, onCheckedChange: (e) => base.setField('isPrivate', e) }), _jsx("p", { children: base.watch('isPrivate') ? t('facets:table.isPrivate') : t('facets:table.public') })] })] })] }) }), _jsx(DetailViewMarker, { position: 'facets-detail-view' }), _jsx(EntityCustomFields, { entityName: "facet", 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: {} } }), entity && editMode && (_jsx(CustomCard, { title: t('facets:details.facetValues'), icon: _jsx(CardIcons.tag, {}), color: "teal", upperRight: _jsx(AddFacetValueDialog, { open: open, setOpen: setOpen, facetId: entity.id, facetValueId: facetValueIdInModal, onFacetValueChange: () => {

package/dist/pages/global-settings/GlobalSettingsComponent.js

@@ -6,25 +6,26 @@ import { useEffect, useMemo } from 'react';
 export const GlobalSettingsComponent = () => {
     const contentLng = useSettings((p) => p.translationsLanguage);
     const { form, fetchEntity, entity } = useDetailView('globalSettings-detail-view', 'UpdateGlobalSettingsInput', 'availableLanguages', 'outOfStockThreshold', 'trackInventory', 'customFields');
-    const { base: { state, setField }, } = form;
+    const { base } = form;
     const options = useMemo(() => Object.values(LanguageCode).map((el) => ({ label: `${t(`languageCode.${el}`)} (${el})`, value: el })), [t]);
     useEffect(() => {
         const init = async () => {
             const data = await fetchEntity();
             if (data) {
-                setField('availableLanguages', data.availableLanguages);
-                setField('outOfStockThreshold', data.outOfStockThreshold);
-                setField('trackInventory', data.trackInventory);
+                base.setField('availableLanguages', data.availableLanguages);
+                base.setField('outOfStockThreshold', data.outOfStockThreshold);
+                base.setField('trackInventory', data.trackInventory);
                 if ('customFields' in data)
-                    setField('customFields', data.customFields);
+                    base.setField('customFields', data.customFields);
             }
         };
         init();
     }, [contentLng]);
-    return (_jsxs("div", { className: "flex flex-col gap-6 p-4", children: [_jsx(CustomCard, { title: t('globalSettings:available-languages.label'), description: t('globalSettings:available-languages.description'), icon: _jsx(CardIcons.options, {}), color: "green", children: _jsx(MultipleSelector, { options: options, value: state.availableLanguages?.value?.map((el) => ({
+    const availableLanguages = base.watch('availableLanguages');
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-4", children: [_jsx(CustomCard, { title: t('globalSettings:available-languages.label'), description: t('globalSettings:available-languages.description'), icon: _jsx(CardIcons.options, {}), color: "green", children: _jsx(MultipleSelector, { options: options, value: availableLanguages?.map((el) => ({
                         label: t(`languageCode.${el}`),
                         value: el,
-                    })), placeholder: t('globalSettings:available-languages.placeholder'), onChange: (val) => setField('availableLanguages', val.map((el) => el.value)) }) }), _jsx(CustomCard, { title: t('globalSettings:stock-threshold.label'), description: t('globalSettings:stock-threshold.description'), icon: _jsx(CardIcons.options, {}), color: "teal", children: _jsx(Input, { value: state.outOfStockThreshold?.value ?? undefined, type: "number", onChange: (e) => setField('outOfStockThreshold', Number(e.target.value)), required: true }) }), _jsx(CustomCard, { title: t('globalSettings:track-inventory.label'), description: t('globalSettings:track-inventory.description'), icon: _jsx(CardIcons.options, {}), color: "cyan", children: _jsx(Switch, { checked: state.trackInventory?.value ?? undefined, onCheckedChange: (val) => setField('trackInventory', val) }) }), _jsx(EntityCustomFields, { id: entity?.id, entityName: "globalSettings", hideButton: true, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, onChange: (cf) => {
-                    setField('customFields', cf);
+                    })), placeholder: t('globalSettings:available-languages.placeholder'), onChange: (val) => base.setField('availableLanguages', val.map((el) => el.value)) }) }), _jsx(CustomCard, { title: t('globalSettings:stock-threshold.label'), description: t('globalSettings:stock-threshold.description'), icon: _jsx(CardIcons.options, {}), color: "teal", children: _jsx(Input, { value: base.watch('outOfStockThreshold') ?? '', type: "number", onChange: (e) => base.setField('outOfStockThreshold', Number(e.target.value)), required: true }) }), _jsx(CustomCard, { title: t('globalSettings:track-inventory.label'), description: t('globalSettings:track-inventory.description'), icon: _jsx(CardIcons.options, {}), color: "cyan", children: _jsx(Switch, { checked: base.watch('trackInventory') ?? false, onCheckedChange: (val) => base.setField('trackInventory', val) }) }), _jsx(EntityCustomFields, { id: entity?.id, entityName: "globalSettings", hideButton: true, initialValues: entity && 'customFields' in entity ? { customFields: entity.customFields } : { customFields: {} }, onChange: (cf) => {
+                    base.setField('customFields', cf);
                 }, additionalData: {} })] }));
 };

package/dist/pages/global-settings/index.js

@@ -48,10 +48,10 @@ export const GlobalSettings = () => {
                 onSubmitted: async (state) => {
                     const res = await update({
                         input: {
-                            availableLanguages: state.availableLanguages?.value,
-                            outOfStockThreshold: state.outOfStockThreshold?.value,
-                            trackInventory: state.trackInventory?.value,
-                            ...(state.customFields?.validatedValue ? { customFields: state.customFields?.validatedValue } : {}),
+                            availableLanguages: state.availableLanguages,
+                            outOfStockThreshold: state.outOfStockThreshold,
+                            trackInventory: state.trackInventory,
+                            ...(state.customFields ? { customFields: state.customFields } : {}),
                         },
                     });
                     if (res.updateGlobalSettings.__typename === 'GlobalSettings') {

package/dist/pages/orders/List.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Permission, SortOrder, typedGql, scalars } from '@deenruv/admin-types';
 import { Routes, apiClient, DetailList, deepMerge, OrderStateBadge, priceFormatter, TableLabel, useQuery, ListLocations, useTranslation, MultipleSelector, useServer, } from '@deenruv/react-ui-devkit';
 import { useCallback } from 'react';
+import { useShallow } from 'zustand/react/shallow';
 import { useNavigate } from 'react-router';
 import { toast } from 'sonner';
 const tableId = 'orders-list-view';
@@ -37,7 +38,7 @@ export const OrdersListPage = () => {
     const { t } = useTranslation('table');
     const { t: tCommon } = useTranslation('common');
     const navigate = useNavigate();
-    const orderStates = useServer((state) => state.serverConfig?.orderProcess.map((p) => p.name) ?? []);
+    const orderStates = useServer(useShallow((state) => state.serverConfig?.orderProcess.map((p) => p.name) ?? []));
     const getMethodName = useCallback((code) => code
         ? (data?.paymentMethods.items.find((i) => i.code === code)?.name ??
             code?.replace(/-/g, ' ').replace(/\b\w/g, (char) => char.toUpperCase()))

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

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card, Button, Tabs, TabsList, TabsTrigger, TabsContent, CardDescription, ScrollArea, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, CustomCard, useGFFLP, useTranslation, useMutation, } from '@deenruv/react-ui-devkit';
+import { Card, Button, Tabs, TabsList, TabsTrigger, TabsContent, CardDescription, ScrollArea, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, apiClient, useOrder, cn, CustomCard, useDeenruvForm, z, useTranslation, useMutation, } from '@deenruv/react-ui-devkit';
 import { addressBaseSelector } from "../../../graphql/draft_order";
 import { Edit, MapPin, Building, Check, Loader2, User, Phone, Globe } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
@@ -31,60 +31,46 @@ export const AddressCard = ({ type }) => {
     }, [currentOrder, type]);
     const [selectedAddress, setSelectedAddress] = useState(undefined);
     const isShipping = type === 'shipping';
-    const { state, setState } = useGFFLP('CreateAddressInput', 'city', 'company', 'countryCode', 'postalCode', 'fullName', 'phoneNumber', 'postalCode', 'streetLine1', 'streetLine2', 'province', 'customFields')({
-        fullName: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.nameRequired')];
-            },
-        },
-        company: { initialValue: '' },
-        streetLine1: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.streetRequired')];
-            },
-        },
-        streetLine2: { initialValue: '' },
-        postalCode: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.postalCodeRequired')];
-            },
-        },
-        countryCode: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.countryRequired')];
-            },
-        },
-        phoneNumber: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.phoneNumberRequired')];
-            },
-        },
-        city: {
-            initialValue: '',
-            validate: (v) => {
-                if (!v || v === '')
-                    return [t('selectAddress.cityRequired')];
-            },
+    const addressSchema = z.object({
+        city: z.string().min(1, t('selectAddress.cityRequired')),
+        company: z.string().default(''),
+        countryCode: z.string().min(1, t('selectAddress.countryRequired')),
+        postalCode: z.string().min(1, t('selectAddress.postalCodeRequired')),
+        fullName: z.string().min(1, t('selectAddress.nameRequired')),
+        phoneNumber: z.string().min(1, t('selectAddress.phoneNumberRequired')),
+        streetLine1: z.string().min(1, t('selectAddress.streetRequired')),
+        streetLine2: z.string().default(''),
+        province: z.string().default(''),
+        customFields: z.record(z.string(), z.any()).default({}),
+    });
+    const form = useDeenruvForm({
+        schema: addressSchema,
+        defaultValues: {
+            fullName: '',
+            company: '',
+            streetLine1: '',
+            streetLine2: '',
+            postalCode: '',
+            countryCode: '',
+            phoneNumber: '',
+            city: '',
+            province: '',
+            customFields: {},
         },
-        province: { initialValue: '' },
-        customFields: { initialValue: {} },
     });
     useEffect(() => {
         if (selectedAddress) {
-            setState({
-                ...selectedAddress,
+            form.reset({
+                ...form.getValues(),
+                fullName: selectedAddress.fullName ?? '',
+                company: selectedAddress.company ?? '',
+                streetLine1: selectedAddress.streetLine1 ?? '',
+                streetLine2: selectedAddress.streetLine2 ?? '',
+                city: selectedAddress.city ?? '',
+                postalCode: selectedAddress.postalCode ?? '',
+                province: selectedAddress.province ?? '',
+                phoneNumber: selectedAddress.phoneNumber ?? '',
                 countryCode: selectedAddress.country?.code || '',
-                streetLine1: selectedAddress.streetLine1 || '',
             });
         }
     }, [selectedAddress]);
@@ -93,17 +79,20 @@ export const AddressCard = ({ type }) => {
             return;
         if (!!order?.customer?.addresses?.length && tab === 'select' && !selectedAddress)
             return;
+        const values = form.getValues();
         const input = {
-            fullName: state.fullName?.validatedValue,
-            company: state.company?.validatedValue,
-            streetLine1: state.streetLine1?.validatedValue || '',
-            streetLine2: state.streetLine2?.validatedValue,
-            countryCode: state.countryCode?.validatedValue || '',
-            city: state.city?.validatedValue,
-            phoneNumber: state.phoneNumber?.validatedValue,
-            postalCode: state.postalCode?.validatedValue,
-            province: state.province?.validatedValue,
-            ...('customFields' in state ? { customFields: state.customFields.value } : {}),
+            fullName: values.fullName,
+            company: values.company,
+            streetLine1: values.streetLine1 || '',
+            streetLine2: values.streetLine2,
+            countryCode: values.countryCode || '',
+            city: values.city,
+            phoneNumber: values.phoneNumber,
+            postalCode: values.postalCode,
+            province: values.province,
+            ...(values.customFields && Object.keys(values.customFields).length > 0
+                ? { customFields: values.customFields }
+                : {}),
         };
         if (!order?.customer?.addresses?.length) {
             await createAddress({ customerId: order.customer.id, input }).then((resp) => {
@@ -119,7 +108,7 @@ export const AddressCard = ({ type }) => {
                         const setAddress = type === 'shipping' ? setShippingAddress : setBillingAddress;
                         setAddress({
                             ...address,
-                            countryCode: state.countryCode?.validatedValue || 'PL',
+                            countryCode: values.countryCode || 'PL',
                         });
                         setOrder({
                             ...currentOrder,
@@ -210,15 +199,33 @@ export const AddressCard = ({ type }) => {
         if (sameAddressInSaved) {
             setTab('select');
             setSelectedAddress(sameAddressInSaved);
-            setState({ countryCode: sameAddressInSaved.country?.code || '', ...sameAddressInSaved });
+            form.reset({
+                countryCode: sameAddressInSaved.country?.code || '',
+                fullName: sameAddressInSaved.fullName ?? '',
+                company: sameAddressInSaved.company ?? '',
+                streetLine1: sameAddressInSaved.streetLine1 ?? '',
+                streetLine2: sameAddressInSaved.streetLine2 ?? '',
+                city: sameAddressInSaved.city ?? '',
+                postalCode: sameAddressInSaved.postalCode ?? '',
+                province: sameAddressInSaved.province ?? '',
+                phoneNumber: sameAddressInSaved.phoneNumber ?? '',
+                customFields: {},
+            });
         }
         else {
             setSelectedAddress(undefined);
             if (currentAddress) {
-                setState({
-                    ...currentAddress,
-                    countryCode: currentAddress.countryCode || '',
+                form.reset({
+                    fullName: currentAddress.fullName ?? '',
+                    company: currentAddress.company ?? '',
                     streetLine1: currentAddress.streetLine1 || '',
+                    streetLine2: currentAddress.streetLine2 ?? '',
+                    city: currentAddress.city ?? '',
+                    postalCode: currentAddress.postalCode ?? '',
+                    province: currentAddress.province ?? '',
+                    phoneNumber: currentAddress.phoneNumber ?? '',
+                    countryCode: currentAddress.countryCode || '',
+                    customFields: {},
                 });
             }
         }
@@ -239,22 +246,60 @@ export const AddressCard = ({ type }) => {
                                                             ? 'border-primary bg-primary/5 shadow-sm'
                                                             : 'border-border'), onClick: () => setSelectedAddress(address), children: [_jsxs("div", { className: "flex-1", children: [_jsxs("div", { className: "mb-1 flex items-center gap-2", children: [_jsx(User, { className: `size-4 ${iconColor}` }), _jsx("p", { className: "font-medium", children: address.fullName }), selectedAddress?.id === address.id && (_jsx("div", { className: "ml-auto", children: _jsx(Check, { className: "size-4 text-green-500" }) }))] }), _jsx(CardDescription, { className: "text-sm", children: `${address.streetLine1} ${address.streetLine2 ? ', ' + address.streetLine2 : ''}` }), _jsx(CardDescription, { className: "text-sm", children: `${address.postalCode} ${address.city} ${address.country?.name || address.country?.code}` }), _jsx(CardDescription, { className: "text-sm", children: `${t('selectAddress.phoneNumberShort', { value: address.phoneNumber })} ${address.company ? '• ' + address.company : ''} ` }), _jsxs("div", { className: "mt-2 flex gap-2", children: [address.defaultBillingAddress && (_jsx("span", { className: "rounded-full bg-cyan-100 px-2 py-0.5 text-xs text-cyan-800 dark:bg-cyan-900/50 dark:text-cyan-300", children: t('selectAddress.isDefaultBilling') })), address.defaultShippingAddress && (_jsx("span", { className: "rounded-full bg-purple-100 px-2 py-0.5 text-xs text-purple-800 dark:bg-purple-900/50 dark:text-purple-300", children: t('selectAddress.isDefaultShipping') }))] })] }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-8", onClick: (e) => {
                                                                     e.stopPropagation();
-                                                                    setState({ countryCode: address.country?.code || '', ...address });
+                                                                    form.reset({
+                                                                        countryCode: address.country?.code || '',
+                                                                        fullName: address.fullName ?? '',
+                                                                        company: address.company ?? '',
+                                                                        streetLine1: address.streetLine1 ?? '',
+                                                                        streetLine2: address.streetLine2 ?? '',
+                                                                        city: address.city ?? '',
+                                                                        postalCode: address.postalCode ?? '',
+                                                                        province: address.province ?? '',
+                                                                        phoneNumber: address.phoneNumber ?? '',
+                                                                        customFields: {},
+                                                                    });
                                                                     setTab('create');
                                                                 }, children: _jsx(Edit, { size: 16, className: iconColor }) })] }, `${address.id}-${index}`))) }) }) }), _jsx(TabsContent, { value: "create", className: cn('flex flex-1 flex-col overflow-hidden focus-visible:ring-transparent', tab !== 'create' && 'hidden'), children: _jsx(ScrollArea, { className: "pr-4", children: _jsx(AddressForm, { initialValues: {
-                                                        country: { code: state.countryCode.validatedValue },
-                                                        streetLine1: state.streetLine1.validatedValue,
-                                                        streetLine2: state.streetLine2.validatedValue,
-                                                        city: state.city.validatedValue,
-                                                        company: state.company.validatedValue,
-                                                        fullName: state.fullName.validatedValue,
-                                                        phoneNumber: state.phoneNumber.validatedValue,
-                                                        postalCode: state.postalCode.validatedValue,
-                                                        province: state.province?.validatedValue,
-                                                        ...(state.customFields?.validatedValue
-                                                            ? { customFields: state.customFields?.validatedValue }
+                                                        country: { code: form.getValues('countryCode') },
+                                                        streetLine1: form.getValues('streetLine1'),
+                                                        streetLine2: form.getValues('streetLine2'),
+                                                        city: form.getValues('city'),
+                                                        company: form.getValues('company'),
+                                                        fullName: form.getValues('fullName'),
+                                                        phoneNumber: form.getValues('phoneNumber'),
+                                                        postalCode: form.getValues('postalCode'),
+                                                        province: form.getValues('province'),
+                                                        ...(form.getValues('customFields') &&
+                                                            Object.keys(form.getValues('customFields') ?? {}).length > 0
+                                                            ? { customFields: form.getValues('customFields') }
+                                                            : {}),
+                                                    }, onInputChange: (input) => form.reset({
+                                                        ...form.getValues(),
+                                                        fullName: input.fullName ?? '',
+                                                        company: input.company ?? '',
+                                                        streetLine1: input.streetLine1 ?? '',
+                                                        streetLine2: input.streetLine2 ?? '',
+                                                        city: input.city ?? '',
+                                                        postalCode: input.postalCode ?? '',
+                                                        province: input.province ?? '',
+                                                        phoneNumber: input.phoneNumber ?? '',
+                                                        countryCode: input.countryCode ?? '',
+                                                        ...(input.customFields
+                                                            ? { customFields: input.customFields }
                                                             : {}),
-                                                    }, onInputChange: setState }) }) })] })) : (_jsx(AddressForm, { onInputChange: setState }))] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: submitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { className: "gap-2", disabled: submitting || (!!order?.customer?.addresses?.length && tab === 'select' && !selectedAddress), onClick: submitAddress, children: submitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.submitting')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), !order?.customer?.addresses?.length
+                                                    }) }) }) })] })) : (_jsx(AddressForm, { onInputChange: (input) => form.reset({
+                                        ...form.getValues(),
+                                        fullName: input.fullName ?? '',
+                                        company: input.company ?? '',
+                                        streetLine1: input.streetLine1 ?? '',
+                                        streetLine2: input.streetLine2 ?? '',
+                                        city: input.city ?? '',
+                                        postalCode: input.postalCode ?? '',
+                                        province: input.province ?? '',
+                                        phoneNumber: input.phoneNumber ?? '',
+                                        countryCode: input.countryCode ?? '',
+                                        ...(input.customFields ? { customFields: input.customFields } : {}),
+                                    }) }))] }), _jsxs("div", { className: "mt-4 flex justify-end gap-2", children: [_jsx(Button, { variant: "outline", onClick: () => setOpen(false), disabled: submitting, children: t('common.cancel', 'Cancel') }), _jsx(Button, { className: "gap-2", disabled: submitting || (!!order?.customer?.addresses?.length && tab === 'select' && !selectedAddress), onClick: submitAddress, children: submitting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "size-4 animate-spin" }), t('common.submitting')] })) : (_jsxs(_Fragment, { children: [_jsx(Check, { className: "size-4" }), !order?.customer?.addresses?.length
                                                 ? 'Create'
                                                 : t(tab === 'select' ? 'selectAddress.selectAddress' : 'selectAddress.editAddress')] })) })] })] })] })), children: _jsx("div", { className: "rounded-lg border border-border bg-muted/50 p-3", children: _jsx("div", { className: "flex items-start gap-3", children: !currentAddress ? (_jsxs(_Fragment, { children: [_jsx("div", { className: `mt-0.5 flex size-8 items-center justify-center rounded-full ${isShipping ? 'bg-purple-100 dark:bg-purple-900/30' : 'bg-cyan-100 dark:bg-cyan-900/30'}`, children: isShipping ? (_jsx(MapPin, { className: `size-4 ${iconColor}` })) : (_jsx(Building, { className: `size-4 ${iconColor}` })) }), _jsxs("div", { className: "flex-1", children: [_jsx("p", { className: "text-sm text-muted-foreground italic", children: t(isShipping ? 'selectAddress.noShippingAddress' : 'selectAddress.noBillingAddress') }), mode !== 'view' && (_jsxs(Button, { variant: "outline", size: "sm", className: "mt-2 gap-2", onClick: () => setOpen(true), children: [_jsx(Edit, { className: "size-3.5" }), t('selectAddress.addAddress', 'Add Address')] }))] })] })) : (_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: [_jsx(User, { className: `max-h-4 min-h-4 max-w-4 min-w-4 ${iconColor}` }), _jsx("p", { className: "text-sm font-medium", children: currentAddress?.fullName })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MapPin, { className: `max-h-4 min-h-4 max-w-4 min-w-4 ${iconColor}` }), _jsxs("p", { className: "text-sm", children: [currentAddress.streetLine1, " ", currentAddress?.streetLine2] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Globe, { className: `max-h-4 min-h-4 max-w-4 min-w-4 ${iconColor}` }), _jsxs("p", { className: "text-sm", children: [currentAddress.city, " ", currentAddress.postalCode, " ", currentAddress.province, ' ', currentAddress.country] })] }), _jsx("div", { className: "mt-1 flex items-center justify-between border-t border-border pt-1", children: _jsxs("div", { className: "flex items-center gap-2", children: [currentAddress.company && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Building, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "text-sm text-muted-foreground", children: currentAddress.company })] })), currentAddress.phoneNumber && (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Phone, { className: "size-4 text-muted-foreground" }), _jsx("span", { className: "text-sm text-muted-foreground", children: t('selectAddress.phoneNumberShort', { value: currentAddress.phoneNumber }) })] }))] }) })] }) }) })) }) }) }));
 };