@licklist/design 0.44.526 → 0.44.528

package/src/availability-indicator/AvailabilityIndicator.tsx

@@ -0,0 +1,59 @@
+import React, { ReactElement } from "react";
+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";
+
+const LOTS_OF_SPACE_LIMIT = 0.2;
+const LIMITED_LIMIT = 0.8;
+
+const getIconsAndLabels = (
+  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" /> };
+};
+
+type AvailabilityIndicatorProps = {
+  booked: number;
+  total: number;
+  notAvailable?: boolean;
+};
+
+export const AvailabilityIndicator = ({
+  booked,
+  total,
+  notAvailable,
+}: AvailabilityIndicatorProps) => {
+  const { t } = useTranslation("Design");
+  const { icon, label } = getIconsAndLabels(booked, total);
+
+  if (notAvailable) {
+    return (
+      <div className="availability-indicator">
+        <SoldOutIcon className="logo" />
+        <div>{t("notAvailable")}</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="availability-indicator">
+      {icon}
+      <div>{t(label)}</div>
+    </div>
+  );
+};

package/src/availability-indicator/index.ts

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

package/src/calendar/Calendar.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { Meta, Story } from "@storybook/react";
+import { Calendar, CalendarProps } from "./Calendar";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: Calendar,
+} as Meta;
+
+export const Default: Story<CalendarProps> = (args) => {
+  return (
+    <div style={{ backgroundColor: "white" }}>
+      <Calendar {...args} />
+    </div>
+  );
+};
+
+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",
+  selectedDate: null,
+  setSelectedDate: () => null,
+  calendarDates: [],
+};

package/src/calendar/Calendar.tsx

@@ -0,0 +1,46 @@
+import React, { Dispatch, ReactElement, SetStateAction } from "react";
+import { DateTime } from "luxon";
+import { CalendarButtons } from "./components/CalendarButtons";
+import { CalendarDates } from "./components/CalendarDates";
+
+export const defaultStartDay = DateTime.now().set({
+  millisecond: 0,
+  second: 0,
+  hour: 0,
+  minute: 0,
+});
+
+export type CalendarProps = {
+  currentDate: DateTime;
+  setCurrentDate: Dispatch<SetStateAction<DateTime>>;
+  calendarDates: DateTime[];
+  disabledDates?: DateTime[];
+  selectedDate: DateTime | null;
+  setSelectedDate: Dispatch<SetStateAction<DateTime | null>>;
+  fromPrice?: string | ReactElement | null;
+  isLoading?: boolean;
+  initialDate?: DateTime;
+  getAvailability?: (
+    date: DateTime
+  ) => { booked: number; total: number } | undefined;
+  includeAvailability?: boolean;
+};
+
+export const Calendar = ({
+  disabledDates = [],
+  initialDate = defaultStartDay,
+  ...props
+}: CalendarProps) => {
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar">
+        <CalendarButtons
+          disabledDates={disabledDates}
+          initialDate={initialDate}
+          {...props}
+        />
+        <CalendarDates disabledDates={disabledDates} {...props} />
+      </div>
+    </div>
+  );
+};

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

@@ -1,36 +1,53 @@
-import React, { useContext, useMemo } from "react";
+import React, { useCallback, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
-import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
+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 = CalendarBaseProps;
+type CalendarButtonsProps = Pick<
+  CalendarProps,
+  | "isLoading"
+  | "disabledDates"
+  | "initialDate"
+  | "currentDate"
+  | "setCurrentDate"
+  | "setSelectedDate"
+>;
 
 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 → calendar}/components/CalendarDates/CalendarDates.tsx

@@ -1,20 +1,26 @@
-import React, { 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;
+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;
 
@@ -37,21 +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}
+              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/DateContent.tsx

@@ -0,0 +1,46 @@
+import { DAY_OF_WEEK, DAY_NUMBER_WITH_MONTH } from "@licklist/core/dist/Config";
+import { getDayWithOrdinal } from "@licklist/plugins/dist/utils/formatDate";
+import clsx from "clsx";
+import { isToday, isTomorrow } from "date-fns";
+import { DateTime } from "luxon";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { DateTimeButtonProps } from "./DateTimeButton";
+
+type DateContentProps = Pick<
+  DateTimeButtonProps,
+  "isDisabled" | "isSelected"
+> & {
+  date: DateTime;
+};
+
+export const DateContent = ({
+  date,
+  isDisabled,
+  isSelected,
+}: DateContentProps) => {
+  const { t } = useTranslation("Design");
+
+  const getDate = () => {
+    if (isToday(date.toJSDate())) return t("today");
+    if (isTomorrow(date.toJSDate())) return t("tomorrow");
+    return date.toFormat(DAY_OF_WEEK);
+  };
+
+  const [day, month] = date.toFormat(DAY_NUMBER_WITH_MONTH).split(" ");
+
+  return (
+    <div className="weekday-info">
+      <div>{getDate()}</div>
+      <div
+        className={clsx(
+          "descriptions",
+          isSelected && "selected",
+          isDisabled && "disabled"
+        )}
+      >
+        {`${getDayWithOrdinal(+day)} ${month}`}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,97 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { DateTime } from "luxon";
+import { DateTimeButton, DateTimeButtonProps } from "./DateTimeButton";
+
+export default {
+  title: "DateTimeButton",
+  component: DateTimeButton,
+} as Meta;
+
+const date = DateTime.fromISO("2023-12-28T10:10:10.000Z");
+
+export const Default: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Default.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Selected: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Selected.args = {
+  date,
+  isSelected: true,
+  isDisabled: false,
+  onSelect: () => null,
+};
+
+export const Disabled: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Disabled.args = {
+  date,
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const Time: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+Time.args = {
+  date: "10:10",
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+};
+
+export const OnlyTime: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+OnlyTime.args = {
+  date: "10:10",
+  isSelected: false,
+  isDisabled: true,
+  onSelect: () => null,
+  isOnlyTimeContainer: true,
+};
+
+export const WithPrice: Story<DateTimeButtonProps> = (args) => {
+  return <DateTimeButton {...args} />;
+};
+
+WithPrice.args = {
+  date,
+  isSelected: false,
+  isDisabled: false,
+  onSelect: () => null,
+  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

@@ -0,0 +1,70 @@
+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> = {
+  date: T;
+  isSelected?: boolean;
+  isDisabled?: boolean;
+  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,
+  isSelected,
+  onSelect,
+  isOnlyTimeContainer,
+  price,
+  resources,
+  calendarView,
+  showResources,
+}: DateTimeButtonProps<T>) => {
+  const isTimeVariant = typeof date === "string";
+
+  const isDisabled =
+    _isDisabled || (resources && resources.booked === resources.total);
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(date)}
+      disabled={isDisabled}
+      className={clsx(
+        "date-time-button",
+        isDisabled && "disabled",
+        isSelected && "selected",
+        isTimeVariant && "time-button",
+        isOnlyTimeContainer && "only-time-container",
+        !isTimeVariant && "today",
+        calendarView && "calendar-view"
+      )}
+    >
+      {isTimeVariant ? (
+        date
+      ) : (
+        <DateContent
+          date={date}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+        />
+      )}
+
+      {price && !isDisabled && <div className="price">{price}</div>}
+
+      {showResources && resources && (
+        <AvailabilityIndicator {...resources} notAvailable={_isDisabled} />
+      )}
+    </button>
+  );
+};

package/src/date-time-button/index.ts

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

package/src/events/event-venue-map/EventVenueMap.tsx

@@ -3,7 +3,7 @@ import { EventVenueMapProvider } from "@licklist/plugins/dist/context/event/Even
 import { Point } from "@licklist/plugins/dist/types/context/event/point";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { VenueMap, VenueMapRef } from "./components/VenueMap";
 import { useCanvasSize } from "./hooks/useCanvasSize";
 
@@ -25,7 +25,7 @@ export type EventVenueMapProps = {
   products?: Partial<Product>[];
   pointProducts?: Partial<PointProduct>[];
   onPointProductsChange?: (values: Partial<PointProduct>[]) => void;
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 } & EventVenueMapIframeProps;
 
 export const EventVenueMap = forwardRef<VenueMapRef, EventVenueMapProps>(

package/src/events/event-venue-map/components/MapPoint/MapPoint.tsx

@@ -99,8 +99,7 @@ export const MapPoint = ({
     // eslint-disable-next-line no-param-reassign
     event.cancelBubble = true;
 
-    if (isActive) return;
-    if (isSoldOut && usedInIframe) return;
+    if (isActive || (isSoldOut && usedInIframe)) return;
 
     setActiveElementKey(pointKey);
 

package/src/events/event-venue-map/components/VenueMap/VenueMap.tsx

@@ -11,7 +11,7 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -33,7 +33,7 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(

package/src/help/popover/HelpPopover.tsx

@@ -1,23 +1,31 @@
 import { useId } from "@react-aria/utils";
-import React from "react";
+import React, { ReactNode } from "react";
 import Button from "react-bootstrap/Button";
 import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
 import { ButtonVariant } from "react-bootstrap/types";
+import clsx from "clsx";
 import Icon from "../../static/Icon";
 
 export type HelpPopoverProps = {
   children?: React.ReactElement | React.ReactElement[];
   title?: string;
   variant?: ButtonVariant;
+  icon?: ReactNode;
+  bordered?: boolean;
 };
 
-export function HelpPopover(props: HelpPopoverProps) {
-  const { children, title, variant = "light" } = props;
+export function HelpPopover({
+  children,
+  title,
+  variant = "light",
+  icon,
+  bordered = false,
+}: HelpPopoverProps) {
   const popoverId = useId();
 
   const popover = (
-    <Popover id={popoverId}>
+    <Popover id={popoverId} className={clsx(bordered && "border")}>
       <Popover.Title as="h3">{title}</Popover.Title>
       <Popover.Content>{children}</Popover.Content>
     </Popover>
@@ -39,7 +47,7 @@ export function HelpPopover(props: HelpPopoverProps) {
           {...triggerHandler}
           className="btn-icon-popover rounded-circle px-2 py-1 d-inline-flex align-items-center"
         >
-          <Icon type="question" style={{ width: "10px" }} />
+          {icon ?? <Icon type="question" style={{ width: "10px" }} />}
         </Button>
       )}
     </OverlayTrigger>