@licklist/design 0.66.10-dev.0 → 0.66.10-dev.4

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

@@ -0,0 +1,178 @@
+import { useContext, useState } from "react";
+import {
+  ArrayPath,
+  Controller,
+  Path,
+  useFieldArray,
+  useFormContext,
+  useWatch,
+} from "react-hook-form";
+import { Badge } from "react-bootstrap";
+import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import { HookFormService } from "@licklist/plugins";
+import { useTranslation } from "react-i18next";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { ProductSetLoadingContext } from "./context";
+import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
+import { ProductZoneControl, ProductZoneControlValues } from "../product-zone";
+import { CreateProductSetItem } from "../item/CreateProductSetItem";
+import { SortableTree } from "../../sortable-tree";
+import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
+
+interface ProductZonesControlProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides: boolean;
+  categoryType?: CategoryType;
+}
+
+const getDefaultProductZone = (): ProductZoneControlValues => ({
+  id: null,
+  zoneId: null,
+  capacity: null,
+  duration: null,
+  subSlots: null,
+  offset: null,
+  pause: null,
+  serviceTime: null,
+});
+
+export const ProductZonesControl = <T extends FormValues>({
+  isOverrides,
+  fieldNamePrefix,
+  categoryType,
+}: ProductZonesControlProps<T>) => {
+  const [showProductZoneModal, setShowProductZoneModal] = useState(false);
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+
+  const {
+    control,
+    formState: { errors },
+    trigger,
+    clearErrors,
+  } = useFormContext<T>();
+
+  const productZonesFieldName =
+    `${fieldNamePrefix}.productZones` as ArrayPath<T>;
+
+  const { fields, append, remove } = useFieldArray({
+    name: productZonesFieldName,
+    control,
+    keyName: "_id",
+    rules: {
+      required: t("Validation:fieldMinNumber", {
+        attribute: t("zones"),
+        min: 1,
+      }) as string,
+      minLength: 1,
+    },
+  });
+
+  const { zones = [] } = useContext(ProductSetLoadingContext);
+
+  const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
+    fieldName: productZonesFieldName,
+    remove,
+    isOverrides,
+  });
+
+  const productZonesError = HookFormService.getErrors<T>(
+    `${productZonesFieldName}.root` as Path<T>,
+    errors,
+  );
+
+  const zoneCapacity = useWatch({
+    control,
+    name: [
+      ...fields.map(
+        (_, index) => `${productZonesFieldName}.${index}.capacity` as const,
+      ),
+    ],
+  });
+
+  const zoneDuration = useWatch({
+    control,
+    name: [
+      ...fields.map(
+        (_, index) => `${productZonesFieldName}.${index}.duration` as const,
+      ),
+    ],
+  });
+
+  const onZoneSettingRemove = (index: number) => {
+    remove(index);
+  };
+
+  return (
+    <>
+      {fields.map((productZones, index) => (
+        <Controller
+          key={productZones._id}
+          control={control}
+          name={`${productZonesFieldName}.${index}.zoneId` as const}
+          rules={{
+            required: t("Validation:fieldRequired", {
+              attribute: t("zone"),
+            }) as string,
+          }}
+          render={({ field: { value } }) => (
+            <SortableTree.Item
+              key={`productZones-${productZones._id}`}
+              id={String(productZones._id)}
+              title={zones.find((zone) => zone.id === Number(value))?.name}
+              badge={
+                <Badge className="product-zone-badge">{t("productZone")}</Badge>
+              }
+              isIconInHeader={false}
+              cancelChanges={() => cancelChanges(index)}
+              edit={() => edit(index)}
+              subTitle={
+                <div className="product-set-badges-container">
+                  <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                  <span>
+                    {zoneCapacity[index] &&
+                      `${t("Cap")}: ${zoneCapacity[index]}; `}
+                    {`${t("Dur")}: ${zoneDuration[index]}`}
+                  </span>
+                </div>
+              }
+              modalLabel={t("addAZone")}
+              modalClass={ProductSetModalClasses.productZones}
+              isNewAdded={showProductZoneModal}
+              shouldExpand={false}
+              body={
+                <ProductZoneControl
+                  isOverrides={isOverrides}
+                  categoryType={categoryType}
+                  productZonesFieldName={productZonesFieldName}
+                  fieldNamePrefix={
+                    `${productZonesFieldName}.${index}` as Path<T>
+                  }
+                />
+              }
+              onDelete={() => onZoneSettingRemove(index)}
+              validate={() => trigger(`${productZonesFieldName}.${index}`)}
+              saveValidField={saveValidField}
+            />
+          )}
+        />
+      ))}
+      <CreateProductSetItem
+        title={t("addZone")}
+        onClick={() => {
+          // @TODO after updating react hook form fix issue with this type
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-expect-error
+          append(getDefaultProductZone());
+          setShowProductZoneModal(true);
+
+          if (productZonesError) {
+            clearErrors(productZonesFieldName);
+          }
+        }}
+      />
+      <div className="manual-form-error">{productZonesError}</div>
+    </>
+  );
+};

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

@@ -14,7 +14,6 @@ import { generateUuid } from "@licklist/core/dist/Services";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 
 import { CategoryType } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { ProductControl, ProductControlProps, ProductSetFormValues } from "..";
 import { SortableTree } from "../../sortable-tree";
 import { CreateProductSetItem } from "../item/CreateProductSetItem";
@@ -33,7 +32,6 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
-  zones?: Zone[];
   isOverrides?: boolean;
   isEventEditProductSet?: boolean;
   isCreateNewOverrides?: boolean;
@@ -50,8 +48,6 @@ const getDefaultProductValue = (sort: number): Product => ({
   minQuantity: null,
   maxQuantity: null,
   totalQuantity: 0,
-  capacity: 0,
-  duration: 0,
   isAvailable: true,
   isSoldOut: false,
   isRequired: false,
@@ -62,14 +58,9 @@ const getDefaultProductValue = (sort: number): Product => ({
   originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
-  zoneId: null,
   subProducts: [],
   images: [],
   uuid: generateUuid(),
-  subSlots: null,
-  offset: null,
-  pause: null,
-  serviceTime: null,
   sort,
 });
 
@@ -80,7 +71,6 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
-  zones,
   isOverrides,
   isEventEditProductSet,
   isCreateNewOverrides,
@@ -99,12 +89,6 @@ export function ProductsControl({
     getValues,
   } = form;
 
-  const zoneId = watch(
-    `steps.${stepIndex}.productCategories.${productCategoryIndex}.zoneId`,
-  );
-
-  const catergoryZone = zones?.find((zone) => zone.id === Number(zoneId));
-
   const productControlFieldName =
     `steps.${stepIndex}.productCategories.${productCategoryIndex}.products` as const;
 
@@ -275,7 +259,6 @@ export function ProductsControl({
                       onProductNameChange={onChange}
                       hasTicket={hasTicket}
                       categoryType={categoryType}
-                      zoneDuration={catergoryZone?.defaultDuration}
                       isOverrides={
                         isNewProductOverrides || isOverridesProductSet
                       }

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

@@ -1,16 +1,11 @@
 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 {
@@ -44,14 +39,14 @@ import {
   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 { BooleanSwitch } from "../../static";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { ProductSetLoadingContext } from "../form/context";
 import {
   ProductBookingManagementControl,
   ProductBookingManagementControlProps,
-  ProductBookingManagementControlValues,
 } from "./booking-management/ProductBookingManagementControl";
 import {
   ProductDepositControl,
@@ -62,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;
@@ -98,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>
@@ -120,7 +111,6 @@ export interface ProductControlProps<T>
   hasTicket?: boolean;
   categoryType?: CategoryType;
   isOverrides?: boolean;
-  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -134,7 +124,6 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
-  zoneDuration,
   isOverrides = false,
 }: ProductControlProps<T>) {
   const {
@@ -144,11 +133,9 @@ 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);
@@ -156,21 +143,16 @@ export function ProductControl<T extends FormValues>({
   const isUnlimited = Boolean(
     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") },
@@ -200,18 +182,6 @@ export function ProductControl<T extends FormValues>({
     },
     [handleImageUploading],
   );
-
-  const onChangeGameCapacity = (value: number) => {
-    if (!zoneDuration) {
-      return;
-    }
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      /* @ts-expect-error 6385 */
-      (value * zoneDuration) as UnpackNestedValue<PathValue<T, Path<T>>>,
-    );
-  };
-
   const onImageRemove = useCallback(
     (id, path) => {
       handleImageRemove(String(id), path);
@@ -240,20 +210,6 @@ export function ProductControl<T extends FormValues>({
     }
   }, [images, fieldNamePrefix, setValue]);
 
-  useEffect(() => {
-    if (!disabledDuration) {
-      trigger(`${fieldNamePrefix}.duration` as Path<T>);
-      return;
-    }
-    setValue(
-      `${fieldNamePrefix}.duration` as Path<T>,
-      /* @ts-expect-error 6385 */
-      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 (
@@ -396,164 +352,17 @@ export function ProductControl<T extends FormValues>({
               )}
             </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,
-              )}
-            </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}
@@ -640,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>