@licklist/design 0.71.18-dev.4 → 0.71.18-dev.6

package/dist/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.js

@@ -1,44 +1,86 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useEffect } from 'react';
 import { useFormContext, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
 import { ModifiersSetControl } from './ModifierSetControll.js';
+import { orderProductModifiersQuantity } from '../../utils.js';
 
 var ProductControl = function(param) {
-    var product = param.product, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, editOrderModifier = param.editOrderModifier, errors = param.errors;
-    var control = useFormContext().control;
+    var product = param.product, _param_isLoading = param.isLoading, isLoading = _param_isLoading === void 0 ? false : _param_isLoading, editOrderModifier = param.editOrderModifier;
+    var t = useTranslation() // Added translation hook
+    .t;
+    var _useFormContext = useFormContext(), control = _useFormContext.control, watch = _useFormContext.watch, isValid = _useFormContext.formState.isValid, clearErrors = _useFormContext.clearErrors;
     var modifiersSet = (product === null || product === void 0 ? void 0 : product.modifiersSet) || [];
-    return /*#__PURE__*/ jsx(Controller, {
-        control: control,
-        name: "product",
-        render: function() {
-            return /*#__PURE__*/ jsx("div", {
-                className: "mb-8 pt-4",
-                children: /*#__PURE__*/ jsx("div", {
-                    className: " d-flex  flex-column",
-                    children: modifiersSet.map(function(modifierSet) {
-                        return /*#__PURE__*/ jsxs(Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsx("div", {
-                                    className: "modifier-header",
-                                    children: /*#__PURE__*/ jsx("div", {
-                                        className: "title",
-                                        children: modifierSet.name
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(ModifiersSetControl, {
-                                    modifierSet: modifierSet,
-                                    productId: product.id,
-                                    modifiers: modifierSet.modifiers,
-                                    isEditMode: !!(editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers),
-                                    orderProductModifierSets: editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers,
-                                    modifiersSetWithErrors: errors,
-                                    isLoading: isLoading
-                                })
-                            ]
-                        });
-                    })
-                })
-            });
-        }
+    var orderModifiersSets = watch("".concat(product.id, ".orderProductModifiers"));
+    useEffect(function() {
+        if (!isValid) return;
+        clearErrors();
+    }, [
+        isValid,
+        clearErrors
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "mb-8 pt-4",
+        children: /*#__PURE__*/ jsx("div", {
+            className: "d-flex flex-column",
+            children: modifiersSet.map(function(modifierSet) {
+                var orderProductModifiersMaxQuantity = orderProductModifiersQuantity(orderModifiersSets, modifierSet);
+                return /*#__PURE__*/ jsxs("div", {
+                    className: "modifier-set-container",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "modifier-header",
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "title",
+                                children: modifierSet.name
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Controller, {
+                            control: control,
+                            name: "".concat(product.id, ".").concat(modifierSet.id),
+                            rules: {
+                                validate: function() {
+                                    var maxItems = modifierSet.maxItems, minItems = modifierSet.minItems;
+                                    if (!!minItems && orderProductModifiersMaxQuantity < minItems) {
+                                        return t('Validation:quantityMinNumberModifier', {
+                                            min: minItems
+                                        });
+                                    }
+                                    if (orderProductModifiersMaxQuantity > maxItems) {
+                                        return t('Validation:quantityMaxNumberModifier', {
+                                            max: maxItems
+                                        });
+                                    }
+                                    return true;
+                                }
+                            },
+                            render: function(param) {
+                                var error = param.fieldState.error;
+                                return /*#__PURE__*/ jsxs(Fragment, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(ModifiersSetControl, {
+                                            modifierSet: modifierSet,
+                                            productId: product.id,
+                                            modifiers: modifierSet.modifiers,
+                                            isEditMode: !!(editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers),
+                                            orderProductModifierSets: editOrderModifier === null || editOrderModifier === void 0 ? void 0 : editOrderModifier.modifiers,
+                                            isLoading: isLoading
+                                        }),
+                                        (error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/ jsxs("div", {
+                                            className: "invalid-feedback d-flex pl-4",
+                                            children: [
+                                                error === null || error === void 0 ? void 0 : error.message,
+                                                "!"
+                                            ]
+                                        })
+                                    ]
+                                });
+                            }
+                        })
+                    ]
+                }, modifierSet.id);
+            })
+        })
     });
 };
 

package/dist/iframe/ProductWithModifierModal/utils.d.ts

@@ -0,0 +1,5 @@
+import { OrderModifier } from "@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper";
+export type selectModifierType = 'radio' | 'checkbox' | 'selector';
+export declare const filteredOrderModifierSets: (modifiersSet: OrderModifier[]) => OrderModifier[];
+export declare const orderProductModifiersQuantity: (orderModifiersSets: OrderModifier[], modifierSet: any) => number;
+//# sourceMappingURL=utils.d.ts.map

package/dist/iframe/ProductWithModifierModal/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/iframe/ProductWithModifierModal/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8DAA8D,CAAA;AAG5F,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,CAAA;AAElE,eAAO,MAAM,yBAAyB,iBACpB,aAAa,EAAE,KAC5B,aAAa,EAUf,CAAA;AAED,eAAO,MAAM,6BAA6B,uBACpB,aAAa,EAAE,6BAOpC,CAAA"}

package/dist/iframe/ProductWithModifierModal/utils.js

@@ -0,0 +1,19 @@
+import { uniqBy } from 'lodash';
+
+var filteredOrderModifierSets = function(modifiersSet) {
+    if (!modifiersSet) return [];
+    var orderModifier = modifiersSet.flat().filter(function(modifier) {
+        return !!(modifier === null || modifier === void 0 ? void 0 : modifier.quantity);
+    });
+    return uniqBy(orderModifier, function(item) {
+        return "".concat(item.modifierId, "-").concat(item.modifierSetId);
+    });
+};
+var orderProductModifiersQuantity = function(orderModifiersSets, modifierSet) {
+    var filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets);
+    return filteredOrderModifier.filter(function(item) {
+        return (item === null || item === void 0 ? void 0 : item.modifierSetId) === modifierSet.id;
+    }).length;
+};
+
+export { filteredOrderModifierSets, orderProductModifiersQuantity };

package/dist/product-set/form/ProductsControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProductsControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductsControl.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,kEAAkE,CAAA;AAC/F,OAAO,EAAkB,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAA;AAI9E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAQhD,UAAU,oBAAqB,SAAQ,aAAa;IAClD,YAAY,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC,cAAc,CAAC,CAAA;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AA+BD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,YAAY,EACZ,SAAS,EACT,oBAAoB,EACpB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,qBAAqB,EACrB,oBAAoB,GACrB,EAAE,oBAAoB,2CAyOtB"}
+{"version":3,"file":"ProductsControl.d.ts","sourceRoot":"","sources":["../../../src/product-set/form/ProductsControl.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,kEAAkE,CAAA;AAC/F,OAAO,EAAkB,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,IAAI,CAAA;AAI9E,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAQhD,UAAU,oBAAqB,SAAQ,aAAa;IAClD,YAAY,EAAE,mBAAmB,CAAC,oBAAoB,CAAC,CAAC,cAAc,CAAC,CAAA;IACvE,SAAS,EAAE,MAAM,CAAA;IACjB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,oBAAoB,CAAC,EAAE,OAAO,CAAA;CAC/B;AA+BD,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,YAAY,EACZ,SAAS,EACT,oBAAoB,EACpB,SAAS,EACT,YAAY,EACZ,WAAW,EACX,qBAAqB,EACrB,oBAAoB,GACrB,EAAE,oBAAoB,2CAkPtB"}

package/dist/product-set/form/ProductsControl.js

@@ -168,6 +168,12 @@ function ProductsControl(param) {
             return "".concat(productControlFieldName, ".").concat(index, ".isUnlimited");
         }))
     });
+    var modifierSets = useWatch({
+        control: control,
+        name: _to_consumable_array(fields.map(function(_, index) {
+            return "".concat(productControlFieldName, ".").concat(index, ".modifiersSet");
+        }))
+    });
     var categoryProductErrors = errors === null || errors === void 0 ? void 0 : (_errors_steps = errors.steps) === null || _errors_steps === void 0 ? void 0 : (_errors_steps_stepIndex = _errors_steps[stepIndex]) === null || _errors_steps_stepIndex === void 0 ? void 0 : (_errors_steps_stepIndex_productCategories = _errors_steps_stepIndex.productCategories) === null || _errors_steps_stepIndex_productCategories === void 0 ? void 0 : (_errors_steps_stepIndex_productCategories_productCategoryIndex = _errors_steps_stepIndex_productCategories[productCategoryIndex]) === null || _errors_steps_stepIndex_productCategories_productCategoryIndex === void 0 ? void 0 : _errors_steps_stepIndex_productCategories_productCategoryIndex.products;
     var isFirstProductAdded = fields.length === 1;
     var mouseSensor = useSensor(MouseSensor, {
@@ -211,9 +217,10 @@ function ProductsControl(param) {
                     mouseSensor
                 ],
                 children: fields.map(function(product, index) {
+                    var _modifierSets_index;
                     var isOverridesProductSet = isEventEditProductSet ? !!product.id : isOverrides && !!product.originalProductId;
-                    var modifierSets = (product === null || product === void 0 ? void 0 : product.modifiersSet.length) || 0;
                     var isNewProductOverrides = isCreateNewOverrides && !!product.id;
+                    var modifiersSets = ((_modifierSets_index = modifierSets[index]) === null || _modifierSets_index === void 0 ? void 0 : _modifierSets_index.length) || 0;
                     return /*#__PURE__*/ jsx(Controller, {
                         control: control,
                         name: "".concat(productControlFieldName, ".").concat(index, ".name"),
@@ -256,9 +263,9 @@ function ProductsControl(param) {
                                                 })
                                             ]
                                         }),
-                                        !!modifierSets && /*#__PURE__*/ jsx(Badge, {
+                                        !!modifiersSets && /*#__PURE__*/ jsx(Badge, {
                                             className: "modifier-badge",
-                                            children: "".concat(modifierSets, " ").concat(t('modifiersSets'))
+                                            children: "".concat(modifiersSets, " ").concat(t('modifiersSets'))
                                         })
                                     ]
                                 }),

package/dist/styles/product-set/EditProductSetElement.scss

@@ -90,6 +90,7 @@
     }
     label.btn-link {
       width: 4.5rem;
+      z-index: 0;
       display: flex;
       justify-content: center;
       span {

package/dist/styles/product-set/ProductSetForm.scss

@@ -90,6 +90,7 @@
   .modifier-badge {
     background-color: #e9f5ea;
     color: #269b36;
+    height: 1rem;
   }
 }
 

package/dist/styles/themes/bookedit/index.scss

@@ -60,6 +60,11 @@
 }
 
 .modifier-container {
+  background-color: color('white');
+  padding-bottom: 1rem;
+}
+
+.modifier-set-container {
   background-color: color('white');
   border-bottom: 2px solid #f0f0f0;
   padding-bottom: 1rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.18-dev.4",
+  "version": "0.71.18-dev.6",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,7 +42,7 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.2-dev.10",
+    "@licklist/core": "0.31.2-dev.11",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.35.1-dev.8",
     "lodash": "4.17.21",
@@ -61,7 +61,7 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.2-dev.10",
+    "@licklist/core": "0.31.2-dev.11",
     "@licklist/eslint-config": "0.5.6",
     "@licklist/plugins": "0.35.1-dev.8",
     "@mantine/core": "6.0.22",

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetForm.tsx

@@ -54,7 +54,7 @@ export const ProductWithModifierSetForm = ({
   const { t } = useTranslation(['App', 'Sale', 'Validation'])
 
   const {
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
     control,
     trigger,
     watch,
@@ -78,8 +78,9 @@ export const ProductWithModifierSetForm = ({
 
   const onSubmit = (event) => {
     event.preventDefault()
-    trigger()
+    trigger(`${product.id}`)
 
+    if (!isValid) return undefined
     const productOrder: FormOrderItem = {
       id: product.id,
       name: product.name,
@@ -123,7 +124,6 @@ export const ProductWithModifierSetForm = ({
         <div className='manual-booking-form'>
           <ProductControl
             product={product}
-            errors={errors}
             editOrderModifier={editOrderModifier}
           />
           <div className='bg-light m-2 p-2 rounded'>

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.tsx

@@ -5,35 +5,27 @@ import { Modifier } from '@licklist/core/dist/DataMapper/Product/ModifierDataMap
 import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
 import { ChangeEvent, useEffect, useMemo } from 'react'
 import { useId } from '@mantine/hooks'
-import {
-  Controller,
-  FieldErrors,
-  FieldValues,
-  useFormContext,
-} from 'react-hook-form'
-import { xor, uniqBy } from 'lodash'
+import { Controller, useFormContext } from 'react-hook-form'
+import { xor } from 'lodash'
 import clsx from 'clsx'
 import { Currency } from '@licklist/core/dist/Config'
 import { useIntl } from 'react-intl'
 import { MAX_PRODUCT_NUMBER } from 'src/iframe/order-process/components/CategoryProduct/constants'
 import { NumberInputHorizontal } from 'src/sales'
+import { selectModifierType } from '../../utils'
 
 interface ModifiersSetControllProps {
   modifiers?: Modifier[]
   modifierSet: ModifierSet
-  modifiersSetWithErrors?: FieldErrors<FieldValues>
   isLoading?: boolean
   isEditMode?: boolean
   productId: number
   orderProductModifierSets?: OrderModifier[]
 }
 
-type selectModifierType = 'radio' | 'checkbox' | 'selector'
-
 export const ModifiersSetControl = ({
   modifierSet,
   modifiers,
-  modifiersSetWithErrors,
   productId,
   isLoading = false,
   isEditMode = false,
@@ -42,35 +34,12 @@ export const ModifiersSetControl = ({
   const { control, watch, setValue, trigger } = useFormContext()
   const { t } = useTranslation('App')
 
-  const filteredOrderModifierSets = (
-    modifiersSet: OrderModifier[],
-  ): OrderModifier[] => {
-    if (!modifiersSet) return []
-    const orderModifier = modifiersSet
-      .flat()
-      .filter((modifier) => !!modifier?.quantity)
-
-    return uniqBy(
-      orderModifier,
-      (item) => `${item.modifierId}-${item.modifierSetId}`,
-    )
-  }
-
   const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
+
   const { formatNumber } = useIntl()
   const formatToCurrency = (value: number) =>
     formatNumber(value, { style: 'currency', currency: Currency.GBP })
 
-  const orderProductModifiersQuantity = (orderModifiersSets) => {
-    const filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets)
-    return filteredOrderModifier
-      .flat()
-      .filter((item) => item && item.modifierSetId === modifierSet.id).length
-  }
-
-  const orderProductModifiersMaxQuantity =
-    orderProductModifiersQuantity(orderModifiersSets)
-
   const currentOrderModifiersSets = useMemo(
     () =>
       orderProductModifierSets?.filter(
@@ -141,6 +110,8 @@ export const ModifiersSetControl = ({
         orderModifiers,
       )
     }
+
+    trigger(`${productId}.orderProductModifiers`)
   }
 
   useEffect(() => {
@@ -153,8 +124,6 @@ export const ModifiersSetControl = ({
     )
   }, [isEditMode])
 
-  const modifiersErrors = modifiersSetWithErrors?.modifiers
-
   return (
     <>
       {modifierSet?.maxItems === 1 &&
@@ -162,20 +131,22 @@ export const ModifiersSetControl = ({
       !currentOrderModifiersSets?.find((modifier) => !!modifier?.quantity) ? (
         <>
           <Controller
-            name={`${modifierSet.id}`}
-            data-testid='modifierSet-values-select'
+            name={`${productId}.orderProductModifiers.${modifierSet.id}`}
             control={control}
             rules={{
-              required: !!modifierSet.minItems
+              required: {
+                value: !!modifierSet.minItems,
+                message: t('Validation:fieldRequired') as string,
+              },
             }}
-            render={({ field }) => {
+            render={({ field, fieldState }) => {
               const onChange = (e: ChangeEvent<HTMLInputElement>) => {
                 onChangeModifiers(e, 'radio')
                 field.onChange(e.target.id)
               }
               return (
                 <>
-                  {modifiers?.map((modifier) => {
+                  {modifiers.map((modifier) => {
                     const selectedOrderModifierId = currentOrderModifiersSets
                       ?.find(
                         (orderModifier) =>
@@ -184,44 +155,39 @@ export const ModifiersSetControl = ({
                       ?.modifierId?.toString()
 
                     return (
-                      <Col key={modifier.id.toString()}>
-                        <>
-                          <div className='modifier-container d-flex justify-content-between align-items-center p-2'>
-                            <Form.Check
-                              className='custom-radio'
-                              inline
-                              id={modifier.id.toString()}
-                              defaultChecked={!!selectedOrderModifierId}
-                              defaultValue={modifier.id.toString()}
-                              checked={field.value === modifier.id.toString()}
-                              onChange={onChange}
-                              type='radio'
-                              label={modifier.name}
-                              name={modifier.name}
-                            />
-                          </div>
+                      <Col key={modifier.id}>
+                        <div className='modifier-container d-flex flex-column p-2'>
+                          <Form.Check
+                            className='custom-radio p-2'
+                            inline
+                            id={modifier.id.toString()}
+                            defaultChecked={!!selectedOrderModifierId}
+                            defaultValue={modifier.id.toString()}
+                            checked={field.value === modifier.id.toString()}
+                            onChange={onChange}
+                            type='radio'
+                            label={modifier.name}
+                            name={modifier.name}
+                          />
                           <div className='mt-3 w-100 pl-2'>
                             <p>{modifier.description}</p>
                             <div className='price'>
                               + {formatToCurrency(modifier.price)}
                             </div>
                           </div>
-                        </>
+                        </div>
                       </Col>
                     )
                   })}
+                  {fieldState.error && (
+                    <div className='invalid-feedback d-block'>
+                      {fieldState.error.message}
+                    </div>
+                  )}
                 </>
               )
             }}
           />
-
-          {modifiersErrors?.message && (
-            <Col>
-              <div className='invalid-feedback field-values-error'>
-                {modifiersSetWithErrors.message || 'test'}
-              </div>
-            </Col>
-          )}
         </>
       ) : (
         <>
@@ -229,44 +195,20 @@ export const ModifiersSetControl = ({
             const selectedOrderModifier = currentOrderModifiersSets?.find(
               (orderModifier) => orderModifier.modifierId === modifier.id,
             )?.quantity
-            const requiredModifierSet = modifierSet?.minItems > currentOrderModifiersSets.length
-            const errorMessage = (modifiersErrors as FieldError[])?.find(
-              (modifier) =>
-                modifier.ref && modifier.ref.name === `modifiers[${index}]`,
-            )?.message
 
             return (
               <>
                 {modifier.maxItems === 1 ? (
                   <>
                     <Controller
-                      name={`modifiers[${index}]`}
+                      name={`${productId}.${modifierSet.id}.modifiers[${index}]`}
                       control={control}
                       rules={{
-                        required: !!modifier.minItems || requiredModifierSet,
+                        required: {
+                          value: !!modifier.minItems,
+                          message: t('Validation:fieldRequired') as string,
+                        },
                         validate: (value) => {
-                          if (!value) return true
-                          const {
-                            maxItems: maxModifierSet,
-                            minItems: minModifierSet,
-                          } = modifierSet
-
-                          if (
-                            orderProductModifiersMaxQuantity < minModifierSet
-                          ) {
-                            return t('Validation:quantityMinNumberModifier', {
-                              min: minModifierSet,
-                            }) as string
-                          }
-
-                          if (
-                            orderProductModifiersMaxQuantity > maxModifierSet
-                          ) {
-                            return t('Validation:quantityMaxNumberModifier', {
-                              max: maxModifierSet,
-                            }) as string
-                          }
-
                           const { maxItems, minItems } = modifier
                           if (value?.length > maxItems) {
                             return t('Validation:quantityMaxNumberModifier', {
@@ -283,7 +225,7 @@ export const ModifiersSetControl = ({
                           return true
                         },
                       }}
-                      render={({ field }) => {
+                      render={({ field, fieldState: { error } }) => {
                         const onChange = (e: ChangeEvent<HTMLInputElement>) => {
                           onChangeModifiers(e, 'checkbox')
                           field.onChange(
@@ -293,10 +235,10 @@ export const ModifiersSetControl = ({
 
                         return (
                           <Col
-                            className='modifier-container pl-6'
+                            className='modifier-container pl-4'
                             key={modifier.id.toString()}
                           >
-                            <div className='d-flex justify-content-between align-items-center'>
+                            <div className='d-flex justify-content-between pl-2 align-items-center'>
                               <Checkbox
                                 value={modifier.id}
                                 onChange={onChange}
@@ -310,9 +252,9 @@ export const ModifiersSetControl = ({
                                 + {formatToCurrency(modifier.price)}
                               </div>
                             </div>
-                            {errorMessage && (
+                            {error?.message && (
                               <div className='invalid-feedback d-flex'>
-                                {errorMessage}
+                                {error?.message}
                               </div>
                             )}
                           </Col>
@@ -329,30 +271,11 @@ export const ModifiersSetControl = ({
                       control={control}
                       name={`${productId}.${modifierSet.id}.modifiers[${index}].quantity`}
                       rules={{
-                        required: !!modifier.minItems || requiredModifierSet,
+                        required: {
+                          value: !!modifier.minItems,
+                          message: t('Validation:fieldRequired') as string,
+                        },
                         validate: (value) => {
-                          // if (!value) return true
-                          const {
-                            maxItems: maxModifierSet,
-                            minItems: minModifierSet,
-                          } = modifierSet
-                          if (
-                            orderProductModifiersMaxQuantity < minModifierSet
-                          ) {
-                            return t('Validation:quantityMinNumberModifier', {
-                              min: minModifierSet,
-                            }) as string
-                          }
-
-                          if (
-                            orderProductModifiersMaxQuantity > maxModifierSet
-                          ) {
-        
-                            return t('Validation:quantityMaxNumberModifier', {
-                              max: maxModifierSet,
-                            }) as string
-                          }
-
                           const { maxItems, minItems } = modifier
                           if (value > maxItems) {
                             return t('Validation:quantityMaxNumberModifier', {
@@ -426,13 +349,6 @@ export const ModifiersSetControl = ({
                     />
                   </>
                 )}
-                {modifiersErrors?.message && (
-                  <Col>
-                    <div className='invalid-feedback field-values-error'>
-                      {modifiersSetWithErrors.message || 'test'}
-                    </div>
-                  </Col>
-                )}
               </>
             )
           })}