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

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/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.5",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

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>
-                )}
               </>
             )
           })}

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

@@ -1,55 +1,96 @@
-import {
-  useFormContext,
-  Controller,
-  FieldErrors,
-  FieldValues,
-} from 'react-hook-form'
+import { useEffect } from 'react'
+import { useFormContext, Controller } from 'react-hook-form'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { useTranslation } from 'react-i18next' // Added translation hook
 import { ModifiersSetControl } from './ModifierSetControll'
+import { orderProductModifiersQuantity } from '../../utils'
 
 interface ProductControlProps {
   product: Product
   isLoading?: boolean
   editOrderModifier?: OrderModifierByProduct
-  errors?: FieldErrors<FieldValues>
 }
 
 export const ProductControl = ({
   product,
   isLoading = false,
   editOrderModifier,
-  errors,
 }: ProductControlProps) => {
-  const { control } = useFormContext()
+  const { t } = useTranslation() // Added translation hook
+  const {
+    control,
+    watch,
+    formState: { isValid },
+    clearErrors,
+  } = useFormContext()
   const modifiersSet = product?.modifiersSet || []
+  const orderModifiersSets = watch(`${product.id}.orderProductModifiers`)
+
+  useEffect(() => {
+    if (!isValid) return
+    clearErrors()
+  }, [isValid, clearErrors])
 
   return (
-    <Controller
-      control={control}
-      name='product'
-      render={() => (
-        <div className='mb-8 pt-4'>
-          <div className=' d-flex  flex-column'>
-            {modifiersSet.map((modifierSet) => (
-              <>
-                <div className='modifier-header'>
-                  <div className='title'>{modifierSet.name}</div>
-                </div>
-                <ModifiersSetControl
-                  modifierSet={modifierSet}
-                  productId={product.id}
-                  modifiers={modifierSet.modifiers}
-                  isEditMode={!!editOrderModifier?.modifiers}
-                  orderProductModifierSets={editOrderModifier?.modifiers}
-                  modifiersSetWithErrors={errors}
-                  isLoading={isLoading}
-                />
-              </>
-            ))}
-          </div>
-        </div>
-      )}
-    />
+    <div className='mb-8 pt-4'>
+      <div className='d-flex flex-column'>
+        {modifiersSet.map((modifierSet) => {
+          const orderProductModifiersMaxQuantity =
+            orderProductModifiersQuantity(orderModifiersSets, modifierSet)
+
+          return (
+            <div className='modifier-set-container' key={modifierSet.id}>
+              <div className='modifier-header'>
+                <div className='title'>{modifierSet.name}</div>
+              </div>
+              <Controller
+                control={control}
+                name={`${product.id}.${modifierSet.id}`}
+                rules={{
+                  validate: () => {
+                    const { maxItems, minItems } = modifierSet
+
+                    if (
+                      !!minItems &&
+                      orderProductModifiersMaxQuantity < minItems
+                    ) {
+                      return t('Validation:quantityMinNumberModifier', {
+                        min: minItems,
+                      }) as string
+                    }
+
+                    if (orderProductModifiersMaxQuantity > maxItems) {
+                      return t('Validation:quantityMaxNumberModifier', {
+                        max: maxItems,
+                      }) as string
+                    }
+
+                    return true
+                  },
+                }}
+                render={({ fieldState: { error } }) => (
+                  <>
+                    <ModifiersSetControl
+                      modifierSet={modifierSet}
+                      productId={product.id}
+                      modifiers={modifierSet.modifiers}
+                      isEditMode={!!editOrderModifier?.modifiers}
+                      orderProductModifierSets={editOrderModifier?.modifiers}
+                      isLoading={isLoading}
+                    />
+                    {error?.message && (
+                      <div className='invalid-feedback d-flex pl-4'>
+                        {error?.message}!
+                      </div>
+                    )}
+                  </>
+                )}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
   )
 }