@licklist/design 0.66.12-dev.2 → 0.66.12

package/src/iframe/order-process/components/BookingSummary/components/ToggleHeader/ToggleHeader.tsx

@@ -1,9 +1,9 @@
-import { ReactElement, useContext, useEffect } from "react";
+import React, { ReactElement, useContext, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useAccordionToggle } from "react-bootstrap/AccordionToggle";
 import AccordionContext from "react-bootstrap/AccordionContext";
 import clsx from "clsx";
-import { FaChevronDown, FaChevronUp } from "react-icons/fa";
+import { Icon } from "../../../../../../static";
 import { ACCORDION_KEY } from "../../types";
 
 type ToggleHeaderProps = {
@@ -56,7 +56,7 @@ export const ToggleHeader = ({
       tabIndex={0}
       className={clsx(
         "d-flex flex-column",
-        isPaymentPage && "payment-page-toggle",
+        isPaymentPage && "payment-page-toggle"
       )}
     >
       <h6 className={clsx("title", showExpandButton && "pointer")}>
@@ -91,11 +91,14 @@ const HeaderContent = ({
           <p className="m-0 mr-2 toggle-title">{title || t("yourBooking")}</p>
           {showExpandButton && (
             <div className="expand-button">
-              {currentEventKey === ACCORDION_KEY ? (
-                <FaChevronUp size={8} />
-              ) : (
-                <FaChevronDown size={8} />
-              )}
+              <Icon
+                type={
+                  currentEventKey === ACCORDION_KEY
+                    ? "chevron-up"
+                    : "chevron-down"
+                }
+                width="0.5rem"
+              />
             </div>
           )}
         </div>
@@ -111,11 +114,12 @@ const HeaderContent = ({
 
       {showExpandButton && (
         <div className="expand-button">
-          {currentEventKey === ACCORDION_KEY ? (
-            <FaChevronUp size={16} />
-          ) : (
-            <FaChevronDown size={16} />
-          )}
+          <Icon
+            type={
+              currentEventKey === ACCORDION_KEY ? "chevron-up" : "chevron-down"
+            }
+            width="1rem"
+          />
         </div>
       )}
     </>

package/src/iframe/order-process/components/BookingSummary/utils/index.ts

@@ -14,8 +14,8 @@ export const cartSumByOrderProducts = (orderProducts?: OrderItem[]) => {
 
 export const getProductError = (
   productsWithErrors: QuantityCheckProductInfo[],
-  productId: OrderItem["id"],
+  productId: OrderItem["id"]
 ): string | undefined =>
   productsWithErrors.find(
-    (productWithError) => productWithError.product_id === productId,
+    (productWithError) => productWithError.product_id === productId
   )?.message;

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

@@ -1,4 +1,4 @@
-import { ReactNode, PropsWithChildren } from "react";
+import React, { 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,5 +1,4 @@
-import { createContext, useContext, useState } from "react";
-import * as React from "react";
+import React, { createContext, useContext, useState } from "react";
 import { Meta } from "@storybook/react";
 import { CalendarStepsForm } from "./CalendarStepsForm";
 import { Page, PageBody } from "../../../page";
@@ -169,7 +168,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 {
+import React, {
   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,3 +1,4 @@
+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 { useMemo } from "react";
+import React, { 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,10 +30,9 @@ 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 (
@@ -42,7 +41,7 @@ export const CategoryProductModal = ({
         "category-product-modal",
         activePointProduct &&
           activePointProduct.productUuid === product.uuid &&
-          "d-block",
+          "d-block"
       )}
     >
       <CategoryProduct
@@ -57,7 +56,7 @@ export const CategoryProductModal = ({
           className="btn-sm rounded"
           onClick={onCloseModal}
         >
-          <FaTimes />
+          <Icon type="times" height="1rem" />
         </Button>
       </div>
     </div>

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo } from "react";
+import React, { 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 { useState } from "react";
+import React, { 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 { forwardRef } from "react";
+import React, { 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,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
@@ -74,7 +75,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,10 +1,11 @@
+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 { FaTimes } from "react-icons/fa";
+import Icon from "../../../../static/Icon";
 
 export interface ErrorModalProps {
   isOpen: boolean;
@@ -43,7 +44,7 @@ export const ErrorModal = ({
           className="btn-sm rounded"
           onClick={handleClose}
         >
-          <FaTimes />
+          <Icon type="times" height="1rem" />
         </Button>
       </ModalHeader>
       <ModalBody className="confirmation-modal-body">

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

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

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

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

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

@@ -1,3 +1,4 @@
+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 { FC, ReactNode } from "react";
+import React, { 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 { FaCreditCard } from "react-icons/fa";
+import { Icon } from "../../../../static";
 
 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">
-        <FaCreditCard />
+        <Icon type="credit-card" />
         <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,3 +1,4 @@
+import React from "react";
 import { Meta } from "@storybook/react";
 import { Timer } from "./Timer";
 

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

@@ -1,6 +1,7 @@
+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;
@@ -14,7 +15,7 @@ export const Timer = ({ timer }: TimerProps) => {
       <div className="timer-wrapper ">
         <div className="timer">
           <div className="d-flex align-items-center">
-            <FaStopwatch />
+            <Icon type="stopwatch" />
           </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,6 +1,5 @@
 export { BookingSummary } from "./components/BookingSummary";
-export { NavigationSteps } from "./components/NavigationSteps";
-export type { NavigationStep } from "./components/NavigationSteps";
+export { NavigationSteps, 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,3 +1,4 @@
+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 {
+import React, {
   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 { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
+import React, { 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 { PropsWithChildren, HTMLAttributes, ReactNode } from "react";
+import React, { 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";