@licklist/design 0.71.18-dev.18 → 0.71.18-dev.3

package/dist/iframe/order-process/components/CategoryProduct/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const MAX_PRODUCT_NUMBER = 100000;
-//# sourceMappingURL=constants.d.ts.map

package/dist/iframe/order-process/components/CategoryProduct/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/CategoryProduct/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,SAAS,CAAA"}

package/dist/iframe/order-process/components/CategoryProduct/constants.js

@@ -1,4 +0,0 @@
-var MAX_PRODUCT_NUMBER = 100000 // max number
-;
-
-export { MAX_PRODUCT_NUMBER };

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.d.ts

@@ -1,6 +0,0 @@
-export type UseOnWindowUnmountProps = {
-    onBeforeUnload: (event: Event) => void;
-    onPopState: (event: Event) => void;
-};
-export declare const useOnWindowUnmount: ({ onBeforeUnload, onPopState, }: UseOnWindowUnmountProps) => any;
-//# sourceMappingURL=useOnWindowUnmount.d.ts.map

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnWindowUnmount.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/utils/useOnWindowUnmount.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,uBAAuB,GAAG;IACpC,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACtC,UAAU,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,kBAAkB,oCAG5B,uBAAuB,QAczB,CAAA"}

package/dist/iframe/order-process/components/utils/useOnWindowUnmount.js

@@ -1,18 +0,0 @@
-import { useEffect } from 'react';
-
-var useOnWindowUnmount = function(param) {
-    var onBeforeUnload = param.onBeforeUnload, onPopState = param.onPopState;
-    useEffect(function() {
-        window.history.pushState(null, '', window.location.pathname);
-        window.addEventListener('beforeunload', onBeforeUnload);
-        window.addEventListener('popstate', onPopState);
-        return function() {
-            window.removeEventListener('beforeunload', onBeforeUnload);
-            window.removeEventListener('popstate', onPopState);
-        };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return null;
-};
-
-export { useOnWindowUnmount };

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

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

@@ -1,76 +0,0 @@
-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={clsx('manual-booking-container', !product.images.length && 'tw-mt-8')}>
-            <div className='manual-booking-header'>
-              <TicketDescription
-                title={product.name}
-                description={product.description}
-                className={clsx('iframe-event__product-description', !product.images.length && 'mt-6')}
-                classNameProductModal='d-block'
-                images={product.images}
-                isRequired={product.isRequired}
-                canExpand
-                isModal
-              />
-            </div>
-            <ProductWithModifierSetForm
-              product={product}
-              onHide={onHide}
-              editOrderModifier={editOrderModifier}
-              onChange={onChange}
-              category={category}
-            />
-          </div>
-        </div>
-      </Modal>
-    </DialogContextProvider>
-  )
-}