@licklist/design 0.71.18-dev.8 → 0.71.18

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

@@ -1,7 +1,3 @@
-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'
 
@@ -9,64 +5,25 @@ 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 + modifiersPrice
+    return prevSumValue + price * product.quantity
   }, 0)
 }
 
-export const getModifierName = (
-  modifier: OrderModifierByProduct,
-  isManualBooking: boolean,
-) => {
-  const modifierName = (orderModifier: OrderModifier) =>
-    isManualBooking ?  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, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
@@ -10,14 +10,8 @@ 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
@@ -37,9 +31,7 @@ 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(() => {
@@ -126,155 +118,83 @@ export const CategoryProduct = ({
       render={({
         field: { onChange, value: productInfo = {}, ref },
         fieldState: { invalid, error },
-      }) => {
-        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)
-        }
-
-        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 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>
-            <div className='iframe-event__product-price-wrapper'>
-              <span className='product-price'>
-                {formatNumber(product.price, {
+          )}
+
+          {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,
-                })}
-              </span>
-              <ProductQuantityInput
-                onChange={onChange}
-                productInfo={productInfo}
-                refCallback={ref}
-                clearErrors={clearErrors}
-                product={{
-                  ...product,
-                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-                }}
-                category={category}
-                invalid={invalid}
-              />
+                }),
+                days: category?.remainderExpireAfter,
+              })}
             </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>
-        )
-      }}
+          )}
+          {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>
+      )}
     />
   )
 }

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

@@ -1,19 +1,14 @@
-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'
 
-export interface FormOrderItem {
+interface FormOrderItem {
   id: number
   name: string
   price: number
@@ -22,7 +17,6 @@ export interface FormOrderItem {
   deposit?: number | null
   quantity: number
   capacity?: number | null
-  orderModifiersSets?: OrderModifierByProduct[] | null
 }
 
 interface ProductQuantityInputProps {
@@ -46,7 +40,6 @@ export const ProductQuantityInput = ({
   invalid,
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation('Design')
-  const [open, handleOpenModal] = useState(false)
 
   const onChange = (quantity: number | null) => {
     _onChange({
@@ -55,35 +48,12 @@ 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'>
@@ -92,33 +62,6 @@ 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/page/components/PageBody/hooks/useResizePageBody.ts

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

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -1,9 +1,8 @@
 import { useMemo } from 'react'
-import { uniqueId, flatMap, flatten, map } from 'lodash'
+import { uniqueId } from 'lodash'
 import { useIntl } from 'react-intl'
 import { useTranslation } from 'react-i18next'
 import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
-import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
 import {
   PAYMENT_TYPE_VAT,
   PAYMENT_TYPE_FEE,
@@ -13,10 +12,6 @@ import { StaticTableData } from '../../../../table'
 import { getProductQuantityAndPrice, getTotalSumByCategory } from '../utils'
 import { OrderItemsTableProps, SummaryItem } from '../types'
 import { getOrderSummaryItems } from '../utils/paymentSummary'
-import { Order } from '@licklist/core/dist/DataMapper'
-import { OrderPayment } from '@licklist/core/dist/DataMapper/Order/OrderPaymentDataMapper'
-import { OrderProduct } from '@licklist/core/dist/DataMapper/Order/OrderProductDataMapper'
-import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 
 const CURRENCY_DEFAULT = 'GBP'
 export const PAYMENT_TYPE_TRANSLATE_KEYS = {
@@ -55,67 +50,19 @@ export const useTableData = ({
     ),
   })
 
-  const reworkProductStructure = (order: OrderProduct) =>
-    order
-      ? flatMap(order, (item) => {
-          if (!item || !Array.isArray(item)) return []
-          return item.map((modGroup, idx) => ({
-            deletedAt: order.deletedAt ?? null,
-            id: `${order.id}-${idx + 1}`, // Ensuring uniqueness with string concatenation
-            orderId: order.orderId ?? null,
-            price: order.price ?? 0,
-            productId: order.productId ?? '',
-            quantity: modGroup.productQuantity ?? 1,
-            deposit: order.deposit ?? 0,
-            orderProductModifiers: modGroup.modifiers.map((mod) => ({
-              modifierId: mod.modifierId ?? '',
-              price: mod.price ?? 0,
-              productId: mod.productId ?? '',
-              quantity: mod.quantity ?? 1,
-              modifierSetId: mod.modifierSetId ?? '',
-              modifier: mod.modifier ?? null,
-            })),
-          }))
-        })
-      : []
-
-  const renderProductItem = ({
-    product,
-    productsForCategory,
-  }: {
-    product: OrderProduct
-    productsForCategory: Product[]
-  }) => {
-    if (product.quantity === 0) {
-      return null
-    }
- 
-    const name =
-      productsForCategory.find((item) => item.id === product.productId)?.name || ''
-
-    return {
-      key: product.id,
-      name,
-      quantity: (
-        <div className='quantity'>
-          <div className='multiplier'>x</div>
-          {product.quantity}
-        </div>
-      ),
-      price: formatPrice(product.price),
-      modifier: product?.orderProductModifiers?.map(renderModifierItem) || [],
-    }
-  }
+  const renderProductItem = (product: Product) => {
+    const { quantity, price } = getProductQuantityAndPrice(
+      order.orderProducts,
+      product,
+    )
 
-  const renderModifierItem = (orderModifier: OrderModifier) => {
-    const { quantity, modifier, modifierId, price } = orderModifier
     if (quantity === 0) {
       return null
     }
 
     return {
-      key: modifierId,
-      name: ` - ${modifier?.name || ''}`,
+      key: product.id,
+      name: product.name,
       quantity: (
         <div className='quantity'>
           <div className='multiplier'>x</div>
@@ -133,33 +80,15 @@ export const useTableData = ({
 
     return productCategories.reduce(
       (previousValues: StaticTableData[], categoryId) => {
-        const productsForCategory = order?.products.filter(
+        const products = order.products.filter(
           (product) => product.productCategoryId === categoryId,
         )
 
-        const products = order.orderProducts.filter((el) =>
-          productsForCategory
-            .map((product) => product.id)
-            .includes(el.productId),
-        )
-
         if (!products.length) {
           return previousValues
         }
-        const productsWithReworkedModifier = products.map((product) => {
-          if (!product.orderProductModifiers.length) return product
-          return reworkProductStructure(product)
-        })
-
-        const filteredProducts =  flatten(productsWithReworkedModifier).map(
-          (product) =>
-            renderProductItem({ product , productsForCategory }),
-        )
- 
-        const productWithModifier = flatMap(filteredProducts, (item) => [
-          item,
-          ...item.modifier,
-        ])
+
+        const filteredProducts = products.map(renderProductItem).filter(Boolean)
 
         if (!filteredProducts.length) {
           return previousValues
@@ -167,8 +96,8 @@ export const useTableData = ({
 
         return [
           ...previousValues,
-          renderCategoryItem(productsForCategory),
-          ...productWithModifier,
+          renderCategoryItem(products),
+          ...filteredProducts,
         ]
       },
       [],
@@ -204,5 +133,6 @@ export const useTableData = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [order, externalDiscount, isPaymentProcessed],
   )
+
   return data
 }

package/src/iframe/payment/order-items-table/utils/index.ts

@@ -6,7 +6,6 @@ import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMappe
 import { PAYMENT_TYPE_DISCOUNT } from '@licklist/core/dist/DataMapper/Order/PaymentDataMapper'
 import { PaymentDetail } from '@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper'
 import { PAYMENT_TYPE_TRANSLATE_KEYS } from '../hooks/useTableData'
-import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
 
 const TRANSLATE_KEYS = {
   totalAmount: 'totalPaid',
@@ -29,7 +28,6 @@ export const calculateTotalPrice = (
   order: Order,
   externalPaymentDetails?: ExternalPaymnetDetail[],
 ) => {
-
   const totalPrice =
     order?.orderProducts?.reduce(
       (total: number, product) =>
@@ -127,26 +125,5 @@ export const getTotalSumByCategory = (
       product,
     )
 
-    const modifierFromProduct = orderProducts.find(
-      (orderProduct) => orderProduct.productId === product.id,
-    )?.orderProductModifiers
-    if (modifierFromProduct) {
-      const modifierPrice = modifierFromProduct.reduce(
-        (prevSum: number, { modifiers }) => {
-          const modifiersPrices = modifiers.reduce(
-            (prevSumModifier: number, modifier: OrderModifier) =>
-              prevSumModifier + modifier.price * modifier.quantity,
-            0,
-          )
-
-          return prevSum + modifiersPrices
-        },
-        0,
-      )
-      const priceWithModifier = price + modifierPrice
-
-      return prevSum + priceWithModifier * quantity
-    }
-
     return prevSum + price * quantity
   }, 0)