@licklist/design 0.66.12 → 0.66.13

package/src/product-set/product-zone/ProductZoneControl.tsx

@@ -0,0 +1,247 @@
+import React, { useContext, useEffect, useMemo } from "react";
+import { Col, Form, Row } from "react-bootstrap";
+import {
+  ArrayPath,
+  Controller,
+  Path,
+  PathValue,
+  UnpackNestedValue,
+  useFormContext,
+  useWatch,
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import {
+  CategoryType,
+  CATEGORY_TYPE_FIXED_DURATION,
+  CATEGORY_TYPE_GAME,
+} from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import {
+  FieldNamePrefixPath,
+  FormValues,
+} from "@licklist/plugins/dist/types/services/Form/hook-form-service";
+import { HookFormService } from "@licklist/plugins";
+import { ProductZone } from "@licklist/core/dist/DataMapper/Product/ProductZoneDataMapper";
+import { ProductDurationControl } from "../product/duration/ProductDurationControl";
+import { FormNumberInput } from "../../static/form-number-input";
+import { FixedDurationOptions } from "../product/fixed-duration-fields";
+import { ProductSetLoadingContext } from "../form/context";
+
+export interface ProductZoneControlValues extends FormValues, ProductZone {
+  id: number | null;
+}
+
+interface ProductZoneProps<T> extends FieldNamePrefixPath<T> {
+  isOverrides: boolean;
+  categoryType?: CategoryType;
+  productZonesFieldName: ArrayPath<T>;
+}
+
+export const ProductZoneControl = <T extends FormValues>({
+  isOverrides,
+  categoryType,
+  fieldNamePrefix,
+  productZonesFieldName,
+}: ProductZoneProps<T>) => {
+  const { t } = useTranslation(["Design", "Validation", "ProductSet"]);
+  const {
+    trigger,
+    control,
+    setValue,
+    clearErrors,
+    formState: { errors },
+  } = useFormContext();
+
+  const productZones = useWatch({
+    control,
+    name: productZonesFieldName,
+  }) as ProductZoneControlValues[];
+
+  const { capacity, zoneId } = useWatch({
+    control,
+    name: `${fieldNamePrefix}`,
+  });
+  const disabledDuration = capacity === "0" || !capacity;
+
+  const { providerHasBookingManagement, zones = [] } = useContext(
+    ProductSetLoadingContext
+  );
+
+  const currentZoneData = zones.find((zone) => zone.id === Number(zoneId));
+
+  const availableZones = useMemo(
+    () =>
+      zones.filter(
+        (zone) =>
+          !productZones.find(
+            (productZone) =>
+              Number(productZone.zoneId) === zone.id &&
+              productZone.zoneId !== zoneId
+          )
+      ),
+    [zones, productZones, zoneId]
+  );
+
+  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 onChangeGameCapacity = (value: number) => {
+    if (!currentZoneData?.defaultDuration) {
+      return;
+    }
+    setValue(
+      `${fieldNamePrefix}.duration` as Path<T>,
+      /* @ts-expect-error 6385 */
+      (value * currentZoneData?.defaultDuration) as UnpackNestedValue<
+        PathValue<T, Path<T>>
+      >
+    );
+  };
+  return (
+    <>
+      <>
+        <Row>
+          <Col>
+            <Form.Group>
+              <Form.Label>{t("Design:zone")}</Form.Label>
+              <Controller
+                control={control}
+                name={`${fieldNamePrefix}.zoneId`}
+                render={({ field }) => (
+                  <Form.Control
+                    as="select"
+                    disabled={isOverrides}
+                    isInvalid={HookFormService.isInvalid(
+                      `${fieldNamePrefix}.zoneId`,
+                      errors
+                    )}
+                    {...field}
+                  >
+                    <option value={null}>{t("Design:choose")}</option>
+                    {availableZones.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(
+                  `${fieldNamePrefix}.zoneId` 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
+            fieldNamePrefix={fieldNamePrefix}
+            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>
+          )}
+        </>
+      )}
+
+      <FixedDurationOptions
+        fieldNamePrefix={fieldNamePrefix}
+        isOverrides={isOverrides}
+      />
+    </>
+  );
+};

package/src/product-set/product-zone/index.ts

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

package/src/product-set/utils/index.ts

@@ -2,6 +2,7 @@ import { EmailTemplate } from "@licklist/core/dist/DataMapper/Notification/Email
 import { SmsTemplate } from "@licklist/core/dist/DataMapper/Notification/SmsTemplateDataMapper";
 import { TFunction } from "i18next";
 import { UseFormSetError } from "react-hook-form";
+import { checkIfZoneCategory } from "@licklist/plugins";
 import { TemplateItem } from "../control/ProductSetControl";
 import { ProductSetFormValues } from "../form/ProductSetForm";
 
@@ -14,7 +15,7 @@ interface CheckAvailableTimesErrors {
 export const moveArrayElements = <T>(
   array: T[],
   prevIndex: number,
-  nextIndex: number
+  nextIndex: number,
 ) => {
   const nextArray = [...array];
   // We move there elements in array
@@ -30,7 +31,7 @@ export const sortArrayByIndex = <T>(array: T[]) => {
 
 export const getFilteredTemplates = (
   templates?: EmailTemplate[] | SmsTemplate[],
-  formTemplates?: TemplateItem[]
+  formTemplates?: TemplateItem[],
 ): TemplateItem[] | undefined => {
   if (!templates) {
     return undefined;
@@ -42,8 +43,8 @@ export const getFilteredTemplates = (
         template.notification.isActive &&
         !formTemplates?.find(
           (formTemplate) =>
-            formTemplate.value.notification.type === template.notification.type
-        )
+            formTemplate.value.notification.type === template.notification.type,
+        ),
     )
     ?.map((template) => ({
       id: template?.id,
@@ -60,7 +61,10 @@ export const checkAvailableTimesErrors = ({
   let hasError = false;
 
   const hasCategoryWithZone = values?.steps?.some(
-    (step) => !!step?.productCategories.some((category) => !!category?.zoneId)
+    (step) =>
+      !!step?.productCategories.some((category) =>
+        checkIfZoneCategory(category.type),
+      ),
   );
   if (!hasCategoryWithZone) {
     return hasError;

package/src/snippet/snippet-template/preview/Preview.tsx

@@ -303,7 +303,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: "Cofee",
                                   description: "",
                                   price: 15,
@@ -312,8 +311,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,
@@ -332,7 +329,6 @@ export function Preview({
                                   productCategoryId: 57,
                                   productGroupId: null,
                                   availableQuantity: 980,
-                                  zoneId: null,
                                   name: "Cofee 2",
                                   description: "",
                                   price: 15,
@@ -341,8 +337,6 @@ export function Preview({
                                   maxQuantity: 15,
                                   totalQuantity: 980,
                                   type: "sale" as const,
-                                  capacity: 0,
-                                  duration: 0,
                                   weight: 0,
                                   isAvailable: true,
                                   isSoldOut: false,

package/src/sortable-tree/SortableTreeItem.tsx

@@ -20,6 +20,7 @@ export const ProductSetModalClasses = {
   step: "edit-product-step",
   category: "edit-product-category",
   product: "edit-product",
+  productZones: "edit-product-zone",
 } as const;
 
 export type ProductSetModalClassesType =
@@ -36,6 +37,7 @@ export interface SortableTreeItemProps {
   postItem?: ReactNode;
   sortableItems?: string[];
   isExpanded?: boolean;
+  shouldExpand?: boolean;
   isInvalid?: boolean;
   isIconInHeader?: boolean;
   treeLineIconColor?: string;
@@ -66,6 +68,7 @@ export function SortableTreeItem({
   postItem,
   sortableItems,
   isExpanded = false,
+  shouldExpand = true,
   isInvalid = false,
   isIconInHeader = true,
   treeLineIconColor = "",
@@ -100,11 +103,14 @@ export function SortableTreeItem({
     transform: dragTransform,
   } = useDraggable({
     id,
-    disabled: isOverride,
+    disabled: isOverride || !shouldExpand,
   });
 
   const onHandleExpand = useCallback(
     (event) => {
+      if (!shouldExpand) {
+        return;
+      }
       const deltaX = event.pageX - position.pageX;
       const deltaY = event.pageY - position.pageY;
       const euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
@@ -120,14 +126,20 @@ export function SortableTreeItem({
 
       setExpanded((expanded) => !expanded);
     },
-    [position, setIsExpanded]
+    [position, shouldExpand, setIsExpanded]
   );
 
   const isVisibleDeleteButton = Boolean(onDelete) && !isOverride;
 
-  const onButtonMouseDown = useCallback((event) => {
-    setPosition({ pageX: event.pageX, pageY: event.pageY });
-  }, []);
+  const onButtonMouseDown = useCallback(
+    (event) => {
+      if (!shouldExpand) {
+        return;
+      }
+      setPosition({ pageX: event.pageX, pageY: event.pageY });
+    },
+    [shouldExpand]
+  );
 
   const onHide = async () => {
     if (!validate) setIsModalVisible(false);
@@ -197,47 +209,49 @@ export function SortableTreeItem({
             : null
         }
       >
-        <div className="sortable-tree-line">
-          <Button
-            variant="link"
-            size="sm"
-            onMouseDown={onButtonMouseDown}
-            onMouseUp={onHandleExpand}
-          >
-            {expanded ? (
-              <Icon type="minus" width=".7rem" />
-            ) : (
-              <div className="expand-icon-container">
-                <div />
-                <div />
-                <div />
-              </div>
-            )}
-          </Button>
-
-          {expanded && (
-            <svg
-              className="sortable-tree-line-icon"
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              width="100%"
-              height="100%"
-              viewBox="0 0 100 100"
-              preserveAspectRatio="none"
+        {shouldExpand && (
+          <div className="sortable-tree-line">
+            <Button
+              variant="link"
+              size="sm"
+              onMouseDown={onButtonMouseDown}
+              onMouseUp={onHandleExpand}
             >
-              <g>
-                <path
-                  className={clsx(
-                    "sortable-tree-line-icon-path",
-                    treeLineIconColor && "sortable-tree-line-product-element"
-                  )}
-                  style={{ stroke: treeLineIconColor }}
-                  d="M 50 0 V 100"
-                />
-              </g>
-            </svg>
-          )}
-        </div>
+              {expanded ? (
+                <Icon type="minus" width=".7rem" />
+              ) : (
+                <div className="expand-icon-container">
+                  <div />
+                  <div />
+                  <div />
+                </div>
+              )}
+            </Button>
+
+            {expanded && (
+              <svg
+                className="sortable-tree-line-icon"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+                width="100%"
+                height="100%"
+                viewBox="0 0 100 100"
+                preserveAspectRatio="none"
+              >
+                <g>
+                  <path
+                    className={clsx(
+                      "sortable-tree-line-icon-path",
+                      treeLineIconColor && "sortable-tree-line-product-element"
+                    )}
+                    style={{ stroke: treeLineIconColor }}
+                    d="M 50 0 V 100"
+                  />
+                </g>
+              </svg>
+            )}
+          </div>
+        )}
 
         <div className="sortable-tree-item-wrapper">
           <div

package/src/styles/product-set/CreateProductSetItem.scss

@@ -17,6 +17,14 @@ $product-set-item-hover-bg-color: #d9efff !default;
   }
 }
 
+.product-set-item-wrapper-zone {
+  color:#84269B;
+  background-color: rgba($color: #84269B, $alpha: 0.1);
+  .product-set-item-icon {
+    background-color: #84269B;
+  }
+}
+
 .product-set-item-wrapper-category {
   color: #1A93AA;
   background-color: rgba($color: #1A93AA, $alpha: 0.1);

package/src/styles/product-set/EditZoneSettingModal.scss

@@ -0,0 +1,16 @@
+.edit-right-form-modal.edit-product-zone {
+    padding: 0;
+    .top-label-container {
+      background-color: #EFE9F5;
+      span {
+        color:#84269B;
+      }
+    }
+    @include media-breakpoint-down(sm) {
+      top: 5%;
+      .step-save-btn {
+        margin-top: 1rem;
+        width: 100%;
+      }
+    }
+  }

package/src/styles/product-set/ProductSetForm.scss

@@ -50,7 +50,7 @@
 
   .step-badge,
   .category-badge,
-  .product-badge {
+  .product-badge  {
     font-size: 0.875rem;
     font-weight: 600;
   }
@@ -67,6 +67,8 @@
     background-color: #e9f5ea;
     color: #269b36;
   }
+
+
 }
 
 .product-set-mobile-footer {
@@ -174,3 +176,14 @@
     }
   }
 }
+
+
+.sortable-tree-item-toggle {
+
+  .product-zone-badge {
+    background-color: #EFE9F5;
+    color:#84269B;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}

package/src/styles/product-set/_index.scss

@@ -10,4 +10,5 @@
 @import "./EditCategoryModal.scss";
 @import "./EditProductModal.scss";
 @import "./EditVenueMapSetModal";
-@import './SelectCategoryModal.scss'
+@import './SelectCategoryModal.scss';
+@import "./EditZoneSettingModal.scss"