@licklist/design 0.71.18-dev.1 → 0.71.18-dev.11

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/activity-card/ActivityCard.stories.tsx

@@ -27,7 +27,6 @@ export const GridView: Story<ActivityCardProps> = (props) => {
 GridView.args = {
   layout: LAYOUT_GRID,
   title: 'Clay Pigeons & Axe Thowing',
-  duration: '60 mins',
   price: 'from £20',
 }
 
@@ -46,6 +45,5 @@ export const ListView: Story<ActivityCardProps> = (props) => {
 ListView.args = {
   layout: LAYOUT_LIST,
   title: 'Clay Pigeons & Axe Thowing',
-  duration: '60 mins',
   price: 'from £20',
 }

package/src/iframe/activity-card/ActivityCard.tsx

@@ -10,7 +10,6 @@ export const LAYOUT_LIST = 'list'
 
 export type ActivityCardProps = {
   title: ReactNode
-  duration: ReactNode
   price: ReactNode
   description?: ReactNode
   onSelect: () => void
@@ -24,7 +23,6 @@ export type ActivityCardProps = {
 
 export const ActivityCard = ({
   title,
-  duration,
   price,
   description,
   availableTimes,
@@ -48,7 +46,6 @@ export const ActivityCard = ({
 
         <div>
           <div className='activity-card-title'>{title}</div>
-          {duration && <div>{duration}</div>}
           {price && <div>{price}</div>}
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
@@ -79,7 +76,6 @@ export const ActivityCard = ({
       <div className='activity-card-info'>
         <div className='activity-card-title mb-2'>{title}</div>
         {availableTimes && <div>{availableTimes}</div>}
-        {duration && <div>{duration}</div>}
         {price && <div>{price}</div>}
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>

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

@@ -12,6 +12,7 @@ interface TicketDescriptionProps {
   title: string
   description: string
   className?: string
+  classNameProductModal?: string
   images: Image[] | null
   price?: ReactNode
   isRequired?: boolean
@@ -24,6 +25,7 @@ export function TicketDescription({
   title,
   description,
   className = '',
+  classNameProductModal = '',
   images,
   price,
   isRequired = false,
@@ -47,10 +49,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 ? (

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

@@ -17,6 +17,7 @@ export const BookingSummary = ({
   formValues = {},
   shouldHidePeopleAmount,
   eventName,
+  headerTitle,
   transactionFee = 0,
   productsWithErrors = [],
   isLoading,
@@ -43,6 +44,7 @@ export const BookingSummary = ({
       <BookingSummaryAccordion
         isPaymentPage={isPaymentPage}
         hasPeopleInput={hasPeopleInput}
+        title={headerTitle}
         headerComponent={headerComponent}
       >
         <div className='event-info'>

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

@@ -2,6 +2,8 @@ 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 { calculateTotalModifiersPrice } from '../../utils'
+import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
 
 type ProductSummaryProps = {
   name?: string
@@ -19,11 +21,16 @@ export const ProductSummary = ({
 
   const priceForOneProduct = orderProduct?.price
 
+  const modifierSetsPrice = calculateTotalModifiersPrice(
+    orderProduct?.orderModifiersSets,
+  )
+
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',
     currency: Config.Currency.GBP,
   })
 
+
   return (
     <div className='product'>
       <p className='m-0 name'>{name ?? orderProduct?.name}</p>
@@ -32,9 +39,22 @@ export const ProductSummary = ({
           {t('shortQuantity')}:&nbsp;{orderProduct?.quantity}
         </p>
 
-        <p className='price'>{fullPrice}</p>
+        {modifierSetsPrice && <p className='price'>{fullPrice}</p>}
       </div>
 
+      {!!orderProduct?.orderModifiersSets?.length && (
+        <>
+          {orderProduct.orderModifiersSets.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/types/index.ts

@@ -24,4 +24,5 @@ export type BookingSummaryProps = {
   isPaymentPage?: boolean
   headerComponent?: ReactElement
   footer?: ReactElement
+  headerTitle?: string
 }

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'
 
@@ -13,6 +17,9 @@ export const cartSumByOrderProducts = ({
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
+    const modifiersPrice = calculateTotalModifiersPrice(
+      product?.orderModifiersSets,
+    )
 
     const price = isTotalSum
       ? product?.price
@@ -20,10 +27,44 @@ export const cartSumByOrderProducts = ({
         ? 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>
+        )
+      }}
     />
   )
 }