@licklist/design 0.44.485-dev.89 → 0.44.485-dev.9

package/src/assets/dashboard/bookingCalendar.svg

@@ -0,0 +1,67 @@
+<svg
+  width="44"
+  height="44"
+  viewBox="0 0 44 44"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_0_4)">
+    <rect width="44" height="44" rx="8" fill="currentColor" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14 9C14 8.44772 14.4477 8 15 8C15.5523 8 16 8.44772 16 9V10H21V9C21 8.44772 21.4477 8 22 8C22.5523 8 23 8.44772 23 9V10H28V9C28 8.44772 28.4477 8 29 8C29.5523 8 30 8.44772 30 9V10H32C34.2091 10 36 11.7909 36 14V16V18V32C36 33.1046 35.1046 34 34 34H10C8.89543 34 8 33.1046 8 32V18V16V14C8 11.7909 9.79086 10 12 10H14V9ZM23 12H28V13C28 13.5523 28.4477 14 29 14C29.5523 14 30 13.5523 30 13V12H32L32.1493 12.0055C33.1841 12.0818 34 12.9456 34 14V16H10V14C10 12.8954 10.8954 12 12 12H14V13C14 13.5523 14.4477 14 15 14C15.5523 14 16 13.5523 16 13V12H21V13C21 13.5523 21.4477 14 22 14C22.5523 14 23 13.5523 23 13V12ZM10 18V32H34V18H10ZM31.669 26.7433L30.331 25.2567L27.666 27.654L26.669 26.7567L25.331 28.2433L27.6667 30.3454L31.669 26.7433Z"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="13"
+      y="20"
+      width="4"
+      height="4"
+      rx="1"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="20"
+      y="20"
+      width="4"
+      height="4"
+      rx="1"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="13"
+      y="26"
+      width="4"
+      height="4"
+      rx="1"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="20"
+      y="26"
+      width="4"
+      height="4"
+      rx="1"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="27"
+      y="20"
+      width="4"
+      height="4"
+      rx="1"
+      fill="black"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_0_4">
+      <rect width="44" height="44" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/dashboard/bookingList.svg

@@ -0,0 +1,68 @@
+<svg
+  width="44"
+  height="44"
+  viewBox="0 0 44 44"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <g clip-path="url(#clip0_0_2707)">
+    <rect width="44" height="44" rx="8" fill="currentColor" />
+    <path
+      d="M13.7334 10L15 11.4607L11.2111 15L9 12.9346L10.2666 11.4739L11.2105 12.3555L13.7334 10Z"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="17"
+      y="12"
+      width="18"
+      height="2"
+      rx="1"
+      fill="black"
+    />
+    <path
+      d="M13.7334 16L15 17.4607L11.2111 21L9 18.9346L10.2666 17.4739L11.2105 18.3555L13.7334 16Z"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="17"
+      y="18"
+      width="18"
+      height="2"
+      rx="1"
+      fill="black"
+    />
+    <path
+      d="M13.7334 22L15 23.4607L11.2111 27L9 24.9346L10.2666 23.4739L11.2105 24.3555L13.7334 22Z"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="17"
+      y="24"
+      width="18"
+      height="2"
+      rx="1"
+      fill="black"
+    />
+    <path
+      d="M13.7334 28L15 29.4607L11.2111 33L9 30.9346L10.2666 29.4739L11.2105 30.3555L13.7334 28Z"
+      fill="black"
+    />
+    <rect
+      opacity="0.5"
+      x="17"
+      y="30"
+      width="18"
+      height="2"
+      rx="1"
+      fill="black"
+    />
+  </g>
+  <defs>
+    <clipPath id="clip0_0_2707">
+      <rect width="44" height="44" fill="white" />
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/dashboard/bookingListSmall.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="14" height="16" stroke="currentColor" stroke-width="2"/>
+  <rect x="4" y="4" width="8" height="2" fill="currentColor"/>
+  <rect x="4" y="8" width="8" height="2" fill="currentColor"/>
+  <rect x="4" y="12" width="8" height="2" fill="currentColor"/>
+</svg>

package/src/assets/dashboard/fullscreen.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="14" viewBox="0 0 6 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M6 6V0H0V2H4V6H6ZM0 14H6V8H4V12H0V14Z" fill="currentColor"/>
+</svg>

package/src/assets/dashboard/minimize.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="14" viewBox="0 0 6 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0V6H6V4H2V0H0ZM6 8H0V14H2V10H6V8Z" fill="currentColor"/>
+</svg>

package/src/assets/dashboard/refresh.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 5.00677C5.02944 5.00677 1 8.94404 1 13.8009C1 18.6578 5.02944 22.595 10 22.595V22.595C14.9706 22.595 19 18.6578 19 13.8009" stroke="currentColor" stroke-width="2"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.76142 5.25122V0L17.0691 4.98499L8.76142 10.5024V5.25122Z" fill="currentColor"/>
+</svg>

package/src/assets/widgets/circlePlus.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+    <circle cx="10" cy="10" r="10" fill="#0E8CE2"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M11 5H9V9H5V11H9V15H11V11H15V9H11V5Z" fill="white"/>
+</svg>

package/src/assets/widgets/inPage.svg

@@ -0,0 +1,10 @@
+<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
+<rect x="8.5" y="9.25" width="103" height="3" rx="1.5" fill="white" stroke="#FF0099"/>
+<rect x="8.5" y="15.5" width="82" height="45.7283" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
+<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
+<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
+<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
+<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
+<rect x="93.5" y="15.7715" width="18" height="45.7283" rx="3.5" fill="#D8D8D8" stroke="#FF0099"/>
+</svg>

package/src/assets/widgets/overlay.svg

@@ -0,0 +1,9 @@
+<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
+<rect x="28.5" y="17.5" width="63" height="35" rx="3.5" fill="#F8F8F8" stroke="#FF0099"/>
+<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
+<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
+<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
+<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
+<path d="M76 18H88C89.6569 18 91 19.3431 91 21V49C91 50.6569 89.6569 52 88 52H76V18Z" fill="#D8D8D8"/>
+</svg>

package/src/assets/widgets/sidebar.svg

@@ -0,0 +1,9 @@
+<svg width="120" height="68" viewBox="0 0 120 68" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="119" height="67" rx="3.5" fill="white" stroke="#DCDCDC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M116 66.5H92.5C90.2909 66.5 88.5 64.7091 88.5 62.5L88.5 10.5C88.5 8.29086 90.2909 6.5 92.5 6.5L119 6.5V63.5C119 63.5 119 64.5 118 65.5C117 66.5 116 66.5 116 66.5Z" fill="#F8F8F8" stroke="#FF0099"/>
+<path d="M0 2.5C0 1.11929 1.11929 0 2.5 0H117.5C118.881 0 120 1.11929 120 2.5V6H0V2.5Z" fill="#D8D8D8"/>
+<circle cx="3.5" cy="3" r="1" fill="#FF1111"/>
+<circle cx="6.5" cy="3" r="1" fill="#FFE311"/>
+<circle cx="9.5" cy="3" r="1" fill="#11FF52"/>
+<path d="M118.5 51V63C118.5 64.6569 117.157 66 115.5 66H92C90.3431 66 89 64.6569 89 63V51L118.5 51Z" fill="#D8D8D8"/>
+</svg>

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

@@ -6,7 +6,6 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 
 import { useId } from "@react-aria/utils";
-import { ProductSet } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
 import HTMLInputDateElement from "../../types/static/HTMLInputDateElement";
 import { RecurrenceInput } from "../../recurrence-input";
 import { WarningMessage } from "../../static";
@@ -14,8 +13,6 @@ import { ProductSetFormValues } from "../../product-set/form";
 
 interface IntervalInputProps {
   editedProductSet?: ProductSetFormValues;
-  productSets?: ProductSet[];
-  productSetId?: number;
   disabled?: boolean;
 }
 
@@ -28,8 +25,6 @@ export interface IntervalInputValues {
 export function IntervalInput({
   disabled = false,
   editedProductSet,
-  productSetId,
-  productSets,
 }: IntervalInputProps) {
   const { t } = useTranslation(["Design", "Validation"]);
   const {
@@ -37,7 +32,6 @@ export function IntervalInput({
     formState: { errors },
     watch,
     control,
-    trigger,
     setValue,
   } = useFormContext<IntervalInputValues>();
 
@@ -48,7 +42,6 @@ export function IntervalInput({
   const start = watch("start");
   const end = watch("end");
   const [recurrent, setRecurrent] = useState(Boolean(rrule));
-  const [isOverriden, setIsOverriden] = useState(false);
   const recurrentId = useId();
 
   const startDateInput = useRef<HTMLInputDateElement | null>(null);
@@ -73,23 +66,6 @@ export function IntervalInput({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editedProductSet]);
 
-  useEffect(() => {
-    if (!productSets) return;
-
-    const isOverridenProductSet = productSets.find(
-      (productSet) =>
-        (editedProductSet && productSet?.id === editedProductSet?.id) ||
-        (Boolean(productSet?.parentMenuId) && productSet?.id === productSetId)
-    );
-
-    setIsOverriden(Boolean(isOverridenProductSet));
-  }, [productSets, productSetId, setIsOverriden, editedProductSet]);
-
-  const onChangeEndDate = (nextEndtDate: string) => {
-    setValue("end", nextEndtDate);
-    trigger("end");
-  };
-
   return (
     <>
       <Form.Row className="interval-container">
@@ -120,7 +96,7 @@ export function IntervalInput({
             value={end}
             name="end"
             onChange={({ target: { value: nextEndtDate } }) =>
-              onChangeEndDate(nextEndtDate)
+              setValue("end", nextEndtDate)
             }
             min={start}
             isInvalid={Boolean(errors.end)}
@@ -153,11 +129,9 @@ export function IntervalInput({
               {t("reccurentDescription", { item: t("event") })}
             </Form.Text>
           )}
+          <WarningMessage message={t("recurrentOverridesWarining")} />
         </Form.Group>
       )}
-      {isOverriden && (
-        <WarningMessage message={t("recurrentOverridesWarining")} />
-      )}
       {recurrent && start && (
         <Form.Group>
           <Controller

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

@@ -121,7 +121,6 @@ export const EditEventForm = ({
 
   const visible = watch("visible");
   const editedProductSet = watch("editedProductSet");
-  const productSetId = watch("productSetId");
 
   const {
     images,
@@ -268,8 +267,6 @@ export const EditEventForm = ({
           <IntervalInput
             key={watch("rrule")}
             disabled={disabled}
-            productSetId={productSetId}
-            productSets={productSets}
             editedProductSet={editedProductSet}
           />
           {categories.length !== 0 && (

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

@@ -11,7 +11,6 @@ import { ProductSetControl } from "../../../../../product-set";
 import { ProductSetContextProvider } from "../../../../../product-set/form/context";
 import { getDefaultValues } from "../../../utils/getDefaultProductSet";
 import { EditEventFormValues } from "../../EditEventForm";
-import { getFilteredTemplates } from "../../../../../product-set/utils/index";
 
 export const DEFAULT_FEE = 5;
 
@@ -110,16 +109,8 @@ export const EditEventProductSet = ({
       <FormProvider {...form}>
         <Form className="mt-6">
           <ProductSetControl
-            smsTemplates={getFilteredTemplates(
-              smsTemplates,
-              formValues?.smsTemplates
-            )}
-            emailTemplates={getFilteredTemplates(
-              emailTemplates,
-              formValues?.emailTemplates
-            )}
-            showEmailTemplate={!!emailTemplates}
-            showSmsTemplate={!!smsTemplates}
+            emailTemplates={emailTemplates}
+            smsTemplates={smsTemplates}
             fieldSets={fieldSetsData}
             isLoading={isLoading}
             companyName={selectedCompany?.title}

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

@@ -3,7 +3,6 @@ import {
   DEFAULT_PRODUCT_SET_TYPE,
   ProductSet,
 } from "@licklist/core/dist/DataMapper/Product/ProductSetDataMapper";
-import { getFilteredTemplates } from "../../../product-set/utils/index";
 import { ProductSetFormValues } from "../../../product-set/form/ProductSetForm";
 
 export const getDefaultValues = (
@@ -15,16 +14,15 @@ export const getDefaultValues = (
   type: productSet?.type ?? DEFAULT_PRODUCT_SET_TYPE,
   termsAndConditions: productSet?.termsAndConditions ?? "",
   operationalCost: productSet?.operationalCost ?? DEFAULT_OPERATIONAL_COST_TYPE,
-  thankYouPageUrl: productSet?.thankYouPageUrl ?? "",
   isDefault: productSet?.isDefault ?? false,
   fieldSetId: productSet?.fieldSetId,
-  emailTemplates:
+  emailTemplateId:
     productSet?.mailTemplates && productSet?.mailTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? productSet?.mailTemplates[0].notification.id
       : undefined,
-  smsTemplates:
+  smsTemplateId:
     productSet?.smsTemplates && productSet?.smsTemplates?.length > 0
-      ? getFilteredTemplates(productSet?.mailTemplates)
+      ? productSet?.smsTemplates[0].notification.id
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

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

@@ -55,7 +55,7 @@ export const EventStatisticModal = ({
                 { key: "total", label: "" },
               ]}
               data={data}
-              className="striped-static-table"
+              className="event-statistic-table"
             />
           </>
         ) : (

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");
   };
 
@@ -144,7 +142,7 @@ export const MapPoint = ({
           x={pointX}
           y={pointY}
           isActive={isActive}
-          hasProduct={Boolean(pointProduct)}
+          hasProduct={!isSoldOut && Boolean(pointProduct)}
           pointNumber={pointNumber}
           onDelete={onDelete}
           editMode={editMode}

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";
@@ -63,8 +62,6 @@ export const ProductIcon = ({
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
-  const [hovered, setHovered] = useState<boolean>(false);
-
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -122,12 +119,7 @@ export const ProductIcon = ({
   };
 
   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 +127,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-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}
       />