@licklist/design 0.66.2-dev.1 → 0.66.3

package/src/product-set/elements/DeleteFieldButton.tsx

@@ -1,7 +1,8 @@
+import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
-import { FaTrashAlt } from "react-icons/fa";
 import { IsDeletableEvent } from "../types";
+import Icon from "../../static/Icon";
 
 export type DeleteFieldButtonProps = IsDeletableEvent;
 
@@ -14,7 +15,7 @@ export function DeleteFieldButton({ onDelete }: DeleteFieldButtonProps) {
       variant="outline-danger"
       className="d-flex align-items-center"
     >
-      <FaTrashAlt size={16} />{" "}
+      <Icon type="trash" height="1rem" />{" "}
       <span className="d-none d-sm-inline ml-2">{t("delete")}</span>
     </Button>
   );

package/src/product-set/elements/Elements.stories.tsx

@@ -1,4 +1,5 @@
 import { Meta, Story } from "@storybook/react";
+import React from "react";
 import { DeleteFieldButton, DeleteFieldButtonProps } from "./DeleteFieldButton";
 
 export default {

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

@@ -1,17 +1,48 @@
+import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 
+// @TODO Modal hided for first release.
+
 export function MobileFooter() {
   const { t } = useTranslation("Design");
+  // const [isModalVisible, setIsModalVisible] = useState(false);
 
   return (
-    <div className="container product-set-mobile-footer">
-      <div
-        className={`d-block d-sm-none bg-white border-top fixed-bottom
+    <>
+      <div className="container product-set-mobile-footer">
+        <div
+          className={`d-block d-sm-none bg-white border-top fixed-bottom
          py-4 px-5 d-flex justify-content-between flex-row-reverse`}
-      >
-        <Button type="submit">{t("save")}</Button>
+        >
+          {/* <Button
+            variant="outline-primary"
+            size="sm"
+            className="btn-icon-popover rounded-circle"
+            onClick={() => setIsModalVisible(true)}
+          >
+            <Icon type="plus" width=".9rem" />
+          </Button> */}
+          <Button type="submit">{t("save")}</Button>
+        </div>
       </div>
-    </div>
+      {/* <Modal
+        show={isModalVisible}
+        onHide={() => setIsModalVisible(false)}
+        dialogClassName="product-set-mobile-modal fixed-bottom"
+        animation={false}
+      >
+        <Modal.Body>
+          <Tabs>
+            <Tabs.Tab eventKey="reusableSubsets" title="Reusable subsets"> */}
+      {/* @TODO: Implement logic here */}
+      {/* <p>Substet 1</p>
+              <p>Subset 2</p>
+              <p className="mb-0">Subset 3</p>
+            </Tabs.Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal> */}
+    </>
   );
 }

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

@@ -1,4 +1,4 @@
-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 } from "react-bootstrap";
@@ -8,7 +8,6 @@ import {
   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,39 +33,14 @@ 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;
 }
 
 const getCategoryDefaultValue = (
   categoryType: CategoryType,
-  sort: number,
+  sort: number
 ): ProductCategory => ({
   id: null,
   uniqueId: uniqueId("product-category"),
@@ -89,6 +59,7 @@ const getCategoryDefaultValue = (
   isReusable: false,
   hasSubEvents: false,
   products: [],
+  zoneId: null,
   sort,
 });
 
@@ -96,14 +67,13 @@ export function ProductCategoriesControl({
   isLoading,
   stepIndex,
   isOverrides,
-  isEventEditProductSet,
-  isCreateNewOverrides,
 }: ProductCategoriesControlProps) {
   const { t } = useTranslation("Design");
   const {
     providerHasMap,
     expandedProductCategories,
     setExpandedProductCategories,
+    zones,
   } = useContext(ProductSetLoadingContext);
   const form = useFormContext<ProductSetFormValues>();
   const [isSelectCategoryVisible, setIsSelectCategoryVisible] = useState(false);
@@ -180,8 +150,8 @@ export function ProductCategoriesControl({
       moveArrayElements<ProductCategory>(
         productCategories,
         prevIndex,
-        nextIndex,
-      ),
+        nextIndex
+      )
     );
 
     setValue(productCategoriesFieldName, nextProductCategories);
@@ -244,20 +214,10 @@ export function ProductCategoriesControl({
             ? String(productCategory.id)
             : productCategory.uniqueId;
 
-          const isOverridesCategory = productCategory.products?.some(
-            (product) =>
-              isEventEditProductSet
-                ? !!product.id
-                : !!product.originalProductId,
-          );
-          const isNewOverridesCategory =
-            isCreateNewOverrides && !!productCategory.id;
           const onSetIsExpanded = () => {
             setIsExpanded(productCategoryId);
           };
 
-          const categoryType = CATEGORIES_TYPE[productCategory.type];
-
           return (
             <Controller
               key={`product-category-${productCategory._id}`}
@@ -298,16 +258,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}
@@ -315,10 +269,7 @@ export function ProductCategoriesControl({
                       categoryName={value}
                       stepIndex={stepIndex}
                       productCategoryIndex={index}
-                      isOverride={
-                        isNewOverridesCategory ||
-                        (isOverrides && isOverridesCategory)
-                      }
+                      isOverride={isOverrides}
                     />
                   }
                   isOverride={isOverrides}
@@ -341,11 +292,10 @@ export function ProductCategoriesControl({
                     quantityType={productCategory.quantityType}
                     hasTicket={productCategory?.hasTicket}
                     stepIndex={stepIndex}
+                    zones={zones}
                     productCategoryIndex={index}
                     categoryType={productCategory.type}
                     isOverrides={isOverrides}
-                    isEventEditProductSet={isEventEditProductSet}
-                    isCreateNewOverrides={isCreateNewOverrides}
                   />
                 </SortableTree.Item>
               )}
@@ -355,7 +305,9 @@ export function ProductCategoriesControl({
       </SortableTree>
       <CreateProductSetItem
         title={t("addCategory")}
+        isOverride={isOverrides}
         onClick={() => {
+          if (isOverrides) return;
           setIsSelectCategoryVisible(true);
         }}
       />
@@ -364,6 +316,7 @@ export function ProductCategoriesControl({
         isVisible={isSelectCategoryVisible}
         onHide={() => setIsSelectCategoryVisible(false)}
         onCategorySelect={(categoryType) => {
+          if (isOverrides) return;
           append(getCategoryDefaultValue(categoryType, fields.length));
           setShowCategoryModal(true);
           if (
@@ -385,7 +338,7 @@ export function ProductCategoriesControl({
             className={clsx(
               "mt-3",
               showVenueMapSetError && "mb-3",
-              showVenueMapSetError && "is-invalid",
+              showVenueMapSetError && "is-invalid"
             )}
           />
           {showVenueMapSetError && (
@@ -418,7 +371,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;
@@ -58,7 +53,6 @@ export interface ProductSetFormProps
   isCreateAction?: boolean;
   isOverrides?: boolean;
   workHours?: WorkHour[];
-  isCreateNewOverrides?: boolean;
 }
 
 export function ProductSetForm({
@@ -76,7 +70,6 @@ export function ProductSetForm({
   isCreateAction,
   workHours,
   isOverrides,
-  isCreateNewOverrides,
   ...shared
 }: ProductSetFormProps) {
   const { t } = useTranslation("Design");
@@ -87,7 +80,6 @@ export function ProductSetForm({
     onApproveDialog,
     onDeclineDialog,
   } = useDialogContext();
-  const [errorMessage, setErrorMessage] = useState("");
 
   const form = useForm<ProductSetFormValues>({
     defaultValues,
@@ -100,13 +92,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 +111,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 +142,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 +152,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}
@@ -193,7 +166,6 @@ export function ProductSetForm({
                     workHours={workHours}
                     providerHasBookingManagement={providerHasBookingManagement}
                     isOverrides={isOverrides}
-                    isCreateNewOverrides={isCreateNewOverrides}
                   />
                   <Row>
                     <Col md={6} sm={12} />
@@ -206,7 +178,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";