@licklist/design 0.66.12-dev.2 → 0.66.12

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { 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 { forwardRef, PropsWithChildren } from "react";
+import React, { 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 { FaPlus } from "react-icons/fa";
+import { Icon } from "../../static";
 
 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<
               }
             }}
           >
-            <FaPlus size={12} />
+            <Icon type="plus" width=".7rem" />
           </Button>
         </OverlayTrigger>
       </div>
     );
-  },
+  }
 );

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

@@ -4,6 +4,7 @@ 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,19 +1,24 @@
 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 } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
+import {
+  ProductType,
+  PRODUCT_DEfAULT_COLORS,
+} 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 {
+import clsx from "clsx";
+import React, {
   ChangeEvent,
   useCallback,
   useContext,
@@ -34,19 +39,21 @@ 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 } from "../../static";
+import { BooleanSwitch, FormNumberInput } from "../../static";
+import Icon from "../../static/Icon";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { ProductSetLoadingContext } from "../form/context";
 import {
   ProductBookingManagementControl,
   ProductBookingManagementControlProps,
+  ProductBookingManagementControlValues,
 } from "./booking-management/ProductBookingManagementControl";
 import {
   ProductDepositControl,
@@ -57,19 +64,20 @@ 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 {
+    ProductDepositControlValues,
+    ProductBookingManagementControlValues {
   name: string;
   productGroupId: number;
   description: string;
@@ -92,9 +100,12 @@ 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>
@@ -111,6 +122,7 @@ export interface ProductControlProps<T>
   hasTicket?: boolean;
   categoryType?: CategoryType;
   isOverrides?: boolean;
+  zoneDuration?: number;
 }
 
 export function ProductControl<T extends FormValues>({
@@ -124,6 +136,7 @@ export function ProductControl<T extends FormValues>({
   productName,
   hasTicket,
   categoryType,
+  zoneDuration,
   isOverrides = false,
 }: ProductControlProps<T>) {
   const {
@@ -133,26 +146,33 @@ export function ProductControl<T extends FormValues>({
     setValue,
     getValues,
     watch,
+    trigger,
+    clearErrors,
   } = useFormContext<T>();
 
-  const { setLoading } = useContext(ProductSetLoadingContext);
+  const { setLoading, productGroupList } = 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 isZoneCategory = checkIfZoneCategory(categoryType);
+  const minSpendId = useId();
 
   const quantitySelectorList: SelectItem[] = [
     { id: 1, value: t("quantitySelector") },
@@ -161,7 +181,7 @@ export function ProductControl<T extends FormValues>({
 
   const handleExpand = useCallback(
     () => setExpanded((prevExpanded) => !prevExpanded),
-    [],
+    []
   );
 
   const quantityValue = useWatch({
@@ -180,13 +200,24 @@ 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();
 
@@ -204,12 +235,24 @@ export function ProductControl<T extends FormValues>({
     if (Array.isArray(images)) {
       setValue(
         `${fieldNamePrefix}.images` as Path<T>,
-        /* @ts-expect-error 6385 */
-        images as UnpackNestedValue<PathValue<T, Path<T>>>,
+        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 (
@@ -224,7 +267,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")}
@@ -232,7 +275,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>
@@ -264,7 +307,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>
 
@@ -335,7 +378,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}
             >
@@ -348,27 +391,174 @@ export function ProductControl<T extends FormValues>({
             <Form.Control.Feedback type="invalid">
               {HookFormService.getErrors<T>(
                 `${fieldNamePrefix}.quantitySelector` as Path<T>,
-                errors,
+                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
               )}
             </Form.Control.Feedback>
           </Form.Group>
         </Col>
       </Row>
 
-      <Row className="my-4 mx-0 d-flex flex-column">
-        {isZoneCategory && (
-          <ProductZonesControl
-            isOverrides={isOverrides}
+      {categoryType === CATEGORY_TYPE_FIXED_DURATION && (
+        <Row className="align-items-start duration-capacity-container">
+          <ProductDurationControl
             fieldNamePrefix={fieldNamePrefix}
-            categoryType={categoryType}
+            disabled={disabledDuration || isOverrides}
           />
-        )}
+
+          <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
@@ -449,13 +639,67 @@ 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>
-            <AdvancedOptions
-              isOverrides={isOverrides}
-              fieldNamePrefix={fieldNamePrefix}
-              isLoading={isLoading}
-            />
+            <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>
           </div>
         </Collapse>
 
@@ -481,7 +725,8 @@ export function ProductControl<T extends FormValues>({
                 variant="link"
                 className="d-flex align-items-center"
               >
-                <FaClipboard size={16} className="mr-2" /> {t("copy")}
+                <Icon type="clipboard" height="1rem" className="mr-2" />{" "}
+                {t("copy")}
               </Button>
             )}
           </div>

package/src/product-set/product/booking-management/ProductBookingManagement.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import {

package/src/product-set/product/booking-management/ProductBookingManagementControl.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import {
   FieldNamePrefixPath,
@@ -8,7 +9,7 @@ import { Form } from "react-bootstrap";
 import InputGroup from "react-bootstrap/InputGroup";
 import { Controller, Path, useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
-import { FaSortNumericUpAlt } from "react-icons/fa";
+import Icon from "../../../static/Icon";
 import { SelectItem } from "../../../types/generic/SelectItem";
 
 export interface ProductBookingManagementControlValues extends FormValues {
@@ -24,7 +25,7 @@ export interface ProductBookingManagementControlProps<T>
 }
 
 export function ProductBookingManagementControl<T extends FormValues>(
-  props: ProductBookingManagementControlProps<T>,
+  props: ProductBookingManagementControlProps<T>
 ) {
   const { isLoading = false, fieldNamePrefix, zoneList = [] } = props;
   const {
@@ -53,7 +54,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
           {...register(`${fieldNamePrefix}.zoneId` as Path<T>)}
           isInvalid={HookFormService.isInvalid<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
-            errors,
+            errors
           )}
           disabled={isLoading}
         >
@@ -66,7 +67,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
         <Form.Control.Feedback type="invalid">
           {HookFormService.getErrors<T>(
             `${fieldNamePrefix}.zoneId` as Path<T>,
-            errors,
+            errors
           )}
         </Form.Control.Feedback>
       </Form.Group>
@@ -77,7 +78,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
         <InputGroup hasValidation>
           <InputGroup.Prepend>
             <InputGroup.Text>
-              <FaSortNumericUpAlt size={16} />
+              <Icon type="sort-numeric-up-alt" width="1rem" />
             </InputGroup.Text>
           </InputGroup.Prepend>
 
@@ -92,7 +93,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.capacity` as Path<T>,
-                  errors,
+                  errors
                 )}
                 disabled={isLoading}
               />
@@ -114,7 +115,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.capacity` as Path<T>,
-              errors,
+              errors
             )}
           </Form.Control.Feedback>
         </InputGroup>
@@ -135,7 +136,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.duration` as Path<T>,
-                  errors,
+                  errors
                 )}
                 disabled={isLoading}
               />
@@ -152,7 +153,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
                 onChange={onChange}
                 isInvalid={HookFormService.isInvalid<T>(
                   `${fieldNamePrefix}.duration` as Path<T>,
-                  errors,
+                  errors
                 )}
                 disabled={isLoading}
               >
@@ -170,7 +171,7 @@ export function ProductBookingManagementControl<T extends FormValues>(
           <Form.Control.Feedback type="invalid">
             {HookFormService.getErrors<T>(
               `${fieldNamePrefix}.duration` as Path<T>,
-              errors,
+              errors
             )}
           </Form.Control.Feedback>
         </InputGroup>

package/src/product-set/product/deposit/ProductDeposit.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import Form from "react-bootstrap/Form";
 import { FormProvider, useForm } from "react-hook-form";
 import {