@licklist/design 0.68.1-dev.0 → 0.68.1

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

@@ -1,71 +1,43 @@
-import { useEffect, useState, useContext } from 'react'
-import HookFormService from '@licklist/plugins/dist/services/Form/HookFormService'
-import { uniqueId } from 'lodash'
-import { Badge } from 'react-bootstrap'
+import { useEffect, useState, useContext } from "react";
+import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { uniqueId } from "lodash";
+import { Badge } from "react-bootstrap";
 import {
   Controller,
   useFieldArray,
   useFormContext,
   useWatch,
-} from 'react-hook-form'
-import { FaBars, FaBowlingBall, FaCalendar, FaTicketAlt } from 'react-icons/fa'
-import { useTranslation } from 'react-i18next'
-import { useSensor, MouseSensor } from '@dnd-kit/core'
+} from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useSensor, MouseSensor } from "@dnd-kit/core";
 import {
   CATEGORY_TYPE_FIXED_DURATION,
   CATEGORY_TYPE_GAME,
   CATEGORY_TYPE_TICKETS,
   QUANTITY_TYPE_STANDARD,
   CategoryType,
-} from '@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper'
-import clsx from 'clsx'
-import { SortableTree } from '../../sortable-tree/SortableTree'
-import { ProductSetModalClasses } from '../../sortable-tree/SortableTreeItem'
-import { CreateProductSetItem } from '../item/CreateProductSetItem'
-import { ProductCategoryControl } from '../product-category'
-import { ProductCategory } from '../types'
-import { ProductsControl } from './ProductsControl'
-import { ProductSetFormValues, WithIsLoading } from './ProductSetForm'
-import {
-  SelectCategoryModal,
-  CATEGORY_TYPES_NAMES,
-  CategoryConfig,
-} from './SelectCategoryModal'
-import { ProductSetLoadingContext } from './context'
-import { VenueMapSetModal } from './VenueMapSetModal'
-import { moveArrayElements, sortArrayByIndex } from '../utils'
-import { useSortableTreeFunctions } from '../hooks/useSortableTreeFunctions'
+} from "@licklist/core/dist/DataMapper/Product/ProductCategoryDataMapper";
+import clsx from "clsx";
+import { SortableTree } from "../../sortable-tree/SortableTree";
+import { ProductSetModalClasses } from "../../sortable-tree/SortableTreeItem";
+import { CreateProductSetItem } from "../item/CreateProductSetItem";
+import { ProductCategoryControl } from "../product-category";
+import { ProductCategory } from "../types";
+import { ProductsControl } from "./ProductsControl";
+import { ProductSetFormValues, WithIsLoading } from "./ProductSetForm";
+import { SelectCategoryModal } from "./SelectCategoryModal";
+import { ProductSetLoadingContext } from "./context";
+import { VenueMapSetModal } from "./VenueMapSetModal";
+import { moveArrayElements, sortArrayByIndex } from "../utils";
+import { useSortableTreeFunctions } from "../hooks/useSortableTreeFunctions";
 // @TODO not for first release
 // import Popover from "./ProductSetFormPopover";
 
-const CATEGORIES_TYPE: Partial<Record<CategoryType, CategoryConfig>> = {
-  [CATEGORY_TYPES_NAMES.tickets]: {
-    label: 'tickets',
-    icon: <FaTicketAlt color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.bookings]: {
-    label: 'bookings',
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.menuItems]: {
-    label: 'menuItems',
-    icon: <FaBars color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.game]: {
-    label: 'game',
-    icon: <FaBowlingBall color="#0e8ce2" size={10} />,
-  },
-  [CATEGORY_TYPES_NAMES.fixedDuration]: {
-    label: 'fixedDuration',
-    icon: <FaCalendar color="#0e8ce2" size={10} />,
-  },
-}
-
 interface ProductCategoriesControlProps extends WithIsLoading {
-  stepIndex: number
-  isOverrides?: boolean
-  isEventEditProductSet?: boolean
-  isCreateNewOverrides?: boolean
+  stepIndex: number;
+  isOverrides?: boolean;
+  isEventEditProductSet?: boolean;
+  isCreateNewOverrides?: boolean;
 }
 
 const getCategoryDefaultValue = (
@@ -73,8 +45,8 @@ const getCategoryDefaultValue = (
   sort: number,
 ): ProductCategory => ({
   id: null,
-  uniqueId: uniqueId('product-category'),
-  name: '',
+  uniqueId: uniqueId("product-category"),
+  name: "",
   minSubItems: null,
   maxSubItems: null,
   quantityType: QUANTITY_TYPE_STANDARD,
@@ -90,7 +62,7 @@ const getCategoryDefaultValue = (
   hasSubEvents: false,
   products: [],
   sort,
-})
+});
 
 export function ProductCategoriesControl({
   isLoading,
@@ -99,17 +71,17 @@ export function ProductCategoriesControl({
   isEventEditProductSet,
   isCreateNewOverrides,
 }: ProductCategoriesControlProps) {
-  const { t } = useTranslation('Design')
+  const { t } = useTranslation("Design");
   const {
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
-  } = useContext(ProductSetLoadingContext)
-  const form = useFormContext<ProductSetFormValues>()
-  const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false)
+  } = useContext(ProductSetLoadingContext);
+  const form = useFormContext<ProductSetFormValues>();
+  const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
   const [isVenueMapSetModalVisible, setIsVenueMapSetModalVisible] =
-    useState(false)
-  const [showCategoryModal, setShowCategoryModal] = useState(false)
+    useState(false);
+  const [showCategoryModal, setShowCategoryModal] = useState(false);
   const {
     control,
     formState: { errors },
@@ -118,63 +90,63 @@ export function ProductCategoriesControl({
     trigger,
     getValues,
     setValue,
-  } = form
+  } = form;
 
-  const hasMap: boolean = watch(`steps.${stepIndex}.hasMap` as const) || false
+  const hasMap: boolean = watch(`steps.${stepIndex}.hasMap` as const) || false;
 
   const productCategoriesFieldName =
-    `steps.${stepIndex}.productCategories` as const
+    `steps.${stepIndex}.productCategories` as const;
 
   const { fields, append, remove } = useFieldArray({
     name: productCategoriesFieldName as `steps.0.productCategories`,
     control,
-    keyName: '_id',
-  })
+    keyName: "_id",
+  });
   const [productCategoryState, setProductCategoryState] = useState<
     Record<number, { price: number; quantity: number }>
-  >({})
+  >({});
 
   const { edit, saveValidField, cancelChanges } = useSortableTreeFunctions({
     fieldName: productCategoriesFieldName,
     remove,
     isOverrides,
-  })
+  });
 
   const productCategories: ProductCategory[] = useWatch({
     control,
     name: productCategoriesFieldName,
-  })
+  });
 
-  const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories
+  const productCategoriesErrors = errors?.steps?.[stepIndex]?.productCategories;
 
-  const venueMapSetIdError = errors?.steps?.[stepIndex]?.venueMapSetId
+  const venueMapSetIdError = errors?.steps?.[stepIndex]?.venueMapSetId;
   const venueMapSetPointProductsError =
-    errors?.steps?.[stepIndex]?.pointProducts
+    errors?.steps?.[stepIndex]?.pointProducts;
 
-  const venueMapSetErrors = venueMapSetIdError || venueMapSetPointProductsError
+  const venueMapSetErrors = venueMapSetIdError || venueMapSetPointProductsError;
 
-  const showVenueMapSetError = Boolean(venueMapSetErrors)
+  const showVenueMapSetError = Boolean(venueMapSetErrors);
 
   const mouseSensor = useSensor(MouseSensor, {
     activationConstraint: {
       distance: 10,
     },
-  })
+  });
 
   const handleDragEnd = (event) => {
-    if (isOverrides) return
-    const { active, over } = event
+    if (isOverrides) return;
+    const { active, over } = event;
 
-    if (!active || !over || !active?.id || !over?.id) return
+    if (!active || !over || !active?.id || !over?.id) return;
 
-    const prevIndex = fields.findIndex((field) => field._id === active.id)
-    const nextIndex = fields.findIndex((field) => field._id === over.id)
+    const prevIndex = fields.findIndex((field) => field._id === active.id);
+    const nextIndex = fields.findIndex((field) => field._id === over.id);
 
-    if (prevIndex === nextIndex) return
+    if (prevIndex === nextIndex) return;
 
-    const productCategories = getValues(productCategoriesFieldName)
+    const productCategories = getValues(productCategoriesFieldName);
 
-    if (!productCategories) return
+    if (!productCategories) return;
 
     const nextProductCategories = sortArrayByIndex<ProductCategory>(
       moveArrayElements<ProductCategory>(
@@ -182,33 +154,33 @@ export function ProductCategoriesControl({
         prevIndex,
         nextIndex,
       ),
-    )
+    );
 
-    setValue(productCategoriesFieldName, nextProductCategories)
-  }
+    setValue(productCategoriesFieldName, nextProductCategories);
+  };
 
   const setIsExpanded = (productCategoryId: string) => {
-    setExpandedProductCategories((prevValues: Record<string, any>) => ({
-      ...prevValues,
-      [productCategoryId]: !prevValues[productCategoryId],
-    }))
-  }
+    setExpandedProductCategories((prevValues: Record<string, any>) => {
+      return {
+        ...prevValues,
+        [productCategoryId]: !prevValues[productCategoryId],
+      };
+    });
+  };
 
   useEffect(() => {
-    if (!productCategories || !productCategories.length) return
+    if (!productCategories || !productCategories.length) return;
 
     productCategories.forEach((productCategory) => {
-      const price = productCategory.products?.reduce(
-        (sum, product) =>
-          sum + Number(product.price) * Number(product.totalQuantity),
-        0,
-      )
+      const price = productCategory.products?.reduce((sum, product) => {
+        return sum + Number(product.price) * Number(product.totalQuantity);
+      }, 0);
       const quantity = productCategory.products?.reduce((sum, product) => {
         const productQuantity = !product.isUnlimited
           ? Number(product.totalQuantity)
-          : 0
-        return sum + productQuantity
-      }, 0)
+          : 0;
+        return sum + productQuantity;
+      }, 0);
 
       setProductCategoryState((prevState) => ({
         ...prevState,
@@ -218,19 +190,19 @@ export function ProductCategoriesControl({
           price,
           quantity,
         },
-      }))
-    })
-  }, [productCategories])
+      }));
+    });
+  }, [productCategories]);
 
   useEffect(() => {
-    if (fields.length !== 1) return
+    if (fields.length !== 1) return;
 
     setExpandedProductCategories((prevValues) => ({
       ...prevValues,
       [String(fields[0]?.id || fields[0]?.uniqueId)]: true,
-    }))
+    }));
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [fields])
+  }, [fields]);
 
   return (
     <>
@@ -242,21 +214,19 @@ export function ProductCategoriesControl({
         {fields.map((productCategory, index) => {
           const productCategoryId = productCategory?.id
             ? String(productCategory.id)
-            : productCategory.uniqueId
+            : productCategory.uniqueId;
 
           const isOverridesCategory = productCategory.products?.some(
             (product) =>
               isEventEditProductSet
                 ? !!product.id
                 : !!product.originalProductId,
-          )
+          );
           const isNewOverridesCategory =
-            isCreateNewOverrides && !!productCategory.id
+            isCreateNewOverrides && !!productCategory.id;
           const onSetIsExpanded = () => {
-            setIsExpanded(productCategoryId)
-          }
-
-          const categoryType = CATEGORIES_TYPE[productCategory.type]
+            setIsExpanded(productCategoryId);
+          };
 
           return (
             <Controller
@@ -264,8 +234,8 @@ export function ProductCategoriesControl({
               name={`${productCategoriesFieldName}.${index}.name` as const}
               control={control}
               rules={{
-                required: t('Validation:fieldRequired', {
-                  attribute: t('name'),
+                required: t("Validation:fieldRequired", {
+                  attribute: t("name"),
                 }) as string,
               }}
               render={({ field: { value, onChange } }) => (
@@ -279,7 +249,7 @@ export function ProductCategoriesControl({
                   isInvalid={!!productCategoriesErrors}
                   badge={
                     <Badge className="category-badge">
-                      {t('productCategory')}
+                      {t("productCategory")}
                     </Badge>
                   }
                   isIconInHeader={false}
@@ -289,25 +259,19 @@ export function ProductCategoriesControl({
                       <span>
                         {productCategoryState[
                           productCategory?.id ?? productCategory.uniqueId
-                        ]?.quantity ?? 'N/A'}{' '}
-                        {t('products')}
+                        ]?.quantity ?? "N/A"}{" "}
+                        {t("products")}
                       </span>
                     </div>
                   }
                   treeLineIconColor="#1A93AA"
-                  modalLabel={t('addNewCategory')}
+                  modalLabel={t("addNewCategory")}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
                     t(productCategory.type),
                   )}
                   modalClass={ProductSetModalClasses.category}
                   isNewAdded={showCategoryModal}
-                  itemButton={
-                    <div className="btn-outline-primary item-icon sm border border-primary rounded-sm">
-                      {categoryType.icon}
-                      <span className="ml-2">{t(categoryType.label)}</span>
-                    </div>
-                  }
                   body={
                     <ProductCategoryControl
                       isLoading={isLoading}
@@ -350,13 +314,13 @@ export function ProductCategoriesControl({
                 </SortableTree.Item>
               )}
             />
-          )
+          );
         })}
       </SortableTree>
       <CreateProductSetItem
-        title={t('addCategory')}
+        title={t("addCategory")}
         onClick={() => {
-          setIsSelectCategoryVisible(true)
+          setIsSelectCategoryVisible(true);
         }}
       />
 
@@ -364,39 +328,39 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
-          append(getCategoryDefaultValue(categoryType, fields.length))
-          setShowCategoryModal(true)
+          append(getCategoryDefaultValue(categoryType, fields.length));
+          setShowCategoryModal(true);
           if (
             productCategoriesErrors?.type === HookFormService.manualErrorType
           ) {
-            clearErrors(productCategoriesFieldName)
+            clearErrors(productCategoriesFieldName);
           }
         }}
       />
       {providerHasMap && hasMap && (
         <>
           <CreateProductSetItem
-            title={t('editMap')}
+            title={t("editMap")}
             isOverride={isOverrides}
             onClick={() => {
-              if (isOverrides) return
-              setIsVenueMapSetModalVisible(true)
+              if (isOverrides) return;
+              setIsVenueMapSetModalVisible(true);
             }}
             className={clsx(
-              'mt-3',
-              showVenueMapSetError && 'mb-3',
-              showVenueMapSetError && 'is-invalid',
+              "mt-3",
+              showVenueMapSetError && "mb-3",
+              showVenueMapSetError && "is-invalid",
             )}
           />
           {showVenueMapSetError && (
             <div className="manual-form-error">
               {venueMapSetIdError &&
-                t('Validation:fieldRequired', {
-                  attribute: t('Design:venueMapSet'),
+                t("Validation:fieldRequired", {
+                  attribute: t("Design:venueMapSet"),
                 })}
               {venueMapSetPointProductsError &&
-                t('Validation:fieldMinNumber', {
-                  attribute: t('pointProduct'),
+                t("Validation:fieldMinNumber", {
+                  attribute: t("pointProduct"),
                   min: 1,
                 })}
             </div>
@@ -413,7 +377,7 @@ export function ProductCategoriesControl({
         {productCategoriesErrors && productCategoriesErrors.message}
       </div>
     </>
-  )
+  );
 }
 
 export const getBadgeConfig = (
@@ -422,15 +386,15 @@ export const getBadgeConfig = (
 ): { label: string; className: string } | null => {
   if (categoryType === CATEGORY_TYPE_GAME)
     return {
-      className: 'game-badge',
+      className: "game-badge",
       label,
-    }
+    };
 
   if (categoryType === CATEGORY_TYPE_FIXED_DURATION)
     return {
-      className: 'fixed-duration-badge',
+      className: "fixed-duration-badge",
       label,
-    }
+    };
 
-  return null
-}
+  return null;
+};