@licklist/design 0.71.6-dev.5 → 0.71.6-dev.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.6-dev.5",
+  "version": "0.71.6-dev.7",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -208,4 +208,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.71.4-dev.1"
-}
+}

package/src/auth/Layout/AuthNavComponent.tsx

@@ -8,11 +8,15 @@ function AuthNavComponent() {
 
   return (
     <Router>
+      {/* TODO fix issue react router types
+        @ts-expect-error */}
       <Link to='/login'>
         <StyledButton size='sm' className='rounded-pill mr-2'>
           {t('login')}
         </StyledButton>
       </Link>
+      {/* TODO fix issue react router types
+        @ts-expect-error */}
       <Link to='/register'>
         <StyledButton
           size='sm'

package/src/auth/Login/LoginComponent.tsx

@@ -112,6 +112,8 @@ const LoginComponent = ({
             {!hideSignUpLink && (
               <h6 className='text-center'>
                 <Trans t={t} i18nKey='loginPromo'>
+                  {/* TODO fix issue react router types
+        @ts-expect-error */}
                   Don&apos;t have account? <Link to='/register'>Sign up</Link>.
                 </Trans>
               </h6>

package/src/auth/Login/LoginFormComponent.tsx

@@ -147,6 +147,8 @@ function LoginFormComponent(props: LoginFormComponentProps) {
         <p className='text-center mb-0 mt-3'>
           <Trans t={t} i18nKey='User:resetPromo'>
             Forgot your password?{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link
               to='/forgot-password'
               className={[isLoading && 'disabled'].join(' ')}

package/src/auth/Register/RegisterComponent.tsx

@@ -105,6 +105,8 @@ function RegisterComponent({
             <h6 className='text-center'>
               <Trans t={t} i18nKey='registerPromo'>
                 Fill out the form below to sign up for {{ name: t('bookedit') }}
+                {/* TODO fix issue react router types
+        @ts-expect-error */}
                 . Already signed up? Then just <Link to='/login'>Log in</Link>.
               </Trans>
             </h6>

package/src/auth/Register/RegisterFormComponent.tsx

@@ -400,10 +400,14 @@ function RegisterFormComponent({
           <Trans t={t} i18nKey='User:agreementsPromo'>
             By creating an account, I agree to {{ name: t('User:bookedit') }}
             &apos;s{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/terms' className={[isLoading && 'disabled'].join(' ')}>
               terms of service
             </Link>{' '}
             and{' '}
+            {/* TODO fix issue react router types
+        @ts-expect-error */}
             <Link to='/privacy' className={[isLoading && 'disabled'].join(' ')}>
               privacy policy
             </Link>

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

@@ -25,7 +25,7 @@ export const EventStatisticModal = ({
 }: EventStatisticModalProps) => {
   const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic, eventId )
+  const data = useTableData(date, eventStatistic, eventId)
   const handleClose = () => {
     setIsOpen(false)
   }

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -11,7 +11,7 @@ import { StaticTableData } from '../../../table'
 export const useTableData = (
   date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
-  eventId: string
+  eventId: string,
 ) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
@@ -34,7 +34,6 @@ export const useTableData = (
   const transformStatisticToTableRows = (
     date: Event['startAt'],
     statistic: EventStatistic | null,
-    eventId: string
   ) => {
     if (!statistic) {
       return []
@@ -42,7 +41,7 @@ export const useTableData = (
 
     const tableDataRows: StaticTableData[] = []
 
-    convertEventStatisticToTableData(date, statistic, eventId).forEach(
+    convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total),
@@ -84,7 +83,7 @@ export const useTableData = (
   }
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(date, eventStatistic, eventId))
+    setTableRows(transformStatisticToTableRows(date, eventStatistic))
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [date, eventId, eventStatistic])
 

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 && (
@@ -49,7 +48,14 @@ export const SummaryTotal = ({
         />
       )}
       {hasRemaingToPay && (
-        <SummaryTotalBlock label={t("remaining")} amount={totalSum - cartSum} />
+        <>
+          <SummaryTotalBlock
+            label={t('remaining')}
+            amount={totalSum - cartSum}
+          />
+
+          <SummaryTotalBlock label={t('total')} amount={totalSum} />
+        </>
       )}
     </div>
   )

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

@@ -5,20 +5,20 @@ export const cartSumByOrderProducts = ({
   orderProducts,
   isTotalSum,
 }: {
-  orderProducts?: OrderItem[];
-  isTotalSum?: boolean;
+  orderProducts?: OrderItem[]
+  isTotalSum?: boolean
 }) => {
   if (!orderProducts || !orderProducts.length) {
     return 0
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
-    if (!product) return 0;
+    if (!product) return 0
     const price = isTotalSum
       ? product?.price
-      : product?.deposit || product?.price;
-    return prevSumValue + price * product.quantity;
-  }, 0);
-};
+      : product?.deposit || product?.price
+    return prevSumValue + price * product.quantity
+  }, 0)
+}
 
 export const getProductError = (
   productsWithErrors: QuantityCheckProductInfo[],

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

@@ -132,13 +132,10 @@ export const CategoryProduct = ({
           </div>
           <div className='iframe-event__product-price-wrapper'>
             <span className='product-price'>
-              {formatNumber(
-                category.allowDeposits ? product?.deposit : product.price,
-                {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                },
-              )}
+              {formatNumber(product.price, {
+                style: 'currency',
+                currency: Config.Currency.GBP,
+              })}
             </span>
             <ProductQuantityInput
               onChange={onChange}

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-page/PaymentPage.tsx

@@ -198,20 +198,13 @@ export const PaymentPage = ({
                       )}
 
                       {hasRemaingToPay && (
-                        <>
-                          <SummaryTotalBlock
-                            label={t('remaining')}
-                            amount={
-                              orderTotalAmountByFormValues -
-                              orderCartAmountByFormValues
-                            }
-                          />
-
-                          <SummaryTotalBlock
-                            label={t('total')}
-                            amount={orderTotalAmountByFormValues}
-                          />
-                        </>
+                        <SummaryTotalBlock
+                          label={t('remaining')}
+                          amount={
+                            orderTotalAmountByFormValues -
+                            orderCartAmountByFormValues
+                          }
+                        />
                       )}
 
                       {isPaymentLinkWithRemainingToPay && (

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'>
@@ -309,7 +308,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee',
                                   description: '',
                                   price: 15,
@@ -318,8 +316,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -338,7 +334,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: 'Cofee 2',
                                   description: '',
                                   price: 15,
@@ -347,8 +342,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: 'sale' as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

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>
+)