@licklist/design 0.71.24 → 0.72.0-dev.0

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

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

@@ -0,0 +1,86 @@
+import { Button } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { FaTrashAlt } from 'react-icons/fa'
+import { Config } from '@licklist/core'
+import { useIntl } from 'react-intl'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import {
+  getOrderProductModifiersPrice,
+  getModifierName,
+} from '../../../BookingSummary/utils'
+
+export interface FormOrderItem {
+  id: number
+  name: string
+  price: number
+  productCategoryId: number
+  hasDeposit?: boolean
+  deposit?: number | null
+  quantity: number
+  capacity?: number | null
+  orderModifiersSets?: OrderModifierByProduct[] | null
+}
+
+interface ProductQuantityInputProps {
+  modifier: OrderModifierByProduct
+  modifierKey: number
+  isManualBooking?: boolean
+  isSummary? :boolean
+  deleteOrderModifier?: (order: number) => void
+  editOrderModifierSet?: (order: number) => void
+}
+
+export const ProductWithModifier = ({
+  modifier,
+  modifierKey,
+  isManualBooking = false,
+  isSummary = false,
+  deleteOrderModifier,
+  editOrderModifierSet,
+}: ProductQuantityInputProps) => {
+  const { t } = useTranslation('Design')
+  const { formatNumber } = useIntl()
+
+  const modifierName = getModifierName(modifier)
+
+  const orderModifierDescription = `${modifier.productQuantity}`
+
+  const modifierPrice = getOrderProductModifiersPrice(modifier)
+
+  const fullModifiersPrice = formatNumber(modifierPrice, {
+    style: 'currency',
+    currency: Config.Currency.GBP,
+  })
+  return (
+    <div
+      key={modifierKey}
+      className='d-flex p-2 justify-content-between align-items-center'
+    >
+      <div className='d-flex'>
+        <p className='font-weight-bold w-25 pr-4'>{`${orderModifierDescription} x`}</p>
+        <p>{modifierName ? ` ${modifierName}` : t('withoutModifier')}</p>
+      </div>
+      {isManualBooking || isSummary ? (
+        <p className='price'>{fullModifiersPrice}</p>
+      ) : (
+        <div>
+          <Button
+            className='ml-2'
+            variant='link'
+            onClick={() => editOrderModifierSet(modifierKey)}
+          >
+            {t('customise')}
+          </Button>
+
+          <Button
+            className='ml-2'
+            variant='link'
+            onClick={() => deleteOrderModifier(modifierKey)}
+          >
+            <FaTrashAlt />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/iframe/order-process/components/CategoryProduct/constants.ts

@@ -0,0 +1 @@
+export const MAX_PRODUCT_NUMBER = 100000 // max number

package/src/iframe/order-process/components/utils/useOnWindowUnmount.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react'
+
+export type UseOnWindowUnmountProps = {
+  onBeforeUnload: (event: Event) => void
+  onPopState: (event: Event) => void
+}
+
+export const useOnWindowUnmount = ({
+  onBeforeUnload,
+  onPopState,
+}: UseOnWindowUnmountProps) => {
+  useEffect(() => {
+    window.history.pushState(null, '', window.location.pathname)
+    window.addEventListener('beforeunload', onBeforeUnload)
+    window.addEventListener('popstate', onPopState)
+
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUnload)
+      window.removeEventListener('popstate', onPopState)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return null
+}

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

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

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

@@ -1,8 +1,9 @@
 import { useMemo } from 'react'
-import { uniqueId } 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 {
   PAYMENT_TYPE_VAT,
   PAYMENT_TYPE_FEE,
@@ -12,6 +13,10 @@ 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 = {
@@ -50,19 +55,67 @@ export const useTableData = ({
     ),
   })
 
-  const renderProductItem = (product: Product) => {
-    const { quantity, price } = getProductQuantityAndPrice(
-      order.orderProducts,
-      product,
-    )
+  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 renderModifierItem = (orderModifier: OrderModifier) => {
+    const { quantity, modifier, modifierId, price } = orderModifier
     if (quantity === 0) {
       return null
     }
 
     return {
-      key: product.id,
-      name: product.name,
+      key: modifierId,
+      name: ` - ${modifier?.name || ''}`,
       quantity: (
         <div className='quantity'>
           <div className='multiplier'>x</div>
@@ -80,15 +133,33 @@ export const useTableData = ({
 
     return productCategories.reduce(
       (previousValues: StaticTableData[], categoryId) => {
-        const products = order.products.filter(
+        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 filteredProducts = products.map(renderProductItem).filter(Boolean)
+        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,
+        ])
 
         if (!filteredProducts.length) {
           return previousValues
@@ -96,8 +167,8 @@ export const useTableData = ({
 
         return [
           ...previousValues,
-          renderCategoryItem(products),
-          ...filteredProducts,
+          renderCategoryItem(productsForCategory),
+          ...productWithModifier,
         ]
       },
       [],
@@ -133,6 +204,5 @@ 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,6 +6,7 @@ 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',
@@ -28,6 +29,7 @@ export const calculateTotalPrice = (
   order: Order,
   externalPaymentDetails?: ExternalPaymnetDetail[],
 ) => {
+
   const totalPrice =
     order?.orderProducts?.reduce(
       (total: number, product) =>
@@ -125,5 +127,26 @@ 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)

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -23,7 +23,7 @@ const paymentNotProcessedSummary = ({
     ? getExternalPaymentDetail(paymentDetail)
     : undefined
 
-  const total = calculateTotalPrice(order, externalPaymentDetail)
+  const total = order?.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const summaryItems: SummaryItem[] = [
     {
@@ -58,9 +58,10 @@ const processedPaymentSummary = ({
           price: getPaymentValueByType(order.payments, key),
         }))
 
-  const total = calculateTotalPrice(order, externalPaymentDetail)
+  const total = order.fullAmount || calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/payment/payment-status-page/PaymentStatusPage.tsx

@@ -59,20 +59,19 @@ export const PaymentStatusPage = ({
 
   if (isLoading) return <LoaderIndicator isLoaded={false} />
 
-
-const orderCartAmountByFormValues = cartSumByOrderProducts({
-  orderProducts:
-    bookingSummaryProps?.formValues &&
-    Object.values(bookingSummaryProps?.formValues),
-});
-const orderTotalAmountByFormValues = cartSumByOrderProducts({
-  orderProducts:
-    bookingSummaryProps?.formValues &&
-    Object.values(bookingSummaryProps?.formValues),
-  isTotalSum: true,
-});
-const hasRemaingToPay =
-  orderTotalAmountByFormValues > orderCartAmountByFormValues;
+  const orderCartAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+  })
+  const orderTotalAmountByFormValues = cartSumByOrderProducts({
+    orderProducts:
+      bookingSummaryProps?.formValues &&
+      Object.values(bookingSummaryProps?.formValues),
+    isTotalSum: true,
+  })
+  const hasRemaingToPay =
+    orderTotalAmountByFormValues > orderCartAmountByFormValues
 
   // User can fill promocode only in iframe appcliation.
   // It didn't possible via payment link. This check will
@@ -81,9 +80,9 @@ const hasRemaingToPay =
   // For payment status page booking summary props can be empty
   // so we should also check for them
   const isCalculatedAmountGreaterThanOrderAmount =
-  !hasRemaingToPay &&
-  bookingSummaryProps &&
-  orderCartAmountByFormValues > totalAmount;
+    !hasRemaingToPay &&
+    bookingSummaryProps &&
+    orderCartAmountByFormValues > totalAmount
 
   return (
     <Page
@@ -140,7 +139,7 @@ const hasRemaingToPay =
                     <>
                       {isCalculatedAmountGreaterThanOrderAmount && (
                         <SummaryTotalBlock
-                        label={t(hasRemaingToPay ? "payNow" : "total")}
+                          label={t(hasRemaingToPay ? 'payNow' : 'total')}
                           amount={
                             orderCartAmountByFormValues +
                             (bookingSummaryProps?.transactionFee || 0)
@@ -159,9 +158,9 @@ const hasRemaingToPay =
                           (bookingSummaryProps?.transactionFee || 0)
                         }
                       />
-                          {hasRemaingToPay && (
+                      {hasRemaingToPay && (
                         <SummaryTotalBlock
-                          label={t("remaining")}
+                          label={t('remaining')}
                           amount={
                             orderTotalAmountByFormValues -
                             orderCartAmountByFormValues

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/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

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

@@ -434,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/sms-template/card/SmsTemplateCard.tsx

@@ -33,6 +33,8 @@ export function SmsTemplateCard({
   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/product-set/control/DateAndRecurrenceInput.tsx

@@ -198,7 +198,8 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   useEffect(() => {
     if (fields.length) {
@@ -308,9 +309,7 @@ export const DateAndRecurrenceInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>

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

@@ -195,7 +195,8 @@ export const DateInput = ({
     }, 100)
   }
 
-  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+  const errorMessage =
+    errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message
 
   return (
     <Form.Group>
@@ -284,9 +285,7 @@ export const DateInput = ({
             })}
           />
 
-          <div className='manual-form-error'>
-            {errorMessage}
-          </div>
+          <div className='manual-form-error'>{errorMessage}</div>
         </div>
       </OverlayTrigger>
     </Form.Group>