@licklist/design 0.44.486-dev.8 → 0.44.486-dev.81

package/src/{iframe/event/event-calendar → calendar}/components/CalendarDates/CalendarDates.tsx

@@ -1,23 +1,26 @@
-import React, { ReactElement, useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import { DateTime } from "luxon";
-import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { DAY_NUMBER } from "@licklist/core/dist/Config";
+import { DateTimeButton } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
-import { CalendarDate } from "../CalendarDate";
-import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type CalendarDatesProps = Omit<
+  CalendarProps,
+  "currentDate" | "setCurrentDate" | "initialDate"
+>;
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
+  calendarDates,
+  selectedDate,
+  setSelectedDate,
   fromPrice,
+  getAvailability,
+  includeAvailability,
 }: CalendarDatesProps) => {
-  const { calendarDates, initialDate, selectedDate, setSelectedDate } =
-    useContext(EventCalendarContext);
-
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
 
@@ -40,22 +43,24 @@ export const CalendarDates = ({
       <CalendarWeekdays />
       <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
-          if (date === null) {
-            return <div />;
-          }
+          if (date === null) return <div />;
 
           const isDisabled =
             isLoading || isSelectedDateDisabled(date, disabledDates);
 
           return (
-            <CalendarDate
+            <DateTimeButton
               key={+date}
-              currentDate={date}
-              initialDate={initialDate}
-              selectedDate={selectedDate}
-              setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              fromPrice={fromPrice}
+              isSelected={
+                selectedDate ? date.hasSame(selectedDate, "day") : undefined
+              }
+              date={date.toFormat(DAY_NUMBER)}
+              onSelect={() => setSelectedDate(date)}
+              price={fromPrice}
+              resources={getAvailability?.(date)}
+              showResources={includeAvailability}
+              calendarView
             />
           );
         })}

package/src/{iframe/event/event-calendar → calendar}/components/CalendarSelect/CalendarSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
 import clsx from "clsx";
-import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../../page/components/PageBody/constants";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
 
 export type CalendarSelectOption = {
   label: string;

package/src/calendar/index.ts

@@ -0,0 +1,3 @@
+export * from "./Calendar";
+export * from "./components/CalendarSelect";
+export * from "./utils";

package/src/calendar/utils/index.ts

@@ -0,0 +1,28 @@
+import { DateTime, Interval } from "luxon";
+import isEqual from "lodash/isEqual";
+
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
+  );
+};
+
+export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const startOfMonth = initialDate.startOf("month");
+  const endOfMonth = initialDate.endOf("month");
+
+  return Interval.fromDateTimes(startOfMonth, endOfMonth)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};
+
+export const getWeekCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const lastDay = initialDate.plus({ days: 7 });
+
+  return Interval.fromDateTimes(initialDate, lastDay)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};

package/src/date-time-button/DateTimeButton.stories.tsx

@@ -78,3 +78,20 @@ WithPrice.args = {
   isOnlyTimeContainer: false,
   price: "from $8000",
 };
+
+export const WithAvailability: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithAvailability.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+  resources: {
+    booked: 1,
+    total: 3,
+  },
+};

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

@@ -1,40 +1,41 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
+import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
 export type DateTimeButtonProps<T = DateTime | string> = {
   date: T;
   isSelected?: boolean;
   isDisabled?: boolean;
+  isSoldOut?: boolean;
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
+  resources?: ZoneResourcesAvailability | null;
+  calendarView?: boolean;
+  showResources?: boolean;
 };
 
 export const DateTimeButton = <T extends DateTime | string>({
   date,
-  isDisabled,
+  isDisabled: _isDisabled,
   isSelected,
+  isSoldOut,
   onSelect,
   isOnlyTimeContainer,
   price,
+  resources,
+  calendarView,
+  showResources,
 }: DateTimeButtonProps<T>) => {
-  // const infoLogo = useMemo(() => {
-  //   if (info?.logo === infoLogoType.LIMIT) {
-  //     return <LimitedSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.AVAILABLE) {
-  //     return <AvailableSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.SOLD_OUT) {
-  //     return <SoldOutSvg />;
-  //   }
-  //   return null;
-  // }, [info]);
-
   const isTimeVariant = typeof date === "string";
 
+  const isDisabled =
+    _isDisabled ||
+    (resources && resources.bookedResources === resources.totalResources);
+
   return (
     <button
       type="button"
@@ -46,7 +47,8 @@ export const DateTimeButton = <T extends DateTime | string>({
         isSelected && "selected",
         isTimeVariant && "time-button",
         isOnlyTimeContainer && "only-time-container",
-        !isTimeVariant && "today"
+        !isTimeVariant && "today",
+        calendarView && "calendar-view"
       )}
     >
       {isTimeVariant ? (
@@ -61,13 +63,13 @@ export const DateTimeButton = <T extends DateTime | string>({
 
       {price && !isDisabled && <div className="price">{price}</div>}
 
-      {/* TODO uncomment when adding availability */}
-      {/* {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
-        </div>
-      )} */}
+      {showResources && resources && (
+        <AvailabilityIndicator
+          resources={resources}
+          isUnavailable={_isDisabled}
+          isSoldOut={isSoldOut}
+        />
+      )}
     </button>
   );
 };

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

@@ -168,6 +168,9 @@ export function IntervalInput({
                 value={value}
                 onChange={onChange}
                 date={start}
+                minDate={DateTime.fromISO(start)
+                  .plus({ day: 1 })
+                  .toFormat("yyyy-MM-dd")}
                 disabled={disabled}
               />
             )}

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

@@ -47,7 +47,6 @@ const contextValue = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     steps: [
       {
@@ -60,7 +59,6 @@ const contextValue = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -126,7 +124,6 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -144,7 +141,6 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -690,7 +686,6 @@ const defaultProductSets = [
     name: "Example",
     type: PRODUCT_SET_TYPES[0],
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[0],
     fieldSet: {
       id: 1,
@@ -713,7 +708,6 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -779,7 +773,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -797,7 +790,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -883,7 +875,6 @@ const defaultProductSets = [
     name: "Example 2",
     type: PRODUCT_SET_TYPES[1],
     termsAndConditions: "",
-    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[1],
     fieldSet: {
       id: 2,
@@ -906,7 +897,6 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -972,7 +962,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -990,7 +979,6 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
-            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,

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

@@ -266,7 +266,7 @@ export const EditEventForm = ({
           </Form.Group>
           {/* key is used as a hack to make sure rrule is rendered correctly */}
           <IntervalInput
-            key={watch("rrule")}
+            key={watch("name")}
             disabled={disabled}
             productSetId={productSetId}
             productSets={productSets}

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

@@ -15,8 +15,8 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
+  relyOnPeopleType: productSet?.relyOnPeopleType ?? null,
   thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
-  isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
   emailTemplates:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
@@ -24,7 +24,7 @@ export const getDefaultValues = (
       : undefined,
   smsTemplates:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? getFilteredTemplates(productSet?.smsTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

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

@@ -9,7 +9,11 @@ import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventSta
 import Icon from "../../static/Icon";
 import { Sale } from "../../types/bookings";
 import { TipTapEditor } from "../../tiptap-editor/TipTapEditor";
-import { formatContent, getStatisticInfo } from "./utils";
+import {
+  EVENT_DESCRIPTION_SIZE,
+  formatContentWithoutTags,
+  getStatisticInfo,
+} from "./utils";
 import { ReactComponent as ChartBarIcon } from "../../assets/dashboard/chartBar.svg";
 
 export interface EventCardProps extends HasPermissionProp {
@@ -48,7 +52,7 @@ export function EventCard({
   const { formatNumber, formatDate } = useIntl();
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date);
   const memoedContent = useMemo(
-    () => formatContent(description, 300),
+    () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
     [description]
   );
 

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

@@ -8,34 +8,107 @@ export function formatContent(content, maxSymbols) {
   return content;
 }
 
-export const getStatisticInfo = (
-  eventStatistic: EventStatistic | null,
-  date: string
+export const formatContentWithoutTags = (
+  content,
+  maxLength = EVENT_DESCRIPTION_SIZE
 ) => {
-  let totalViews = 0;
+  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, " ");
+
+  const words = trimmedText.slice(0, maxLength).split(" ");
+  const index = String(content).indexOf(words[words.length - 2]);
+  return content.slice(0, index).concat("...");
+};
+
+export const EVENT_DESCRIPTION_SIZE = 300;
+
+/**
+ * Calculate the total number of views from the given dates and event statistic.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - The event statistic object.
+ * @returns {number} - The total number of views.
+ */
+export const calculateTotalViews = (
+  dates: string[],
+  eventStatistic: EventStatistic
+): number => {
+  return dates.reduce(
+    (rootAcc, date) =>
+      rootAcc +
+      Object.values(eventStatistic.views[date] ?? {}).reduce(
+        (acc, view) => acc + (view.pageViews || 0),
+        0
+      ),
+    0
+  );
+};
+
+/**
+ * Calculates the total number of products sold and the total amount sold
+ * based on the provided dates and event statistics.
+ *
+ * @param {string[]} dates - An array of dates.
+ * @param {EventStatistic} eventStatistic - Object containing event statistics.
+ * @returns {number[]} An array representing the total number of products sold and total amount sold.
+ */
+export const calculateTotalSoldAndAmount = (
+  dates: string[],
+  eventStatistic: EventStatistic
+): [number, number] => {
   let totalSold = 0;
   let totalAmount = 0;
+  dates.forEach((date) =>
+    Object.values(eventStatistic.productCategorySummary[date] ?? {}).forEach(
+      ({ totalPerCategory, productsSummary }) => {
+        totalAmount += totalPerCategory || 0;
+        totalSold +=
+          productsSummary?.reduce((acc, curr) => acc + curr.productsSold, 0) ??
+          0;
+      }
+    )
+  );
 
-  if (!eventStatistic) return { totalViews: 0, totalSold: 0, totalAmount: 0 };
+  return [totalSold, totalAmount];
+};
+
+/**
+ * Get statistic information for a given event and date.
+ * @param {EventStatistic | null} eventStatistic - The event statistic object.
+ * @param {string} date - The date in ISO format.
+ * @returns {{
+ *    totalViews: number;
+ *    totalSold: number;
+ *    totalAmount: number;
+ * }} The statistic information object.
+ */
+export const getStatisticInfo = (
+  eventStatistic: EventStatistic | null,
+  date: string
+): {
+  totalViews: number;
+  totalSold: number;
+  totalAmount: number;
+} => {
+  const defaultValues = { totalViews: 0, totalSold: 0, totalAmount: 0 };
+  if (!eventStatistic) return defaultValues;
 
   const viewsFormattedDate = DateTime.fromISO(date)
     .toUTC()
     .toFormat(DATE_FORMAT);
-
-  totalViews = eventStatistic.views[viewsFormattedDate]?.pageViews || 0;
-
   const summaryFormattedDate = DateTime.fromISO(date)
     .toUTC()
     .toFormat(DATE_TIME_FULL_FORMAT);
 
-  eventStatistic?.productCategorySummary?.[summaryFormattedDate]?.forEach(
-    ({ totalPerCategory, productsSummary = [] }) => {
-      totalAmount += totalPerCategory || 0;
-
-      productsSummary?.forEach(({ productsSold }) => {
-        totalSold += productsSold;
-      });
-    }
+  const totalViews = calculateTotalViews([viewsFormattedDate], eventStatistic);
+  const [totalSold, totalAmount] = calculateTotalSoldAndAmount(
+    [summaryFormattedDate],
+    eventStatistic
   );
 
   return { totalViews, totalSold, totalAmount };

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Modal, Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import Icon from "../../static/Icon";
 import { StaticTable } from "../../table";
 import { useTableData } from "./hooks/useTableData";
@@ -9,6 +10,7 @@ import { useTableData } from "./hooks/useTableData";
 export type EventStatisticModalProps = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
+  date?: Event["startAt"] | null;
   eventStatistic?: EventStatistic | null;
   title?: string;
 };
@@ -16,11 +18,13 @@ export type EventStatisticModalProps = {
 export const EventStatisticModal = ({
   isOpen,
   setIsOpen,
+  date,
   eventStatistic,
   title,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
-  const data = useTableData(eventStatistic);
+
+  const data = useTableData(date, eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };

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

@@ -4,10 +4,14 @@ import { useIntl } from "react-intl";
 import { useTranslation } from "react-i18next";
 import * as Config from "@licklist/core/dist/Config";
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { Event } from "@licklist/core/dist/DataMapper/Provider/EventDataMapper";
 import { convertEventStatisticToTableData, TRANSLATION_KEYS } from "../utils";
 import { StaticTableData } from "../../../table";
 
-export const useTableData = (eventStatistic: EventStatistic | null) => {
+export const useTableData = (
+  date: Event["startAt"] | null,
+  eventStatistic: EventStatistic | null
+) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
   const [tableRows, setTableRows] = useState<StaticTableData[]>([]);
@@ -28,14 +32,17 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
     return t(key);
   };
 
-  const transformStatisticToTableRows = (statistic: EventStatistic | null) => {
+  const transformStatisticToTableRows = (
+    date: Event["startAt"],
+    statistic: EventStatistic | null
+  ) => {
     if (!statistic) {
       return [];
     }
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(statistic).forEach(
+    convertEventStatisticToTableData(date, statistic).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -77,9 +84,9 @@ export const useTableData = (eventStatistic: EventStatistic | null) => {
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(eventStatistic));
+    setTableRows(transformStatisticToTableRows(date, eventStatistic));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [eventStatistic]);
+  }, [date, eventStatistic]);
 
   return tableRows;
 };

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

@@ -1,4 +1,6 @@
 import { EventStatistic } from "@licklist/core/dist/DataMapper/Provider/EventStatisticDataMapper";
+import { DateTime } from "luxon";
+import { DATE_TIME_FULL_FORMAT } from "@licklist/core/dist/Config";
 
 export const TRANSLATION_KEYS = {
   shortQuantity: "shortQuantity",
@@ -7,6 +9,7 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
+  date: string,
   eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
@@ -25,49 +28,51 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  Object.values(eventStatistic?.productCategorySummary)?.forEach(
-    (categories) => {
-      categories?.forEach(
-        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-          let quantity = 0;
+  const summaryFormattedDate = DateTime.fromISO(date)
+    .toUTC()
+    .toFormat(DATE_TIME_FULL_FORMAT);
 
-          totalAmount += totalPerCategory || 0;
+  Object.values(
+    eventStatistic?.productCategorySummary[summaryFormattedDate] ?? {}
+  )?.forEach(
+    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+      let quantity = 0;
 
-          tableDataArray.push({
-            name: categoryName,
-            key: `${eventId}.${categoryName}`,
-            isBold: true,
-            isHeader: true,
-            quantity: TRANSLATION_KEYS.shortQuantity,
-            total: TRANSLATION_KEYS.total,
-          });
+      totalAmount += totalPerCategory || 0;
 
-          productsSummary?.forEach(
-            ({ productsSold, name, totalQuantity, total }) => {
-              quantity += productsSold;
+      tableDataArray.push({
+        name: categoryName,
+        key: `${eventId}.${categoryName}`,
+        isBold: true,
+        isHeader: true,
+        quantity: TRANSLATION_KEYS.shortQuantity,
+        total: TRANSLATION_KEYS.total,
+      });
 
-              tableDataArray.push({
-                name,
-                key: `${eventId}.${categoryName}.${name}`,
-                quantity: totalQuantity
-                  ? `${productsSold} / ${totalQuantity}`
-                  : String(productsSold),
-                total: String(total),
-              });
-            }
-          );
+      productsSummary?.forEach(
+        ({ productsSold, name, totalQuantity, total }) => {
+          quantity += productsSold;
 
           tableDataArray.push({
-            name: TRANSLATION_KEYS.totalPerCategory,
-            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
-            quantity,
-            total: totalPerCategory,
-            isBold: true,
+            name,
+            key: `${eventId}.${categoryName}.${name}`,
+            quantity: totalQuantity
+              ? `${productsSold} / ${totalQuantity}`
+              : String(productsSold),
+            total: String(total),
           });
-
-          totalQuantity += quantity;
         }
       );
+
+      tableDataArray.push({
+        name: TRANSLATION_KEYS.totalPerCategory,
+        key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+        quantity,
+        total: totalPerCategory,
+        isBold: true,
+      });
+
+      totalQuantity += quantity;
     }
   );