@licklist/design 0.72.3 → 0.72.5

package/src/auth/ResetPassword/ResetPasswordFormComponent.tsx

@@ -97,6 +97,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:signinPromo'>
             Already a user?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/login' className={[isLoading && 'disabled'].join(' ')}>
               Sign in
             </Link>
@@ -106,6 +108,8 @@ function ResetPasswordFormComponent(props: ResetPasswordFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:loginPromo'>
             Don&apos;t have an account?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link
               to='/register'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Router.tsx

@@ -29,6 +29,8 @@ function Router(props: RouterProps) {
     }
   }, [])
 
+  // TODO fix issue react router types
+  // @ts-expect-error
   return <BrowserRouter history={history}>{children}</BrowserRouter>
 }
 

package/src/calendar/Calendar.stories.tsx

@@ -28,7 +28,7 @@ Default.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
+  calendarDates: getMonthCalendarDates({ initialDate: now }),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],
@@ -50,7 +50,7 @@ Loading.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates(now),
+  calendarDates: getMonthCalendarDates({ initialDate: now }),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],

package/src/calendar/utils/index.ts

@@ -3,7 +3,7 @@ import { DateTime, Interval } from 'luxon'
 
 type Builder = (args: {
   initialDate?: DateTime
-  timeZone: TimeZone['name']
+  timeZone?: TimeZone['name']
 }) => DateTime[]
 
 export const getMonthCalendarDates: Builder = ({

package/src/events/edit-event-modal/component/SaleDeadline/SaleDeadline.tsx

@@ -28,11 +28,13 @@ export const DEADLINE_NAME = [
 
 export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
 
-type SaleDeadlineType = {
-  saleDeadline: null | number
-} | {
-  [key: string] : null | number
-}
+type SaleDeadlineType =
+  | {
+      saleDeadline: null | number
+    }
+  | {
+      [key: string]: null | number
+    }
 
 export const SaleDeadline = ({
   disabled = false,
@@ -52,8 +54,8 @@ export const SaleDeadline = ({
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-  
-  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME) 
+
+  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME)
 
   useEffect(() => {
     if (onlyBefore) return

package/src/events/event-card/utils.ts

@@ -2,24 +2,25 @@ import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 
-export const MIN_EVENT_DESCRIPTION_SIZE = 150;
-export const EVENT_DESCRIPTION_SIZE = 350;
-export const EMOJI_REGEX = /<span data-emoji-replacer=""><img[^>]*alt="([^"]+)"[^>]*><\/span>/g;
+export const MIN_EVENT_DESCRIPTION_SIZE = 150
+export const EVENT_DESCRIPTION_SIZE = 350
+export const EMOJI_REGEX =
+  /<span data-emoji-replacer=""><img[^>]*alt="([^"]+)"[^>]*><\/span>/g
 
 export const formatContent = (content, maxLength = EVENT_DESCRIPTION_SIZE) => {
-  if (!content) return '';
+  if (!content) return ''
 
-  const replacedContent = replaceEmojiImagesWithText(content);
+  const replacedContent = replaceEmojiImagesWithText(content)
 
   if (replacedContent.length <= maxLength) {
-    return replacedContent;
+    return replacedContent
   }
 
-  return replacedContent.slice(0, maxLength).concat('...');
-};
+  return replacedContent.slice(0, maxLength).concat('...')
+}
 
 function replaceEmojiImagesWithText(text) {
-  return text.replace(EMOJI_REGEX, (_, emojiText) => emojiText);
+  return text.replace(EMOJI_REGEX, (_, emojiText) => emojiText)
 }
 
 /**

package/src/events/event-statistic-modal/utils/index.ts

@@ -100,7 +100,8 @@ export const convertEventStatisticToTableData = (
 
           const maxTotalQuantity = maxBy(overrides, 'id')?.totalQuantity
 
-          const totalQuantity = maxTotalQuantity || productSummary?.totalQuantity
+          const totalQuantity =
+            maxTotalQuantity || productSummary?.totalQuantity
 
           summaryMap.set(`${categoryName}.${productSummary.name}`, {
             name: productSummary.name,

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

@@ -22,24 +22,23 @@ export const SummaryTotal = ({
 
   const cartSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({orderProducts}) + transactionFee
+    : cartSumByOrderProducts({ orderProducts }) + transactionFee
 
-
-    const totalSum = isFreePayment
+  const totalSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({orderProducts, isTotalSum: true}) +
-      transactionFee;
-      
-    const hasRemaingToPay = totalSum > cartSum;
+    : cartSumByOrderProducts({ orderProducts, isTotalSum: true }) +
+      transactionFee
+
+  const hasRemaingToPay = totalSum > cartSum
 
   if (!orderProducts.length) {
     return null
   }
 
   return (
-    <div className="d-flex flex-column justify-content-between">
+    <div className='d-flex flex-column justify-content-between'>
       <SummaryTotalBlock
-        label={t(hasRemaingToPay ? "payNow" : "total")}
+        label={t(hasRemaingToPay ? 'payNow' : 'total')}
         amount={cartSum}
       />
       {!!totalWithDiscount && !isFreePayment && (
@@ -50,9 +49,12 @@ export const SummaryTotal = ({
       )}
       {hasRemaingToPay && (
         <>
-        <SummaryTotalBlock label={t("remaining")} amount={totalSum - cartSum} />
+          <SummaryTotalBlock
+            label={t('remaining')}
+            amount={totalSum - cartSum}
+          />
 
-        <SummaryTotalBlock label={t("total")} amount={totalSum} />
+          <SummaryTotalBlock label={t('total')} amount={totalSum} />
         </>
       )}
     </div>

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -9,8 +9,8 @@ export const cartSumByOrderProducts = ({
   orderProducts,
   isTotalSum,
 }: {
-  orderProducts?: OrderItem[];
-  isTotalSum?: boolean;
+  orderProducts?: OrderItem[]
+  isTotalSum?: boolean
 }) => {
   if (!orderProducts || !orderProducts.length) {
     return 0

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -69,8 +69,7 @@ export const useResizePageBody = () => {
           rightBlockHeight -
           CALENDAR_WRAPPER_HEIGHT,
       }
-  
-    }  
+    }
     return {
       maxHeight:
         height -

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -59,20 +59,19 @@ export const PaymentStatusPage = ({
 
   if (isLoading) return <LoaderIndicator isLoaded={false} />
 
-
-const orderCartAmountByFormValues = cartSumByOrderProducts({
-  orderProducts:
-    bookingSummaryProps?.formValues &&
-    Object.values(bookingSummaryProps?.formValues),
-});
-const orderTotalAmountByFormValues = cartSumByOrderProducts({
-  orderProducts:
-    bookingSummaryProps?.formValues &&
-    Object.values(bookingSummaryProps?.formValues),
-  isTotalSum: true,
-});
-const hasRemaingToPay =
-  orderTotalAmountByFormValues > orderCartAmountByFormValues;
+  const orderCartAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+  })
+  const orderTotalAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+    isTotalSum: true,
+  })
+  const hasRemaingToPay =
+    orderTotalAmountByFormValues > orderCartAmountByFormValues
 
   // User can fill promocode only in iframe appcliation.
   // It didn't possible via payment link. This check will
@@ -81,9 +80,9 @@ const hasRemaingToPay =
   // For payment status page booking summary props can be empty
   // so we should also check for them
   const isCalculatedAmountGreaterThanOrderAmount =
-  !hasRemaingToPay &&
-  bookingSummaryProps &&
-  orderCartAmountByFormValues > totalAmount;
+    !hasRemaingToPay &&
+    bookingSummaryProps &&
+    orderCartAmountByFormValues > totalAmount
 
   return (
     <Page
@@ -140,7 +139,7 @@ const hasRemaingToPay =
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                        label={t(hasRemaingToPay ? "payNow" : "total")}
+                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
                             orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
@@ -159,9 +158,9 @@ const hasRemaingToPay =
                           (bookingSummaryProps?.transactionFee || 0)
                         }
                       />
-                          {hasRemaingToPay && (
+                      {hasRemaingToPay && (
                         <SummaryTotalBlock
-                          label={t("remaining")}
+                          label={t('remaining')}
                           amount={
                             orderTotalAmountByFormValues -
                             orderCartAmountByFormValues

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

@@ -35,6 +35,8 @@ 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

package/src/notification/sms-template/card/SmsTemplateCard.tsx

@@ -33,6 +33,8 @@ export function SmsTemplateCard({
   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

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

@@ -198,7 +198,8 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   useEffect(() => {
     if (fields.length) {
@@ -308,9 +309,7 @@ export const DateAndRecurrenceInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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

@@ -195,7 +195,8 @@ export const DateInput = ({
     }, 100)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   return (
     <Form.Group>
@@ -284,9 +285,7 @@ export const DateInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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

@@ -3,9 +3,9 @@ import { Button } from 'react-bootstrap'
 import { VenueMap } from '@licklist/core/dist/DataMapper/Product/VenueMapDataMapper'
 import MediaService from '@licklist/plugins/dist/services/Media/MediaService'
 import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
 import { FullscreenModal } from '../../modals/fullscreen'
 import { EventVenueMap } from '../../events/event-venue-map'
-import { Product } from '../types'
 
 type VenueMapsControlProps = {
   venueMaps?: VenueMap[]

package/src/setting/admin/AdminSettingForm.tsx

@@ -145,10 +145,14 @@ export const AdminSettingForm = ({
                       ) && (
                         <>
                           {t('noCountryIsProvided')}
+                          {/* TODO fix issue react router types
+      @ts-expect-error */}
                           <Link
                             role='button'
                             to={`/provider/${providerMetadata?.providerType}/${providerMetadata?.providableId}/update`}
                           >
+                            {/* TODO fix issue react router types
+      @ts-expect-error */}
                             {t('here')}
                           </Link>
                         </>

package/src/setting/dashboard/snippet-templates/card/SnippetTemplateCard.tsx

@@ -24,6 +24,8 @@ export function SnippetTemplateCard({
   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 && !isDefault && (
           <button

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -29,7 +29,6 @@ import {
 import { NumberInput } from '../../../iframe/order-process/components/CategoryProduct/components/NumberInput'
 import { SnippetTemplateContext } from '../context/snippetTemplate'
 
-
 const DEFAULT_IMAGE =
   'https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&auto=format&fit=crop&w=687&q=80'
 
@@ -58,7 +57,7 @@ export function Preview({
 
   const [currentDate, setCurrentDate] = useState<DateTime>(defaultStartDay)
   const [selectedDate, setSelectedDate] = useState<DateTime | null>(null)
-  const calendarDates = getMonthCalendarDates(currentDate)
+  const calendarDates = getMonthCalendarDates({ initialDate: currentDate })
 
   return (
     <div className='w-100 h-100 snippet-template-preview'>

package/src/static/date-range-input/utils/index.ts

@@ -58,7 +58,7 @@ export const stringDatesToInputValue = ({
   )} - ${DateTime.fromJSDate(nextEndDate).toFormat(INPUT_DATE_FORMAT)}`
 }
 
-export const getDateParams = (date: Date) => {
+export const getDateParams = (date: Date): [number, number, number] => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
   const monthDate = date.getDate()

package/src/static/loader/FullScreenLoader.tsx

@@ -0,0 +1,16 @@
+import clsx from 'clsx'
+import { LoaderIndicator, LoaderIndicatorProps } from './LoaderIndicator'
+
+interface FullScreenLoaderProps {
+  containerClassName?: string
+  indicatorProps?: LoaderIndicatorProps
+}
+
+export const FullScreenLoader = ({
+  containerClassName,
+  indicatorProps,
+}: FullScreenLoaderProps) => (
+  <div className={clsx('fullscreen-loader', containerClassName)}>
+    <LoaderIndicator {...indicatorProps} />
+  </div>
+)

package/src/static/loader/LoaderIndicator.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/jsx-pascal-case */
-import { ReactNode } from 'react'
+import { PropsWithChildren } from 'react'
 import * as ReactLoader from 'react-loader'
 import ILoaderOptions from '../../types/static/ILoaderOptions'
 
 export interface LoaderIndicatorProps {
-  children?: ReactNode | ReactNode[]
   isLoaded?: boolean
   options?: ILoaderOptions
   className?: string
 }
 
-export function LoaderIndicator(props: LoaderIndicatorProps) {
+export function LoaderIndicator(
+  props: PropsWithChildren<LoaderIndicatorProps>,
+) {
   const { children, isLoaded, options, className = '' } = props
 
   const defaultOptions: ILoaderOptions = {
@@ -37,6 +38,8 @@ export function LoaderIndicator(props: LoaderIndicatorProps) {
   } as ILoaderOptions
 
   return (
+    // TODO Remove this library, it's deprecated and even removed from npm packages
+    // @ts-expect-error
     <ReactLoader.default
       loaded={isLoaded!}
       options={mergedOptions}

package/src/static/loader/index.ts

@@ -5,3 +5,4 @@ export { ButtonLoader } from './ButtonLoader'
 export { SnippetLoader } from './SnippetLoader'
 export { PaymentLoader } from './PaymentLoader'
 export type { PaymentLoaderProps } from './PaymentLoader'
+export { FullScreenLoader } from './FullScreenLoader'

package/src/styles/availability-indicator/AvailabilityIndicator.scss

@@ -4,8 +4,7 @@
   align-items: center;
   gap: 0.5rem;
   font-weight: 300;
-  max-width: 100%;
-
+  width: 100%;
 
   .indicator-label {
     text-overflow: ellipsis;
@@ -25,8 +24,6 @@
   }
 }
 
-
-
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

package/src/styles/ryft-payment-form/RyftPaymentForm.scss

@@ -180,7 +180,7 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {

package/src/styles/static/Loader.scss

@@ -27,6 +27,15 @@
   }
 }
 
+.fullscreen-loader {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: 5000;
+  top: 0;
+  left: 0;
+}
+
 .payment-loader {
   position: absolute;
   top: 50%;