@licklist/design 0.44.486-dev.58 → 0.44.486-dev.6

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

@@ -60,6 +60,7 @@ const contextValue = {
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -125,6 +126,7 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -142,6 +144,7 @@ const contextValue = {
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -710,6 +713,7 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -775,6 +779,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -792,6 +797,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -900,6 +906,7 @@ const defaultProductSets = [
             minSubItems: 1,
             maxSubItems: 10,
             quantityType: "constant",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -965,6 +972,7 @@ const defaultProductSets = [
             minSubItems: 0,
             maxSubItems: 0,
             quantityType: "recharging",
+            isRelyOnPeople: false,
             isTimeRelated: false,
             hasTicket: false,
             allowDeposits: false,
@@ -982,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,7 +15,6 @@ 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,
@@ -25,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,
-  formatContent,
-  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(
-    () => formatContent(description, EVENT_DESCRIPTION_SIZE),
+    () => formatContent(description, 300),
     [description]
   );
 

package/src/events/event-card/utils.ts

@@ -8,8 +8,6 @@ export function formatContent(content, maxSymbols) {
   return content;
 }
 
-export const EVENT_DESCRIPTION_SIZE = 340;
-
 export const getStatisticInfo = (
   eventStatistic: EventStatistic | null,
   date: string

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Meta, Story } from "@storybook/react";
-import { ActivityCard, ActivityCardProps, LAYOUT_LIST } from "./ActivityCard";
+import { ActivityCard, ActivityCardProps } from "./ActivityCard";
 
 export default {
   title: "Iframe/ActivityCard",
@@ -50,26 +50,3 @@ 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-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,
+};

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())
+  );
+};