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

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

package/src/iframe/ProductWithModifierModal/utils.ts

@@ -0,0 +1,28 @@
+import { OrderModifier } from "@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper"
+import { uniqBy } from "lodash"
+
+export type selectModifierType = 'radio' | 'checkbox' | 'selector'
+
+export const filteredOrderModifierSets = (
+    modifiersSet: OrderModifier[],
+  ): OrderModifier[] => {
+    if (!modifiersSet) return []
+    const orderModifier = modifiersSet
+      .flat()
+      .filter((modifier) => !!modifier?.quantity)
+
+    return uniqBy(
+      orderModifier,
+      (item) => `${item.modifierId}-${item.modifierSetId}`,
+    )
+  }
+
+  export const orderProductModifiersQuantity = (
+    orderModifiersSets: OrderModifier[],
+    modifierSet,
+  ) => {
+    const filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets)
+    return filteredOrderModifier.filter(
+      (item) => item?.modifierSetId === modifierSet.id,
+    ).length
+  }

package/src/product-set/form/ProductsControl.tsx

@@ -141,6 +141,16 @@ export function ProductsControl({
     ],
   })
 
+  const modifierSets = useWatch({
+    control,
+    name: [
+      ...fields.map(
+        (_, index) =>
+          `${productControlFieldName}.${index}.modifiersSet` as const,
+      ),
+    ],
+  })
+
   const categoryProductErrors =
     errors?.steps?.[stepIndex]?.productCategories?.[productCategoryIndex]
       ?.products
@@ -200,9 +210,8 @@ export function ProductsControl({
             ? !!product.id
             : isOverrides && !!product.originalProductId
 
-          const modifierSets = product?.modifiersSet.length || 0
-
           const isNewProductOverrides = isCreateNewOverrides && !!product.id
+          const modifiersSets = modifierSets[index]?.length || 0
 
           return (
             <Controller
@@ -247,8 +256,8 @@ export function ProductsControl({
                           } `}
                         </span>
                       </div>
-                      {!!modifierSets && (
-                        <Badge className='modifier-badge'>{`${modifierSets} ${t('modifiersSets')}`}</Badge>
+                      {!!modifiersSets && (
+                        <Badge className='modifier-badge'>{`${modifiersSets} ${t('modifiersSets')}`}</Badge>
                       )}
                     </div>
                   }

package/src/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/src/styles/product-set/ProductSetForm.scss

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

package/src/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/yarn.lock

@@ -2481,6 +2481,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@licklist/core@npm:0.31.2-dev.11":
+  version: 0.31.2-dev.11
+  resolution: "@licklist/core@npm:0.31.2-dev.11"
+  dependencies:
+    "@sentry/browser": "npm:6.2.0"
+    axios: "npm:0.26.0"
+    i18next: "npm:19.4.5"
+    luxon: "npm:3.5.0"
+    react: "npm:17.0.2"
+    react-dom: "npm:17.0.2"
+    react-i18next: "npm:11.8.8"
+    react-intl: "npm:6.6.8"
+    uuid: "npm:9.0.0"
+    wait-for-expect: "npm:3.0.2"
+    zustand: "npm:3.7.2"
+  peerDependencies:
+    "@licklist/eslint-config": 0.5.6
+    axios: 0.26.0
+    luxon: 3.5.0
+    react: 17.0.2
+    react-dom: 17.0.2
+    react-i18next: 11.8.8
+    react-intl: 6.6.8
+    zustand: 3.7.2
+  checksum: 10c0/eabcc95fb4a12a60c00c5b15060a89495f7c6980a53d27fc3dc7325eccb4a5d604e49aa148b68ae0bcb98f5e78f0dc2695833342756a3d5d9d2640bbd93dfaaf
+  languageName: node
+  linkType: hard
+
 "@licklist/design@workspace:.":
   version: 0.0.0-use.local
   resolution: "@licklist/design@workspace:."
@@ -2492,7 +2520,7 @@ __metadata:
     "@dnd-kit/utilities": "npm:2.0.0"
     "@fortawesome/fontawesome-svg-core": "npm:1.2.34"
     "@fortawesome/free-solid-svg-icons": "npm:5.15.2"
-    "@licklist/core": "npm:0.31.2-dev.10"
+    "@licklist/core": "npm:0.31.2-dev.11"
     "@licklist/eslint-config": "npm:0.5.6"
     "@licklist/plugins": "npm:0.35.1-dev.8"
     "@mantine/core": "npm:6.0.22"
@@ -2623,7 +2651,7 @@ __metadata:
     vite-plugin-svgr: "npm:4.2.0"
     vite-tsconfig-paths: "npm:5.0.1"
   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
@@ -5147,14 +5175,14 @@ __metadata:
   linkType: hard
 
 "@tiptap/extension-bubble-menu@npm:^2.0.0-beta.56":
-  version: 2.11.3
-  resolution: "@tiptap/extension-bubble-menu@npm:2.11.3"
+  version: 2.11.5
+  resolution: "@tiptap/extension-bubble-menu@npm:2.11.5"
   dependencies:
     tippy.js: "npm:^6.3.7"
   peerDependencies:
     "@tiptap/core": ^2.7.0
     "@tiptap/pm": ^2.7.0
-  checksum: 10c0/3c672b457f5c83cef38f684f7a3fdbfd2c2ec59e3b213485d210011285fbc47d37b8b65f9e41a2d091678faaa8d8768b3dff0aaa53f53d2e89a2a7ce94d455fb
+  checksum: 10c0/a9112df35a19c875085c4065cee36228aec68c2336ddcff25a4e741e25625397325762abce045ede53c18b58df9235216ef909a099f9ac8f5783d137615e3252
   languageName: node
   linkType: hard
 
@@ -5177,14 +5205,14 @@ __metadata:
   linkType: hard
 
 "@tiptap/extension-floating-menu@npm:^2.0.0-beta.51":
-  version: 2.11.3
-  resolution: "@tiptap/extension-floating-menu@npm:2.11.3"
+  version: 2.11.5
+  resolution: "@tiptap/extension-floating-menu@npm:2.11.5"
   dependencies:
     tippy.js: "npm:^6.3.7"
   peerDependencies:
     "@tiptap/core": ^2.7.0
     "@tiptap/pm": ^2.7.0
-  checksum: 10c0/8d6c3ce5999eaaae61bacca56f881090bc9b58b3588e50ed4981008806c7eea70b48ad56e489679d64a6e4d34b1d65c49028ab4160c2e717ffd90973533b7a81
+  checksum: 10c0/45013b8e7ea13950a76bf62498d48b0d681aeaa88e49b3027f45ec42a42b5006e9f8af25251712cb6ed73a732989e2f95d293b905ba83aa82e2c17aabcfed0b0
   languageName: node
   linkType: hard
 
@@ -6037,9 +6065,9 @@ __metadata:
   linkType: hard
 
 "@types/webpack-env@npm:^1.16.0":
-  version: 1.18.7
-  resolution: "@types/webpack-env@npm:1.18.7"
-  checksum: 10c0/9e5736d2ae5848482e4d6406557eb17883bb8d112dccf45d54204110534d6331e53975b8eafe090b5da683eecd9f2b35f9814938e19c8f2c6d63c6e5dd640a92
+  version: 1.18.8
+  resolution: "@types/webpack-env@npm:1.18.8"
+  checksum: 10c0/527a5d1eb75c5243e4f3665d956c7c340f899955dd25d16c9fd9750406f32e95a3a17d207640295038e8235c0c2a2daf084f420e088e58b965d82fc74f6012d7
   languageName: node
   linkType: hard
 
@@ -8072,9 +8100,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001125, caniuse-lite@npm:^1.0.30001646, caniuse-lite@npm:^1.0.30001688":
-  version: 1.0.30001695
-  resolution: "caniuse-lite@npm:1.0.30001695"
-  checksum: 10c0/acf90a767051fdd8083711b3ff9f07a28149c55e394115d8f874f149aa4f130e6bc50cea1dd94fe03035b9ebbe13b64f446518a6d2e19f72650962bdff44b2c5
+  version: 1.0.30001696
+  resolution: "caniuse-lite@npm:1.0.30001696"
+  checksum: 10c0/8060584c612b2bc232995a6e31153432de7946b5417d3b3505a3ab76e632e5568ccc7bae38f1a977f21d4fc214f9e64be829213f810694172c9109e258cb5be8
   languageName: node
   linkType: hard
 
@@ -8217,8 +8245,8 @@ __metadata:
   linkType: hard
 
 "chromatic@npm:^11.4.0":
-  version: 11.25.1
-  resolution: "chromatic@npm:11.25.1"
+  version: 11.25.2
+  resolution: "chromatic@npm:11.25.2"
   peerDependencies:
     "@chromatic-com/cypress": ^0.*.* || ^1.0.0
     "@chromatic-com/playwright": ^0.*.* || ^1.0.0
@@ -8231,7 +8259,7 @@ __metadata:
     chroma: dist/bin.js
     chromatic: dist/bin.js
     chromatic-cli: dist/bin.js
-  checksum: 10c0/869939cf65ddc4c606ac982cbbaba63d3d6cbc8082e24f04f74ee6a5e3979cdec49e8fab2549f87e8cfa8127c15dbda1f86371306642bdabcb43ee9cff46ceae
+  checksum: 10c0/2cb4bb40a062005292a4cd606321f6c9bdaa31e255e66bae12c780bca9b72e883c017ebe48c5a9228db88a010f5977571ef7dfdcdd4195ad0e7b955f9966d7df
   languageName: node
   linkType: hard
 
@@ -9861,9 +9889,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.3.564, electron-to-chromium@npm:^1.5.73":
-  version: 1.5.88
-  resolution: "electron-to-chromium@npm:1.5.88"
-  checksum: 10c0/25946ef310f8e14c763fcf0e62094e7eae2273d9ffe908969ddd97492c3df0198739295ba76388dc210c4503ab6b540130779cd83036f80520cb8efee53be8e4
+  version: 1.5.90
+  resolution: "electron-to-chromium@npm:1.5.90"
+  checksum: 10c0/864715adfebb5932a78f776c99f28a50942884302b42ee6de0ab64ca135891a5a43af3a7c719a7335687c0ee201561011e37d4994558a795f67b9e44f20fc6ee
   languageName: node
   linkType: hard
 
@@ -10975,11 +11003,11 @@ __metadata:
   linkType: hard
 
 "fastq@npm:^1.6.0":
-  version: 1.18.0
-  resolution: "fastq@npm:1.18.0"
+  version: 1.19.0
+  resolution: "fastq@npm:1.19.0"
   dependencies:
     reusify: "npm:^1.0.4"
-  checksum: 10c0/7be87ecc41762adbddf558d24182f50a4b1a3ef3ee807d33b7623da7aee5faecdcc94fce5aa13fe91df93e269f383232bbcdb2dc5338cd1826503d6063221f36
+  checksum: 10c0/d6a001638f1574a696660fcbba5300d017760432372c801632c325ca7c16819604841c92fd3ccadcdacec0966ca336363a5ff57bc5f0be335d8ea7ac6087b98f
   languageName: node
   linkType: hard
 
@@ -13775,9 +13803,9 @@ __metadata:
   linkType: hard
 
 "libphonenumber-js@npm:^1.9.11":
-  version: 1.11.18
-  resolution: "libphonenumber-js@npm:1.11.18"
-  checksum: 10c0/4877d2521426e4094cbf1991fd30778d3856e702acce655a767a1ba261d8e765901dc17944d627a7ee083992ee4c427007bf9d488207432b6b5dee982b849de4
+  version: 1.11.19
+  resolution: "libphonenumber-js@npm:1.11.19"
+  checksum: 10c0/cf02204746dd89cacbd5830c32e6ea4a7e4593efa84b0707207900d79bb0bbd19bd38eb6da7544f49638d609b8c4b9dcbd7e50ea6506e957cd149f6a3c2c7b2b
   languageName: node
   linkType: hard
 
@@ -17007,15 +17035,15 @@ __metadata:
   linkType: hard
 
 "prosemirror-tables@npm:^1.3.0":
-  version: 1.6.2
-  resolution: "prosemirror-tables@npm:1.6.2"
+  version: 1.6.3
+  resolution: "prosemirror-tables@npm:1.6.3"
   dependencies:
     prosemirror-keymap: "npm:^1.2.2"
     prosemirror-model: "npm:^1.24.1"
     prosemirror-state: "npm:^1.4.3"
     prosemirror-transform: "npm:^1.10.2"
     prosemirror-view: "npm:^1.37.1"
-  checksum: 10c0/cac5a8d88189d4801873f404c86fda3b161b30a637be1b08337e4ba521c668ec070543d09cef728a3f6990d8035146c3da73b9cee812833a424d8780cfef5a30
+  checksum: 10c0/09ded9ffae5c2a9e274cf89c2ff1ba6400bd3d0ad9e68a0de9a4154c9b9210239c90db50e3081487615899eae3b2c7228e097df73acd42150d9cc91076da239b
   languageName: node
   linkType: hard
 
@@ -19248,11 +19276,11 @@ __metadata:
   linkType: hard
 
 "semver@npm:^7.2.1, semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4":
-  version: 7.6.3
-  resolution: "semver@npm:7.6.3"
+  version: 7.7.0
+  resolution: "semver@npm:7.7.0"
   bin:
     semver: bin/semver.js
-  checksum: 10c0/88f33e148b210c153873cb08cfe1e281d518aaa9a666d4d148add6560db5cd3c582f3a08ccb91f38d5f379ead256da9931234ed122057f40bb5766e65e58adaf
+  checksum: 10c0/bcd1c03209b4be7d8ca86c976a0410beba7d4ec1d49d846a4be154b958db1ff5eaee50760c1d4f4070b19dee3236b8672d3e09642c53ea23740398bba2538a2d
   languageName: node
   linkType: hard