@licklist/design 0.71.18-dev.8 → 0.71.18

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

@@ -1,393 +0,0 @@
-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' && quantity) {
-      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

@@ -1,98 +0,0 @@
-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

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

package/src/iframe/ProductWithModifierModal/index.ts

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

package/src/iframe/ProductWithModifierModal/utils.ts

@@ -1,29 +0,0 @@
-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/order-process/components/CategoryProduct/components/ProductWithModifier/ProductWithModifier.tsx

@@ -1,86 +0,0 @@
-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, isManualBooking)
-
-  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 min-vw-20 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

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

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

@@ -1,25 +0,0 @@
-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/static/loader/FullScreenLoader.tsx

@@ -1,16 +0,0 @@
-import clsx from 'clsx'
-import { LoaderIndicator, LoaderIndicatorProps } from './LoaderIndicator'
-
-interface FullScreenLoaderProps {
-  containerClassName?: string
-  indicatorProps?: LoaderIndicatorProps
-}
-
-export const FullScreenLoader = ({
-  containerClassName,
-  indicatorProps,
-}: FullScreenLoaderProps) => (
-  <div className={clsx('fullscreen-loader', containerClassName)}>
-    <LoaderIndicator {...indicatorProps} />
-  </div>
-)