@licklist/design 0.71.24 → 0.72.0-dev.1

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

@@ -102,7 +102,6 @@
 }
 
 .ryft-payment-form {
-
   .form-disable-box {
     display: none;
     position: absolute;
@@ -180,11 +179,10 @@
     .form-disable-box {
       top: 20rem;
     }
-}
+  }
 }
 
 @include media-breakpoint-up(md) {
-
   .ryft-payment-form,
   .form-disable-box {
     height: 50%;
@@ -213,4 +211,4 @@
   .divider {
     display: none !important;
   }
-}
+}

package/dist/styles/sales/BookingResults.scss

@@ -5,7 +5,7 @@
     flex-wrap: wrap;
 
     .result-card {
-      height: 14.25rem;
+      height: 14rem;
       border: 1px solid $gray-400;
       max-width: calc(50% - 0.75rem);
       flex: 0 0 calc(50% - 0.75rem);

package/dist/styles/sales/ManualBooking.scss

@@ -234,6 +234,12 @@
     margin-bottom: 2rem;
   }
 
+  .quantity-container-product {
+    display: flex;
+    justify-content: center;
+    margin: 1rem;
+  }
+
   .save-btn:disabled {
     background-color: #fafafa;
     border: none;

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/dist/styles/themes/bookedit/index.scss

@@ -51,6 +51,25 @@
   border-bottom: 1px solid #f0f0f0;
 }
 
+ .modifier-header {
+  background-color: color('white');
+  padding: 0 2.5rem;
+  z-index: 2;
+  margin-top: 1rem;
+  min-height: 2rem;
+}
+
+.modifier-container {
+  background-color: color('white');
+  padding-bottom: 1rem;
+}
+
+.modifier-set-container {
+  background-color: color('white');
+  border-bottom: 2px solid #f0f0f0;
+  padding-bottom: 1rem;
+}
+
 .header-user-image {
   width: 3rem;
   height: 3rem;

package/dist/zone/form/components/GameDurationControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CA+B1B,CAAA"}
+{"version":3,"file":"GameDurationControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/GameDurationControl.tsx"],"names":[],"mappings":"AAOA,KAAK,wBAAwB,GAAG;IAC9B,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,mBAAmB,mBAE7B,wBAAwB,4CAgC1B,CAAA"}

package/dist/zone/form/components/GameDurationControl.js

@@ -77,6 +77,9 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

package/dist/zone/form/components/SortControl.js

@@ -77,6 +77,9 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.24",
+  "version": "0.72.0-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.32.9",
+    "@licklist/core": "0.31.2-dev.14",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.7",
+    "@licklist/plugins": "0.35.1-dev.8",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.32.9",
+    "@licklist/core": "0.31.2-dev.14",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.7",
+    "@licklist/plugins": "0.35.1-dev.8",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -202,8 +202,10 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  }
+  },
+  "stableVersion": "0.71.4-dev.1"
 }

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,6 +76,7 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
+
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

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

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error.message,
+      message: error?.response?.data?.message || error.message,
     })
   }
 
@@ -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/IntervalInput.tsx

@@ -17,6 +17,8 @@ interface IntervalInputProps {
   productSets?: ProductSet[]
   productSetId?: number
   disabled?: boolean
+  disabledRecurrent?: boolean
+  isCopyCreate?: boolean
 }
 
 export interface IntervalInputValues {
@@ -30,6 +32,8 @@ export function IntervalInput({
   editedProductSet,
   productSetId,
   productSets,
+  disabledRecurrent = false,
+  isCopyCreate = false
 }: IntervalInputProps) {
   const { t } = useTranslation(['Design', 'Validation'])
   const {
@@ -54,7 +58,6 @@ export function IntervalInput({
   const endDateInput = useRef<HTMLInputDateElement | null>(null)
 
   const updateEndDate = ({ target: { value: nextStartDate } }) => {
-    setRecurrent(false)
     setValue('start', nextStartDate)
 
     if (
@@ -72,6 +75,13 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet])
 
+  useEffect(() => {
+    if (!isCopyCreate) return
+    setRecurrent(false)
+    setValue('rrule', null)
+     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isCopyCreate])
+
   useEffect(() => {
     if (!productSets) return
 
@@ -153,7 +163,7 @@ export function IntervalInput({
             onChange={({ target: { checked } }) => {
               onChangeRecurrent(checked)
             }}
-            disabled={disabled || Boolean(editedProductSet)}
+            disabled={disabled || Boolean(editedProductSet) || disabledRecurrent}
           />
           {!recurrent && (
             <Form.Text muted>
@@ -178,7 +188,7 @@ export function IntervalInput({
                 minDate={DateTime.fromISO(start)
                   .plus({ day: 1 })
                   .toFormat('yyyy-MM-dd')}
-                disabled={disabled}
+                disabled={disabled || disabledRecurrent}
               />
             )}
           />

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

@@ -8,6 +8,7 @@ import {
 } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { useId } from '@react-aria/utils'
 import { Accordion, Button, Form, Modal } from 'react-bootstrap'
+import { isEqual } from 'lodash'
 import { FormProvider, useForm, Controller } from 'react-hook-form'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
@@ -65,6 +66,8 @@ export interface EditEventFormProps extends HasPermissionProp {
   timeZone: string
   eventProductSet?: ProductSet
   overrideNameError?: string
+  disabledRecurrent?: boolean
+  isCopyCreate?: boolean
 }
 
 const eventImageTypes = {
@@ -87,6 +90,8 @@ export const EditEventForm = ({
   timeZone,
   eventProductSet,
   overrideNameError,
+  disabledRecurrent = false,
+  isCopyCreate = false,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -126,7 +131,7 @@ export const EditEventForm = ({
   const visible = watch('visible')
   const editedProductSet = watch('editedProductSet')
   const productSetId = watch('productSetId')
-
+  const rrule = watch('rrule')
   const {
     images,
     handleImageRemove,
@@ -135,6 +140,8 @@ export const EditEventForm = ({
     isCoverImagesLoading,
   } = useMultipleImages(initialImages)
 
+  const watchedValues = watch()
+
   const onErrorSubmit = (submitErrors) => {
     scrollToError(getFirstErrorKey(submitErrors))
   }
@@ -179,6 +186,18 @@ export const EditEventForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
+  const defaultExDate = defaultEventValues?.rrule?.includes('EXDATE')
+    ? defaultEventValues?.rrule?.split(';EXDATE=')[1]
+    : ''
+
+  useEffect(() => {
+    if (!defaultExDate || rrule?.includes('EXDATE')) return
+    rrule && setValue('rrule', rrule?.concat(`;EXDATE=${defaultExDate}`))
+  }, [defaultExDate, rrule])
+
+
+  const isChanged = !isEqual(watchedValues, sanitizeDefaultValues(defaultEventValues));
+
   return (
     <>
       <Dialog
@@ -273,7 +292,9 @@ export const EditEventForm = ({
             disabled={disabled}
             productSetId={productSetId}
             productSets={productSets}
+            disabledRecurrent={disabledRecurrent}
             editedProductSet={editedProductSet}
+            isCopyCreate={isCopyCreate}
           />
           {categories.length !== 0 && (
             <Form.Group>
@@ -416,6 +437,7 @@ export const EditEventForm = ({
               disabled={
                 disabled ||
                 formState.isSubmitting ||
+                !isChanged ||
                 isImagesLoading ||
                 isCoverImagesLoading
               }
@@ -462,7 +484,7 @@ const sanitizeDefaultValues = (
     visible: values?.visible ?? '',
     externalPaymentLink: values?.externalPaymentLink ?? '',
     productSetId: values?.productSetId,
-    images: values?.images,
+    images: values?.images ?? [],
     saleDeadline: values?.saleDeadline,
     integrationUrl: values?.integrationUrl ?? '',
     recurrenceEndAt: values?.recurrenceEndAt ?? undefined,

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/edit-event-modal/utils/getDefaultProductSet.ts

@@ -40,7 +40,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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

@@ -21,6 +21,10 @@ export const RECURRENT_MODE_TYPES_LIST = {
   [MODE_ALL_EVENTS]: 3,
 }
 
+export const RECURRENT_MODE_TYPES_WITHOUT_ALL = {
+  [MODE_THIS_EVENT]: 1,
+}
+
 export type RecurrentEventMode = (typeof MODES)[number]
 
 export type EditRecurrentEventModalValues = {
@@ -33,6 +37,7 @@ export type EditRecurrentEventModalProps = {
   onHide: () => void
   title: string
   onSubmit: (values: EditRecurrentEventModalValues) => void
+  isDateWasChanged?: boolean
 }
 
 export const EditRecurrentEventModal = ({
@@ -41,6 +46,7 @@ export const EditRecurrentEventModal = ({
   onHide,
   title,
   onSubmit,
+  isDateWasChanged = false
 }: EditRecurrentEventModalProps) => {
   const { t } = useTranslation('Design')
 
@@ -50,6 +56,8 @@ export const EditRecurrentEventModal = ({
     },
   })
 
+  const recurrentListMode = isDateWasChanged? RECURRENT_MODE_TYPES_WITHOUT_ALL : RECURRENT_MODE_TYPES_LIST
+
   return (
     <Modal
       show={isOpen}
@@ -75,7 +83,7 @@ export const EditRecurrentEventModal = ({
             <Controller
               render={({ field: { value, onChange } }) => (
                 <>
-                  {Object.keys(RECURRENT_MODE_TYPES_LIST).map((option) => (
+                  {Object.keys(recurrentListMode).map((option) => (
                     <Form.Check
                       type='radio'
                       id={option}

package/src/events/event-card/EventCard.tsx

@@ -43,6 +43,7 @@ export interface EventCardProps extends HasPermissionProp {
   titleId?: string
   descriptionId?: string
   productSetName?: string
+  eventID?: string
 }
 
 export function EventCard({
@@ -61,6 +62,7 @@ export function EventCard({
   eventStatistic,
   titleId,
   descriptionId,
+  eventID,
 }: EventCardProps) {
   const { t } = useTranslation('Design')
   const { formatNumber, formatDate } = useIntl()
@@ -93,7 +95,16 @@ export function EventCard({
         </Badge>
       </div>
       <Card.Body>
-        <Card.Title id={titleId}>{name}</Card.Title>
+        <Card.Title id={titleId}>
+          {eventID ? (
+            <div className="d-flex">
+              {name}
+              <p className="text-secondary ml-2">{`(ID:${eventID})`}</p>
+            </div>
+          ) : (
+            name
+          )}
+        </Card.Title>
         <div className='flex-grow-1'>
           <TipTapEditor
             viewMode
@@ -109,9 +120,9 @@ export function EventCard({
                   {t(key)}:{' '}
                   {key === 'totalAmount'
                     ? formatNumber(statistics[key], {
-                        style: 'currency',
-                        currency: Config.Currency.GBP,
-                      })
+                      style: 'currency',
+                      currency: Config.Currency.GBP,
+                    })
                     : statistics[key]}
                 </span>
               </div>

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

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

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

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