@licklist/design 0.44.486-dev.2 → 0.44.486-dev.21

package/src/date-time-button/DateTimeButton.tsx

@@ -1,8 +1,35 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { useTranslation } from "react-i18next";
+import { ReactComponent as AvailableIcon } from "../assets/iframe/available.svg";
+import { ReactComponent as LimitedIcon } from "../assets/iframe/limited.svg";
+import { ReactComponent as SoldOutIcon } from "../assets/iframe/soldOut.svg";
 import { DateContent } from "./DateContent";
 
+const LOTS_OF_SPACE_LIMIT = 0.2;
+const LIMITED_LIMIT = 0.8;
+
+const getAvailability = (
+  booked: number,
+  total: number
+): { label: string; icon: ReactElement } => {
+  if (booked === total) {
+    return { label: "soldOut", icon: <SoldOutIcon className="logo" /> };
+  }
+
+  // lots of space if less than 80% booked
+  if (booked / total <= LOTS_OF_SPACE_LIMIT) {
+    return { label: "lotsOfSpace", icon: <AvailableIcon className="logo" /> };
+  }
+
+  if (booked / total >= LIMITED_LIMIT) {
+    return { label: "limited", icon: <LimitedIcon className="logo" /> };
+  }
+
+  return { label: "available", icon: <AvailableIcon className="logo" /> };
+};
+
 export type DateTimeButtonProps<T = DateTime | string> = {
   date: T;
   isSelected?: boolean;
@@ -10,6 +37,10 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
+  resources?: {
+    booked: number;
+    total: number;
+  };
 };
 
 export const DateTimeButton = <T extends DateTime | string>({
@@ -19,22 +50,14 @@ export const DateTimeButton = <T extends DateTime | string>({
   onSelect,
   isOnlyTimeContainer,
   price,
+  resources,
 }: DateTimeButtonProps<T>) => {
-  // const infoLogo = useMemo(() => {
-  //   if (info?.logo === infoLogoType.LIMIT) {
-  //     return <LimitedSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.AVAILABLE) {
-  //     return <AvailableSvg />;
-  //   }
-  //   if (info?.logo === infoLogoType.SOLD_OUT) {
-  //     return <SoldOutSvg />;
-  //   }
-  //   return null;
-  // }, [info]);
-
+  const { t } = useTranslation("Design");
   const isTimeVariant = typeof date === "string";
 
+  const availability =
+    resources && getAvailability(resources.booked, resources.total);
+
   return (
     <button
       type="button"
@@ -59,15 +82,14 @@ export const DateTimeButton = <T extends DateTime | string>({
         />
       )}
 
-      {price && <div className="price">{price}</div>}
+      {price && !isDisabled && <div className="price">{price}</div>}
 
-      {/* TODO uncomment when adding availability */}
-      {/* {info && (
-        <div className="info">
-          {info.logo && <Logo className="logo" logo={infoLogo} />}
-          <div>{info.description}</div>
+      {availability && (
+        <div className="resources">
+          {availability.icon}
+          <div>{t(availability.label)}</div>
         </div>
-      )} */}
+      )}
     </button>
   );
 };

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

@@ -168,6 +168,9 @@ export function IntervalInput({
                 value={value}
                 onChange={onChange}
                 date={start}
+                minDate={DateTime.fromISO(start)
+                  .plus({ day: 1 })
+                  .toFormat("yyyy-MM-dd")}
                 disabled={disabled}
               />
             )}

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/iframe/{activity-cards/activity-card → activity-card}/ActivityCard.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps } from "./ActivityCard";
+import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
 
 export default {
   title: "Iframe/ActivityCard",
@@ -50,3 +50,26 @@ Selected.args = {
   onSelect: () => null,
   isSelected: true,
 };
+
+export const ListView: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...props} />;
+};
+
+Default.args = {
+  layout: LAYOUT_LIST,
+  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,
+};

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

@@ -0,0 +1,77 @@
+import React, { ReactNode } from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+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;
+  image?: Image | null;
+  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}
+      >
+        {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>
+    );
+  }
+
+  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>
+
+        {image && (
+          <div className="image-container">
+            <img className="image" src={image.url} alt="" />
+          </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-calendar/EventCalendar.stories.tsx

@@ -1,37 +1,36 @@
 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";
+import {
+  EventCalendarProvider,
+  getMonthCalendarDates,
+} from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { EventCalendar, EventCalendarProps } 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);
-
+export const Default: Story<EventCalendarProps> = (args) => {
   return (
-    <EventCalendarProvider>
+    <EventCalendarProvider getCalendarDates={getMonthCalendarDates}>
       <div style={{ backgroundColor: "white" }}>
-        <EventCalendar
-          {...args}
-          disabledDates={disabledDates}
-          isLoading={isLoading}
-        />
+        <EventCalendar {...args} />
       </div>
     </EventCalendarProvider>
   );
 };
 
-Default.args = {};
+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",
+};

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

@@ -1,19 +1,26 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import { CalendarButtons } from "./components/CalendarButtons";
 import { CalendarDates } from "./components/CalendarDates";
 import { CalendarBaseProps } from "./types";
 
-export type EventCalendarProps = CalendarBaseProps;
+export type EventCalendarProps = CalendarBaseProps & {
+  fromPrice?: string | ReactElement | null;
+};
 
 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} />
+        <CalendarDates
+          disabledDates={disabledDates}
+          isLoading={isLoading}
+          fromPrice={fromPrice}
+        />
       </div>
     </div>
   );

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

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

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

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

package/src/iframe/index.ts

@@ -43,5 +43,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,6 +11,7 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
+  time,
   menuSteps,
   formValues,
   isNotShownPeopleAmount,
@@ -47,6 +48,7 @@ export const BookingSummary = ({
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>
+          {time && <p className="m-0">{time}</p>}
         </div>
         <hr />
 

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

@@ -6,6 +6,7 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
+  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;

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.tsx

@@ -20,8 +20,8 @@ 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 { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
@@ -117,7 +117,7 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const categoryError = verifyCategoryItems(values, step);
+      const categoryError = verifyCategoryItems(values, step.productCategories);
 
       if (categoryError) {
         setStepFormError(categoryError.message);

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -1,5 +1,6 @@
+import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
 import { useTranslation } from "react-i18next";
-import { MenuStep, Order } from "src/types";
+import { Order } from "src/types";
 
 interface CategoryError {
   message: string;
@@ -12,41 +13,39 @@ export const useCategoryVerification = () => {
 
   return (
     values: Record<Order["id"], Order>,
-    step: MenuStep
+    productCategories?: ProductCategory[]
   ): CategoryError | void => {
-    let errorMessage;
+    let errorMessage: { id: number; message: string } | void;
 
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
 
-    step?.productCategories.forEach(
-      ({ minSubItems, maxSubItems, id, name }) => {
-        if (!minSubItems && !maxSubItems) return;
-
-        const categoryProductsQuantity = productArray.filter(
-          (product) => product?.productsCategoryId === id
-        ).length;
-
-        if (minSubItems && categoryProductsQuantity < minSubItems) {
-          const message = t("Validation:fieldMinNumber", {
-            min: minSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-
-          return;
-        }
-
-        if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-          const message = t("Validation:fieldMaxNumber", {
-            max: maxSubItems,
-            attribute: `number of products in the ${name} category`,
-          });
-          errorMessage = { id, message };
-        }
+    productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
+      if (!minSubItems && !maxSubItems) return;
+
+      const categoryProductsQuantity = productArray.filter(
+        (product) => product?.productsCategoryId === id
+      ).length;
+
+      if (minSubItems && categoryProductsQuantity < minSubItems) {
+        const message = t("Validation:fieldMinNumber", {
+          min: minSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+
+        return;
       }
-    );
+
+      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
+        const message = t("Validation:fieldMaxNumber", {
+          max: maxSubItems,
+          attribute: `number of products in the ${name} category`,
+        });
+        errorMessage = { id, message };
+      }
+    });
 
     return errorMessage;
   };

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -26,7 +26,12 @@ export const LeftBlock = ({
     <div className={clsx("left-block", className)} {...props}>
       {pageTitle && (
         <div className="navigation">
-          <div className="title">{pageTitle}</div>
+          {typeof pageTitle === "string" ? (
+            <div className="title">{pageTitle}</div>
+          ) : (
+            pageTitle
+          )}
+
           {component}
         </div>
       )}