@licklist/design 0.71.24 → 0.72.0-dev.1

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

@@ -1,3 +1,7 @@
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import {
+  OrderModifierByProduct
+} from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 
@@ -5,25 +9,62 @@ 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
-    
+    const modifiersPrice = calculateTotalModifiersPrice(
+      product?.orderModifiersSets,
+    )
+
     const price = isTotalSum
       ? product?.price
       : product.hasDeposit
         ? product?.deposit
         : product?.price
 
-    return prevSumValue + price * product.quantity
+    return prevSumValue + price * product.quantity + modifiersPrice
   }, 0)
 }
 
+export const getModifierName = (
+  modifier: OrderModifierByProduct,
+) => {
+  const modifierName = (orderModifier: OrderModifier) => orderModifier?.modifier?.name  ??  orderModifier?.name
+  return `${modifier.modifiers.map((item) => (
+    item?.quantity > 1 ? `${item?.quantity}x - ${modifierName(item)}` : modifierName(item))).join(', ')}`
+}
+
+export const calculateTotalModifiersPrice = (
+  orderModifiersSets: OrderModifierByProduct[],
+) =>
+  orderModifiersSets
+    ?.map((set) =>
+      set.modifiers.reduce(
+        (sum, modifier) =>
+          sum + modifier.price * modifier.quantity * set.productQuantity,
+        0,
+      ),
+    )
+    .reduce((total, setTotal) => total + setTotal, 0)
+
+export const getOrderProductModifiersPrice = (
+  modifierFromProduct: OrderModifierByProduct,
+) => {
+  const { modifiers, productQuantity } = modifierFromProduct
+  const modifiersPrices = modifiers.reduce(
+    (prevSumModifier: number, modifier: OrderModifier) =>
+      prevSumModifier + modifier.price * modifier.quantity,
+    0,
+  )
+
+  return modifiersPrices * productQuantity
+}
+
 export const getProductError = (
   productsWithErrors: QuantityCheckProductInfo[],
   productId: OrderItem['id'],

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
@@ -10,8 +10,14 @@ import {
   Product,
   ProductCategory,
 } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { Button } from 'react-bootstrap'
+import { FaTrashAlt } from 'react-icons/fa'
+import { ProductWithModifierSetModal } from 'src/iframe/ProductWithModifierModal'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { TicketDescription } from '../../../event/ticket-description'
 import { ProductQuantityInput } from './components/ProductQuantityInput'
+import { FormOrderItem } from './components/ProductQuantityInput/ProductQuantityInput'
+import { ProductWithModifier } from './components/ProductWithModifier/ProductWithModifier'
 
 interface CategoryProductProps {
   product: Product
@@ -31,7 +37,9 @@ export const CategoryProduct = ({
   const { formatNumber } = useIntl()
   const { t } = useTranslation(['Design', 'Validation'])
   const { control, clearErrors, setError } = useFormContext()
-
+  const [editOrderModifierIndex, setEditOrderModifierIndex] =
+    useState<OrderModifierByProduct>(undefined)
+  const [modifierIndex, setModifierIndex] = useState<number>(undefined)
   const hasDeposits = category.allowDeposits && product?.deposit < product.price
 
   const productQuantityError = useMemo(() => {
@@ -118,83 +126,155 @@ export const CategoryProduct = ({
       render={({
         field: { onChange, value: productInfo = {}, ref },
         fieldState: { invalid, error },
-      }) => (
-        <div id={String(product.id)} className='iframe-event__category-product'>
-          <div className={clsx('iframe-event__product', invalid && 'error')}>
-            <TicketDescription
-              title={product.name}
-              description={product.description}
-              className={clsx('iframe-event__product-description')}
-              images={product.images}
-              isRequired={product.isRequired}
-              canExpand={canExpandDescription}
-            />
-          </div>
-          <div className='iframe-event__product-price-wrapper'>
-            <span className='product-price'>
-              {formatNumber(product.price, {
-                style: 'currency',
-                currency: Config.Currency.GBP,
-              })}
-            </span>
-            <ProductQuantityInput
-              onChange={onChange}
-              productInfo={productInfo}
-              refCallback={ref}
-              clearErrors={clearErrors}
-              product={{
-                ...product,
-                isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-              }}
-              category={category}
-              invalid={invalid}
-            />
-          </div>
-          {hasDeposits && !category?.remainderExpireAfter && (
-            <div className='mt-4'>
-              {t('Design:payNowAndUponArrival', {
-                deposit: formatNumber(product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-                remainder: formatNumber(product.price - product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-              })}
-            </div>
-          )}
+      }) => {
+        const deleteOrderModifier = (orderModifierIndex: number) => {
+          const removedOrderModifierIndex = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets?.filter(
+            (_, index) => index !== orderModifierIndex,
+          )
+          const productInfoWithRemove = {
+            ...productInfo,
+            orderModifiersSets: removedOrderModifierIndex,
+            quantity: removedOrderModifierIndex.reduce(
+              (acc, product) => product.productQuantity + acc,
+              0,
+            ),
+          }
+          onChange(productInfoWithRemove)
+        }
 
-          {hasDeposits && category?.remainderExpireAfter > 0 && (
-            <div className='mt-4'>
-              {t('Design:payNowAndReminderDays', {
-                deposit: formatNumber(product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-                remainder: formatNumber(product.price - product?.deposit, {
+        const editOrderModifierSet = (orderModifierIndex: number) => {
+          const editOrderModifierIndex = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets.find((_, index) => {
+            setModifierIndex(index)
+            return index === orderModifierIndex
+          })
+          setEditOrderModifierIndex(editOrderModifierIndex)
+        }
+
+        const onChangeWithModifierSets = (value: FormOrderItem) => {
+          const editedOrderModifiersSets = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets
+            ?.filter((_, index) => index !== modifierIndex)
+            .concat(value.orderModifiersSets)
+           
+            onChange({
+            ...value,
+            orderModifiersSets: editedOrderModifiersSets,
+            quantity: editedOrderModifiersSets.reduce(
+              (acc, product) => product.productQuantity + acc,
+              0,
+            ),
+          })
+          setEditOrderModifierIndex(undefined)
+        }
+
+        return (
+          <div
+            id={String(product.id)}
+            className='iframe-event__category-product'
+          >
+            <div className={clsx('iframe-event__product', invalid && 'error')}>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className={clsx('iframe-event__product-description')}
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand={canExpandDescription}
+              />
+            </div>
+            <div className='iframe-event__product-price-wrapper'>
+              <span className='product-price'>
+                {formatNumber(product.price, {
                   style: 'currency',
                   currency: Config.Currency.GBP,
-                }),
-                days: category?.remainderExpireAfter,
-              })}
+                })}
+              </span>
+              <ProductQuantityInput
+                onChange={onChange}
+                productInfo={productInfo}
+                refCallback={ref}
+                clearErrors={clearErrors}
+                product={{
+                  ...product,
+                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
+                }}
+                category={category}
+                invalid={invalid}
+              />
             </div>
-          )}
-          {invalid && (
-            <div className='d-flex mt-3 w-100'>
-              <p className='iframe-event__message-error'>
-                {HookFormService.hasError(error, 'required') &&
-                  t('Design:pleaseSelectAtLeastFrom', {
-                    min: 1,
-                    type: 'item',
-                    from: 'this category',
-                  })}
-                {HookFormService.hasError(error, 'validate') && error.message}
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+            {hasDeposits && !category?.remainderExpireAfter && (
+              <div className='mt-4'>
+                {t('Design:payNowAndUponArrival', {
+                  deposit: formatNumber(product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  remainder: formatNumber(product.price - product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                })}
+              </div>
+            )}
+            {(productInfo as FormOrderItem).orderModifiersSets?.length > 0 && (
+              <>
+                {(productInfo as FormOrderItem).orderModifiersSets.map(
+                  (modifier, index) => (
+                    <ProductWithModifier
+                      key={modifier.productQuantity.toString()}
+                      modifier={modifier}
+                      modifierKey={index}
+                      editOrderModifierSet={editOrderModifierSet}
+                      deleteOrderModifier={deleteOrderModifier}
+                    />
+                  ),
+                )}
+              </>
+            )}
+            {hasDeposits && category?.remainderExpireAfter > 0 && (
+              <div className='mt-4'>
+                {t('Design:payNowAndReminderDays', {
+                  deposit: formatNumber(product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  remainder: formatNumber(product.price - product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  days: category?.remainderExpireAfter,
+                })}
+              </div>
+            )}
+            {invalid && (
+              <div className='d-flex mt-3 w-100'>
+                <p className='iframe-event__message-error'>
+                  {HookFormService.hasError(error, 'required') &&
+                    t('Design:pleaseSelectAtLeastFrom', {
+                      min: 1,
+                      type: 'item',
+                      from: 'this category',
+                    })}
+                  {HookFormService.hasError(error, 'validate') && error.message}
+                </p>
+              </div>
+            )}
+            <ProductWithModifierSetModal
+              show={!!editOrderModifierIndex}
+              onHide={() => setEditOrderModifierIndex(undefined)}
+              editOrderModifier={editOrderModifierIndex}
+              onChange={onChangeWithModifierSets}
+              product={product}
+              category={category}
+            />
+          </div>
+        )
+      }}
     />
   )
 }

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/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -1,14 +1,19 @@
+import { useState } from 'react'
 import clsx from 'clsx'
 import { Button } from 'react-bootstrap'
+import { isEmpty } from 'lodash'
 import { useTranslation } from 'react-i18next'
 import { FieldValues, RefCallBack, UseFormClearErrors } from 'react-hook-form'
 import {
   Product,
   ProductCategory,
 } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { NumberInput } from '../NumberInput'
+ // eslint-disable-next-line
+import { ProductWithModifierSetModal } from '../../../../../ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal'
 
-interface FormOrderItem {
+export interface FormOrderItem {
   id: number
   name: string
   price: number
@@ -17,6 +22,7 @@ interface FormOrderItem {
   deposit?: number | null
   quantity: number
   capacity?: number | null
+  orderModifiersSets?: OrderModifierByProduct[] | null
 }
 
 interface ProductQuantityInputProps {
@@ -40,6 +46,7 @@ export const ProductQuantityInput = ({
   invalid,
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation('Design')
+  const [open, handleOpenModal] = useState(false)
 
   const onChange = (quantity: number | null) => {
     _onChange({
@@ -48,12 +55,35 @@ export const ProductQuantityInput = ({
       deposit: product?.deposit,
       hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
+      orderModifiersSets: [],
       productCategoryId: category.id,
       quantity,
       capacity: product?.capacity,
     })
   }
 
+  const onChangeWithModifierSets = (productOrder: FormOrderItem) => {
+    if (isEmpty(productInfo)) {
+      _onChange(productOrder)
+      return handleOpenModal(false)
+    }
+
+    _onChange({
+      id: productInfo.id,
+      name: productInfo.name,
+      deposit: productInfo?.deposit,
+      hasDeposit: productInfo.hasDeposit,
+      price: productInfo.price,
+      orderModifiersSets: productInfo.orderModifiersSets?.concat(
+        productOrder.orderModifiersSets,
+      ),
+      productCategoryId: category.id,
+      quantity: productInfo.quantity + productOrder.quantity,
+      capacity: productInfo?.capacity,
+    })
+    return handleOpenModal(false)
+  }
+
   if (product.isSoldOut) {
     return (
       <div className='iframe-event__sold-out-wrapper'>
@@ -62,6 +92,33 @@ export const ProductQuantityInput = ({
     )
   }
 
+  if ((product as Product).modifiersSet.length) {
+    return (
+      <>
+        <Button
+          ref={refCallback}
+          disabled={product.isSoldOut}
+          className={clsx(
+            `iframe-event__${
+              productInfo?.quantity ? 'unselect-product' : 'select-product'
+            }`,
+            invalid && 'error',
+          )}
+          onClick={() => handleOpenModal(true)}
+        >
+          +
+        </Button>
+        <ProductWithModifierSetModal
+          show={open}
+          onHide={() => handleOpenModal(false)}
+          onChange={onChangeWithModifierSets}
+          product={product}
+          category={category}
+        />
+      </>
+    )
+  }
+
   if (product?.maxAmount === 1) {
     return (
       <Button

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

@@ -0,0 +1,86 @@
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { FaTrashAlt } from 'react-icons/fa'
+import { Config } from '@licklist/core'
+import { useIntl } from 'react-intl'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import {
+  getOrderProductModifiersPrice,
+  getModifierName,
+} from '../../../BookingSummary/utils'
+
+export interface FormOrderItem {
+  id: number
+  name: string
+  price: number
+  productCategoryId: number
+  hasDeposit?: boolean
+  deposit?: number | null
+  quantity: number
+  capacity?: number | null
+  orderModifiersSets?: OrderModifierByProduct[] | null
+}
+
+interface ProductQuantityInputProps {
+  modifier: OrderModifierByProduct
+  modifierKey: number
+  isManualBooking?: boolean
+  isSummary? :boolean
+  deleteOrderModifier?: (order: number) => void
+  editOrderModifierSet?: (order: number) => void
+}
+
+export const ProductWithModifier = ({
+  modifier,
+  modifierKey,
+  isManualBooking = false,
+  isSummary = false,
+  deleteOrderModifier,
+  editOrderModifierSet,
+}: ProductQuantityInputProps) => {
+  const { t } = useTranslation('Design')
+  const { formatNumber } = useIntl()
+
+  const modifierName = getModifierName(modifier)
+
+  const orderModifierDescription = `${modifier.productQuantity}`
+
+  const modifierPrice = getOrderProductModifiersPrice(modifier)
+
+  const fullModifiersPrice = formatNumber(modifierPrice, {
+    style: 'currency',
+    currency: Config.Currency.GBP,
+  })
+  return (
+    <div
+      key={modifierKey}
+      className='d-flex p-2 justify-content-between align-items-center'
+    >
+      <div className='d-flex'>
+        <p className='font-weight-bold w-25 pr-4'>{`${orderModifierDescription} x`}</p>
+        <p>{modifierName ? ` ${modifierName}` : t('withoutModifier')}</p>
+      </div>
+      {isManualBooking || isSummary ? (
+        <p className='price'>{fullModifiersPrice}</p>
+      ) : (
+        <div>
+          <Button
+            className='ml-2'
+            variant='link'
+            onClick={() => editOrderModifierSet(modifierKey)}
+          >
+            {t('customise')}
+          </Button>
+
+          <Button
+            className='ml-2'
+            variant='link'
+            onClick={() => deleteOrderModifier(modifierKey)}
+          >
+            <FaTrashAlt />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/iframe/order-process/components/CategoryProduct/constants.ts

@@ -0,0 +1 @@
+export const MAX_PRODUCT_NUMBER = 100000 // max number

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

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+export type UseOnWindowUnmountProps = {
+  onBeforeUnload: (event: Event) => void
+  onPopState: (event: Event) => void
+}
+
+export const useOnWindowUnmount = ({
+  onBeforeUnload,
+  onPopState,
+}: UseOnWindowUnmountProps) => {
+  useEffect(() => {
+    window.history.pushState(null, '', window.location.pathname)
+    window.addEventListener('beforeunload', onBeforeUnload)
+    window.addEventListener('popstate', onPopState)
+
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUnload)
+      window.removeEventListener('popstate', onPopState)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}

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

@@ -69,8 +69,7 @@ export const useResizePageBody = () => {
           rightBlockHeight -
           CALENDAR_WRAPPER_HEIGHT,
       }
-  
-    }  
+    }
     return {
       maxHeight:
         height -