@licklist/design 0.72.2 → 0.72.4

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/recurrence-input/RecurrenceInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DateTime } from 'luxon'
-import { useEffect, useReducer } from 'react'
+import { useEffect, useReducer, useState } from 'react'
 import RRule, { Frequency, Weekday } from 'rrule'
 import RecurrenceEndInput, { defaultOccurrences } from './RecurrenceEndInput'
 import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
@@ -39,10 +39,14 @@ export function RecurrenceInput({
     // TODO: unhardcode timezone
     () =>
       onChange(
-        RRule.optionsToString({ ...state, tzid: 'Europe/London' }).replace(
-          'RRULE:',
-          '',
-        ),
+        RRule.optionsToString({
+          freq: state.freq,
+          count: state.count,
+          interval: state.interval,
+          byweekday: state.byweekday,
+          tzid: 'Europe/London',
+          ...state,
+        }).replace('RRULE:', ''),
       ),
     [state],
   )
@@ -54,8 +58,8 @@ export function RecurrenceInput({
         frequency={state.freq}
         onChange={({ interval, frequency }) => {
           updateState({
-            interval,
             freq: frequency,
+            interval,
             byweekday:
               frequency === state.freq
                 ? state.byweekday

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%;