@licklist/design 0.66.11 → 0.66.12-dev.1

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useMemo } from "react";
+import { useCallback, useContext, useMemo } from "react";
 import { Modal, Button, Form } from "react-bootstrap";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -26,7 +26,7 @@ export const VenueMapSetModal = ({
 }: VenueMapSetModalProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
   const { venueMapSets = [], providerHasMap } = useContext(
-    ProductSetLoadingContext
+    ProductSetLoadingContext,
   );
   const {
     register,
@@ -66,7 +66,7 @@ export const VenueMapSetModal = ({
       setValue(productPointsKey, nextPointProducts as never);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
+    [],
   );
 
   const products = useMemo(() => {
@@ -78,7 +78,7 @@ export const VenueMapSetModal = ({
       (prevProducts, currentCategory: ProductCategory) => {
         return [...prevProducts, ...(currentCategory.products || [])];
       },
-      []
+      [],
     );
   }, [productCategories]);
 
@@ -88,7 +88,7 @@ export const VenueMapSetModal = ({
     }
 
     const venueMapSet = venueMapSets.find(
-      (venueMapSet) => Number(venueMapSetId) === venueMapSet.id
+      (venueMapSet) => Number(venueMapSetId) === venueMapSet.id,
     );
 
     if (!venueMapSet) {
@@ -103,7 +103,7 @@ export const VenueMapSetModal = ({
       (prevPoints: VenueMapPoint[], currentVenueMap) => {
         return [...prevPoints, ...currentVenueMap.points];
       },
-      []
+      [],
     );
 
     return venueMapsPoints.find((point) => pointProduct.pointId === point.id);
@@ -115,7 +115,7 @@ export const VenueMapSetModal = ({
       show={isVisible}
       className={clsx(
         "m-0 edit-product-set-element-modal edit-right-form-modal",
-        "h-100 edit-venue-map-set"
+        "h-100 edit-venue-map-set",
       )}
       dialogClassName="edit-event-dialog edit-step-dialog"
       onHide={onCloseModal}
@@ -169,7 +169,7 @@ export const VenueMapSetModal = ({
           <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(
               errors?.steps?.[stepIndex]?.venueMapSetId,
-              "required"
+              "required",
             ) &&
               t("Validation:fieldRequired", {
                 attribute: t("Design:venueMapSet"),

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "react-bootstrap";
 import { VenueMap } from "@licklist/core/dist/DataMapper/Product/VenueMapDataMapper";

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

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   SetStateAction,
   createContext,
@@ -27,7 +27,7 @@ interface LoadingContext {
 }
 
 export const ProductSetLoadingContext = createContext<LoadingContext | null>(
-  null
+  null,
 );
 
 type ProductSetContextProviderProps = PropsWithChildren<

package/src/product-set/item/CreateProductSetItem.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import clsx from "clsx";
-import { Icon } from "../../static";
+import { FaPlus } from "react-icons/fa";
 
 interface CreateProductSetItemProps {
   onClick: () => void;
@@ -21,17 +20,12 @@ export function CreateProductSetItem({
         "product-set-item-wrapper w-100",
         `product-set-item-wrapper-${title.toLowerCase().split(" ")[1]}`,
         isOverride && "bg-light",
-        className
+        className,
       )}
       onClick={onClick}
       type="button"
     >
-      <Icon
-        type="plus"
-        height="1.25rem"
-        width="1.25rem"
-        className="rounded product-set-item-icon"
-      />
+      <FaPlus size={20} className="rounded product-set-item-icon" />
       <span>{title}</span>
     </button>
   );

package/src/product-set/popover/ProductSetPopover.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Meta } from "@storybook/react";
 import { Tab, Tabs } from "react-bootstrap";
 import { useClickAway } from "react-use";

package/src/product-set/popover/ProductSetPopover.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable react/display-name */
 import { useId } from "@react-aria/utils";
-import React, { forwardRef, PropsWithChildren } from "react";
+import { forwardRef, PropsWithChildren } from "react";
 import Button from "react-bootstrap/Button";
 import { Placement } from "react-bootstrap/esm/Overlay";
 import OverlayTrigger, {
   OverlayTriggerType,
 } from "react-bootstrap/OverlayTrigger";
 import Popover from "react-bootstrap/Popover";
-import { Icon } from "../../static";
+import { FaPlus } from "react-icons/fa";
 
 export type ProductSetPopoverProps = {
   title?: string;
@@ -32,7 +32,7 @@ export const ProductSetPopover = forwardRef<
       children,
       className = "",
     },
-    ref
+    ref,
   ) => {
     const popoverId = useId();
 
@@ -63,10 +63,10 @@ export const ProductSetPopover = forwardRef<
               }
             }}
           >
-            <Icon type="plus" width=".7rem" />
+            <FaPlus size={12} />
           </Button>
         </OverlayTrigger>
       </div>
     );
-  }
+  },
 );

package/src/product-set/product/Product.stories.tsx

@@ -4,7 +4,6 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { Meta, Story } from "@storybook/react";
-import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import { SortableTree } from "../../sortable-tree";

package/src/product-set/product/ProductControl.tsx

@@ -1,24 +1,19 @@
 import {
   CategoryType,
   QuantityType,
-  CATEGORY_TYPE_FIXED_DURATION,
-  CATEGORY_TYPE_GAME,
   QUANTITY_TYPE_CONSTANT,
   QUANTITY_TYPE_LIST_DTO,
   QUANTITY_TYPE_RECHARGING,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import {
-  ProductType,
-  PRODUCT_DEfAULT_COLORS,
-} from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import { ProductType } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import clsx from "clsx";
 import {
   FieldNamePrefixPath,
   FormValues,
 } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { useId } from "@react-aria/utils";
-import clsx from "clsx";
-import React, {
+import {
   ChangeEvent,
   useCallback,
   useContext,
@@ -39,21 +34,19 @@ import {
 } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { useImages } from "@licklist/plugins/dist/hooks/Media/useImages";
-
 import {
   Image,
   IMAGE_TYPE_IMAGE,
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-
+import { FaClipboard } from "react-icons/fa";
+import { checkIfZoneCategory } from "@licklist/plugins";
 import { FileUpload } from "../../file-upload";
-import { BooleanSwitch, FormNumberInput } from "../../static";
-import Icon from "../../static/Icon";
+import { BooleanSwitch } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { ProductSetLoadingContext } from "../form/context";
 import {
   ProductBookingManagementControl,
   ProductBookingManagementControlProps,
-  ProductBookingManagementControlValues,
 } from "./booking-management/ProductBookingManagementControl";
 import {
   ProductDepositControl,
@@ -64,20 +57,19 @@ import {
   ProductQuantityControl,
   ProductQuantityRechargingControl,
 } from "./quantity";
-import { PropertyControl } from "../../snippet";
 import { TipTapEditor } from "../../tiptap-editor";
 import { IsDeletableEvent } from "../types";
-import { FixedDurationOptions } from "./fixed-duration-fields";
-import { ProductDurationControl } from "./duration";
 import { ProductPriceControl } from "./price";
 import { MAX_PRODUCT_DESCRIPTION_CHARACTERS_LENGTH } from "./constants";
+import { ProductZoneControlValues } from "../product-zone";
+import { AdvancedOptions } from "./advanced-options";
+import { ProductZonesControl } from "../form/ProductZonesControl";
 
 // TO DO refactor this file
 // and add correct types
 export interface ProductControlValues
   extends FormValues,
-    ProductDepositControlValues,
-    ProductBookingManagementControlValues {
+    ProductDepositControlValues {
   name: string;
   productGroupId: number;
   description: string;
@@ -100,12 +92,9 @@ export interface ProductControlValues
   tierId?: number;
   images: Image[] | null;
   uuid: string;
-  subSlots: number;
-  pause: number;
-  offset: number;
-  serviceTime: number;
   sort: number | null;
   color?: string;
+  productZones?: ProductZoneControlValues[];
 }
 
 export interface ProductControlProps<T>
@@ -122,7 +111,6 @@ export interface ProductControlProps<T>
   hasTicket?: boolean;
   categoryType?: CategoryType;
   isOverrides?: boolean;
-  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -136,7 +124,6 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
-  zoneDuration,
   isOverrides = false,
 }: ProductControlProps<T>) {
   const {
@@ -146,33 +133,26 @@ export function ProductControl<T extends FormValues>({
     setValue,
     getValues,
     watch,
-    trigger,
-    clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading, productGroupList } = useContext(ProductSetLoadingContext);
+  const { setLoading } = useContext(ProductSetLoadingContext);
   const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
   const [expanded, setExpanded] = useState(false);
   const [initialImages, setInitialImages] = useState<Image[] | null>(null);
   // @TODO: After checking "isUnlimited" checkbox need to reset field totalQuantity
   const isUnlimited = Boolean(
-    watch(`${fieldNamePrefix}.isUnlimited` as Path<T>)
+    watch(`${fieldNamePrefix}.isUnlimited` as Path<T>),
   );
-  const capacity = watch(`${fieldNamePrefix}.capacity` as Path<T>);
-  const disabledDuration = capacity === "0" || !capacity;
   const advancedId = useId();
   const nameId = useId();
 
-  const productGroupId = useId();
   const descriptionId = useId();
-  const termsAndConditionsId = useId();
   const isAvailableId = useId();
   const isSoldOutId = useId();
-  const isRequiredId = useId();
   const quantitySelectorId = useId();
-  const hasSpecialNotesId = useId();
   const unlimitedQuantityId = useId();
-  const minSpendId = useId();
+
+  const isZoneCategory = checkIfZoneCategory(categoryType);
 
   const quantitySelectorList: SelectItem[] = [
     { id: 1, value: t("quantitySelector") },
@@ -181,7 +161,7 @@ export function ProductControl<T extends FormValues>({
 
   const handleExpand = useCallback(
     () => setExpanded((prevExpanded) => !prevExpanded),
-    []
+    [],
   );
 
   const quantityValue = useWatch({
@@ -200,24 +180,13 @@ export function ProductControl<T extends FormValues>({
     (files: File[]) => {
       handleImageUploading(files, IMAGE_TYPE_IMAGE);
     },
-    [handleImageUploading]
+    [handleImageUploading],
   );
-
-  const onChangeGameCapacity = (value: number) => {
-    if (!zoneDuration) {
-      return;
-    }
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>
-    );
-  };
-
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
     },
-    [handleImageRemove]
+    [handleImageRemove],
   );
   const onFocus = (e) => e.target.select();
 
@@ -235,24 +204,12 @@ export function ProductControl<T extends FormValues>({
     if (Array.isArray(images)) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
-        images as UnpackNestedValue<PathValue<T, Path<T>>>
+        /* @ts-expect-error 6385 */
+        images as UnpackNestedValue<PathValue<T, Path<T>>>,
       );
     }
   }, [images, fieldNamePrefix, setValue]);
 
-  useEffect(() => {
-    if (!disabledDuration) {
-      trigger(`${fieldNamePrefix}.duration` as Path<T>);
-      return;
-    }
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      0 as UnpackNestedValue<PathValue<T, Path<T>>>
-    );
-    clearErrors(`${fieldNamePrefix}.duration` as Path<T>);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [disabledDuration]);
-
   const quantitySelector = quantityValue ?? "1";
   const quantity = QUANTITY_TYPE_LIST_DTO[quantitySelector as string];
   return (
@@ -267,7 +224,7 @@ export function ProductControl<T extends FormValues>({
               onChange={onProductNameChange}
               isInvalid={HookFormService.isInvalid<T>(
                 `${fieldNamePrefix}.name` as Path<T>,
-                errors
+                errors,
               )}
               disabled={isLoading || isOverrides}
               placeholder={t("name")}
@@ -275,7 +232,7 @@ export function ProductControl<T extends FormValues>({
             <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.name` as Path<T>,
-                errors
+                errors,
               )}
             </Form.Control.Feedback>
           </Form.Group>
@@ -307,7 +264,7 @@ export function ProductControl<T extends FormValues>({
           <div className="invalid-feedback field-values-error d-block">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.description` as Path<T>,
-              errors
+              errors,
             )}
           </div>
 
@@ -378,7 +335,7 @@ export function ProductControl<T extends FormValues>({
               {...register(`${fieldNamePrefix}.quantitySelector` as Path<T>)}
               isInvalid={HookFormService.isInvalid<T>(
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
-                errors
+                errors,
               )}
               disabled={isLoading || hasTicket || isOverrides}
             >
@@ -391,174 +348,27 @@ export function ProductControl<T extends FormValues>({
             <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
-                errors
-              )}
-            </Form.Control.Feedback>
-          </Form.Group>
-
-          <PropertyControl<T>
-            item={`${fieldNamePrefix}.color` as Path<T>}
-            label={t("ProductSet:selectColor")}
-            isDisabled={isOverrides}
-            isRequired={false}
-            defaultColors={PRODUCT_DEfAULT_COLORS}
-          />
-
-          <Form.Group controlId={productGroupId}>
-            <Form.Label>{t("productGroup")}</Form.Label>
-            <Form.Control
-              as="select"
-              {...register(`${fieldNamePrefix}.productGroupId` as Path<T>)}
-              isInvalid={HookFormService.isInvalid<T>(
-                `${fieldNamePrefix}.productGroupId` as Path<T>,
-                errors
-              )}
-              disabled={isLoading || isOverrides}
-              defaultValue=""
-            >
-              <option value="">{t("Design:selectProductGroup")}</option>
-              {productGroupList.map((productGroup) => {
-                return (
-                  <option value={productGroup.id} key={productGroup.id}>
-                    {productGroup.value}
-                  </option>
-                );
-              })}
-            </Form.Control>
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors<T>(
-                `${fieldNamePrefix}.productGroupId` as Path<T>,
-                errors
+                errors,
               )}
             </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>
 
-      {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
-        <Row className="align-items-start duration-capacity-container">
-          <ProductDurationControl
+      <Row className="my-4 mx-0 d-flex flex-column">
+        {isZoneCategory && (
+          <ProductZonesControl
+            isOverrides={isOverrides}
             fieldNamePrefix={fieldNamePrefix}
-            disabled={disabledDuration || isOverrides}
+            categoryType={categoryType}
           />
-
-          <Col lg={4} md={4}>
-            <FormNumberInput
-              fieldName={`${fieldNamePrefix}.capacity`}
-              label={t("capacity")}
-              disabled={isOverrides}
-              rules={{
-                min: {
-                  value: 0,
-                  message: t("Validation:fieldMinNumber", {
-                    attribute: t("capacity"),
-                    min: 0,
-                  }) as string,
-                },
-              }}
-            />
-          </Col>
-          {disabledDuration && (
-            <div className="duration-hint duration-capacity-container">
-              {t("Design:forDurationEditing")}
-            </div>
-          )}
-        </Row>
-      )}
-
-      {categoryType === CATEGORY_TYPE_GAME && (
-        <>
-          <Row className="align-items-start duration-capacity-container">
-            <Col lg={4} md={4}>
-              <FormNumberInput
-                fieldName={`${fieldNamePrefix}.capacity`}
-                label={t("capacity")}
-                onChange={onChangeGameCapacity}
-                disabled={isOverrides}
-                rules={{
-                  min: {
-                    value: 0,
-                    message: t("Validation:fieldMinNumber", {
-                      attribute: t("capacity"),
-                      min: 1,
-                    }) as string,
-                  },
-                }}
-              />
-            </Col>
-            <Col lg={4} md={4}>
-              <FormNumberInput
-                fieldName={`${fieldNamePrefix}.duration`}
-                label={t("durationMinutes")}
-                disabled={disabledDuration || isOverrides}
-                rules={{
-                  min: {
-                    value: 0,
-                    message: t("Validation:fieldMinNumber", {
-                      attribute: t("duration"),
-                      min: 0,
-                    }) as string,
-                  },
-                  validate: (val) => {
-                    if (!disabledDuration && (!val || val < 1)) {
-                      return t("Validation:fieldRequired", {
-                        attribute: t("duration"),
-                      }) as string;
-                    }
-                    return true;
-                  },
-                }}
-              />
-            </Col>
-          </Row>
-          {disabledDuration && (
-            <div className="duration-hint pl-0">
-              {t("Design:forDurationEditing")}
-            </div>
-          )}
-        </>
-      )}
-
-      <Row className="mt-4">
-        <Col lg={8} md={8}>
-          <Form.Group controlId={termsAndConditionsId}>
-            <Form.Label>{t("productTermsConditions")}</Form.Label>
-
-            <Controller
-              render={({ field: { value, onChange, name, ref } }) => (
-                <Form.Control
-                  ref={ref}
-                  as="textarea"
-                  rows={3}
-                  value={value as string}
-                  onChange={onChange}
-                  isInvalid={HookFormService.isInvalid<T>(
-                    `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-                    errors
-                  )}
-                  disabled={isLoading || isOverrides}
-                  name={name}
-                />
-              )}
-              control={control}
-              name={`${fieldNamePrefix}.termsAndConditions` as Path<T>}
-            />
-
-            <Form.Control.Feedback type="invalid">
-              {HookFormService.getErrors<T>(
-                `${fieldNamePrefix}.termsAndConditions` as Path<T>,
-                errors
-              )}
-            </Form.Control.Feedback>
-          </Form.Group>
-        </Col>
-
+        )}
         <Col
           lg={4}
           md={4}
           className={clsx(
             "licklist-file-upload-wrapper",
-            isOverrides && "opacity-50"
+            isOverrides && "opacity-50",
           )}
         >
           <FileUpload
@@ -639,67 +449,13 @@ export function ProductControl<T extends FormValues>({
 
       <Col lg={12} md={12} xl className="p-0">
         <Collapse in={expanded}>
+          {/* Div should be here not in component, otherwise component will be always collapsed */}
           <div>
-            <Form.Group
-              controlId={isRequiredId}
-              className="advanced-switch-container"
-            >
-              <Form.Label>{t("isRequired")}</Form.Label>
-
-              <Controller
-                render={({ field: { value, onChange, name } }) => (
-                  <BooleanSwitch
-                    name={name}
-                    value={Boolean(value)}
-                    onChange={onChange}
-                    disabled={isLoading || isOverrides}
-                  />
-                )}
-                control={control}
-                name={`${fieldNamePrefix}.isRequired` as Path<T>}
-              />
-            </Form.Group>
-
-            <Form.Group
-              controlId={hasSpecialNotesId}
-              className="advanced-switch-container"
-            >
-              <Form.Label>{t("hasSpecialNotes")}</Form.Label>
-
-              <Controller
-                render={({ field: { value, onChange, name } }) => (
-                  <BooleanSwitch
-                    name={name}
-                    value={Boolean(value)}
-                    onChange={onChange}
-                    disabled={isLoading || isOverrides}
-                  />
-                )}
-                control={control}
-                name={`${fieldNamePrefix}.hasSpecialNotes` as Path<T>}
-              />
-            </Form.Group>
-            {[CATEGORY_TYPE_GAME, CATEGORY_TYPE_FIXED_DURATION].includes(
-              categoryType
-            ) && (
-              <FixedDurationOptions
-                fieldNamePrefix={fieldNamePrefix}
-                isOverrides={isOverrides}
-              />
-            )}
-            <Form.Group
-              controlId={minSpendId}
-              className="advanced-switch-container"
-            >
-              <ProductPriceControl
-                title={t("minSpend")}
-                isRequired={false}
-                isMoreThanZero
-                allowDeposits={false}
-                isLoading={isLoading || isOverrides}
-                fieldNamePrefix={`${fieldNamePrefix}.minSpend` as Path<T>}
-              />
-            </Form.Group>
+            <AdvancedOptions
+              isOverrides={isOverrides}
+              fieldNamePrefix={fieldNamePrefix}
+              isLoading={isLoading}
+            />
           </div>
         </Collapse>
 
@@ -725,8 +481,7 @@ export function ProductControl<T extends FormValues>({
                 variant="link"
                 className="d-flex align-items-center"
               >
-                <Icon type="clipboard" height="1rem" className="mr-2" />{" "}
-                {t("copy")}
+                <FaClipboard size={16} className="mr-2" /> {t("copy")}
               </Button>
             )}
           </div>