@licklist/design 0.78.3 → 0.78.4-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.3",
+  "version": "0.78.4-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,10 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.35.2",
+    "@licklist/core": "0.34.3-dev.0",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.10",
+    "@licklist/plugins": "0.36.1-dev.0",
+    "clsx": "2.1.1",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +62,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.35.2",
+    "@licklist/core": "0.34.3-dev.0",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.10",
+    "@licklist/plugins": "0.36.1-dev.0",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -94,7 +95,6 @@
     "@wojtekmaj/react-daterange-picker": "4.1.0",
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
-    "clsx": "2.1.1",
     "date-fns": "2.29.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
@@ -206,8 +206,10 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  }
+  },
+  "stableVersion": "0.71.4-dev.1"
 }

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/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/EditEventForm/EditEventForm.tsx

@@ -7,7 +7,7 @@ import {
   Image,
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { useId } from '@react-aria/utils'
-import { Accordion, Button, Form, Modal } from 'react-bootstrap'
+import { Accordion, Badge, Button, Form, Modal } from 'react-bootstrap'
 import { isEqual } from 'lodash'
 import { FormProvider, useForm, Controller } from 'react-hook-form'
 import { DateTime } from 'luxon'
@@ -50,6 +50,7 @@ export interface EditEventFormValues extends IntervalInputValues {
   saleDeadline: number | null
   integrationUrl: string | null
   recurrenceEndAt?: string
+  duplicatedFromId?: number | null
   editedProductSet?: ProductSetFormValues
 }
 
@@ -71,6 +72,7 @@ export interface EditEventFormProps extends HasPermissionProp {
   disabledRecurrent?: boolean
   isCopyCreate?: boolean
   isBooked?: boolean
+  duplicatedInfo?: string | null
 }
 
 const eventImageTypes = {
@@ -83,6 +85,7 @@ export const EditEventForm = ({
   categories,
   title,
   hasPermission = true,
+  duplicatedInfo,
   defaultEventValues,
   serverErrors,
   onSaveEvent,
@@ -218,9 +221,21 @@ export const EditEventForm = ({
         onApprove={onApproveDialog}
         onDecline={onDeclineDialog}
       />
-      <h5 className='edit-event-modal-title highlited-primary-title'>
-        {title}
-      </h5>
+      {duplicatedInfo ? (
+        <div className='d-flex justify-content-between'>
+          <h5 className='edit-event-modal-title highlited-primary-title'>
+            {title}
+          </h5>
+          <Badge className='duplicate-badge' variant='success'>
+            {duplicatedInfo}
+          </Badge>
+        </div>
+      ) : (
+        <h5 className='edit-event-modal-title highlited-primary-title'>
+          {title}
+        </h5>
+      )}
+
       <FormProvider {...form}>
         <Modal.Body
           as='form'

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

@@ -12,6 +12,7 @@ import { useTranslation } from 'react-i18next'
 import * as Config from '@licklist/core/dist/Config'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { EventMetadata } from '@licklist/core/dist/DataMapper/Provider/EventMetadatMapper'
 import {
   FaEye,
   FaExternalLinkAlt,
@@ -21,6 +22,7 @@ import {
   FaQrcode,
 } from 'react-icons/fa'
 import { Sale } from '../../types/bookings'
+import { TipTapEditor } from '../../tiptap-editor/TipTapEditor'
 import {
   EVENT_DESCRIPTION_SIZE,
   formatContent,
@@ -40,6 +42,7 @@ export interface EventCardProps extends HasPermissionProp {
   onRemove: () => void
   onOpenQrCode: () => void
   eventStatistic?: EventStatistic | null
+  eventMetadata?: EventMetadata | null
   onStatistic: () => void
   titleId?: string
   descriptionId?: string
@@ -56,6 +59,7 @@ export function EventCard({
   onPreview,
   onEdit,
   onCopy,
+  eventMetadata,
   onRemove,
   onOpenQrCode,
   hasPermission = true,
@@ -69,6 +73,15 @@ export function EventCard({
   const { t } = useTranslation('Design')
   const { formatNumber, formatDate } = useIntl()
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date)
+
+  const duplicatedInfo =
+    eventMetadata?.editorName && eventMetadata?.duplicatedFromId
+      ? t('Design:duplicatedInfo', {
+          ID: eventMetadata?.duplicatedFromId,
+          name: eventMetadata?.editorName,
+        })
+      : null
+      
   const memoedContent = useMemo(
     () => formatContent(description, EVENT_DESCRIPTION_SIZE),
     [description],
@@ -106,6 +119,13 @@ export function EventCard({
           ) : (
             name
           )}
+          {duplicatedInfo &&    <div className='mt-2 ml-2'>
+              <div className='event-card-sale'>
+                <span className='event-card-sale-name text-success'>
+                  {duplicatedInfo}
+                </span>
+              </div>
+          </div>}
         </Card.Title>
         <div className='flex-grow-1'>
           <div className='mt-2 ml-2'>

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/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -48,12 +48,12 @@ export const ProductWithModifierSetModal = ({
           </button>
         </div>
         <div className='right-block' id='select-event-container'>
-          <div className={clsx('manual-booking-container', !product?.images?.length && 'tw-mt-8')}>
+          <div className={clsx('manual-booking-container', !product.images.length && 'tw-mt-8')}>
             <div className='manual-booking-header'>
               <TicketDescription
                 title={product.name}
                 description={product.description}
-                className={clsx('iframe-event__product-description', !product?.images?.length && 'mt-6')}
+                className={clsx('iframe-event__product-description', !product.images.length && 'mt-6')}
                 classNameProductModal='d-block'
                 images={product.images}
                 isRequired={product.isRequired}

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
 
@@ -129,11 +125,9 @@ export const ModifiersSetControl = ({
     )
   }, [isEditMode])
 
-  const radioButtonDefaultModifier = currentOrderModifiersSets
-    .find((modifier) =>
-      modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId),
-    )
-    ?.modifierId.toString()
+  const radioButtonDefaultModifier = currentOrderModifiersSets.find((modifier) => 
+    modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId)
+)?.modifierId.toString();
 
   return (
     <>
@@ -173,9 +167,7 @@ export const ModifiersSetControl = ({
                             inline
                             id={modifier.id.toString()}
                             defaultChecked={!!selectedOrderModifierId}
-                            defaultValue={
-                              selectedOrderModifierId || modifier.id.toString()
-                            }
+                            defaultValue={selectedOrderModifierId || modifier.id.toString()}
                             checked={field.value === modifier.id.toString()}
                             onChange={onChange}
                             type='radio'

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { calculateTotalModifiersPrice } from '../../utils'
 import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
 
 

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/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

@@ -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/ProductSetForm.tsx

@@ -10,7 +10,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,
@@ -30,12 +30,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

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -221,6 +221,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.minSubItems` as const,
                         errors,
@@ -293,6 +294,7 @@ export function ProductCategoryControl({
                       name={name}
                       value={value === null ? '' : value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.maxSubItems` as const,
                         errors,
@@ -353,6 +355,7 @@ export function ProductCategoryControl({
                       min={0}
                       step={1}
                       type='number'
+                      onWheel={(event) => event.currentTarget.blur()}
                       disabled={isOverride}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.overallQuantity`,
@@ -543,6 +546,7 @@ export function ProductCategoryControl({
                       step={1}
                       value={value}
                       onChange={onChange}
+                      onWheel={(event) => event.currentTarget.blur()}
                       isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
                         `${fieldNamePrefix}.remainderExpireAfter` as const,
                         errors,

package/src/recurrence-input/RecurrenceEndInput.tsx

@@ -109,6 +109,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/RecurrenceEndInput.tsx

@@ -91,6 +91,7 @@ function RecurrenceEndInput({
                 type='number'
                 min={1}
                 max={500}
+                onWheel={(event) => event.currentTarget.blur()}
                 disabled={disabled || !count || count === 500}
                 aria-label='Occurrence count'
                 value={count ?? defaultOccurrences[frequency]}

package/src/recurring-date-picker-input/utils.ts

@@ -144,7 +144,7 @@ export const useWorkHoursValidation = (
     const res: Interval[] = []
 
     const startTime = fromIso(workhour.start, timeZone)
-    const endTime = fromIso(workhour.end, timeZone)
+    const endTime = fromIso(workhour.end, timeZone).plus({ minute: 1 })
 
     if (endTime > startTime) {
       res.push(Interval.fromDateTimes(startTime, endTime))
@@ -194,7 +194,10 @@ export const useWorkHoursValidation = (
         .filter((interval) => !interval.contains(time))
 
       const attribute = notFittingIntervals
-        .map((interval) => interval.toFormat('HH:mm'))
+        .map(
+          (interval) =>
+            `${interval.start.toFormat('HH:mm')} - ${interval.end.minus({ minutes: 1 }).toFormat('HH:mm')}`,
+        )
         .join(', ')
 
       if (notFittingIntervalsByDay.length !== 0) {

package/src/resource/form/components/CapacityControl.tsx

@@ -27,6 +27,7 @@ export const CapacityControl = ({ isLoading }: CapacityControlProps) => {
           required: true,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:capacity')}
         isInvalid={Boolean(errors.capacity)}
         disabled={isLoading}

package/src/resource/form/components/SortControl.tsx

@@ -27,6 +27,7 @@ export const SortControl = ({ isLoading }: SortControlProps) => {
           required: false,
           min: 1,
         })}
+        onWheel={(event) => event.currentTarget.blur()}
         placeholder={t('Design:ordering')}
         isInvalid={Boolean(errors.sort)}
         disabled={isLoading}