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

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

@@ -0,0 +1,393 @@
+import { Col, Form } from 'react-bootstrap'
+import { useTranslation } from 'react-i18next'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import { Modifier } from '@licklist/core/dist/DataMapper/Product/ModifierDataMapper'
+import { ModifierSet } from '@licklist/core/dist/DataMapper/Product/ModifierSetDataMapper'
+import { ChangeEvent, useEffect, useMemo } from 'react'
+import { useId } from '@mantine/hooks'
+import { Controller, useFormContext } from 'react-hook-form'
+import { xor } from 'lodash'
+import clsx from 'clsx'
+import { Currency } from '@licklist/core/dist/Config'
+import { useIntl } from 'react-intl'
+import { MAX_PRODUCT_NUMBER } from 'src/iframe/order-process/components/CategoryProduct/constants'
+import { NumberInputHorizontal } from 'src/sales'
+import { selectModifierType } from '../../utils'
+
+interface ModifiersSetControllProps {
+  modifiers?: Modifier[]
+  modifierSet: ModifierSet
+  isLoading?: boolean
+  isEditMode?: boolean
+  productId: number
+  orderProductModifierSets?: OrderModifier[]
+}
+
+export const ModifiersSetControl = ({
+  modifierSet,
+  modifiers,
+  productId,
+  isLoading = false,
+  isEditMode = false,
+  orderProductModifierSets,
+}: ModifiersSetControllProps) => {
+  const { control, watch, setValue, trigger } = useFormContext()
+  const { t } = useTranslation('App')
+
+  const orderModifiersSets = watch(`${productId}.orderProductModifiers`)
+
+  const { formatNumber } = useIntl()
+  const formatToCurrency = (value: number) =>
+    formatNumber(value, { style: 'currency', currency: Currency.GBP })
+
+  const currentOrderModifiersSets = useMemo(
+    () =>
+      orderProductModifierSets?.filter(
+        (modifier) => modifier.modifierSetId === modifierSet.id,
+      ) || [],
+    [orderProductModifierSets, modifierSet.id],
+  )
+
+  const onChangeModifiers = (
+    e: ChangeEvent<HTMLInputElement>,
+    type: selectModifierType,
+    quantity?: number,
+  ) => {
+    if (!modifiers) return
+
+    const selectedModifier = modifiers?.find(
+      (item) => item.id === Number(e.target.defaultValue || e.target.id),
+    )
+    const checkSelectedModifier =
+      orderModifiersSets?.find(
+        (modifier) => modifier?.modifierId === selectedModifier?.id,
+      )?.quantity === 1
+
+    if (selectedModifier && type === 'radio') {
+      modifiers.forEach((modifier) => {
+        const isSelected = modifier.id === selectedModifier.id
+        const orderModifiers: OrderModifier = {
+          modifierId: modifier.id,
+          price: modifier.price,
+          productId,
+          name: modifier.name,
+          quantity: isSelected ? 1 : 0,
+          modifierSetId: modifierSet.id,
+        }
+
+        setValue(
+          `${productId}.orderProductModifiers.${modifierSet.id}.${orderModifiers.modifierId}`,
+          orderModifiers,
+        )
+      })
+    }
+
+    if (selectedModifier && type === 'checkbox') {
+      const orderModifiers: OrderModifier = {
+        modifierId: selectedModifier.id,
+        price: selectedModifier.price,
+        productId,
+        name: selectedModifier.name,
+        quantity: checkSelectedModifier ? 0 : 1,
+        modifierSetId: modifierSet.id,
+      }
+      setValue(
+        `${productId}.orderProductModifiers.${modifierSet.id}.${selectedModifier.id}`,
+        orderModifiers,
+      )
+    }
+
+    if (selectedModifier && type === 'selector') {
+      const orderModifiers: OrderModifier = {
+        modifierId: selectedModifier.id,
+        price: selectedModifier.price,
+        productId,
+        quantity,
+        name: selectedModifier.name,
+        modifierSetId: modifierSet.id,
+      }
+      setValue(
+        `${productId}.orderProductModifiers.${modifierSet.id}.${selectedModifier.id}`,
+        orderModifiers,
+      )
+    }
+
+    trigger(`${productId}.orderProductModifiers`)
+  }
+
+  useEffect(() => {
+    if (!orderProductModifierSets?.length) return
+    orderProductModifierSets.forEach((orderModifier) =>
+      setValue(
+        `${productId}.orderProductModifiers.${orderModifier.modifierSetId}.${orderModifier.modifierId}`,
+        orderModifier,
+      ),
+    )
+  }, [isEditMode])
+
+  const radioButtonDefaultModifier = currentOrderModifiersSets.find((modifier) => 
+    modifierSet.modifiers.some((rl) => rl.id === modifier.modifierId)
+)?.modifierId.toString();
+
+  return (
+    <>
+      {modifierSet?.maxItems === 1 &&
+      modifiers.every((modifier) => modifier.maxItems === 1) ? (
+        <>
+          <Controller
+            name={`${productId}.modifier`}
+            control={control}
+            rules={{
+              required: {
+                value: !!modifierSet.minItems,
+                message: t('Validation:fieldRequired') as string,
+              },
+            }}
+            render={({ field, fieldState }) => {
+              const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+                onChangeModifiers(e, 'radio')
+                field.onChange(e.target.id)
+              }
+
+              return (
+                <>
+                  {modifiers.map((modifier) => {
+                    const selectedOrderModifierId = currentOrderModifiersSets
+                      ?.find(
+                        (orderModifier) =>
+                          orderModifier.modifierId === modifier.id,
+                      )
+                      ?.modifierId?.toString()
+
+                    return (
+                      <Col key={modifier.id}>
+                        <div className='modifier-container d-flex flex-column p-2'>
+                          <Form.Check
+                            className='custom-radio p-2'
+                            inline
+                            id={modifier.id.toString()}
+                            defaultChecked={!!selectedOrderModifierId}
+                            defaultValue={selectedOrderModifierId || modifier.id.toString()}
+                            checked={field.value === modifier.id.toString()}
+                            onChange={onChange}
+                            type='radio'
+                            label={modifier.name}
+                            name={modifier.name}
+                          />
+                          <div className='mt-3 w-100 pl-2'>
+                            <p>{modifier.description}</p>
+                            <div className='modifier-price'>
+                              + {formatToCurrency(modifier.price)}
+                            </div>
+                          </div>
+                        </div>
+                      </Col>
+                    )
+                  })}
+                  {fieldState.error && (
+                    <div className='invalid-feedback d-block'>
+                      {fieldState.error.message}
+                    </div>
+                  )}
+                </>
+              )
+            }}
+            defaultValue={radioButtonDefaultModifier}
+          />
+        </>
+      ) : (
+        <>
+          {modifiers?.map((modifier, index) => {
+            const selectedOrderModifier = currentOrderModifiersSets?.find(
+              (orderModifier) => orderModifier.modifierId === modifier.id,
+            )?.quantity
+
+            return (
+              <>
+                {modifier.maxItems === 1 ? (
+                  <>
+                    <Controller
+                      name={`${productId}.${modifierSet.id}.modifiers[${index}]`}
+                      control={control}
+                      rules={{
+                        required: {
+                          value: !!modifier.minItems,
+                          message: t('Validation:fieldRequired') as string,
+                        },
+                        validate: (value) => {
+                          const { maxItems, minItems } = modifier
+                          if (value?.length > maxItems) {
+                            return t('Validation:quantityMaxNumberModifier', {
+                              max: maxItems,
+                            }) as string
+                          }
+
+                          if (value?.length < minItems) {
+                            return t('Validation:quantityMinNumberModifier', {
+                              min: minItems,
+                            }) as string
+                          }
+
+                          return true
+                        },
+                      }}
+                      render={({ field, fieldState: { error } }) => {
+                        const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+                          onChangeModifiers(e, 'checkbox')
+                          field.onChange(
+                            xor(field.value, [Number(e.target.value)]),
+                          )
+                        }
+
+                        return (
+                          <Col
+                            className='modifier-container pl-4'
+                            key={modifier.id.toString()}
+                          >
+                            <div className='d-flex justify-content-between pl-2 align-items-center'>
+                              <Checkbox
+                                value={modifier.id}
+                                onChange={onChange}
+                                label={modifier.name}
+                                defaultChecked={!!selectedOrderModifier}
+                              />
+                            </div>
+                            <div className='mt-3 w-100 pl-2'>
+                              <p>{modifier.description}</p>
+                              <div className='modifier-price'>
+                                + {formatToCurrency(modifier.price)}
+                              </div>
+                            </div>
+                            {error?.message && (
+                              <div className='invalid-feedback d-flex'>
+                                {error?.message}
+                              </div>
+                            )}
+                          </Col>
+                        )
+                      }}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <div className='modifier-header m-0'>
+                      <div className='title'>{modifier.name}</div>
+                    </div>
+                    <Controller
+                      control={control}
+                      name={`${productId}.${modifierSet.id}.modifiers[${index}].quantity`}
+                      rules={{
+                        required: {
+                          value: !!modifier.minItems,
+                          message: t('Validation:fieldRequired') as string,
+                        },
+                        validate: (value) => {
+                          const { maxItems, minItems } = modifier
+                          if (value > maxItems) {
+                            return t('Validation:quantityMaxNumberModifier', {
+                              max: maxItems,
+                            }) as string
+                          }
+
+                          if (value < minItems) {
+                            return t('Validation:quantityMinNumberModifier', {
+                              min: minItems,
+                            }) as string
+                          }
+
+                          return true
+                        },
+                      }}
+                      render={({
+                        field: { onChange, value, ref },
+                        fieldState: { invalid, error },
+                      }) => {
+                        const onChangeProductQuantity = (val: number) => {
+                          const quantity = Math.min(
+                            MAX_PRODUCT_NUMBER,
+                            Math.max(0, Math.ceil(val)),
+                          )
+                          onChange(quantity)
+                          trigger(
+                            `${productId}.${modifierSet.id}.modifiers[${index}].quantity`,
+                          )
+                          onChangeModifiers(
+                            { target: { id: modifier.id.toString() } },
+                            'selector',
+                            quantity,
+                          )
+                        }
+
+                        return (
+                          <div className='modifier-container'>
+                            <div className='d-flex align-items-center column mb-8 pl-6 pt-2'>
+                              <div className='quantity-container mb-0'>
+                                <NumberInputHorizontal
+                                  ref={ref}
+                                  size='big'
+                                  onChange={onChangeProductQuantity}
+                                  onMinusClick={onChangeProductQuantity}
+                                  onPlusClick={onChangeProductQuantity}
+                                  min={0}
+                                  max={MAX_PRODUCT_NUMBER}
+                                  value={value ?? selectedOrderModifier ?? 0}
+                                  className={clsx(invalid && 'error')}
+                                  isLoading={isLoading}
+                                />
+                              </div>
+                            </div>
+                            <div className='p-2 mt-3 w-100 pl-4'>
+                              <p className='pl-2'>{modifier.description}</p>
+                              <div className='pl-2 modifier-price'>
+                                + {formatToCurrency(modifier.price)}
+                              </div>
+                              {error?.message && (
+                                <div className='d-flex mt-3 w-100'>
+                                  <p className='iframe-event__message-error'>
+                                    {error.message}
+                                  </p>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        )
+                      }}
+                    />
+                  </>
+                )}
+              </>
+            )
+          })}
+        </>
+      )}
+    </>
+  )
+}
+
+type CheckboxProps = {
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void
+  value: number
+  label: string
+  defaultChecked: boolean
+}
+
+const Checkbox = ({
+  onChange,
+  value,
+  label,
+  defaultChecked,
+}: CheckboxProps) => {
+  const checkboxId = useId()
+
+  return (
+    <Form.Group controlId={checkboxId} className='custom-checkbox mt-0'>
+      <Form.Check
+        label={label}
+        value={value}
+        defaultChecked={defaultChecked}
+        onChange={onChange}
+        type='checkbox'
+      />
+    </Form.Group>
+  )
+}

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