@licklist/design 0.71.6-dev.6 → 0.71.6-dev.8

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

@@ -6,7 +6,6 @@
   font-weight: 300;
   width: 100%;
 
-
   .indicator-label {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -25,8 +24,6 @@
   }
 }
 
-
-
 .activity-card {
   .availability-indicator {
     margin-top: 0.5rem;

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

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

package/dist/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%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.6-dev.6",
+  "version": "0.71.6-dev.8",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"

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

@@ -21,7 +21,6 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
-  isPaymentLink,
   peopleAmount,
   footer,
   headerComponent,
@@ -62,7 +61,6 @@ export const BookingSummary = ({
               <div className='products-by-menu-step'>
                 {menuSteps.map((menuStep) => (
                   <ProductsByMenuStep
-                    isPaymentLink={isPaymentLink}
                     key={menuStep.id}
                     orderItems={formValues}
                     step={menuStep}

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

@@ -7,22 +7,17 @@ type ProductSummaryProps = {
   name?: string
   productQuantityError?: string
   orderProduct: OrderItem
-  isPaymentLink?: boolean
 }
 
 export const ProductSummary = ({
   name,
   productQuantityError,
   orderProduct,
-  isPaymentLink,
 }: ProductSummaryProps) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
 
-  const priceForOneProduct =
-    !isPaymentLink && orderProduct?.hasDeposit
-      ? orderProduct?.deposit
-      : orderProduct?.price
+  const priceForOneProduct = orderProduct?.price
 
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',

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

@@ -28,14 +28,12 @@ export type ProductsByMenuStepsProps = {
   orderItems: OrderItems
   step: MenuStep
   productsWithErrors?: QuantityCheckProductInfo[]
-  isPaymentLink?: boolean
 }
 
 export const ProductsByMenuStep = ({
   orderItems,
   step,
   productsWithErrors = [],
-  isPaymentLink,
 }: ProductsByMenuStepsProps) => {
   const { productCategories } = step
 
@@ -63,7 +61,6 @@ export const ProductsByMenuStep = ({
 
               return (
                 <ProductSummary
-                  isPaymentLink={isPaymentLink}
                   key={orderItem.id}
                   name={orderItem.name}
                   productQuantityError={productQuantityError}

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

@@ -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/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