@licklist/design 0.44.485-dev.70 → 0.44.485-dev.71

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

@@ -1,14 +1,14 @@
 import React from "react";
 
 import { DeepMap, FieldError } from "react-hook-form";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../types";
 import { CategoryProduct } from "../CategoryProduct";
-import { StepsFormProps } from "../StepsForm/StepsForm";
 
 interface CategoryProps {
   productCategories: ProductCategory[];
-  productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 

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

@@ -5,17 +5,17 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { TicketDescription } from "../../../event/ticket-description";
 import { ProductCategory, Product } from "../../../../types";
-import { StepsFormProps } from "../StepsForm/StepsForm";
 import { ProductQuantityInput } from "./components/ProductQuantityInput";
 
 interface CategoryProductProps {
   product: Product;
   category: ProductCategory;
   canExpandDescription?: boolean;
-  productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
+  soldOutProducts?: ProductQuantityCheckResponse["products"];
 }
 
 export const CategoryProduct = ({

package/src/iframe/order-process/components/{CalendarStepsForm/components → ErrorModal}/ErrorModal.tsx

@@ -5,7 +5,7 @@ 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 Icon from "../../../../static/Icon";
 
 export interface ErrorModalProps {
   isOpen: boolean;

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

@@ -0,0 +1 @@
+export { ErrorModal } from "./ErrorModal";

package/src/iframe/order-process/components/utils/{category.ts → useCategoryVerification.ts}

@@ -1,30 +1,34 @@
 import { useTranslation } from "react-i18next";
-import { MenuStep } from "../../../../types";
+import { MenuStep, Order } from "src/types";
 
 interface CategoryError {
   message: string;
   id: number;
 }
-export const useCategory = () => {
+
+// TODO it's temporary solution, please remove it later
+export const useCategoryVerification = () => {
   const { t } = useTranslation("Validation");
-  const verifyCategoryItems = (
-    values: Record<string, any>,
+
+  return (
+    values: Record<Order["id"], Order>,
     step: MenuStep
   ): CategoryError | void => {
     let errorMessage;
+
     const productArray = Object.values(values).filter(
       (product) => product?.quantity > 0
     );
+
     step?.productCategories.forEach(
       ({ minSubItems, maxSubItems, id, name }) => {
-        if (!minSubItems && !maxSubItems) {
-          return;
-        }
+        if (!minSubItems && !maxSubItems) return;
 
         const categoryProductsQuantity = productArray.filter(
-          (product) => Number(product?.productsCategoryId) === Number(id)
+          (product) => product?.productsCategoryId === id
         ).length;
-        if (categoryProductsQuantity < minSubItems) {
+
+        if (minSubItems && categoryProductsQuantity < minSubItems) {
           const message = t("Validation:fieldMinNumber", {
             min: minSubItems,
             attribute: `number of products in the ${name} category`,
@@ -33,6 +37,7 @@ export const useCategory = () => {
 
           return;
         }
+
         if (maxSubItems && categoryProductsQuantity > maxSubItems) {
           const message = t("Validation:fieldMaxNumber", {
             max: maxSubItems,
@@ -42,7 +47,7 @@ export const useCategory = () => {
         }
       }
     );
+
     return errorMessage;
   };
-  return { verifyCategoryItems };
 };

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

@@ -1,6 +1,5 @@
 export { BookingSummary } from "./components/BookingSummary";
 export { NavigationSteps } from "./components/NavigationSteps";
-export { StepsForm } from "./components/StepsForm";
 export { Timer } from "./components/Timer";
 export { NavigationFooter } from "./components/NavigationFooter";
 export { PaymentCard } from "./components/PaymentCard";
@@ -8,3 +7,6 @@ export { BookingSummaryFooter } from "./components/BookingSummaryFooter";
 export type { BookingSummaryFooterProps } from "./components/BookingSummaryFooter";
 export { CalendarStepsForm } from "./components/CalendarStepsForm";
 export type { CalendarStepsFormProps } from "./components/CalendarStepsForm";
+export { useCategoryVerification } from "./components/utils/useCategoryVerification";
+export { Category } from "./components/Category";
+export { ErrorModal } from "./components/ErrorModal";

package/src/product-set/product-category/ProductCategoryControl.tsx

@@ -105,7 +105,7 @@ export function ProductCategoryControl({
 
   const allowDepositsId = useId();
   const remainderExpireAfterId = useId();
-  const { providerHasBookingManagement, zones } = useContext(
+  const { providerHasBookingManagement, zones = [] } = useContext(
     ProductSetLoadingContext
   );
 

package/src/sales/manual-booking/controll/ManualBookingStepsControll.tsx

@@ -4,7 +4,7 @@ import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { OrderProduct } from "@licklist/core/dist/DataMapper/Order/OrderProductDataMapper";
-import { ErrorModal } from "../../../iframe/order-process/components/CalendarStepsForm/components/ErrorModal";
+import { ErrorModal } from "../../../iframe/order-process/components/ErrorModal/ErrorModal";
 import { MenuStep } from "../../../types";
 import { CollapsibleInputGroup } from "../../../collapsible-input-group";
 import { CategoryProducts } from "../category-products/CategoryProducts";

package/src/types/iframe.ts

@@ -38,6 +38,8 @@ export interface Menu {
   menuSteps: MenuStep[];
 }
 
+// TODO similar type exists in iframe app
+// remove this when components are moved to iframe
 export interface Order {
   id: number;
   quantity: number;

package/dist/iframe/order-process/components/CalendarStepsForm/components/ErrorModal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ErrorModal.d.ts","sourceRoot":"","sources":["../../../../../../src/iframe/order-process/components/CalendarStepsForm/components/ErrorModal.tsx"],"names":[],"mappings":";AASA,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,UAAU,qCAIpB,eAAe,gBA2CjB,CAAC"}

package/dist/iframe/order-process/components/CalendarStepsForm/components/ErrorModal.js

@@ -1 +0,0 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react")),r=require("react-i18next"),a=require("react-bootstrap"),o=require("../../../../../static/Icon.js"),n=e(require("react-bootstrap/ModalHeader")),s=e(require("react-bootstrap/ModalTitle")),i=e(require("react-bootstrap/ModalBody")),c=e(require("react-bootstrap/Modal"));exports.ErrorModal=function(e){var l=e.isOpen,m=void 0!==l&&l,u=e.onClose,d=e.messageKey,f=r.useTranslation("Design").t,p=function(){u&&u()};return t.createElement(c,{show:m,onHide:p,animation:!1,centered:!0,contentClassName:"rounded"},t.createElement(n,{className:"align-items-center border-0"},t.createElement(s,{as:"h6"},f("formHasErrors")),t.createElement(a.Button,{variant:"danger",className:"btn-sm rounded",onClick:p},t.createElement(o.default,{type:"times",height:"1rem"}))),t.createElement(i,{className:"confirmation-modal-body"},t.createElement("div",{className:"d-flex m-5 justify-content-center manual-form-error"},d?f(d):t.createElement(r.Trans,{t:f,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"those categories"}}))))};

package/dist/iframe/order-process/components/StepsForm/StepsForm.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { MenuStep } from "../../../../types";
-export interface StepsFormProps {
-    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;
-    productsWithErrors?: ProductQuantityCheckResponse["products"];
-    soldOutProducts?: ProductQuantityCheckResponse["products"];
-}
-export type StepsFormRef = {
-    getFormValues: () => Record<string, any>;
-};
-export declare const StepsForm: React.ForwardRefExoticComponent<StepsFormProps & React.RefAttributes<StepsFormRef>>;
-//# sourceMappingURL=StepsForm.d.ts.map

package/dist/iframe/order-process/components/StepsForm/StepsForm.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StepsForm.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/StepsForm/StepsForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,4BAA4B,EAAE,MAAM,8CAA8C,CAAC;AAE5F,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,QAAQ,CAAC;IACf,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACrD,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IACtD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kBAAkB,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;IAC9D,eAAe,CAAC,EAAE,4BAA4B,CAAC,UAAU,CAAC,CAAC;CAC5D;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,SAAS,qFAsIrB,CAAC"}

package/dist/iframe/order-process/components/StepsForm/StepsForm.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,r=require("tslib"),t=require("react"),s=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,o=require("react-i18next"),u=require("react-bootstrap"),i=require("react-hook-form"),a=require("lodash"),l=require("@licklist/plugins/dist/hooks/Value/usePreviousValue"),n=require("@licklist/plugins/dist/utils/ScrollUtils"),c=require("@licklist/plugins/dist/utils/FormValues"),d=require("../Category/Category.js"),m=require("../../constants.js"),f=require("../CalendarStepsForm/components/ErrorModal.js"),E=require("../utils/category.js"),p="NO_ORDER_ITEMS_ERROR",g=t.forwardRef((function(e,g){var v=e.step,y=e.isLastMenuStep,q=e.setFormValues,F=e.defaultValues,S=e.onSubmit,V=e.setFormErrors,_=e.id,C=void 0===_?m.STEP_FORM_ID:_,h=e.productsWithErrors,O=e.soldOutProducts,P=i.useForm({defaultValues:F}),b=o.useTranslation(["Design","Validation"]).t,j=r.__read(t.useState(""),2),R=j[0],T=j[1],k=E.useCategory().verifyCategoryItems,M=P.control,x=P.formState.errors,I=P.getValues,D=P.setError,K=P.clearErrors,N=P.reset,W=i.useWatch({control:M}),L=l.usePreviousValue(x);t.useImperativeHandle(g,(function(){return{getFormValues:function(){return I()}}})),t.useEffect((function(){h&&T(b("soldOutProduct"))}),[h]);return t.useEffect((function(){x&&setTimeout(K,0),q(W)}),[W]),t.useEffect((function(){c.isFormValuesEmpty(W)||K(p)}),[W,K]),t.useEffect((function(){N(F)}),[F]),t.useEffect((function(){!a.isEqual(x,L)&&V&&V(x)}),[x,L,V]),s.createElement(u.Form,{onSubmit:P.handleSubmit((function(e){if(y&&c.isFormValuesEmpty(e))return D(p,{}),void n.scrollToError(p);var r=k(e,v);if(r)return T(r.message),void D("category_".concat(r.id),{message:r.message});S(e)}),(function(e){n.scrollToError(c.getFirstErrorKey(e)),T(b("pleaseCheckSelectedProducts"))})),id:C},s.createElement(i.FormProvider,r.__assign({},P),s.createElement(f.ErrorModal,{isOpen:Boolean(R),messageKey:R,onClose:function(){return T("")}}),s.createElement("div",null,s.createElement("div",{className:"iframe-event"},s.createElement(d.Category,{productCategories:null==v?void 0:v.productCategories,productsWithErrors:h,errors:x,soldOutProducts:O}),x[p]&&s.createElement("div",{className:"d-flex m-5 justify-content-center form-error",id:p},s.createElement(o.Trans,{t:b,i18nKey:"pleaseSelectAtLeastFrom",values:{min:1,type:"item",from:"those categories"}}))))))}));exports.StepsForm=g;

package/dist/iframe/order-process/components/StepsForm/index.d.ts

@@ -1,2 +0,0 @@
-export { StepsForm } from "./StepsForm";
-//# sourceMappingURL=index.d.ts.map

package/dist/iframe/order-process/components/StepsForm/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/StepsForm/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/iframe/order-process/components/utils/category.d.ts

@@ -1,10 +0,0 @@
-import { MenuStep } from "../../../../types";
-interface CategoryError {
-    message: string;
-    id: number;
-}
-export declare const useCategory: () => {
-    verifyCategoryItems: (values: Record<string, any>, step: MenuStep) => CategoryError | void;
-};
-export {};
-//# sourceMappingURL=category.d.ts.map

package/dist/iframe/order-process/components/utils/category.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"category.d.ts","sourceRoot":"","sources":["../../../../../src/iframe/order-process/components/utils/category.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,EAAE,EAAE,MAAM,CAAC;CACZ;AACD,eAAO,MAAM,WAAW;kCAGZ,OAAO,MAAM,EAAE,GAAG,CAAC,QACrB,QAAQ,KACb,aAAa,GAAG,IAAI;CAmCxB,CAAC"}

package/dist/iframe/order-process/components/utils/category.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react-i18next");exports.useCategory=function(){var t=e.useTranslation("Validation").t;return{verifyCategoryItems:function(e,r){var i,n=Object.values(e).filter((function(e){return(null==e?void 0:e.quantity)>0}));return null==r||r.productCategories.forEach((function(e){var r=e.minSubItems,a=e.maxSubItems,u=e.id,o=e.name;if(r||a){var s=n.filter((function(e){return Number(null==e?void 0:e.productsCategoryId)===Number(u)})).length;if(s<r){var c=t("Validation:fieldMinNumber",{min:r,attribute:"number of products in the ".concat(o," category")});i={id:u,message:c}}else if(a&&s>a){c=t("Validation:fieldMaxNumber",{max:a,attribute:"number of products in the ".concat(o," category")});i={id:u,message:c}}}})),i}}};

package/src/iframe/order-process/OrderProcess.stories.tsx

@@ -1,363 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  useContext,
-  createContext,
-  useRef,
-  useMemo,
-} from "react";
-import { MemoryRouter, Route, useHistory } from "react-router-dom";
-import { Meta } from "@storybook/react";
-import { Timer } from "./components/Timer";
-import { BookingSummary } from "./components/BookingSummary";
-import { NavigationSteps } from "./components/NavigationSteps";
-import { StepsForm } from "./components/StepsForm";
-import { Page, PageBody, PageHeader } from "../page";
-import { StepsFormRef } from "./components/StepsForm/StepsForm";
-import { BookingSummaryFooter } from "./components/BookingSummaryFooter";
-import { Order } from "../../types";
-// eslint-disable-next-line max-len
-import { RenderNumberOfPeopleInputComponent } from "../event/event-details/components/number-of-people-input/component/RenderNumberOfPeopleInputComponent";
-
-const ROUTES = [
-  { pathname: "/step1", key: "/step1", name: "Burger" },
-  { pathname: "/step2", key: "/step2", name: "Cheese" },
-];
-
-const IMAGES = [
-  {
-    id: 1,
-    path: "test",
-    imageType: "image",
-    url: "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
-  },
-];
-
-const productCategories = [
-  {
-    id: 1,
-    name: "Early Bird General Admission",
-    allowDeposits: true,
-    minSubItems: 2,
-    products: [
-      {
-        id: 7,
-        name: "Beer",
-        description: `Ticket <em>is</em> valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 5,
-        deposit: 3,
-        minSub: 10,
-        isRequired: true,
-        images: IMAGES,
-      },
-      {
-        id: 8,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need <strong>student ID</strong> for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    id: 2,
-    name: "Nice",
-    maxSubItems: 1,
-    products: [
-      {
-        id: 3,
-        name: "Beer",
-        description: `Ticket is valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-        images: IMAGES,
-        maxAmount: 1,
-        minAmount: 1,
-        isRequired: true,
-      },
-      {
-        id: 5,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need <strong>student ID</strong> for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-      },
-    ],
-  },
-];
-
-const productCategories2 = [
-  {
-    id: 3,
-    name: "fine",
-    products: [
-      {
-        id: 9,
-        name: "Beer",
-        description: `Ticket is valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-      },
-      {
-        id: 10,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-      },
-    ],
-  },
-  {
-    id: 4,
-    name: "Twice",
-    products: [
-      {
-        id: 11,
-        name: "Beer",
-        description: `Ticket is valid for students and non students. 
-          You do not need student ID for this event but do require regular age ID e.g. driving licence or passport. 
-          Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-      },
-      {
-        id: 12,
-        name: "Wine",
-        description: `Ticket is valid for students and non students.
-           You do not need student ID for this event but do require regular age ID e.g. driving licence or passport.
-            Ticket valid for entry before 11.30pm for 12.30am showtime.`,
-
-        price: 1,
-      },
-    ],
-  },
-];
-
-const menuSteps = [
-  {
-    id: 1,
-    name: "Burger",
-    productCategories,
-  },
-  {
-    id: 2,
-    name: "Cheese",
-    productCategories: productCategories2,
-  },
-];
-
-const OrderProcessContext = createContext<{
-  orderFormValues: Record<string, any>;
-  setOrderFormValues: (values: Record<string, any>) => void;
-  formValues: Record<string, any>;
-  setFormValues: (values: Record<string, any>) => void;
-}>({
-  orderFormValues: {},
-  setOrderFormValues: () => undefined,
-  formValues: {},
-  setFormValues: () => undefined,
-});
-
-const OrderProcessContextProvider: React.FC = ({ children }) => {
-  const [orderFormValues, setOrderFormValues] = useState<Record<string, any>>(
-    {}
-  );
-  const [formValues, setFormValues] = useState<Record<string, any>>({});
-
-  return (
-    <OrderProcessContext.Provider
-      value={{
-        orderFormValues,
-        setOrderFormValues,
-        formValues,
-        setFormValues,
-      }}
-    >
-      {children}
-    </OrderProcessContext.Provider>
-  );
-};
-
-export default {
-  title: "Iframe/Order-Process/OrderProcess",
-  component: Default,
-} as Meta;
-
-const TimerWrapper = () => {
-  const [timer, setTimer] = useState(120000);
-  const updateTimerState = () => {
-    setTimer((prevValue) => {
-      if (prevValue <= 0) {
-        return 0;
-      }
-
-      const nexValue = prevValue - 1000;
-
-      return nexValue;
-    });
-  };
-
-  useEffect(() => {
-    setInterval(updateTimerState, 1000);
-  }, []);
-
-  return <Timer timer={timer} />;
-};
-
-export function Default() {
-  const externalHistory = useHistory();
-  const formRef = useRef<StepsFormRef | null>(null);
-  const [peopleAmount, setPeopleAmount] = useState(0);
-  const [peopleAmountError, setPeopleAmountError] = useState(false);
-
-  return (
-    <MemoryRouter initialEntries={ROUTES} initialIndex={0}>
-      <OrderProcessContextProvider>
-        {ROUTES.map(({ pathname }, index) => {
-          const step = menuSteps[index];
-
-          return (
-            <Route
-              path={pathname}
-              exact
-              key={pathname}
-              component={() => {
-                const history = useHistory();
-                const {
-                  orderFormValues,
-                  setOrderFormValues,
-                  formValues,
-                  setFormValues,
-                } = useContext(OrderProcessContext);
-                const relyOnPeopleCategoryIds = [4];
-                const onPrevStep = () => {
-                  if (formRef.current?.getFormValues()) {
-                    setFormValues(formRef.current?.getFormValues());
-                  }
-
-                  if (index === 0) {
-                    // external History push
-                    externalHistory.push("/");
-                    return;
-                  }
-
-                  history.push(ROUTES[index - 1].pathname);
-                };
-
-                const onNextStep = (values: Record<string, any>) => {
-                  setOrderFormValues(values);
-                  const nextRoute = ROUTES[index + 1];
-                  if (nextRoute) {
-                    history.push(ROUTES[index + 1].pathname);
-                  }
-                };
-
-                const shouldShowPeopleInput = useMemo(() => {
-                  const values = Object.values(formValues).filter(
-                    Boolean
-                  ) as Order[];
-                  const filteredValues = values.filter(
-                    (product) =>
-                      relyOnPeopleCategoryIds.includes(
-                        product.productsCategoryId
-                      ) && product.quantity > 0
-                  );
-
-                  return Boolean(filteredValues.length);
-                }, [formValues, relyOnPeopleCategoryIds]);
-                const onChangePeopleAmount = (value: number) => {
-                  if (!setPeopleAmount) {
-                    return;
-                  }
-                  setPeopleAmount(value);
-                  if (value > 0) {
-                    if (peopleAmountError) {
-                      setPeopleAmountError(false);
-                    }
-                    return;
-                  }
-
-                  setPeopleAmountError(true);
-                };
-
-                return (
-                  <Page
-                    headerBlock={
-                      <PageHeader
-                        showCloseButton
-                        onCloseButtonClick={onPrevStep}
-                        showBackButton
-                        onBackButtonClick={onPrevStep}
-                      >
-                        <TimerWrapper />
-                        <NavigationSteps steps={ROUTES} />
-                      </PageHeader>
-                    }
-                  >
-                    <PageBody
-                      leftBlock={
-                        <PageBody.LeftBlock title={step.name}>
-                          <StepsForm
-                            isLastMenuStep={!ROUTES[index + 1]}
-                            step={step as any}
-                            setFormValues={setFormValues}
-                            defaultValues={orderFormValues}
-                            onSubmit={onNextStep}
-                            ref={formRef}
-                          />
-                        </PageBody.LeftBlock>
-                      }
-                      rightBlock={
-                        <PageBody.RightBlock
-                          bottomBlock={
-                            <BookingSummaryFooter>
-                              {shouldShowPeopleInput && (
-                                <RenderNumberOfPeopleInputComponent
-                                  peopleAmount={peopleAmount || 0}
-                                  onChangePeopleAmount={onChangePeopleAmount}
-                                  peopleAmountError={peopleAmountError}
-                                />
-                              )}
-                              <BookingSummary.SummaryTotal
-                                formValues={formValues}
-                                totalWithDiscount={5}
-                              />
-                            </BookingSummaryFooter>
-                          }
-                        >
-                          <BookingSummary
-                            hasPeopleInput={shouldShowPeopleInput}
-                            date="29 Sept 2022 at 09:00"
-                            menuSteps={menuSteps as any}
-                            formValues={formValues}
-                            peopleAmount={peopleAmount}
-                            totalWithDiscount={5}
-                            eventName="Glam!"
-                          />
-                        </PageBody.RightBlock>
-                      }
-                    />
-                  </Page>
-                );
-              }}
-            />
-          );
-        })}
-      </OrderProcessContextProvider>
-    </MemoryRouter>
-  );
-}