@licklist/design 0.66.12 → 0.66.13

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

@@ -0,0 +1,181 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import React, { 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;
 
@@ -123,7 +107,7 @@ export function ProductsControl({
   });
 
   const allowDeposits = watch(
-    `steps.${stepIndex}.productCategories.${productCategoryIndex}.allowDeposits`
+    `steps.${stepIndex}.productCategories.${productCategoryIndex}.allowDeposits`,
   );
 
   // watch is required to get a reactive value of the required fields
@@ -131,7 +115,7 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productControlFieldName}.${index}.price` as const
+        (_, index) => `${productControlFieldName}.${index}.price` as const,
       ),
     ],
   });
@@ -140,7 +124,7 @@ export function ProductsControl({
     name: [
       ...fields.map(
         (_, index) =>
-          `${productControlFieldName}.${index}.totalQuantity` as const
+          `${productControlFieldName}.${index}.totalQuantity` as const,
       ),
     ],
   });
@@ -149,7 +133,8 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productControlFieldName}.${index}.isUnlimited` as const
+        (_, index) =>
+          `${productControlFieldName}.${index}.isUnlimited` as const,
       ),
     ],
   });
@@ -187,7 +172,7 @@ export function ProductsControl({
   const onProductRemove = (index: number) => {
     if (isOverrides) return;
     const currentProduct = getValues(
-      `${productControlFieldName}.${index}` as const
+      `${productControlFieldName}.${index}` as const,
     );
 
     const currentPointProducts = getValues(productPointsKey);
@@ -195,8 +180,8 @@ export function ProductsControl({
     setValue(
       productPointsKey,
       currentPointProducts?.filter(
-        (product) => product.productUuid !== currentProduct.uuid
-      ) || []
+        (product) => product.productUuid !== currentProduct.uuid,
+      ) || [],
     );
     remove(index);
   };
@@ -274,7 +259,6 @@ export function ProductsControl({
                       onProductNameChange={onChange}
                       hasTicket={hasTicket}
                       categoryType={categoryType}
-                      zoneDuration={catergoryZone?.defaultDuration}
                       isOverrides={
                         isNewProductOverrides || isOverridesProductSet
                       }

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

@@ -71,6 +71,9 @@ export function SubProductsControl({
                     name: `${subProduct.name} copy`,
                     images: subProducts[index]?.images as Image[],
                   };
+                  // @TODO fix prod type error
+                  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                  // @ts-ignore
                   append(subProductCopy);
                 }}
               />

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

@@ -48,6 +48,9 @@ export const VenueMapsControl = ({
                               url={image.url}
                               name={name}
                               points={points}
+                              // @TODO fix prod type error
+                              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                              // @ts-ignore
                               products={products}
                               pointProducts={pointProducts}
                               onPointProductsChange={onPointProductsChange}