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

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

@@ -1,22 +1,24 @@
 import { useMemo } from 'react'
-import { uniqueId, flatMap, flatten } from 'lodash'
+import { uniqueId, flatMap, flatten, map } 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 { getTotalSumByCategory } from '../utils'
+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 = {
   [PAYMENT_TYPE_NET_PROFIT]: 'netAmount',
   [PAYMENT_TYPE_FEE]: 'bookeditFee',
@@ -39,62 +41,43 @@ 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) => {
-    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 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,
@@ -103,26 +86,43 @@ export const useTableData = ({
     product: OrderProduct
     productsForCategory: Product[]
   }) => {
-    if (!product || product.quantity === 0) return null
-
+    if (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 ?? 0),
-      modifier:
-        (product?.orderProductModifiers?.map(renderModifierItem) ?? []).filter(
-          Boolean,
-        ),
+      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),
     }
   }
 
@@ -132,40 +132,41 @@ export const useTableData = ({
     ]
 
     return productCategories.reduce(
-      (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
-
+      (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
+        }
         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((p) =>
-            renderProductItem({
-              product: p as OrderProduct,
-              productsForCategory,
-            }),
-          )
-          .filter((row): row is NonNullable<typeof row> => Boolean(row))
-
-        if (!filteredProducts.length) return acc
-
-        const productWithModifier = flatMap(filteredProducts, (row) => [
-          row,
-          ...(row.modifier ?? []),
+        const filteredProducts =  flatten(productsWithReworkedModifier).map(
+          (product) =>
+            renderProductItem({ product , productsForCategory }),
+        )
+ 
+        const productWithModifier = flatMap(filteredProducts, (item) => [
+          item,
+          ...item.modifier,
         ])
 
+        if (!filteredProducts.length) {
+          return previousValues
+        }
+
         return [
-          ...acc,
+          ...previousValues,
           renderCategoryItem(productsForCategory),
           ...productWithModifier,
         ]
@@ -182,21 +183,26 @@ export const useTableData = ({
       price: wrapLabelContent(formatPrice(price)),
     }))
 
-  const data = useMemo(() => {
-    if (!order) return []
-
-    return [
-      ...renderProductsContent(),
-      ...renderSummaryItems(
-        getOrderSummaryItems({
-          order,
-          paymentDetail,
-          isPaymentProcessed,
-          externalDiscount,
-        }),
-      ),
-    ]
-  }, [order, externalDiscount, isPaymentProcessed, paymentDetail])
-
+  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],
+  )
   return data
 }

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

@@ -166,12 +166,12 @@ export const PaymentPage = ({
               headerComponent={<SummaryTotalBlock amount={totalBooked} />}
               footer={
                 <div className='d-flex flex-column justify-content-between'>
-                  {paymentMetadata?.total ? (
+                  {paymentMetadata ? (
                     <>
-                      {/* <SummaryTotalBlock
+                      <SummaryTotalBlock
                         label={t('total')}
                         amount={paymentMetadata.total || 0}
-                      /> */}
+                      />
                       <SummaryTotalBlock
                         label={t('paidSum')}
                         amount={paymentMetadata.paid || 0}
@@ -185,7 +185,7 @@ export const PaymentPage = ({
                     </>
                   ) : (
                     <>
-                      {!!isCalculatedAmountGreaterThanOrderAmount && (
+                      {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
                           label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
@@ -195,7 +195,7 @@ export const PaymentPage = ({
                         />
                       )}
 
-                      {!!hasRemaingToPay && (
+                      {hasRemaingToPay && (
                         <SummaryTotalBlock
                           label={t('remaining')}
                           amount={
@@ -205,7 +205,7 @@ export const PaymentPage = ({
                         />
                       )}
 
-                      {!!isPaymentLinkWithRemainingToPay && (
+                      {isPaymentLinkWithRemainingToPay && (
                         <SummaryTotalBlock
                           label={t('remaningToPay')}
                           amount={Number(data?.remaining_to_pay)}

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -134,42 +134,32 @@ export const RyftPaymentForm = ({
       setIsBtnDisabled(false)
     }
   }
-  console.log(
-    formRef.current?.childNodes?.length,
-    'formRef.current?.childNodes?.length ',
-  )
-
-  // useEffect(() => {
-  //   const formBox = document.getElementById('form-disable-box')
-  //   const cardContainer = document.getElementById('ryft-pay-iframe')
-
-  //   const googleButton = document.getElementById(
-  //     'gpay-button-online-api-id',
-  //   ) as HTMLButtonElement | null
-
-  //   const appleButton = document.getElementById(
-  //     'ryft-pay-apple-pay-button',
-  //   ) as HTMLButtonElement | null
-
-  //   if (cardContainer) {
-  //     cardContainer.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //     cardContainer.setAttribute('aria-disabled', payButtonDisabled.toString())
-  //   }
-
-  //   if (googleButton) {
-  //     googleButton.disabled = payButtonDisabled
-  //     googleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //   }
 
-  //   if (appleButton) {
-  //     appleButton.disabled = payButtonDisabled
-  //     appleButton.style.opacity = payButtonDisabled ? '0.6' : '1'
-  //   }
-
-  //   if (formBox) {
-  //     formBox.style.display = payButtonDisabled ? 'block' : 'none'
-  //   }
-  // }, [payButtonDisabled])
+  useEffect(
+    () => {
+      if (
+        !formRef.current?.childNodes?.length ||
+        formRef.current?.childNodes?.length < 3 ||
+        !accountId.data?.account_id
+      ) {
+        return
+      }
+      injectComponentsInRyftForm({
+        t,
+        isAppUsingInIframe,
+        onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
+        additionalPaymentMethodsEnabled:
+          providerPaymentSettings?.additionalPaymentMethodsEnabled,
+      })
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      formRef.current?.childNodes?.length,
+      showApplePayButton,
+      payButtonDisabled,
+    ],
+  )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
@@ -193,29 +183,6 @@ export const RyftPaymentForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [accountId.data?.account_id])
 
-
-    useEffect(
-    () => {
-      if (
-        !formRef.current?.childNodes?.length ||
-        formRef.current?.childNodes?.length < 3 ||
-        !accountId.data?.account_id
-      ) {
-        return
-      }
-      injectComponentsInRyftForm({
-        t,
-        isAppUsingInIframe,
-        onApplePayButtonClick,
-        isDisableButton: !payButtonDisabled,
-        additionalPaymentMethodsEnabled:
-          providerPaymentSettings?.additionalPaymentMethodsEnabled,
-      })
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length, showApplePayButton, payButtonDisabled],
-  )
-
   if (accountId.isLoading || accountId.isFetching || isCreateLoading)
     return (
       <div className='mt-5 pt-5'>

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

@@ -61,20 +61,22 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById("ryft-pay-iframe");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      formBox.style.display = isDisableButton ? 'block' : 'none'
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/modals/dialog/Dialog.tsx

@@ -32,41 +32,42 @@ export const Dialog = ({
   }
 
   return (
-    <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
+        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.Footer>
-    </Modal>
+        <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>
+    </>
   )
 }

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

@@ -35,6 +35,8 @@ 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,7 +27,6 @@ export interface EmailTemplateControlProps {
   meta: string
   defaultAttachments?: Attachment[]
   notificationTypes?: NotificationType[]
-  waiverType?: boolean
   getDefaultTemplateMetaByType?: (type?: NotificationType | null) => string
 }
 
@@ -39,7 +38,6 @@ export const EmailTemplateControl = forwardRef(
       options = [],
       defaultAttachments = [],
       notificationTypes = [],
-      waiverType = false,
       getDefaultTemplateMetaByType,
     }: EmailTemplateControlProps,
     ref: any,
@@ -198,7 +196,7 @@ export const EmailTemplateControl = forwardRef(
         })
       })
     }
- 
+
     return (
       <>
         <Row>
@@ -286,15 +284,15 @@ export const EmailTemplateControl = forwardRef(
           </Form.Group>
         </Row>
 
-       <Row>
+        <Row>
           <Form.Group as={Col}>
-           {!waiverType && (<Form.Check
+            <Form.Check
               {...register('isActive')}
               name='isActive'
               label={t('Design:active')}
               id='formGroupIsActive'
               custom
-            />)}
+            />
             <Form.Check
               {...register('isDefault')}
               name='isDefault'
@@ -375,9 +373,9 @@ export const EmailTemplateControl = forwardRef(
                   )
                 }
                 // should show dropdown only if user want to include PDF file
-                if (option.type === OPTION_TYPE.files_selector && !waiverType) {
-                   const fileSelectors =  option?.defaultValue ? JSON.parse(option.defaultValue) : ''
-                  const fileNames =  Object.values(fileSelectors) : []
+                if (option.type === OPTION_TYPE.files_selector) {
+                  const fileSelectors = JSON.parse(option.defaultValue)
+                  const fileNames = Object.values(fileSelectors)
                   const fileKeys = Object.keys(fileSelectors)
 
                   return (
@@ -425,7 +423,7 @@ export const EmailTemplateControl = forwardRef(
                   )
                 }
 
-                if (option.type === OPTION_TYPE.days_reminder || option.type === OPTION_TYPE.waiver_reminder ) {
+                if (option.type === OPTION_TYPE.days_reminder) {
                   return (
                     <>
                       <Form.Label className='mt-4'>
@@ -436,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

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

@@ -41,7 +41,6 @@ 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
@@ -55,7 +54,6 @@ export const EmailTemplateForm = ({
   placeholders = [],
   options = [],
   serverErrors,
-  waiverType,
   notificationTypes = [],
   getDefaultTemplateMetaByType,
   onTypeChange,
@@ -95,7 +93,6 @@ export const EmailTemplateForm = ({
       >
         <EmailTemplateControl
           ref={emailEditorRef}
-          waiverType={waiverType}
           setIsLoading={setIsLoading}
           meta={defaultValues?.meta || null}
           defaultAttachments={defaultValues?.attachments || []}

package/src/product-set/control/ProductSetControl.tsx

@@ -227,7 +227,7 @@ export function ProductSetControl({
           </>
         )}
 
-        <SaleDeadline disabled={false} />
+        <SaleDeadline disabled={false} isProductSet />
 
         <div className='divider' />