@licklist/design 0.71.5 → 0.71.6-dev.0

package/src/auth/Login/LoginComponent.tsx

@@ -44,7 +44,7 @@ const LoginComponent = ({
   const handleError = (error: any) => {
     notification.danger({
       title: 'Error',
-      message: error.message,
+      message: error?.response?.data?.message || error.message,
     })
   }
 

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

@@ -9,6 +9,9 @@ import { Switch, NumberInput } from '../../../../static'
 const SALE_DEADLINE_BEFORE_TYPE = 'before'
 const SALE_DEADLINE_AFTER_TYPE = 'after'
 
+export const SALE_DEADLINE_NAME_CATEGORY = 'saleDeadlineCategory'
+export const SALE_DEADLINE_NAME = 'saleDeadline'
+
 const SALE_DEADLINES_EVENT_START_TYPES = [
   { type: SALE_DEADLINE_BEFORE_TYPE },
   { type: SALE_DEADLINE_AFTER_TYPE },
@@ -18,11 +21,28 @@ type DeadlineType =
   | typeof SALE_DEADLINE_BEFORE_TYPE
   | typeof SALE_DEADLINE_AFTER_TYPE
 
+export const DEADLINE_NAME = [
+  SALE_DEADLINE_NAME_CATEGORY,
+  SALE_DEADLINE_NAME,
+] as const
+
+export type DeadLineNameType = (typeof DEADLINE_NAME)[number]
+
 type SaleDeadlineType = {
   saleDeadline: null | number
+} | {
+  [key: string] : null | number
 }
 
-export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
+export const SaleDeadline = ({
+  disabled = false,
+  onlyBefore = false,
+  deadLineCategory,
+}: {
+  disabled?: boolean
+  onlyBefore?: boolean
+  deadLineCategory?: string
+}) => {
   const { t } = useTranslation(['Design'])
   const {
     control,
@@ -32,9 +52,11 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
   const [deadlineType, setDeadlineType] = useState<DeadlineType>(
     SALE_DEADLINE_BEFORE_TYPE,
   )
-  const saleDeadline = watch('saleDeadline')
+  
+  const saleDeadline = watch(deadLineCategory || SALE_DEADLINE_NAME) 
 
   useEffect(() => {
+    if (onlyBefore) return
     if (saleDeadline > 0) {
       setDeadlineType(SALE_DEADLINE_AFTER_TYPE)
     }
@@ -45,11 +67,11 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
     <Form.Group className='sales-deadline'>
       <Form.Label>{t('Design:salesDeadline')}</Form.Label>
       <Form.Control.Feedback type='invalid'>
-        {errors.saleDeadline?.message}
+        {errors.root?.message}
       </Form.Control.Feedback>
       <Controller
         control={control}
-        name='saleDeadline'
+        name={deadLineCategory || SALE_DEADLINE_NAME}
         render={({
           field: { value, onChange },
           fieldState: { invalid, error },
@@ -111,18 +133,22 @@ export const SaleDeadline = ({ disabled = false }: { disabled?: boolean }) => {
 
           return (
             <>
-              <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
-                <Switch
-                  name='sale-deadline'
-                  options={SALE_DEADLINES_EVENT_START_TYPES.map(({ type }) => ({
-                    id: type,
-                    value: t(`Design:${type}`),
-                  }))}
-                  value={deadlineType}
-                  onChange={changeValueByType}
-                  disabled={disabled}
-                />
-              </Form.Group>
+              {!onlyBefore && (
+                <Form.Group className='d-flex flex-column flex-grow-1 align-items-start'>
+                  <Switch
+                    name='sale-deadline'
+                    options={SALE_DEADLINES_EVENT_START_TYPES.map(
+                      ({ type }) => ({
+                        id: type,
+                        value: t(`Design:${type}`),
+                      }),
+                    )}
+                    value={deadlineType}
+                    onChange={changeValueByType}
+                    disabled={disabled}
+                  />
+                </Form.Group>
+              )}
               <div className='d-flex'>
                 <Form.Group className='d-flex flex-column col-4 pl-0'>
                   <Form.Label>{t('Design:saleDays')}</Form.Label>

package/src/events/edit-event-modal/hooks/useValidationOptions.tsx

@@ -12,11 +12,6 @@ export const useValidationOptions = () => {
       required: t('Validation:fieldRequired', {
         attribute: t('start'),
       }) as string,
-      // TODO: uncomment when event splitting is implemented
-      // and extract into plugins
-      validate: (value) =>
-        DateTime.fromISO(value).diffNow().toMillis() > 0 ||
-        (t('Validation:fieldValidEventStart') as string),
     },
 
     end: {

package/src/events/edit-event-modal/utils/getDefaultProductSet.ts

@@ -20,6 +20,7 @@ export const getDefaultValues = (
   relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? '',
   fieldSetId: productSet?.fieldSetId,
+  saleDeadline: productSet?.saleDeadline,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
       ? getFilteredTemplates(productSet?.mailTemplates)
@@ -39,7 +40,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

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

@@ -61,7 +61,12 @@ export const EditRecurrentEventModal = ({
       <Form onSubmit={handleSubmit(onSubmit)} noValidate>
         <Modal.Header className='border-0'>
           <Modal.Title as='h6'>{title}</Modal.Title>
-          <Button variant='danger' className='btn-sm rounded' onClick={onHide}>
+          <Button
+            variant='danger'
+            className='btn-sm rounded'
+            disabled={disabled}
+            onClick={onHide}
+          >
             <FaTimes size={16} />
           </Button>
         </Modal.Header>

package/src/events/event-statistic-modal/EventStatisticModal.tsx

@@ -12,6 +12,7 @@ export type EventStatisticModalProps = {
   date?: Event['startAt'] | null
   eventStatistic?: EventStatistic | null
   title?: string
+  eventId?: string
 }
 
 export const EventStatisticModal = ({
@@ -20,10 +21,11 @@ export const EventStatisticModal = ({
   date,
   eventStatistic,
   title,
+  eventId,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation('Design')
 
-  const data = useTableData(date, eventStatistic)
+  const data = useTableData(date, eventStatistic, eventId )
   const handleClose = () => {
     setIsOpen(false)
   }

package/src/events/event-statistic-modal/hooks/useTableData.tsx

@@ -11,6 +11,7 @@ import { StaticTableData } from '../../../table'
 export const useTableData = (
   date: Event['startAt'] | null,
   eventStatistic: EventStatistic | null,
+  eventId: string
 ) => {
   const { t } = useTranslation('Design')
   const { formatNumber } = useIntl()
@@ -33,6 +34,7 @@ export const useTableData = (
   const transformStatisticToTableRows = (
     date: Event['startAt'],
     statistic: EventStatistic | null,
+    eventId: string
   ) => {
     if (!statistic) {
       return []
@@ -40,7 +42,7 @@ export const useTableData = (
 
     const tableDataRows: StaticTableData[] = []
 
-    convertEventStatisticToTableData(date, statistic).forEach(
+    convertEventStatisticToTableData(date, statistic, eventId).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total),
@@ -82,9 +84,9 @@ export const useTableData = (
   }
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(date, eventStatistic))
+    setTableRows(transformStatisticToTableRows(date, eventStatistic, eventId))
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventStatistic])
+  }, [date, eventId, eventStatistic])
 
   return tableRows
 }

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

@@ -1,6 +1,7 @@
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
+import { maxBy } from 'lodash'
 
 export const TRANSLATION_KEYS = {
   shortQuantity: 'shortQuantity',
@@ -57,11 +58,19 @@ export const convertEventStatisticToTableData = (
           : -1,
     )
     .forEach(
-      ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+      (
+        { totalPerCategory, productsSummary = [], categoryName, eventId },
+        _,
+        // all category at summaryDays
+        selfCategory,
+      ) => {
         let quantity = 0
-
         totalAmount += totalPerCategory || 0
 
+        const allProductSummaryAtCategory = selfCategory
+          .filter((category) => category.categoryName === categoryName)
+          .flatMap((categorySummary) => categorySummary.productsSummary)
+
         if (!summaryMap.has(`${categoryName}`)) {
           summaryMap.set(`${categoryName}`, {
             name: categoryName,
@@ -73,36 +82,49 @@ export const convertEventStatisticToTableData = (
           })
         }
 
-        productsSummary?.forEach(
-          ({ productsSold, name, totalQuantity, total }) => {
-            quantity += productsSold
-
-            const existingProduct = summaryMap.get(
-              `${categoryName}.${name}`,
-            ) ?? {
-              metadata: {
-                _productsSold: 0,
-                _total: 0,
-              },
-            }
-
-            summaryMap.set(`${categoryName}.${name}`, {
-              name,
-              key: `${eventId}.${categoryName}.${name}`,
-              quantity: totalQuantity
-                ? `${
-                    existingProduct.metadata._productsSold + productsSold
-                  } / ${totalQuantity}`
-                : String(existingProduct.metadata._productsSold + productsSold),
-              total: String(existingProduct.metadata._total + total),
-              metadata: {
-                _productsSold:
-                  existingProduct.metadata._productsSold + productsSold,
-                _total: existingProduct.metadata._total + total,
-              },
-            })
-          },
-        )
+        productsSummary?.forEach((productSummary, productIndex) => {
+          quantity += productSummary.productsSold
+
+          const existingProduct = summaryMap.get(
+            `${categoryName}.${productSummary.name}`,
+          ) ?? {
+            metadata: {
+              _productsSold: 0,
+              _total: 0,
+            },
+          }
+
+          const overrides = allProductSummaryAtCategory.filter(
+            (summary) => summary.originalProductId === productSummary.id,
+          )
+
+          const maxTotalQuantity = maxBy(overrides, 'id').totalQuantity
+
+          const totalQuantity = maxTotalQuantity || productSummary.totalQuantity
+
+          summaryMap.set(`${categoryName}.${productSummary.name}`, {
+            name: productSummary.name,
+            key: `${eventId}.${categoryName}${productIndex}${productSummary.name}`,
+            quantity: totalQuantity
+              ? `${
+                  existingProduct.metadata._productsSold +
+                  productSummary.productsSold
+                } / ${totalQuantity}`
+              : String(
+                  existingProduct.metadata._productsSold +
+                    productSummary.productsSold,
+                ),
+            total: String(
+              existingProduct.metadata._total + productSummary.total,
+            ),
+            metadata: {
+              _productsSold:
+                existingProduct.metadata._productsSold +
+                productSummary.productsSold,
+              _total: existingProduct.metadata._total + productSummary.total,
+            },
+          })
+        })
 
         const prevTotalPerCategory = summaryMap.get(
           `${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -49,6 +49,7 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
     },
     ref,
   ) => {
+    // TODO fix often updating of canvasSizes, which leads to flashing poingts
     const canvasSizes = useCanvasSize({ width, height })
 
     return (

package/src/events/event-venue-map/hooks/useCanvasSize.ts

@@ -10,13 +10,17 @@ export const useCanvasSize = ({
   width: componentWidth,
   height: componentHeight,
 }: CanvasSizeProps) => {
+  // TODO Fix often updating of width and height
   const { width, height } = useWindowDimensions()
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const memoizedDimensions = useMemo(() => ({ width, height }), [width])
+
   const memoedComponentParameters = useMemo(() => {
     if (!componentWidth && !componentHeight) return null
 
     return { width: componentWidth, height: componentHeight }
   }, [componentWidth, componentHeight])
 
-  return memoedComponentParameters || { width, height }
+  return memoedComponentParameters || memoizedDimensions
 }

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -89,6 +89,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <FormControl
           type='number'
           onChange={(e) => handleChangeValue(Number(e.target.value))}
+          onWheel={(event) => event.currentTarget.blur()}
           value={value}
           min={0}
           max={max}
@@ -101,6 +102,14 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         <button
           type='button'
           onClick={handleArrowUpClick}
+          onWheel={(event) => event.currentTarget.blur()}
+          onFocus={(event) =>
+            event.target.addEventListener(
+              'wheel',
+              (event) => event.preventDefault(),
+              { passive: false },
+            )
+          }
           className={`payment-number-input__btn-up ${
             plusButtonGreyedOut && 'disabled-number-input-button'
           }`}

package/src/iframe/page/components/PageBody/constants.ts

@@ -1,4 +1,5 @@
 export const TAB_WIDTH = 768
+export const MOBILE_WIDTH = 480
 export const RIGHT_BLOCK_RESIZED_EVENT = 'RIGHT_BLOCK_RESIZED_EVENT'
 // The sum of paddings in PageBody + header for first block
 export const STANDARD_BODY_PADDING = 48 + 49

package/src/iframe/page/components/PageBody/hooks/useResizePageBody.ts

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useState, useRef } from 'react'
 import { useWindowDimensions } from '@licklist/plugins/dist/hooks/Media/useWindowDimensions'
 import {
   TAB_WIDTH,
+  MOBILE_WIDTH,
   STANDARD_BODY_PADDING,
   STANDARD_HEADER_FOOTER_SIZE,
   RIGHT_BLOCK_RESIZED_EVENT,
@@ -60,6 +61,16 @@ export const useResizePageBody = () => {
       })
     }
 
+    if (width <= MOBILE_WIDTH && Boolean(CALENDAR_WRAPPER_HEIGHT)) {
+      return {
+        maxHeight:
+          height -
+          STANDARD_BODY_PADDING -
+          rightBlockHeight -
+          CALENDAR_WRAPPER_HEIGHT,
+      }
+  
+    }  
     return {
       maxHeight:
         height -
@@ -87,7 +98,6 @@ export const useResizePageBody = () => {
 
     if (width >= TAB_WIDTH && !isContainerSizeApplied) {
       isContainerSizeApplied.current = true
-
       setLeftBlockContainerSizes({
         width: leftBlockContainer.clientWidth,
         height: leftBlockContainer.clientHeight,
@@ -117,7 +127,6 @@ export const useResizePageBody = () => {
       ) {
         minimalMapSize.current = calculatedMinimalMapSize
       }
-
       return {
         width: leftBlockContainer.clientWidth,
         height: minimalMapSize.current,

package/src/iframe/payment/order-items-table/utils/paymentSummary.tsx

@@ -61,6 +61,7 @@ const processedPaymentSummary = ({
   const total = calculateTotalPrice(order, externalPaymentDetail)
 
   const totalDiscount = calculateTotalDiscount(order.payments)
+
   let summaryItems: SummaryItem[] = [
     {
       translateKey: AMOUNT_TOTAL,

package/src/iframe/ryft/RyftPaymentForm.tsx

@@ -5,12 +5,14 @@ import { useForm } from 'react-hook-form'
 import Button from 'react-bootstrap/Button'
 import { useHistory } from 'react-router-dom'
 import Alert from 'react-bootstrap/Alert'
+import {
+  STATUS_APPROVED,
+  STATUS_CAPTURED,
+  STATUS_PENDING_ACTION,
+  STATUS_PENDING_PAYMENT,
+} from '@licklist/core/dist/DataMapper/Order/PaymentSessionOrderDataMapper'
 import {
   useRyftPayment,
-  RYFT_STATUS_APPROVED,
-  RYFT_STATUS_CAPTURED,
-  RYFT_STATUS_PENDING_ACTION,
-  RYFT_STATUS_PENDING_PAYMENT,
   AttemptPaymentResponse,
 } from '@licklist/plugins/dist/hooks/Ryft/useRyftPayment'
 import { ProviderPaymentSettings } from '@licklist/core/dist/DataMapper/Setting/ProviderPaymentSettingsDataMapper'
@@ -105,7 +107,7 @@ export const RyftPaymentForm = ({
 
       if ('requiredAction' in paymentSession) {
         if (
-          paymentSession.status !== RYFT_STATUS_PENDING_ACTION ||
+          paymentSession.status !== STATUS_PENDING_ACTION ||
           !paymentSession.requiredAction?.url
         ) {
           redirectOnFailAttempt(paymentSession)
@@ -117,9 +119,9 @@ export const RyftPaymentForm = ({
       }
 
       if (
-        paymentSession.status === RYFT_STATUS_APPROVED ||
-        paymentSession.status === RYFT_STATUS_CAPTURED ||
-        paymentSession.status === RYFT_STATUS_PENDING_PAYMENT
+        paymentSession.status === STATUS_APPROVED ||
+        paymentSession.status === STATUS_CAPTURED ||
+        paymentSession.status === STATUS_PENDING_PAYMENT
       ) {
         redirectOnFailAttempt(paymentSession)
         return

package/src/iframe/ryft/utils/ryft-form.ts

@@ -61,20 +61,22 @@ export const injectComponentsInRyftForm = ({
   divider.id = 'mobile-pay-divider'
   container.id = 'mobile-pay-divider-container'
   container.append(dividerText, divider)
-  const payIframe = document.getElementById("ryft-pay-iframe");
+  const payIframe = document.getElementById('ryft-pay-iframe')
   if (payIframe) {
     const formBox = document.getElementById('form-disable-box')
     if (formBox) {
-      formBox.style.display = isDisableButton ? "block" : "none"
+      formBox.style.display = isDisableButton ? 'block' : 'none'
     }
 
     const googleButton = document.getElementById(
       'gpay-button-online-api-id',
     ) as HTMLButtonElement
-    const appleButton =document.getElementById("ryft-pay-apple-pay-button") as HTMLButtonElement
+    const appleButton = document.getElementById(
+      'ryft-pay-apple-pay-button',
+    ) as HTMLButtonElement
     if (googleButton) {
       googleButton.disabled = isDisableButton
-      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+      googleButton.style.opacity = !isDisableButton ? '1' : '0.6'
     }
     if (appleButton) {
       appleButton.disabled = isDisableButton
@@ -86,7 +88,6 @@ export const injectComponentsInRyftForm = ({
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'
     applePayButton.type = 'button'
-    applePayButton.style.opacity = !isDisableButton ? '1' : '0.6'
     applePayButton.className = 'bg-dark btn btn-primary apple-pay-button'
     applePayButton.textContent = t('Events:payWithApple')
     applePayButton.onclick = onApplePayButtonClick

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react'
+import React, { forwardRef } from 'react'
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[]

package/src/notification/email-template/control/EmailTemplateControl.tsx

@@ -434,6 +434,7 @@ export const EmailTemplateControl = forwardRef(
                           `templateOptionValues.${option?.id}.value`,
                         )}
                         type='number'
+                        onWheel={(event) => event.currentTarget.blur()}
                         placeholder={t(`Design:${option.name}`)}
                         id={option.name + option.id}
                         defaultValue={option.selectedValue || ''}

package/src/product-set/control/ProductSetControl.tsx

@@ -23,6 +23,7 @@ import { ruleForUrlWithProtocol } from '@licklist/plugins/dist/validation/Rules/
 import { WorkHour } from '@licklist/core/dist/DataMapper/Provider/WorkHourDataMapper'
 import { checkIfZoneCategory } from '@licklist/plugins'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
+import { SaleDeadline } from 'src/events/edit-event-modal/component/SaleDeadline'
 import { WarningMessage } from '../../static'
 import { SelectItem } from '../../types/generic/SelectItem'
 import {
@@ -66,6 +67,7 @@ export interface ProductSetControlValues extends DateAndRecurrenceInputValues {
   productGroups?: SelectItem[]
   relyOnPeopleType?: RelyOnPeopleType | null
   fieldSetId?: number
+  saleDeadline?: number
   steps: Step[]
   emailTemplates?: TemplateItem[]
   smsTemplates?: TemplateItem[]
@@ -93,6 +95,7 @@ export interface ProductSetControlProps {
   workHours: WorkHour[] | undefined
   providerHasBookingManagement?: boolean
   isOverrides?: boolean
+  saleDeadline?: number
   isCreateNewOverrides?: boolean
   timeZone: string
 }
@@ -222,6 +225,8 @@ export function ProductSetControl({
           </>
         )}
 
+        <SaleDeadline disabled={false} onlyBefore />
+
         <div className='divider' />
 
         <TutorialGifCard isOverrides={isOverrides} />

package/src/product-set/form/ProductCategoriesControl.tsx

@@ -8,6 +8,7 @@ import {
   useFormContext,
   useWatch,
 } from 'react-hook-form'
+import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
 import { useTranslation } from 'react-i18next'
 import { useSensor, MouseSensor } from '@dnd-kit/core'
 import {
@@ -25,7 +26,11 @@ import { ProductCategoryControl } from '../product-category'
 import { ProductCategory } from '../types'
 import { ProductsControl } from './ProductsControl'
 import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import { SelectCategoryModal } from './SelectCategoryModal'
+import {
+  SelectCategoryModal,
+  CATEGORY_TYPES_NAMES,
+  CategoryConfig,
+} from './SelectCategoryModal'
 import { ProductSetLoadingContext } from './context'
 import { VenueMapSetModal } from './VenueMapSetModal'
 import { moveArrayElements, sortArrayByIndex } from '../utils'
@@ -33,6 +38,29 @@ import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
+const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
+  [CATEGORY_TYPES_NAMES.tickets]: {
+    label: 'tickets',
+    icon: <FaTicketAlt color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.bookings]: {
+    label: 'bookings',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.menuItems]: {
+    label: 'menuItems',
+    icon: <FaBars color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.game]: {
+    label: 'game',
+    icon: <FaBowlingBall color='#0e8ce2' size={10} />,
+  },
+  [CATEGORY_TYPES_NAMES.fixedDuration]: {
+    label: 'fixedDuration',
+    icon: <FaCalendar color='#0e8ce2' size={10} />,
+  },
+}
+
 interface ProductCategoriesControlProps extends WithIsLoading {
   stepIndex: number
   isOverrides?: boolean
@@ -58,6 +86,7 @@ const getCategoryDefaultValue = (
   remainderExpireAfter: undefined,
   hasBookingManagement: false,
   weight: 0,
+  saleDeadlineCategory: 0,
   isReusable: false,
   hasSubEvents: false,
   products: [],
@@ -228,6 +257,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type]
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -272,6 +303,12 @@ export function ProductCategoriesControl({
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
+                  itemButton={
+                    <div className='btn-outline-primary item-icon sm border border-primary rounded-sm'>
+                      {categoryType.icon}
+                      <span className='ml-2'>{t(categoryType.label)}</span>
+                    </div>
+                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}