@licklist/design 0.78.4 → 0.78.5-dev.0

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

@@ -1,4 +1,3 @@
-import { useMemo } from 'react'
 import {
   Badge,
   Card,
@@ -12,6 +11,7 @@ import { useTranslation } from 'react-i18next'
 import * as Config from '@licklist/core/dist/Config'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
+import { EventMetadata } from '@licklist/core/dist/DataMapper/Provider/EventMetadatMapper'
 import {
   FaEye,
   FaExternalLinkAlt,
@@ -21,11 +21,7 @@ import {
   FaQrcode,
 } from 'react-icons/fa'
 import { Sale } from '../../types/bookings'
-import {
-  EVENT_DESCRIPTION_SIZE,
-  formatContent,
-  getStatisticInfo,
-} from './utils'
+import { getStatisticInfo } from './utils'
 import { ReactComponent as ChartBarIcon } from '../../assets/dashboard/chartBar.svg'
 
 export interface EventCardProps extends HasPermissionProp {
@@ -40,22 +36,22 @@ export interface EventCardProps extends HasPermissionProp {
   onRemove: () => void
   onOpenQrCode: () => void
   eventStatistic?: EventStatistic | null
+  eventMetadata?: EventMetadata | null
   onStatistic: () => void
   titleId?: string
-  descriptionId?: string
   productSetName?: string
   eventID?: string
 }
 
 export function EventCard({
   name,
-  description,
   date,
   imageUrl,
   sales,
   onPreview,
   onEdit,
   onCopy,
+  eventMetadata,
   onRemove,
   onOpenQrCode,
   hasPermission = true,
@@ -63,16 +59,18 @@ export function EventCard({
   onStatistic,
   eventStatistic,
   titleId,
-  descriptionId,
   eventID,
 }: EventCardProps) {
   const { t } = useTranslation('Design')
   const { formatNumber, formatDate } = useIntl()
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date)
-  const memoedContent = useMemo(
-    () => formatContent(description, EVENT_DESCRIPTION_SIZE),
-    [description],
-  )
+
+  const duplicatedInfo = eventMetadata?.duplicatedFromId
+    ? t('Design:duplicatedInfo', {
+        ID: eventMetadata?.duplicatedFromId,
+        name: eventMetadata?.editorName,
+      })
+    : null
 
   return (
     <Card className='d-flex flex-column event-card h-100'>
@@ -106,6 +104,15 @@ export function EventCard({
           ) : (
             name
           )}
+          {duplicatedInfo && (
+            <div className='mt-2 ml-2'>
+              <div className='event-card-sale'>
+                <span className='event-card-sale-name text-success'>
+                  {duplicatedInfo}
+                </span>
+              </div>
+            </div>
+          )}
         </Card.Title>
         <div className='flex-grow-1'>
           <div className='mt-2 ml-2'>
@@ -124,23 +131,23 @@ export function EventCard({
             ))}
           </div>
 
-          {sales &&
-            sales.map((sale) => (
-              <div className='event-card-sale' key={sale.id}>
-                {/* TODO: make it an i18n message instead */}
-                <div className='event-card-sale-text'>
-                  <span className='event-card-sale-name'>{sale.name}</span>{' '}
-                  <span className='event-card-sale-quantity'>
-                    {[sale.current, sale.max]
-                      .map((value) => formatNumber(value))
-                      .join(' / ')}
-                  </span>
-                </div>
-                <ProgressBar now={sale.current} max={sale.max} />
+          {sales?.map((sale) => (
+            <div className='event-card-sale' key={sale.id}>
+              {/* TODO: make it an i18n message instead */}
+              <div className='event-card-sale-text'>
+                <span className='event-card-sale-name'>{sale.name}</span>{' '}
+                <span className='event-card-sale-quantity'>
+                  {[sale.current, sale.max]
+                    .map((value) => formatNumber(value))
+                    .join(' / ')}
+                </span>
               </div>
-            ))}
+              <ProgressBar now={sale.current} max={sale.max} />
+            </div>
+          ))}
         </div>
       </Card.Body>
+
       <Card.Footer className='flex-column'>
         {productSetName && (
           <OverlayTrigger
@@ -170,7 +177,6 @@ export function EventCard({
             </button>
             <div className='event-card-views'>
               <FaEye />
-
               <span>{formatNumber(totalViews)}</span>
             </div>
           </div>
@@ -189,6 +195,7 @@ export function EventCard({
             >
               <FaExternalLinkAlt />
             </button>
+
             {hasPermission && (
               <>
                 <button

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
 }

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

@@ -33,15 +33,15 @@ export const convertEventStatisticToTableData = (
     return []
   }
 
-  const summaryFormattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_FORMAT)
+  const summaryFormattedDate = DateTime.fromISO(date).toFormat(
+    DATE_TIME_FULL_FORMAT,
+  )
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_FORMAT,
+          DATE_TIME_FULL_FORMAT,
         ) === summaryFormattedDate,
     ) ?? []
 

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

@@ -49,6 +49,7 @@ 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,13 +10,17 @@ 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 || { width, height }
+  return memoedComponentParameters || memoizedDimensions
 }

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -48,12 +48,12 @@ export const ProductWithModifierSetModal = ({
           </button>
         </div>
         <div className='right-block' id='select-event-container'>
-          <div className={clsx('manual-booking-container', !product?.images?.length && 'tw-mt-8')}>
+          <div className={clsx('manual-booking-container', !product.images.length && 'tw-mt-8')}>
             <div className='manual-booking-header'>
               <TicketDescription
                 title={product.name}
                 description={product.description}
-                className={clsx('iframe-event__product-description', !product?.images?.length && 'mt-6')}
+                className={clsx('iframe-event__product-description', !product.images.length && 'mt-6')}
                 classNameProductModal='d-block'
                 images={product.images}
                 isRequired={product.isRequired}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ModifierSetControll.tsx

@@ -35,9 +35,6 @@ export const ModifiersSetControl = ({
   const { t } = useTranslation('App')
 
   const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
-  const filteredOrderModifiersSets = orderModifiersSets
-    ?.flat(Infinity)
-    ?.filter((item) => item && typeof item === 'object')
 
   const { formatNumber } = useIntl()
   const formatToCurrency = (value: number) =>
@@ -61,9 +58,8 @@ export const ModifiersSetControl = ({
     const selectedModifier = modifiers?.find(
       (item) => item.id === Number(e.target.defaultValue || e.target.id),
     )
-
     const checkSelectedModifier =
-      filteredOrderModifiersSets?.find(
+      orderModifiersSets?.find(
         (modifier) => modifier?.modifierId === selectedModifier?.id,
       )?.quantity === 1
 
@@ -129,11 +125,9 @@ export const ModifiersSetControl = ({
     )
   }, [isEditMode])
 
-  const radioButtonDefaultModifier = currentOrderModifiersSets
-    .find((modifier) =>
-      modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId),
-    )
-    ?.modifierId.toString()
+  const radioButtonDefaultModifier = currentOrderModifiersSets.find((modifier) => 
+    modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId)
+)?.modifierId.toString();
 
   return (
     <>
@@ -173,9 +167,7 @@ export const ModifiersSetControl = ({
                             inline
                             id={modifier.id.toString()}
                             defaultChecked={!!selectedOrderModifierId}
-                            defaultValue={
-                              selectedOrderModifierId || modifier.id.toString()
-                            }
+                            defaultValue={selectedOrderModifierId || modifier.id.toString()}
                             checked={field.value === modifier.id.toString()}
                             onChange={onChange}
                             type='radio'

package/src/iframe/event/event-navigation-footer/EventNavigationFooter.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import Button from 'react-bootstrap/Button'
-import RouteService from '@licklist/plugins/dist/services/Route/RouteService'
 import { FaArrowLeft, FaArrowRight } from 'react-icons/fa'
+import { useNavigate } from 'react-router-dom'
 
 interface PaginationDotsProps {
   amount: number
@@ -33,13 +33,14 @@ export function EventNavigationFooter({
   // @TODO remove and adjust components that uses old interface
   // used onSubmit for old cases
   const submitButtonProps = onSubmit ? { onSubmit } : { type: 'submit' }
+  const navigate = useNavigate()
 
   const onPrevButtonClick = () => {
     if (activeElement === 1) {
       if (onPrevStep) {
         onPrevStep()
       } else {
-        RouteService.goBack()
+        navigate(-1)
       }
 
       return

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

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { calculateTotalModifiersPrice } from '../../utils'
 import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
 
 

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

@@ -89,6 +89,7 @@ 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}
@@ -101,6 +102,14 @@ 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/order-process/components/NavigationSteps/NavigationSteps.tsx

@@ -1,5 +1,5 @@
 import { useRef, useMemo, useEffect, useState, useCallback } from 'react'
-import { useLocation, useHistory } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
 import { SnippetLoader } from '../../../../static'
@@ -22,7 +22,7 @@ export const NavigationSteps = ({
 }: NavigationStepsProps) => {
   const { t } = useTranslation('Design')
   const location = useLocation()
-  const history = useHistory()
+  const navigate = useNavigate()
 
   const containerRef = useRef<HTMLDivElement>(null)
   const containerWrapperRef = useRef<HTMLDivElement>(null)
@@ -45,7 +45,7 @@ export const NavigationSteps = ({
     pathname: string,
     queryParams?: Record<string, string>,
   ) => {
-    history.push({
+    navigate({
       pathname,
       search: new URLSearchParams(queryParams).toString(),
     })

package/src/iframe/order-process/components/utils/useOnWindowUnmount.ts

@@ -22,4 +22,4 @@ export const useOnWindowUnmount = ({
   }, [])
 
   return null
-}
+}

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -1,9 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useForm } from 'react-hook-form'
-
 import Button from 'react-bootstrap/Button'
-import { useHistory } from 'react-router-dom'
 import Alert from 'react-bootstrap/Alert'
 import {
   STATUS_APPROVED,
@@ -16,7 +14,6 @@ import {
   AttemptPaymentResponse,
 } from '@licklist/plugins/dist/hooks/Ryft/useRyftPayment'
 import { ProviderPaymentSettings } from '@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper'
-
 import { BlockLoader, ButtonLoader } from '../../static'
 import { injectComponentsInRyftForm } from './utils/ryft-form'
 
@@ -72,7 +69,7 @@ export const RyftPaymentForm = ({
   const showApplePayButton =
     isAppUsingInIframe &&
     providerPaymentSettings?.additionalPaymentMethodsEnabled
-  const history = useHistory()
+
   const [isValid, setIsValid] = useState(false)
   const [isBtnDisabled, setIsBtnDisabled] = useState(false)
   const [ryftInitFailure, setRyftInitFailure] = useState<boolean>(false)
@@ -214,7 +211,7 @@ export const RyftPaymentForm = ({
             <Button
               variant='primary'
               onClick={() => {
-                history.go(0)
+                window.location.reload()
               }}
             >
               {t('Ryft:refresh')}

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,20 +61,22 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById("ryft-pay-iframe");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      formBox.style.display = isDisableButton ? 'block' : 'none'
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/index.ts

@@ -42,3 +42,4 @@ export * from './calendar'
 export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
+export * from './pages'

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}