@licklist/design 0.66.12 → 0.66.13

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 {
   FieldNamePrefixPath,
@@ -44,16 +39,14 @@ import {
   Image,
   IMAGE_TYPE_IMAGE,
 } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-
+import { checkIfZoneCategory } from "@licklist/plugins";
 import { FileUpload } from "../../file-upload";
-import { BooleanSwitch, FormNumberInput } from "../../static";
-import Icon from "../../static/Icon";
+import { BooleanSwitch, Icon } 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,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);
@@ -158,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") },
@@ -202,17 +182,6 @@ export function ProductControl<T extends FormValues>({
     },
     [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);
@@ -240,19 +209,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>,
-      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 (
@@ -395,164 +351,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}
@@ -639,67 +448,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>
 

package/src/product-set/product/advanced-options/AdvancedOptions.tsx

@@ -0,0 +1,168 @@
+import React, { useContext } from "react";
+import { Col, Form } from "react-bootstrap";
+import { Controller, Path, useFormContext } from "react-hook-form";
+import { HookFormService } from "@licklist/plugins";
+import { useId } from "@react-aria/utils";
+import { useTranslation } from "react-i18next";
+import { PRODUCT_DEfAULT_COLORS } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { ProductPriceControl } from "../price/ProductPriceControl";
+import { PropertyControl } from "../../../snippet";
+
+import { BooleanSwitch } from "../../../static";
+import { ProductSetLoadingContext } from "../../form/context";
+
+interface AdvancedOptionsProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides: boolean;
+  isLoading: boolean;
+}
+
+export const AdvancedOptions = <T extends FormValues>({
+  fieldNamePrefix,
+  isOverrides,
+  isLoading,
+}: AdvancedOptionsProps<T>) => {
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+
+  const {
+    register,
+    control,
+    formState: { errors },
+  } = useFormContext<T>();
+
+  const { productGroupList } = useContext(ProductSetLoadingContext);
+
+  const isRequiredId = useId();
+  const productGroupId = useId();
+  const termsAndConditionsId = useId();
+  const hasSpecialNotesId = useId();
+  const minSpendId = useId();
+
+  return (
+    <>
+      <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>
+
+      <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 lg={8} md={8} className="pl-0">
+        <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>
+
+      <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>
+    </>
+  );
+};

package/src/product-set/product/advanced-options/index.ts

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

package/src/product-set/product/fixed-duration-fields/FixedDurationOptions.tsx

@@ -19,7 +19,7 @@ export const FixedDurationOptions = <T,>({
 
   return (
     <>
-      <Row>
+      <Row className="mt-4">
         <Col lg={4} md={4} sm={6}>
           <FormNumberInput
             fieldName={`${fieldNamePrefix}.subSlots`}

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { Form, Col, Collapse, InputGroup, Row } from "react-bootstrap";
 import { Controller, useFormContext, useWatch } from "react-hook-form";
 import { useTranslation } from "react-i18next";
@@ -13,12 +13,10 @@ import {
   CATEGORY_TYPE_TICKETS,
   CATEGORY_TYPE_FIXED_DURATION,
 } from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
-import { Zone } from "@licklist/core/dist/DataMapper/Provider/ZoneDataMapper";
 import { Switch, BooleanSwitch } from "../../static";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 import { IsDeletableEvent, ProductCategory } from "../types";
 import { ReactComponent as IncrementIcon } from "../../assets/dashboard/increment.svg";
-import { ProductSetLoadingContext } from "../form/context";
 
 export interface ProductCategoryControlValues extends FormValues {
   id: number;
@@ -39,7 +37,6 @@ export interface ProductCategoryControlValues extends FormValues {
   weight?: number;
   isReusable?: boolean;
   termsAndConditions?: string;
-  zoneId?: Zone["id"];
   sort: number | null;
 }
 
@@ -102,14 +99,10 @@ export function ProductCategoryControl({
   const isTimeRelatedId = useId();
   const collectUserInfoId = useId();
   const hasTicketId = useId();
-  const zoneId = useId();
   const overallQuantityId = useId();
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones = [] } = useContext(
-    ProductSetLoadingContext
-  );
 
   // @TODO not for first release
   // const hasBookingManagementId = useId();
@@ -129,10 +122,6 @@ export function ProductCategoryControl({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [maxSubItems, fieldNamePrefix]);
 
-  const isZoneCategory =
-    category.type === CATEGORY_TYPE_FIXED_DURATION ||
-    category.type === CATEGORY_TYPE_GAME;
-
   return (
     <>
       <Col md={12} xl className="p-0">
@@ -387,54 +376,6 @@ export function ProductCategoryControl({
             </Form.Group>
           </Col>
         </Row>
-
-        {isZoneCategory && (
-          <>
-            <Row>
-              <Col>
-                <Form.Group controlId={zoneId}>
-                  <Form.Label>{t("Design:zone")}</Form.Label>
-                  <Controller
-                    control={control}
-                    name={`${fieldNamePrefix}.zoneId`}
-                    render={({ field }) => (
-                      <Form.Control
-                        as="select"
-                        disabled={isOverride}
-                        isInvalid={HookFormService.isInvalid<ProductSetFormValues>(
-                          `${fieldNamePrefix}.zoneId`,
-                          errors
-                        )}
-                        {...field}
-                      >
-                        <option value={null}>{t("Design:choose")}</option>
-                        {zones.map((zone) => (
-                          <option key={zone.id} value={zone.id}>
-                            {zone.name}
-                          </option>
-                        ))}
-                      </Form.Control>
-                    )}
-                    rules={{
-                      required: {
-                        value: providerHasBookingManagement,
-                        message: t("Validation:fieldRequired", {
-                          attribute: t("zone"),
-                        }),
-                      },
-                    }}
-                  />
-                  <Form.Control.Feedback type="invalid">
-                    {HookFormService.getErrors<ProductSetFormValues>(
-                      `${fieldNamePrefix}.zoneId`,
-                      errors
-                    )}
-                  </Form.Control.Feedback>
-                </Form.Group>
-              </Col>
-            </Row>
-          </>
-        )}
       </Col>
 
       <Col md={12} xl className="p-0">