@licklist/design 0.44.526 → 0.44.528

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

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

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

@@ -1,48 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { MenuStep } from "../../../../types";
-
-interface CategoryError {
-  message: string;
-  id: number;
-}
-export const useCategory = () => {
-  const { t } = useTranslation("Validation");
-  const verifyCategoryItems = (
-    values: Record<string, any>,
-    step: MenuStep
-  ): CategoryError | void => {
-    let errorMessage;
-    const productArray = Object.values(values).filter(
-      (product) => product?.quantity > 0
-    );
-    step?.productCategories.forEach(
-      ({ minSubItems, maxSubItems, id, name }) => {
-        if (!minSubItems && !maxSubItems) {
-          return;
-        }
-
-        const categoryProductsQuantity = productArray.filter(
-          (product) => Number(product?.productsCategoryId) === Number(id)
-        ).length;
-        if (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;
-  };
-  return { verifyCategoryItems };
-};

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.stories.tsx

@@ -1,51 +0,0 @@
-import { Meta, Story } from "@storybook/react";
-import React from "react";
-import {
-  ResourcesBlockingModal,
-  ResourcesBlockingModalProps,
-} from "./ResourcesBlockingModal";
-
-export default {
-  title: "Provider/ResourcesBlockingModal",
-  component: ResourcesBlockingModal,
-} as Meta;
-
-export const Default: Story<ResourcesBlockingModalProps> = (props) => {
-  return <ResourcesBlockingModal {...props} />;
-};
-
-Default.args = {
-  show: true,
-  zones: [
-    {
-      id: 1,
-      name: "Zone 1",
-      providerId: 1,
-      type: "standard",
-      sort: null,
-      description: "description",
-      createdAt: "2021-09-01T12:00:00.000Z",
-      updatedAt: null,
-      deletedAt: null,
-      zoneRecurrences: null,
-      image: null,
-    },
-    {
-      id: 2,
-      name: "Zone 2",
-      providerId: 1,
-      type: "standard",
-      sort: null,
-      description: "description",
-      createdAt: "2021-09-01T12:00:00.000Z",
-      updatedAt: null,
-      deletedAt: null,
-      zoneRecurrences: null,
-      image: null,
-    },
-  ],
-  lanes: [
-    { zoneId: 1, lanes: ["Lane 1", "Lane 2", "Lane 3", "Lane 4"] },
-    { zoneId: 2, lanes: ["Lane 5", "Lane 6", "Lane 7", "Lane 8"] },
-  ],
-};

package/src/provider/resources-blocking-modal/ResourcesBlockingModal.tsx

@@ -1,134 +0,0 @@
-import { Button, Form, Modal } from "react-bootstrap";
-import React from "react";
-import { useId } from "@react-aria/utils";
-import { useTranslation } from "react-i18next";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
-import Image from "../../static/Image";
-import src from "../../assets/dashboard/blockingClock.png";
-
-const WEEKDAYS = [
-  "mondayShort",
-  "tuesdayShort",
-  "wednesdayShort",
-  "thursdayShort",
-  "fridayShort",
-  "saturdayShort",
-  "sundayShort",
-];
-
-export type ResourcesBlockingModalProps = {
-  show: boolean;
-  zones: Zone[];
-  lanes: { zoneId: Zone["id"]; lanes: string[] }[];
-};
-
-export const ResourcesBlockingModal = ({
-  show,
-  zones,
-  lanes,
-}: ResourcesBlockingModalProps) => {
-  const { t } = useTranslation("Design");
-  const allId = useId();
-  const resourcesId = useId();
-
-  return (
-    <Modal centered show={show} className="resources-blocking-modal">
-      <header>
-        <span>{t("resourcesBlocking")}</span>
-        <Image src={src} />
-      </header>
-
-      <Modal.Body>
-        <div className="checkbox-with-description">
-          <span>{t("dayOfTheWeek")}</span>
-          <Form.Group className="custom-checkbox">
-            <Form.Check custom type="checkbox" id={allId}>
-              <Form.Check.Input type="checkbox" />
-              <Form.Check.Label>{t("all")}</Form.Check.Label>
-            </Form.Check>
-          </Form.Group>
-        </div>
-
-        <Form.Group className="custom-checkbox days-list">
-          {WEEKDAYS.map((weekday) => (
-            <Checkbox key={weekday} label={t(weekday)} />
-          ))}
-        </Form.Group>
-
-        <div className="date-time-inputs">
-          <Input label={t("from")} placeholder="DD.MM.YYYY" />
-          <Input label={t("until")} placeholder="DD.MM.YYYY" />
-
-          <Input label={t("startTime")} placeholder="00:00" />
-          <Input label={t("endTime")} placeholder="00:00" />
-        </div>
-
-        <Form.Group className="text-input">
-          <Form.Label>{t("textLabel")}</Form.Label>
-          <Form.Control />
-        </Form.Group>
-
-        <div className="checkbox-with-description">
-          <span>{t("resources")}</span>
-          <Form.Group className="custom-checkbox">
-            <Form.Check custom type="checkbox" id={resourcesId}>
-              <Form.Check.Input type="checkbox" />
-              <Form.Check.Label>{t("all")}</Form.Check.Label>
-            </Form.Check>
-          </Form.Group>
-        </div>
-
-        {zones.map((zone) => (
-          <Form.Group key={zone.id} className="zone-wrapper custom-checkbox">
-            <div className="zone-name">{zone.name}</div>
-
-            {lanes
-              .find((lane) => lane.zoneId === zone.id)
-              .lanes.map((lane) => (
-                <Checkbox key={lane} label={lane} className="lane" />
-              ))}
-          </Form.Group>
-        ))}
-
-        <footer>
-          <Button>Save</Button>
-          <Button variant="secondary">Close</Button>
-          <Button variant="danger">Delete</Button>
-        </footer>
-      </Modal.Body>
-    </Modal>
-  );
-};
-
-const Checkbox = ({
-  label,
-  className = "",
-}: {
-  label: string;
-  className?: string;
-}) => {
-  const id = useId();
-
-  return (
-    <Form.Check custom type="checkbox" className={className} id={id}>
-      <Form.Check.Input type="checkbox" />
-      <Form.Check.Label>{label}</Form.Check.Label>
-    </Form.Check>
-  );
-};
-
-const Input = ({
-  label,
-  placeholder,
-}: {
-  label: string;
-  placeholder: string;
-}) => {
-  return (
-    <Form.Group className="text-input">
-      <Form.Label>{label}</Form.Label>
-
-      <Form.Control placeholder={placeholder} />
-    </Form.Group>
-  );
-};

package/src/provider/resources-blocking-modal/index.ts

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

package/src/sales/booking/filter/BookingFilter.stories.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
-import { boolean } from "@storybook/addon-knobs";
-import { Meta, Story } from "@storybook/react";
-import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { BookingFilter, BookingFilterProps } from "./BookingFilter";
-
-export default {
-  title: "Sales/Booking/Filter",
-  component: BookingFilter,
-} as Meta;
-
-export const Default: Story<BookingFilterProps> = () => {
-  const isFilterOpen = boolean("isFilterOpen", false);
-  const autoFocusOnMount = boolean("autoFocusOnMount", true);
-
-  return (
-    <MemoryRouter>
-      <BookingContextProvider>
-        <BookingFilter
-          isFilterOpen={isFilterOpen}
-          autoFocusOnMount={autoFocusOnMount}
-        />
-      </BookingContextProvider>
-    </MemoryRouter>
-  );
-};

package/src/sales/booking/filter/BookingFilter.tsx

@@ -1,47 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { MainFilterSection } from "./components/MainFilterSection";
-import { AdditionalFilterSection } from "./components/AdditionalFIlterSection";
-import { SearchingForSection } from "./components/SearchingForSection";
-
-export type BookingFilterProps = PropsWithChildren<{
-  onAddFiltersClick?: () => void;
-  onCancelFilterClick?: () => void;
-  onRefreshClick?: () => void;
-  onFullscreenButtonClick?: () => void;
-  isFilterOpen?: boolean;
-  autoFocusOnMount?: boolean;
-  isFullscreenMode?: boolean;
-}>;
-
-export const BookingFilter = ({
-  isFilterOpen = true,
-  autoFocusOnMount = false,
-  isFullscreenMode = false,
-  children,
-  ...props
-}: BookingFilterProps) => {
-  return (
-    <div className="booking-filter">
-      <MainFilterSection
-        {...props}
-        isFilterOpen={isFilterOpen}
-        autoFocusOnMount={autoFocusOnMount}
-        isFullscreenMode={isFullscreenMode}
-      />
-      {isFilterOpen ? (
-        <>
-          <AdditionalFilterSection />
-          <div className="separator-horizontal" />
-          <SearchingForSection />
-        </>
-      ) : (
-        children && (
-          <>
-            <div className="separator-horizontal" />
-            {children}
-          </>
-        )
-      )}
-    </div>
-  );
-};

package/src/sales/booking/filter/components/AdditionalFIlterSection.tsx

@@ -1,95 +0,0 @@
-import React, { useContext, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, Button, Row, Col } from "react-bootstrap";
-import { useForm } from "react-hook-form";
-import {
-  ORDER_STATUS_PENDING,
-  ORDER_STATUS_CANCELLED,
-  ORDER_STATUS_COMPLETED,
-  ORDER_STATUS_ACTION_REQUIRED,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
-import {
-  BookingContext,
-  BookingFilters,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-
-const ORDER_STATUSES_FOR_UPDATE = [
-  ORDER_STATUS_PENDING,
-  ORDER_STATUS_CANCELLED,
-  ORDER_STATUS_COMPLETED,
-  ORDER_STATUS_ACTION_REQUIRED,
-];
-
-export type AdditionalFilterSectionProps = {
-  onAddFiltersClick?: () => void;
-  onCancelFilterClick?: () => void;
-  onRefreshClick?: () => void;
-  onFullscreenButtonClick?: () => void;
-  isFilterOpen?: boolean;
-};
-
-export const AdditionalFilterSection = () => {
-  const { t } = useTranslation("Design");
-  const { filters, setFilters } = useContext(BookingContext);
-
-  const { handleSubmit, register, reset } = useForm<Partial<BookingFilters>>({
-    defaultValues: filters,
-  });
-
-  const onFormSubmit = (values: Partial<BookingFilters>) => {
-    setFilters(values);
-  };
-
-  useEffect(() => {
-    reset(filters);
-  }, [filters, reset]);
-
-  return (
-    <div className="additional-filter-section">
-      <Form onSubmit={handleSubmit(onFormSubmit)}>
-        <Row className="additional-filter-container">
-          <Col md="3">
-            <Form.Group>
-              <Form.Label>{t("staffMember")}</Form.Label>
-              <Form.Control {...register("staffMember")} as="select">
-                <option value="">{t("Design:choose")}</option>
-              </Form.Control>
-            </Form.Group>
-          </Col>
-
-          <Col md="3">
-            <Form.Group>
-              <Form.Label>{t("bookingStatus")}</Form.Label>
-              <Form.Control {...register("status")} as="select">
-                <option value="">{t("Design:choose")}</option>
-                {Object.keys(ORDER_STATUSES_FOR_UPDATE).map((key: string) => (
-                  <option
-                    key={ORDER_STATUSES_FOR_UPDATE[key]}
-                    value={ORDER_STATUSES_FOR_UPDATE[key]}
-                  >
-                    {t(`Design:${ORDER_STATUSES_FOR_UPDATE[key]}`)}
-                  </option>
-                ))}
-              </Form.Control>
-            </Form.Group>
-          </Col>
-
-          <Col className="date-container">
-            <Form.Group>
-              <Form.Label>{t("date")}</Form.Label>
-              <Form.Control {...register("date")} type="date" />
-            </Form.Group>
-          </Col>
-
-          <Col md="3" className="d-flex align-items-end">
-            <Form.Group>
-              <Button type="submit" className="shadow-none">
-                {t("apply")}
-              </Button>
-            </Form.Group>
-          </Col>
-        </Row>
-      </Form>
-    </div>
-  );
-};

package/src/sales/booking/filter/components/MainFilterSection.tsx

@@ -1,131 +0,0 @@
-import React, { useContext, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Form, Button } from "react-bootstrap";
-import clsx from "clsx";
-import useDebounce from "use-debounce/lib/useDebounce";
-import { BookingContext } from "@licklist/plugins/dist/context/booking/BookingContext";
-import Icon from "../../../../static/Icon";
-import { BookingFilterProps } from "../BookingFilter";
-import { ReactComponent as RefreshIcon } from "../../../../assets/dashboard/refresh.svg";
-import { ReactComponent as FullscreenIcon } from "../../../../assets/dashboard/fullscreen.svg";
-import { ReactComponent as MinimizeIcon } from "../../../../assets/dashboard/minimize.svg";
-
-export type MainFilterSectionProps = BookingFilterProps;
-
-const DEBOUNCE_QUERY_TIME = 300;
-
-export const MainFilterSection = ({
-  isFilterOpen,
-  onAddFiltersClick,
-  onCancelFilterClick,
-  onRefreshClick,
-  onFullscreenButtonClick,
-  autoFocusOnMount,
-  isFullscreenMode,
-}: MainFilterSectionProps) => {
-  const { t } = useTranslation("Design");
-  const { filters, onQueryChange } = useContext(BookingContext);
-  const { search = "" } = filters;
-
-  const [queryValue, setQueryValue] = useState<string>(search);
-  const [debouncedQueryValue] = useDebounce(queryValue, DEBOUNCE_QUERY_TIME);
-
-  const onSearchQueryChange = ({ target: { value } }) => {
-    setQueryValue(value);
-  };
-
-  const onSearchQueryBlur = ({ target: { value } }) => {
-    onQueryChange(value);
-  };
-
-  useEffect(() => {
-    onQueryChange(debouncedQueryValue);
-  }, [onQueryChange, debouncedQueryValue]);
-
-  useEffect(() => {
-    if (queryValue !== search) {
-      setQueryValue(search);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [search]);
-
-  return (
-    <div className="main-filter-section">
-      <div className="search">
-        <Form.Group>
-          <Form.Label>{t("searchBookings")}:</Form.Label>
-          <div className="control-with-icon">
-            <Icon
-              type="search"
-              width="1rem"
-              height="1rem"
-              className="search-icon"
-            />
-            <Form.Control
-              value={queryValue}
-              onChange={onSearchQueryChange}
-              onBlur={onSearchQueryBlur}
-              placeholder={t("searchBookingsPlaceholder")}
-              autoFocus={autoFocusOnMount}
-            />
-          </div>
-        </Form.Group>
-      </div>
-      <div className="buttons">
-        {isFilterOpen ? (
-          <Button
-            variant="link"
-            className="shadow-none cancel-button"
-            onClick={onCancelFilterClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} />
-            </div>
-            {t("cancel")}
-          </Button>
-        ) : (
-          <Button
-            variant="link"
-            className="shadow-none add-filters-button"
-            onClick={onAddFiltersClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} />
-            </div>
-            {t("addFilters")}
-          </Button>
-        )}
-
-        <div className="separator" />
-
-        <Button
-          variant="link"
-          className="shadow-none refresh-button"
-          onClick={onRefreshClick}
-        >
-          <div className="icon">
-            <RefreshIcon />
-          </div>
-          {t("refresh")}
-        </Button>
-
-        <div className="separator active" />
-
-        <Button
-          variant="link"
-          className={clsx(
-            "shadow-none",
-            !isFullscreenMode && "fullscreen-button",
-            isFullscreenMode && "minimize-button"
-          )}
-          onClick={onFullscreenButtonClick}
-        >
-          <div className="icon">
-            {isFullscreenMode ? <MinimizeIcon /> : <FullscreenIcon />}
-          </div>
-          {t(isFullscreenMode ? "minimize" : "fullScreen")}
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/components/ResultTagButton.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import Icon from "../../../../static/Icon";
-
-export type ResultTagButtonProps = {
-  tagKey: string;
-  value: string;
-  onRemoveClick: (tagKey: string) => void;
-};
-
-export const ResultTagButton = ({
-  tagKey,
-  value,
-  onRemoveClick,
-}: ResultTagButtonProps) => {
-  const onButtonClick = () => {
-    onRemoveClick(tagKey);
-  };
-
-  return (
-    <div className="result-tag rounded-pill shadow-none">
-      {value}
-      <div
-        className="icon"
-        role="button"
-        tabIndex={0}
-        onClick={onButtonClick}
-        onKeyUp={onButtonClick}
-      >
-        <Icon type="plus" style={{ width: 10 }} color="#727272" />
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/components/SearchingForSection.tsx

@@ -1,68 +0,0 @@
-import React, { useContext, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { Button } from "react-bootstrap";
-import {
-  BookingContext,
-  BookingFilters,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-import { ResultTagButton } from "./ResultTagButton";
-
-const SEARCHING_FOR_FILTER_KEYS = ["q", "status", "date", "staffMember"];
-
-export const SearchingForSection = () => {
-  const { t } = useTranslation("Design");
-  const { filters, setFilters } = useContext(BookingContext);
-
-  const filteredFilters = useMemo(() => {
-    return SEARCHING_FOR_FILTER_KEYS.reduce(
-      (prevValues: Partial<BookingFilters>, currentKey: string) => {
-        if (filters[currentKey]) {
-          return { ...prevValues, [currentKey]: filters[currentKey] };
-        }
-
-        return prevValues;
-      },
-      {}
-    );
-  }, [filters]);
-
-  const resetAllFilters = () => {
-    setFilters({ isFilterOpen: true });
-  };
-
-  const onResetSelectedFilter = (key: string) => {
-    setFilters({ ...filters, [key]: "" });
-  };
-
-  if (!Object.keys(filteredFilters).length) {
-    return null;
-  }
-
-  const { search, ...allFilters } = filteredFilters;
-
-  return (
-    <div className="searching-for-section">
-      <div className="tags">
-        <p className="label">{t("Design:searchingFor")}:</p>
-        <p className="search-query-param">{search}</p>
-        {Object.keys(allFilters).map((key: string) => {
-          return (
-            <ResultTagButton
-              key={key}
-              tagKey={key}
-              value={allFilters[key]}
-              onRemoveClick={onResetSelectedFilter}
-            />
-          );
-        })}
-        <Button
-          variant="link"
-          className="shadow-none"
-          onClick={resetAllFilters}
-        >
-          {t("clear")}
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/sales/booking/filter/index.ts

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

package/src/sales/booking/tabs/BookingTabs.stories.tsx

@@ -1,17 +0,0 @@
-import React from "react";
-import { Meta, Story } from "@storybook/react";
-import { BookingContextProvider } from "@licklist/plugins/dist/context/booking/BookingContext";
-import { BookingTabs, BookingTabsProps } from "./BookingTabs";
-
-export default {
-  title: "Sales/Booking/Tabs",
-  component: BookingTabs,
-} as Meta;
-
-export const Default: Story<BookingTabsProps> = () => {
-  return (
-    <BookingContextProvider>
-      <BookingTabs>Bookings</BookingTabs>
-    </BookingContextProvider>
-  );
-};