@licklist/design 0.67.3-dev.3 → 0.67.3

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -1,4 +1,4 @@
-import { Button, Card } from "react-bootstrap";
+import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
@@ -47,7 +47,6 @@ export function IframeEventCard({
   descriptionId,
   imageClassName,
   showMoreInfo,
-  snippetSetting,
 }: IframeEventCardProps) {
   const { formatNumber } = useIntl();
   const { t } = useTranslation("Design");
@@ -70,11 +69,7 @@ export function IframeEventCard({
         { "list-view": isListView },
         className,
       )}
-      onClick={
-        goToDetails || !snippetSetting.displayBookingButtonOnEventList
-          ? onClick
-          : undefined
-      }
+      onClick={goToDetails ? onClick : undefined}
     >
       {showMoreInfo && <div className="iframe-event-card__info-icon">i</div>}
       {imageSrc && (
@@ -138,15 +133,6 @@ export function IframeEventCard({
               />
             </Card.Text>
           )}
-          {!!snippetSetting.displayBookingButtonOnEventList && showMoreInfo && (
-            <Button
-              className="step-save-btn w-25 mt-4"
-              type="button"
-              onClick={onClick}
-            >
-              {t("book")}
-            </Button>
-          )}
         </div>
       </Card.Body>
     </Card>

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -260,9 +260,9 @@ export function Default() {
                 (point) =>
                   Boolean(
                     MENU_STEPS[0].pointProducts.find(
-                      (pointProduct) => pointProduct.pointId === point.id
-                    )
-                  )
+                      (pointProduct) => pointProduct.pointId === point.id,
+                    ),
+                  ),
               )}
               pointProducts={MENU_STEPS[0].pointProducts}
               usedInIframe={usedInIframe}

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

@@ -51,7 +51,6 @@ 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

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

package/src/layout/DropDown.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 
 interface Props {
   children?: React.ReactNode | React.ReactNode[];
@@ -24,5 +24,4 @@ const DropDown = forwardRef((props: Props, ref: any) => {
 });
 
 DropDown.displayName = "DropDown";
-
 export default DropDown;

package/src/layout/DropDownToggle.tsx

@@ -19,6 +19,4 @@ const DropDownToggle = forwardRef((props: Props, ref: any) => {
   );
 });
 
-DropDownToggle.displayName = "DropDownToggle";
-
 export default DropDownToggle;

package/src/modals/confirmation/ConfirmModal.tsx

@@ -20,9 +20,6 @@ export type ConfirmModalTypes =
 export interface ConfirmModalProps {
   type?: ConfirmModalTypes;
   children?: (confirm: (action: ConfirmAction) => void) => ReactNode;
-  // confirm function  memoize the callback function. It's an alternative function
-  confirmationHandler?: () => Promise<boolean | undefined>;
-  disabledButtons?: boolean;
   title?: string;
   content?: string | ReactNode;
   onClose?: () => void;
@@ -40,9 +37,7 @@ export function ConfirmModal({
   type = "default",
   children,
   onClose,
-  confirmationHandler,
   title,
-  disabledButtons,
   content,
   hideButtons = false,
 }: ConfirmModalProps) {
@@ -57,16 +52,10 @@ export function ConfirmModal({
     setIsOpen(() => true);
   };
 
-  const handleConfirmation = async (e) => {
+  const handleConfirmation = (e) => {
     e.stopPropagation();
-    if (!actionRef.current && !confirmationHandler) return;
-    if (confirmationHandler) {
-      const res = await confirmationHandler();
-      if (res) {
-        setIsOpen(() => false);
-      }
-      return;
-    }
+    if (!actionRef.current) return;
+
     actionRef.current();
     setIsOpen(() => false);
   };
@@ -99,7 +88,6 @@ export function ConfirmModal({
           <Button
             variant="danger"
             className="btn-sm rounded"
-            disabled={disabledButtons}
             onClick={handleClose}
             data-id={CONFIRM_MODAL_ACTION_DECLINE}
           >
@@ -117,14 +105,12 @@ export function ConfirmModal({
                   variant="outline"
                   className="cancel-button"
                   onClick={handleClose}
-                  disabled={disabledButtons}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
                   {t("cancel")}
                 </Button>
                 <Button
                   variant="danger"
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >
@@ -135,7 +121,6 @@ export function ConfirmModal({
               <>
                 <Button
                   variant="danger"
-                  disabled={disabledButtons}
                   onClick={handleClose}
                   data-id={CONFIRM_MODAL_ACTION_DECLINE}
                 >
@@ -143,7 +128,6 @@ export function ConfirmModal({
                 </Button>
                 <Button
                   variant="success"
-                  disabled={disabledButtons}
                   onClick={handleConfirmation}
                   data-id={CONFIRM_MODAL_ACTION_CONFIRM}
                 >

package/src/product-set/card/ProductSetCard.stories.tsx

@@ -9,8 +9,7 @@ export default {
 
 export const Default: Story<ProductSetCardProps> = (args) => (
   <ProductSetCard {...args} />
-)
-
+);
 
 Default.args = {
   href: "#",
@@ -18,4 +17,3 @@ Default.args = {
   rrule: "FREQ=WEEKLY;BYDAY=WE",
   hasPermission: true,
 };
-

package/src/product-set/card/ProductSetCard.tsx

@@ -9,20 +9,15 @@ import RouteService from "@licklist/plugins/dist/services/Route/RouteService";
 import { FaEllipsisH, FaEye, FaTrashAlt } from "react-icons/fa";
 import { ConfirmModal } from "../../modals";
 import { MenuButton } from "../../table/MenuButton";
-import { ProductSetNameControl } from "../form/ProductSetNameControl";
 
 export interface ProductSetCardProps extends HasPermissionProp {
   name: string;
   rrule?: string;
   href: string;
-  duplicateProductSetName: string;
-  onChangeDuplicateProductSetName: (value: string) => void;
-  onCopy: () => Promise<boolean | undefined>;
+  onCopy: () => void;
   onRemove: () => void;
-  isLoading?: boolean;
   className?: string;
   override?: number;
-  duplicateProductSetError?: string;
 }
 
 export function ProductSetCard({
@@ -31,10 +26,6 @@ export function ProductSetCard({
   href,
   onCopy,
   onRemove,
-  onChangeDuplicateProductSetName,
-  duplicateProductSetName,
-  duplicateProductSetError,
-  isLoading,
   className = "",
   hasPermission = true,
   override = 0,
@@ -44,23 +35,19 @@ export function ProductSetCard({
   const productSetCardClasses = `product-set-card ${className}`;
   const [isOverlayVisibile, setIsOverlayVisible] = useState(false);
 
-  const onCardClick = () => {
-    RouteService.redirectTo(href);
-  };
   return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
     <div
       role="button"
       tabIndex={0}
       className="border-0 product-set-card-wrapper w-100 pb-0"
-      onClick={onCardClick}
+      onClick={() => RouteService.redirectTo(href)}
+      onKeyUp={() => RouteService.redirectTo(href)}
     >
       <div className={productSetCardClasses}>
         <div className="product-set-card-link">
           <div className="d-flex flex-column">
             <div>
-              {name}
-              {rrule && `(${RRule.fromString(rrule).toText()})`}
+              {name} {rrule && `(${RRule.fromString(rrule).toText()})`}
             </div>
             {!!override && (
               <div className="h6 bold ml-1">
@@ -92,33 +79,14 @@ export function ProductSetCard({
                 >
                   {hasPermission && (
                     <>
-                      <ListGroup.Item
-                        action
-                        as="div"
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action as="div">
                         {Boolean(onCopy) && (
-                          <ConfirmModal
-                            // confirm function  memoize the callback function and it leads to bugs
-                            confirmationHandler={onCopy}
-                            disabledButtons={isLoading}
-                            content={
-                              <ProductSetNameControl
-                                value={duplicateProductSetName}
-                                onChange={onChangeDuplicateProductSetName}
-                                error={duplicateProductSetError}
-                              />
-                            }
-                          >
+                          <ConfirmModal>
                             {(confirm) => (
                               <MenuButton
                                 onClick={() => {
                                   setIsOverlayVisible(false);
-                                  onChangeDuplicateProductSetName(name);
-                                  // confirm function  memoize the callback function and it leads to bugs
-                                  confirm(() => {});
+                                  confirm(onCopy);
                                 }}
                                 name={t("duplicate")}
                                 className="product-set-card-menu-item-text"
@@ -127,14 +95,7 @@ export function ProductSetCard({
                           </ConfirmModal>
                         )}
                       </ListGroup.Item>
-                      <ListGroup.Item
-                        action
-                        className="text-danger"
-                        as="div"
-                        role="button"
-                        tabIndex={0}
-                        onClick={(e) => e.stopPropagation()}
-                      >
+                      <ListGroup.Item action className="text-danger" as="div">
                         {Boolean(onRemove) && (
                           <ConfirmModal>
                             {(confirm) => (

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

@@ -28,16 +28,17 @@ import {
   AvailableTimesControlRef,
 } from "../../zone/form/components/AvailableTimesControl";
 
+// eslint-disable-next-line max-len
+
 export interface DateAndRecurrenceInputValues {
   menuRecurrences?: Partial<ProductSetRecurrence>[];
 }
 
 interface DateAndRecurrenceInputProps {
   isEventEditProductSet?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement: boolean;
   isLoading?: boolean;
-  timeZone: string;
 }
 
 export const DateAndRecurrenceInput = ({
@@ -45,7 +46,6 @@ export const DateAndRecurrenceInput = ({
   providerHasBookingManagement,
   workHours,
   isLoading,
-  timeZone,
 }: DateAndRecurrenceInputProps) => {
   const {
     control,
@@ -90,7 +90,7 @@ export const DateAndRecurrenceInput = ({
     clearEditState();
   });
 
-  const popoverId = useId();
+  const popoverId = useId()!;
 
   const { t } = useTranslation("Design");
 
@@ -228,8 +228,6 @@ export const DateAndRecurrenceInput = ({
                 defaultValues={editState.values}
                 onChange={handleRecurringDateChange}
                 onDelete={handleDelete}
-                workHours={workHours}
-                timeZone={timeZone}
               >
                 {providerHasBookingManagement && (
                   <AvailableTimesControl

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

@@ -247,8 +247,7 @@ export const DateInput = ({
               menuRecurrence={menuRecurrence}
               onEdit={() => handleOnEdit(menuRecurrence, index)}
               errorMessage={
-                errors?.menuRecurrences?.[`${index}`]?.availableTimes
-                  ?.message || errors?.menuRecurrences?.[`${index}`]?.message
+                errors?.menuRecurrences?.[`${index}`]?.availableTimes?.message
               }
             />
           ))}

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

@@ -1,7 +1,9 @@
+import { useEffect } from "react";
 import { Col, Form, Row } from "react-bootstrap";
 import { Controller, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import clsx from "clsx";
+import { DateTime } from "luxon";
 import {
   OPERATIONAL_COST_CUSTOMER,
   OPERATIONAL_COST_PROVIDER,
@@ -14,6 +16,7 @@ import {
   RELY_ON_PEOPLE_TYPES,
   RelyOnPeopleType,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
+import { DATE_MONTH_LOCALE_FORMAT } from "@licklist/core/dist/Config";
 import { useId } from "@react-aria/utils";
 import { FieldSet } from "@licklist/core/dist/DataMapper/Order/FieldSetDataMapper";
 import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/EmailTemplateDataMapper";
@@ -85,11 +88,11 @@ export interface ProductSetControlProps {
   fieldSets?: FieldSet[];
   showEmailTemplate?: boolean;
   showSmsTemplate?: boolean;
-  workHours: WorkHour[] | undefined;
+  workHours?: WorkHour[];
   providerHasBookingManagement?: boolean;
   isOverrides?: boolean;
+  occurrenceStartAtDate?: string;
   isCreateNewOverrides?: boolean;
-  timeZone: string;
 }
 
 export function ProductSetControl({
@@ -106,8 +109,8 @@ export function ProductSetControl({
   workHours,
   providerHasBookingManagement = false,
   isOverrides = false,
+  occurrenceStartAtDate,
   isCreateNewOverrides = false,
-  timeZone,
 }: ProductSetControlProps) {
   const { t } = useTranslation(["Design", "Validation", "Notification"]);
   const {
@@ -116,10 +119,12 @@ export function ProductSetControl({
     formState: { errors },
     watch,
     setError,
+    setValue,
     clearErrors,
   } = useFormContext<ProductSetControlValues>();
 
   const steps = watch("steps");
+  const productSetName = watch("name");
 
   const nameId = useId();
   const termsAndConditionsId = useId();
@@ -133,6 +138,13 @@ export function ProductSetControl({
     productCategories?.some((category) => checkIfZoneCategory(category?.type)),
   );
 
+  useEffect(() => {
+    if (!occurrenceStartAtDate) return;
+    const eventStartDate = DateTime.fromISO(occurrenceStartAtDate);
+    const eventStart = eventStartDate.toFormat(DATE_MONTH_LOCALE_FORMAT);
+    setValue("name", `${productSetName} (${eventStart})`);
+  }, [setValue, occurrenceStartAtDate]);
+
   return (
     <Row
       className={`product-set-form ${
@@ -188,7 +200,6 @@ export function ProductSetControl({
                 workHours={isZoneAdded ? workHours : undefined}
                 isLoading={isLoading}
                 providerHasBookingManagement={providerHasBookingManagement}
-                timeZone={timeZone}
               />
             )}
           </>

package/src/product-set/control/ProductSetRecurrenceControl.stories.tsx

@@ -23,7 +23,7 @@ interface ProductSetRecurrences {
 
 export const Default: Story<ProductSetRecurrences> = (args) => {
   const [items, setItems] = useState(
-    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? []
+    args.menuRecurrences?.sort((a, b) => a.sort - b.sort) ?? [],
   );
 
   const onDragEnd = ({ over, active }) => {
@@ -31,7 +31,7 @@ export const Default: Story<ProductSetRecurrences> = (args) => {
 
     setItems((items) => {
       const prevIndex = items.findIndex(
-        (item) => String(item.id) === active.id
+        (item) => String(item.id) === active.id,
       );
       const nextIndex = items.findIndex((item) => String(item.id) === over.id);
 

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

@@ -8,7 +8,6 @@ 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 {
@@ -26,11 +25,7 @@ import { ProductCategoryControl } from "../product-category";
 import { ProductCategory } from "../types";
 import { ProductsControl } from "./ProductsControl";
 import { ProductSetFormValues, WithIsLoading } from "./ProductSetForm";
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from "./SelectCategoryModal";
+import { SelectCategoryModal } from "./SelectCategoryModal";
 import { ProductSetLoadingContext } from "./context";
 import { VenueMapSetModal } from "./VenueMapSetModal";
 import { moveArrayElements, sortArrayByIndex } from "../utils";
@@ -38,29 +33,6 @@ 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;
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId);
           };
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type];
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -302,12 +272,6 @@ 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}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form, Col, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
@@ -22,21 +22,16 @@ import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
-import { ErrorModal } from "../../iframe/order-process/components/ErrorModal";
 
 export interface WithIsLoading {
   isLoading: boolean;
 }
-export interface WithIdOptional {
-  id?: number;
-}
-
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;
@@ -59,7 +54,6 @@ export interface ProductSetFormProps
   isOverrides?: boolean;
   workHours?: WorkHour[];
   isCreateNewOverrides?: boolean;
-  timeZone: string;
 }
 
 export function ProductSetForm({
@@ -78,7 +72,6 @@ export function ProductSetForm({
   workHours,
   isOverrides,
   isCreateNewOverrides,
-  timeZone,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -89,7 +82,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
-  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -127,18 +119,11 @@ export function ProductSetForm({
     if (!serverErrors) {
       return;
     }
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0]);
-    }
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
   useEffect(() => {
-    window.history.pushState(
-      null,
-      "",
-      window.location.pathname + window.location.search,
-    );
+    window.history.pushState(null, "", window.location.pathname);
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
 
@@ -165,12 +150,6 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
-      <ErrorModal
-        message={errorMessage}
-        isOpen={!!errorMessage}
-        onClose={() => setErrorMessage("")}
-      />
-
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
@@ -196,7 +175,6 @@ export function ProductSetForm({
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
                     isCreateNewOverrides={isCreateNewOverrides}
-                    timeZone={timeZone}
                   />
                   <Row>
                     <Col md={6} sm={12} />

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

@@ -1,4 +1,7 @@
-import { useContext, useState } from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { useContext, useState } from "react";
+
 import {
   ArrayPath,
   Controller,
@@ -79,14 +82,14 @@ export const ProductZonesControl = <T extends FormValues>({
 
   const productZonesError = HookFormService.getErrors<T>(
     `${productZonesFieldName}.root` as Path<T>,
-    errors,
+    errors
   );
 
   const zoneCapacity = useWatch({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.capacity` as const,
+        (_, index) => `${productZonesFieldName}.${index}.capacity` as const
       ),
     ],
   });
@@ -95,7 +98,7 @@ export const ProductZonesControl = <T extends FormValues>({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productZonesFieldName}.${index}.duration` as const,
+        (_, index) => `${productZonesFieldName}.${index}.duration` as const
       ),
     ],
   });

package/src/product-set/form/SelectCategoryModal.stories.tsx

@@ -29,7 +29,7 @@ Default.args = {
 };
 
 export const WithBookingManagement: Story<SelectCategoryModalProps> = (
-  args
+  args,
 ) => (
   <ProductSetLoadingContext.Provider value={contextValue}>
     <SelectCategoryModal {...args} />

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

@@ -25,7 +25,7 @@ import {
 } from "react-icons/fa";
 import { ProductSetLoadingContext } from "./context";
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,7 +33,7 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-export type CategoryConfig = { label: string; icon: ReactElement };
+type CategoryConfig = { label: string; icon: ReactElement };
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {