@licklist/design 0.44.486-dev.9 → 0.44.487

package/src/assets/iframe/backButton.svg

@@ -1,4 +0,0 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="16" cy="16" r="15.5" fill="#F3F3F3" stroke="#F0F0F0"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M10.293 15.2929C9.90252 15.6834 9.90252 16.3166 10.293 16.7071L16.657 23.0711C17.0475 23.4616 17.6807 23.4616 18.0712 23.0711C18.4617 22.6805 18.4617 22.0474 18.0712 21.6569L12.4144 16L18.0712 10.3431C18.4617 9.95262 18.4617 9.31946 18.0712 8.92893C17.6807 8.53841 17.0475 8.53841 16.657 8.92893L10.293 15.2929Z" fill="#1A182B"/>
-</svg>

package/src/assets/iframe/dateInfo/available.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.943939" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-<rect x="0.943939" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#4CF973" stroke="white"/>
-</svg>

package/src/assets/iframe/dateInfo/limited.svg

@@ -1,5 +0,0 @@
-<svg width="7" height="11" viewBox="0 0 7 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="1.2406" y="1.03658" width="5.25188" height="3.04878" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="1.2406" y="4.10976" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-<rect x="1.2406" y="7.18292" width="5.25188" height="3.04878" rx="1.5" fill="#FDD054" stroke="white"/>
-</svg>

package/src/assets/iframe/dateInfo/soldOut.svg

@@ -1,6 +0,0 @@
-<svg width="7" height="10" viewBox="0 0 7 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect width="5.94013" height="10" transform="translate(0.497131)" fill="white"/>
-<rect x="0.591156" y="0.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="3.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-<rect x="0.591156" y="6.5" width="5.75211" height="3" rx="1.5" fill="#E4E4E4" stroke="white"/>
-</svg>

package/src/customers/components/filter/CustomerFilter.stories.tsx

@@ -1,18 +0,0 @@
-import React, { useState } from "react";
-import { Meta, Story } from "@storybook/react";
-import { CustomerFilter, CustomerFilterProps } from "./CustomerFilter";
-
-export default {
-  title: "Customers/Filter",
-  component: CustomerFilter,
-} as Meta;
-
-export const Default: Story<CustomerFilterProps> = () => {
-  const [values, setValues] = useState({
-    name: "",
-    email: "",
-    phone: "",
-  });
-
-  return <CustomerFilter values={values} onChange={setValues} />;
-};

package/src/customers/components/filter/CustomerFilter.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { useTranslation } from "react-i18next";
-import clsx from "clsx";
-import { TextField } from "../../../static/TextField";
-
-type CustomerFilterValues = {
-  name: string;
-  email: string;
-  phone: string;
-};
-
-const FILTER_FIELDS = {
-  name: "name",
-  email: "email",
-  phone: "phone",
-};
-
-export interface CustomerFilterProps {
-  values: CustomerFilterValues;
-  onChange: (values: CustomerFilterValues) => void;
-}
-
-export const CustomerFilter = ({ values, onChange }: CustomerFilterProps) => {
-  const { t } = useTranslation(["Design"]);
-
-  return (
-    <div className="customers-filter d-flex">
-      <div className="d-flex customers-filter-items">
-        {Object.keys(FILTER_FIELDS).map((filterKeyName) => {
-          const label = t(FILTER_FIELDS[filterKeyName]);
-
-          return (
-            <TextField
-              key={filterKeyName}
-              className={clsx("mb-0", "col-4", "customer-filter")}
-              type="text"
-              label={label}
-              value={values[filterKeyName]}
-              onChange={(event) =>
-                onChange({ ...values, [filterKeyName]: event.target.value })
-              }
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};

package/src/customers/components/filter/index.ts

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

package/src/customers/components/index.ts

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

package/src/customers/index.ts

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

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

@@ -1,46 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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",
-};

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

@@ -1,73 +0,0 @@
-import React, { ReactElement } from "react";
-import clsx from "clsx";
-import { DateTime } from "luxon";
-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;
-};
-
-export const DateTimeButton = <T extends DateTime | string>({
-  date,
-  isDisabled,
-  isSelected,
-  onSelect,
-  isOnlyTimeContainer,
-  price,
-}: 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";
-
-  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"
-      )}
-    >
-      {isTimeVariant ? (
-        date
-      ) : (
-        <DateContent
-          date={date}
-          isDisabled={isDisabled}
-          isSelected={isSelected}
-        />
-      )}
-
-      {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>
-      )} */}
-    </button>
-  );
-};

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

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

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

@@ -1,68 +0,0 @@
-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

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

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

@@ -1,52 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,2 +0,0 @@
-export * from "./list-activity-card/ListActivityCard";
-export * from "./activity-card/ActivityCard";

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

@@ -1,52 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

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

package/src/iframe/order-process/components/ErrorModal/index.ts

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

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -1,52 +0,0 @@
-import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { useTranslation } from "react-i18next";
-import { Order } from "src/types";
-
-interface CategoryError {
-  message: string;
-  id: number;
-}
-
-// TODO it's temporary solution, please remove it later
-export const useCategoryVerification = () => {
-  const { t } = useTranslation("Validation");
-
-  return (
-    values: Record<Order["id"], Order>,
-    productCategories?: ProductCategory[]
-  ): CategoryError | void => {
-    let errorMessage: { id: number; message: string } | void;
-
-    const productArray = Object.values(values).filter(
-      (product) => product?.quantity > 0
-    );
-
-    productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
-      if (!minSubItems && !maxSubItems) return;
-
-      const categoryProductsQuantity = productArray.filter(
-        (product) => product?.productsCategoryId === id
-      ).length;
-
-      if (minSubItems && categoryProductsQuantity < minSubItems) {
-        const message = t("Validation:fieldMinNumber", {
-          min: minSubItems,
-          attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
-
-        return;
-      }
-
-      if (maxSubItems && categoryProductsQuantity > maxSubItems) {
-        const message = t("Validation:fieldMaxNumber", {
-          max: maxSubItems,
-          attribute: `number of products in the ${name} category`,
-        });
-        errorMessage = { id, message };
-      }
-    });
-
-    return errorMessage;
-  };
-};