@licklist/design 0.78.5-dev.0 → 0.78.5-dev.13

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

@@ -33,7 +33,7 @@ export interface EventCardProps extends HasPermissionProp {
   onPreview: () => void
   onEdit: () => void
   onCopy: () => void
-  onRemove: () => void
+  onRemove?: () => void
   onOpenQrCode: () => void
   eventStatistic?: EventStatistic | null
   eventMetadata?: EventMetadata | null
@@ -212,13 +212,15 @@ export function EventCard({
                 >
                   <FaCopy />
                 </button>
-                <button
-                  type='button'
-                  className='event-card-link-button'
-                  onClick={onRemove}
-                >
-                  <FaTrashAlt />
-                </button>
+                {onRemove && (
+                  <button
+                    type='button'
+                    className='event-card-link-button'
+                    onClick={onRemove}
+                  >
+                    <FaTrashAlt />
+                  </button>
+                )}
               </>
             )}
           </div>

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -39,6 +39,7 @@ export const EventStatisticModal = ({
       contentClassName='rounded'
       className='event-statistic-modal'
     >
+      {/* @ts-ignore */}
       <Modal.Header>
         <Modal.Title as='h6'>{title ?? t('eventStatistic')}</Modal.Title>
         <Button

package/src/events/event-venue-map/components/Dropdown/components/DropdownWrapper/DropdownWrapper.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react'
+import { PropsWithChildren } from 'react'
 
-export const DropdownWrapper: FC = ({ children }) => (
+export const DropdownWrapper = ({ children }: PropsWithChildren) => (
   <div className='canvas-dropdown-wrapper'>
     <div className='arrow' />
     <div className='children-container'>{children}</div>

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

@@ -5,13 +5,15 @@ 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 {
+  MenuStep,
+  Product,
+} 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 { NumberInputHorizontal } from '../../../sales'
 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'
@@ -63,20 +65,23 @@ export const ProductWithModifierSetForm = ({
   const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
 
   const valuesOrder = watch()
-  const productQuantity = valuesOrder?.product?.quantity ?? defaultProductQuantity
+  const productQuantity =
+    valuesOrder?.product?.quantity ?? defaultProductQuantity
 
   const orderModifiersSets =
     valuesOrder[`${product.id}`]?.orderProductModifiers || []
 
   const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
 
-  const orderModifierSets: OrderModifierByProduct[] = useMemo(() =>  [
+  const orderModifierSets: OrderModifierByProduct[] = useMemo(
+    () => [
       {
         productQuantity: productQuantity ?? 1,
         modifiers: filteredOrderModifiers,
       },
-    ]
-  , [filteredOrderModifiers, productQuantity])
+    ],
+    [filteredOrderModifiers, productQuantity],
+  )
 
   const onSubmit = (event) => {
     event.preventDefault()
@@ -180,7 +185,7 @@ export const ProductWithModifierSetForm = ({
                       isLoading={isSubmitting}
                     />
                   </div>
-                  <div className=' d-flex flex-column  align-items-center justify-content-center'>
+                  <div className='d-flex flex-column align-items-center justify-content-center'>
                     <div className='modifier-price pb-4 pl-5'>
                       {formatToCurrency(product.price)}
                     </div>

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

@@ -1,10 +1,10 @@
-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 { useDialogContext, DialogContextProvider } from '../../../modals'
+import { TicketDescription } from '../../event'
 import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
 import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
 import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
@@ -48,12 +48,20 @@ 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

@@ -10,8 +10,8 @@ import { xor } from 'lodash'
 import clsx from 'clsx'
 import { Currency } from '@licklist/core/dist/Config'
 import { useIntl } from 'react-intl'
-import { MAX_PRODUCT_NUMBER } from 'src/iframe/order-process/components/CategoryProduct/constants'
-import { NumberInputHorizontal } from 'src/sales'
+import { MAX_PRODUCT_NUMBER } from '../../../order-process/components/CategoryProduct/constants'
+import { NumberInputHorizontal } from '../../../../sales'
 import { selectModifierType } from '../../utils'
 
 interface ModifiersSetControllProps {
@@ -125,9 +125,11 @@ 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 (
     <>
@@ -167,7 +169,9 @@ 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/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
-import { useTranslation } from 'react-i18next' // Added translation hook
+import { useTranslation } from 'react-i18next'
 import { ModifiersSetControl } from './ModifierSetControll'
 import { orderProductModifiersQuantity } from '../../utils'
 
@@ -69,25 +69,23 @@ export const ProductControl = ({
                     return true
                   },
                 }}
-                render={({ fieldState: { error } }) => {
-                  return(
-                    <>
-                      <ModifiersSetControl
-                        modifierSet={modifierSet}
-                        productId={product.id}
-                        modifiers={modifierSet.modifiers}
-                        isEditMode={!!editOrderModifier?.modifiers}
-                        orderProductModifierSets={editOrderModifier?.modifiers}
-                        isLoading={isLoading}
-                      />
-                      {error?.message && (
-                        <div className='invalid-feedback d-flex pl-4'>
-                          {error?.message}!
-                        </div>
-                      )}
-                    </>,
-                  )
-                }}
+                render={({ fieldState: { error } }) => (
+                  <>
+                    <ModifiersSetControl
+                      modifierSet={modifierSet}
+                      productId={product.id}
+                      modifiers={modifierSet.modifiers}
+                      isEditMode={!!editOrderModifier?.modifiers}
+                      orderProductModifierSets={editOrderModifier?.modifiers}
+                      isLoading={isLoading}
+                    />
+                    {error?.message && (
+                      <div className='invalid-feedback d-flex pl-4'>
+                        {error?.message}!
+                      </div>
+                    )}
+                  </>
+                )}
               />
             </div>
           )

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

@@ -10,10 +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 { ProductWithModifierSetModal } from '../../../ProductWithModifierModal'
 import { TicketDescription } from '../../../event/ticket-description'
 import { ProductQuantityInput } from './components/ProductQuantityInput'
 import { FormOrderItem } from './components/ProductQuantityInput/ProductQuantityInput'
@@ -160,8 +158,8 @@ export const CategoryProduct = ({
           ).orderModifiersSets
             ?.filter((_, index) => index !== modifierIndex)
             .concat(value.orderModifiersSets)
-           
-            onChange({
+
+          onChange({
             ...value,
             orderModifiersSets: editedOrderModifiersSets,
             quantity: editedOrderModifiersSets.reduce(

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

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react'
+import { PropsWithChildren, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
@@ -15,14 +15,14 @@ export type PaymentCardProps = {
   isFreePayment?: boolean
 }
 
-export const PaymentCard: FC<PaymentCardProps> = ({
+export const PaymentCard = ({
   order,
   totalWithDiscount,
   recalculatedFee,
   discountBlock,
   paymentDetail,
   isFreePayment,
-}) => {
+}: PropsWithChildren<PaymentCardProps>) => {
   const { t } = useTranslation(['Design'])
   const { formatNumber } = useIntl()
 

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

@@ -1,24 +1,22 @@
 import { useMemo } from 'react'
-import { uniqueId, flatMap, flatten, map } from 'lodash'
+import { uniqueId, flatMap, flatten } 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 { OrderProduct } from '@licklist/core/dist/DataMapper/Order/OrderProductDataMapper'
 import {
   PAYMENT_TYPE_VAT,
   PAYMENT_TYPE_FEE,
   PAYMENT_TYPE_NET_PROFIT,
 } from '@licklist/core/dist/DataMapper/Order/PaymentDataMapper'
 import { StaticTableData } from '../../../../table'
-import { getProductQuantityAndPrice, getTotalSumByCategory } from '../utils'
+import { 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 = {
   [PAYMENT_TYPE_NET_PROFIT]: 'netAmount',
   [PAYMENT_TYPE_FEE]: 'bookeditFee',
@@ -41,43 +39,62 @@ export const useTableData = ({
     })
 
   const wrapLabelContent = (string: string) => (
-    <div className='label'>{string}</div>
+    <div className="label">{string}</div>
   )
 
   const renderCategoryItem = (products: Product[]) => ({
     key: uniqueId('category-id-'),
-    name: wrapLabelContent(products[0].productCategory?.name ?? ''),
+    name: wrapLabelContent(products[0]?.productCategory?.name ?? ''),
     quantity: '',
     price: wrapLabelContent(
       `${t('total')}: ${formatPrice(
-        getTotalSumByCategory(order.orderProducts, products),
+        getTotalSumByCategory(order.orderProducts ?? [], products),
       )}`,
     ),
   })
 
-  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 reworkProductStructure = (order: OrderProduct) => {
+    if (!order) return []
+
+    const groups: any[] = (order as any)?.orderProductModifiersGroups ?? []
+    if (!Array.isArray(groups) || !groups.length) return [order]
+
+    return groups.flatMap((modGroup, idx) => ({
+      deletedAt: order.deletedAt ?? null,
+      id: `${order.id}-${idx + 1}`,
+      orderId: order.orderId ?? null,
+      price: order.price ?? 0,
+      productId: order.productId ?? '',
+      quantity: modGroup?.productQuantity ?? 1,
+      deposit: order.deposit ?? 0,
+      orderProductModifiers:
+        (modGroup?.modifiers ?? []).map((mod: any) => ({
+          modifierId: mod?.modifierId ?? '',
+          price: mod?.price ?? 0,
+          productId: mod?.productId ?? '',
+          quantity: mod?.quantity ?? 1,
+          modifierSetId: mod?.modifierSetId ?? '',
+          modifier: mod?.modifier ?? null,
+        })) ?? [],
+    }))
+  }
+
+  const renderModifierItem = (orderModifier: OrderModifier) => {
+    if (!orderModifier || orderModifier.quantity === 0) return null
+    const { quantity, modifier, modifierId, price } = orderModifier
+
+    return {
+      key: modifierId,
+      name: ` - ${modifier?.name || ''}`,
+      quantity: (
+        <div className="quantity">
+          <div className="multiplier">x</div>
+          {quantity}
+        </div>
+      ),
+      price: formatPrice(price ?? 0),
+    }
+  }
 
   const renderProductItem = ({
     product,
@@ -86,43 +103,26 @@ export const useTableData = ({
     product: OrderProduct
     productsForCategory: Product[]
   }) => {
-    if (product.quantity === 0) {
-      return null
-    }
- 
+    if (!product || product.quantity === 0) return null
+
     const name =
-      productsForCategory.find((item) => item.id === product.productId)?.name || ''
+      productsForCategory.find((item) => item.id === product.productId)?.name ||
+      ''
 
     return {
       key: product.id,
       name,
       quantity: (
-        <div className='quantity'>
-          <div className='multiplier'>x</div>
+        <div className="quantity">
+          <div className="multiplier">x</div>
           {product.quantity}
         </div>
       ),
-      price: formatPrice(product.price),
-      modifier: product?.orderProductModifiers?.map(renderModifierItem) || [],
-    }
-  }
-
-  const renderModifierItem = (orderModifier: OrderModifier) => {
-    const { quantity, modifier, modifierId, price } = orderModifier
-    if (quantity === 0) {
-      return null
-    }
-
-    return {
-      key: modifierId,
-      name: ` - ${modifier?.name || ''}`,
-      quantity: (
-        <div className='quantity'>
-          <div className='multiplier'>x</div>
-          {quantity}
-        </div>
-      ),
-      price: formatPrice(price),
+      price: formatPrice(product.price ?? 0),
+      modifier:
+        (product?.orderProductModifiers?.map(renderModifierItem) ?? []).filter(
+          Boolean,
+        ),
     }
   }
 
@@ -132,41 +132,40 @@ export const useTableData = ({
     ]
 
     return productCategories.reduce(
-      (previousValues: StaticTableData[], categoryId) => {
-        const productsForCategory = 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
-        }
+      (acc: StaticTableData[], categoryId) => {
+        const productsForCategory =
+          order?.products.filter((p) => p.productCategoryId === categoryId) ?? []
+
+        const products =
+          order?.orderProducts?.filter((el) =>
+            productsForCategory.map((p) => p.id).includes(el.productId),
+          ) ?? []
+
+        if (!products.length) return acc
+
         const productsWithReworkedModifier = products.map((product) => {
-          if (!product.orderProductModifiers.length) return 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 = flatten(productsWithReworkedModifier)
+          .map((p) =>
+            renderProductItem({
+              product: p as OrderProduct,
+              productsForCategory,
+            }),
+          )
+          .filter((row): row is NonNullable<typeof row> => Boolean(row))
+
+        if (!filteredProducts.length) return acc
 
-        if (!filteredProducts.length) {
-          return previousValues
-        }
+        const productWithModifier = flatMap(filteredProducts, (row) => [
+          row,
+          ...(row.modifier ?? []),
+        ])
 
         return [
-          ...previousValues,
+          ...acc,
           renderCategoryItem(productsForCategory),
           ...productWithModifier,
         ]
@@ -183,26 +182,21 @@ export const useTableData = ({
       price: wrapLabelContent(formatPrice(price)),
     }))
 
-  const data = useMemo(
-    () => {
-      if (!order) {
-        return []
-      }
-
-      return [
-        ...renderProductsContent(),
-        ...renderSummaryItems(
-          getOrderSummaryItems({
-            order,
-            paymentDetail,
-            isPaymentProcessed,
-            externalDiscount,
-          }),
-        ),
-      ]
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [order, externalDiscount, isPaymentProcessed],
-  )
+  const data = useMemo(() => {
+    if (!order) return []
+
+    return [
+      ...renderProductsContent(),
+      ...renderSummaryItems(
+        getOrderSummaryItems({
+          order,
+          paymentDetail,
+          isPaymentProcessed,
+          externalDiscount,
+        }),
+      ),
+    ]
+  }, [order, externalDiscount, isPaymentProcessed, paymentDetail])
+
   return data
 }

package/src/iframe/payment/payment-page/PaymentPage.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Button, Col } from 'react-bootstrap'
 import { PaymentSessionContext } from '@licklist/plugins/dist/context/payment/PaymentSessionContext'
 import { PaymentLinkResponse } from '@licklist/plugins/dist/hooks/Api/usePaymentApi'
-import { BookingSummaryProps } from 'src/iframe/order-process/components/BookingSummary/types'
+import { BookingSummaryProps } from '../../order-process/components/BookingSummary/types'
 // eslint-disable-next-line max-len
 import { SummaryTotalBlock } from '../../order-process/components/BookingSummary/components/SummaryTotal/components/SummaryTotalBlock'
 import { LoaderIndicator } from '../../../static'

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

@@ -1,4 +1,4 @@
-import { TFunction } from 'react-i18next'
+import { TFunction } from 'i18next'
 import { RyftPaymentFormProps } from '../RyftPaymentForm'
 
 interface InjectComponentsInRyftForm