@licklist/design 0.66.13 → 0.67.1

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren } from "react";
+import { ReactNode, PropsWithChildren } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
 import { Spinner } from "react-bootstrap";
@@ -52,7 +52,7 @@ export const BookingSummaryFooter = ({
           {isLoading ? (
             <Spinner animation="border" size="sm" role="status" />
           ) : (
-            buttonLabel ?? t("continue")
+            (buttonLabel ?? t("continue"))
           )}
         </Button>
       )}

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

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useState } from "react";
+import { createContext, useContext, useState } from "react";
+import * as React from "react";
 import { Meta } from "@storybook/react";
 import { CalendarStepsForm } from "./CalendarStepsForm";
 import { Page, PageBody } from "../../../page";
@@ -168,7 +169,7 @@ const OrderProcessContext = createContext<{
 
 const OrderProcessContextProvider: React.FC = ({ children }) => {
   const [orderFormValues, setOrderFormValues] = useState<Record<string, any>>(
-    {}
+    {},
   );
   const [formValues, setFormValues] = useState<Record<string, any>>({});
 

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

@@ -1,4 +1,4 @@
-import React, {
+import {
   useEffect,
   forwardRef,
   useImperativeHandle,
@@ -72,7 +72,7 @@ export const CalendarStepsForm = forwardRef<
       onActiveVenueMapChange,
       soldOutProducts,
     },
-    ref
+    ref,
   ) => {
     const form = useForm({ defaultValues });
     const canvasRef = useRef<VenueMapRef>(null);
@@ -113,14 +113,14 @@ export const CalendarStepsForm = forwardRef<
             min: 1,
             type: "item",
             from: "those categories",
-          })
+          }),
         );
         return;
       }
       const orderError = verifyCategoryItems(
         values,
         step.productCategories,
-        isLastMenuStep
+        isLastMenuStep,
       );
 
       if (orderError) {
@@ -144,7 +144,7 @@ export const CalendarStepsForm = forwardRef<
 
     const venueMaps = useMemo(
       () => menuStepWithVenueMap?.venueMapSet?.venueMaps,
-      [menuStepWithVenueMap]
+      [menuStepWithVenueMap],
     );
 
     const selectedVenueMap = useMemo(() => {
@@ -153,7 +153,7 @@ export const CalendarStepsForm = forwardRef<
       }
 
       return venueMaps.find(
-        (venueMap) => String(venueMap.id) === String(activeVenueMap)
+        (venueMap) => String(venueMap.id) === String(activeVenueMap),
       );
     }, [venueMaps, activeVenueMap, menuStepWithVenueMap]);
 
@@ -163,14 +163,14 @@ export const CalendarStepsForm = forwardRef<
       const { pointProducts } = menuStepWithVenueMap;
 
       const pointProductIds = pointProducts.map(
-        (pointProduct) => pointProduct.pointId
+        (pointProduct) => pointProduct.pointId,
       );
 
       return venueMaps
         .filter(
           ({ points }) =>
             points.length &&
-            points.some(({ id }) => pointProductIds.includes(id))
+            points.some(({ id }) => pointProductIds.includes(id)),
         )
         .map(({ name, id }) => ({ label: name, value: id }));
     }, [venueMaps, menuStepWithVenueMap]);
@@ -183,9 +183,9 @@ export const CalendarStepsForm = forwardRef<
       return selectedVenueMap.points.filter((point) =>
         Boolean(
           menuStepWithVenueMap.pointProducts.find(
-            (pointProduct) => pointProduct.pointId === point.id
-          )
-        )
+            (pointProduct) => pointProduct.pointId === point.id,
+          ),
+        ),
       );
     }, [menuStepWithVenueMap, selectedVenueMap]);
 
@@ -199,14 +199,14 @@ export const CalendarStepsForm = forwardRef<
           const { products } = productCategory;
 
           const filteredProducts = products.filter((currentProduct) =>
-            ids.includes(String(currentProduct.id))
+            ids.includes(String(currentProduct.id)),
           );
 
           if (filteredProducts.length) {
             return [
               ...prevValues,
               ...filteredProducts.map(
-                (filteredProduct) => filteredProduct.uuid
+                (filteredProduct) => filteredProduct.uuid,
               ),
             ];
           }
@@ -214,7 +214,7 @@ export const CalendarStepsForm = forwardRef<
           return prevValues;
         }, []);
       },
-      [step]
+      [step],
     );
 
     const handleOnActiveVenueMapChange = useCallback(
@@ -226,7 +226,7 @@ export const CalendarStepsForm = forwardRef<
         onActiveVenueMapChange(nextVenueMapId);
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [onActiveVenueMapChange]
+      [onActiveVenueMapChange],
     );
 
     const choosedProductUuids = useMemo(
@@ -236,12 +236,12 @@ export const CalendarStepsForm = forwardRef<
             .filter(
               (formKey) =>
                 Boolean(formValues[formKey]?.id) &&
-                formValues[formKey]?.quantity >= 1
+                formValues[formKey]?.quantity >= 1,
             )
-            .map((key) => String(key))
+            .map((key) => String(key)),
         ),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [formValues, getProductsUuids, errors]
+      [formValues, getProductsUuids, errors],
     );
 
     const errorOnChoosedProductUuids = useMemo(() => {
@@ -368,7 +368,7 @@ export const CalendarStepsForm = forwardRef<
         </PageBody.LeftBlock>
       </>
     );
-  }
+  },
 );
 
 CalendarStepsForm.displayName = "CalendarStepsForm";

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

@@ -1,4 +1,3 @@
-import React from "react";
 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";

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
@@ -7,8 +7,8 @@ import {
   Product,
   ProductCategory,
 } from "@licklist/plugins/dist/types/context/sale/menuSteps";
+import { FaTimes } from "react-icons/fa";
 import { CategoryProduct } from "../../CategoryProduct";
-import Icon from "../../../../../static/Icon";
 
 export type CategoryProductModalProps = {
   activePointId?: number;
@@ -30,9 +30,10 @@ export const CategoryProductModal = ({
   const activePointProduct = useMemo(
     () =>
       pointProducts.find(
-        (pointProduct) => String(pointProduct.pointId) === String(activePointId)
+        (pointProduct) =>
+          String(pointProduct.pointId) === String(activePointId),
       ),
-    [activePointId, pointProducts]
+    [activePointId, pointProducts],
   );
 
   return (
@@ -41,7 +42,7 @@ export const CategoryProductModal = ({
         "category-product-modal",
         activePointProduct &&
           activePointProduct.productUuid === product.uuid &&
-          "d-block"
+          "d-block",
       )}
     >
       <CategoryProduct
@@ -56,7 +57,7 @@ export const CategoryProductModal = ({
           className="btn-sm rounded"
           onClick={onCloseModal}
         >
-          <Icon type="times" height="1rem" />
+          <FaTimes />
         </Button>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from "react";
+import { useEffect, useMemo } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -40,7 +40,7 @@ export const CategoryProduct = ({
       return undefined;
     }
     const error = productsWithErrors.find(
-      (productWithError) => productWithError.product_id === product.id
+      (productWithError) => productWithError.product_id === product.id,
     );
     return error?.message;
   }, [productsWithErrors, product.id]);
@@ -50,7 +50,7 @@ export const CategoryProduct = ({
       return undefined;
     }
     const error = soldOutProducts.find(
-      (productWithError) => productWithError.product_id === product.id
+      (productWithError) => productWithError.product_id === product.id,
     );
     return !!error?.message;
   };
@@ -142,7 +142,7 @@ export const CategoryProduct = ({
                   {
                     style: "currency",
                     currency: Config.Currency.GBP,
-                  }
+                  },
                 )}
               </span>
               <ProductQuantityInput

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { Meta } from "@storybook/react";
 import { NumberInput } from "./NumberInput";
 

package/src/iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { forwardRef } from "react";
 import clsx from "clsx";
 import { FormControl } from "react-bootstrap";
 
@@ -29,7 +29,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       defaultValue,
       disabled,
     },
-    ref
+    ref,
   ) => {
     const minusButtonGreyedOut = !value;
     const plusButtonGreyedOut = max > 0 && value === max;
@@ -110,7 +110,7 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
         </button>
       </div>
     );
-  }
+  },
 );
 
 NumberInput.displayName = "NumberInput";

package/src/iframe/order-process/components/CategoryProduct/components/ProductQuantityInput/ProductQuantityInput.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
@@ -74,7 +73,7 @@ export const ProductQuantityInput = ({
           `iframe-event__${
             productInfo?.quantity ? "unselect-product" : "select-product"
           }`,
-          invalid && "error"
+          invalid && "error",
         )}
         onClick={() => onChange(productInfo?.quantity ? 0 : 1)}
       >

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

@@ -1,11 +1,10 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation, Trans } from "react-i18next";
 import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../../../static/Icon";
+import { FaTimes } from "react-icons/fa";
 
 export interface ErrorModalProps {
   isOpen: boolean;
@@ -44,7 +43,7 @@ export const ErrorModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <Icon type="times" height="1rem" />
+          <FaTimes />
         </Button>
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">

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

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "react-bootstrap/Button";
-import Icon from "../../../../static/Icon";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa";
 
 interface NavigationFooterProps {
   onPrevStep: () => void;
@@ -32,12 +32,12 @@ export const NavigationFooter = ({
         className="event-fixed-footer__prev-btn m-0"
         onClick={onPrevButtonClick}
       >
-        <Icon type="arrow-left" width="1rem" />
+        <FaArrowLeft />
       </Button>
 
       <Button className="m-0" disabled={isButtonDisabled} {...buttonProps}>
         {nextButtonLabel ?? t("continue")}
-        <Icon type="arrow-right" width="1rem" className="ml-2" />
+        <FaArrowRight className="ml-2" />
       </Button>
     </div>
   );

package/src/iframe/order-process/components/NavigationSteps/NavigationSteps.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
 import { NavigationSteps } from "./NavigationSteps";

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

@@ -1,10 +1,4 @@
-import React, {
-  useRef,
-  useMemo,
-  useEffect,
-  useState,
-  useCallback,
-} from "react";
+import { useRef, useMemo, useEffect, useState, useCallback } from "react";
 import { useLocation, useHistory } from "react-router-dom";
 import clsx from "clsx";
 import { useTranslation } from "react-i18next";
@@ -48,7 +42,7 @@ export const NavigationSteps = ({
 
   const onStepClick = (
     pathname: string,
-    queryParams?: Record<string, string>
+    queryParams?: Record<string, string>,
   ) => {
     history.push({
       pathname,
@@ -89,7 +83,7 @@ export const NavigationSteps = ({
   }, [recalculateContainerStyles]);
 
   const activeStepIndex = steps.findIndex(
-    (step) => step.pathname === location.pathname
+    (step) => step.pathname === location.pathname,
   );
 
   if (isLoading) return <SnippetLoader />;
@@ -116,7 +110,7 @@ export const NavigationSteps = ({
             <div
               className={clsx(
                 "step",
-                !!Object.keys(stepParams).length && "link"
+                !!Object.keys(stepParams).length && "link",
               )}
               key={pathname}
               ref={refsByIndex[index]}
@@ -126,7 +120,7 @@ export const NavigationSteps = ({
               <div
                 className={clsx(
                   "number",
-                  location.pathname === pathname ? "active" : ""
+                  location.pathname === pathname ? "active" : "",
                 )}
               />
             </div>

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

@@ -1 +1,2 @@
-export { NavigationSteps, NavigationStep } from "./NavigationSteps";
+export { NavigationSteps } from "./NavigationSteps";
+export type { NavigationStep } from "./NavigationSteps";

package/src/iframe/order-process/components/PaymentCard/PaymentCard.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 import { number } from "@storybook/addon-knobs";
 import { PaymentCard } from "./PaymentCard";

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

@@ -1,10 +1,10 @@
-import React, { FC, ReactNode } from "react";
+import { FC, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { Icon } from "../../../../static";
+import { FaCreditCard } from "react-icons/fa";
 
 export type PaymentCardProps = {
   discountBlock?: ReactNode;
@@ -36,7 +36,7 @@ export const PaymentCard: FC<PaymentCardProps> = ({
     (prevSumValue: number, product) => {
       return prevSumValue + product.price * product.quantity;
     },
-    0
+    0,
   );
 
   const totalAmount = () => {
@@ -65,13 +65,13 @@ export const PaymentCard: FC<PaymentCardProps> = ({
   const totalSummary = formatCountToCurrency(totalAmount());
 
   const discountAmount = formatCountToCurrency(
-    totalWithDiscount ? totalFromProducts - totalWithDiscount : 0
+    totalWithDiscount ? totalFromProducts - totalWithDiscount : 0,
   );
 
   return (
     <div className="payment-card">
       <div className="title">
-        <Icon type="credit-card" />
+        <FaCreditCard />
         <p className="m-0">{t("Design:payment")}</p>
       </div>
       <div className="payment-summary mb-5">

package/src/iframe/order-process/components/Timer/Timer.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Meta } from "@storybook/react";
 import { Timer } from "./Timer";
 

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

@@ -1,7 +1,6 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
+import { FaStopwatch } from "react-icons/fa";
 import { fancyTimeFormat } from "./utils";
-import { Icon } from "../../../../static";
 
 export type TimerProps = {
   timer: number;
@@ -15,7 +14,7 @@ export const Timer = ({ timer }: TimerProps) => {
       <div className="timer-wrapper ">
         <div className="timer">
           <div className="d-flex align-items-center">
-            <Icon type="stopwatch" />
+            <FaStopwatch />
           </div>
           <div className="time">{fancyTimeFormat(timer)}</div>
         </div>

package/src/iframe/order-process/components/utils/useCategoryVerification.ts

@@ -17,18 +17,18 @@ export const useCategoryVerification = () => {
   return (
     orderItems: OrderItems,
     productCategories?: ProductCategory[],
-    isLastPage?: boolean
+    isLastPage?: boolean,
   ): CategoryError | void => {
     let errorMessage: { id?: number; message: string } | void;
 
     const productArray = Object.values(orderItems).filter(
-      (product) => product?.quantity > 0
+      (product) => product?.quantity > 0,
     );
 
     const sumOfMinSpends = productCategories.reduce((acc, productCategory) => {
       const { products } = productCategory;
       const selectedProducts = products.filter((product) =>
-        productArray.map((el) => el.id).includes(product?.id)
+        productArray.map((el) => el.id).includes(product?.id),
       );
       const productMinSpendsSum = selectedProducts.reduce((sum, product) => {
         const quantity =
@@ -42,14 +42,14 @@ export const useCategoryVerification = () => {
 
     const totalPrice = productArray.reduce(
       (total, product) => total + product.price * product.quantity,
-      0
+      0,
     );
 
     productCategories.forEach(({ minSubItems, maxSubItems, id, name }) => {
       if (!minSubItems && !maxSubItems) return;
 
       const categoryProductsQuantity = productArray.filter(
-        (product) => product?.productCategoryId === id
+        (product) => product?.productCategoryId === id,
       ).length;
 
       if (minSubItems && categoryProductsQuantity < minSubItems) {

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

@@ -1,5 +1,6 @@
 export { BookingSummary } from "./components/BookingSummary";
-export { NavigationSteps, NavigationStep } from "./components/NavigationSteps";
+export { NavigationSteps } from "./components/NavigationSteps";
+export type { NavigationStep } from "./components/NavigationSteps";
 export { Timer } from "./components/Timer";
 export { NavigationFooter } from "./components/NavigationFooter";
 export { PaymentCard } from "./components/PaymentCard";

package/src/iframe/page/Page.stories.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Button } from "react-bootstrap";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";

package/src/iframe/page/Page.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   ReactNode,
   HTMLAttributes,
@@ -25,7 +25,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(
       isAppUsingInIframe = false,
       ...props
     },
-    ref
+    ref,
   ) => {
     return (
       <div
@@ -33,7 +33,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(
           "iframe-page",
           !headerBlock && "no-header",
           isAppUsingInIframe && "iframe",
-          className
+          className,
         )}
         {...props}
         ref={ref}
@@ -43,7 +43,7 @@ export const Page = forwardRef<HTMLDivElement, PageProps>(
         <PoweredBy url={poweredByUrl} />
       </div>
     );
-  }
+  },
 );
 
 Page.displayName = "Page";

package/src/iframe/page/components/PageBody/PageBody.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
+import { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
 import clsx from "clsx";
 import { RightBlock } from "./components/RightBlock";
 import { LeftBlock } from "./components/LeftBlock";

package/src/iframe/page/components/PageBody/components/LeftBlock/LeftBlock.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, HTMLAttributes, ReactNode } from "react";
+import { PropsWithChildren, HTMLAttributes, ReactNode } from "react";
 import clsx from "clsx";
 import { PageContextProvider } from "@licklist/plugins/dist/context/page/PageContext";
 import { PAGE_LEFT_BLOCK_CONTAINER_ID } from "../../constants";

package/src/iframe/page/components/PageBody/components/RightBlock/RightBlock.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   PropsWithChildren,
   ReactNode,
   HTMLAttributes,
@@ -35,10 +35,10 @@ export const RightBlock = ({
 
   const resizeObserver = new ResizeObserver(() => {
     const childBlockElement = document.getElementById(
-      PAGE_RIGHT_BLOCK_CHILDREN_ID
+      PAGE_RIGHT_BLOCK_CHILDREN_ID,
     );
     const bottomBlockElement = document.getElementById(
-      PAGE_RIGHT_BLOCK_BOTTOM_ID
+      PAGE_RIGHT_BLOCK_BOTTOM_ID,
     );
 
     const height = bottomBlockElement
@@ -52,17 +52,17 @@ export const RightBlock = ({
         detail: {
           height,
         },
-      })
+      }),
     );
   });
 
   useEffect(() => {
     const blockElement = document.getElementById(PAGE_RIGHT_BLOCK_ID);
     const childBlockElement = document.getElementById(
-      PAGE_RIGHT_BLOCK_CHILDREN_ID
+      PAGE_RIGHT_BLOCK_CHILDREN_ID,
     );
     const bottomBlockElement = document.getElementById(
-      PAGE_RIGHT_BLOCK_BOTTOM_ID
+      PAGE_RIGHT_BLOCK_BOTTOM_ID,
     );
 
     const elements = [childBlockElement, bottomBlockElement].filter(Boolean);