@licklist/design 0.66.12-dev.2 → 0.66.12

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

@@ -1,14 +1,13 @@
-import { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState, useContext } from "react";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
 import { uniqueId } from "lodash";
-import { Badge, Button } from "react-bootstrap";
+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";
 import {
@@ -26,11 +25,7 @@ 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 { SelectCategoryModal } from "./SelectCategoryModal";
 import { ProductSetLoadingContext } from "./context";
 import { VenueMapSetModal } from "./VenueMapSetModal";
 import { moveArrayElements, sortArrayByIndex } from "../utils";
@@ -38,29 +33,6 @@ 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;
@@ -70,7 +42,7 @@ interface ProductCategoriesControlProps extends WithIsLoading {
 
 const getCategoryDefaultValue = (
   categoryType: CategoryType,
-  sort: number,
+  sort: number
 ): ProductCategory => ({
   id: null,
   uniqueId: uniqueId("product-category"),
@@ -89,6 +61,7 @@ const getCategoryDefaultValue = (
   isReusable: false,
   hasSubEvents: false,
   products: [],
+  zoneId: null,
   sort,
 });
 
@@ -104,6 +77,7 @@ export function ProductCategoriesControl({
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -180,8 +154,8 @@ export function ProductCategoriesControl({
       moveArrayElements<ProductCategory>(
         productCategories,
         prevIndex,
-        nextIndex,
-      ),
+        nextIndex
+      )
     );
 
     setValue(productCategoriesFieldName, nextProductCategories);
@@ -246,9 +220,7 @@ export function ProductCategoriesControl({
 
           const isOverridesCategory = productCategory.products?.some(
             (product) =>
-              isEventEditProductSet
-                ? !!product.id
-                : !!product.originalProductId,
+              isEventEditProductSet ? !!product.id : !!product.originalProductId
           );
           const isNewOverridesCategory =
             isCreateNewOverrides && !!productCategory.id;
@@ -256,8 +228,6 @@ export function ProductCategoriesControl({
             setIsExpanded(productCategoryId);
           };
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type];
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -298,16 +268,10 @@ export function ProductCategoriesControl({
                   modalLabel={t("addNewCategory")}
                   secondaryBadge={getBadgeConfig(
                     productCategory.type,
-                    t(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}
@@ -341,6 +305,7 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
@@ -385,7 +350,7 @@ export function ProductCategoriesControl({
             className={clsx(
               "mt-3",
               showVenueMapSetError && "mb-3",
-              showVenueMapSetError && "is-invalid",
+              showVenueMapSetError && "is-invalid"
             )}
           />
           {showVenueMapSetError && (
@@ -418,7 +383,7 @@ export function ProductCategoriesControl({
 
 export const getBadgeConfig = (
   categoryType: CategoryType,
-  label: string,
+  label: string
 ): { label: string; className: string } | null => {
   if (categoryType === CATEGORY_TYPE_GAME)
     return {

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

@@ -1,5 +1,6 @@
 /* eslint-disable max-len */
 /* eslint-disable no-console */
+import React from "react";
 import { Meta, Story } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import {

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

@@ -1,8 +1,8 @@
-import { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { FormValues } from "@licklist/plugins/dist/types/services/Form/hook-form-service";
 import { Button, Form, Col, Row } from "react-bootstrap";
 import { FormProvider, useForm } from "react-hook-form";
-import { TFunction, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { VenueMapSet } from "@licklist/core/dist/DataMapper/Product/VenueMapSetDataMapper";
 import { ServerError } from "@licklist/plugins/dist/hooks/Api/useHttpQuery";
 import FormErrorService from "@licklist/plugins/dist/services/Form/FormErrorService";
@@ -22,21 +22,16 @@ import { Step } from "../types";
 import { ProductSetContextProvider, ProductSetLoadingContext } from "./context";
 import { SelectItem } from "../../types/generic/SelectItem";
 import { checkAvailableTimesErrors, getFilteredTemplates } from "../utils";
-import { ErrorModal } from "../../iframe/order-process/components/ErrorModal";
 
 export interface WithIsLoading {
   isLoading: boolean;
 }
-export interface WithIdOptional {
-  id?: number;
-}
-
 export interface WithId {
   id: number;
 }
 export interface ProductSetFormValues
   extends FormValues,
-    WithIdOptional,
+    WithId,
     ProductSetControlValues {
   steps: Step[];
   isOverrides?: boolean;
@@ -87,7 +82,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
-  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -100,13 +94,7 @@ export function ProductSetForm({
 
   const submitHandler = (onSubmit: (values: ProductSetFormValues) => void) => {
     return (values: ProductSetFormValues) => {
-      if (
-        checkAvailableTimesErrors({
-          values,
-          setError,
-          t: t as TFunction<string>,
-        })
-      ) {
+      if (checkAvailableTimesErrors({ values, setError, t })) {
         return;
       }
       onSubmit(values);
@@ -125,18 +113,11 @@ export function ProductSetForm({
     if (!serverErrors) {
       return;
     }
-    if (Array.isArray(serverErrors) && serverErrors[0]) {
-      setErrorMessage(serverErrors[0]);
-    }
     FormErrorService.handleServerErrors(serverErrors, setError);
   }, [serverErrors, setError]);
 
   useEffect(() => {
-    window.history.pushState(
-      null,
-      "",
-      window.location.pathname + window.location.search,
-    );
+    window.history.pushState(null, "", window.location.pathname);
     window.addEventListener("beforeunload", onBeforeUnload);
     window.addEventListener("popstate", onPopState);
 
@@ -163,12 +144,6 @@ export function ProductSetForm({
         onDecline={onDeclineDialog}
       />
 
-      <ErrorModal
-        message={errorMessage}
-        isOpen={!!errorMessage}
-        onClose={() => setErrorMessage("")}
-      />
-
       <FormProvider {...form}>
         <Form onSubmit={form.handleSubmit(submitHandler(onSubmitAndRedirect))}>
           <ProductSetLoadingContext.Consumer>
@@ -179,11 +154,11 @@ export function ProductSetForm({
                     {...shared}
                     smsTemplates={getFilteredTemplates(
                       shared?.smsTemplates,
-                      formValues?.smsTemplates,
+                      formValues?.smsTemplates
                     )}
                     emailTemplates={getFilteredTemplates(
                       shared?.emailTemplates,
-                      formValues?.emailTemplates,
+                      formValues?.emailTemplates
                     )}
                     showEmailTemplate={!!shared?.emailTemplates}
                     showSmsTemplate={!!shared?.smsTemplates}
@@ -206,7 +181,7 @@ export function ProductSetForm({
                         <Button
                           className="product-set-save-btn mt-5 ml-5 d-no dne d-md-block"
                           onClick={form.handleSubmit(
-                            submitHandler(onSubmitNoRedirect),
+                            submitHandler(onSubmitNoRedirect)
                           )}
                           disabled={
                             isLoading || contextIsLoading || !formValues.name

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

@@ -1,4 +1,4 @@
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { useClickAway } from "react-use";
 import { Tabs } from "../../static";
 import { ProductSetPopover } from "../popover";

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,6 +33,7 @@ interface ProductsControlProps extends WithIsLoading {
   productCategoryIndex: number;
   hasTicket?: boolean;
   categoryType: CategoryType;
+  zones?: Zone[];
   isOverrides?: boolean;
   isEventEditProductSet?: boolean;
   isCreateNewOverrides?: boolean;
@@ -48,6 +50,8 @@ const getDefaultProductValue = (sort: number): Product => ({
   minQuantity: null,
   maxQuantity: null,
   totalQuantity: 0,
+  capacity: 0,
+  duration: 0,
   isAvailable: true,
   isSoldOut: false,
   isRequired: false,
@@ -58,9 +62,14 @@ 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,
 });
 
@@ -71,6 +80,7 @@ export function ProductsControl({
   productCategoryIndex,
   hasTicket,
   categoryType,
+  zones,
   isOverrides,
   isEventEditProductSet,
   isCreateNewOverrides,
@@ -89,6 +99,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 +123,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 +131,7 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) => `${productControlFieldName}.${index}.price` as const,
+        (_, index) => `${productControlFieldName}.${index}.price` as const
       ),
     ],
   });
@@ -124,7 +140,7 @@ export function ProductsControl({
     name: [
       ...fields.map(
         (_, index) =>
-          `${productControlFieldName}.${index}.totalQuantity` as const,
+          `${productControlFieldName}.${index}.totalQuantity` as const
       ),
     ],
   });
@@ -133,8 +149,7 @@ export function ProductsControl({
     control,
     name: [
       ...fields.map(
-        (_, index) =>
-          `${productControlFieldName}.${index}.isUnlimited` as const,
+        (_, index) => `${productControlFieldName}.${index}.isUnlimited` as const
       ),
     ],
   });
@@ -172,7 +187,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 +195,8 @@ export function ProductsControl({
     setValue(
       productPointsKey,
       currentPointProducts?.filter(
-        (product) => product.productUuid !== currentProduct.uuid,
-      ) || [],
+        (product) => product.productUuid !== currentProduct.uuid
+      ) || []
     );
     remove(index);
   };
@@ -259,6 +274,7 @@ export function ProductsControl({
                       onProductNameChange={onChange}
                       hasTicket={hasTicket}
                       categoryType={categoryType}
+                      zoneDuration={catergoryZone?.defaultDuration}
                       isOverrides={
                         isNewProductOverrides || isOverridesProductSet
                       }

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

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/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>
   );