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

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

package/src/modals/dialog/Dialog.tsx

@@ -32,42 +32,41 @@ export const Dialog = ({
   }
 
   return (
-    <>
-      <Modal
-        show={isActive}
-        onHide={onDecline}
-        animation={false}
-        size='sm'
-        centered
-        className='text-center justify-content-center rounded'
-      >
-        <Modal.Header className='justify-content-center border-0'>
-          {title && <Modal.Title as='h6'>{title}</Modal.Title>}
-        </Modal.Header>
-        {content && (
-          <Modal.Body className='justify-content-center'>{content}</Modal.Body>
+    <Modal
+      show={isActive}
+      onHide={onDecline}
+      animation={false}
+      size='sm'
+      centered
+      className='text-center justify-content-center rounded'
+    >
+      {/* @ts-ignore */}
+      <Modal.Header className='justify-content-center border-0'>
+        {title && <Modal.Title as='h6'>{title}</Modal.Title>}
+      </Modal.Header>
+      {content && (
+        <Modal.Body className='justify-content-center'>{content}</Modal.Body>
+      )}
+      <Modal.Footer className='border-0 justify-content-center'>
+        {customButtons || (
+          <>
+            <Button
+              variant='secondary'
+              className='modal-buttons'
+              onClick={declineHandler}
+            >
+              {t('cancel')}
+            </Button>
+            <Button
+              variant='primary'
+              className='modal-buttons'
+              onClick={approveHandler}
+            >
+              {t('Design:confirm')}
+            </Button>
+          </>
         )}
-        <Modal.Footer className='border-0 justify-content-center'>
-          {customButtons || (
-            <>
-              <Button
-                variant='secondary'
-                className='modal-buttons'
-                onClick={declineHandler}
-              >
-                {t('cancel')}
-              </Button>
-              <Button
-                variant='primary'
-                className='modal-buttons'
-                onClick={approveHandler}
-              >
-                {t('Design:confirm')}
-              </Button>
-            </>
-          )}
-        </Modal.Footer>
-      </Modal>
-    </>
+      </Modal.Footer>
+    </Modal>
   )
 }

package/src/modals/dialog/DialogContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, useContext, FC, useState, useCallback } from 'react'
+import {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  PropsWithChildren,
+} from 'react'
 
 interface IDialogContext {
   isShownDialog: boolean
@@ -20,7 +26,7 @@ export const DialogContext = createContext<IDialogContext>({
   onApproveDialog: () => undefined,
 })
 
-export const DialogContextProvider: FC = ({ children }) => {
+export const DialogContextProvider = ({ children }: PropsWithChildren) => {
   const [isShownDialog, setShownDialog] = useState(false)
 
   const showDialog = () => {

package/src/notification/email-template/card/EmailTemplateCard.tsx

@@ -35,8 +35,6 @@ export function EmailTemplateCard({
   return (
     <div className='snippet-template-card'>
       <div className='snippet-template-card-header'>
-        {/* TODO fix issue react router types
-      @ts-expect-error */}
         <Link to={href}>{name}</Link>
         {hasPermission && Boolean(onRemove) && (
           <ConfirmModal