@licklist/design 0.44.485-dev.9 → 0.44.485-dev.90

package/src/iframe/order-process/components/StepsForm/StepsForm.tsx

@@ -1,173 +0,0 @@
-import React, {
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from "react";
-import { useWatch, useForm, FormProvider } from "react-hook-form";
-import { isEqual } from "lodash";
-import { Form } from "react-bootstrap";
-import { useTranslation, Trans } from "react-i18next";
-import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
-import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
-import {
-  getFirstErrorKey,
-  isFormValuesEmpty,
-} from "@licklist/plugins/dist/utils/FormValues";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { Category } from "../Category";
-import { MenuStep } from "../../../../types";
-import { STEP_FORM_ID } from "../../constants";
-import { ErrorModal } from "../CalendarStepsForm/components/ErrorModal";
-import { useCategory } from "../utils/category";
-
-const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
-
-export interface StepsFormProps {
-  step: MenuStep;
-  isLastMenuStep: boolean;
-  onSubmit: (values: Record<string, any>) => void;
-  setFormValues: (values: Record<string, any>) => void;
-  defaultValues: Record<string, any>;
-  setFormErrors?: (errors: Record<string, any>) => void;
-  id?: string;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-}
-
-export type StepsFormRef = {
-  getFormValues: () => Record<string, any>;
-};
-
-export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
-  (
-    {
-      step,
-      isLastMenuStep,
-      setFormValues,
-      defaultValues,
-      onSubmit,
-      setFormErrors,
-      id = STEP_FORM_ID,
-      productsWithErrors,
-    },
-    ref
-  ) => {
-    const form = useForm({ defaultValues });
-    const { t } = useTranslation(["Design", "Validation"]);
-    const [formStepError, setStepFormError] = useState("");
-
-    const { verifyCategoryItems } = useCategory();
-    const {
-      control,
-      formState: { errors },
-      getValues,
-      setError,
-      clearErrors,
-      reset,
-    } = form;
-    const formValues = useWatch({ control });
-    const prevErrors = usePreviousValue(errors);
-
-    useImperativeHandle(ref, () => {
-      return {
-        getFormValues: () => getValues(),
-      };
-    });
-
-    useEffect(() => {
-      if (!productsWithErrors) {
-        return;
-      }
-      setStepFormError(t("soldOutProduct"));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [productsWithErrors]);
-
-    const submitCurrentForm = (values: Record<string, any>) => {
-      if (isLastMenuStep && isFormValuesEmpty(values)) {
-        setError(NO_ORDER_ITEMS_ERROR, {});
-        scrollToError(NO_ORDER_ITEMS_ERROR);
-        return;
-      }
-
-      // @TODO it's temporary solution, please remove it later
-      const categoryError = verifyCategoryItems(values, step);
-
-      if (categoryError) {
-        setStepFormError(categoryError.message);
-        setError(`category_${categoryError.id}`, {
-          message: categoryError.message,
-        });
-        return;
-      }
-
-      onSubmit(values);
-    };
-
-    const onErrorSubmit = (submitErrors) => {
-      scrollToError(getFirstErrorKey(submitErrors));
-      setStepFormError(t("pleaseCheckSelectedProducts"));
-    };
-
-    useEffect(() => {
-      if (errors) {
-        setTimeout(clearErrors, 0);
-      }
-      setFormValues(formValues);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formValues]);
-
-    useEffect(() => {
-      if (isFormValuesEmpty(formValues)) return;
-
-      clearErrors(NO_ORDER_ITEMS_ERROR);
-    }, [formValues, clearErrors]);
-
-    useEffect(() => {
-      reset(defaultValues);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues]);
-
-    useEffect(() => {
-      if (isEqual(errors, prevErrors) || !setFormErrors) return;
-
-      setFormErrors(errors);
-    }, [errors, prevErrors, setFormErrors]);
-
-    return (
-      <Form
-        onSubmit={form.handleSubmit(submitCurrentForm, onErrorSubmit)}
-        id={id}
-      >
-        <FormProvider {...form}>
-          <ErrorModal
-            isOpen={Boolean(formStepError)}
-            messageKey={formStepError}
-            onClose={() => setStepFormError("")}
-          />
-          <div>
-            <div className="iframe-event">
-              <Category
-                productCategories={step?.productCategories}
-                productsWithErrors={productsWithErrors}
-                errors={errors}
-              />
-
-              {errors[NO_ORDER_ITEMS_ERROR] && (
-                <div
-                  className="d-flex m-5 justify-content-center form-error"
-                  id={NO_ORDER_ITEMS_ERROR}
-                >
-                  <Trans
-                    t={t}
-                    i18nKey="pleaseSelectAtLeastFrom"
-                    values={{ min: 1, type: "item", from: "those categories" }}
-                  />
-                </div>
-              )}
-            </div>
-          </div>
-        </FormProvider>
-      </Form>
-    );
-  }
-);

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

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

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>
-          <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 md="3">
-            <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>
-  );
-};

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

@@ -1,88 +0,0 @@
-import React, { PropsWithChildren } from "react";
-import { Button } from "react-bootstrap";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import {
-  BOOKING_LIST_TYPE,
-  BOOKING_CALENDAR_TYPE,
-  BOOKING_TYPE,
-} from "@licklist/plugins/dist/context/booking/BookingContext";
-import { HasPermissionProp } from "@licklist/plugins/dist/types/permission/Permission";
-import Icon from "../../../static/Icon";
-import { ReactComponent as BookingCalendar } from "../../../assets/dashboard/bookingCalendar.svg";
-import { ReactComponent as BookingList } from "../../../assets/dashboard/bookingList.svg";
-import { ReactComponent as BookingListSmall } from "../../../assets/dashboard/bookingListSmall.svg";
-
-const VIEW_TYPES: BOOKING_TYPE[] = [BOOKING_LIST_TYPE, BOOKING_CALENDAR_TYPE];
-
-export type BookingTabsProps = HasPermissionProp &
-  PropsWithChildren<{
-    onReportsClick?: () => void;
-    onAddButtonClick?: () => void;
-    viewType: BOOKING_TYPE;
-    onSetType: (value: BOOKING_TYPE) => void;
-  }>;
-
-export const BookingTabs = ({
-  children,
-  onReportsClick,
-  onAddButtonClick,
-  hasPermission = false,
-  viewType,
-  onSetType,
-}: BookingTabsProps) => {
-  const { t } = useTranslation("Design");
-
-  return (
-    <div className="booking-tabs-pane">
-      <div className="booking-tabs">
-        {VIEW_TYPES.map((tabType: BOOKING_TYPE) => {
-          return (
-            <Button
-              key={tabType}
-              variant="link"
-              size="sm"
-              className={clsx(
-                "p-0 m-0 pr-2 shadow-none",
-                viewType === tabType && "active"
-              )}
-              onClick={() => {
-                onSetType(tabType);
-              }}
-            >
-              {tabType === BOOKING_LIST_TYPE ? (
-                <BookingList />
-              ) : (
-                <BookingCalendar />
-              )}
-            </Button>
-          );
-        })}
-      </div>
-      <span className="separator" />
-      <div className="children">{children}</div>
-      {hasPermission && (
-        <div className="buttons">
-          <Button
-            variant="outline-primary"
-            className="shadow-none mr-4"
-            onClick={onReportsClick}
-          >
-            <BookingListSmall className="mr-2" />
-            {t("generateReports")}
-          </Button>
-          <Button
-            variant="primary"
-            className="shadow-none"
-            onClick={onAddButtonClick}
-          >
-            <div className="icon">
-              <Icon type="plus" style={{ width: 10 }} color="#0E8CE2" />
-            </div>
-            {t("newBooking")}
-          </Button>
-        </div>
-      )}
-    </div>
-  );
-};

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

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