@licklist/design 0.69.2 → 0.69.3-dev.1

package/src/product-set/card/ProductSetCard.tsx

@@ -9,15 +9,20 @@ 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
-  onCopy: () => void
+  duplicateProductSetName: string
+  onChangeDuplicateProductSetName: (value: string) => void
+  onCopy: () => Promise<boolean | undefined>
   onRemove: () => void
+  isLoading?: boolean
   className?: string
   override?: number
+  duplicateProductSetError?: string
 }
 
 export function ProductSetCard({
@@ -26,6 +31,10 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
+  onChangeDuplicateProductSetName,
+  duplicateProductSetName,
+  duplicateProductSetError,
+  isLoading,
   className = '',
   hasPermission = true,
   override = 0,
@@ -35,19 +44,23 @@ 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={() => RouteService.redirectTo(href)}
-      onKeyUp={() => RouteService.redirectTo(href)}
+      onClick={onCardClick}
     >
       <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'>
@@ -79,14 +92,33 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item action as='div'>
+                      <ListGroup.Item
+                        action
+                        as='div'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onCopy) && (
-                          <ConfirmModal>
+                          <ConfirmModal
+                            // confirm function  memoize the callback function and it leads to bugs
+                            confirmationHandler={onCopy}
+                            disabledButtons={isLoading}
+                            content={
+                              <ProductSetNameControl
+                                value={duplicateProductSetName}
+                                onChange={onChangeDuplicateProductSetName}
+                                error={duplicateProductSetError}
+                              />
+                            }
+                          >
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false)
-                                  confirm(onCopy)
+                                  onChangeDuplicateProductSetName(name)
+                                  // confirm function  memoize the callback function and it leads to bugs
+                                  confirm(() => {})
                                 }}
                                 name={t('duplicate')}
                                 className='product-set-card-menu-item-text'
@@ -95,7 +127,14 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item action className='text-danger' as='div'>
+                      <ListGroup.Item
+                        action
+                        className='text-danger'
+                        as='div'
+                        role='button'
+                        tabIndex={0}
+                        onClick={(e) => e.stopPropagation()}
+                      >
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

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

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

@@ -22,12 +22,11 @@ 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'
@@ -35,6 +34,7 @@ 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,6 +47,8 @@ const RELY_ON_PEOPLE_TYPE_TITLES = {
   [RELY_ON_PEOPLE_QUANTITY]: 'peopleQuantity',
 }
 
+const MAX_DESCRIPTION_LENGTH = 100
+
 export interface TemplateItem {
   id: string
   value: EmailTemplate | SmsTemplate
@@ -55,6 +57,8 @@ export interface TemplateItem {
 
 export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   name: string
+  description?: string
+  image?: Image
   type: ProductSetType
   termsAndConditions: string
   thankYouPageUrl: string
@@ -65,6 +69,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
+  localImageBlobURL?: string
 }
 
 export interface ProductSetControlShared {
@@ -122,6 +127,7 @@ export function ProductSetControl({
   const steps = watch('steps')
 
   const nameId = useId()
+  const descriptionId = useId()
   const termsAndConditionsId = useId()
   const relyOnPeopleTypeId = useId()
 
@@ -174,6 +180,28 @@ export function ProductSetControl({
           </Form.Control.Feedback>
         </Form.Group>
 
+        <Form.Group controlId={descriptionId}>
+          <Form.Label>{t('Design:description')}</Form.Label>
+          <Form.Control
+            {...register('description', {
+              maxLength: {
+                value: MAX_DESCRIPTION_LENGTH,
+                message: t('Validation:maxLength', {
+                  attribute: t('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}
@@ -207,27 +235,6 @@ 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')}
@@ -364,35 +371,28 @@ export function ProductSetControl({
             <Controller
               control={control}
               name='fieldSetId'
-              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>
-                  </>
-                )
-              }}
+              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>
+                </>
+              )}
             />
           </Form.Group>
 

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

@@ -0,0 +1,97 @@
+import { useFormContext } from 'react-hook-form'
+import { HookFormService, useImages } from '@licklist/plugins'
+import { IMAGE_TYPE_IMAGE } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
+import { useCallback, useEffect } from 'react'
+import { Form } from 'react-bootstrap'
+import { FileUpload } from 'src/file-upload'
+import { useTranslation } from 'react-i18next'
+import { isEqual } from 'lodash'
+import { ProductSetControlValues } from '..'
+
+export const ProductSetImageControl = () => {
+  const { t } = useTranslation('Design')
+
+  const {
+    formState: { errors },
+    setValue,
+    watch,
+    clearErrors,
+  } = useFormContext<ProductSetControlValues>()
+  const currentProductSet: ProductSetControlValues = watch()
+
+  const {
+    images,
+    handleImageRemove,
+    handleImageUploading,
+    isLoading: isImageUploading,
+    setImages,
+  } = useImages(null)
+
+  const onFilesChange = useCallback(
+    async (files: File[]) => {
+      const uploadedFiles = await handleImageUploading(files, IMAGE_TYPE_IMAGE)
+
+      if (!uploadedFiles) return
+
+      setValue('localImageBlobURL', URL.createObjectURL(files[0]) as never)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleImageUploading],
+  )
+
+  const onImageRemove = useCallback(
+    (id, path) => {
+      handleImageRemove(id, path)
+      setValue('localImageBlobURL', undefined as never)
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [handleImageRemove],
+  )
+
+  useEffect(() => {
+    if (!currentProductSet || !currentProductSet.image) return
+
+    setImages([
+      {
+        ...currentProductSet.image,
+        url:
+          currentProductSet.image.url || currentProductSet?.localImageBlobURL,
+      },
+    ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentProductSet?.image])
+
+  useEffect(() => {
+    if (isEqual(images[0], currentProductSet?.image)) return
+
+    setValue('image', (images[0] || null) as never)
+
+    if (images[0]) {
+      clearErrors('image')
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [images])
+
+  return (
+    <Form.Group controlId='name'>
+      <Form.Control
+        isInvalid={HookFormService.isInvalid('image', errors)}
+        hidden
+      />
+      <FileUpload
+        onFilesChange={onFilesChange}
+        allowedExtensions={['jpeg', 'jpg', 'png']}
+        subTitle='.jpeg    .jpg    .png'
+        enablePreview
+        onFileRemove={onImageRemove}
+        defaultFiles={images}
+        isLoading={isImageUploading}
+        withIcon
+        title={t('Design:addImage')}
+      />
+      <Form.Control.Feedback type='invalid'>
+        {HookFormService.getErrors('image', errors)}
+      </Form.Control.Feedback>
+    </Form.Group>
+  )
+}

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

@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } 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,6 +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/dist/utils/error'
 import { Dialog, useDialogContext } from '../../modals/dialog'
 import {
   ProductSetControl,
@@ -22,16 +23,21 @@ 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,
-    WithId,
+    WithIdOptional,
     ProductSetControlValues {
   steps: Step[]
   isOverrides?: boolean
@@ -84,6 +90,7 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext()
+  const [errorMessage, setErrorMessage] = useState('')
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -121,6 +128,15 @@ 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])
 
@@ -156,6 +172,12 @@ 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/ProductSetNameControl.tsx

@@ -0,0 +1,27 @@
+import { Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+
+export const ProductSetNameControl = ({
+  value,
+  onChange,
+  error,
+}: {
+  value: string
+  onChange: (value: string) => void
+  error?: string
+}) => {
+  const { t } = useTranslation(['Design'])
+  return (
+    <Form.Group>
+      <Form.Label>{t('Design:ProductSetName')}*</Form.Label>
+      <Form.Control
+        value={value}
+        maxLength={255}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t('Design:placeholderProductSetName')}
+        isInvalid={Boolean(error)}
+      />
+      <Form.Control.Feedback type='invalid'>{error}</Form.Control.Feedback>
+    </Form.Group>
+  )
+}

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/form/index.ts

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

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}