@licklist/design 0.71.24 → 0.72.0-dev.0

package/src/iframe/ProductWithModifierModal/ModifierSetModal/controll/ProductControll.tsx

@@ -0,0 +1,98 @@
+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 { ModifiersSetControl } from './ModifierSetControll'
+import { orderProductModifiersQuantity } from '../../utils'
+
+interface ProductControlProps {
+  product: Product
+  isLoading?: boolean
+  editOrderModifier?: OrderModifierByProduct
+}
+
+export const ProductControl = ({
+  product,
+  isLoading = false,
+  editOrderModifier,
+}: ProductControlProps) => {
+  const { t } = useTranslation() // Added translation hook
+  const {
+    control,
+    watch,
+    formState: { isValid },
+    clearErrors,
+  } = useFormContext()
+  const modifiersSet = product?.modifiersSet || []
+  const orderModifiersSets = watch(`${product.id}.orderProductModifiers`)
+
+  useEffect(() => {
+    if (!isValid) return
+    clearErrors()
+  }, [isValid, clearErrors])
+
+  return (
+    <div className='mb-8 pt-4'>
+      <div className='d-flex flex-column'>
+        {modifiersSet.map((modifierSet) => {
+          const orderProductModifiersMaxQuantity =
+            orderProductModifiersQuantity(orderModifiersSets, modifierSet)
+
+          return (
+            <div className='modifier-set-container' key={modifierSet.id}>
+              <div className='modifier-header'>
+                <div className='title'>{modifierSet.name}</div>
+              </div>
+              <Controller
+                control={control}
+                name={`${product.id}.${modifierSet.id}`}
+                rules={{
+                  validate: () => {
+                    const { maxItems, minItems } = modifierSet
+
+                    if (
+                      !!minItems &&
+                      orderProductModifiersMaxQuantity < minItems
+                    ) {
+                      return t('Validation:quantityMinNumberModifier', {
+                        min: minItems,
+                      }) as string
+                    }
+
+                    if (orderProductModifiersMaxQuantity > maxItems) {
+                      return t('Validation:quantityMaxNumberModifier', {
+                        max: maxItems,
+                      }) as string
+                    }
+
+                    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>
+                      )}
+                    </>,
+                  )
+                }}
+              />
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/index.ts

@@ -0,0 +1 @@
+import './ProductWithModifierSetModal.js'

package/src/iframe/ProductWithModifierModal/index.ts

@@ -0,0 +1 @@
+export { ProductWithModifierSetModal } from './ModifierSetModal/ProductWithModifierSetModal'

package/src/iframe/ProductWithModifierModal/utils.ts

@@ -0,0 +1,29 @@
+import { OrderModifier } from "@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper"
+import { uniqBy } from "lodash"
+
+export type selectModifierType = 'radio' | 'checkbox' | 'selector'
+
+export const filteredOrderModifierSets = (
+    modifiersSet: OrderModifier[],
+  ): OrderModifier[] => {
+    if (!modifiersSet) return []
+    const orderModifier = modifiersSet
+      ?.flat()
+      ?.filter((modifier) => !!modifier?.quantity)
+
+    return uniqBy(
+      orderModifier,
+      (item) => `${item.modifierId}-${item.modifierSetId}`,
+    )
+  }
+
+  export const orderProductModifiersQuantity = (
+    orderModifiersSets: OrderModifier[],
+    modifierSet,
+  ) => {
+    if (!orderModifiersSets?.length) return 0
+    const filteredOrderModifier = filteredOrderModifierSets(orderModifiersSets)
+    return filteredOrderModifier.filter(
+      (item) => item?.modifierSetId === modifierSet.id,
+    ).length
+  }

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -12,10 +12,12 @@ interface TicketDescriptionProps {
   title: string
   description: string
   className?: string
+  classNameProductModal?: string
   images: Image[] | null
   price?: ReactNode
   isRequired?: boolean
   canExpand?: boolean
+  isModal?: boolean
 }
 
 const DESCRIPTION_MAX_LENGTH = 120
@@ -24,10 +26,12 @@ export function TicketDescription({
   title,
   description,
   className = '',
+  classNameProductModal = '',
   images,
   price,
   isRequired = false,
   canExpand = true,
+  isModal= false
 }: TicketDescriptionProps) {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 
@@ -47,10 +51,10 @@ export function TicketDescription({
         className='ticket-description__wrapper'
         style={descriptionWrapperStyle}
       >
-        <div className='ticket-description__wrapper-children'>
+        <div className={clsx('ticket-description__wrapper-children', classNameProductModal)}>
           {imageSrc && (
-            <div className='image-wrapper'>
-              <img src={imageSrc} alt={title} />
+            <div className={clsx('image-wrapper', classNameProductModal && 'w-100 h-25')}>
+              <img className={clsx(classNameProductModal && 'w-100')} src={imageSrc} alt={title} />
             </div>
           )}
           {canExpand && description.length > DESCRIPTION_MAX_LENGTH ? (
@@ -63,6 +67,7 @@ export function TicketDescription({
                 title={title}
                 isRequired={isRequired}
                 description={description}
+                isModal={isModal}
               />
             </TextExpand>
           ) : (
@@ -70,6 +75,7 @@ export function TicketDescription({
               title={title}
               isRequired={isRequired}
               description={description}
+              isModal={isModal}
             />
           )}
         </div>
@@ -83,8 +89,9 @@ const Description = ({
   title,
   isRequired,
   description,
+  isModal
 }: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
-  <div className='description-content'>
+  <div className={clsx('description-content', isModal && 'ml-4 mt-2' )}>
     <div className='d-flex flex-column'>
       <div className='product-title'>
         {title} {isRequired && <span>*</span>}

package/src/iframe/order-process/components/BookingSummary/components/ProductSummary/ProductSummary.tsx

@@ -2,11 +2,19 @@ import { useTranslation } from 'react-i18next'
 import { useIntl } from 'react-intl'
 import * as Config from '@licklist/core/dist/Config'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { calculateTotalModifiersPrice } from '../../utils'
+import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
+
+
+interface IOrderProduct extends OrderItem {
+  orderProductModifiers?:  OrderModifierByProduct[] | null;
+}
 
 type ProductSummaryProps = {
   name?: string
   productQuantityError?: string
-  orderProduct: OrderItem
+  orderProduct: IOrderProduct
 }
 
 export const ProductSummary = ({
@@ -16,9 +24,10 @@ export const ProductSummary = ({
 }: ProductSummaryProps) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
-
   const priceForOneProduct = orderProduct?.price
 
+  const modifiersSets =  orderProduct?.orderModifiersSets || orderProduct?.orderProductModifiers
+
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',
     currency: Config.Currency.GBP,
@@ -35,6 +44,19 @@ export const ProductSummary = ({
         <p className='price'>{fullPrice}</p>
       </div>
 
+      {!!modifiersSets.length && (
+        <>
+          {modifiersSets.map((modifier, index) => (
+            <ProductWithModifier
+              key={modifier.productQuantity.toString()}
+              modifier={modifier}
+              modifierKey={index}
+              isSummary
+            />
+          ))}
+        </>
+      )}
+
       {productQuantityError && (
         <p className='iframe-event__message-error'>{productQuantityError}</p>
       )}

package/src/iframe/order-process/components/BookingSummary/components/SummaryTotal/SummaryTotal.tsx

@@ -22,24 +22,23 @@ export const SummaryTotal = ({
 
   const cartSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({orderProducts}) + transactionFee
+    : cartSumByOrderProducts({ orderProducts }) + transactionFee
 
-
-    const totalSum = isFreePayment
+  const totalSum = isFreePayment
     ? 0
-    : cartSumByOrderProducts({orderProducts, isTotalSum: true}) +
-      transactionFee;
-      
-    const hasRemaingToPay = totalSum > cartSum;
+    : cartSumByOrderProducts({ orderProducts, isTotalSum: true }) +
+      transactionFee
+
+  const hasRemaingToPay = totalSum > cartSum
 
   if (!orderProducts.length) {
     return null
   }
 
   return (
-    <div className="d-flex flex-column justify-content-between">
+    <div className='d-flex flex-column justify-content-between'>
       <SummaryTotalBlock
-        label={t(hasRemaingToPay ? "payNow" : "total")}
+        label={t(hasRemaingToPay ? 'payNow' : 'total')}
         amount={cartSum}
       />
       {!!totalWithDiscount && !isFreePayment && (
@@ -50,9 +49,12 @@ export const SummaryTotal = ({
       )}
       {hasRemaingToPay && (
         <>
-        <SummaryTotalBlock label={t("remaining")} amount={totalSum - cartSum} />
+          <SummaryTotalBlock
+            label={t('remaining')}
+            amount={totalSum - cartSum}
+          />
 
-        <SummaryTotalBlock label={t("total")} amount={totalSum} />
+          <SummaryTotalBlock label={t('total')} amount={totalSum} />
         </>
       )}
     </div>

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -1,3 +1,7 @@
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import {
+  OrderModifierByProduct
+} from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
 import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import { OrderItem } from '@licklist/plugins/dist/types/context/Iframe/orderItems'
 
@@ -5,25 +9,62 @@ export const cartSumByOrderProducts = ({
   orderProducts,
   isTotalSum,
 }: {
-  orderProducts?: OrderItem[];
-  isTotalSum?: boolean;
+  orderProducts?: OrderItem[]
+  isTotalSum?: boolean
 }) => {
   if (!orderProducts || !orderProducts.length) {
     return 0
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
-    
+    const modifiersPrice = calculateTotalModifiersPrice(
+      product?.orderModifiersSets,
+    )
+
     const price = isTotalSum
       ? product?.price
       : product.hasDeposit
         ? product?.deposit
         : product?.price
 
-    return prevSumValue + price * product.quantity
+    return prevSumValue + price * product.quantity + modifiersPrice
   }, 0)
 }
 
+export const getModifierName = (
+  modifier: OrderModifierByProduct,
+) => {
+  const modifierName = (orderModifier: OrderModifier) => orderModifier?.modifier?.name  ??  orderModifier?.name
+  return `${modifier.modifiers.map((item) => (
+    item?.quantity > 1 ? `${item?.quantity}x - ${modifierName(item)}` : modifierName(item))).join(', ')}`
+}
+
+export const calculateTotalModifiersPrice = (
+  orderModifiersSets: OrderModifierByProduct[],
+) =>
+  orderModifiersSets
+    ?.map((set) =>
+      set.modifiers.reduce(
+        (sum, modifier) =>
+          sum + modifier.price * modifier.quantity * set.productQuantity,
+        0,
+      ),
+    )
+    .reduce((total, setTotal) => total + setTotal, 0)
+
+export const getOrderProductModifiersPrice = (
+  modifierFromProduct: OrderModifierByProduct,
+) => {
+  const { modifiers, productQuantity } = modifierFromProduct
+  const modifiersPrices = modifiers.reduce(
+    (prevSumModifier: number, modifier: OrderModifier) =>
+      prevSumModifier + modifier.price * modifier.quantity,
+    0,
+  )
+
+  return modifiersPrices * productQuantity
+}
+
 export const getProductError = (
   productsWithErrors: QuantityCheckProductInfo[],
   productId: OrderItem['id'],

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
@@ -10,8 +10,14 @@ 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 { TicketDescription } from '../../../event/ticket-description'
 import { ProductQuantityInput } from './components/ProductQuantityInput'
+import { FormOrderItem } from './components/ProductQuantityInput/ProductQuantityInput'
+import { ProductWithModifier } from './components/ProductWithModifier/ProductWithModifier'
 
 interface CategoryProductProps {
   product: Product
@@ -31,7 +37,9 @@ export const CategoryProduct = ({
   const { formatNumber } = useIntl()
   const { t } = useTranslation(['Design', 'Validation'])
   const { control, clearErrors, setError } = useFormContext()
-
+  const [editOrderModifierIndex, setEditOrderModifierIndex] =
+    useState<OrderModifierByProduct>(undefined)
+  const [modifierIndex, setModifierIndex] = useState<number>(undefined)
   const hasDeposits = category.allowDeposits && product?.deposit < product.price
 
   const productQuantityError = useMemo(() => {
@@ -118,83 +126,155 @@ export const CategoryProduct = ({
       render={({
         field: { onChange, value: productInfo = {}, ref },
         fieldState: { invalid, error },
-      }) => (
-        <div id={String(product.id)} className='iframe-event__category-product'>
-          <div className={clsx('iframe-event__product', invalid && 'error')}>
-            <TicketDescription
-              title={product.name}
-              description={product.description}
-              className={clsx('iframe-event__product-description')}
-              images={product.images}
-              isRequired={product.isRequired}
-              canExpand={canExpandDescription}
-            />
-          </div>
-          <div className='iframe-event__product-price-wrapper'>
-            <span className='product-price'>
-              {formatNumber(product.price, {
-                style: 'currency',
-                currency: Config.Currency.GBP,
-              })}
-            </span>
-            <ProductQuantityInput
-              onChange={onChange}
-              productInfo={productInfo}
-              refCallback={ref}
-              clearErrors={clearErrors}
-              product={{
-                ...product,
-                isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-              }}
-              category={category}
-              invalid={invalid}
-            />
-          </div>
-          {hasDeposits && !category?.remainderExpireAfter && (
-            <div className='mt-4'>
-              {t('Design:payNowAndUponArrival', {
-                deposit: formatNumber(product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-                remainder: formatNumber(product.price - product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-              })}
-            </div>
-          )}
+      }) => {
+        const deleteOrderModifier = (orderModifierIndex: number) => {
+          const removedOrderModifierIndex = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets?.filter(
+            (_, index) => index !== orderModifierIndex,
+          )
+          const productInfoWithRemove = {
+            ...productInfo,
+            orderModifiersSets: removedOrderModifierIndex,
+            quantity: removedOrderModifierIndex.reduce(
+              (acc, product) => product.productQuantity + acc,
+              0,
+            ),
+          }
+          onChange(productInfoWithRemove)
+        }
 
-          {hasDeposits && category?.remainderExpireAfter > 0 && (
-            <div className='mt-4'>
-              {t('Design:payNowAndReminderDays', {
-                deposit: formatNumber(product?.deposit, {
-                  style: 'currency',
-                  currency: Config.Currency.GBP,
-                }),
-                remainder: formatNumber(product.price - product?.deposit, {
+        const editOrderModifierSet = (orderModifierIndex: number) => {
+          const editOrderModifierIndex = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets.find((_, index) => {
+            setModifierIndex(index)
+            return index === orderModifierIndex
+          })
+          setEditOrderModifierIndex(editOrderModifierIndex)
+        }
+
+        const onChangeWithModifierSets = (value: FormOrderItem) => {
+          const editedOrderModifiersSets = (
+            productInfo as FormOrderItem
+          ).orderModifiersSets
+            ?.filter((_, index) => index !== modifierIndex)
+            .concat(value.orderModifiersSets)
+           
+            onChange({
+            ...value,
+            orderModifiersSets: editedOrderModifiersSets,
+            quantity: editedOrderModifiersSets.reduce(
+              (acc, product) => product.productQuantity + acc,
+              0,
+            ),
+          })
+          setEditOrderModifierIndex(undefined)
+        }
+
+        return (
+          <div
+            id={String(product.id)}
+            className='iframe-event__category-product'
+          >
+            <div className={clsx('iframe-event__product', invalid && 'error')}>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className={clsx('iframe-event__product-description')}
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand={canExpandDescription}
+              />
+            </div>
+            <div className='iframe-event__product-price-wrapper'>
+              <span className='product-price'>
+                {formatNumber(product.price, {
                   style: 'currency',
                   currency: Config.Currency.GBP,
-                }),
-                days: category?.remainderExpireAfter,
-              })}
+                })}
+              </span>
+              <ProductQuantityInput
+                onChange={onChange}
+                productInfo={productInfo}
+                refCallback={ref}
+                clearErrors={clearErrors}
+                product={{
+                  ...product,
+                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
+                }}
+                category={category}
+                invalid={invalid}
+              />
             </div>
-          )}
-          {invalid && (
-            <div className='d-flex mt-3 w-100'>
-              <p className='iframe-event__message-error'>
-                {HookFormService.hasError(error, 'required') &&
-                  t('Design:pleaseSelectAtLeastFrom', {
-                    min: 1,
-                    type: 'item',
-                    from: 'this category',
-                  })}
-                {HookFormService.hasError(error, 'validate') && error.message}
-              </p>
-            </div>
-          )}
-        </div>
-      )}
+            {hasDeposits && !category?.remainderExpireAfter && (
+              <div className='mt-4'>
+                {t('Design:payNowAndUponArrival', {
+                  deposit: formatNumber(product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  remainder: formatNumber(product.price - product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                })}
+              </div>
+            )}
+            {(productInfo as FormOrderItem).orderModifiersSets?.length > 0 && (
+              <>
+                {(productInfo as FormOrderItem).orderModifiersSets.map(
+                  (modifier, index) => (
+                    <ProductWithModifier
+                      key={modifier.productQuantity.toString()}
+                      modifier={modifier}
+                      modifierKey={index}
+                      editOrderModifierSet={editOrderModifierSet}
+                      deleteOrderModifier={deleteOrderModifier}
+                    />
+                  ),
+                )}
+              </>
+            )}
+            {hasDeposits && category?.remainderExpireAfter > 0 && (
+              <div className='mt-4'>
+                {t('Design:payNowAndReminderDays', {
+                  deposit: formatNumber(product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  remainder: formatNumber(product.price - product?.deposit, {
+                    style: 'currency',
+                    currency: Config.Currency.GBP,
+                  }),
+                  days: category?.remainderExpireAfter,
+                })}
+              </div>
+            )}
+            {invalid && (
+              <div className='d-flex mt-3 w-100'>
+                <p className='iframe-event__message-error'>
+                  {HookFormService.hasError(error, 'required') &&
+                    t('Design:pleaseSelectAtLeastFrom', {
+                      min: 1,
+                      type: 'item',
+                      from: 'this category',
+                    })}
+                  {HookFormService.hasError(error, 'validate') && error.message}
+                </p>
+              </div>
+            )}
+            <ProductWithModifierSetModal
+              show={!!editOrderModifierIndex}
+              onHide={() => setEditOrderModifierIndex(undefined)}
+              editOrderModifier={editOrderModifierIndex}
+              onChange={onChangeWithModifierSets}
+              product={product}
+              category={category}
+            />
+          </div>
+        )
+      }}
     />
   )
 }

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

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}