@licklist/design 0.69.5 → 0.69.6-dev.1

package/dist/zone/form/components/GameDurationControl.js

@@ -77,6 +77,9 @@ var GameDurationControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:duration'),
                 isInvalid: Boolean(errors.defaultDuration),
                 disabled: isLoading

package/dist/zone/form/components/SortControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAmC1D,CAAA"}
+{"version":3,"file":"SortControl.d.ts","sourceRoot":"","sources":["../../../../src/zone/form/components/SortControl.tsx"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,WAAW,kBAAmB,gBAAgB,4CAoC1D,CAAA"}

package/dist/zone/form/components/SortControl.js

@@ -77,6 +77,9 @@ var SortControl = function(param) {
                 required: false,
                 min: 1
             })), {
+                onWheel: function(event) {
+                    return event.currentTarget.blur();
+                },
                 placeholder: t('Design:ordering'),
                 isInvalid: Boolean(errors.sort),
                 disabled: isLoading

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.69.5",
+  "version": "0.69.6-dev.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/artelogicsoft/licklist_design.git"
@@ -42,9 +42,9 @@
     ]
   },
   "peerDependencies": {
-    "@licklist/core": "0.30.3",
+    "@licklist/core": "0.30.5-dev.0",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.4",
+    "@licklist/plugins": "0.33.4-dev.0",
     "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.30.3",
+    "@licklist/core": "0.30.5-dev.0",
     "@licklist/eslint-config": "0.5.6",
-    "@licklist/plugins": "0.33.4",
+    "@licklist/plugins": "0.33.4-dev.0",
     "@mantine/core": "6.0.22",
     "@mantine/hooks": "6.0.22",
     "@mdx-js/react": "1.6.22",
@@ -95,7 +95,6 @@
     "bootstrap": "4.6.0",
     "bootstrap-social": "5.1.1",
     "clsx": "1.1.1",
-    "date-fns": "2.29.3",
     "emojibase": "6.1.0",
     "emojibase-data": "7.0.1",
     "emojibase-regex": "6.0.1",
@@ -202,8 +201,10 @@
       "yarn tsc"
     ]
   },
+  "packageManager": "yarn@4.4.0",
   "volta": {
     "node": "20.9.0",
     "yarn": "4.4.0"
-  }
-}
+  },
+  "stableVersion": "0.69.1-dev.3"
+}

package/src/affiliate/form/AffiliateForm.tsx

@@ -76,6 +76,7 @@ export const AffiliateForm = ({
   const copyToClipboard = () =>
     // eslint-disable-next-line consistent-return
     window.navigator.clipboard.writeText(formValues.link)
+
   return (
     <FormProvider {...form}>
       <Form onSubmit={form.handleSubmit(handleSubmit)}>

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/calendar/utils/index.ts

@@ -1,40 +1,31 @@
+import { TimeZone } from '@licklist/core/dist/DataMapper/Common/TimeZoneDataMapper'
 import { DateTime, Interval } from 'luxon'
 
-export const getMonthCalendarDates = (
-  initialDate: DateTime,
-  timeZone?: string,
-): DateTime[] => {
+type Builder = (args: {
+  initialDate?: DateTime
+  timeZone: TimeZone['name']
+}) => DateTime[]
+
+export const getMonthCalendarDates: Builder = ({
+  initialDate: _initialDate,
+  timeZone,
+}): DateTime[] => {
+  const initialDate = _initialDate || DateTime.now().setZone(timeZone)
+
   const startOfMonth = initialDate.startOf('month')
   const endOfMonth = initialDate.endOf('month')
 
-  const dateTimes = Interval.fromDateTimes(startOfMonth, endOfMonth)
+  return Interval.fromDateTimes(startOfMonth, endOfMonth)
     .splitBy({ day: 1 })
     .map((d) => d.start)
-
-  if (timeZone) {
-    return dateTimes.map((date) =>
-      date.setZone(timeZone, { keepLocalTime: true }),
-    )
-  }
-
-  return dateTimes
 }
 
-export const getWeekCalendarDates = (
-  initialDate: DateTime,
-  timeZone?: string,
-): DateTime[] => {
+export const getWeekCalendarDates: Builder = ({ timeZone }): DateTime[] => {
+  const initialDate = DateTime.now().setZone(timeZone)
+
   const lastDay = initialDate.plus({ days: 7 })
 
-  const dateTimes = Interval.fromDateTimes(initialDate, lastDay)
+  return Interval.fromDateTimes(initialDate, lastDay)
     .splitBy({ day: 1 })
     .map((d) => d.start)
-
-  if (timeZone) {
-    return dateTimes.map((date) =>
-      date.setZone(timeZone, { keepLocalTime: true }),
-    )
-  }
-
-  return dateTimes
 }

package/src/date-time-button/DateContent.tsx

@@ -6,9 +6,9 @@ import {
 } from '@licklist/core/dist/Config'
 import { getDayWithOrdinal } from '@licklist/plugins/dist/utils/formatDate'
 import clsx from 'clsx'
-import { isToday, isTomorrow } from 'date-fns'
 import { DateTime } from 'luxon'
 import { useTranslation } from 'react-i18next'
+import { isToday, isTomorrow } from '@licklist/plugins/dist'
 import { DateTimeButtonProps, Variant } from './DateTimeButton'
 
 type DateContentProps = Pick<
@@ -55,9 +55,9 @@ export const DateContent = ({
 }
 
 const getDate = (date: DateTime): string => {
-  if (isToday(date.toJSDate())) return 'today'
+  if (isToday(date)) return 'today'
 
-  if (isTomorrow(date.toJSDate())) return 'tomorrow'
+  if (isTomorrow(date)) return 'tomorrow'
 
   return date.toFormat(DAY_OF_WEEK)
 }

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

@@ -5,6 +5,7 @@ import { useId } from '@react-aria/utils'
 import { Controller, useFormContext } from 'react-hook-form'
 import { HasPermissionProp } from '@licklist/plugins/dist/types/permission/Permission'
 import { ProductSet } from '@licklist/core/dist/DataMapper/Product/ProductSetDataMapper'
+import { uniqBy } from 'lodash'
 import { getTypeHeadItemsFromMenus } from '../../../../product-set/utils'
 import { ConfirmModal } from '../../../../modals/confirmation/ConfirmModal'
 import { EditEventFormValues } from '../EditEventForm/EditEventForm'
@@ -52,16 +53,17 @@ export const SelectEventProductSet = ({
   const productSetId = watch('productSetId')
   const editedProductSet = watch('editedProductSet')
 
-  const typeheadValues = getTypeHeadItemsFromMenus(
-    editedProductSet
-      ? productSets.map((productSet) => {
-          if (productSet.id === editedProductSet.id) {
-            return editedProductSet
-          }
-
-          return productSet
-        })
-      : productSets,
+  const typeheadValues = uniqBy(
+    getTypeHeadItemsFromMenus(
+      editedProductSet
+        ? productSets.map((productSet) =>
+            productSet.id === editedProductSet.id
+              ? editedProductSet
+              : productSet,
+          )
+        : productSets,
+    ),
+    (item) => item.id,
   )
   const selectedProductSetTypeheadValue = productSetId
     ? typeheadValues?.find((typeheadValue) => typeheadValue.id === productSetId)

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

@@ -39,7 +39,6 @@ export const getDefaultValues = (
               ...product,
               subProducts: subProducts?.map(({ ...subProducts }) => ({
                 ...subProducts,
-                originalProductId: null,
                 productCategoryId: undefined,
               })),
               productCategoryId: undefined,

package/src/events/event-card/EventCard.tsx

@@ -23,7 +23,7 @@ import { Sale } from '../../types/bookings'
 import { TipTapEditor } from '../../tiptap-editor/TipTapEditor'
 import {
   EVENT_DESCRIPTION_SIZE,
-  formatContentWithoutTags,
+  formatContent,
   getStatisticInfo,
 } from './utils'
 import { ReactComponent as ChartBarIcon } from '../../assets/dashboard/chartBar.svg'
@@ -66,7 +66,7 @@ export function EventCard({
   const { formatNumber, formatDate } = useIntl()
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date)
   const memoedContent = useMemo(
-    () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
+    () => formatContent(description, EVENT_DESCRIPTION_SIZE),
     [description],
   )
 

package/src/events/event-card/utils.ts

@@ -2,30 +2,25 @@ import { DATE_FORMAT, DATE_TIME_FULL_FORMAT } from '@licklist/core/dist/Config'
 import { EventStatistic } from '@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper'
 import { DateTime } from 'luxon'
 
-export function formatContent(content, maxSymbols) {
-  if (!content) return ''
-  if (content.length > maxSymbols) return `${content.slice(0, maxSymbols)}...`
-  return content
-}
+export const MIN_EVENT_DESCRIPTION_SIZE = 150;
+export const EVENT_DESCRIPTION_SIZE = 350;
+export const EMOJI_REGEX = /<span data-emoji-replacer=""><img[^>]*alt="([^"]+)"[^>]*><\/span>/g;
 
-export const formatContentWithoutTags = (
-  content,
-  maxLength = EVENT_DESCRIPTION_SIZE,
-) => {
-  if (!content) return ''
-  if (content < maxLength) return content
-  const text = content.replace(/<[^>]*>/g, '')
-  const trimmedText = text
-    .trim()
-    .replace(/&nbsp;|[^a-zA-Z0-9\s]/g, '')
-    .replace(/\s\s+/g, ' ')
+export const formatContent = (content, maxLength = EVENT_DESCRIPTION_SIZE) => {
+  if (!content) return '';
 
-  const words = trimmedText.slice(0, maxLength).split(' ')
-  const index = String(content).indexOf(words[words.length - 2])
-  return content.slice(0, index).concat('...')
-}
+  const replacedContent = replaceEmojiImagesWithText(content);
+
+  if (replacedContent.length <= maxLength) {
+    return replacedContent;
+  }
 
-export const EVENT_DESCRIPTION_SIZE = 350
+  return replacedContent.slice(0, maxLength).concat('...');
+};
+
+function replaceEmojiImagesWithText(text) {
+  return text.replace(EMOJI_REGEX, (_, emojiText) => emojiText);
+}
 
 /**
  * Calculate the total number of views from the given dates and event statistic.

package/src/iframe/activity-card/ActivityCard.tsx

@@ -1,6 +1,8 @@
 import { ReactNode } from 'react'
 import clsx from 'clsx'
 import { Image } from '@licklist/core/dist/DataMapper/Media/ImageDataMapper'
+import { ZoneResourcesAvailability } from '@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper'
+import { AvailabilityIndicator } from '../../availability-indicator'
 
 export const LAYOUT_GRID = 'grid'
 export const LAYOUT_LIST = 'list'
@@ -15,6 +17,7 @@ export type ActivityCardProps = {
   layout?: typeof LAYOUT_GRID | typeof LAYOUT_LIST
   availableTimes?: string | null
   image?: Image | null
+  resources?: ZoneResourcesAvailability
 }
 
 export const ActivityCard = ({
@@ -27,6 +30,7 @@ export const ActivityCard = ({
   onSelect,
   isSelected,
   layout = LAYOUT_GRID,
+  resources,
 }: ActivityCardProps) => {
   if (layout === LAYOUT_GRID) {
     return (
@@ -46,6 +50,7 @@ export const ActivityCard = ({
           {description && (
             <div className='mt-2 activity-card-description'>{description}</div>
           )}
+          {resources && <AvailabilityIndicator resources={resources} />}
         </div>
       </button>
     )
@@ -71,6 +76,7 @@ export const ActivityCard = ({
         {description && (
           <div className='mt-2 activity-card-description'>{description}</div>
         )}
+        {resources && <AvailabilityIndicator resources={resources} />}
       </div>
 
       <hr className='list-activity-card-hr' />

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/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -51,6 +51,7 @@ export const ProductQuantityInput = ({
       hasDeposit: category.allowDeposits && product?.deposit < product.price,
       price: product.price,
       productCategoryId: category.id,
+      zoneId: category.zone?.id,
       quantity,
       capacity: product?.capacity,
     })

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

@@ -38,7 +38,7 @@ export interface RyftPaymentFormProps {
   isCreateLoading: boolean
   isAppUsingInIframe?: boolean
   onApplePayButtonClick?: () => void
-  applePayButtonDisabled?: boolean
+  payButtonDisabled?: boolean
   initRyft: (
     onSuccess: () => void,
     onFailure: (error?: string) => void,
@@ -57,6 +57,7 @@ export const RyftPaymentForm = ({
   initRyft,
   resetReferrer,
   onSubmit,
+  payButtonDisabled,
 }: RyftPaymentFormProps) => {
   const { t } = useTranslation(['Design', 'Validation', 'Ryft'])
   const formRef = useRef<HTMLFormElement | null>(null)
@@ -89,7 +90,6 @@ export const RyftPaymentForm = ({
 
   const handleSubmit = async () => {
     setIsBtnDisabled(true)
-
     try {
       const paymentSession = await onSubmit()
 
@@ -142,17 +142,21 @@ export const RyftPaymentForm = ({
         t,
         isAppUsingInIframe,
         onApplePayButtonClick,
+        isDisableButton: !payButtonDisabled,
         additionalPaymentMethodsEnabled:
           providerPaymentSettings?.additionalPaymentMethodsEnabled,
       })
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [formRef.current?.childNodes?.length, showApplePayButton],
+    [
+      formRef.current?.childNodes?.length,
+      showApplePayButton,
+      payButtonDisabled,
+    ],
   )
 
   useEffect(() => {
     if (!accountId.data?.account_id || accountId.isError) return
-
     initRyft(
       () => {
         addEventHandler('cardValidationChanged', (e: MessageEvent['data']) => {
@@ -215,6 +219,7 @@ export const RyftPaymentForm = ({
         onSubmit={methods.handleSubmit(handleSubmit)}
         className='ryft-payment-form'
       >
+        <div className='form-disable-box' id='form-disable-box' />
         <div className='submit-button-wrapper mt-4 p-1'>
           <Button type='submit' disabled={isBtnDisabled || !isValid}>
             {isBtnDisabled && <ButtonLoader />}

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

@@ -7,6 +7,7 @@ interface InjectComponentsInRyftForm
     'onApplePayButtonClick' | 'isAppUsingInIframe'
   > {
   t: TFunction<string[]>
+  isDisableButton?: boolean
   additionalPaymentMethodsEnabled?: boolean
 }
 
@@ -14,16 +15,19 @@ export const injectComponentsInRyftForm = ({
   t,
   additionalPaymentMethodsEnabled,
   isAppUsingInIframe,
+  isDisableButton,
   onApplePayButtonClick,
 }: InjectComponentsInRyftForm) => {
   const cardContainer = document.getElementById('ryft-pay-iframe')
-
   if (!cardContainer) {
     return
   }
   // Removing of the old title container
   document.getElementById('card-title-container')?.remove()
 
+  cardContainer.style.opacity = isDisableButton ? '0.6' : '1'
+  cardContainer.ariaDisabled = isDisableButton?.toString()
+
   const cardTitle = document.createElement('div')
   const cardText = document.createElement('div')
   const cardTitleContainer = document.createElement('div')
@@ -35,7 +39,6 @@ export const injectComponentsInRyftForm = ({
   cardContainer?.before(cardTitleContainer)
 
   const payGrid = document.getElementById('ryft-pay-grid')
-
   if (!payGrid || !additionalPaymentMethodsEnabled) {
     return
   }
@@ -58,6 +61,29 @@ 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')
+  if (payIframe) {
+    const formBox = document.getElementById('form-disable-box')
+    if (formBox) {
+      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
+    if (googleButton) {
+      googleButton.disabled = isDisableButton
+      googleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+    if (appleButton) {
+      appleButton.disabled = isDisableButton
+      appleButton.style.opacity = isDisableButton ? '1' : '0.6'
+    }
+  }
+
   if (isAppUsingInIframe) {
     const applePayButton = document.createElement('button')
     applePayButton.id = 'apple-pay'

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/DateAndRecurrenceInput.tsx

@@ -198,6 +198,8 @@ export const DateAndRecurrenceInput = ({
     move(prevIndex, nextIndex)
   }
 
+  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+
   useEffect(() => {
     if (fields.length) {
       clearErrors('menuRecurrences')
@@ -307,7 +309,7 @@ export const DateAndRecurrenceInput = ({
           />
 
           <div className='manual-form-error'>
-            {errors.menuRecurrences?.message}
+            {errorMessage}
           </div>
         </div>
       </OverlayTrigger>

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

@@ -195,6 +195,8 @@ export const DateInput = ({
     }, 100)
   }
 
+  const errorMessage = errors.menuRecurrences?.message || errors.menuRecurrences?.root?.message 
+
   return (
     <Form.Group>
       <Form.Label>
@@ -247,7 +249,8 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes
+                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
               }
             />
           ))}
@@ -282,7 +285,7 @@ export const DateInput = ({
           />
 
           <div className='manual-form-error'>
-            {errors.menuRecurrences?.message}
+            {errorMessage}
           </div>
         </div>
       </OverlayTrigger>

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
@@ -228,6 +256,8 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId)
           }
 
+          const categoryType = CATEGORIES_TYPE[productCategory.type]
+
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -272,6 +302,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}