@licklist/design 0.44.486-dev.83 → 0.44.486

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,97 +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",
-};
-
-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,75 +0,0 @@
-import React, { ReactElement } from "react";
-import clsx from "clsx";
-import { DateTime } from "luxon";
-import { ZoneResourcesAvailability } from "@licklist/core/dist/DataMapper/Order/ZoneResourcesAvailabilityDataMapper";
-import { AvailabilityIndicator } from "../availability-indicator";
-import { DateContent } from "./DateContent";
-
-export type DateTimeButtonProps<T = DateTime | string> = {
-  date: T;
-  isSelected?: boolean;
-  isDisabled?: boolean;
-  isSoldOut?: boolean;
-  onSelect: (date: T) => void;
-  isOnlyTimeContainer?: boolean;
-  price?: string | number | ReactElement | null;
-  resources?: ZoneResourcesAvailability | null;
-  calendarView?: boolean;
-  showResources?: boolean;
-};
-
-export const DateTimeButton = <T extends DateTime | string>({
-  date,
-  isDisabled: _isDisabled,
-  isSelected,
-  isSoldOut,
-  onSelect,
-  isOnlyTimeContainer,
-  price,
-  resources,
-  calendarView,
-  showResources,
-}: DateTimeButtonProps<T>) => {
-  const isTimeVariant = typeof date === "string";
-
-  const isDisabled =
-    _isDisabled ||
-    (resources && resources.bookedResources === resources.totalResources);
-
-  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={resources}
-          isUnavailable={_isDisabled}
-          isSoldOut={isSoldOut}
-        />
-      )}
-    </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-card/ActivityCard.stories.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import {
-  ActivityCard,
-  ActivityCardProps,
-  LAYOUT_GRID,
-  LAYOUT_LIST,
-} from "./ActivityCard";
-
-export default {
-  title: "Iframe/ActivityCard",
-  component: ActivityCard,
-} as Meta;
-
-export const GridView: Story<ActivityCardProps> = (props) => {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  return (
-    <ActivityCard
-      {...props}
-      isSelected={isSelected}
-      onSelect={() => setIsSelected(true)}
-    />
-  );
-};
-
-GridView.args = {
-  layout: LAYOUT_GRID,
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-};
-
-export const ListView: Story<ActivityCardProps> = (props) => {
-  const [isSelected, setIsSelected] = React.useState(false);
-
-  return (
-    <ActivityCard
-      {...props}
-      isSelected={isSelected}
-      onSelect={() => setIsSelected(true)}
-    />
-  );
-};
-
-ListView.args = {
-  layout: LAYOUT_LIST,
-  title: "Clay Pigeons & Axe Thowing",
-  duration: "60 mins",
-  price: "from £20",
-};

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

@@ -1,66 +0,0 @@
-import React, { ReactNode } from "react";
-import clsx from "clsx";
-
-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;
-  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}
-      >
-        <div className={clsx("d-flex", "flex-column")}>
-          <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>
-      </div>
-      <hr className="list-activity-card-hr" />
-    </div>
-  );
-};

package/src/iframe/activity-card/index.ts

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

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,83 +0,0 @@
-import { ProductCategory } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Currency } from "@licklist/core/dist/Config";
-import { useIntl } from "react-intl";
-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");
-  const { formatNumber } = useIntl();
-  return (
-    values: Record<Order["id"], Order>,
-    productCategories?: ProductCategory[],
-    isLastPage?: boolean
-  ): CategoryError | void => {
-    let errorMessage: { id?: number; message: string } | void;
-    const productArray = Object.values(values).filter(
-      (product) => product?.quantity > 0
-    );
-    const sumOfMinSpends = productCategories.reduce((acc, productCategory) => {
-      const { products } = productCategory;
-      const selectedProducts = products.filter((product) =>
-        productArray.map((el) => el.id).includes(product?.id)
-      );
-      const productMinSpendsSum = selectedProducts.reduce((sum, product) => {
-        const quantity =
-          productArray.find((selected) => selected.id === product.id)
-            ?.quantity || 1;
-        return sum + product.minSpend * quantity;
-      }, 0);
-
-      return acc + productMinSpendsSum;
-    }, 0);
-
-    const totalPrice = productArray.reduce(
-      (total, product) => total + product.price * 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 };
-      }
-    });
-
-    if (totalPrice < sumOfMinSpends && !errorMessage && isLastPage) {
-      const message = t("Design:minimumSpendSumValidation", {
-        minSpend: formatNumber(sumOfMinSpends, {
-          style: "currency",
-          currency: Currency.GBP,
-        }),
-      }) as string;
-      errorMessage = { message };
-    }
-
-    return errorMessage;
-  };
-};