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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.71.18-dev.18",
+  "version": "0.71.18-dev.2",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.31.2-dev.14",
+    "@licklist/core": "0.31.2-dev.5",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.8",
+    "@licklist/plugins": "0.35.1-dev.5",
     "lodash": "4.17.21",
     "luxon": "3.5.0",
     "react": "17.0.2",
@@ -61,9 +61,9 @@
     "@dnd-kit/utilities": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",
     "@fortawesome/free-solid-svg-icons": "5.15.2",
-    "@licklist/core": "0.31.2-dev.14",
+    "@licklist/core": "0.31.2-dev.5",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.35.1-dev.8",
+    "@licklist/plugins": "0.35.1-dev.5",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -208,4 +208,4 @@
     "yarn": "4.4.0"
   },
   "stableVersion": "0.71.4-dev.1"
-}
+}

package/src/events/edit-event-modal/IntervalInput.tsx

@@ -17,8 +17,6 @@ interface IntervalInputProps {
   productSets?: ProductSet[]
   productSetId?: number
   disabled?: boolean
-  disabledRecurrent?: boolean
-  isCopyCreate?: boolean
 }
 
 export interface IntervalInputValues {
@@ -32,8 +30,6 @@ export function IntervalInput({
   editedProductSet,
   productSetId,
   productSets,
-  disabledRecurrent = false,
-  isCopyCreate = false
 }: IntervalInputProps) {
   const { t } = useTranslation(['Design', 'Validation'])
   const {
@@ -58,6 +54,7 @@ export function IntervalInput({
   const endDateInput = useRef<HTMLInputDateElement | null>(null)
 
   const updateEndDate = ({ target: { value: nextStartDate } }) => {
+    setRecurrent(false)
     setValue('start', nextStartDate)
 
     if (
@@ -75,13 +72,6 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet])
 
-  useEffect(() => {
-    if (!isCopyCreate) return
-    setRecurrent(false)
-    setValue('rrule', null)
-     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isCopyCreate])
-
   useEffect(() => {
     if (!productSets) return
 
@@ -163,7 +153,7 @@ export function IntervalInput({
             onChange={({ target: { checked } }) => {
               onChangeRecurrent(checked)
             }}
-            disabled={disabled || Boolean(editedProductSet) || disabledRecurrent}
+            disabled={disabled || Boolean(editedProductSet)}
           />
           {!recurrent && (
             <Form.Text muted>
@@ -188,7 +178,7 @@ export function IntervalInput({
                 minDate={DateTime.fromISO(start)
                   .plus({ day: 1 })
                   .toFormat('yyyy-MM-dd')}
-                disabled={disabled || disabledRecurrent}
+                disabled={disabled}
               />
             )}
           />

package/src/events/edit-event-modal/component/EditEventForm/EditEventForm.tsx

@@ -65,8 +65,6 @@ export interface EditEventFormProps extends HasPermissionProp {
   timeZone: string
   eventProductSet?: ProductSet
   overrideNameError?: string
-  disabledRecurrent?: boolean
-  isCopyCreate?: boolean
 }
 
 const eventImageTypes = {
@@ -89,8 +87,6 @@ export const EditEventForm = ({
   timeZone,
   eventProductSet,
   overrideNameError,
-  disabledRecurrent = false,
-  isCopyCreate = false,
 }: EditEventFormProps) => {
   const { t } = useTranslation(['Design', 'Validation'])
 
@@ -130,7 +126,7 @@ export const EditEventForm = ({
   const visible = watch('visible')
   const editedProductSet = watch('editedProductSet')
   const productSetId = watch('productSetId')
-  const rrule = watch('rrule')
+
   const {
     images,
     handleImageRemove,
@@ -183,15 +179,6 @@ export const EditEventForm = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
-  const defaultExDate = defaultEventValues?.rrule?.includes('EXDATE')
-    ? defaultEventValues?.rrule?.split(';EXDATE=')[1]
-    : ''
-
-  useEffect(() => {
-    if (!defaultExDate || rrule?.includes('EXDATE')) return
-    rrule && setValue('rrule', rrule?.concat(`;EXDATE=${defaultExDate}`))
-  }, [defaultExDate, rrule])
-
   return (
     <>
       <Dialog
@@ -286,9 +273,7 @@ export const EditEventForm = ({
             disabled={disabled}
             productSetId={productSetId}
             productSets={productSets}
-            disabledRecurrent={disabledRecurrent}
             editedProductSet={editedProductSet}
-            isCopyCreate={isCopyCreate}
           />
           {categories.length !== 0 && (
             <Form.Group>

package/src/events/edit-recurrent-event-modal/EditRecurrentEventModal.tsx

@@ -21,10 +21,6 @@ export const RECURRENT_MODE_TYPES_LIST = {
   [MODE_ALL_EVENTS]: 3,
 }
 
-export const RECURRENT_MODE_TYPES_WITHOUT_ALL = {
-  [MODE_THIS_EVENT]: 1,
-}
-
 export type RecurrentEventMode = (typeof MODES)[number]
 
 export type EditRecurrentEventModalValues = {
@@ -37,7 +33,6 @@ export type EditRecurrentEventModalProps = {
   onHide: () => void
   title: string
   onSubmit: (values: EditRecurrentEventModalValues) => void
-  isDateWasChanged?: boolean
 }
 
 export const EditRecurrentEventModal = ({
@@ -46,7 +41,6 @@ export const EditRecurrentEventModal = ({
   onHide,
   title,
   onSubmit,
-  isDateWasChanged = false
 }: EditRecurrentEventModalProps) => {
   const { t } = useTranslation('Design')
 
@@ -56,8 +50,6 @@ export const EditRecurrentEventModal = ({
     },
   })
 
-  const recurrentListMode = isDateWasChanged? RECURRENT_MODE_TYPES_WITHOUT_ALL : RECURRENT_MODE_TYPES_LIST
-
   return (
     <Modal
       show={isOpen}
@@ -83,7 +75,7 @@ export const EditRecurrentEventModal = ({
             <Controller
               render={({ field: { value, onChange } }) => (
                 <>
-                  {Object.keys(recurrentListMode).map((option) => (
+                  {Object.keys(RECURRENT_MODE_TYPES_LIST).map((option) => (
                     <Form.Check
                       type='radio'
                       id={option}

package/src/events/event-statistic-modal/utils/index.ts

@@ -33,15 +33,15 @@ export const convertEventStatisticToTableData = (
     return []
   }
 
-  const summaryFormattedDate = DateTime.fromISO(date).toFormat(
-    DATE_TIME_FULL_FORMAT,
-  )
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_FORMAT)
 
   const summaryDays =
     Object.keys(eventStatistic?.productCategorySummary)?.filter(
       (date) =>
         DateTime.fromFormat(date, DATE_TIME_FULL_FORMAT).toFormat(
-          DATE_TIME_FULL_FORMAT,
+          DATE_FORMAT,
         ) === summaryFormattedDate,
     ) ?? []
 

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

@@ -12,12 +12,10 @@ interface TicketDescriptionProps {
   title: string
   description: string
   className?: string
-  classNameProductModal?: string
   images: Image[] | null
   price?: ReactNode
   isRequired?: boolean
   canExpand?: boolean
-  isModal?: boolean
 }
 
 const DESCRIPTION_MAX_LENGTH = 120
@@ -26,12 +24,10 @@ export function TicketDescription({
   title,
   description,
   className = '',
-  classNameProductModal = '',
   images,
   price,
   isRequired = false,
   canExpand = true,
-  isModal= false
 }: TicketDescriptionProps) {
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false)
 
@@ -51,10 +47,10 @@ export function TicketDescription({
         className='ticket-description__wrapper'
         style={descriptionWrapperStyle}
       >
-        <div className={clsx('ticket-description__wrapper-children', classNameProductModal)}>
+        <div className='ticket-description__wrapper-children'>
           {imageSrc && (
-            <div className={clsx('image-wrapper', classNameProductModal && 'w-100 h-25')}>
-              <img className={clsx(classNameProductModal && 'w-100')} src={imageSrc} alt={title} />
+            <div className='image-wrapper'>
+              <img src={imageSrc} alt={title} />
             </div>
           )}
           {canExpand && description.length > DESCRIPTION_MAX_LENGTH ? (
@@ -67,7 +63,6 @@ export function TicketDescription({
                 title={title}
                 isRequired={isRequired}
                 description={description}
-                isModal={isModal}
               />
             </TextExpand>
           ) : (
@@ -75,7 +70,6 @@ export function TicketDescription({
               title={title}
               isRequired={isRequired}
               description={description}
-              isModal={isModal}
             />
           )}
         </div>
@@ -89,9 +83,8 @@ const Description = ({
   title,
   isRequired,
   description,
-  isModal
 }: Pick<TicketDescriptionProps, 'title' | 'isRequired' | 'description'>) => (
-  <div className={clsx('description-content', isModal && 'ml-4 mt-2' )}>
+  <div className='description-content'>
     <div className='d-flex flex-column'>
       <div className='product-title'>
         {title} {isRequired && <span>*</span>}

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

@@ -17,7 +17,6 @@ export const BookingSummary = ({
   formValues = {},
   shouldHidePeopleAmount,
   eventName,
-  headerTitle,
   transactionFee = 0,
   productsWithErrors = [],
   isLoading,
@@ -44,7 +43,6 @@ 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,19 +2,11 @@ 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 { OrderModifierByProduct } from '@licklist/core/dist/DataMapper/Order/OrderModifiierByProduct'
-import { calculateTotalModifiersPrice } from '../../utils'
-import { ProductWithModifier } from '../../../CategoryProduct/components/ProductWithModifier/ProductWithModifier'
-
-
-interface IOrderProduct extends OrderItem {
-  orderProductModifiers?:  OrderModifierByProduct[] | null;
-}
 
 type ProductSummaryProps = {
   name?: string
   productQuantityError?: string
-  orderProduct: IOrderProduct
+  orderProduct: OrderItem
 }
 
 export const ProductSummary = ({
@@ -24,9 +16,8 @@ export const ProductSummary = ({
 }: ProductSummaryProps) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
-  const priceForOneProduct = orderProduct?.price
 
-  const modifiersSets =  orderProduct?.orderModifiersSets || orderProduct?.orderProductModifiers
+  const priceForOneProduct = orderProduct?.price
 
   const fullPrice = formatNumber(priceForOneProduct * orderProduct?.quantity, {
     style: 'currency',
@@ -44,19 +35,6 @@ export const ProductSummary = ({
         <p className='price'>{fullPrice}</p>
       </div>
 
-      {!!modifiersSets.length && (
-        <>
-          {modifiersSets.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,5 +24,4 @@ export type BookingSummaryProps = {
   isPaymentPage?: boolean
   headerComponent?: ReactElement
   footer?: ReactElement
-  headerTitle?: string
 }

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -1,7 +1,3 @@
-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'
 
@@ -17,9 +13,6 @@ export const cartSumByOrderProducts = ({
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
     if (!product) return 0
-    const modifiersPrice = calculateTotalModifiersPrice(
-      product?.orderModifiersSets,
-    )
 
     const price = isTotalSum
       ? product?.price
@@ -27,44 +20,10 @@ export const cartSumByOrderProducts = ({
         ? product?.deposit
         : product?.price
 
-    return prevSumValue + price * product.quantity + modifiersPrice
+    return prevSumValue + price * product.quantity
   }, 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, useState } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useFormContext, Controller } from 'react-hook-form'
 import clsx from 'clsx'
 import { useTranslation } from 'react-i18next'
@@ -10,14 +10,8 @@ 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
@@ -37,9 +31,7 @@ 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(() => {
@@ -126,155 +118,83 @@ export const CategoryProduct = ({
       render={({
         field: { onChange, value: productInfo = {}, ref },
         fieldState: { invalid, error },
-      }) => {
-        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)
-        }
-
-        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 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>
-            <div className='iframe-event__product-price-wrapper'>
-              <span className='product-price'>
-                {formatNumber(product.price, {
+          )}
+
+          {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,
-                })}
-              </span>
-              <ProductQuantityInput
-                onChange={onChange}
-                productInfo={productInfo}
-                refCallback={ref}
-                clearErrors={clearErrors}
-                product={{
-                  ...product,
-                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-                }}
-                category={category}
-                invalid={invalid}
-              />
+                }),
+                days: category?.remainderExpireAfter,
+              })}
             </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>
-        )
-      }}
+          )}
+          {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>
+      )}
     />
   )
 }