@licklist/design 0.44.526 → 0.44.528

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";

package/src/sales/manual-booking/category-product/CategoryProduct.tsx

@@ -1,285 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { useFormContext, Controller } from "react-hook-form";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { OverlayTrigger, Tooltip } from "react-bootstrap";
-import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { NumberInputHorizontal } from "../number-input-horizontal";
-import { Product } from "../../../types";
-import { TipTapEditor } from "../../../tiptap-editor";
-
-interface CategoryProductProps {
-  product: Product;
-  fieldIndex: `steps.${number}.productCategories.${number}.products.${number}`;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  isLoading?: boolean;
-  isEditMode?: boolean;
-  isProductSetAvailable?: boolean;
-  orderProducts?: OrderProduct[];
-}
-
-export const CategoryProduct = ({
-  product,
-  fieldIndex,
-  productsWithErrors,
-  isLoading = false,
-  isEditMode = false,
-  isProductSetAvailable = false,
-  orderProducts,
-}: CategoryProductProps) => {
-  const { t } = useTranslation(["Design", "Validation"]);
-  const { control, clearErrors, setError } = useFormContext();
-  const [isEditingPrice, setEditingPrice] = useState(false);
-  const imageSrc = product.images
-    ? MediaService.getImageSrc(product.images)
-    : null;
-
-  const currentProductMaxValue: number | undefined = useMemo(() => {
-    if (!orderProducts) return undefined;
-
-    const orderProduct = orderProducts.find(
-      (orderProduct) => orderProduct.productId === product.id
-    );
-
-    if (!orderProduct) return undefined;
-
-    return orderProduct.quantity;
-  }, [orderProducts, product.id]);
-
-  const onPriceClick = () => {
-    // disable change price when not edit mode
-    // and product isSoldOut or isLoading new data
-    if ((!isEditMode && product.isSoldOut) || isLoading) return;
-
-    setEditingPrice(true);
-  };
-
-  const productQuantityError = useMemo(() => {
-    if (!productsWithErrors) {
-      return undefined;
-    }
-
-    const error = productsWithErrors.find(
-      (productWithError) => productWithError.product_id === product.id
-    );
-
-    return error?.message;
-  }, [productsWithErrors, product.id]);
-
-  useEffect(() => {
-    if (!productQuantityError) {
-      return;
-    }
-
-    setError(`${fieldIndex}.quantity`, {
-      message: productQuantityError,
-      type: "validate",
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [productQuantityError]);
-
-  const PriceControl = ({ ref, onChange, value, invalid }) => (
-    <NumberInputHorizontal
-      ref={ref}
-      onChange={(val) => {
-        onChange(val);
-        // @TODO: change any to some type
-        clearErrors(`${fieldIndex}.price` as any);
-      }}
-      onMinusClick={() => {
-        onChange(value - 1 || 0);
-        // @TODO: change any to some type
-        clearErrors(`${fieldIndex}.price` as any);
-      }}
-      onPlusClick={() => {
-        onChange((value ?? 0) + 1);
-        // @TODO: change any to some type
-        clearErrors(`${fieldIndex}.price` as any);
-      }}
-      min={0}
-      disabled={
-        isLoading || (!isEditMode && product.isSoldOut) || !isEditingPrice
-      }
-      value={Number(value || 0)}
-      className={clsx(invalid && "error")}
-      isLoading={isLoading}
-    />
-  );
-
-  return (
-    <>
-      <Controller
-        // @TODO: change any to some type
-        name={`${fieldIndex}.price` as any}
-        control={control}
-        render={({
-          field: { onChange, value, ref },
-          fieldState: { invalid, error },
-        }) => {
-          return (
-            <>
-              <div className="medium-accordition-description-container">
-                <TipTapEditor
-                  viewMode
-                  disabled
-                  content={product.description}
-                  editorStyle={{ backgroundColor: "transparent" }}
-                />
-                {!product.isSoldOut ? (
-                  <OverlayTrigger
-                    key="status-tooltip"
-                    placement="top"
-                    overlay={
-                      <Tooltip id="tooltip-right">
-                        <span>{t("Sale:clickToEdit")}</span>
-                      </Tooltip>
-                    }
-                  >
-                    <div
-                      role="button"
-                      tabIndex={0}
-                      onClick={onPriceClick}
-                      onKeyDown={onPriceClick}
-                    >
-                      <PriceControl
-                        ref={ref}
-                        onChange={onChange}
-                        value={value}
-                        invalid={invalid}
-                      />
-                    </div>
-                  </OverlayTrigger>
-                ) : (
-                  <PriceControl
-                    ref={ref}
-                    onChange={onChange}
-                    value={value}
-                    invalid={invalid}
-                  />
-                )}
-              </div>
-              {invalid && (
-                <div className="d-flex mt-3 w-100">
-                  <p className="iframe-event__message-error">
-                    {error &&
-                      HookFormService.hasError(error, "validate") &&
-                      error?.message}
-                  </p>
-                </div>
-              )}
-            </>
-          );
-        }}
-      />
-
-      <Controller
-        control={control}
-        name={`${fieldIndex}.quantity` as string}
-        rules={{
-          validate: (value) => {
-            if (!value) return true;
-
-            const { maxAmount = 0, isUnlimited = false } = product;
-
-            // In case when we edit order and product set not
-            // available by current date we should check on
-            // max amount which equals orderProduct.quantity
-            // We should check this before all next validations
-            if (currentProductMaxValue !== undefined && isEditMode) {
-              if (isUnlimited && isProductSetAvailable) {
-                return true;
-              }
-
-              if (!isProductSetAvailable && value > currentProductMaxValue) {
-                return t("Validation:quantityMaxNumber", {
-                  max: currentProductMaxValue,
-                }) as string;
-              }
-            }
-
-            if (isUnlimited) {
-              return true;
-            }
-
-            if (value > maxAmount) {
-              return t("Validation:quantityMaxNumber", {
-                max: product.maxAmount,
-              }) as string;
-            }
-
-            return true;
-          },
-        }}
-        render={({
-          field: { onChange, value, ref },
-          fieldState: { invalid, error },
-        }) => {
-          return (
-            <div className="mb-8">
-              <div className="quantity-container">
-                <div className="number-input-horizontal-wrapper">
-                  <NumberInputHorizontal
-                    ref={ref}
-                    size="big"
-                    onChange={(val) => {
-                      onChange(val);
-                    }}
-                    onMinusClick={() => {
-                      onChange(value - 1 || 0);
-                    }}
-                    onPlusClick={() => {
-                      onChange((value ?? 0) + 1);
-                    }}
-                    min={0}
-                    disabled={
-                      isLoading ||
-                      (!isEditMode && !isProductSetAvailable) ||
-                      (product.isSoldOut && !isEditMode) ||
-                      (isEditMode &&
-                        currentProductMaxValue === undefined &&
-                        !isProductSetAvailable)
-                    }
-                    value={value || 0}
-                    className={clsx(invalid && "error")}
-                    isLoading={isLoading}
-                  />
-                </div>
-                {imageSrc && (
-                  <div
-                    className={[
-                      "image-wrapper",
-                      product.isSoldOut && "opacity-50",
-                    ].join(" ")}
-                  >
-                    <img src={imageSrc} alt={product.name} />
-                  </div>
-                )}
-              </div>
-
-              {invalid && (
-                <div className="d-flex mt-3 w-100">
-                  <p className="iframe-event__message-error">
-                    {error &&
-                      HookFormService.hasError(error, "validate") &&
-                      error?.message}
-                  </p>
-                </div>
-              )}
-
-              {!isLoading && !isProductSetAvailable && (
-                <div className="d-flex mt-3 w-100">
-                  <p className="iframe-event__message-error">
-                    {t("Design:productIsNotAvailableForSelectedDate")}
-                  </p>
-                </div>
-              )}
-            </div>
-          );
-        }}
-      />
-    </>
-  );
-};

package/src/sales/manual-booking/category-product/index.ts

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

package/src/sales/manual-booking/category-products/CategoryProducts.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-
-import { Accordion } from "react-bootstrap";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { CollapsibleInputGroup } from "../../../collapsible-input-group";
-import { Product } from "../../../types";
-import { CategoryProduct } from "../category-product/CategoryProduct";
-
-interface CategoryProductsProps {
-  stepIndex: number;
-  categoryIndex: number;
-  products?: Product[];
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  isLoading?: boolean;
-  isEditMode?: boolean;
-  isProductSetAvailable?: boolean;
-  orderProducts?: OrderProduct[];
-}
-
-export const CategoryProducts = ({
-  products,
-  stepIndex,
-  categoryIndex,
-  productsWithErrors,
-  isLoading = false,
-  isEditMode = false,
-  isProductSetAvailable = false,
-  orderProducts,
-}: CategoryProductsProps) => {
-  return (
-    <>
-      {products?.map((product, index) => {
-        const fieldIndex =
-          `steps.${stepIndex}.productCategories.${categoryIndex}.products.${index}` as const;
-        return (
-          <Accordion
-            defaultActiveKey="product"
-            key={product.id}
-            className="medium-accordition"
-          >
-            <CollapsibleInputGroup
-              description=""
-              alwaysOpen
-              eventKey="product"
-              label={
-                <div className="medium-accordition-header">
-                  <div className="medium-accordition-title">
-                    {product?.name}
-                  </div>
-                </div>
-              }
-            >
-              <CategoryProduct
-                fieldIndex={fieldIndex}
-                product={product}
-                productsWithErrors={productsWithErrors}
-                isLoading={isLoading}
-                isEditMode={isEditMode}
-                isProductSetAvailable={isProductSetAvailable}
-                orderProducts={orderProducts}
-              />
-            </CollapsibleInputGroup>
-          </Accordion>
-        );
-      })}
-    </>
-  );
-};

package/src/sales/manual-booking/category-products/index.ts

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

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -1,121 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { Accordion } from "react-bootstrap";
-import { useFormContext } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
-import { MenuStep } from "../../../types";
-import { CollapsibleInputGroup } from "../../../collapsible-input-group";
-import { CategoryProducts } from "../category-products/CategoryProducts";
-
-export interface ManualBookingStepsControllProps {
-  step: MenuStep;
-  stepIndex: number;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  isLoading?: boolean;
-  isEditMode?: boolean;
-  isProductSetAvailable?: boolean;
-  orderProducts?: OrderProduct[];
-}
-
-export const ManualBookingStepsControll = ({
-  step,
-  stepIndex,
-  productsWithErrors,
-  isLoading = false,
-  isEditMode = false,
-  isProductSetAvailable = false,
-  orderProducts,
-}: ManualBookingStepsControllProps) => {
-  const {
-    formState: { errors },
-  } = useFormContext();
-  const { t } = useTranslation(["Design"]);
-  const stepError =
-    errors && errors?.steps ? errors?.steps[stepIndex] : undefined;
-
-  const [showProductQuatityError, setShowProductQuantityError] =
-    useState(false);
-
-  useEffect(() => {
-    if (!productsWithErrors) {
-      return;
-    }
-    setShowProductQuantityError(true);
-  }, [productsWithErrors]);
-
-  return (
-    <Accordion key={step.id} defaultActiveKey="step">
-      <ErrorModal
-        isOpen={showProductQuatityError}
-        onClose={() => setShowProductQuantityError(false)}
-        messageKey="pleaseCheckSelectedProducts"
-      />
-      <CollapsibleInputGroup
-        alwaysOpen
-        description=""
-        eventKey="step"
-        label={
-          <>
-            <div className="step-title">{step?.name}</div>
-            {stepError && (
-              <div className="d-flex mt-3 w-100">
-                <p className="iframe-event__message-error mb-0">
-                  {t("notValidStep")}
-                </p>
-              </div>
-            )}
-          </>
-        }
-      >
-        {step.productCategories.map((productCategory, categoryIndex) => {
-          const categoryError =
-            stepError && stepError?.productCategories
-              ? stepError?.productCategories[categoryIndex]
-              : undefined;
-
-          return (
-            <Accordion
-              key={productCategory.id}
-              defaultActiveKey={
-                step.productCategories.length === 1 ? "categories" : undefined
-              }
-            >
-              <CollapsibleInputGroup
-                description=""
-                eventKey="categories"
-                alwaysOpen={step.productCategories.length === 1}
-                label={
-                  <>
-                    <div className="category-title">
-                      {productCategory?.name}
-                    </div>
-                    {categoryError && (
-                      <div className="d-flex mt-3 w-100">
-                        <p className="iframe-event__message-error mb-0">
-                          {t("notValidCategory")}
-                        </p>
-                      </div>
-                    )}
-                  </>
-                }
-              >
-                <CategoryProducts
-                  products={productCategory?.products}
-                  stepIndex={stepIndex}
-                  categoryIndex={categoryIndex}
-                  productsWithErrors={productsWithErrors}
-                  isLoading={isLoading}
-                  isEditMode={isEditMode}
-                  isProductSetAvailable={isProductSetAvailable}
-                  orderProducts={orderProducts}
-                />
-              </CollapsibleInputGroup>
-            </Accordion>
-          );
-        })}
-      </CollapsibleInputGroup>
-    </Accordion>
-  );
-};

package/src/sales/manual-booking/controll/index.ts

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

package/src/sales/manual-booking/create-user/CreateUser.stories.tsx

@@ -1,27 +0,0 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { useForm, FormProvider } from "react-hook-form";
-import { Form } from "react-bootstrap";
-import { CreateUser } from "./CreateUser";
-
-export default {
-  title: "Sales/ManualBooking/CreateUser",
-} as Meta;
-
-export const Default = (args) => {
-  const form = useForm({ mode: "onChange" });
-
-  return (
-    <FormProvider {...form}>
-      <Form>
-        <div style={{ height: "550px" }}>
-          <CreateUser {...args} />
-        </div>
-      </Form>
-    </FormProvider>
-  );
-};
-
-Default.args = {
-  goToSearchUsers: () => {},
-};