@licklist/design 0.44.551-dev.8 → 0.45.0-dev.0

package/src/product-set/form/SelectCategoryModal.tsx

@@ -1,190 +0,0 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useContext, useState } from "react";
-import { Button, Carousel, Modal, ModalBody } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import {
-  CATEGORY_TYPE_TICKETS,
-  CATEGORY_TYPE_BOOKINGS,
-  CATEGORY_TYPE_MENU_ITEMS,
-  CATEGORY_TYPE_GAME,
-  CATEGORY_TYPE_FIXED_DURATION,
-  CategoryType,
-} from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-
-import ModalHeader from "react-bootstrap/ModalHeader";
-import ModalTitle from "react-bootstrap/ModalTitle";
-import Col from "react-bootstrap/Col";
-import Icon from "../../static/Icon";
-import { ProductSetLoadingContext } from "./context";
-
-const CATEGORY_TYPES_NAMES = {
-  menuItems: CATEGORY_TYPE_MENU_ITEMS,
-  tickets: CATEGORY_TYPE_TICKETS,
-  bookings: CATEGORY_TYPE_BOOKINGS,
-  game: CATEGORY_TYPE_GAME,
-  fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
-} as const;
-
-type CategoryConfig = { label: string; icon: string };
-
-const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.tickets]: {
-    label: "tickets",
-    icon: "ticket-alt",
-  },
-  [CATEGORY_TYPES_NAMES.bookings]: {
-    label: "bookings",
-    icon: "calendar",
-  },
-  [CATEGORY_TYPES_NAMES.menuItems]: {
-    label: "menuItems",
-    icon: "bars",
-  },
-};
-
-const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.game]: {
-    label: "game",
-    icon: "bowling-ball",
-  },
-  [CATEGORY_TYPES_NAMES.fixedDuration]: {
-    label: "fixedDuration",
-    icon: "calendar",
-  },
-};
-
-export interface SelectCategoryModalProps {
-  isVisible: boolean;
-  onHide: () => void;
-  onCategorySelect: (category: CategoryType) => void;
-}
-
-export function SelectCategoryModal({
-  isVisible,
-  onHide,
-  onCategorySelect,
-}: SelectCategoryModalProps) {
-  const { t } = useTranslation(["Design"]);
-  const { providerHasBookingManagement } = useContext(ProductSetLoadingContext);
-
-  const mainCategories = Object.keys(MAIN_CATEGORIES) as CategoryType[];
-  const bookingSubcategories = Object.keys(
-    BOOKING_SUBCATEGORIES
-  ) as CategoryType[];
-
-  const [selectedCategory, setSelectedCategory] = useState<CategoryType | null>(
-    null
-  );
-  const isBookingsSelected = selectedCategory === CATEGORY_TYPE_BOOKINGS;
-
-  const [activeCarouselIndex, setActiveCarouselIndex] = useState(0);
-
-  const categorySelectHandler = (category: CategoryType) => {
-    if (providerHasBookingManagement && category === CATEGORY_TYPE_BOOKINGS) {
-      setSelectedCategory(category);
-      setActiveCarouselIndex(1);
-
-      return;
-    }
-    setSelectedCategory(null);
-    setActiveCarouselIndex(0);
-    onCategorySelect(category);
-    onHide();
-  };
-
-  return (
-    <Modal
-      size="lg"
-      centered
-      show={isVisible}
-      onHide={onHide}
-      className="p-3 border-0"
-      animation={false}
-      contentClassName="rounded"
-    >
-      <ModalHeader className="align-items-center border-0">
-        <ModalTitle as="h5">{t("Design:selectCategory")}</ModalTitle>
-
-        <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <Icon type="times" height="1.2rem" />
-        </Button>
-      </ModalHeader>
-
-      <ModalBody>
-        <Carousel
-          interval={null}
-          keyboard={false}
-          indicators={isBookingsSelected}
-          activeIndex={activeCarouselIndex}
-          controls={false}
-        >
-          <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
-              {mainCategories.map((categoryType) => {
-                const { label, icon } = MAIN_CATEGORIES[categoryType];
-
-                return (
-                  <Col key={label}>
-                    <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => categorySelectHandler(categoryType)}
-                      active={selectedCategory === categoryType}
-                    >
-                      {typeof icon === "string" ? (
-                        <Icon type={icon} color="#0e8ce2" height="2rem" />
-                      ) : (
-                        icon
-                      )}
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
-                    </Button>
-                  </Col>
-                );
-              })}
-            </div>
-          </Carousel.Item>
-          <Carousel.Item>
-            <div className="d-flex flex-row flex-wrap p-4 justify-content-between mb-6">
-              {bookingSubcategories.map((categoryType) => {
-                const { label, icon } = BOOKING_SUBCATEGORIES[categoryType];
-
-                return (
-                  <Col key={label}>
-                    <Button
-                      variant="outline-light"
-                      className="d-flex justify-content-center align-items-center flex-column w-100 py-6 rounded"
-                      role="button"
-                      tabIndex={0}
-                      onClick={() => categorySelectHandler(categoryType)}
-                      active={selectedCategory === categoryType}
-                    >
-                      <Icon type={icon} color="#0e8ce2" height="2rem" />
-                      <h6 className="text-dark mt-3">{t(label)}</h6>
-                    </Button>
-                  </Col>
-                );
-              })}
-            </div>
-          </Carousel.Item>
-        </Carousel>
-
-        {isBookingsSelected && (
-          <Button
-            size="sm"
-            className={`carousel-control-button ${
-              activeCarouselIndex ? "left" : "right"
-            }`}
-            onClick={() => setActiveCarouselIndex((prev) => (prev ? 0 : 1))}
-          >
-            <Icon
-              type={activeCarouselIndex ? "arrow-left" : "arrow-right"}
-              height="1rem"
-            />
-          </Button>
-        )}
-      </ModalBody>
-    </Modal>
-  );
-}

package/src/product-set/form/StepsControl.tsx

@@ -1,161 +0,0 @@
-import React, { useEffect, useState } from "react";
-import { useFieldArray, useFormContext, Controller } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import Badge from "react-bootstrap/Badge";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-
-import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
-import { SortableTree } from "../../sortable-tree";
-import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
-import { CreateProductSetItem } from "../item/CreateProductSetItem";
-import { StepControl } from "../step/StepControl";
-import { Step } from "../types";
-import { ProductCategoriesControl } from "./ProductCategoriesControl";
-import { ProductSetFormValues } from "./ProductSetForm";
-
-// @TODO not for first release
-// import Popover from "./ProductSetFormPopover";
-
-interface StepsControlProps {
-  isLoading: boolean;
-}
-
-export function StepsControl({ isLoading }: StepsControlProps) {
-  const form = useFormContext<ProductSetFormValues>();
-  const { t } = useTranslation("Design");
-  const [showStepModal, setShowStepModal] = useState(false);
-
-  const {
-    control,
-    formState: { errors, isSubmitting },
-    clearErrors,
-    getValues,
-    setFocus,
-  } = form;
-
-  const { fields, append, remove } = useFieldArray({
-    name: "steps",
-    control,
-    keyName: "_id",
-  });
-
-  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
-    fieldName: "steps",
-    remove,
-  });
-
-  useEffect(() => {
-    if (!isSubmitting) {
-      return;
-    }
-    setShowStepModal(!isSubmitting);
-  }, [isSubmitting]);
-
-  const getDefaultStepsValues = (): Step => ({
-    id: null,
-    name: `${t("step")} ${fields.length + 1}`,
-    productCategories: [],
-    weight: 0,
-    hasMap: false,
-    venueMapSetId: null,
-  });
-
-  const isFirstStepAdded = fields.length === 1;
-
-  return (
-    <>
-      {fields.map((step, index) => {
-        const stepFieldName = `steps.${index}` as const;
-
-        const stepData = getValues(stepFieldName);
-
-        return (
-          <Controller
-            key={`step-${step._id}`}
-            name={`${stepFieldName}.name` as const}
-            control={control}
-            rules={{
-              required: t("Validation:fieldRequired", {
-                attribute: t("name"),
-              }) as string,
-            }}
-            render={({ field: { value, onChange } }) => (
-              <SortableTree.Item
-                id={step._id}
-                title={value}
-                badge={<Badge className="step-badge">{t("step")}</Badge>}
-                isExpanded={isFirstStepAdded || !!errors.steps?.[index]}
-                isInvalid={!!errors.steps?.[index]}
-                isIconInHeader={false}
-                modalLabel={t("addNewStep")}
-                modalClass={ProductSetModalClasses.step}
-                isNewAdded={showStepModal}
-                edit={() => edit(index)}
-                cancelChanges={() => cancelChanges(index)}
-                subTitle={
-                  <div className="product-set-badges-container">
-                    <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
-                    <span>
-                      {stepData.productCategories?.length} {t("categories")}
-                    </span>
-                  </div>
-                }
-                treeLineIconColor="#D52902"
-                body={
-                  <StepControl
-                    isLoading={isLoading}
-                    stepIndex={index}
-                    stepName={value}
-                    onStepNameChange={onChange}
-                  />
-                }
-                onDelete={() => remove(index)}
-                // preItem={<Popover className="d-none d-sm-block" />}
-                sortableItems={
-                  step.productCategories
-                    ? step.productCategories.map(({ id }) => String(id))
-                    : []
-                }
-                validate={() => {
-                  // @TODO investigate why form return true in case
-                  // when required field not filled. Looks like
-                  // we cann't use default hookForm trigger function
-                  // because we have venueMap outside this form.
-                  // So before closing we need to check directly by
-                  // error on name field. Instead of run trugger.
-                  const error = errors.steps?.[index]?.name;
-
-                  if (error) {
-                    setFocus(`${stepFieldName}.name` as const);
-                  }
-
-                  return Promise.resolve(!error);
-                }}
-                saveValidField={saveValidField}
-              >
-                <ProductCategoriesControl
-                  isLoading={isLoading}
-                  stepIndex={index}
-                />
-              </SortableTree.Item>
-            )}
-          />
-        );
-      })}
-
-      <CreateProductSetItem
-        title={t("addStep")}
-        onClick={() => {
-          append(getDefaultStepsValues());
-          setShowStepModal(true);
-          if (errors.steps?.type === HookFormService.manualErrorType) {
-            clearErrors("steps");
-          }
-        }}
-      />
-      <div className="manual-form-error">
-        {errors.steps && errors.steps.message}
-      </div>
-    </>
-  );
-}

package/src/product-set/form/SubProductsControl.tsx

@@ -1,81 +0,0 @@
-/* eslint-disable no-console */
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-import { uniqueId } from "lodash";
-import React from "react";
-import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
-import { SortableTree } from "../../sortable-tree";
-import { ProductControl, ProductControlProps } from "../product";
-import { ProductSetFormValues } from "./ProductSetForm";
-// @TODO not for first release
-// import Popover from "./ProductSetFormPopover";
-
-interface SubProductsControlProps {
-  quantityType: ProductControlProps<ProductSetFormValues>["quantityType"];
-  stepIndex: number;
-  productCategoryIndex: number;
-  productIndex: number;
-  isLoading: boolean;
-}
-
-export function SubProductsControl({
-  isLoading,
-  quantityType,
-  stepIndex,
-  productCategoryIndex,
-  productIndex,
-}: SubProductsControlProps) {
-  const form = useFormContext<ProductSetFormValues>();
-  const { fields, append } = useFieldArray({
-    // this might lead to unexpected issues when formatted
-    // eslint-disable-next-line max-len
-    name: `steps.${stepIndex}.productCategories.${productCategoryIndex}.products.${productIndex}.subProducts` as "steps.0.productCategories.0.products.0.subProducts",
-    control: form.control,
-    keyName: "id",
-  });
-
-  const { steps } = useWatch({ control: form.control });
-  const subProducts =
-    steps[stepIndex].productCategories[productCategoryIndex].products[
-      productIndex
-    ]?.subProducts;
-
-  const visible = false;
-
-  return visible ? (
-    <SortableTree items={fields} onDragEnd={() => console.log("drag end")}>
-      {fields.map((subProduct, index) => {
-        return (
-          <SortableTree.Item
-            key={`sub-product-${subProduct.id}-${index}`}
-            id={subProduct.id}
-            title={subProduct.name}
-            body={
-              <ProductControl<ProductSetFormValues>
-                isLoading={isLoading}
-                quantityType={quantityType}
-                allowDeposits={false}
-                hasBookingManagement={false}
-                fieldNamePrefix={
-                  // eslint-disable-next-line max-len
-                  `steps.${stepIndex}.productCategories.${productCategoryIndex}.products.${productIndex}.subProducts.${index}` as const
-                }
-                onProductNameChange={() => {}}
-                productName=""
-                onCopy={() => {
-                  const subProductCopy = {
-                    ...subProducts[index],
-                    id: parseInt(uniqueId(), 10),
-                    name: `${subProduct.name} copy`,
-                    images: subProducts[index]?.images as Image[],
-                  };
-                  append(subProductCopy);
-                }}
-              />
-            }
-            // preItem={<Popover />}
-          />
-        );
-      })}
-    </SortableTree>
-  ) : null;
-}

package/src/product-set/form/VenueMapSetModal.tsx

@@ -1,225 +0,0 @@
-import React, { useCallback, useContext, useMemo } from "react";
-import { Modal, Button, Form } from "react-bootstrap";
-import clsx from "clsx";
-import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { VenueMap } from "@licklist/core/dist/DataMapper/Product/VenueMapDataMapper";
-import { VenueMapPoint } from "@licklist/core/dist/DataMapper/Product/VenueMapPointDataMapper";
-import { WarningMessage } from "../../static";
-import { ProductSetLoadingContext } from "./context";
-import { ProductSetFormValues } from "./ProductSetForm";
-import { VenueMapsControl } from "./VenueMapsControl";
-import { ProductCategory } from "../types";
-
-type VenueMapSetModalProps = {
-  isVisible: boolean;
-  setIsVisible: (value: boolean) => void;
-  stepIndex: number;
-};
-
-export const VenueMapSetModal = ({
-  isVisible,
-  setIsVisible,
-  stepIndex,
-}: VenueMapSetModalProps) => {
-  const { t } = useTranslation(["Design", "Validation"]);
-  const { venueMapSets = [], providerHasMap } = useContext(
-    ProductSetLoadingContext
-  );
-  const {
-    register,
-    formState: { errors },
-    watch,
-    setValue,
-    trigger,
-  } = useFormContext<ProductSetFormValues>();
-
-  const key = `steps.${stepIndex}.venueMapSetId` as const;
-  const productPointsKey = `steps.${stepIndex}.pointProducts` as const;
-
-  const venueMapSetId: number | null = watch(key) || null;
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const productCategories: ProductCategory[] =
-    watch(`steps.${stepIndex}.productCategories` as const) || [];
-
-  const pointProducts: Partial<PointProduct>[] = watch(productPointsKey) || [];
-
-  const onCloseModal = () => {
-    setIsVisible(false);
-  };
-
-  const onSubmitModal = async () => {
-    const isValid = await trigger([key, productPointsKey]);
-
-    if (!isValid) {
-      return;
-    }
-
-    setIsVisible(false);
-  };
-
-  const onPointProductsChange = useCallback(
-    (nextPointProducts: Partial<PointProduct>[]) => {
-      setValue(productPointsKey, nextPointProducts as never);
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-
-  const products = useMemo(() => {
-    if (!productCategories || !productCategories.length) {
-      return [];
-    }
-
-    return productCategories.reduce(
-      (prevProducts, currentCategory: ProductCategory) => {
-        return [...prevProducts, ...(currentCategory.products || [])];
-      },
-      []
-    );
-  }, [productCategories]);
-
-  const venueMaps: VenueMap[] = useMemo(() => {
-    if (!venueMapSetId) {
-      return [];
-    }
-
-    const venueMapSet = venueMapSets.find(
-      (venueMapSet) => Number(venueMapSetId) === venueMapSet.id
-    );
-
-    if (!venueMapSet) {
-      return [];
-    }
-
-    return venueMapSet.venueMaps;
-  }, [venueMapSetId, venueMapSets]);
-
-  const filteredPointProducts = pointProducts.filter((pointProduct) => {
-    const venueMapsPoints = venueMaps.reduce(
-      (prevPoints: VenueMapPoint[], currentVenueMap) => {
-        return [...prevPoints, ...currentVenueMap.points];
-      },
-      []
-    );
-
-    return venueMapsPoints.find((point) => pointProduct.pointId === point.id);
-  });
-
-  return (
-    <Modal
-      size="lg"
-      show={isVisible}
-      className={clsx(
-        "m-0 edit-product-set-element-modal edit-right-form-modal",
-        "h-100 edit-venue-map-set"
-      )}
-      dialogClassName="edit-event-dialog edit-step-dialog"
-      onHide={onCloseModal}
-    >
-      <div className="edit-step-modal-header">
-        <button
-          className="p-0 cancel-add-step-btn border-0"
-          type="button"
-          onClick={onCloseModal}
-        >
-          <span>{t("Design:cancel")}</span>
-        </button>
-      </div>
-      <Modal.Body as="form" noValidate>
-        <div className="top-label-container">
-          <span>{t("Design:editMap")}</span>
-        </div>
-
-        <Form.Group>
-          <Form.Label className="mt-4">
-            {t("Design:chooseTheVenueMapSet")}
-          </Form.Label>
-          {venueMapSets.length > 0 ? (
-            <Form.Control
-              as="select"
-              {...register(key, {
-                required: Boolean(providerHasMap),
-              })}
-              isInvalid={HookFormService.isInvalid(key, errors)}
-            >
-              <option value="">{t("Design:choose")}</option>
-              {venueMapSets.map((venueMapSet) => (
-                <option value={Number(venueMapSet.id)} key={venueMapSet.id}>
-                  {venueMapSet.name}
-                </option>
-              ))}
-            </Form.Control>
-          ) : (
-            <>
-              <Form.Control
-                as="select"
-                hidden
-                {...register(key, {
-                  required: Boolean(providerHasMap),
-                })}
-                isInvalid={HookFormService.isInvalid(key, errors)}
-              />
-              <WarningMessage message={t("Design:noVenueMapSets")} />
-            </>
-          )}
-          <Form.Control.Feedback type="invalid">
-            {HookFormService.hasError(
-              errors?.steps?.[stepIndex]?.venueMapSetId,
-              "required"
-            ) &&
-              t("Validation:fieldRequired", {
-                attribute: t("Design:venueMapSet"),
-              })}
-          </Form.Control.Feedback>
-          {venueMapSetId && (
-            <>
-              <hr />
-              <VenueMapsControl
-                venueMaps={venueMaps}
-                products={products}
-                pointProducts={pointProducts}
-                onPointProductsChange={onPointProductsChange}
-              />
-            </>
-          )}
-        </Form.Group>
-
-        <Form.Group>
-          <Form.Control
-            hidden
-            custom
-            {...register(productPointsKey, {
-              required:
-                Boolean(providerHasMap) &&
-                Boolean(!filteredPointProducts.length),
-            })}
-            isInvalid={
-              Boolean(providerHasMap) && Boolean(!filteredPointProducts.length)
-            }
-          />
-          <Form.Control.Feedback type="invalid">
-            {errors?.steps?.[stepIndex]?.pointProducts &&
-              t("Validation:fieldMinNumber", {
-                attribute: t("pointProduct"),
-                min: 1,
-              })}
-          </Form.Control.Feedback>
-        </Form.Group>
-
-        <div className="d-flex product-set-element-control-btns justify-content-between">
-          <Button
-            className="step-save-btn mt-4"
-            type="button"
-            onClick={onSubmitModal}
-          >
-            {t("Design:saveAndAdd")}
-          </Button>
-        </div>
-      </Modal.Body>
-    </Modal>
-  );
-};