@licklist/design 0.71.2 → 0.71.4-dev.0

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

@@ -15,10 +15,12 @@
     height: 2.5rem;
     border-width: 2px;
     padding: 2px;
+
     label,
     .btn-switch-indicator {
       border-radius: 0.375rem !important;
     }
+
     label {
       height: 2rem;
     }
@@ -34,6 +36,7 @@
       margin-top: 1.5rem;
       margin-bottom: 1.5rem;
     }
+
     @include media-breakpoint-down(sm) {
       padding: 1.5rem 1rem;
       margin-top: 0.5rem;
@@ -59,10 +62,21 @@
     background-color: #ffdbdb;
     color: #d52902;
   }
+
   .category-badge {
     background-color: #e8f4f6;
     color: #1a93aa;
   }
+
+  .item-icon {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    font-size: 0.65rem;
+    padding: 0.2rem;
+    margin-right: 1rem;
+  }
+
   .product-badge {
     background-color: #e9f5ea;
     color: #269b36;
@@ -75,10 +89,12 @@
 
 .product-set-mobile-modal {
   margin: 0;
+
   .modal-content {
     border-radius: 1rem 1rem 0 0;
     border-width: 0;
     margin: 0;
+
     .modal-body {
       padding: 1rem 0;
     }
@@ -100,18 +116,22 @@
     font-weight: 600;
     font-size: 0.625rem;
   }
+
   .product-set-subtitle-dot {
     margin-right: 0.375rem;
     width: 0.375rem;
     height: 0.375rem;
     border-radius: 3px;
   }
+
   .product-set-subtitle-category-dot {
     background-color: #269b36;
   }
+
   .product-set-subtitle-step-dot {
     background-color: #1a93aa;
   }
+
   .product-set-subtitle-product-dot {
     background-color: #269b36;
   }
@@ -156,6 +176,7 @@
     justify-self: flex-end;
     align-items: flex-end;
   }
+
   .small-badge {
     font-size: 0.5rem;
     height: 1rem;
@@ -163,6 +184,7 @@
     padding: 0 0.2rem;
     margin-bottom: 0.2rem;
   }
+
   .product-set-save-btn-wrapper {
     padding-left: 0 !important;
     display: flex;

package/dist/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -102,7 +102,6 @@
 }
 
 .ryft-payment-form {
-
   .form-disable-box {
     display: none;
     position: absolute;
@@ -184,7 +183,6 @@
 }
 
 @include media-breakpoint-up(md) {
-
   .ryft-payment-form,
   .form-disable-box {
     height: 50%;
@@ -213,4 +211,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}

package/dist/zone/form/components/GameDurationControl.js

@@ -77,6 +77,9 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

package/dist/zone/form/components/SortControl.js

@@ -77,6 +77,9 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.2",
+  "version": "0.71.4-dev.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.5",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.34.0",
+    "@licklist/plugins": "0.34.0-dev.4",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.32.0",
+    "@licklist/core": "0.31.1-dev.4",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.0",
+    "@licklist/plugins": "0.34.0-dev.4",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,6 +202,7 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,6 +76,7 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
+
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error.message,
+      message: error?.response?.data?.message || error.message,
     })
   }
 

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -39,7 +39,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/events/event-statistic-modal/utils/index.ts

@@ -1,6 +1,7 @@
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
+import { values } from 'lodash'
 
 export const TRANSLATION_KEYS = {
   shortQuantity: 'shortQuantity',
@@ -46,6 +47,15 @@ export const convertEventStatisticToTableData = (
 
   const summaryMap = new Map<string, TableDataRecord>()
 
+  const maxTotalQuantity = values(eventStatistic?.productCategorySummary)
+    .flat()
+    .flatMap((categorySummary) => categorySummary.productsSummary)
+    .reduce(
+      (acc, productSummary) =>
+        productSummary.totalQuantity > acc ? productSummary.totalQuantity : acc,
+      0,
+    )
+
   summaryDays
     .map((day) => eventStatistic?.productCategorySummary[day])
     .flat()
@@ -92,7 +102,7 @@ export const convertEventStatisticToTableData = (
               quantity: totalQuantity
                 ? `${
                     existingProduct.metadata._productsSold + productsSold
-                  } / ${totalQuantity}`
+                  } / ${maxTotalQuantity}`
                 : String(existingProduct.metadata._productsSold + productsSold),
               total: String(existingProduct.metadata._total + total),
               metadata: {

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,6 +49,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
+    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,13 +10,17 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
+  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
+
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || { width, height }
+  return memoedComponentParameters || memoizedDimensions
 }

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,6 +61,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,20 +61,22 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById("ryft-pay-iframe");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      formBox.style.display = isDisableButton ? 'block' : 'none'
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

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

@@ -8,6 +8,7 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
+import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -25,7 +26,11 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import { SelectCategoryModal } from './SelectCategoryModal'
+import {
+  SelectCategoryModal,
+  CATEGORY_TYPES_NAMES,
+  CategoryConfig,
+} from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -33,6 +38,29 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
+const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
+  [CATEGORY_TYPES_NAMES.tickets]: {
+    label: 'tickets',
+    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.bookings]: {
+    label: 'bookings',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.menuItems]: {
+    label: 'menuItems',
+    icon: <FaBars color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.game]: {
+    label: 'game',
+    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.fixedDuration]: {
+    label: 'fixedDuration',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+}
+
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -228,6 +256,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type]
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -272,6 +302,12 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
+                  itemButton={
+                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
+                      {categoryType.icon}
+                      <span className='ml-2'>{t(categoryType.label)}</span>
+                    </div>
+                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}

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

@@ -12,7 +12,7 @@ import { isEqual } from 'lodash'
 import { ProviderBookingManagementSetting } from '@licklist/core/dist/DataMapper/Provider/ProviderBookingManagementSettingDataMapper'
 import { Zone } from '@licklist/core/dist/DataMapper/Provider/ZoneDataMapper'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
-import { transformErrorToMessage } from '@licklist/plugins'
+import { transformErrorToMessage } from '@licklist/plugins/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -28,12 +28,16 @@ import { ErrorModal } from '../../iframe/order-process/components/ErrorModal'
 export interface WithIsLoading {
   isLoading: boolean
 }
+export interface WithIdOptional {
+  id?: number
+}
+
 export interface WithId {
   id: number
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean

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

@@ -1,7 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import React, { useContext, useState } from 'react'
-
+import { useContext, useState } from 'react'
 import {
   ArrayPath,
   Controller,

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

@@ -25,7 +25,7 @@ import {
 } from 'react-icons/fa'
 import { ProductSetLoadingContext } from './context'
 
-const CATEGORY_TYPES_NAMES = {
+export const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-type CategoryConfig = { label: string; icon: ReactElement }
+export type CategoryConfig = { label: string; icon: ReactElement }
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {

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

@@ -70,9 +70,6 @@ export function SubProductsControl({
                   images: subProducts[index]?.images as Image[],
                 }
                 // @ts-expect-error TS2345
-                // @TODO fix prod type error
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
                 append(subProductCopy)
               }}
             />

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

@@ -46,9 +46,6 @@ export const VenueMapsControl = ({
                             url={image.url}
                             name={name}
                             points={points}
-                            // @TODO fix prod type error
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                            // @ts-ignore
                             products={products}
                             pointProducts={pointProducts}
                             onPointProductsChange={onPointProductsChange}

package/src/product-set/product/ProductControl.tsx

@@ -34,7 +34,6 @@ import {
 } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import { useImages } from '@licklist/plugins/dist/hooks/Media/useImages'
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { Col, Form } from 'react-bootstrap'
 import { Controller, Path, useFormContext } from 'react-hook-form'
 import { HookFormService } from '@licklist/plugins'

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -86,6 +86,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 step={1}
                 value={value as string}
@@ -129,6 +130,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min='0'
                 step='1'
                 value={value as string}

package/src/product-set/product/deposit/ProductDepositControl.tsx

@@ -50,6 +50,7 @@ export function ProductDepositControl<T extends FormValues>(
               <Form.Control
                 ref={ref}
                 type='number'
+                onWheel={(event) => event.currentTarget.blur()}
                 min={0}
                 max={Number(totalPrice)}
                 step='0.01'

package/src/product-set/product/duration/ProductDurationControl.tsx

@@ -91,6 +91,7 @@ export const ProductDurationControl = <T,>({
                 <Form.Control
                   type='number'
                   min={0}
+                  onWheel={(event) => event.currentTarget.blur()}
                   step={1}
                   value={durationHours}
                   disabled={disabled}
@@ -127,6 +128,7 @@ export const ProductDurationControl = <T,>({
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   disabled={disabled}
                   value={durationMinutes}
                   isInvalid={isInvalid}

package/src/product-set/product/price/ProductPriceControl.tsx

@@ -59,6 +59,7 @@ export function ProductPriceControl<T extends FormValues>({
                 ref={ref}
                 type='number'
                 min={0}
+                onWheel={(event) => event.currentTarget.blur()}
                 max={999999.99}
                 step='0.01'
                 value={value as string}

package/src/product-set/product/quantity/ProductQuantityConstantControl.tsx

@@ -111,6 +111,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   isInvalid={HookFormService.isInvalid<T>(
                     `${fieldNamePrefix}.totalQuantity` as Path<T>,
@@ -165,6 +166,7 @@ export function ProductQuantityConstantControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}

package/src/product-set/product/quantity/ProductQuantityControl.tsx

@@ -85,6 +85,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value as string}
                   onChange={onChange}
                   onFocus={onFocus}
@@ -143,6 +144,7 @@ export function ProductQuantityControl<T extends FormValues>(
                   type='number'
                   min={0}
                   step={1}
+                  onWheel={(event) => event.currentTarget.blur()}
                   value={value && (value as string)}
                   onFocus={onFocus}
                   onChange={onChange}

package/src/product-set/product/quantity/ProductQuantityRechargingControl.tsx

@@ -69,6 +69,7 @@ export function ProductQuantityRechargingControl<T extends FormValues>(
                 type='number'
                 min={0}
                 step={1}
+                onWheel={(event) => event.currentTarget.blur()}
                 {...register(`${fieldNamePrefix}.totalQuantity` as Path<T>, {
                   validate: (value) => {
                     if (unlimited) return true