@licklist/design 0.66.2-dev.1 → 0.66.2

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

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import { uniqueId } from "lodash";
 import { Badge } from "react-bootstrap";
 import {
@@ -14,6 +14,7 @@ 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";
@@ -32,9 +33,8 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
-  isCreateNewOverrides?: boolean;
 }
 
 const getDefaultProductValue = (sort: number): Product => ({
@@ -48,6 +48,8 @@ const getDefaultProductValue = (sort: number): Product => ({
   minQuantity: null,
   maxQuantity: null,
   totalQuantity: 0,
+  capacity: 0,
+  duration: 0,
   isAvailable: true,
   isSoldOut: false,
   isRequired: false,
@@ -55,12 +57,16 @@ const getDefaultProductValue = (sort: number): Product => ({
   quantitySelector: 1,
   hasSpecialNotes: false,
   weight: 0,
-  originalProductId: null,
   type: DEFAULT_PRODUCT_TYPE,
   tierId: Number(uniqueId()),
+  zoneId: null,
   subProducts: [],
   images: [],
   uuid: generateUuid(),
+  subSlots: null,
+  offset: null,
+  pause: null,
+  serviceTime: null,
   sort,
 });
 
@@ -71,9 +77,8 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
   isOverrides,
-  isEventEditProductSet,
-  isCreateNewOverrides,
 }: ProductsControlProps) {
   const { t } = useTranslation("Design");
   const form = useFormContext<ProductSetFormValues>();
@@ -89,6 +94,12 @@ 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;
 
@@ -107,7 +118,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
@@ -115,7 +126,7 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productControlFieldName}.${index}.price` as const,
+        (_, index) => `${productControlFieldName}.${index}.price` as const
       ),
     ],
   });
@@ -124,7 +135,7 @@ export function ProductsControl({
     name: [
       ...fields.map(
         (_, index) =>
-          `${productControlFieldName}.${index}.totalQuantity` as const,
+          `${productControlFieldName}.${index}.totalQuantity` as const
       ),
     ],
   });
@@ -133,8 +144,7 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) =>
-          `${productControlFieldName}.${index}.isUnlimited` as const,
+        (_, index) => `${productControlFieldName}.${index}.isUnlimited` as const
       ),
     ],
   });
@@ -172,7 +182,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);
@@ -180,8 +190,8 @@ export function ProductsControl({
     setValue(
       productPointsKey,
       currentPointProducts?.filter(
-        (product) => product.productUuid !== currentProduct.uuid,
-      ) || [],
+        (product) => product.productUuid !== currentProduct.uuid
+      ) || []
     );
     remove(index);
   };
@@ -193,100 +203,90 @@ export function ProductsControl({
         onDragEnd={handleDragEnd}
         sensors={[mouseSensor]}
       >
-        {fields.map((product, index) => {
-          const isOverridesProductSet = isEventEditProductSet
-            ? !!product.id
-            : isOverrides && !!product.originalProductId;
-
-          const isNewProductOverrides = isCreateNewOverrides && !!product.id;
-
-          return (
-            <Controller
-              key={product._id}
-              control={control}
-              name={`${productControlFieldName}.${index}.name` as const}
-              rules={{
-                required: t("Validation:fieldRequired", {
-                  attribute: t("name"),
-                }) as string,
-              }}
-              render={({ field: { value, onChange } }) => (
-                <SortableTree.Item
-                  key={`product-${product._id}`}
-                  id={String(product._id)}
-                  isExpanded={isFirstProductAdded}
-                  isInvalid={!!categoryProductErrors}
-                  title={value}
-                  isOverride={isOverrides}
-                  badge={
-                    <Badge className="product-badge">{t("product")}</Badge>
-                  }
-                  isIconInHeader={false}
-                  cancelChanges={() => cancelChanges(index)}
-                  edit={() => edit(index)}
-                  secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
-                  subTitle={
-                    <div className="product-set-badges-container">
-                      <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
-                      <span>
-                        {`£${prices[index]} ${t("each")} - ${t("qty")}:${
-                          !isUnlimitedQuantities[index]
-                            ? ` ${quantities[index]}`
-                            : t(" unlimited")
-                        } ${
-                          !isUnlimitedQuantities[index]
-                            ? ` - ${t("possibleRevenue")} £${
-                                prices[index] * quantities[index]
-                              }`
-                            : ""
-                        } `}
-                      </span>
-                    </div>
-                  }
-                  modalLabel={t("addNewProduct")}
-                  modalClass={ProductSetModalClasses.product}
-                  isNewAdded={showProductModal}
-                  body={
-                    <ProductControl<ProductSetFormValues>
-                      isLoading={isLoading}
-                      quantityType={quantityType}
-                      allowDeposits={allowDeposits}
-                      hasBookingManagement={false}
-                      fieldNamePrefix={
-                        `${productControlFieldName}.${index}` as const
-                      }
-                      productName={value}
-                      onProductNameChange={onChange}
-                      hasTicket={hasTicket}
-                      categoryType={categoryType}
-                      isOverrides={
-                        isNewProductOverrides || isOverridesProductSet
-                      }
-                    />
-                  }
-                  onDelete={() => onProductRemove(index)}
-                  validate={() =>
-                    trigger(`${productControlFieldName}.${index}`)
-                  }
-                  saveValidField={saveValidField}
-                  // preItem={<Popover className="d-none d-sm-block" />}
-                >
-                  <SubProductsControl
+        {fields.map((product, index) => (
+          <Controller
+            key={product._id}
+            control={control}
+            name={`${productControlFieldName}.${index}.name` as const}
+            rules={{
+              required: t("Validation:fieldRequired", {
+                attribute: t("name"),
+              }) as string,
+            }}
+            render={({ field: { value, onChange } }) => (
+              <SortableTree.Item
+                key={`product-${product._id}`}
+                id={String(product._id)}
+                isExpanded={isFirstProductAdded}
+                isInvalid={!!categoryProductErrors}
+                title={value}
+                isOverride={isOverrides}
+                badge={<Badge className="product-badge">{t("product")}</Badge>}
+                isIconInHeader={false}
+                cancelChanges={() => cancelChanges(index)}
+                edit={() => edit(index)}
+                isProduct
+                secondaryBadge={getBadgeConfig(categoryType, t(categoryType))}
+                subTitle={
+                  <div className="product-set-badges-container">
+                    <div className="product-set-subtitle-dot product-set-subtitle-product-dot" />
+                    <span>
+                      {`£${prices[index]} ${t("each")} - ${t("qty")}:${
+                        !isUnlimitedQuantities[index]
+                          ? ` ${quantities[index]}`
+                          : t(" unlimited")
+                      } ${
+                        !isUnlimitedQuantities[index]
+                          ? ` - ${t("possibleRevenue")} £${
+                              prices[index] * quantities[index]
+                            }`
+                          : ""
+                      } `}
+                    </span>
+                  </div>
+                }
+                modalLabel={t("addNewProduct")}
+                modalClass={ProductSetModalClasses.product}
+                isNewAdded={showProductModal}
+                body={
+                  <ProductControl<ProductSetFormValues>
                     isLoading={isLoading}
                     quantityType={quantityType}
-                    stepIndex={stepIndex}
-                    productCategoryIndex={productCategoryIndex}
-                    productIndex={index}
+                    allowDeposits={allowDeposits}
+                    hasBookingManagement={false}
+                    fieldNamePrefix={
+                      `${productControlFieldName}.${index}` as const
+                    }
+                    productName={value}
+                    onProductNameChange={onChange}
+                    hasTicket={hasTicket}
+                    categoryType={categoryType}
+                    zoneDuration={catergoryZone?.defaultDuration}
+                    isOverrides={isOverrides}
                   />
-                </SortableTree.Item>
-              )}
-            />
-          );
-        })}
+                }
+                onDelete={() => onProductRemove(index)}
+                validate={() => trigger(`${productControlFieldName}.${index}`)}
+                saveValidField={saveValidField}
+                // preItem={<Popover className="d-none d-sm-block" />}
+              >
+                <SubProductsControl
+                  isLoading={isLoading}
+                  quantityType={quantityType}
+                  stepIndex={stepIndex}
+                  productCategoryIndex={productCategoryIndex}
+                  productIndex={index}
+                />
+              </SortableTree.Item>
+            )}
+          />
+        ))}
       </SortableTree>
       <CreateProductSetItem
         title={t("addProduct")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultProductValue(fields.length));
           setShowProductModal(true);
 

package/src/product-set/form/SelectCategoryModal.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 
 import {
   SelectCategoryModal,

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

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import { ReactElement, useContext, useState } from "react";
+import React, { useContext, useState } from "react";
 import { Button, Carousel, Modal, ModalBody } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import {
@@ -14,18 +14,10 @@ import {
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import Col from "react-bootstrap/Col";
-import {
-  FaArrowLeft,
-  FaArrowRight,
-  FaBars,
-  FaBowlingBall,
-  FaCalendar,
-  FaTicketAlt,
-  FaTimes,
-} from "react-icons/fa";
+import Icon from "../../static/Icon";
 import { ProductSetLoadingContext } from "./context";
 
-export const CATEGORY_TYPES_NAMES = {
+const CATEGORY_TYPES_NAMES = {
   menuItems: CATEGORY_TYPE_MENU_ITEMS,
   tickets: CATEGORY_TYPE_TICKETS,
   bookings: CATEGORY_TYPE_BOOKINGS,
@@ -33,31 +25,31 @@ export const CATEGORY_TYPES_NAMES = {
   fixedDuration: CATEGORY_TYPE_FIXED_DURATION,
 } as const;
 
-export type CategoryConfig = { label: string; icon: ReactElement };
+type CategoryConfig = { label: string; icon: string };
 
 const MAIN_CATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.tickets]: {
     label: "tickets",
-    icon: <FaTicketAlt color="#0e8ce2" size={32} />,
+    icon: "ticket-alt",
   },
   [CATEGORY_TYPES_NAMES.bookings]: {
     label: "bookings",
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: "calendar",
   },
   [CATEGORY_TYPES_NAMES.menuItems]: {
     label: "menuItems",
-    icon: <FaBars color="#0e8ce2" size={32} />,
+    icon: "bars",
   },
 };
 
 const BOOKING_SUBCATEGORIES: Partial<Record<CategoryType, CategoryConfig>> = {
   [CATEGORY_TYPES_NAMES.game]: {
     label: "game",
-    icon: <FaBowlingBall color="#0e8ce2" size={32} />,
+    icon: "bowling-ball",
   },
   [CATEGORY_TYPES_NAMES.fixedDuration]: {
     label: "fixedDuration",
-    icon: <FaCalendar color="#0e8ce2" size={32} />,
+    icon: "calendar",
   },
 };
 
@@ -77,11 +69,11 @@ export function SelectCategoryModal({
 
   const mainCategories = Object.keys(MAIN_CATEGORIES) as CategoryType[];
   const bookingSubcategories = Object.keys(
-    BOOKING_SUBCATEGORIES,
+    BOOKING_SUBCATEGORIES
   ) as CategoryType[];
 
   const [selectedCategory, setSelectedCategory] = useState<CategoryType | null>(
-    null,
+    null
   );
   const isBookingsSelected = selectedCategory === CATEGORY_TYPE_BOOKINGS;
 
@@ -114,7 +106,7 @@ export function SelectCategoryModal({
         <ModalTitle as="h5">{t("Design:selectCategory")}</ModalTitle>
 
         <Button variant="danger" className="btn-sm rounded" onClick={onHide}>
-          <FaTimes size={20} />
+          <Icon type="times" height="1.2rem" />
         </Button>
       </ModalHeader>
 
@@ -141,7 +133,11 @@ export function SelectCategoryModal({
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
-                      {icon}
+                      {typeof icon === "string" ? (
+                        <Icon type={icon} color="#0e8ce2" height="2rem" />
+                      ) : (
+                        icon
+                      )}
                       <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
@@ -164,7 +160,7 @@ export function SelectCategoryModal({
                       onClick={() => categorySelectHandler(categoryType)}
                       active={selectedCategory === categoryType}
                     >
-                      {icon}
+                      <Icon type={icon} color="#0e8ce2" height="2rem" />
                       <h6 className="text-dark mt-3">{t(label)}</h6>
                     </Button>
                   </Col>
@@ -182,11 +178,10 @@ export function SelectCategoryModal({
             }`}
             onClick={() => setActiveCarouselIndex((prev) => (prev ? 0 : 1))}
           >
-            {activeCarouselIndex ? (
-              <FaArrowLeft size={16} />
-            ) : (
-              <FaArrowRight size={16} />
-            )}
+            <Icon
+              type={activeCarouselIndex ? "arrow-left" : "arrow-right"}
+              height="1rem"
+            />
           </Button>
         )}
       </ModalBody>

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useFieldArray, useFormContext, Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import Badge from "react-bootstrap/Badge";
@@ -19,16 +19,9 @@ import { ProductSetFormValues } from "./ProductSetForm";
 interface StepsControlProps {
   isLoading: boolean;
   isOverrides?: boolean;
-  isEventEditProductSet?: boolean;
-  isCreateNewOverrides?: boolean;
 }
 
-export function StepsControl({
-  isLoading,
-  isOverrides,
-  isEventEditProductSet,
-  isCreateNewOverrides,
-}: StepsControlProps) {
+export function StepsControl({ isLoading, isOverrides }: StepsControlProps) {
   const form = useFormContext<ProductSetFormValues>();
   const { t } = useTranslation("Design");
   const [showStepModal, setShowStepModal] = useState(false);
@@ -75,9 +68,9 @@ export function StepsControl({
     <>
       {fields.map((step, index) => {
         const stepFieldName = `steps.${index}` as const;
+
         const stepData = getValues(stepFieldName);
-        const isOverrideStep =
-          (isOverrides || isCreateNewOverrides) && !!step.id;
+
         return (
           <Controller
             key={`step-${step._id}`}
@@ -99,9 +92,9 @@ export function StepsControl({
                 modalLabel={t("addNewStep")}
                 modalClass={ProductSetModalClasses.step}
                 isNewAdded={showStepModal}
-                edit={() => edit(index)}
+                edit={() => !isOverrides && edit(index)}
                 cancelChanges={() => cancelChanges(index)}
-                isOverride={isOverrideStep}
+                isOverride={isOverrides}
                 subTitle={
                   <div className="product-set-badges-container">
                     <div className="product-set-subtitle-dot product-set-subtitle-step-dot" />
@@ -117,7 +110,6 @@ export function StepsControl({
                     stepIndex={index}
                     stepName={value}
                     onStepNameChange={onChange}
-                    isOverrides={isOverrideStep}
                   />
                 }
                 onDelete={() => remove(index)}
@@ -148,8 +140,6 @@ export function StepsControl({
                   isLoading={isLoading}
                   stepIndex={index}
                   isOverrides={isOverrides}
-                  isCreateNewOverrides={isCreateNewOverrides}
-                  isEventEditProductSet={isEventEditProductSet}
                 />
               </SortableTree.Item>
             )}
@@ -159,7 +149,9 @@ export function StepsControl({
 
       <CreateProductSetItem
         title={t("addStep")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           append(getDefaultStepsValues());
           setShowStepModal(true);
           if (errors.steps?.type === HookFormService.manualErrorType) {

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

@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import { uniqueId } from "lodash";
+import React from "react";
 import { useFieldArray, useFormContext, useWatch } from "react-hook-form";
 import { SortableTree } from "../../sortable-tree";
 import { ProductControl, ProductControlProps } from "../product";
@@ -70,7 +71,6 @@ export function SubProductsControl({
                     name: `${subProduct.name} copy`,
                     images: subProducts[index]?.images as Image[],
                   };
-                  // @ts-expect-error TS2345
                   append(subProductCopy);
                 }}
               />

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

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo } from "react";
+import React, { useCallback, useContext, useMemo } from "react";
 import { Modal, Button, Form } from "react-bootstrap";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -26,7 +26,7 @@ export const VenueMapSetModal = ({
 }: VenueMapSetModalProps) => {
   const { t } = useTranslation(["Design", "Validation"]);
   const { venueMapSets = [], providerHasMap } = useContext(
-    ProductSetLoadingContext,
+    ProductSetLoadingContext
   );
   const {
     register,
@@ -66,7 +66,7 @@ export const VenueMapSetModal = ({
       setValue(productPointsKey, nextPointProducts as never);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
+    []
   );
 
   const products = useMemo(() => {
@@ -78,7 +78,7 @@ export const VenueMapSetModal = ({
       (prevProducts, currentCategory: ProductCategory) => {
         return [...prevProducts, ...(currentCategory.products || [])];
       },
-      [],
+      []
     );
   }, [productCategories]);
 
@@ -88,7 +88,7 @@ export const VenueMapSetModal = ({
     }
 
     const venueMapSet = venueMapSets.find(
-      (venueMapSet) => Number(venueMapSetId) === venueMapSet.id,
+      (venueMapSet) => Number(venueMapSetId) === venueMapSet.id
     );
 
     if (!venueMapSet) {
@@ -103,7 +103,7 @@ export const VenueMapSetModal = ({
       (prevPoints: VenueMapPoint[], currentVenueMap) => {
         return [...prevPoints, ...currentVenueMap.points];
       },
-      [],
+      []
     );
 
     return venueMapsPoints.find((point) => pointProduct.pointId === point.id);
@@ -115,7 +115,7 @@ export const VenueMapSetModal = ({
       show={isVisible}
       className={clsx(
         "m-0 edit-product-set-element-modal edit-right-form-modal",
-        "h-100 edit-venue-map-set",
+        "h-100 edit-venue-map-set"
       )}
       dialogClassName="edit-event-dialog edit-step-dialog"
       onHide={onCloseModal}
@@ -169,7 +169,7 @@ export const VenueMapSetModal = ({
           <Form.Control.Feedback type="invalid">
             {HookFormService.hasError(
               errors?.steps?.[stepIndex]?.venueMapSetId,
-              "required",
+              "required"
             ) &&
               t("Validation:fieldRequired", {
                 attribute: t("Design:venueMapSet"),

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button } from "react-bootstrap";
 import { VenueMap } from "@licklist/core/dist/DataMapper/Product/VenueMapDataMapper";

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

@@ -1,4 +1,4 @@
-import {
+import React, {
   PropsWithChildren,
   SetStateAction,
   createContext,
@@ -27,7 +27,7 @@ interface LoadingContext {
 }
 
 export const ProductSetLoadingContext = createContext<LoadingContext | null>(
-  null,
+  null
 );
 
 type ProductSetContextProviderProps = PropsWithChildren<

package/src/product-set/hooks/useSortableTreeFunctions.ts

@@ -22,6 +22,7 @@ export const useSortableTreeFunctions = ({
   };
 
   const cancelChanges = (index: number) => {
+    if (isOverrides) return;
     if (!previousValue) {
       // eslint-disable-next-line consistent-return
       return remove(index);

package/src/product-set/item/CreateProductSetItem.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import clsx from "clsx";
-import { FaPlus } from "react-icons/fa";
+import { Icon } from "../../static";
 
 interface CreateProductSetItemProps {
   onClick: () => void;
@@ -20,12 +21,17 @@ export function CreateProductSetItem({
         "product-set-item-wrapper w-100",
         `product-set-item-wrapper-${title.toLowerCase().split(" ")[1]}`,
         isOverride && "bg-light",
-        className,
+        className
       )}
       onClick={onClick}
       type="button"
     >
-      <FaPlus size={20} className="rounded product-set-item-icon" />
+      <Icon
+        type="plus"
+        height="1.25rem"
+        width="1.25rem"
+        className="rounded product-set-item-icon"
+      />
       <span>{title}</span>
     </button>
   );

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";