@licklist/design 0.68.0-dev.1 → 0.68.1-dev.0

package/src/iframe/order-process/components/CalendarStepsForm/CalendarStepsForm.tsx

@@ -6,52 +6,52 @@ import {
   useMemo,
   useRef,
   useCallback,
-} from "react";
-import { useWatch, useForm, FormProvider } from "react-hook-form";
-import { isEqual } from "lodash";
-import { Form } from "react-bootstrap";
-import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
-import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
+} from 'react'
+import { useWatch, useForm, FormProvider } from 'react-hook-form'
+import { isEqual } from 'lodash'
+import { Form } from 'react-bootstrap'
+import { scrollToError } from '@licklist/plugins/dist/utils/ScrollUtils'
+import { usePreviousValue } from '@licklist/plugins/dist/hooks/Value/usePreviousValue'
 import {
   getFirstErrorKey,
   isFormValuesEmpty,
-} from "@licklist/plugins/dist/utils/FormValues";
-import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
-import { useTranslation } from "react-i18next";
-import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { Category } from "./components/Category";
-import { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
-import { ErrorModal } from "../ErrorModal/ErrorModal";
-import { PageBody } from "../../../page/components/PageBody";
+} from '@licklist/plugins/dist/utils/FormValues'
+import { Step } from '@licklist/core/dist/DataMapper/Product/StepDataMapper'
+import { useTranslation } from 'react-i18next'
+import { Product } from '@licklist/core/dist/DataMapper/Product/ProductDataMapper'
+import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
+import { MenuStep } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { Category } from './components/Category'
+import { MIN_SPEND_ERROR, STEP_FORM_ID } from '../../constants'
+import { ErrorModal } from '../ErrorModal/ErrorModal'
+import { PageBody } from '../../../page/components/PageBody'
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../../calendar/components/CalendarSelect";
-import { IframeEventVenueMap } from "../../../event/event-venue-map";
-import { VenueMapRef } from "../../../../events/event-venue-map/components/VenueMap";
-import { useCategoryVerification } from "../utils/useCategoryVerification";
+} from '../../../../calendar/components/CalendarSelect'
+import { IframeEventVenueMap } from '../../../event/event-venue-map'
+import { VenueMapRef } from '../../../../events/event-venue-map/components/VenueMap'
+import { useCategoryVerification } from '../utils/useCategoryVerification'
 
 // TODO move this component into apps/iframe
 export interface CalendarStepsFormProps {
-  step: MenuStep;
-  isLastMenuStep: boolean;
-  onSubmit: (values: Record<string, any>) => void;
-  setFormValues: (values: Record<string, any>) => void;
-  defaultValues: Record<string, any>;
-  setFormErrors?: (errors: Record<string, any>) => void;
-  id?: string;
-  activeVenueMapId?: string;
-  onActiveVenueMapChange?: (nextVenueMapId: string) => void;
-  title: string;
-  menuStepWithVenueMap: Step;
-  soldOutProducts?: QuantityCheckProductInfo[];
+  step: MenuStep
+  isLastMenuStep: boolean
+  onSubmit: (values: Record<string, any>) => void
+  setFormValues: (values: Record<string, any>) => void
+  defaultValues: Record<string, any>
+  setFormErrors?: (errors: Record<string, any>) => void
+  id?: string
+  activeVenueMapId?: string
+  onActiveVenueMapChange?: (nextVenueMapId: string) => void
+  title: string
+  menuStepWithVenueMap: Step
+  soldOutProducts?: QuantityCheckProductInfo[]
 }
 
 export type StepsFormRef = {
-  getFormValues: () => Record<string, any>;
-};
+  getFormValues: () => Record<string, any>
+}
 
 export const CalendarStepsForm = forwardRef<
   StepsFormRef,
@@ -74,9 +74,9 @@ export const CalendarStepsForm = forwardRef<
     },
     ref,
   ) => {
-    const form = useForm({ defaultValues });
-    const canvasRef = useRef<VenueMapRef>(null);
-    const verifyCategoryItems = useCategoryVerification();
+    const form = useForm({ defaultValues })
+    const canvasRef = useRef<VenueMapRef>(null)
+    const verifyCategoryItems = useCategoryVerification()
     const {
       control,
       formState: { errors },
@@ -85,86 +85,84 @@ export const CalendarStepsForm = forwardRef<
       reset,
       setError,
       clearErrors,
-    } = form;
-    const formValues = useWatch({ control });
-    const prevErrors = usePreviousValue(errors);
-    const { t } = useTranslation("Design");
+    } = form
+    const formValues = useWatch({ control })
+    const prevErrors = usePreviousValue(errors)
+    const { t } = useTranslation('Design')
 
-    const [formStepError, setStepFormError] = useState("");
+    const [formStepError, setStepFormError] = useState('')
     const [activeVenueMap, setActiveVenueMap] =
-      useState<string>(activeVenueMapId);
-    const [activePointId, setActivePointId] = useState<number>(undefined);
-    const [products, setProducts] = useState<Partial<Product>[]>([]);
+      useState<string>(activeVenueMapId)
+    const [activePointId, setActivePointId] = useState<number>(undefined)
+    const [products, setProducts] = useState<Partial<Product>[]>([])
 
-    useImperativeHandle(ref, () => {
-      return {
-        getFormValues: () => getValues(),
-      };
-    });
+    useImperativeHandle(ref, () => ({
+      getFormValues: () => getValues(),
+    }))
 
     const onCloseProductModal = () => {
-      canvasRef.current?.setActiveElementKey(undefined);
-    };
+      canvasRef.current?.setActiveElementKey(undefined)
+    }
 
     const submitCurrentForm = (values: Record<string, any>) => {
       if (isLastMenuStep && isFormValuesEmpty(values)) {
         setStepFormError(
-          t("pleaseSelectAtLeastFrom", {
+          t('pleaseSelectAtLeastFrom', {
             min: 1,
-            type: "item",
-            from: "those categories",
+            type: 'item',
+            from: 'those categories',
           }),
-        );
-        return;
+        )
+        return
       }
       const orderError = verifyCategoryItems(
         values,
         step.productCategories,
         isLastMenuStep,
-      );
+      )
 
       if (orderError) {
         const categoryId = orderError.id
           ? `category_${orderError.id}`
-          : MIN_SPEND_ERROR;
-        setStepFormError(orderError.message);
+          : MIN_SPEND_ERROR
+        setStepFormError(orderError.message)
         setError(categoryId as never, {
           message: orderError.message,
-        });
-        return;
+        })
+        return
       }
 
-      onSubmit(values);
-    };
+      onSubmit(values)
+    }
 
     const onErrorSubmit = (submitErrors) => {
-      scrollToError(getFirstErrorKey(submitErrors));
-      setStepFormError(t("pleaseCheckSelectedProducts"));
-    };
+      scrollToError(getFirstErrorKey(submitErrors))
+      setStepFormError(t('pleaseCheckSelectedProducts'))
+    }
 
     const venueMaps = useMemo(
       () => menuStepWithVenueMap?.venueMapSet?.venueMaps,
       [menuStepWithVenueMap],
-    );
+    )
 
     const selectedVenueMap = useMemo(() => {
       if (!venueMaps || !menuStepWithVenueMap) {
-        return null;
+        return null
       }
 
       return venueMaps.find(
         (venueMap) => String(venueMap.id) === String(activeVenueMap),
-      );
-    }, [venueMaps, activeVenueMap, menuStepWithVenueMap]);
+      )
+    }, [venueMaps, activeVenueMap, menuStepWithVenueMap])
 
     const selectOptions: CalendarSelectOption[] = useMemo(() => {
-      if (!venueMaps || !venueMaps.length || !menuStepWithVenueMap) return [];
+      if (!venueMaps || !venueMaps.length || !menuStepWithVenueMap) return []
 
-      const { pointProducts } = menuStepWithVenueMap;
+      const { pointProducts } = menuStepWithVenueMap
 
       const pointProductIds = pointProducts.map(
         (pointProduct) => pointProduct.pointId,
-      );
+      )
 
       return venueMaps
         .filter(
@@ -172,12 +170,12 @@ export const CalendarStepsForm = forwardRef<
             points.length &&
             points.some(({ id }) => pointProductIds.includes(id)),
         )
-        .map(({ name, id }) => ({ label: name, value: id }));
-    }, [venueMaps, menuStepWithVenueMap]);
+        .map(({ name, id }) => ({ label: name, value: id }))
+    }, [venueMaps, menuStepWithVenueMap])
 
     const filteredPoint = useMemo(() => {
       if (!selectedVenueMap) {
-        return [];
+        return []
       }
 
       return selectedVenueMap.points.filter((point) =>
@@ -186,21 +184,21 @@ export const CalendarStepsForm = forwardRef<
             (pointProduct) => pointProduct.pointId === point.id,
           ),
         ),
-      );
-    }, [menuStepWithVenueMap, selectedVenueMap]);
+      )
+    }, [menuStepWithVenueMap, selectedVenueMap])
 
     const getProductsUuids = useCallback(
       (ids: string[]) => {
         if (!step || !step?.productCategories?.length) {
-          return [];
+          return []
         }
 
         return step?.productCategories.reduce((prevValues, productCategory) => {
-          const { products } = productCategory;
+          const { products } = productCategory
 
           const filteredProducts = products.filter((currentProduct) =>
             ids.includes(String(currentProduct.id)),
-          );
+          )
 
           if (filteredProducts.length) {
             return [
@@ -208,26 +206,26 @@ export const CalendarStepsForm = forwardRef<
               ...filteredProducts.map(
                 (filteredProduct) => filteredProduct.uuid,
               ),
-            ];
+            ]
           }
 
-          return prevValues;
-        }, []);
+          return prevValues
+        }, [])
       },
       [step],
-    );
+    )
 
     const handleOnActiveVenueMapChange = useCallback(
       (nextVenueMapId: string) => {
-        setActiveVenueMap(nextVenueMapId);
+        setActiveVenueMap(nextVenueMapId)
 
-        if (!onActiveVenueMapChange) return;
+        if (!onActiveVenueMapChange) return
 
-        onActiveVenueMapChange(nextVenueMapId);
+        onActiveVenueMapChange(nextVenueMapId)
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [onActiveVenueMapChange],
-    );
+    )
 
     const choosedProductUuids = useMemo(
       () =>
@@ -242,74 +240,78 @@ export const CalendarStepsForm = forwardRef<
         ),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [formValues, getProductsUuids, errors],
-    );
+    )
 
     const errorOnChoosedProductUuids = useMemo(() => {
-      const errorKeys = Object.keys(errors);
+      const errorKeys = Object.keys(errors)
       if (!errorKeys.length) {
-        return [];
+        return []
       }
 
-      return getProductsUuids(Object.keys(errors).map((key) => String(key)));
+      return getProductsUuids(Object.keys(errors).map((key) => String(key)))
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [errors, getProductsUuids, formState]);
+    }, [errors, getProductsUuids, formState])
 
     const getStepProducts = (): Partial<Product>[] => {
       if (!step.productCategories || !step.productCategories.length) {
-        return [];
+        return []
       }
 
-      return step.productCategories.reduce((prevProducts, currentCategory) => {
-        return [...prevProducts, ...(currentCategory.products || [])];
-      }, []);
-    };
+      return step.productCategories.reduce(
+        (prevProducts, currentCategory) => [
+          ...prevProducts,
+          ...(currentCategory.products || []),
+        ],
+        [],
+      )
+    }
 
     useEffect(() => {
-      setProducts(getStepProducts());
+      setProducts(getStepProducts())
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [step]);
+    }, [step])
 
     useEffect(() => {
-      if (!venueMaps.length || activeVenueMap) return;
+      if (!venueMaps.length || activeVenueMap) return
 
-      setActiveVenueMap(String(venueMaps[0].id));
-    }, [venueMaps, activeVenueMap]);
+      setActiveVenueMap(String(venueMaps[0].id))
+    }, [venueMaps, activeVenueMap])
 
     useEffect(() => {
-      setFormValues(formValues);
+      setFormValues(formValues)
       if (errors) {
-        setTimeout(clearErrors, 0);
+        setTimeout(clearErrors, 0)
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formValues]);
+    }, [formValues])
 
     useEffect(() => {
-      if (isFormValuesEmpty(formValues)) return;
+      if (isFormValuesEmpty(formValues)) return
 
-      setStepFormError("");
-    }, [formValues]);
+      setStepFormError('')
+    }, [formValues])
 
     useEffect(() => {
-      reset(defaultValues);
+      reset(defaultValues)
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues]);
+    }, [defaultValues])
 
     useEffect(() => {
-      if (isEqual(errors, prevErrors) || !setFormErrors) return;
+      if (isEqual(errors, prevErrors) || !setFormErrors) return
 
-      setFormErrors(errors);
-    }, [errors, prevErrors, setFormErrors]);
+      setFormErrors(errors)
+    }, [errors, prevErrors, setFormErrors])
 
     useEffect(() => {
-      if (activeVenueMap === activeVenueMapId) return;
+      if (activeVenueMap === activeVenueMapId) return
 
-      setActiveVenueMap(activeVenueMapId);
-    }, [activeVenueMapId, activeVenueMap]);
+      setActiveVenueMap(activeVenueMapId)
+    }, [activeVenueMapId, activeVenueMap])
 
     useEffect(() => {
-      setActivePointId(undefined);
-      onCloseProductModal();
-    }, [activeVenueMap, setActivePointId]);
+      setActivePointId(undefined)
+      onCloseProductModal()
+    }, [activeVenueMap, setActivePointId])
 
     return (
       <>
@@ -329,7 +331,7 @@ export const CalendarStepsForm = forwardRef<
           <ErrorModal
             isOpen={Boolean(formStepError)}
             messageKey={formStepError}
-            onClose={() => setStepFormError("")}
+            onClose={() => setStepFormError('')}
           />
 
           <Form
@@ -367,8 +369,8 @@ export const CalendarStepsForm = forwardRef<
           </Form>
         </PageBody.LeftBlock>
       </>
-    );
+    )
   },
-);
+)
 
-CalendarStepsForm.displayName = "CalendarStepsForm";
+CalendarStepsForm.displayName = 'CalendarStepsForm'

package/src/iframe/order-process/components/CalendarStepsForm/components/Category.tsx

@@ -1,15 +1,15 @@
-import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { ProductCategory } from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { CategoryProductModal } from "./CategoryProductModal";
+import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
+import { ProductCategory } from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { CategoryProductModal } from './CategoryProductModal'
 
 export type CategoryProps = {
-  productCategories: ProductCategory[];
-  activePointId?: number;
-  pointProducts: PointProduct[];
-  onCloseModal: () => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
-};
+  productCategories: ProductCategory[]
+  activePointId?: number
+  pointProducts: PointProduct[]
+  onCloseModal: () => void
+  soldOutProducts?: QuantityCheckProductInfo[]
+}
 
 export const Category = ({
   productCategories,
@@ -17,29 +17,23 @@ export const Category = ({
   pointProducts,
   onCloseModal,
   soldOutProducts,
-}: CategoryProps) => {
-  return (
-    <>
-      {productCategories.length !== 0 &&
-        productCategories.map((category) => {
-          return (
-            <div key={category.id} className="iframe-event__category">
-              {category.products.map((product) => {
-                return (
-                  <CategoryProductModal
-                    key={product.id}
-                    product={product}
-                    category={category}
-                    activePointId={activePointId}
-                    pointProducts={pointProducts}
-                    onCloseModal={onCloseModal}
-                    soldOutProducts={soldOutProducts}
-                  />
-                );
-              })}
-            </div>
-          );
-        })}
-    </>
-  );
-};
+}: CategoryProps) => (
+  <>
+    {productCategories.length !== 0 &&
+      productCategories.map((category) => (
+        <div key={category.id} className="iframe-event__category">
+          {category.products.map((product) => (
+            <CategoryProductModal
+              key={product.id}
+              product={product}
+              category={category}
+              activePointId={activePointId}
+              pointProducts={pointProducts}
+              onCloseModal={onCloseModal}
+              soldOutProducts={soldOutProducts}
+            />
+          ))}
+        </div>
+      ))}
+  </>
+)

package/src/iframe/order-process/components/CalendarStepsForm/components/CategoryProductModal.tsx

@@ -1,23 +1,23 @@
-import { useMemo } from "react";
-import clsx from "clsx";
-import { Button } from "react-bootstrap";
-import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { useMemo } from 'react'
+import clsx from 'clsx'
+import { Button } from 'react-bootstrap'
+import { PointProduct } from '@licklist/core/dist/DataMapper/Product/PointProductDataMapper'
+import { QuantityCheckProductInfo } from '@licklist/plugins/dist/types/Api/verifyStock'
 import {
   Product,
   ProductCategory,
-} from "@licklist/plugins/dist/types/context/sale/menuSteps";
-import { FaTimes } from "react-icons/fa";
-import { CategoryProduct } from "../../CategoryProduct";
+} from '@licklist/plugins/dist/types/context/sale/menuSteps'
+import { FaTimes } from 'react-icons/fa'
+import { CategoryProduct } from '../../CategoryProduct'
 
 export type CategoryProductModalProps = {
-  activePointId?: number;
-  product: Product;
-  category: ProductCategory;
-  pointProducts: PointProduct[];
-  onCloseModal: () => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
-};
+  activePointId?: number
+  product: Product
+  category: ProductCategory
+  pointProducts: PointProduct[]
+  onCloseModal: () => void
+  soldOutProducts?: QuantityCheckProductInfo[]
+}
 
 export const CategoryProductModal = ({
   activePointId,
@@ -34,15 +34,15 @@ export const CategoryProductModal = ({
           String(pointProduct.pointId) === String(activePointId),
       ),
     [activePointId, pointProducts],
-  );
+  )
 
   return (
     <div
       className={clsx(
-        "category-product-modal",
+        'category-product-modal',
         activePointProduct &&
           activePointProduct.productUuid === product.uuid &&
-          "d-block",
+          'd-block',
       )}
     >
       <CategoryProduct
@@ -61,5 +61,5 @@ export const CategoryProductModal = ({
         </Button>
       </div>
     </div>
-  );
-};
+  )
+}

package/src/iframe/order-process/components/CalendarStepsForm/index.ts

@@ -1,2 +1,2 @@
-export { CalendarStepsForm } from "./CalendarStepsForm";
-export type { CalendarStepsFormProps } from "./CalendarStepsForm";
+export { CalendarStepsForm } from './CalendarStepsForm'
+export type { CalendarStepsFormProps } from './CalendarStepsForm'