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

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

@@ -47,6 +47,7 @@ const contextValue = {
     name: "Example",
     type: "sale",
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_CUSTOMER,
     steps: [
       {
@@ -59,6 +60,7 @@ const contextValue = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -124,6 +126,7 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -141,6 +144,7 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -686,6 +690,7 @@ const defaultProductSets = [
     name: "Example",
     type: PRODUCT_SET_TYPES[0],
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[0],
     fieldSet: {
       id: 1,
@@ -708,6 +713,7 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -773,6 +779,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -790,6 +797,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -875,6 +883,7 @@ const defaultProductSets = [
     name: "Example 2",
     type: PRODUCT_SET_TYPES[1],
     termsAndConditions: "",
+    isDefault: true,
     operationalCost: OPERATIONAL_COST_TYPES[1],
     fieldSet: {
       id: 2,
@@ -897,6 +906,7 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -962,6 +972,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -979,6 +990,7 @@ 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("name")}
+            key={watch("rrule")}
             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?.smsTemplates)
+      ? getFilteredTemplates(productSet?.mailTemplates)
       : undefined,
   steps:
     productSet?.steps?.map(({ productCategories, ...step }) => ({

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

@@ -9,11 +9,7 @@ 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 {
-  EVENT_DESCRIPTION_SIZE,
-  formatContentWithoutTags,
-  getStatisticInfo,
-} from "./utils";
+import { formatContent, getStatisticInfo } from "./utils";
 import { ReactComponent as ChartBarIcon } from "../../assets/dashboard/chartBar.svg";
 
 export interface EventCardProps extends HasPermissionProp {
@@ -52,7 +48,7 @@ export function EventCard({
   const { formatNumber, formatDate } = useIntl();
   const { totalViews, ...statistics } = getStatisticInfo(eventStatistic, date);
   const memoedContent = useMemo(
-    () => formatContentWithoutTags(description, EVENT_DESCRIPTION_SIZE),
+    () => formatContent(description, 300),
     [description]
   );
 

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,7 +9,6 @@ import { useTableData } from "./hooks/useTableData";
 export type EventStatisticModalProps = {
   isOpen: boolean;
   setIsOpen: (value: boolean) => void;
-  date?: Event["startAt"] | null;
   eventStatistic?: EventStatistic | null;
   title?: string;
 };
@@ -18,13 +16,11 @@ export type EventStatisticModalProps = {
 export const EventStatisticModal = ({
   isOpen,
   setIsOpen,
-  date,
   eventStatistic,
   title,
 }: EventStatisticModalProps) => {
   const { t } = useTranslation("Design");
-
-  const data = useTableData(date, eventStatistic);
+  const data = useTableData(eventStatistic);
   const handleClose = () => {
     setIsOpen(false);
   };

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

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

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

@@ -1,6 +1,4 @@
 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",
@@ -9,7 +7,6 @@ export const TRANSLATION_KEYS = {
 };
 
 export const convertEventStatisticToTableData = (
-  date: string,
   eventStatistic: EventStatistic
 ) => {
   let totalAmount = 0;
@@ -28,51 +25,49 @@ export const convertEventStatisticToTableData = (
     total: string | number;
   }[] = [];
 
-  const summaryFormattedDate = DateTime.fromISO(date)
-    .toUTC()
-    .toFormat(DATE_TIME_FULL_FORMAT);
+  Object.values(eventStatistic?.productCategorySummary)?.forEach(
+    (categories) => {
+      categories?.forEach(
+        ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
+          let quantity = 0;
 
-  Object.values(
-    eventStatistic?.productCategorySummary[summaryFormattedDate] ?? {}
-  )?.forEach(
-    ({ totalPerCategory, productsSummary = [], categoryName, eventId }) => {
-      let quantity = 0;
+          totalAmount += totalPerCategory || 0;
 
-      totalAmount += totalPerCategory || 0;
+          tableDataArray.push({
+            name: categoryName,
+            key: `${eventId}.${categoryName}`,
+            isBold: true,
+            isHeader: true,
+            quantity: TRANSLATION_KEYS.shortQuantity,
+            total: TRANSLATION_KEYS.total,
+          });
 
-      tableDataArray.push({
-        name: categoryName,
-        key: `${eventId}.${categoryName}`,
-        isBold: true,
-        isHeader: true,
-        quantity: TRANSLATION_KEYS.shortQuantity,
-        total: TRANSLATION_KEYS.total,
-      });
+          productsSummary?.forEach(
+            ({ productsSold, name, totalQuantity, total }) => {
+              quantity += productsSold;
 
-      productsSummary?.forEach(
-        ({ productsSold, name, totalQuantity, total }) => {
-          quantity += productsSold;
+              tableDataArray.push({
+                name,
+                key: `${eventId}.${categoryName}.${name}`,
+                quantity: totalQuantity
+                  ? `${productsSold} / ${totalQuantity}`
+                  : String(productsSold),
+                total: String(total),
+              });
+            }
+          );
 
           tableDataArray.push({
-            name,
-            key: `${eventId}.${categoryName}.${name}`,
-            quantity: totalQuantity
-              ? `${productsSold} / ${totalQuantity}`
-              : String(productsSold),
-            total: String(total),
+            name: TRANSLATION_KEYS.totalPerCategory,
+            key: `${eventId}.${categoryName}.${TRANSLATION_KEYS.totalPerCategory}`,
+            quantity,
+            total: totalPerCategory,
+            isBold: true,
           });
+
+          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/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/iframe/activity-cards/activity-card/ActivityCard.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ActivityCard, ActivityCardProps } from "./ActivityCard";
+
+export default {
+  title: "Iframe/ActivityCard",
+  component: ActivityCard,
+} as Meta;
+
+export const Default: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Default.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: false,
+};
+
+export const Selected: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Selected.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: true,
+};

package/src/iframe/activity-cards/activity-card/ActivityCard.tsx

@@ -0,0 +1,38 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export interface ActivityCardProps {
+  title: ReactNode;
+  duration: ReactNode;
+  price: ReactNode;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+}
+
+export const ActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+}: ActivityCardProps) => {
+  return (
+    <button
+      type="button"
+      className={clsx("activity-card", isSelected && "active")}
+      onClick={onSelect}
+    >
+      {image && <img className="activity-card-image" alt="" src={image.url} />}
+      <div className={clsx("d-flex", "flex-column", !image && "no-image")}>
+        <div className="activity-card-title">{title}</div>
+
+        {duration && <div>{duration}</div>}
+
+        {price && <div>{price}</div>}
+      </div>
+    </button>
+  );
+};

package/src/iframe/activity-cards/index.ts

@@ -0,0 +1,2 @@
+export * from "./list-activity-card/ListActivityCard";
+export * from "./activity-card/ActivityCard";

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.stories.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ListActivityCardProps, ListActivityCard } from "./ListActivityCard";
+
+export default {
+  title: "Iframe/ListActivityCard",
+  component: ListActivityCard,
+} as Meta;
+
+export const Default: Story<ListActivityCardProps> = (props) => {
+  return <ListActivityCard {...props} />;
+};
+
+Default.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: false,
+};
+
+export const Selected: Story<ListActivityCardProps> = (props) => {
+  return <ListActivityCard {...props} />;
+};
+
+Selected.args = {
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+  image: {
+    hash: "0b37b130e22aa2d3",
+    id: 195,
+    imageType: "cover",
+    imageableId: 25,
+    imageableType: "zone",
+    path: "images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+    // eslint-disable-next-line max-len
+    url: "https://cdn.lickli.st/doNktZRze1yuz3Uo2OPrLSvXVtUcdUsF/images/original/000/000/000/000/195-0b37b130e22aa2d3.jpeg",
+  },
+  onSelect: () => null,
+  isSelected: true,
+};