@licklist/design 0.71.6-dev.9 → 0.71.7

package/src/auth/Login/LoginFormComponent.tsx

@@ -147,8 +147,6 @@ 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,8 +105,6 @@ 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,14 +400,10 @@ 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,8 +97,6 @@ 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>
@@ -108,8 +106,6 @@ 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,8 +29,6 @@ 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({ initialDate: now }),
+  calendarDates: getMonthCalendarDates(now),
   currentDate: now,
   getDateTimeButtonProps: () => ({
     resources: [],
@@ -50,7 +50,7 @@ Loading.args = {
   fromPrice: 'from £10',
   selectedDate: null,
   setSelectedDate: () => null,
-  calendarDates: getMonthCalendarDates({ initialDate: now }),
+  calendarDates: getMonthCalendarDates(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

@@ -9,9 +9,6 @@ import { Switch, NumberInput } from '../../../../static'
 const SALE_DEADLINE_BEFORE_TYPE = 'before'
 const SALE_DEADLINE_AFTER_TYPE = 'after'
 
-export const SALE_DEADLINE_NAME_CATEGORY = 'saleDeadlineCategory'
-export const SALE_DEADLINE_NAME = 'saleDeadline'
-
 const SALE_DEADLINES_EVENT_START_TYPES = [
   { type: SALE_DEADLINE_BEFORE_TYPE },
   { type: SALE_DEADLINE_AFTER_TYPE },
@@ -21,30 +18,11 @@ type DeadlineType =
   | typeof SALE_DEADLINE_BEFORE_TYPE
   | typeof SALE_DEADLINE_AFTER_TYPE
 
-export const DEADLINE_NAME = [
-  SALE_DEADLINE_NAME_CATEGORY,
-  SALE_DEADLINE_NAME,
-] as const
-
-export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
-
-type SaleDeadlineType =
-  | {
-      saleDeadline: null | number
-    }
-  | {
-      [key: string]: null | number
-    }
+type SaleDeadlineType = {
+  saleDeadline: null | number
+}
 
-export const SaleDeadline = ({
-  disabled = false,
-  onlyBefore = false,
-  deadLineCategory,
-}: {
-  disabled?: boolean
-  onlyBefore?: boolean
-  deadLineCategory?: string
-}) => {
+export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   const { t } = useTranslation(['Design'])
   const {
     control,
@@ -54,11 +32,9 @@ export const SaleDeadline = ({
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-
-  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME)
+  const saleDeadline = watch('saleDeadline')
 
   useEffect(() => {
-    if (onlyBefore) return
     if (saleDeadline > 0) {
       setDeadlineType(SALE_DEADLINE_AFTER_TYPE)
     }
@@ -69,11 +45,11 @@ export const SaleDeadline = ({
     <Form.Group className='sales-deadline'>
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
       <Form.Control.Feedback type='invalid'>
-        {errors.root?.message}
+        {errors.saleDeadline?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name={deadLineCategory || SALE_DEADLINE_NAME}
+        name='saleDeadline'
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -135,22 +111,18 @@ export const SaleDeadline = ({
 
           return (
             <>
-              {!onlyBefore && (
-                <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
-                  <Switch
-                    name='sale-deadline'
-                    options={SALE_DEADLINES_EVENT_START_TYPES.map(
-                      ({ type }) => ({
-                        id: type,
-                        value: t(`Design:${type}`),
-                      }),
-                    )}
-                    value={deadlineType}
-                    onChange={changeValueByType}
-                    disabled={disabled}
-                  />
-                </Form.Group>
-              )}
+              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
+                <Switch
+                  name='sale-deadline'
+                  options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
+                    id: type,
+                    value: t(`Design:${type}`),
+                  }))}
+                  value={deadlineType}
+                  onChange={changeValueByType}
+                  disabled={disabled}
+                />
+              </Form.Group>
               <div className='d-flex'>
                 <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleDays')}</Form.Label>

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -20,7 +20,6 @@ export const getDefaultValues = (
   relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? '',
   fieldSetId: productSet?.fieldSetId,
-  saleDeadline: productSet?.saleDeadline,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
       ? getFilteredTemplates(productSet?.mailTemplates)
@@ -40,6 +39,7 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
+                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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

@@ -61,12 +61,7 @@ export const EditRecurrentEventModal = ({
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
         <Modal.Header className='border-0'>
           <Modal.Title as='h6'>{title}</Modal.Title>
-          <Button
-            variant='danger'
-            className='btn-sm rounded'
-            disabled={disabled}
-            onClick={onHide}
-          >
+          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
             <FaTimes size={16} />
           </Button>
         </Modal.Header>

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

@@ -2,25 +2,24 @@ 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

@@ -12,7 +12,6 @@ export type EventStatisticModalProps = {
   date?: Event['startAt'] | null
   eventStatistic?: EventStatistic | null
   title?: string
-  eventId?: string
 }
 
 export const EventStatisticModal = ({
@@ -21,11 +20,10 @@ export const EventStatisticModal = ({
   date,
   eventStatistic,
   title,
-  eventId,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic, eventId)
+  const data = useTableData(date, eventStatistic)
   const handleClose = () => {
     setIsOpen(false)
   }

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

@@ -11,7 +11,6 @@ import { StaticTableData } from '../../../table'
 export const useTableData = (
   date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
-  eventId: string,
 ) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
@@ -85,7 +84,7 @@ export const useTableData = (
   useEffect(() => {
     setTableRows(transformStatisticToTableRows(date, eventStatistic))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventId, eventStatistic])
+  }, [date, eventStatistic])
 
   return tableRows
 }

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

@@ -1,7 +1,7 @@
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
-import { maxBy } from 'lodash'
+import { max } from 'lodash'
 
 export const TRANSLATION_KEYS = {
   shortQuantity: 'shortQuantity',
@@ -61,7 +61,6 @@ export const convertEventStatisticToTableData = (
       (
         { totalPerCategory, productsSummary = [], categoryName, eventId },
         _,
-        // all category at summaryDays
         selfCategory,
       ) => {
         let quantity = 0
@@ -82,6 +81,7 @@ export const convertEventStatisticToTableData = (
           })
         }
 
+
         productsSummary?.forEach((productSummary, productIndex) => {
           quantity += productSummary.productsSold
 
@@ -98,10 +98,22 @@ export const convertEventStatisticToTableData = (
             (summary) => summary.originalProductId === productSummary.id,
           )
 
-          const maxTotalQuantity = maxBy(overrides, 'id')?.totalQuantity
+          const highestOverrideTotalQuantity = overrides.reduce<number | null>(
+            (acc, override) => {
+              if (!override.totalQuantity) return acc
+
+              if (override.totalQuantity > (acc || 0)) {
+                return override.totalQuantity
+              }
+
+              return acc
+            },
+            null,
+          )
 
           const totalQuantity =
-            maxTotalQuantity || productSummary?.totalQuantity
+            (productSummary.totalQuantity || highestOverrideTotalQuantity) &&
+            max([productSummary.totalQuantity, highestOverrideTotalQuantity])
 
           summaryMap.set(`${categoryName}.${productSummary.name}`, {
             name: productSummary.name,

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,7 +49,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
-    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,17 +10,13 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
-  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
-
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || memoizedDimensions
+  return memoedComponentParameters || { width, height }
 }

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

@@ -21,6 +21,7 @@ export const BookingSummary = ({
   productsWithErrors = [],
   isLoading,
   hasPeopleInput,
+  isPaymentLink,
   peopleAmount,
   footer,
   headerComponent,
@@ -61,6 +62,7 @@ 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,17 +7,22 @@ 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 = orderProduct?.price
+  const priceForOneProduct =
+    !isPaymentLink && orderProduct?.hasDeposit
+      ? orderProduct?.deposit
+      : orderProduct?.price
 
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',

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

@@ -28,12 +28,14 @@ export type ProductsByMenuStepsProps = {
   orderItems: OrderItems
   step: MenuStep
   productsWithErrors?: QuantityCheckProductInfo[]
+  isPaymentLink?: boolean
 }
 
 export const ProductsByMenuStep = ({
   orderItems,
   step,
   productsWithErrors = [],
+  isPaymentLink,
 }: ProductsByMenuStepsProps) => {
   const { productCategories } = step
 
@@ -61,6 +63,7 @@ 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,14 +22,7 @@ export const SummaryTotal = ({
 
   const cartSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({ orderProducts }) + transactionFee
-
-  const totalSum = isFreePayment
-    ? 0
-    : cartSumByOrderProducts({ orderProducts, isTotalSum: true }) +
-      transactionFee
-
-  const hasRemaingToPay = totalSum > cartSum
+    : cartSumByOrderProducts(orderProducts) + transactionFee
 
   if (!orderProducts.length) {
     return null
@@ -37,26 +30,14 @@ export const SummaryTotal = ({
 
   return (
     <div className='d-flex flex-column justify-content-between'>
-      <SummaryTotalBlock
-        label={t(hasRemaingToPay ? 'payNow' : 'total')}
-        amount={cartSum}
-      />
+      <SummaryTotalBlock label={t('total')} amount={cartSum} />
+
       {!!totalWithDiscount && !isFreePayment && (
         <SummaryTotalBlock
           label={t('totalWithDiscount')}
           amount={totalWithDiscount + transactionFee}
         />
       )}
-      {hasRemaingToPay && (
-        <>
-          <SummaryTotalBlock
-            label={t('remaining')}
-            amount={totalSum - cartSum}
-          />
-
-          <SummaryTotalBlock label={t('total')} amount={totalSum} />
-        </>
-      )}
     </div>
   )
 }

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

@@ -1,21 +1,13 @@
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 
-export const cartSumByOrderProducts = ({
-  orderProducts,
-  isTotalSum,
-}: {
-  orderProducts?: OrderItem[]
-  isTotalSum?: boolean
-}) => {
+export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
   if (!orderProducts || !orderProducts.length) {
     return 0
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
-    const price = isTotalSum
-      ? product?.price
-      : product?.deposit ?? product?.price
+    const price = product?.hasDeposit ? product?.deposit : product?.price
     return prevSumValue + price * product.quantity
   }, 0)
 }

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

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

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

@@ -89,7 +89,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
-          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -102,14 +101,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
-          onWheel={(event) => event.currentTarget.blur()}
-          onFocus={(event) =>
-            event.target.addEventListener(
-              'wheel',
-              (event) => event.preventDefault(),
-              { passive: false },
-            )
-          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/page/components/PageBody/constants.ts

@@ -1,5 +1,4 @@
 export const TAB_WIDTH = 768
-export const MOBILE_WIDTH = 480
 export const RIGHT_BLOCK_RESIZED_EVENT = 'RIGHT_BLOCK_RESIZED_EVENT'
 // The sum of paddings in PageBody + header for first block
 export const STANDARD_BODY_PADDING = 48 + 49

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

@@ -2,7 +2,6 @@ import { useEffect, useMemo, useState, useRef } from 'react'
 import { useWindowDimensions } from '@licklist/plugins/dist/hooks/Media/useWindowDimensions'
 import {
   TAB_WIDTH,
-  MOBILE_WIDTH,
   STANDARD_BODY_PADDING,
   STANDARD_HEADER_FOOTER_SIZE,
   RIGHT_BLOCK_RESIZED_EVENT,
@@ -61,15 +60,6 @@ export const useResizePageBody = () => {
       })
     }
 
-    if (width <= MOBILE_WIDTH && Boolean(CALENDAR_WRAPPER_HEIGHT)) {
-      return {
-        maxHeight:
-          height -
-          STANDARD_BODY_PADDING -
-          rightBlockHeight -
-          CALENDAR_WRAPPER_HEIGHT,
-      }
-    }
     return {
       maxHeight:
         height -
@@ -97,6 +87,7 @@ export const useResizePageBody = () => {
 
     if (width >= TAB_WIDTH && !isContainerSizeApplied) {
       isContainerSizeApplied.current = true
+
       setLeftBlockContainerSizes({
         width: leftBlockContainer.clientWidth,
         height: leftBlockContainer.clientHeight,
@@ -126,6 +117,7 @@ export const useResizePageBody = () => {
       ) {
         minimalMapSize.current = calculatedMinimalMapSize
       }
+
       return {
         width: leftBlockContainer.clientWidth,
         height: minimalMapSize.current,

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,7 +61,6 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
-
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,