@licklist/design 0.44.486-dev.83 → 0.44.486

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

@@ -8,107 +8,34 @@ export function formatContent(content, maxSymbols) {
   return content;
 }
 
-export const formatContentWithoutTags = (
-  content,
-  maxLength = EVENT_DESCRIPTION_SIZE
+export const getStatisticInfo = (
+  eventStatistic: EventStatistic | null,
+  date: string
 ) => {
-  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 totalViews = 0;
   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;
-      }
-    )
-  );
 
-  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;
+  if (!eventStatistic) return { totalViews: 0, totalSold: 0, totalAmount: 0 };
 
   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);
 
-  const totalViews = calculateTotalViews([viewsFormattedDate], eventStatistic);
-  const [totalSold, totalAmount] = calculateTotalSoldAndAmount(
-    [summaryFormattedDate],
-    eventStatistic
+  eventStatistic?.productCategorySummary?.[summaryFormattedDate]?.forEach(
+    ({ totalPerCategory, productsSummary = [] }) => {
+      totalAmount += totalPerCategory || 0;
+
+      productsSummary?.forEach(({ productsSold }) => {
+        totalSold += productsSold;
+      });
+    }
   );
 
   return { totalViews, totalSold, totalAmount };

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

@@ -2,7 +2,6 @@ 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";
@@ -10,21 +9,21 @@ import { useTableData } from "./hooks/useTableData";
 export type EventStatisticModalProps = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
-  date?: Event["startAt"] | null;
   eventStatistic?: EventStatistic | null;
   title?: string;
+  date?: string;
 };
 
 export const EventStatisticModal = ({
   isOpen,
   setIsOpen,
-  date,
   eventStatistic,
   title,
+  date,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
+  const data = useTableData(eventStatistic, date);
 
-  const data = useTableData(date, eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };
@@ -59,7 +58,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="striped-static-table"
+              className="event-statistic-table"
             />
           </>
         ) : (

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

@@ -4,13 +4,12 @@ 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 = (
-  date: Event["startAt"] | null,
-  eventStatistic: EventStatistic | null
+  eventStatistic: EventStatistic | null,
+  date: string
 ) => {
   const { t } = useTranslation("Design");
   const { formatNumber } = useIntl();
@@ -33,8 +32,8 @@ export const useTableData = (
   };
 
   const transformStatisticToTableRows = (
-    date: Event["startAt"],
-    statistic: EventStatistic | null
+    statistic: EventStatistic | null,
+    date: string
   ) => {
     if (!statistic) {
       return [];
@@ -42,7 +41,7 @@ export const useTableData = (
 
     const tableDataRows: StaticTableData[] = [];
 
-    convertEventStatisticToTableData(date, statistic).forEach(
+    convertEventStatisticToTableData(statistic, date).forEach(
       ({ name, quantity, total, isBold, isHeader, key }) => {
         const formattedTotal = !Object.keys(TRANSLATION_KEYS).includes(
           String(total)
@@ -84,9 +83,9 @@ export const useTableData = (
   };
 
   useEffect(() => {
-    setTableRows(transformStatisticToTableRows(date, eventStatistic));
+    setTableRows(transformStatisticToTableRows(eventStatistic, date));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [date, eventStatistic]);
+  }, [eventStatistic]);
 
   return tableRows;
 };

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

@@ -9,8 +9,8 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
-  date: string,
-  eventStatistic: EventStatistic
+  eventStatistic: EventStatistic,
+  date: string
 ) => {
   let totalAmount = 0;
   let totalQuantity = 0;
@@ -28,13 +28,11 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  const summaryFormattedDate = DateTime.fromISO(date)
+  const formattedDate = DateTime.fromISO(date)
     .toUTC()
     .toFormat(DATE_TIME_FULL_FORMAT);
 
-  Object.values(
-    eventStatistic?.productCategorySummary[summaryFormattedDate] ?? {}
-  )?.forEach(
+  eventStatistic?.productCategorySummary?.[formattedDate]?.forEach(
     ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
       let quantity = 0;
 

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

@@ -3,7 +3,6 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -25,7 +24,6 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
@@ -45,7 +43,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
-      soldOutProducts,
     },
     ref
   ) => {
@@ -69,7 +66,6 @@ export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(
           ref={ref}
           choosedProductUuids={choosedProductUuids}
           errorOnChoosedProductUuids={errorOnChoosedProductUuids}
-          soldOutProducts={soldOutProducts}
         />
       </EventVenueMapProvider>
     );

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -78,8 +78,7 @@ export const MapPoint = ({
       // have 2 points near one by one
       const nextPoints = prevPoints.slice();
       const currentPoint = nextPoints.find(
-        (point) =>
-          (id && point.id === id) || (localId && point.localId === localId)
+        (i) => i.id === id || i?.localId === localId
       );
       const currentPointIndex = nextPoints.indexOf(currentPoint);
 
@@ -99,7 +98,7 @@ export const MapPoint = ({
     // eslint-disable-next-line no-param-reassign
     event.cancelBubble = true;
 
-    if (isActive || (isSoldOut && usedInIframe)) return;
+    if (isActive || isSoldOut) return;
 
     setActiveElementKey(pointKey);
 
@@ -107,7 +106,6 @@ export const MapPoint = ({
   };
 
   const onMouseEnter = () => {
-    changePointPosition();
     changeCursorType("pointer");
   };
 
@@ -134,7 +132,7 @@ export const MapPoint = ({
         <ProductIcon
           x={pointX}
           y={pointY}
-          isSoldOut={isSoldOut}
+          hasProduct={Boolean(pointProduct)}
           isActive={isActive}
           isProductChoosed={isProductChoosed}
           isErrorOnChoosedProduct={isErrorOnChoosedProduct}

package/src/events/event-venue-map/components/MapPoint/components/ProductIcon/ProductIcon.tsx

@@ -1,7 +1,6 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
-import { ProductTooltip } from "../ProductTooltip";
 
 const ICON_DATA =
   "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
@@ -23,7 +22,6 @@ const BACKGROUND_COLOR = "#FFFFFF";
 const BACKGROUND_COLOR_TRANSPARENT = "#FFFFFF80";
 const FILL_COLOR = "#0E8CE2";
 const ERROR_COLOR_TRANSPARENT = "#ff000080";
-const NO_PRODUCT_ON_POINT = "#878787";
 const SNIPPET_TEMPLATE_ID = "snippet-template-context";
 
 export type ProductIconProps = KonvaNodeEvents &
@@ -31,7 +29,6 @@ export type ProductIconProps = KonvaNodeEvents &
     x: number;
     y: number;
     isActive?: boolean;
-    isSoldOut?: boolean;
     isErrorOnChoosedProduct: boolean;
     isProductChoosed: boolean;
   };
@@ -56,15 +53,12 @@ export const ProductIcon = ({
   x,
   y,
   isActive,
-  isSoldOut,
   isErrorOnChoosedProduct,
   isProductChoosed,
 }: ProductIconProps) => {
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
-  const [hovered, setHovered] = useState<boolean>(false);
-
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -113,21 +107,11 @@ export const ProductIcon = ({
       stroke = ERROR_COLOR_TRANSPARENT;
     }
 
-    if (isSoldOut) {
-      stroke = NO_PRODUCT_ON_POINT;
-      fill = NO_PRODUCT_ON_POINT;
-    }
-
     return { fill, stroke };
   };
 
   return (
-    <Group
-      x={x}
-      y={y}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+    <Group x={x} y={y}>
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -135,9 +119,6 @@ export const ProductIcon = ({
         y={defaultY * 0.75}
         {...circleColors()}
       />
-      {hovered && isSoldOut && (
-        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
-      )}
       {isProductChoosed ? (
         <Path
           x={defaultX}

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -11,7 +11,6 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -33,7 +32,6 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
@@ -47,7 +45,6 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
-      soldOutProducts,
     },
     ref
   ) => {
@@ -115,18 +112,13 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       );
 
       if (!currentProduct) return false;
-      const selectedProduct = products.find(
-        (product) => product.uuid === currentProduct.productUuid
-      );
+
       return (
-        selectedProduct?.isSoldOut ||
-        (selectedProduct &&
-          !!soldOutProducts?.find(
-            (product) => product?.product_id === selectedProduct?.id
-          )) ||
-        false
+        products.find((product) => product.uuid === currentProduct.productUuid)
+          ?.isSoldOut || false
       );
     };
+
     return (
       <div className="venue-map" style={{ width, height }}>
         <div className="zone-name">

package/src/events/event-venue-map/hooks/useImage.tsx

@@ -12,30 +12,21 @@ export const useImage = (
     height: 0,
   });
 
-  const setImageEventHandler = function setImageEventHandler(
-    this: HTMLImageElement
-  ) {
-    imageRef.current = this;
-
-    setImageAttributes({
-      width: this.naturalWidth,
-      height: this.naturalHeight,
-    });
-  };
-
   const loadImage = useCallback((imageUrl?: string) => {
     imageRef.current = new window.Image();
     imageRef.current.src = imageUrl;
-    imageRef.current.addEventListener("load", setImageEventHandler);
+    imageRef.current.addEventListener("load", function () {
+      imageRef.current = this;
+
+      setImageAttributes({
+        width: this.naturalWidth,
+        height: this.naturalHeight,
+      });
+    });
   }, []);
 
   useEffect(() => {
     loadImage(url);
-
-    return () => {
-      imageRef.current.removeEventListener("load", setImageEventHandler);
-      imageRef.current = undefined;
-    };
   }, [url, loadImage]);
 
   const memoizedImageAttributes = useMemo(() => {

package/src/file-upload/FileUpload.tsx

@@ -175,9 +175,7 @@ export const useFileUpload = ({
     const filesArray = Array.from(uploadedFiles);
     filesArray.forEach((file) => {
       const fileExtension = file.name.split(".").pop();
-      const extensionIndex = allowedExtensions.indexOf(
-        fileExtension.toLowerCase()
-      );
+      const extensionIndex = allowedExtensions.indexOf(fileExtension);
       const isExtensionValid = extensionIndex !== -1;
 
       if (isExtensionValid) {

package/src/help/popover/HelpPopover.tsx

@@ -1,31 +1,23 @@
 import { useId } from "@react-aria/utils";
-import React, { ReactNode } from "react";
+import React from "react";
 import Button from "react-bootstrap/Button";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
-import clsx from "clsx";
 import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
   title?: string;
   variant?: ButtonVariant;
-  icon?: ReactNode;
-  bordered?: boolean;
 };
 
-export function HelpPopover({
-  children,
-  title,
-  variant = "light",
-  icon,
-  bordered = false,
-}: HelpPopoverProps) {
+export function HelpPopover(props: HelpPopoverProps) {
+  const { children, title, variant = "light" } = props;
   const popoverId = useId();
 
   const popover = (
-    <Popover id={popoverId} className={clsx(bordered && "border")}>
+    <Popover id={popoverId}>
       <Popover.Title as="h3">{title}</Popover.Title>
       <Popover.Content>{children}</Popover.Content>
     </Popover>
@@ -47,7 +39,7 @@ export function HelpPopover({
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
+          <Icon type="question" style={{ width: "10px" }} />
         </Button>
       )}
     </OverlayTrigger>

package/src/iframe/event/event-calendar/EventCalendar.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { Meta, Story } from "@storybook/react";
+import { boolean } from "@storybook/addon-knobs";
+import { EventCalendarProvider } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { EventCalendar } from "./EventCalendar";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: EventCalendar,
+} as Meta;
+
+export const Default: Story<any> = (args) => {
+  const now = DateTime.now().set({
+    hour: 0,
+    second: 0,
+    millisecond: 0,
+    minute: 0,
+  });
+  const disabledDates = [now.minus({ day: 2 }), now, now.plus({ day: 2 })];
+
+  const isLoading = boolean("isLoading", false);
+
+  return (
+    <EventCalendarProvider>
+      <div style={{ backgroundColor: "white" }}>
+        <EventCalendar
+          {...args}
+          disabledDates={disabledDates}
+          isLoading={isLoading}
+        />
+      </div>
+    </EventCalendarProvider>
+  );
+};
+
+Default.args = {};

package/src/iframe/event/event-calendar/EventCalendar.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { CalendarButtons } from "./components/CalendarButtons";
+import { CalendarDates } from "./components/CalendarDates";
+import { CalendarBaseProps } from "./types";
+
+export type EventCalendarProps = CalendarBaseProps;
+
+export const EventCalendar = ({
+  disabledDates = [],
+  isLoading = false,
+}: EventCalendarProps) => {
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar">
+        <CalendarButtons disabledDates={disabledDates} isLoading={isLoading} />
+        <CalendarDates disabledDates={disabledDates} isLoading={isLoading} />
+      </div>
+    </div>
+  );
+};

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

@@ -1,53 +1,36 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
+import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
+import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
-import { CalendarProps } from "../../Calendar";
 
-type CalendarButtonsProps = Pick<
-  CalendarProps,
-  | "isLoading"
-  | "disabledDates"
-  | "initialDate"
-  | "currentDate"
-  | "setCurrentDate"
-  | "setSelectedDate"
->;
+type CalendarButtonsProps = CalendarBaseProps;
 
 export const CalendarButtons = ({
   disabledDates = [],
   isLoading = false,
-  initialDate,
-  currentDate,
-  setCurrentDate,
-  setSelectedDate,
 }: CalendarButtonsProps) => {
+  const {
+    initialDate,
+    currentDate,
+    canMoveBack,
+    onSelectPreviousMonth,
+    onSelectNextMonth,
+    setCurrentDate,
+    setSelectedDate,
+  } = useContext(EventCalendarContext);
   const { t } = useTranslation("Design");
 
-  const onSelectNextMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSelectPreviousMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
       return { label: String(year), value: year };
     });
   }, [initialDate]);
 
-  const canMoveBack = useMemo(
-    () => currentDate > initialDate,
-    [currentDate, initialDate]
-  );
-
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
     const nextDateTime = currentDate.set({ year: selectedYear });