@licklist/design 0.69.1-dev.4 → 0.69.2

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

@@ -7,7 +7,6 @@ interface InjectComponentsInRyftForm
     'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
   t: TFunction<string[]>
-  isDisableButton?: boolean
   additionalPaymentMethodsEnabled?: boolean
 }
 
@@ -15,19 +14,16 @@ export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
   isAppUsingInIframe,
-  isDisableButton,
   onApplePayButtonClick,
 }: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById('ryft-pay-iframe')
+
   if (!cardContainer) {
     return
   }
   // Removing of the old title container
   document.getElementById('card-title-container')?.remove()
 
-  cardContainer.style.opacity = isDisableButton ? '0.6' : '1'
-  cardContainer.ariaDisabled = isDisableButton?.toString()
-
   const cardTitle = document.createElement('div')
   const cardText = document.createElement('div')
   const cardTitleContainer = document.createElement('div')
@@ -39,6 +35,7 @@ export const injectComponentsInRyftForm = ({
   cardContainer?.before(cardTitleContainer)
 
   const payGrid = document.getElementById('ryft-pay-grid')
+
   if (!payGrid || !additionalPaymentMethodsEnabled) {
     return
   }
@@ -61,27 +58,6 @@ 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");
-  if (payIframe) {
-    const formBox = document.getElementById('form-disable-box')
-    if (formBox) {
-      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
-    if (googleButton) {
-      googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
-    }
-    if (appleButton) {
-      appleButton.disabled = isDisableButton
-      appleButton.style.opacity = isDisableButton ? '1' : '0.6'
-    }
-  }
-
   if (isAppUsingInIframe) {
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'

package/src/layout/DropDown.tsx

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

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,9 +20,6 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode
-  // confirm function  memoize the callback function. It's an alternative function
-  confirmationHandler?: () => Promise<boolean | undefined>
-  disabledButtons?: boolean
   title?: string
   content?: string | ReactNode
   onClose?: () => void
@@ -40,9 +37,7 @@ export function ConfirmModal({
   type = 'default',
   children,
   onClose,
-  confirmationHandler,
   title,
-  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -57,16 +52,10 @@ export function ConfirmModal({
     setIsOpen(() => true)
   }
 
-  const handleConfirmation = async (e) => {
+  const handleConfirmation = (e) => {
     e.stopPropagation()
-    if (!actionRef.current && !confirmationHandler) return
-    if (confirmationHandler) {
-      const res = await confirmationHandler()
-      if (res) {
-        setIsOpen(() => false)
-      }
-      return
-    }
+    if (!actionRef.current) return
+
     actionRef.current()
     setIsOpen(() => false)
   }
@@ -99,7 +88,6 @@ export function ConfirmModal({
           <Button
             variant='danger'
             className='btn-sm rounded'
-            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -117,14 +105,12 @@ export function ConfirmModal({
                   variant='outline'
                   className='cancel-button'
                   onClick={handleClose}
-                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t('cancel')}
                 </Button>
                 <Button
                   variant='danger'
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -135,7 +121,6 @@ export function ConfirmModal({
               <>
                 <Button
                   variant='danger'
-                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -143,7 +128,6 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant='success'
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

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

@@ -434,7 +434,6 @@ 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/card/ProductSetCard.tsx

@@ -9,20 +9,15 @@ import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaEllipsisH, FaEye, FaTrashAlt } from 'react-icons/fa'
 import { ConfirmModal } from '../../modals'
 import { MenuButton } from '../../table/MenuButton'
-import { ProductSetNameControl } from '../form/ProductSetNameControl'
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string
   rrule?: string
   href: string
-  duplicateProductSetName: string
-  onChangeDuplicateProductSetName: (value: string) => void
-  onCopy: () => Promise<boolean | undefined>
+  onCopy: () => void
   onRemove: () => void
-  isLoading?: boolean
   className?: string
   override?: number
-  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -31,10 +26,6 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
-  onChangeDuplicateProductSetName,
-  duplicateProductSetName,
-  duplicateProductSetError,
-  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -44,23 +35,19 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false)
 
-  const onCardClick = () => {
-    RouteService.redirectTo(href)
-  }
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role='button'
       tabIndex={0}
       className='border-0 product-set-card-wrapper w-100 pb-0'
-      onClick={onCardClick}
+      onClick={() => RouteService.redirectTo(href)}
+      onKeyUp={() => RouteService.redirectTo(href)}
     >
       <div className={productSetCardClasses}>
         <div className='product-set-card-link'>
           <div className='d-flex flex-column'>
             <div>
-              {name}
-              {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className='h6 bold ml-1'>
@@ -92,33 +79,14 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item
-                        action
-                        as='div'
-                        role='button'
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action as='div'>
                         {Boolean(onCopy) && (
-                          <ConfirmModal
-                            // confirm function  memoize the callback function and it leads to bugs
-                            confirmationHandler={onCopy}
-                            disabledButtons={isLoading}
-                            content={
-                              <ProductSetNameControl
-                                value={duplicateProductSetName}
-                                onChange={onChangeDuplicateProductSetName}
-                                error={duplicateProductSetError}
-                              />
-                            }
-                          >
+                          <ConfirmModal>
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  onChangeDuplicateProductSetName(name)
-                                  // confirm function  memoize the callback function and it leads to bugs
-                                  confirm(() => {})
+                                  confirm(onCopy)
                                 }}
                                 name={t('duplicate')}
                                 className='product-set-card-menu-item-text'
@@ -127,14 +95,7 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item
-                        action
-                        className='text-danger'
-                        as='div'
-                        role='button'
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action className='text-danger' as='div'>
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

package/src/product-set/control/DateInput.tsx

@@ -247,8 +247,7 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes
-                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
               }
             />
           ))}

package/src/product-set/control/ProductSetControl.tsx

@@ -22,11 +22,12 @@ import HookFormService from '@licklist/plugins/dist/services/Form/HookFormServic
 import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/urlRule'
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
 import { checkIfZoneCategory } from '@licklist/plugins'
-import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { WarningMessage } from '../../static'
 import { SelectItem } from '../../types/generic/SelectItem'
 import {
   DateAndRecurrenceInput,
+  // TODO: Show Date Component, when reccurent date bugs are fixed
+  // DateAndRecurrenceInput,
   DateAndRecurrenceInputValues,
 } from './DateAndRecurrenceInput'
 import TutorialGifCard from './TutorialGifCard'
@@ -34,7 +35,6 @@ import { Step } from '../types'
 import { StepsControl } from '../form/StepsControl'
 import { Typeahead } from '../../typeahead'
 import { DateInput } from './DateInput'
-import { ProductSetImageControl } from './ProductSetImageControl'
 
 const OPERATIONAL_COST_TITLES = {
   [OPERATIONAL_COST_PROVIDER]: 'operationalCostProvider',
@@ -47,8 +47,6 @@ const RELY_ON_PEOPLE_TYPE_TITLES = {
   [RELY_ON_PEOPLE_QUANTITY]: 'peopleQuantity',
 }
 
-const MAX_DESCRIPTION_LENGTH = 500
-
 export interface TemplateItem {
   id: string
   value: EmailTemplate | SmsTemplate
@@ -57,8 +55,6 @@ export interface TemplateItem {
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string
-  description?: string
-  image?: Image
   type: ProductSetType
   termsAndConditions: string
   thankYouPageUrl: string
@@ -69,7 +65,6 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
-  localImageBlobURL?: string
 }
 
 export interface ProductSetControlShared {
@@ -127,7 +122,6 @@ export function ProductSetControl({
   const steps = watch('steps')
 
   const nameId = useId()
-  const descriptionId = useId()
   const termsAndConditionsId = useId()
   const relyOnPeopleTypeId = useId()
 
@@ -180,22 +174,6 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
-        <Form.Group controlId={descriptionId}>
-          <Form.Label>{t('Design:description')}</Form.Label>
-          <Form.Control
-            {...register('description', {
-              maxLength: MAX_DESCRIPTION_LENGTH,
-            })}
-            as='textarea'
-            isInvalid={Boolean(errors.description)}
-          />
-          <Form.Control.Feedback type='invalid'>
-            {errors.description?.message}
-          </Form.Control.Feedback>
-        </Form.Group>
-
-        <ProductSetImageControl />
-
         {showDateSelector ? (
           <DateInput
             workHours={isZoneAdded ? workHours : undefined}
@@ -229,6 +207,27 @@ export function ProductSetControl({
       </Col>
       <Col md={6} sm={12}>
         <div className='second-column'>
+          {/* <Controller
+              control={control}
+              name="type"
+              render={({ field }) => (
+                <Form.Group className="d-flex flex-column flex-grow-1 align-items-start">
+                  <Form.Label>{t("Design:checkoutType")}</Form.Label>
+                  <Switch
+                    name={field.name}
+                    options={PRODUCT_SET_TYPES.map((type) => ({
+                      key: type,
+                      id: type,
+                      value: t(type),
+                    }))}
+                    value={field.value}
+                    onChange={field.onChange}
+                    disabled={isLoading}
+                  />
+                </Form.Group>
+              )}
+            /> */}
+
           <Form.Group>
             <Form.Label className='mb-0'>
               {t('Design:operationalCost')}
@@ -365,28 +364,35 @@ export function ProductSetControl({
             <Controller
               control={control}
               name='fieldSetId'
-              render={({ field }) => (
-                <>
-                  <Form.Label>{t('Design:customFields')}</Form.Label>
-                  <Form.Control
-                    onChange={field.onChange}
-                    value={Number(field.value)}
-                    as='select'
-                    disabled={isOverrides}
-                    isInvalid={HookFormService.isInvalid('fieldSetId', errors)}
-                  >
-                    <option value=''>{t('Design:choose')}</option>
-                    {fieldSets?.map((fieldSet) => (
-                      <option value={fieldSet.id} key={fieldSet.id}>
-                        {fieldSet.name}
-                      </option>
-                    ))}
-                  </Form.Control>
-                  <Form.Control.Feedback type='invalid'>
-                    {HookFormService.getErrors('fieldSetId', errors)}
-                  </Form.Control.Feedback>
-                </>
-              )}
+              render={({ field }) => {
+                const fieldValue = Number(field.value)
+
+                return (
+                  <>
+                    <Form.Label>{t('Design:customFields')}</Form.Label>
+                    <Form.Control
+                      onChange={field.onChange}
+                      value={fieldValue}
+                      as='select'
+                      disabled={isOverrides}
+                      isInvalid={HookFormService.isInvalid(
+                        'fieldSetId',
+                        errors,
+                      )}
+                    >
+                      <option value=''>{t('Design:choose')}</option>
+                      {fieldSets?.map((fieldSet) => (
+                        <option value={fieldSet.id} key={fieldSet.id}>
+                          {fieldSet.name}
+                        </option>
+                      ))}
+                    </Form.Control>
+                    <Form.Control.Feedback type='invalid'>
+                      {HookFormService.getErrors('fieldSetId', errors)}
+                    </Form.Control.Feedback>
+                  </>
+                )
+              }}
             />
           </Form.Group>
 

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

@@ -8,7 +8,6 @@ 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 {
@@ -26,11 +25,7 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from './SelectCategoryModal'
+import { SelectCategoryModal } from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -38,29 +33,6 @@ 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
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type]
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -302,12 +272,6 @@ 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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
 import { Button, Form, Col, Row } from 'react-bootstrap'
 import { FormProvider, useForm } from 'react-hook-form'
@@ -12,7 +12,6 @@ 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/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -23,21 +22,16 @@ import { Step } from '../types'
 import { ProductSetContextProvider, ProductSetLoadingContext } from './context'
 import { SelectItem } from '../../types/generic/SelectItem'
 import { checkAvailableTimesErrors, getFilteredTemplates } from '../utils'
-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,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean
@@ -90,7 +84,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext()
-  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -128,15 +121,6 @@ export function ProductSetForm({
     if (!serverErrors) {
       return
     }
-    if (!Array.isArray(serverErrors)) {
-      setErrorMessage(transformErrorToMessage(serverErrors))
-      return
-    }
-
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0])
-    }
-
     FormErrorService.handleServerErrors(serverErrors, setError)
   }, [serverErrors, setError])
 
@@ -172,12 +156,6 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
-      <ErrorModal
-        message={errorMessage}
-        isOpen={!!errorMessage}
-        onClose={() => setErrorMessage('')}
-      />
-
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>

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

@@ -1,4 +1,7 @@
-import { useContext, useState } from 'react'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { 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'
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const
 
-export type CategoryConfig = { label: string; icon: ReactElement }
+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,6 +70,9 @@ 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,6 +46,9 @@ 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/form/index.ts

@@ -1,2 +1 @@
 export * from './ProductSetForm'
-export * from './ProductSetNameControl'

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

@@ -34,6 +34,7 @@ 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 { useContext } from 'react'
+import React, { 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,7 +86,6 @@ 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}
@@ -130,7 +129,6 @@ 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}