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

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

@@ -12,21 +12,30 @@ 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", function () {
-      imageRef.current = this;
-
-      setImageAttributes({
-        width: this.naturalWidth,
-        height: this.naturalHeight,
-      });
-    });
+    imageRef.current.addEventListener("load", setImageEventHandler);
   }, []);
 
   useEffect(() => {
     loadImage(url);
+
+    return () => {
+      imageRef.current.removeEventListener("load", setImageEventHandler);
+      imageRef.current = undefined;
+    };
   }, [url, loadImage]);
 
   const memoizedImageAttributes = useMemo(() => {

package/src/file-upload/FileUpload.tsx

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

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

@@ -0,0 +1,51 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import {
+  ActivityCard,
+  ActivityCardProps,
+  LAYOUT_GRID,
+  LAYOUT_LIST,
+} from "./ActivityCard";
+
+export default {
+  title: "Iframe/ActivityCard",
+  component: ActivityCard,
+} as Meta;
+
+export const GridView: Story<ActivityCardProps> = (props) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
+};
+
+GridView.args = {
+  layout: LAYOUT_GRID,
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+};
+
+export const ListView: Story<ActivityCardProps> = (props) => {
+  const [isSelected, setIsSelected] = React.useState(false);
+
+  return (
+    <ActivityCard
+      {...props}
+      isSelected={isSelected}
+      onSelect={() => setIsSelected(true)}
+    />
+  );
+};
+
+ListView.args = {
+  layout: LAYOUT_LIST,
+  title: "Clay Pigeons & Axe Thowing",
+  duration: "60 mins",
+  price: "from £20",
+};

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

@@ -0,0 +1,66 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+
+export const LAYOUT_GRID = "grid";
+export const LAYOUT_LIST = "list";
+
+type Layout = typeof LAYOUT_GRID | typeof LAYOUT_LIST;
+
+export type ActivityCardProps = {
+  title: ReactNode;
+  duration: ReactNode;
+  price: ReactNode;
+  onSelect: () => void;
+  isSelected: boolean;
+  layout?: Layout;
+};
+
+export const ActivityCard = ({
+  title,
+  duration,
+  price,
+  // image,
+  onSelect,
+  isSelected,
+  layout = LAYOUT_GRID,
+}: ActivityCardProps) => {
+  if (layout === LAYOUT_GRID) {
+    return (
+      <button
+        type="button"
+        className={clsx("activity-card", isSelected && "active")}
+        onClick={onSelect}
+      >
+        <div className={clsx("d-flex", "flex-column")}>
+          <div className="activity-card-title">{title}</div>
+
+          {duration && <div>{duration}</div>}
+
+          {price && <div>{price}</div>}
+        </div>
+      </button>
+    );
+  }
+
+  return (
+    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
+      <div
+        className={clsx("list-activity-card", {
+          active: isSelected,
+        })}
+      >
+        <div className="description">
+          <div className="title">{title}</div>
+          {duration && (
+            <div>
+              <p>{duration}</p>
+            </div>
+          )}
+
+          {price && <div>{price}</div>}
+        </div>
+      </div>
+      <hr className="list-activity-card-hr" />
+    </div>
+  );
+};

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

@@ -0,0 +1 @@
+export * from "./ActivityCard";

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -5,7 +5,7 @@ import { IframeEventVenueMap } from "./IframeEventVenueMap";
 import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
 import { BookingSummary } from "../../order-process/components/BookingSummary";
-import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
+import { CalendarSelect } from "../../../calendar/components/CalendarSelect";
 import { Product } from "../../../types";
 
 export default {
@@ -26,7 +26,6 @@ const MENU_STEPS = [
         maxSubItems: 1,
         quantityType: "constant",
         type: "menuItems",
-        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

package/src/iframe/event/index.ts

@@ -1,7 +1,6 @@
 export { EventBookingForm } from "./event-booking-form";
 export { EventBookingView } from "./event-booking-view";
 export { IframeEventCard, IframeEventCardSkeleton } from "./event-card";
-export { EventDetails } from "./event-details";
 export { TicketDescription } from "./ticket-description";
 export { EventTables } from "./event-tables";
 export { EventOrderSummary } from "./event-order-summary";
@@ -13,12 +12,6 @@ export {
 } from "./event-order-short-summary";
 export { EventDescription } from "./event-description";
 export { EventProductSets, EventProductSetsProps } from "./event-product-sets";
-export {
-  EventCalendar,
-  CalendarSelect,
-  CalendarSelectProps,
-  CalendarSelectOption,
-} from "./event-calendar";
 export {
   EventStepVenueMapZones,
   EventStepVenueMapZonesProps,

package/src/iframe/event/ticket-description/TicketDescription.stories.tsx

@@ -19,7 +19,10 @@ export const Default: Story = () => {
       If you are a student at Bucks University you do not need to buy a ticket, 
       your general admission is included as part of the Big Deal packages."
         images={[
-          { id: 1, path: "https://source.unsplash.com/random" } as Image,
+          {
+            id: 1,
+            url: "https://cdn.lickli.st/ZH4SRqrufMqcC8S1TWR3ELz9FU45he1t/images/original/000/000/000/000/481-b7e137ca90c91e24.jpeg",
+          } as Image,
         ]}
       />
     </div>
@@ -38,7 +41,10 @@ export const Highlighted: Story = () => {
       If you are a student at Bucks University you do not need to buy a ticket, 
       your general admission is included as part of the Big Deal packages."
         images={[
-          { id: 1, path: "https://source.unsplash.com/random" } as Image,
+          {
+            id: 1,
+            url: "https://cdn.lickli.st/ZH4SRqrufMqcC8S1TWR3ELz9FU45he1t/images/original/000/000/000/000/481-b7e137ca90c91e24.jpeg",
+          } as Image,
         ]}
       />
     </div>

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -1,6 +1,9 @@
 import React, { CSSProperties, ReactNode, useState } from "react";
 import clsx from "clsx";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+import {
+  Image,
+  THUMBNAIL_IMAGE_SIZE,
+} from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
 import { TextExpand } from "../../../static/text-expand";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
@@ -31,7 +34,9 @@ export function TicketDescription({
 
   const wrapperClasses = clsx("ticket-description", className);
 
-  const imageSrc = images ? MediaService.getImageSrc(images) : null;
+  const imageSrc = images
+    ? MediaService.getImageSrc(images, THUMBNAIL_IMAGE_SIZE)
+    : null;
 
   const descriptionWrapperStyle = {
     "--description-wrapper-height": "inherit",

package/src/iframe/index.ts

@@ -3,14 +3,12 @@ export {
   EventBookingView,
   EventOrderSummary,
   EventTables,
-  EventDetails,
   IframeEventCard,
   TicketDescription,
   EventBookingProducts,
   EventOrderShortSummary,
   SummaryDataType,
   EventDescription,
-  EventCalendar,
   EventProductSets,
   EventProductSetsProps,
   IframeEventVenueMap,
@@ -43,5 +41,5 @@ export {
 export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-cards";
+export * from "./activity-card";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

package/src/iframe/order-process/components/BookingSummary/BookingSummary.tsx

@@ -11,9 +11,10 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
+  time,
   menuSteps,
   formValues,
-  isNotShownPeopleAmount,
+  shouldHidePeopleAmount,
   eventName,
   transactionFee = 0,
   productsWithErrors,
@@ -47,7 +48,7 @@ export const BookingSummary = ({
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>
-          {/* TODO implement start time here */}
+          {time && <p className="m-0">{time}</p>}
         </div>
         <hr />
 
@@ -64,7 +65,7 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!isNotShownPeopleAmount && peopleAmount > 0 && (
+              {!shouldHidePeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">

package/src/iframe/order-process/components/BookingSummary/types/index.ts

@@ -6,12 +6,13 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
+  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
-  isNotShownPeopleAmount?: boolean;
+  shouldHidePeopleAmount?: boolean;
   eventName?: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -5,6 +5,8 @@ export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
     return 0;
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
+    if (!product) return 0;
+
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.stories.tsx

@@ -212,7 +212,6 @@ const MENU_STEPS = [
         minSubItems: 1,
         quantityType: "constant" as const,
         type: "menuItems" as const,
-        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.tsx

@@ -20,15 +20,15 @@ import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { Category } from "./components/Category";
-import { MenuStep } from "../../../../types";
-import { STEP_FORM_ID } from "../../constants";
+import { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../event/event-calendar/components/CalendarSelect";
+} from "../../../../calendar/components/CalendarSelect";
 import { IframeEventVenueMap } from "../../../event/event-venue-map";
 import { VenueMapRef } from "../../../../events/event-venue-map/components/VenueMap";
 import { useCategoryVerification } from "../utils/useCategoryVerification";
@@ -117,12 +117,19 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const categoryError = verifyCategoryItems(values, step);
+      const orderError = verifyCategoryItems(
+        values,
+        step.productCategories,
+        isLastMenuStep
+      );
 
-      if (categoryError) {
-        setStepFormError(categoryError.message);
-        setError(`category_${categoryError.id}`, {
-          message: categoryError.message,
+      if (orderError) {
+        const categoryId = orderError.id
+          ? `category_${orderError.id}`
+          : MIN_SPEND_ERROR;
+        setStepFormError(orderError.message);
+        setError(categoryId as never, {
+          message: orderError.message,
         });
         return;
       }
@@ -363,3 +370,5 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
+
+CalendarStepsForm.displayName = "CalendarStepsForm";

package/src/iframe/order-process/components/CategoryProduct/CategoryProduct.tsx

@@ -84,23 +84,9 @@ export const CategoryProduct = ({
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
 
-          const {
-            isRequired = false,
-            maxAmount = 0,
-            minAmount = 0,
-            minSpend,
-            price,
-          } = product;
+          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
 
           const currentQuantity = value?.quantity ?? 0;
-          if (minSpend && currentQuantity * price < minSpend) {
-            return t("Design:minimumSpendSumValidation", {
-              minSpend: formatNumber(minSpend, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              }),
-            }) as string;
-          }
 
           if (!value) return true;
 

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -3,6 +3,7 @@ import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { FieldValues, RefCallBack, UseFormClearErrors } from "react-hook-form";
+import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { NumberInput } from "../NumberInput";
 import { Product, ProductCategory } from "../../../../../../types";
 
@@ -11,8 +12,10 @@ interface FormOrderItem {
   name: string;
   price: number;
   productsCategoryId: number;
+  zoneId?: Zone["id"];
   deposit?: number | null;
   quantity: number;
+  capacity?: number | null;
 }
 
 interface ProductQuantityInputProps {
@@ -29,7 +32,7 @@ interface ProductQuantityInputProps {
 export const ProductQuantityInput = ({
   product,
   category,
-  onChange,
+  onChange: _onChange,
   clearErrors,
   refCallback,
   productInfo,
@@ -38,14 +41,16 @@ export const ProductQuantityInput = ({
 }: ProductQuantityInputProps) => {
   const { t } = useTranslation("Design");
 
-  const onClick = () => {
-    onChange({
+  const onChange = (quantity: number | null) => {
+    _onChange({
       id: product.id,
       name: product.name,
       deposit,
       price: product.price,
       productsCategoryId: category.id,
-      quantity: productInfo?.quantity ? 0 : 1,
+      zoneId: category.zone?.id,
+      quantity,
+      capacity: product?.capacity,
     });
   };
 
@@ -56,6 +61,7 @@ export const ProductQuantityInput = ({
       </div>
     );
   }
+
   if (product?.maxAmount === 1) {
     return (
       <Button
@@ -67,46 +73,26 @@ export const ProductQuantityInput = ({
           }`,
           invalid && "error"
         )}
-        onClick={onClick}
+        onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
       >
         {t(`Design:${productInfo?.quantity ? "unselect" : "select"}`)}
       </Button>
     );
   }
+
   return (
     <NumberInput
       ref={refCallback}
       onChange={(val) => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: val || null,
-        });
+        onChange(val || null);
         clearErrors(`${product.id}` as const);
       }}
       onArrowDown={() => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: productInfo?.quantity - 1 || 0,
-        });
+        onChange(productInfo?.quantity - 1 || 0);
         clearErrors(`${product.id}` as const);
       }}
       onArrowUp={() => {
-        onChange({
-          id: product.id,
-          name: product.name,
-          deposit,
-          price: product.price,
-          productsCategoryId: category.id,
-          quantity: (productInfo?.quantity ?? 0) + 1,
-        });
+        onChange((productInfo?.quantity ?? 0) + 1);
         clearErrors(`${product.id}` as const);
       }}
       min={0}

package/src/iframe/order-process/components/ErrorModal/ErrorModal.tsx

@@ -10,12 +10,14 @@ import Icon from "../../../../static/Icon";
 export interface ErrorModalProps {
   isOpen: boolean;
   onClose?: () => void;
+  message?: string;
   messageKey?: string;
 }
 
 export const ErrorModal = ({
   isOpen = false,
   onClose,
+  message,
   messageKey,
 }: ErrorModalProps) => {
   const { t } = useTranslation("Design");
@@ -47,15 +49,16 @@ export const ErrorModal = ({
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">
         <div className="d-flex m-5 justify-content-center manual-form-error">
-          {messageKey ? (
-            t(messageKey)
-          ) : (
-            <Trans
-              t={t}
-              i18nKey="pleaseSelectAtLeastFrom"
-              values={{ min: 1, type: "item", from: "those categories" }}
-            />
-          )}
+          {message ||
+            (messageKey ? (
+              t(messageKey)
+            ) : (
+              <Trans
+                t={t}
+                i18nKey="pleaseSelectAtLeastFrom"
+                values={{ min: 1, type: "item", from: "those categories" }}
+              />
+            ))}
         </div>
       </ModalBody>
     </Modal>

package/src/iframe/order-process/components/Timer/utils/index.ts

@@ -1,10 +1,7 @@
-export const fancyTimeFormat = (miliseconds: number) => {
-  const date = new Date(miliseconds);
-  const mins = date.getMinutes();
-  const secs = date.getSeconds();
-  let timerString = "";
-
-  timerString += `${mins}:${secs < 10 ? "0" : ""}`;
-  timerString += `${secs}`;
-  return timerString;
+export const fancyTimeFormat = (milliseconds: number) => {
+  const totalSeconds = Math.floor(milliseconds / 1000);
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  const formattedSecs = seconds < 10 ? `0${seconds}` : `${seconds}`;
+  return `${minutes}:${formattedSecs}`;
 };