@licklist/design 0.44.485 → 0.44.486-dev.10

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

@@ -1,6 +1,7 @@
-import React, { useMemo } from "react";
+import React, { useMemo, useState } from "react";
 import { Path, KonvaNodeEvents, Group, Circle } from "react-konva";
 import Konva from "konva";
+import { ProductTooltip } from "../ProductTooltip";
 
 const ICON_DATA =
   "M14 0C9.3569 0.6633 4.6431 0.6633 0 0L6 7V13H3V14H11V13H8V7L14 0Z";
@@ -22,6 +23,7 @@ const BACKGROUND_COLOR = "#FFFFFF";
 const BACKGROUND_COLOR_TRANSPARENT = "#FFFFFF80";
 const FILL_COLOR = "#0E8CE2";
 const ERROR_COLOR_TRANSPARENT = "#ff000080";
+const NO_PRODUCT_ON_POINT = "#878787";
 const SNIPPET_TEMPLATE_ID = "snippet-template-context";
 
 export type ProductIconProps = KonvaNodeEvents &
@@ -29,6 +31,7 @@ export type ProductIconProps = KonvaNodeEvents &
     x: number;
     y: number;
     isActive?: boolean;
+    isSoldOut?: boolean;
     isErrorOnChoosedProduct: boolean;
     isProductChoosed: boolean;
   };
@@ -53,12 +56,15 @@ export const ProductIcon = ({
   x,
   y,
   isActive,
+  isSoldOut,
   isErrorOnChoosedProduct,
   isProductChoosed,
 }: ProductIconProps) => {
   const defaultX = -X_OFFSET;
   const defaultY = -Y_OFFSET;
 
+  const [hovered, setHovered] = useState<boolean>(false);
+
   const cssVariableValues = useMemo(() => {
     return {
       pointBackgroundColor:
@@ -107,11 +113,21 @@ export const ProductIcon = ({
       stroke = ERROR_COLOR_TRANSPARENT;
     }
 
+    if (isSoldOut) {
+      stroke = NO_PRODUCT_ON_POINT;
+      fill = NO_PRODUCT_ON_POINT;
+    }
+
     return { fill, stroke };
   };
 
   return (
-    <Group x={x} y={y}>
+    <Group
+      x={x}
+      y={y}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
       <Circle
         radius={CIRCLE_RADIUS}
         strokeWidth={POINT_STROKE_WIDTH}
@@ -119,6 +135,9 @@ export const ProductIcon = ({
         y={defaultY * 0.75}
         {...circleColors()}
       />
+      {hovered && isSoldOut && (
+        <ProductTooltip x={defaultX} y={defaultY} text="Sold out" />
+      )}
       {isProductChoosed ? (
         <Path
           x={defaultX}

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

@@ -0,0 +1,68 @@
+import React from "react";
+import { Group, Rect, Text } from "react-konva";
+
+const TOOLTIP_WIDTH = 60;
+const TOOLTIP_HEIGHT = 20;
+
+const BACKGROUND_COLOR = "#000";
+const BACKGROUND_Y_OFFSET = 1;
+const BACKGROUND_X_OFFSET = 30;
+const BACKGROUND_RADIUS = 5;
+const BACKGROUND_OPACITY = 0.8;
+
+const TEXT_Y_OFFSET = 4;
+const TEXT_STROKE_WIDTH = 5;
+const TEXT_COLOR = "#FFF";
+const TEXT_ALIGN = "center";
+const TEXT_VERTICAL_ALIGN = "middle";
+
+type ProductTooltipProps = {
+  x: number;
+  y: number;
+  text: string;
+};
+
+export const ProductTooltip = ({ x, y, text }: ProductTooltipProps) => {
+  return (
+    <Group
+      width={TOOLTIP_WIDTH}
+      height={TOOLTIP_HEIGHT}
+      x={x + BACKGROUND_X_OFFSET}
+      y={y - BACKGROUND_Y_OFFSET}
+    >
+      <Rect
+        x={-5}
+        y={5}
+        sceneFunc={(context) => {
+          context.beginPath();
+          context.moveTo(0, 5);
+          context.lineTo(5, 0);
+          context.lineTo(5, 10);
+          context.closePath();
+          context.fill();
+        }}
+        fill={BACKGROUND_COLOR}
+        borderColor={BACKGROUND_COLOR}
+        opacity={BACKGROUND_OPACITY}
+      />
+      <Rect
+        x={0}
+        y={0}
+        width={TOOLTIP_WIDTH}
+        height={TOOLTIP_HEIGHT}
+        fill={BACKGROUND_COLOR}
+        cornerRadius={BACKGROUND_RADIUS}
+        opacity={BACKGROUND_OPACITY}
+      />
+      <Text
+        y={TEXT_Y_OFFSET}
+        text={text}
+        strokeWidth={TEXT_STROKE_WIDTH}
+        width={TOOLTIP_WIDTH}
+        align={TEXT_ALIGN}
+        verticalAlign={TEXT_VERTICAL_ALIGN}
+        fill={TEXT_COLOR}
+      />
+    </Group>
+  );
+};

package/src/events/event-venue-map/components/MapPoint/components/ProductTooltip/index.ts

@@ -0,0 +1 @@
+export { ProductTooltip } from "./ProductTooltip";

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

@@ -11,6 +11,7 @@ import {
   EventVenueMapContext,
   EventVenueMapContextProps,
 } from "@licklist/plugins/dist/context/event/EventVenueMapContext";
+import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { useImage } from "../../hooks/useImage";
 import { useStageActions } from "../../hooks/useStageActions";
 import { MapPoint } from "../MapPoint";
@@ -32,6 +33,7 @@ export type VenueMapProps = {
   usedInIframe?: boolean;
   choosedProductUuids?: string[];
   errorOnChoosedProductUuids?: string[];
+  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
@@ -45,6 +47,7 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       usedInIframe = false,
       choosedProductUuids = [],
       errorOnChoosedProductUuids = [],
+      soldOutProducts,
     },
     ref
   ) => {
@@ -112,13 +115,18 @@ export const VenueMap = forwardRef<VenueMapRef, VenueMapProps>(
       );
 
       if (!currentProduct) return false;
-
+      const selectedProduct = products.find(
+        (product) => product.uuid === currentProduct.productUuid
+      );
       return (
-        products.find((product) => product.uuid === currentProduct.productUuid)
-          ?.isSoldOut || false
+        selectedProduct?.isSoldOut ||
+        (selectedProduct &&
+          !!soldOutProducts?.find(
+            (product) => product?.product_id === selectedProduct?.id
+          )) ||
+        false
       );
     };
-
     return (
       <div className="venue-map" style={{ width, height }}>
         <div className="zone-name">

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>

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

@@ -0,0 +1,52 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ActivityCard, ActivityCardProps } from "./ActivityCard";
+
+export default {
+  title: "Iframe/ActivityCard",
+  component: ActivityCard,
+} as Meta;
+
+export const Default: Story<ActivityCardProps> = (props) => {
+  return <ActivityCard {...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<ActivityCardProps> = (props) => {
+  return <ActivityCard {...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/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/back-button/BackButton.stories.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { IBackButtonProps, BackButton } from "./BackButton";
+
+export default {
+  title: "BackButton",
+  component: BackButton,
+} as Meta;
+
+export const Default: Story<IBackButtonProps> = (args) => {
+  return <BackButton {...args} />;
+};
+
+Default.args = {
+  onClick: () => null,
+};

package/src/iframe/back-button/BackButton.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export interface IBackButtonProps {
+  onClick: () => void;
+}
+
+export const BackButton = ({ onClick }: IBackButtonProps) => (
+  <div className="button-wrapper back-button">
+    <div
+      className="back-button"
+      onClick={onClick}
+      onKeyPress={onClick}
+      role="button"
+      tabIndex={0}
+    >
+      &lt;
+    </div>
+  </div>
+);

package/src/iframe/back-button/index.ts

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

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;
@@ -32,12 +34,18 @@ export const CalendarDate = ({
       disabled={disabled}
       className={clsx(
         "calendar-date",
-        selectedDate && +currentDate === +selectedDate && "selected-date",
+        selectedDate?.hasSame(currentDate, "day") && "selected-date",
         disabled && "disabled-date"
       )}
       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}
             />
           );
         })}