@licklist/design 0.78.7 → 0.78.8

package/src/custom-fields/field-set/providers/CustomFieldSetsProvider.tsx

@@ -1,7 +1,7 @@
-import { FC, useState } from 'react'
+import { PropsWithChildren, useState } from 'react'
 import { CustomFieldSetsContext, ValuesType } from '../contexts'
 
-export const CustomFieldSetsProvider: FC = ({ children }) => {
+export const CustomFieldSetsProvider = ({ children }: PropsWithChildren) => {
   const [values, setValues] = useState<ValuesType>({})
 
   return (

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -86,6 +86,7 @@ export const EditRecurrentEventModal = ({
       contentClassName='rounded'
     >
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
+        {/* @ts-ignore */}
         <Modal.Header className='border-0'>
           <Modal.Title as='h6'>{title}</Modal.Title>
           <Button

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

@@ -37,6 +37,7 @@ export const EventStatisticModal = ({
       contentClassName='rounded'
       className='event-statistic-modal'
     >
+      {/* @ts-ignore */}
       <Modal.Header>
         <Modal.Title as='h6'>{title ?? t('eventStatistic')}</Modal.Title>
         <Button

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 
-export const DropdownWrapper: FC = ({ children }) => (
+export const DropdownWrapper = ({ children }: PropsWithChildren) => (
   <div className='canvas-dropdown-wrapper'>
     <div className='arrow' />
     <div className='children-container'>{children}</div>

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetForm.tsx

@@ -5,13 +5,15 @@ import { isEmpty, uniqBy } from 'lodash'
 import { useTranslation } from 'react-i18next'
 import { useIntl } from 'react-intl'
 import { Currency } from '@licklist/core/dist/Config'
-import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import {
+  MenuStep,
+  Product,
+} from '@licklist/plugins/dist/types/context/sale/menuSteps'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
-import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
 import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
-import { NumberInputHorizontal } from 'src/sales'
 import clsx from 'clsx'
 import { ProductCategory } from 'dist/product-set/types'
+import { NumberInputHorizontal } from '../../../sales'
 import { MAX_PRODUCT_NUMBER } from '../../order-process/components/CategoryProduct/constants'
 import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
 import { getOrderProductModifiersPrice } from '../../order-process/components/BookingSummary/utils'
@@ -63,20 +65,23 @@ export const ProductWithModifierSetForm = ({
   const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
 
   const valuesOrder = watch()
-  const productQuantity = valuesOrder?.product?.quantity ?? defaultProductQuantity
+  const productQuantity =
+    valuesOrder?.product?.quantity ?? defaultProductQuantity
 
   const orderModifiersSets =
     valuesOrder[`${product.id}`]?.orderProductModifiers || []
 
   const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
 
-  const orderModifierSets: OrderModifierByProduct[] = useMemo(() =>  [
+  const orderModifierSets: OrderModifierByProduct[] = useMemo(
+    () => [
       {
         productQuantity: productQuantity ?? 1,
         modifiers: filteredOrderModifiers,
       },
-    ]
-  , [filteredOrderModifiers, productQuantity])
+    ],
+    [filteredOrderModifiers, productQuantity],
+  )
 
   const onSubmit = (event) => {
     event.preventDefault()
@@ -180,7 +185,7 @@ export const ProductWithModifierSetForm = ({
                       isLoading={isSubmitting}
                     />
                   </div>
-                  <div className=' d-flex flex-column  align-items-center justify-content-center'>
+                  <div className='d-flex flex-column align-items-center justify-content-center'>
                     <div className='modifier-price pb-4 pl-5'>
                       {formatToCurrency(product.price)}
                     </div>

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -1,10 +1,10 @@
-import { useDialogContext, DialogContextProvider } from 'src/modals'
 import { Modal } from 'react-bootstrap'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
-import { TicketDescription } from 'src/iframe/event'
 import clsx from 'clsx'
 import { ProductCategory } from 'dist/product-set/types'
+import { useDialogContext, DialogContextProvider } from '../../../modals'
+import { TicketDescription } from '../../event'
 import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
 import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
 import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
@@ -48,12 +48,20 @@ 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

@@ -10,8 +10,8 @@ import { xor } from 'lodash'
 import clsx from 'clsx'
 import { Currency } from '@licklist/core/dist/Config'
 import { useIntl } from 'react-intl'
-import { MAX_PRODUCT_NUMBER } from 'src/iframe/order-process/components/CategoryProduct/constants'
-import { NumberInputHorizontal } from 'src/sales'
+import { MAX_PRODUCT_NUMBER } from '../../../order-process/components/CategoryProduct/constants'
+import { NumberInputHorizontal } from '../../../../sales'
 import { selectModifierType } from '../../utils'
 
 interface ModifiersSetControllProps {

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

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
-import { useTranslation } from 'react-i18next' // Added translation hook
+import { useTranslation } from 'react-i18next'
 import { ModifiersSetControl } from './ModifierSetControll'
 import { orderProductModifiersQuantity } from '../../utils'
 
@@ -69,25 +69,23 @@ export const ProductControl = ({
                     return true
                   },
                 }}
-                render={({ fieldState: { error } }) => {
-                  return(
-                    <>
-                      <ModifiersSetControl
-                        modifierSet={modifierSet}
-                        productId={product.id}
-                        modifiers={modifierSet.modifiers}
-                        isEditMode={!!editOrderModifier?.modifiers}
-                        orderProductModifierSets={editOrderModifier?.modifiers}
-                        isLoading={isLoading}
-                      />
-                      {error?.message && (
-                        <div className='invalid-feedback d-flex pl-4'>
-                          {error?.message}!
-                        </div>
-                      )}
-                    </>,
-                  )
-                }}
+                render={({ fieldState: { error } }) => (
+                  <>
+                    <ModifiersSetControl
+                      modifierSet={modifierSet}
+                      productId={product.id}
+                      modifiers={modifierSet.modifiers}
+                      isEditMode={!!editOrderModifier?.modifiers}
+                      orderProductModifierSets={editOrderModifier?.modifiers}
+                      isLoading={isLoading}
+                    />
+                    {error?.message && (
+                      <div className='invalid-feedback d-flex pl-4'>
+                        {error?.message}!
+                      </div>
+                    )}
+                  </>
+                )}
               />
             </div>
           )

package/src/iframe/event/event-navigation-footer/EventNavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import Button from 'react-bootstrap/Button'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 
 interface PaginationDotsProps {
   amount: number
@@ -33,13 +33,14 @@ export function EventNavigationFooter({
   // @TODO remove and adjust components that uses old interface
   // used onSubmit for old cases
   const submitButtonProps = onSubmit ? { onSubmit } : { type: 'submit' }
+  const navigate = useNavigate()
 
   const onPrevButtonClick = () => {
     if (activeElement === 1) {
       if (onPrevStep) {
         onPrevStep()
       } else {
-        RouteService.goBack()
+        navigate(-1)
       }
 
       return

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

@@ -10,10 +10,8 @@ import {
   Product,
   ProductCategory,
 } from '@licklist/plugins/dist/types/context/sale/menuSteps'
-import { Button } from 'react-bootstrap'
-import { FaTrashAlt } from 'react-icons/fa'
-import { ProductWithModifierSetModal } from 'src/iframe/ProductWithModifierModal'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { ProductWithModifierSetModal } from '../../../ProductWithModifierModal'
 import { TicketDescription } from '../../../event/ticket-description'
 import { ProductQuantityInput } from './components/ProductQuantityInput'
 import { FormOrderItem } from './components/ProductQuantityInput/ProductQuantityInput'
@@ -160,8 +158,8 @@ export const CategoryProduct = ({
           ).orderModifiersSets
             ?.filter((_, index) => index !== modifierIndex)
             .concat(value.orderModifiersSets)
-           
-            onChange({
+
+          onChange({
             ...value,
             orderModifiersSets: editedOrderModifiersSets,
             quantity: editedOrderModifiersSets.reduce(

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

@@ -1,5 +1,5 @@
 import { useRef, useMemo, useEffect, useState, useCallback } from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { SnippetLoader } from '../../../../static'
@@ -22,7 +22,7 @@ export const NavigationSteps = ({
 }: NavigationStepsProps) => {
   const { t } = useTranslation('Design')
   const location = useLocation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const containerRef = useRef<HTMLDivElement>(null)
   const containerWrapperRef = useRef<HTMLDivElement>(null)
@@ -45,7 +45,7 @@ export const NavigationSteps = ({
     pathname: string,
     queryParams?: Record<string, string>,
   ) => {
-    history.push({
+    navigate({
       pathname,
       search: new URLSearchParams(queryParams).toString(),
     })

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
@@ -15,14 +15,14 @@ export type PaymentCardProps = {
   isFreePayment?: boolean
 }
 
-export const PaymentCard: FC<PaymentCardProps> = ({
+export const PaymentCard = ({
   order,
   totalWithDiscount,
   recalculatedFee,
   discountBlock,
   paymentDetail,
   isFreePayment,
-}) => {
+}: PropsWithChildren<PaymentCardProps>) => {
   const { t } = useTranslation(['Design'])
   const { formatNumber } = useIntl()
 

package/src/iframe/order-process/components/utils/useOnWindowUnmount.ts

@@ -22,4 +22,4 @@ export const useOnWindowUnmount = ({
   }, [])
 
   return null
-}
+}

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Button, Col } from 'react-bootstrap'
 import { PaymentSessionContext } from '@licklist/plugins/dist/context/payment/PaymentSessionContext'
 import { PaymentLinkResponse } from '@licklist/plugins/dist/hooks/Api/usePaymentApi'
-import { BookingSummaryProps } from 'src/iframe/order-process/components/BookingSummary/types'
+import { BookingSummaryProps } from '../../order-process/components/BookingSummary/types'
 // eslint-disable-next-line max-len
 import { SummaryTotalBlock } from '../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock'
 import { LoaderIndicator } from '../../../static'

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useForm } from 'react-hook-form'
-
 import Button from 'react-bootstrap/Button'
-import { useHistory } from 'react-router-dom'
 import Alert from 'react-bootstrap/Alert'
 import {
   STATUS_APPROVED,
@@ -16,7 +14,6 @@ import {
   AttemptPaymentResponse,
 } from '@licklist/plugins/dist/hooks/Ryft/useRyftPayment'
 import { ProviderPaymentSettings } from '@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper'
-
 import { BlockLoader, ButtonLoader } from '../../static'
 import { injectComponentsInRyftForm } from './utils/ryft-form'
 
@@ -72,7 +69,7 @@ export const RyftPaymentForm = ({
   const showApplePayButton =
     isAppUsingInIframe &&
     providerPaymentSettings?.additionalPaymentMethodsEnabled
-  const history = useHistory()
+
   const [isValid, setIsValid] = useState(false)
   const [isBtnDisabled, setIsBtnDisabled] = useState(false)
   const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false)
@@ -214,7 +211,7 @@ export const RyftPaymentForm = ({
             <Button
               variant='primary'
               onClick={() => {
-                history.go(0)
+                window.location.reload()
               }}
             >
               {t('Ryft:refresh')}

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

@@ -1,4 +1,4 @@
-import { TFunction } from 'react-i18next'
+import { TFunction } from 'i18next'
 import { RyftPaymentFormProps } from '../RyftPaymentForm'
 
 interface InjectComponentsInRyftForm

package/src/index.ts

@@ -42,3 +42,4 @@ export * from './calendar'
 export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
+export * from './pages'

package/src/modals/dialog/Dialog.tsx

@@ -32,42 +32,41 @@ export const Dialog = ({
   }
 
   return (
-    <>
-      <Modal
-        show={isActive}
-        onHide={onDecline}
-        animation={false}
-        size='sm'
-        centered
-        className='text-center justify-content-center rounded'
-      >
-        <Modal.Header className='justify-content-center border-0'>
-          {title && <Modal.Title as='h6'>{title}</Modal.Title>}
-        </Modal.Header>
-        {content && (
-          <Modal.Body className='justify-content-center'>{content}</Modal.Body>
+    <Modal
+      show={isActive}
+      onHide={onDecline}
+      animation={false}
+      size='sm'
+      centered
+      className='text-center justify-content-center rounded'
+    >
+      {/* @ts-ignore */}
+      <Modal.Header className='justify-content-center border-0'>
+        {title && <Modal.Title as='h6'>{title}</Modal.Title>}
+      </Modal.Header>
+      {content && (
+        <Modal.Body className='justify-content-center'>{content}</Modal.Body>
+      )}
+      <Modal.Footer className='border-0 justify-content-center'>
+        {customButtons || (
+          <>
+            <Button
+              variant='secondary'
+              className='modal-buttons'
+              onClick={declineHandler}
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              variant='primary'
+              className='modal-buttons'
+              onClick={approveHandler}
+            >
+              {t('Design:confirm')}
+            </Button>
+          </>
         )}
-        <Modal.Footer className='border-0 justify-content-center'>
-          {customButtons || (
-            <>
-              <Button
-                variant='secondary'
-                className='modal-buttons'
-                onClick={declineHandler}
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                variant='primary'
-                className='modal-buttons'
-                onClick={approveHandler}
-              >
-                {t('Design:confirm')}
-              </Button>
-            </>
-          )}
-        </Modal.Footer>
-      </Modal>
-    </>
+      </Modal.Footer>
+    </Modal>
   )
 }

package/src/modals/dialog/DialogContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, FC, useState, useCallback } from 'react'
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  PropsWithChildren,
+} from 'react'
 
 interface IDialogContext {
   isShownDialog: boolean
@@ -20,7 +26,7 @@ export const DialogContext = createContext<IDialogContext>({
   onApproveDialog: () => undefined,
 })
 
-export const DialogContextProvider: FC = ({ children }) => {
+export const DialogContextProvider = ({ children }: PropsWithChildren) => {
   const [isShownDialog, setShownDialog] = useState(false)
 
   const showDialog = () => {

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -35,8 +35,6 @@ export function EmailTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal