@licklist/design 0.71.24 → 0.72.0-dev.1

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,
     ) ?? []
 
@@ -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/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/ProductWithModifierSetForm.tsx

@@ -0,0 +1,212 @@
+import { useMemo } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { Button, Form } from 'react-bootstrap'
+import { isEmpty, uniqBy } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
+import { Currency } from '@licklist/core/dist/Config'
+import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import { NumberInputHorizontal } from 'src/sales'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { MAX_PRODUCT_NUMBER } from '../../order-process/components/CategoryProduct/constants'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { getOrderProductModifiersPrice } from '../../order-process/components/BookingSummary/utils'
+import { ProductControl } from './controll/ProductControll'
+
+export interface ManualBookingFormValues {
+  steps: MenuStep[]
+}
+
+interface ProductWithModifierSetFormProps {
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+const filteredOrderModifierSets = (
+  modifiersSet: OrderModifier[],
+): OrderModifier[] => {
+  if (!modifiersSet) return []
+  const orderModifier = modifiersSet
+    ?.flat()
+    .filter((modifier) => !!modifier?.quantity)
+
+  const filteredOrderModifier = uniqBy(
+    orderModifier,
+    (item) => `${item.modifierId}-${item.modifierSetId}`,
+  )
+
+  return filteredOrderModifier || []
+}
+
+export const ProductWithModifierSetForm = ({
+  product,
+  category,
+  editOrderModifier,
+  onChange,
+}: ProductWithModifierSetFormProps) => {
+  const form = useForm({ mode: 'onChange' })
+  const { t } = useTranslation(['App', 'Sale', 'Validation'])
+
+  const {
+    formState: { errors, isSubmitting, isValid },
+    control,
+    trigger,
+    watch,
+  } = form
+  const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
+
+  const valuesOrder = watch()
+  const productQuantity = valuesOrder?.product?.quantity ?? defaultProductQuantity
+
+  const orderModifiersSets =
+    valuesOrder[`${product.id}`]?.orderProductModifiers || []
+
+  const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
+
+  const orderModifierSets: OrderModifierByProduct[] = useMemo(() =>  [
+      {
+        productQuantity: productQuantity ?? 1,
+        modifiers: filteredOrderModifiers,
+      },
+    ]
+  , [filteredOrderModifiers, productQuantity])
+
+  const onSubmit = (event) => {
+    event.preventDefault()
+    trigger(`${product.id}`)
+
+    if (!isValid) return undefined
+    const productOrder: FormOrderItem = {
+      id: product.id,
+      name: product.name,
+      deposit: product?.deposit,
+      hasDeposit: category.allowDeposits && product?.deposit < product.price,
+      price: product.price,
+      productCategoryId: category.id,
+      quantity: productQuantity,
+      capacity: product?.capacity,
+      orderModifiersSets: orderModifierSets,
+    }
+    if (productOrder) {
+      return onChange(productOrder)
+    }
+    return undefined
+  }
+
+  const handleProductQuantityChange = (
+    value: number,
+    onChange: (val: number) => void,
+  ) => {
+    if (value < 0) {
+      onChange(0)
+    } else if (value > MAX_PRODUCT_NUMBER) {
+      onChange(MAX_PRODUCT_NUMBER)
+    } else {
+      onChange(value)
+    }
+  }
+
+  const disabledAddButton = useMemo(() => {
+    if (defaultProductQuantity) return false
+    return !productQuantity || !isEmpty(errors)
+  }, [defaultProductQuantity, productQuantity, errors])
+
+  const modifierPrice = getOrderProductModifiersPrice(orderModifierSets[0])
+  const productWithModifierPrice =
+    (product.price * productQuantity || 0) + modifierPrice
+  const { formatNumber } = useIntl()
+  const formatToCurrency = (value: number) =>
+    formatNumber(value, { style: 'currency', currency: Currency.GBP })
+
+  return (
+    <FormProvider {...form}>
+      <Form>
+        <div className='manual-booking-form'>
+          <ProductControl
+            product={product}
+            editOrderModifier={editOrderModifier}
+          />
+          <div className='bg-light m-2 p-2 rounded'>
+            <Controller
+              control={control}
+              name='product.quantity'
+              rules={{
+                min: {
+                  value: 1,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('product'),
+                    min: 1,
+                  }) as string,
+                },
+                max: {
+                  value: !product.isUnlimited
+                    ? product.maxQuantity
+                    : MAX_PRODUCT_NUMBER,
+                  message: t('Validation:fieldMaxNumber', {
+                    attribute: t('product'),
+                    max: product.maxQuantity,
+                  }) as string,
+                },
+              }}
+              render={({
+                field: { onChange, value, ref },
+                fieldState: { invalid, error },
+              }) => (
+                <div className='mb-8 d-flex flex-column'>
+                  <div className='quantity-container-product w-100'>
+                    <NumberInputHorizontal
+                      ref={ref}
+                      size='big'
+                      onChange={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onMinusClick={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onPlusClick={(val) => {
+                        handleProductQuantityChange(val, onChange)
+                      }}
+                      min={0}
+                      max={100}
+                      value={value || defaultProductQuantity}
+                      className={clsx(invalid && 'error')}
+                      isLoading={isSubmitting}
+                    />
+                  </div>
+                  <div className=' d-flex flex-column  align-items-center justify-content-center'>
+                    <div className='modifier-price pb-4 pl-5'>
+                      {formatToCurrency(product.price)}
+                    </div>
+                    {error?.message && (
+                      <div className='d-flex justify-content-center mt-3 w-100'>
+                        <p className='iframe-event__message-error'>
+                          {error.message}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+            <Button
+              as='button'
+              variant='primary'
+              className='w-100'
+              disabled={disabledAddButton}
+              onClick={onSubmit}
+            >
+              {`${t('Design:add')}${modifierPrice ? ` (${formatToCurrency(productWithModifierPrice)})` : ''}`}
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </FormProvider>
+  )
+}

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

@@ -0,0 +1,76 @@
+import { useDialogContext, DialogContextProvider } from 'src/modals'
+import { Modal } from 'react-bootstrap'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { TicketDescription } from 'src/iframe/event'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
+import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
+
+interface ProductWithModifierSetModalProps {
+  show: boolean
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+export const ProductWithModifierSetModal = ({
+  show,
+  onHide,
+  product,
+  category,
+  onChange,
+  editOrderModifier,
+}: ProductWithModifierSetModalProps) => {
+  const { onBeforeUnload, onPopState } = useDialogContext()
+  useOnWindowUnmount({ onBeforeUnload, onPopState })
+
+  return (
+    <DialogContextProvider>
+      <Modal
+        onHide={onHide}
+        show={show}
+        className='m-0 manual-booking-form-modal mt-0 h-100 p-0'
+        dialogClassName='manual-booking-dialog mt-0'
+      >
+        <div className='close-button'>
+          <button
+            type='button'
+            onClick={onHide}
+            onKeyPress={onHide}
+            className='btn btn-light rounded-circle position-absolute top-0 end-0 m-2'
+          >
+            &times;
+          </button>
+        </div>
+        <div className='right-block' id='select-event-container'>
+          <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')}
+                classNameProductModal='d-block'
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand
+                isModal
+              />
+            </div>
+            <ProductWithModifierSetForm
+              product={product}
+              onHide={onHide}
+              editOrderModifier={editOrderModifier}
+              onChange={onChange}
+              category={category}
+            />
+          </div>
+        </div>
+      </Modal>
+    </DialogContextProvider>
+  )
+}