@licklist/design 0.78.5-dev.25 → 0.78.5-dev.27

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,6 +153,7 @@ 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) => {
@@ -182,7 +183,7 @@ export const useFileUpload = ({
       if (isExtensionValid) {
         uploadFile(file)
       } else {
-        showAlert({ type: 'error',
+        notification.danger({
           title: t('fileNotUploaded', { fileName: file.name }),
           message: t('invalidExtension', { extension: fileExtension }),
         })

package/src/help/popover/HelpPopover.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx'
 import { FaQuestion } from 'react-icons/fa'
 
 export type HelpPopoverProps = {
-  children?: React.ReactElement | React.ReactElement[]
+  children?: ReactNode
   title?: string
   variant?: ButtonVariant
   icon?: ReactNode

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

@@ -35,6 +35,9 @@ 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) =>
@@ -58,8 +61,9 @@ export const ModifiersSetControl = ({
     const selectedModifier = modifiers?.find(
       (item) => item.id === Number(e.target.defaultValue || e.target.id),
     )
+
     const checkSelectedModifier =
-      orderModifiersSets?.find(
+      filteredOrderModifiersSets?.find(
         (modifier) => modifier?.modifierId === selectedModifier?.id,
       )?.quantity === 1
 
@@ -316,7 +320,7 @@ export const ModifiersSetControl = ({
                             `${productId}.${modifierSet.id}.modifiers[${index}].quantity`,
                           )
                           onChangeModifiers(
-                            { target: { id: modifier.id.toString() } },
+                            { target: { id: modifier.id.toString() } } as unknown as ChangeEvent<HTMLInputElement>,
                             'selector',
                             quantity,
                           )

package/src/iframe/custom-fields/components/CustomDateField.stories.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { useForm, FormProvider } from 'react-hook-form'
 import { Form } from 'react-bootstrap'
 import { Meta, Story } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { FormValues } from '@licklist/plugins/dist/types/services/Form/hook-form-service'
 
 import { CustomDateField } from './CustomDateField'

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { IframeEventCard } from './IframeEventCard'
 import { IframeEventCardSkeleton } from './IframeEventCardSkeleton'
 

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean, text } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 
 import { IframeEventCard } from './IframeEventCard'
 

package/src/iframe/event/event-description/EventDescription.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { EventDescription } from './EventDescription'
 

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { IframeEventVenueMap } from './IframeEventVenueMap'
 import { Page, PageBody, PageHeader } from '../../page'
 import { BookingSummaryFooter } from '../../order-process/components/BookingSummaryFooter'

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -90,7 +90,7 @@ const Description = ({
   isRequired,
   description,
   isModal
-}: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
+}: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description' | 'isModal'>) => (
   <div className={clsx('description-content', isModal && 'ml-4 mt-2' )}>
     <div className='d-flex flex-column'>
       <div className='product-title'>

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

@@ -3,7 +3,6 @@ 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/BookingSummary/utils/index.ts

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

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

@@ -23,7 +23,6 @@ interface CategoryProductProps {
   canExpandDescription?: boolean
   productsWithErrors?: QuantityCheckProductInfo[]
   soldOutProducts?: QuantityCheckProductInfo[]
-  disabled?: boolean
 }
 
 export const CategoryProduct = ({
@@ -32,7 +31,6 @@ export const CategoryProduct = ({
   canExpandDescription = true,
   productsWithErrors,
   soldOutProducts,
-  disabled =false
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl()
   const { t } = useTranslation(['Design', 'Validation'])
@@ -198,7 +196,6 @@ export const CategoryProduct = ({
                 onChange={onChange}
                 productInfo={productInfo}
                 refCallback={ref}
-                disabled={disabled}
                 clearErrors={clearErrors}
                 product={{
                   ...product,

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

@@ -89,7 +89,6 @@ 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}
@@ -102,14 +101,6 @@ 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/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -34,7 +34,6 @@ interface ProductQuantityInputProps {
   refCallback: RefCallBack
   invalid: boolean
   productInfo: FormOrderItem
-  disabled?: boolean
 }
 
 export const ProductQuantityInput = ({
@@ -45,7 +44,6 @@ export const ProductQuantityInput = ({
   refCallback,
   productInfo,
   invalid,
-  disabled = false
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation('Design')
   const [open, handleOpenModal] = useState(false)
@@ -99,7 +97,7 @@ export const ProductQuantityInput = ({
       <>
         <Button
           ref={refCallback}
-          disabled={product.isSoldOut || disabled}
+          disabled={product.isSoldOut}
           className={clsx(
             `iframe-event__${
               productInfo?.quantity ? 'unselect-product' : 'select-product'

package/src/iframe/order-process/components/ErrorModal/ErrorModal.tsx

@@ -35,7 +35,12 @@ export const ErrorModal = ({
       centered
       contentClassName='rounded'
     >
-      <ModalHeader className='align-items-center border-0'>
+      <ModalHeader 
+        className='align-items-center border-0'
+        placeholder={undefined}
+        onPointerEnterCapture={undefined}
+        onPointerLeaveCapture={undefined}
+      >
         <ModalTitle as='h6'>{t('formHasErrors')}</ModalTitle>
 
         <Button

package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { NavigationSteps } from './NavigationSteps'
 
 export default {

package/src/iframe/order-process/components/PaymentCard/PaymentCard.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { number } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { PaymentCard } from './PaymentCard'
 
 export default {

package/src/iframe/page/Page.stories.tsx

@@ -1,6 +1,6 @@
 import { Button } from 'react-bootstrap'
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { Page } from './Page'
 import { PageHeader } from './components/PageHeader'
 import { PageBody } from './components/PageBody'

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/react'
-import { boolean } from '@storybook/addon-knobs'
+// TODO: Replace knobs with controls
 import { ORDER_FEE_CHARGE_TYPE_CLIENT } from '@licklist/core/dist/DataMapper/Order/OrderDataMapper'
 import { OrderItemsTable } from './OrderItemsTable'