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

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetForm.tsx

@@ -0,0 +1,212 @@
+import { useMemo } from 'react'
+import { Controller, FormProvider, useForm } from 'react-hook-form'
+import { Button, Form } from 'react-bootstrap'
+import { isEmpty, uniqBy } from 'lodash'
+import { useTranslation } from 'react-i18next'
+import { useIntl } from 'react-intl'
+import { Currency } from '@licklist/core/dist/Config'
+import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { OrderModifier } from '@licklist/core/dist/DataMapper/Order/OrderModifierDataMapper'
+import { NumberInputHorizontal } from 'src/sales'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { MAX_PRODUCT_NUMBER } from '../../order-process/components/CategoryProduct/constants'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { getOrderProductModifiersPrice } from '../../order-process/components/BookingSummary/utils'
+import { ProductControl } from './controll/ProductControll'
+
+export interface ManualBookingFormValues {
+  steps: MenuStep[]
+}
+
+interface ProductWithModifierSetFormProps {
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+const filteredOrderModifierSets = (
+  modifiersSet: OrderModifier[],
+): OrderModifier[] => {
+  if (!modifiersSet) return []
+  const orderModifier = modifiersSet
+    ?.flat()
+    .filter((modifier) => !!modifier?.quantity)
+
+  const filteredOrderModifier = uniqBy(
+    orderModifier,
+    (item) => `${item.modifierId}-${item.modifierSetId}`,
+  )
+
+  return filteredOrderModifier || []
+}
+
+export const ProductWithModifierSetForm = ({
+  product,
+  category,
+  editOrderModifier,
+  onChange,
+}: ProductWithModifierSetFormProps) => {
+  const form = useForm({ mode: 'onChange' })
+  const { t } = useTranslation(['App', 'Sale', 'Validation'])
+
+  const {
+    formState: { errors, isSubmitting, isValid },
+    control,
+    trigger,
+    watch,
+  } = form
+  const defaultProductQuantity = editOrderModifier?.productQuantity ?? 0
+
+  const valuesOrder = watch()
+  const productQuantity = valuesOrder?.product?.quantity ?? defaultProductQuantity
+
+  const orderModifiersSets =
+    valuesOrder[`${product.id}`]?.orderProductModifiers || []
+
+  const filteredOrderModifiers = filteredOrderModifierSets(orderModifiersSets)
+
+  const orderModifierSets: OrderModifierByProduct[] = useMemo(() =>  [
+      {
+        productQuantity: productQuantity ?? 1,
+        modifiers: filteredOrderModifiers,
+      },
+    ]
+  , [filteredOrderModifiers, productQuantity])
+
+  const onSubmit = (event) => {
+    event.preventDefault()
+    trigger(`${product.id}`)
+
+    if (!isValid) return undefined
+    const productOrder: FormOrderItem = {
+      id: product.id,
+      name: product.name,
+      deposit: product?.deposit,
+      hasDeposit: category.allowDeposits && product?.deposit < product.price,
+      price: product.price,
+      productCategoryId: category.id,
+      quantity: productQuantity,
+      capacity: product?.capacity,
+      orderModifiersSets: orderModifierSets,
+    }
+    if (productOrder) {
+      return onChange(productOrder)
+    }
+    return undefined
+  }
+
+  const handleProductQuantityChange = (
+    value: number,
+    onChange: (val: number) => void,
+  ) => {
+    if (value < 0) {
+      onChange(0)
+    } else if (value > MAX_PRODUCT_NUMBER) {
+      onChange(MAX_PRODUCT_NUMBER)
+    } else {
+      onChange(value)
+    }
+  }
+
+  const disabledAddButton = useMemo(() => {
+    if (defaultProductQuantity) return false
+    return !productQuantity || !isEmpty(errors)
+  }, [defaultProductQuantity, productQuantity, errors])
+
+  const modifierPrice = getOrderProductModifiersPrice(orderModifierSets[0])
+  const productWithModifierPrice =
+    (product.price * productQuantity || 0) + modifierPrice
+  const { formatNumber } = useIntl()
+  const formatToCurrency = (value: number) =>
+    formatNumber(value, { style: 'currency', currency: Currency.GBP })
+
+  return (
+    <FormProvider {...form}>
+      <Form>
+        <div className='manual-booking-form'>
+          <ProductControl
+            product={product}
+            editOrderModifier={editOrderModifier}
+          />
+          <div className='bg-light m-2 p-2 rounded'>
+            <Controller
+              control={control}
+              name='product.quantity'
+              rules={{
+                min: {
+                  value: 1,
+                  message: t('Validation:fieldMinNumber', {
+                    attribute: t('product'),
+                    min: 1,
+                  }) as string,
+                },
+                max: {
+                  value: !product.isUnlimited
+                    ? product.maxQuantity
+                    : MAX_PRODUCT_NUMBER,
+                  message: t('Validation:fieldMaxNumber', {
+                    attribute: t('product'),
+                    max: product.maxQuantity,
+                  }) as string,
+                },
+              }}
+              render={({
+                field: { onChange, value, ref },
+                fieldState: { invalid, error },
+              }) => (
+                <div className='mb-8 d-flex flex-column'>
+                  <div className='quantity-container-product w-100'>
+                    <NumberInputHorizontal
+                      ref={ref}
+                      size='big'
+                      onChange={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onMinusClick={(val) =>
+                        handleProductQuantityChange(val, onChange)
+                      }
+                      onPlusClick={(val) => {
+                        handleProductQuantityChange(val, onChange)
+                      }}
+                      min={0}
+                      max={100}
+                      value={value || defaultProductQuantity}
+                      className={clsx(invalid && 'error')}
+                      isLoading={isSubmitting}
+                    />
+                  </div>
+                  <div className=' d-flex flex-column  align-items-center justify-content-center'>
+                    <div className='modifier-price pb-4 pl-5'>
+                      {formatToCurrency(product.price)}
+                    </div>
+                    {error?.message && (
+                      <div className='d-flex justify-content-center mt-3 w-100'>
+                        <p className='iframe-event__message-error'>
+                          {error.message}
+                        </p>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            />
+            <Button
+              as='button'
+              variant='primary'
+              className='w-100'
+              disabled={disabledAddButton}
+              onClick={onSubmit}
+            >
+              {`${t('Design:add')}${modifierPrice ? ` (${formatToCurrency(productWithModifierPrice)})` : ''}`}
+            </Button>
+          </div>
+        </div>
+      </Form>
+    </FormProvider>
+  )
+}

package/src/iframe/ProductWithModifierModal/ModifierSetModal/ProductWithModifierSetModal.tsx

@@ -0,0 +1,75 @@
+import { useDialogContext, DialogContextProvider } from 'src/modals'
+import { Modal } from 'react-bootstrap'
+import { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
+import { Product } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { TicketDescription } from 'src/iframe/event'
+import clsx from 'clsx'
+import { ProductCategory } from 'dist/product-set/types'
+import { FormOrderItem } from '../../order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput'
+import { useOnWindowUnmount } from '../../order-process/components/utils/useOnWindowUnmount'
+import { ProductWithModifierSetForm } from './ProductWithModifierSetForm'
+
+interface ProductWithModifierSetModalProps {
+  show: boolean
+  onHide: () => void
+  product: Product
+  category: ProductCategory
+  editOrderModifier?: OrderModifierByProduct
+  onChange: (product: FormOrderItem) => void
+}
+
+export const ProductWithModifierSetModal = ({
+  show,
+  onHide,
+  product,
+  category,
+  onChange,
+  editOrderModifier,
+}: ProductWithModifierSetModalProps) => {
+  const { onBeforeUnload, onPopState } = useDialogContext()
+  useOnWindowUnmount({ onBeforeUnload, onPopState })
+
+  return (
+    <DialogContextProvider>
+      <Modal
+        onHide={onHide}
+        show={show}
+        className='m-0 manual-booking-form-modal mt-0 h-100 p-0'
+        dialogClassName='manual-booking-dialog mt-0'
+      >
+        <div className='close-button'>
+          <button
+            type='button'
+            onClick={onHide}
+            onKeyPress={onHide}
+            className='btn btn-light rounded-circle position-absolute top-0 end-0 m-2'
+          >
+            &times;
+          </button>
+        </div>
+        <div className='right-block' id='select-event-container'>
+          <div className='manual-booking-container'>
+            <div className='manual-booking-header'>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className={clsx('iframe-event__product-description', !product.images && 'mt-4')}
+                classNameProductModal='d-block'
+                images={product.images}
+                isRequired={product.isRequired}
+                canExpand
+              />
+            </div>
+            <ProductWithModifierSetForm
+              product={product}
+              onHide={onHide}
+              editOrderModifier={editOrderModifier}
+              onChange={onChange}
+              category={category}
+            />
+          </div>
+        </div>
+      </Modal>
+    </DialogContextProvider>
+  )
+}

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