@licklist/design 0.78.5-dev.19 → 0.78.5-dev.21

package/src/custom-fields/field-set/components/CustomFieldSet/CustomFieldSet.tsx

@@ -1,3 +1,4 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 import { createElement, useState, useEffect, useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button, Form } from 'react-bootstrap'
@@ -17,7 +18,6 @@ import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permi
 import FormErrorService from '@licklist/plugins/dist/services/Form/FormErrorService'
 import { ServerError } from '@licklist/plugins/dist/hooks/Api/useHttpQuery'
 import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 
 import {
   CreateSortableListItem,
@@ -85,7 +85,6 @@ export const CustomFieldSet = ({
   useEffect(() => {
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
-  const notification = useNotification()
   const { fields, append, remove } = useFieldArray({
     control,
     name: CUSTOM_FIELDS,
@@ -98,7 +97,7 @@ export const CustomFieldSet = ({
 
     if (!response) return
 
-    notification.success({
+    showAlert({ type: 'success',
       title: t('App:success'),
       message: t('Notification:createSuccessfully', {
         argument: t('customField'),
@@ -124,7 +123,7 @@ export const CustomFieldSet = ({
     if (fieldSet.id !== null) {
       await onFieldSetDelete(fieldSet)
 
-      notification.success({
+      showAlert({ type: 'success',
         title: t('App:success'),
         message: t('Notification:theRemovedSuccessfully', {
           argument: t('customField'),

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -159,6 +159,10 @@ export function IntervalInput({
             {formattedDuration && `lasts ${formattedDuration}`}
           </Form.Text>
         </Form.Group>
+
+        <Form.Control.Feedback type='invalid'>
+            {errors.end?.message}
+         </Form.Control.Feedback>
       </Form.Row>
       {start && (
         <Form.Group controlId={recurrentId}>

package/src/events/edit-event-modal/component/SaleDeadline/SaleDeadline.tsx

@@ -39,10 +39,12 @@ type SaleDeadlineType =
 export const SaleDeadline = ({
   disabled = false,
   onlyBefore = false,
+  isProductSet = false,
   deadLineCategory,
 }: {
   disabled?: boolean
   onlyBefore?: boolean
+  isProductSet?: boolean
   deadLineCategory?: string
 }) => {
   const { t } = useTranslation(['Design'])
@@ -140,10 +142,16 @@ export const SaleDeadline = ({
                   <Switch
                     name='sale-deadline'
                     options={SALE_DEADLINES_EVENT_START_TYPES.map(
-                      ({ type }) => ({
-                        id: type,
-                        value: t(`Design:${type}`),
-                      }),
+                      ({ type }) => {
+                        const salesDeadlineTitle =
+                          type === SALE_DEADLINE_BEFORE_TYPE && isProductSet
+                            ? 'beforeProductSet'
+                            : type
+                        return {
+                          id: type,
+                          value: t(`Design:${salesDeadlineTitle}`),
+                        }
+                      },
                     )}
                     value={deadlineType}
                     onChange={changeValueByType}

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

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

package/src/events/event-card/EventCard.tsx

@@ -33,7 +33,7 @@ export interface EventCardProps extends HasPermissionProp {
   onPreview: () => void
   onEdit: () => void
   onCopy: () => void
-  onRemove: () => void
+  onRemove?: () => void
   onOpenQrCode: () => void
   eventStatistic?: EventStatistic | null
   eventMetadata?: EventMetadata | null
@@ -212,13 +212,15 @@ export function EventCard({
                 >
                   <FaCopy />
                 </button>
-                <button
-                  type='button'
-                  className='event-card-link-button'
-                  onClick={onRemove}
-                >
-                  <FaTrashAlt />
-                </button>
+                {onRemove && (
+                  <button
+                    type='button'
+                    className='event-card-link-button'
+                    onClick={onRemove}
+                  >
+                    <FaTrashAlt />
+                  </button>
+                )}
               </>
             )}
           </div>

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -12,6 +12,7 @@ export type EventStatisticModalProps = {
   date?: Event['startAt'] | null
   eventStatistic?: EventStatistic | null
   title?: string
+  eventId?: string
 }
 
 export const EventStatisticModal = ({
@@ -20,10 +21,11 @@ export const EventStatisticModal = ({
   date,
   eventStatistic,
   title,
+  eventId,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic)
+  const data = useTableData(date, eventStatistic, eventId)
   const handleClose = () => {
     setIsOpen(false)
   }

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -11,6 +11,7 @@ import { StaticTableData } from '../../../table'
 export const useTableData = (
   date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
+  eventId: string,
 ) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
@@ -84,7 +85,7 @@ export const useTableData = (
   useEffect(() => {
     setTableRows(transformStatisticToTableRows(date, eventStatistic))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventStatistic])
+  }, [date, eventId, eventStatistic])
 
   return tableRows
 }

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

@@ -33,15 +33,15 @@ export const convertEventStatisticToTableData = (
     return []
   }
 
-  const summaryFormattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_FORMAT)
+  const summaryFormattedDate = DateTime.fromISO(date).toFormat(
+    DATE_TIME_FULL_FORMAT,
+  )
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_FORMAT,
+          DATE_TIME_FULL_FORMAT,
         ) === summaryFormattedDate,
     ) ?? []
 

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/file-upload/FileUpload.tsx

@@ -1,8 +1,8 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 /* eslint-disable no-return-assign */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { Attachment } from '@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper'
 import { AttachmentMetadata } from '@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper'
@@ -153,7 +153,6 @@ export const useFileUpload = ({
   const [files, setFiles] = useState<File[] | null>(null)
   const [isDragged, setIsDragged] = useState(false)
 
-  const notification = useNotification()
   const { t } = useTranslation('Design')
 
   const uploadFile = (file: File) => {
@@ -183,7 +182,7 @@ export const useFileUpload = ({
       if (isExtensionValid) {
         uploadFile(file)
       } else {
-        notification.danger({
+        showAlert({ type: 'error',
           title: t('fileNotUploaded', { fileName: file.name }),
           message: t('invalidExtension', { extension: fileExtension }),
         })

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

@@ -35,9 +35,6 @@ export const ModifiersSetControl = ({
   const { t } = useTranslation('App')
 
   const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
-  const filteredOrderModifiersSets = orderModifiersSets
-    ?.flat(Infinity)
-    ?.filter((item) => item && typeof item === 'object')
 
   const { formatNumber } = useIntl()
   const formatToCurrency = (value: number) =>
@@ -61,9 +58,8 @@ export const ModifiersSetControl = ({
     const selectedModifier = modifiers?.find(
       (item) => item.id === Number(e.target.defaultValue || e.target.id),
     )
-
     const checkSelectedModifier =
-      filteredOrderModifiersSets?.find(
+      orderModifiersSets?.find(
         (modifier) => modifier?.modifierId === selectedModifier?.id,
       )?.quantity === 1
 

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -19,8 +19,8 @@ export const cartSumByOrderProducts = ({
     if (!product) return 0
     const modifiersPrice = calculateTotalModifiersPrice(
       product?.orderModifiersSets,
-    ) || 0
-  
+    )
+
     const price = isTotalSum
       ? product?.price
       : product.hasDeposit

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/payment-page/PaymentPage.tsx

@@ -166,12 +166,12 @@ export const PaymentPage = ({
               headerComponent={<SummaryTotalBlock amount={totalBooked} />}
               footer={
                 <div className='d-flex flex-column justify-content-between'>
-                  {paymentMetadata?.total ? (
+                  {paymentMetadata ? (
                     <>
-                      {/* <SummaryTotalBlock
+                      <SummaryTotalBlock
                         label={t('total')}
                         amount={paymentMetadata.total || 0}
-                      /> */}
+                      />
                       <SummaryTotalBlock
                         label={t('paidSum')}
                         amount={paymentMetadata.paid || 0}
@@ -185,7 +185,7 @@ export const PaymentPage = ({
                     </>
                   ) : (
                     <>
-                      {!!isCalculatedAmountGreaterThanOrderAmount && (
+                      {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
                           label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
@@ -195,7 +195,7 @@ export const PaymentPage = ({
                         />
                       )}
 
-                      {!!hasRemaingToPay && (
+                      {hasRemaingToPay && (
                         <SummaryTotalBlock
                           label={t('remaining')}
                           amount={
@@ -205,7 +205,7 @@ export const PaymentPage = ({
                         />
                       )}
 
-                      {!!isPaymentLinkWithRemainingToPay && (
+                      {isPaymentLinkWithRemainingToPay && (
                         <SummaryTotalBlock
                           label={t('remaningToPay')}
                           amount={Number(data?.remaining_to_pay)}

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -134,42 +134,32 @@ export const RyftPaymentForm = ({
       setIsBtnDisabled(false)
     }
   }
-  console.log(
-    formRef.current?.childNodes?.length,
-    'formRef.current?.childNodes?.length ',
-  )
-
-  // useEffect(() => {
-  //   const formBox = document.getElementById('form-disable-box')
-  //   const cardContainer = document.getElementById('ryft-pay-iframe')
-
-  //   const googleButton = document.getElementById(
-  //     'gpay-button-online-api-id',
-  //   ) as HTMLButtonElement | null
-
-  //   const appleButton = document.getElementById(
-  //     'ryft-pay-apple-pay-button',
-  //   ) as HTMLButtonElement | null
-
-  //   if (cardContainer) {
-  //     cardContainer.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //     cardContainer.setAttribute('aria-disabled', payButtonDisabled.toString())
-  //   }
-
-  //   if (googleButton) {
-  //     googleButton.disabled = payButtonDisabled
-  //     googleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //   }
 
-  //   if (appleButton) {
-  //     appleButton.disabled = payButtonDisabled
-  //     appleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //   }
-
-  //   if (formBox) {
-  //     formBox.style.display = payButtonDisabled ? 'block' : 'none'
-  //   }
-  // }, [payButtonDisabled])
+  useEffect(
+    () => {
+      if (
+        !formRef.current?.childNodes?.length ||
+        formRef.current?.childNodes?.length < 3 ||
+        !accountId.data?.account_id
+      ) {
+        return
+      }
+      injectComponentsInRyftForm({
+        t,
+        isAppUsingInIframe,
+        onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
+        additionalPaymentMethodsEnabled:
+          providerPaymentSettings?.additionalPaymentMethodsEnabled,
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      formRef.current?.childNodes?.length,
+      showApplePayButton,
+      payButtonDisabled,
+    ],
+  )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
@@ -193,29 +183,6 @@ export const RyftPaymentForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accountId.data?.account_id])
 
-
-    useEffect(
-    () => {
-      if (
-        !formRef.current?.childNodes?.length ||
-        formRef.current?.childNodes?.length < 3 ||
-        !accountId.data?.account_id
-      ) {
-        return
-      }
-      injectComponentsInRyftForm({
-        t,
-        isAppUsingInIframe,
-        onApplePayButtonClick,
-        isDisableButton: !payButtonDisabled,
-        additionalPaymentMethodsEnabled:
-          providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      })
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length, showApplePayButton, payButtonDisabled],
-  )
-
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
       <div className='mt-5 pt-5'>

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/notification/email-template/control/EmailTemplateControl.tsx

@@ -286,15 +286,15 @@ export const EmailTemplateControl = forwardRef(
           </Form.Group>
         </Row>
 
-       <Row>
+        { !waiverType && (<Row>
           <Form.Group as={Col}>
-           {!waiverType && (<Form.Check
+            <Form.Check
               {...register('isActive')}
               name='isActive'
               label={t('Design:active')}
               id='formGroupIsActive'
               custom
-            />)}
+            />
             <Form.Check
               {...register('isDefault')}
               name='isDefault'
@@ -303,7 +303,7 @@ export const EmailTemplateControl = forwardRef(
               custom
             />
           </Form.Group>
-        </Row>
+        </Row>)}
         <Row className='mb-4'>
           <Form.Group as={Col}>
             <Form.Label>{t('Design:emailBody')}</Form.Label>
@@ -375,9 +375,9 @@ export const EmailTemplateControl = forwardRef(
                   )
                 }
                 // should show dropdown only if user want to include PDF file
-                if (option.type === OPTION_TYPE.files_selector && !waiverType) {
+                if (option.type === OPTION_TYPE.files_selector) {
                    const fileSelectors =  option?.defaultValue ? JSON.parse(option.defaultValue) : ''
-                  const fileNames =  Object.values(fileSelectors) : []
+                  const fileNames = Object.values(fileSelectors)
                   const fileKeys = Object.keys(fileSelectors)
 
                   return (
@@ -436,6 +436,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/control/ProductSetControl.tsx

@@ -227,7 +227,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <SaleDeadline disabled={false} />
+        <SaleDeadline disabled={false} isProductSet />
 
         <div className='divider' />
 

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

@@ -11,7 +11,7 @@ import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetD
 import { isEqual } from 'lodash'
 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,
@@ -31,12 +31,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/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