@licklist/design 0.44.486-dev.9 → 0.44.486

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

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

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

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/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

@@ -1,36 +1,37 @@
 import React from "react";
 import { DateTime } from "luxon";
 import { Meta, Story } from "@storybook/react";
-import {
-  EventCalendarProvider,
-  getMonthCalendarDates,
-} from "@licklist/plugins/dist/context/event/EventCalendarContext";
-import { EventCalendar, EventCalendarProps } from "./EventCalendar";
+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<EventCalendarProps> = (args) => {
+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 getCalendarDates={getMonthCalendarDates}>
+    <EventCalendarProvider>
       <div style={{ backgroundColor: "white" }}>
-        <EventCalendar {...args} />
+        <EventCalendar
+          {...args}
+          disabledDates={disabledDates}
+          isLoading={isLoading}
+        />
       </div>
     </EventCalendarProvider>
   );
 };
 
-const now = DateTime.now().set({
-  hour: 0,
-  second: 0,
-  millisecond: 0,
-  minute: 0,
-});
-
-Default.args = {
-  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
-  isLoading: false,
-  fromPrice: "from £10",
-};
+Default.args = {};

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

@@ -1,26 +1,19 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 import { CalendarBaseProps } from "./types";
 
-export type EventCalendarProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type EventCalendarProps = CalendarBaseProps;
 
 export const EventCalendar = ({
   disabledDates = [],
   isLoading = false,
-  fromPrice,
 }: EventCalendarProps) => {
   return (
     <div className="calendar-wrapper">
       <div className="calendar">
         <CalendarButtons disabledDates={disabledDates} isLoading={isLoading} />
-        <CalendarDates
-          disabledDates={disabledDates}
-          isLoading={isLoading}
-          fromPrice={fromPrice}
-        />
+        <CalendarDates disabledDates={disabledDates} isLoading={isLoading} />
       </div>
     </div>
   );

package/src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from "react";
+import React from "react";
 import { Button } from "react-bootstrap";
 import { DateTime } from "luxon";
 import clsx from "clsx";
@@ -9,7 +9,6 @@ export type CalendarDateProps = {
   selectedDate?: DateTime;
   setSelectedDate: (date: DateTime) => void;
   isDisabled?: boolean;
-  fromPrice?: string | ReactElement | null;
 };
 
 export const CalendarDate = ({
@@ -18,7 +17,6 @@ export const CalendarDate = ({
   selectedDate,
   setSelectedDate,
   isDisabled = false,
-  fromPrice,
 }: CalendarDateProps) => {
   const onClick = () => {
     if (isDisabled) return;
@@ -34,18 +32,12 @@ export const CalendarDate = ({
       disabled={disabled}
       className={clsx(
         "calendar-date",
-        selectedDate?.hasSame(currentDate, "day") && "selected-date",
+        selectedDate && +currentDate === +selectedDate && "selected-date",
         disabled && "disabled-date"
       )}
       onClick={onClick}
     >
-      <div>{currentDate.day}</div>
-
-      {typeof fromPrice === "string" ? (
-        <div>{fromPrice}</div>
-      ) : (
-        <>{fromPrice}</>
-      )}
+      {currentDate.day}
     </Button>
   );
 };

package/src/iframe/event/event-calendar/components/CalendarDates/CalendarDates.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useContext, useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { DateTime } from "luxon";
 import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
 import { CalendarWeekdays } from "../CalendarWeekdays";
@@ -6,14 +6,11 @@ import { CalendarDate } from "../CalendarDate";
 import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
 
-export type CalendarDatesProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type CalendarDatesProps = CalendarBaseProps;
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
-  fromPrice,
 }: CalendarDatesProps) => {
   const { calendarDates, initialDate, selectedDate, setSelectedDate } =
     useContext(EventCalendarContext);
@@ -55,7 +52,6 @@ export const CalendarDates = ({
               selectedDate={selectedDate}
               setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              fromPrice={fromPrice}
             />
           );
         })}

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

@@ -11,15 +11,18 @@ export default {
 
 export function Default() {
   const showImage = boolean("showImage", true);
+  const displayCost = boolean("displayCost", false);
+  const displayType = boolean("displayType", true);
+  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
     <div>
       <IframeEventCard
         imageSrc={
+          // eslint-disable-next-line max-len
           showImage
-            ? // eslint-disable-next-line max-len
-              "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
             : undefined
         }
         title="Glitterbomb Bucks / Baga Chipz"
@@ -40,8 +43,9 @@ export function Default() {
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
         the...`}
         snippetSetting={{
-          includeAvailability: ["calendar", "product_sets", "time_slots"],
-          includeFromPrice: ["calendar", "product_sets", "time_slots"],
+          displayCost,
+          displayType,
+          displayDescription,
         }}
         goToDetails={() => null}
         isListView={isListView}
@@ -55,6 +59,9 @@ export function Default() {
 
 export function EventCardSkeleton() {
   const showImage = boolean("showImage", true);
+  const displayCost = boolean("displayCost", false);
+  const displayType = boolean("displayType", true);
+  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
@@ -62,8 +69,9 @@ export function EventCardSkeleton() {
       <IframeEventCardSkeleton
         showImage={showImage}
         snippetSetting={{
-          includeAvailability: ["calendar", "product_sets", "time_slots"],
-          includeFromPrice: ["calendar", "product_sets", "time_slots"],
+          displayCost,
+          displayType,
+          displayDescription,
         }}
         isListView={isListView}
       />

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

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,8 +18,7 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  snippetSetting?: Snippet["widgetSetting"];
+  snippetSetting?: SnippetSetting;
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -36,6 +35,11 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
+  snippetSetting = {
+    displayType: true,
+    displayCost: true,
+    displayDescription: true,
+  },
   colour,
   goToDetails,
   description,
@@ -98,7 +102,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && (
+          {type && !!snippetSetting.displayType && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -109,7 +113,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && (
+          {cost && !!snippetSetting.displayCost && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -123,7 +127,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && (
+          {description && !!snippetSetting.displayDescription && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode