@licklist/design 0.78.5-dev.2 → 0.78.5-dev.23

package/src/file-upload/FileUpload.tsx

@@ -1,8 +1,8 @@
+import { showAlert } from '@licklist/plugins/dist/context/app/AlertContext'
 /* eslint-disable no-return-assign */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useEffect, useState } from 'react'
 import clsx from 'clsx'
-import useNotification from '@licklist/plugins/dist/context/app/hooks/useNotification'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
 import { Attachment } from '@licklist/core/dist/DataMapper/Notification/AttachmentDataMapper'
 import { AttachmentMetadata } from '@licklist/core/dist/DataMapper/Notification/AttachmentMetadataDataMapper'
@@ -153,7 +153,6 @@ export const useFileUpload = ({
   const [files, setFiles] = useState<File[] | null>(null)
   const [isDragged, setIsDragged] = useState(false)
 
-  const notification = useNotification()
   const { t } = useTranslation('Design')
 
   const uploadFile = (file: File) => {
@@ -183,7 +182,7 @@ export const useFileUpload = ({
       if (isExtensionValid) {
         uploadFile(file)
       } else {
-        notification.danger({
+        showAlert({ type: 'error',
           title: t('fileNotUploaded', { fileName: file.name }),
           message: t('invalidExtension', { extension: fileExtension }),
         })

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/index.ts

@@ -43,3 +43,4 @@ export * from './availability-indicator'
 export * from './number-of-people-input'
 export * from './fullscreen-loader'
 export * from './pages'
+export { default as RadioButton } from './customRadioButton/RadioButton'

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/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

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -27,6 +27,7 @@ export interface EmailTemplateControlProps {
   meta: string
   defaultAttachments?: Attachment[]
   notificationTypes?: NotificationType[]
+  waiverType?: boolean
   getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string
 }
 
@@ -38,6 +39,7 @@ export const EmailTemplateControl = forwardRef(
       options = [],
       defaultAttachments = [],
       notificationTypes = [],
+      waiverType = false,
       getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any,
@@ -196,7 +198,7 @@ export const EmailTemplateControl = forwardRef(
         })
       })
     }
-
+ 
     return (
       <>
         <Row>
@@ -284,7 +286,7 @@ export const EmailTemplateControl = forwardRef(
           </Form.Group>
         </Row>
 
-        <Row>
+        { !waiverType && (<Row>
           <Form.Group as={Col}>
             <Form.Check
               {...register('isActive')}
@@ -301,7 +303,7 @@ export const EmailTemplateControl = forwardRef(
               custom
             />
           </Form.Group>
-        </Row>
+        </Row>)}
         <Row className='mb-4'>
           <Form.Group as={Col}>
             <Form.Label>{t('Design:emailBody')}</Form.Label>
@@ -374,7 +376,7 @@ export const EmailTemplateControl = forwardRef(
                 }
                 // should show dropdown only if user want to include PDF file
                 if (option.type === OPTION_TYPE.files_selector) {
-                  const fileSelectors = JSON.parse(option.defaultValue)
+                   const fileSelectors =  option?.defaultValue ? JSON.parse(option.defaultValue) : ''
                   const fileNames = Object.values(fileSelectors)
                   const fileKeys = Object.keys(fileSelectors)
 
@@ -423,7 +425,7 @@ export const EmailTemplateControl = forwardRef(
                   )
                 }
 
-                if (option.type === OPTION_TYPE.days_reminder) {
+                if (option.type === OPTION_TYPE.days_reminder || option.type === OPTION_TYPE.waiver_reminder ) {
                   return (
                     <>
                       <Form.Label className='mt-4'>

package/src/notification/email-template/form/EmailTemplateForm.tsx

@@ -41,6 +41,7 @@ export interface EmailTemplateProps extends HasPermissionProp {
   placeholders?: NotificationPlaceholder[]
   options?: TemplateOption[]
   serverErrors?: ServerError
+  waiverType?: boolean
   notificationTypes?: NotificationType[]
   getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string
   onTypeChange?: (type?: NotificationType | null) => void
@@ -54,6 +55,7 @@ export const EmailTemplateForm = ({
   placeholders = [],
   options = [],
   serverErrors,
+  waiverType,
   notificationTypes = [],
   getDefaultTemplateMetaByType,
   onTypeChange,
@@ -93,6 +95,7 @@ export const EmailTemplateForm = ({
       >
         <EmailTemplateControl
           ref={emailEditorRef}
+          waiverType={waiverType}
           setIsLoading={setIsLoading}
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}

package/src/recurrence-input/RecurrenceInput.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable prefer-destructuring */
 /* eslint-disable react-hooks/exhaustive-deps */
 import { DateTime } from 'luxon'
-import { useEffect, useReducer, useState } from 'react'
+import { useEffect, useReducer } from 'react'
 import RRule, { Frequency, Weekday } from 'rrule'
 import RecurrenceEndInput, { defaultOccurrences } from './RecurrenceEndInput'
 import RecurrenceIntervalAndFrequencyInput from './RecurrenceIntervalAndFrequencyInput'
@@ -37,7 +37,7 @@ export function RecurrenceInput({
 
   useEffect(
     // TODO: unhardcode timezone
-    () =>
+    () => {
       onChange(
         RRule.optionsToString({
           freq: state.freq,
@@ -47,7 +47,8 @@ export function RecurrenceInput({
           tzid: 'Europe/London',
           ...state,
         }).replace('RRULE:', ''),
-      ),
+      )
+    },
     [state],
   )
 

package/src/sales/guest-profile/profile/Profile.tsx

@@ -16,11 +16,8 @@ export const Profile = ({ user }: ProfileProps) => {
     return null
   }
 
-  const {
-    firstName,
-    lastName,
-    userDetail: { gender },
-  } = user
+  const { firstName, lastName, userDetail } = user
+  const gender = userDetail?.gender
 
   return (
     <div className='profile'>

package/src/setting/dashboard/payments/payments-modal/PaymentsModal.tsx

@@ -25,6 +25,7 @@ export function PaymentsModal({
 
   return (
     <Modal show={isVisible} onHide={onHide} centered>
+      {/* @ts-ignore */}
       <Modal.Header closeButton>
         <Modal.Title>{t('Design:setEmail')}</Modal.Title>
       </Modal.Header>

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -1,6 +1,5 @@
 import { useContext, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { MemoryRouter } from 'react-router-dom'
 import { Button } from 'react-bootstrap'
 import {
   SNIPPET_TEMPLATE_TYPE_VENUE_MAP,
@@ -79,14 +78,12 @@ export function Preview({
                 <div className='mt-5 pt-5 external-header'>
                   <PageHeader showCloseButton showBackButton>
                     <Timer timer={600} />
-                    <MemoryRouter initialEntries={['/step1', '/step2']}>
-                      <NavigationSteps
-                        steps={[
-                          { pathname: '/step1', key: '/step1', name: 'Burger' },
-                          { pathname: '/step2', key: '/step2', name: 'Cheese' },
-                        ]}
-                      />
-                    </MemoryRouter>
+                    <NavigationSteps
+                      steps={[
+                        { pathname: '/step1', key: '/step1', name: 'Burger' },
+                        { pathname: '/step2', key: '/step2', name: 'Cheese' },
+                      ]}
+                    />
                   </PageHeader>
                 </div>
               </div>