@licklist/design 0.44.486-dev.48 → 0.44.486-dev.5

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,
+};

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

@@ -0,0 +1,49 @@
+import React from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export interface ListActivityCardProps {
+  title: string;
+  duration: string;
+  price: string;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+}
+
+export const ListActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+}: ListActivityCardProps) => {
+  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/event/event-calendar/EventCalendar.stories.tsx

@@ -0,0 +1,36 @@
+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";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: EventCalendar,
+} as Meta;
+
+export const Default: Story<EventCalendarProps> = (args) => {
+  return (
+    <EventCalendarProvider getCalendarDates={getMonthCalendarDates}>
+      <div style={{ backgroundColor: "white" }}>
+        <EventCalendar {...args} />
+      </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",
+};

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

@@ -0,0 +1,27 @@
+import React, { ReactElement } 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 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}
+        />
+      </div>
+    </div>
+  );
+};

package/src/{calendar → iframe/event/event-calendar}/components/CalendarButtons/CalendarButtons.tsx

@@ -1,53 +1,36 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
+import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
+import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
-import { CalendarProps } from "../../Calendar";
 
-type CalendarButtonsProps = Pick<
-  CalendarProps,
-  | "isLoading"
-  | "disabledDates"
-  | "initialDate"
-  | "currentDate"
-  | "setCurrentDate"
-  | "setSelectedDate"
->;
+type CalendarButtonsProps = CalendarBaseProps;
 
 export const CalendarButtons = ({
   disabledDates = [],
   isLoading = false,
-  initialDate,
-  currentDate,
-  setCurrentDate,
-  setSelectedDate,
 }: CalendarButtonsProps) => {
+  const {
+    initialDate,
+    currentDate,
+    canMoveBack,
+    onSelectPreviousMonth,
+    onSelectNextMonth,
+    setCurrentDate,
+    setSelectedDate,
+  } = useContext(EventCalendarContext);
   const { t } = useTranslation("Design");
 
-  const onSelectNextMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSelectPreviousMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
       return { label: String(year), value: year };
     });
   }, [initialDate]);
 
-  const canMoveBack = useMemo(
-    () => currentDate > initialDate,
-    [currentDate, initialDate]
-  );
-
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
     const nextDateTime = currentDate.set({ year: selectedYear });

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

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

package/src/iframe/event/event-calendar/components/CalendarDate/index.ts

@@ -0,0 +1,2 @@
+export { CalendarDate } from "./CalendarDate";
+export type { CalendarDateProps } from "./CalendarDate";

package/src/{calendar → iframe/event/event-calendar}/components/CalendarDates/CalendarDates.tsx

@@ -1,26 +1,23 @@
-import React, { useMemo } from "react";
+import React, { ReactElement, useContext, useMemo } from "react";
 import { DateTime } from "luxon";
-import { DAY_NUMBER } from "@licklist/core/dist/Config";
-import { DateTimeButton } from "../../../date-time-button";
+import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
 import { CalendarWeekdays } from "../CalendarWeekdays";
+import { CalendarDate } from "../CalendarDate";
+import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
-import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = Omit<
-  CalendarProps,
-  "currentDate" | "setCurrentDate" | "initialDate"
->;
+export type CalendarDatesProps = CalendarBaseProps & {
+  fromPrice?: string | ReactElement | null;
+};
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
-  calendarDates,
-  selectedDate,
-  setSelectedDate,
   fromPrice,
-  getAvailability,
-  includeAvailability,
 }: CalendarDatesProps) => {
+  const { calendarDates, initialDate, selectedDate, setSelectedDate } =
+    useContext(EventCalendarContext);
+
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
 
@@ -43,24 +40,22 @@ export const CalendarDates = ({
       <CalendarWeekdays />
       <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
-          if (date === null) return <div />;
+          if (date === null) {
+            return <div />;
+          }
 
           const isDisabled =
             isLoading || isSelectedDateDisabled(date, disabledDates);
 
           return (
-            <DateTimeButton
+            <CalendarDate
               key={+date}
+              currentDate={date}
+              initialDate={initialDate}
+              selectedDate={selectedDate}
+              setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              isSelected={
-                selectedDate ? date.hasSame(selectedDate, "day") : undefined
-              }
-              date={date.toFormat(DAY_NUMBER)}
-              onSelect={() => setSelectedDate(date)}
-              price={fromPrice}
-              resources={getAvailability?.(date)}
-              showResources={includeAvailability}
-              calendarView
+              fromPrice={fromPrice}
             />
           );
         })}

package/src/{calendar → iframe/event/event-calendar}/components/CalendarSelect/CalendarSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
 import clsx from "clsx";
-import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../../page/components/PageBody/constants";
 
 export type CalendarSelectOption = {
   label: string;

package/src/iframe/event/event-calendar/index.ts

@@ -0,0 +1,6 @@
+export { EventCalendar } from "./EventCalendar";
+export { CalendarSelect } from "./components/CalendarSelect";
+export type {
+  CalendarSelectProps,
+  CalendarSelectOption,
+} from "./components/CalendarSelect";

package/src/iframe/event/event-calendar/types/index.ts

@@ -0,0 +1,6 @@
+import { DateTime } from "luxon";
+
+export type CalendarBaseProps = {
+  disabledDates?: DateTime[];
+  isLoading?: boolean;
+};

package/src/iframe/event/event-calendar/utils/index.ts

@@ -0,0 +1,11 @@
+import { DateTime } from "luxon";
+import isEqual from "lodash/isEqual";
+
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
+  );
+};

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 "../../../calendar/components/CalendarSelect";
+import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
 import { Product } from "../../../types";
 
 export default {

package/src/iframe/event/index.ts

@@ -13,6 +13,12 @@ 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/index.ts

@@ -10,6 +10,7 @@ export {
   EventOrderShortSummary,
   SummaryDataType,
   EventDescription,
+  EventCalendar,
   EventProductSets,
   EventProductSetsProps,
   IframeEventVenueMap,
@@ -42,5 +43,5 @@ export {
 export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-card";
+export * from "./activity-cards";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

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

@@ -11,10 +11,9 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
-  time,
   menuSteps,
   formValues,
-  shouldHidePeopleAmount,
+  isNotShownPeopleAmount,
   eventName,
   transactionFee = 0,
   productsWithErrors,
@@ -48,7 +47,6 @@ 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 />
 
@@ -65,7 +63,7 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!shouldHidePeopleAmount && peopleAmount > 0 && (
+              {!isNotShownPeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">

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

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

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

@@ -5,8 +5,6 @@ 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,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 { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
+import { MenuStep } from "../../../../types";
+import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../../calendar/components/CalendarSelect";
+} from "../../../event/event-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,19 +117,12 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const orderError = verifyCategoryItems(
-        values,
-        step.productCategories,
-        isLastMenuStep
-      );
+      const categoryError = verifyCategoryItems(values, step);
 
-      if (orderError) {
-        const categoryId = orderError.id
-          ? `category_${orderError.id}`
-          : MIN_SPEND_ERROR;
-        setStepFormError(orderError.message);
-        setError(categoryId as never, {
-          message: orderError.message,
+      if (categoryError) {
+        setStepFormError(categoryError.message);
+        setError(`category_${categoryError.id}`, {
+          message: categoryError.message,
         });
         return;
       }
@@ -370,5 +363,3 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
-
-CalendarStepsForm.displayName = "CalendarStepsForm";

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

@@ -84,9 +84,23 @@ 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 } = product;
+          const {
+            isRequired = false,
+            maxAmount = 0,
+            minAmount = 0,
+            minSpend,
+            price,
+          } = 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/ErrorModal/ErrorModal.tsx

@@ -10,14 +10,12 @@ 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");
@@ -49,16 +47,15 @@ export const ErrorModal = ({
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">
         <div className="d-flex m-5 justify-content-center manual-form-error">
-          {message ||
-            (messageKey ? (
-              t(messageKey)
-            ) : (
-              <Trans
-                t={t}
-                i18nKey="pleaseSelectAtLeastFrom"
-                values={{ min: 1, type: "item", from: "those categories" }}
-              />
-            ))}
+          {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,7 +1,10 @@
-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}`;
+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;
 };