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

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

@@ -1,23 +1,26 @@
-import React, { ReactElement, useContext, useMemo } from "react";
+import React, { useMemo } from "react";
 import { DateTime } from "luxon";
-import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { DAY_NUMBER } from "@licklist/core/dist/Config";
+import { DateTimeButton } from "../../../date-time-button";
 import { CalendarWeekdays } from "../CalendarWeekdays";
-import { CalendarDate } from "../CalendarDate";
-import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
+import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = CalendarBaseProps & {
-  fromPrice?: string | ReactElement | null;
-};
+export type CalendarDatesProps = Omit<
+  CalendarProps,
+  "currentDate" | "setCurrentDate" | "initialDate"
+>;
 
 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;
 
@@ -40,22 +43,24 @@ 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 (
-            <CalendarDate
+            <DateTimeButton
               key={+date}
-              currentDate={date}
-              initialDate={initialDate}
-              selectedDate={selectedDate}
-              setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              fromPrice={fromPrice}
+              isSelected={
+                selectedDate ? date.hasSame(selectedDate, "day") : undefined
+              }
+              date={date.toFormat(DAY_NUMBER)}
+              onSelect={() => setSelectedDate(date)}
+              price={fromPrice}
+              resources={getAvailability?.(date)}
+              showResources={includeAvailability}
+              calendarView
             />
           );
         })}

package/src/{iframe/event/event-calendar → 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 "../../../../page/components/PageBody/constants";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
 
 export type CalendarSelectOption = {
   label: string;

package/src/calendar/index.ts

@@ -0,0 +1,3 @@
+export * from "./Calendar";
+export * from "./components/CalendarSelect";
+export * from "./utils";

package/src/calendar/utils/index.ts

@@ -0,0 +1,28 @@
+import { DateTime, Interval } from "luxon";
+import isEqual from "lodash/isEqual";
+
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
+  );
+};
+
+export const getMonthCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const startOfMonth = initialDate.startOf("month");
+  const endOfMonth = initialDate.endOf("month");
+
+  return Interval.fromDateTimes(startOfMonth, endOfMonth)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};
+
+export const getWeekCalendarDates = (initialDate: DateTime): DateTime[] => {
+  const lastDay = initialDate.plus({ days: 7 });
+
+  return Interval.fromDateTimes(initialDate, lastDay)
+    .splitBy({ day: 1 })
+    .map((d) => d.start);
+};

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

@@ -78,3 +78,20 @@ WithPrice.args = {
   isOnlyTimeContainer: false,
   price: "from $8000",
 };
+
+export const WithAvailability: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithAvailability.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  isOnlyTimeContainer: false,
+  price: "from $8000",
+  resources: {
+    booked: 1,
+    total: 3,
+  },
+};

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

@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import clsx from "clsx";
 import { DateTime } from "luxon";
+import { AvailabilityIndicator } from "../availability-indicator";
 import { DateContent } from "./DateContent";
 
 export type DateTimeButtonProps<T = DateTime | string> = {
@@ -10,31 +11,30 @@ export type DateTimeButtonProps<T = DateTime | string> = {
   onSelect: (date: T) => void;
   isOnlyTimeContainer?: boolean;
   price?: string | number | ReactElement | null;
+  resources?: {
+    booked: number;
+    total: number;
+  };
+  calendarView?: boolean;
+  showResources?: boolean;
 };
 
 export const DateTimeButton = <T extends DateTime | string>({
   date,
-  isDisabled,
+  isDisabled: _isDisabled,
   isSelected,
   onSelect,
   isOnlyTimeContainer,
   price,
+  resources,
+  calendarView,
+  showResources,
 }: 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 isTimeVariant = typeof date === "string";
 
+  const isDisabled =
+    _isDisabled || (resources && resources.booked === resources.total);
+
   return (
     <button
       type="button"
@@ -46,7 +46,8 @@ export const DateTimeButton = <T extends DateTime | string>({
         isSelected && "selected",
         isTimeVariant && "time-button",
         isOnlyTimeContainer && "only-time-container",
-        !isTimeVariant && "today"
+        !isTimeVariant && "today",
+        calendarView && "calendar-view"
       )}
     >
       {isTimeVariant ? (
@@ -61,13 +62,9 @@ export const DateTimeButton = <T extends DateTime | string>({
 
       {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>
-        </div>
-      )} */}
+      {showResources && resources && (
+        <AvailabilityIndicator {...resources} notAvailable={_isDisabled} />
+      )}
     </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/edit-event-modal/component/EditEventForm/EditEventForm.stories.tsx

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

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

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

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

@@ -8,6 +8,22 @@ export function formatContent(content, maxSymbols) {
   return content;
 }
 
+export const formatContentWithoutTags = (content, maxLength = 300) => {
+  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;
+
 export const getStatisticInfo = (
   eventStatistic: EventStatistic | null,
   date: string

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-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-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";