@licklist/design 0.44.486-dev.83 → 0.44.486

package/src/iframe/event/event-calendar/components/CalendarDate/CalendarDate.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { Button } from "react-bootstrap";
+import { DateTime } from "luxon";
+import clsx from "clsx";
+
+export type CalendarDateProps = {
+  initialDate: DateTime;
+  currentDate: DateTime;
+  selectedDate?: DateTime;
+  setSelectedDate: (date: DateTime) => void;
+  isDisabled?: boolean;
+};
+
+export const CalendarDate = ({
+  initialDate,
+  currentDate,
+  selectedDate,
+  setSelectedDate,
+  isDisabled = false,
+}: CalendarDateProps) => {
+  const onClick = () => {
+    if (isDisabled) return;
+
+    setSelectedDate(currentDate);
+  };
+
+  const disabled = currentDate < initialDate || isDisabled;
+
+  return (
+    <Button
+      variant="link"
+      disabled={disabled}
+      className={clsx(
+        "calendar-date",
+        selectedDate && +currentDate === +selectedDate && "selected-date",
+        disabled && "disabled-date"
+      )}
+      onClick={onClick}
+    >
+      {currentDate.day}
+    </Button>
+  );
+};

package/src/iframe/event/event-calendar/components/CalendarDate/index.ts

@@ -0,0 +1,2 @@
+export { CalendarDate } from "./CalendarDate";
+export type { CalendarDateProps } from "./CalendarDate";

package/src/{calendar → iframe/event/event-calendar}/components/CalendarDates/CalendarDates.tsx

@@ -1,26 +1,20 @@
-import React, { useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { DateTime } from "luxon";
-import { DAY_NUMBER } from "@licklist/core/dist/Config";
-import { DateTimeButton } from "../../../date-time-button";
+import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
 import { CalendarWeekdays } from "../CalendarWeekdays";
+import { CalendarDate } from "../CalendarDate";
+import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
-import { CalendarProps } from "../../Calendar";
 
-export type CalendarDatesProps = Omit<
-  CalendarProps,
-  "currentDate" | "setCurrentDate" | "initialDate"
->;
+export type CalendarDatesProps = CalendarBaseProps;
 
 export const CalendarDates = ({
   disabledDates = [],
   isLoading = false,
-  calendarDates,
-  selectedDate,
-  setSelectedDate,
-  fromPrice,
-  getAvailability,
-  includeAvailability,
 }: CalendarDatesProps) => {
+  const { calendarDates, initialDate, selectedDate, setSelectedDate } =
+    useContext(EventCalendarContext);
+
   const fillCalendarDates = useMemo(() => {
     let firstDayOfWeek = calendarDates[0]?.weekday ?? 0;
 
@@ -43,24 +37,21 @@ export const CalendarDates = ({
       <CalendarWeekdays />
       <div className="calendar-dates">
         {fillCalendarDates.map((date: DateTime | null) => {
-          if (date === null) return <div />;
+          if (date === null) {
+            return <div />;
+          }
 
           const isDisabled =
             isLoading || isSelectedDateDisabled(date, disabledDates);
 
           return (
-            <DateTimeButton
+            <CalendarDate
               key={+date}
+              currentDate={date}
+              initialDate={initialDate}
+              selectedDate={selectedDate}
+              setSelectedDate={setSelectedDate}
               isDisabled={isDisabled}
-              isSelected={
-                selectedDate ? date.hasSame(selectedDate, "day") : undefined
-              }
-              date={date.toFormat(DAY_NUMBER)}
-              onSelect={() => setSelectedDate(date)}
-              price={fromPrice}
-              resources={getAvailability?.(date)}
-              showResources={includeAvailability}
-              calendarView
             />
           );
         })}

package/src/{calendar → iframe/event/event-calendar}/components/CalendarSelect/CalendarSelect.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from "react";
 import { Form } from "react-bootstrap";
 import clsx from "clsx";
-import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../iframe/page/components/PageBody/constants";
+import { PAGE_CALENDAR_SELECT_WRAPPER } from "../../../../page/components/PageBody/constants";
 
 export type CalendarSelectOption = {
   label: string;

package/src/iframe/event/event-calendar/index.ts

@@ -0,0 +1,6 @@
+export { EventCalendar } from "./EventCalendar";
+export { CalendarSelect } from "./components/CalendarSelect";
+export type {
+  CalendarSelectProps,
+  CalendarSelectOption,
+} from "./components/CalendarSelect";

package/src/iframe/event/event-calendar/types/index.ts

@@ -0,0 +1,6 @@
+import { DateTime } from "luxon";
+
+export type CalendarBaseProps = {
+  disabledDates?: DateTime[];
+  isLoading?: boolean;
+};

package/src/iframe/event/event-calendar/utils/index.ts

@@ -0,0 +1,11 @@
+import { DateTime } from "luxon";
+import isEqual from "lodash/isEqual";
+
+export const isSelectedDateDisabled = (
+  selectedDate: DateTime,
+  disabledDates: DateTime[] = []
+) => {
+  return !!disabledDates.find((disabledDate) =>
+    isEqual(disabledDate.toObject(), selectedDate.toObject())
+  );
+};

package/src/iframe/event/event-card/IframeEventCard.stories.tsx

@@ -11,15 +11,18 @@ export default {
 
 export function Default() {
   const showImage = boolean("showImage", true);
+  const displayCost = boolean("displayCost", false);
+  const displayType = boolean("displayType", true);
+  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
     <div>
       <IframeEventCard
         imageSrc={
+          // eslint-disable-next-line max-len
           showImage
-            ? // eslint-disable-next-line max-len
-              "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
+            ? "https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
             : undefined
         }
         title="Glitterbomb Bucks / Baga Chipz"
@@ -40,8 +43,9 @@ export function Default() {
         RuPaul's Drag Race UK to VINYL Cambridge! So get excited because
         the...`}
         snippetSetting={{
-          includeAvailability: ["calendar", "product_sets", "time_slots"],
-          includeFromPrice: ["calendar", "product_sets", "time_slots"],
+          displayCost,
+          displayType,
+          displayDescription,
         }}
         goToDetails={() => null}
         isListView={isListView}
@@ -55,6 +59,9 @@ export function Default() {
 
 export function EventCardSkeleton() {
   const showImage = boolean("showImage", true);
+  const displayCost = boolean("displayCost", false);
+  const displayType = boolean("displayType", true);
+  const displayDescription = boolean("displayDescription", false);
   const isListView = boolean("isListView", false);
 
   return (
@@ -62,8 +69,9 @@ export function EventCardSkeleton() {
       <IframeEventCardSkeleton
         showImage={showImage}
         snippetSetting={{
-          includeAvailability: ["calendar", "product_sets", "time_slots"],
-          includeFromPrice: ["calendar", "product_sets", "time_slots"],
+          displayCost,
+          displayType,
+          displayDescription,
         }}
         isListView={isListView}
       />

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,8 +18,7 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  snippetSetting?: Snippet["widgetSetting"];
+  snippetSetting?: SnippetSetting;
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -36,6 +35,11 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
+  snippetSetting = {
+    displayType: true,
+    displayCost: true,
+    displayDescription: true,
+  },
   colour,
   goToDetails,
   description,
@@ -98,7 +102,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && (
+          {type && !!snippetSetting.displayType && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -109,7 +113,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && (
+          {cost && !!snippetSetting.displayCost && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -123,7 +127,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && (
+          {description && !!snippetSetting.displayDescription && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -2,12 +2,11 @@ import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
-import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
 
 interface IframeEventCardSkeletonProps {
   showImage?: boolean;
-  // eslint-disable-next-line react/no-unused-prop-types
-  snippetSetting?: Snippet["widgetSetting"];
+  snippetSetting?: SnippetSetting;
   colour?: string;
   isListView?: boolean;
   className?: string;
@@ -16,6 +15,11 @@ interface IframeEventCardSkeletonProps {
 export const IframeEventCardSkeleton = memo(
   ({
     showImage,
+    snippetSetting = {
+      displayType: true,
+      displayCost: true,
+      displayDescription: true,
+    },
     colour,
     isListView = false,
     className,
@@ -57,25 +61,31 @@ export const IframeEventCardSkeleton = memo(
               </div>
             </Card.Text>
 
-            <Card.Text as="div" className="list-view-hided">
-              <div className="d-flex align-items-center mb-3">
-                <p className="iframe-event-card__bold m-0">
-                  <Skeleton className="skeleton-w6" />
-                </p>
-              </div>
-            </Card.Text>
+            {!!snippetSetting.displayType && (
+              <Card.Text as="div" className="list-view-hided">
+                <div className="d-flex align-items-center mb-3">
+                  <p className="iframe-event-card__bold m-0">
+                    <Skeleton className="skeleton-w6" />
+                  </p>
+                </div>
+              </Card.Text>
+            )}
 
-            <Card.Text as="div">
-              <div className="d-flex align-items-center mb-3">
-                <p className="iframe-event-card__bold m-0">
-                  <Skeleton className="skeleton-w6" />
-                </p>
-              </div>
-            </Card.Text>
+            {!!snippetSetting.displayCost && (
+              <Card.Text as="div">
+                <div className="d-flex align-items-center mb-3">
+                  <p className="iframe-event-card__bold m-0">
+                    <Skeleton className="skeleton-w6" />
+                  </p>
+                </div>
+              </Card.Text>
+            )}
 
-            <Card.Text as="div" className="list-view-hided">
-              <Skeleton className="w-100 h-100" />
-            </Card.Text>
+            {!!snippetSetting.displayDescription && (
+              <Card.Text as="div" className="list-view-hided">
+                <Skeleton className="w-100 h-100" />
+              </Card.Text>
+            )}
           </div>
         </Card.Body>
       </Card>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -581,8 +581,9 @@ export function Default() {
             date={String(event.startAt)}
             colour={event.colour}
             snippetSetting={{
-              includeAvailability: [],
-              includeFromPrice: [],
+              displayCost,
+              displayType,
+              displayDescription,
             }}
             imageSrc={event.imgSrc}
             goToDetails={() => {}}

package/src/iframe/event/event-details/EventDetails.stories.tsx

@@ -0,0 +1,187 @@
+import { Meta } from "@storybook/react";
+import React, { useState } from "react";
+import { EventDetails } from "./EventDetails";
+
+export default {
+  title: "Iframe/Event/EventDetails",
+  component: EventDetails,
+} as Meta;
+
+const productCategories = [
+  {
+    id: 1,
+    name: "Early Bird General Admission",
+    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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+      {
+        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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+        isRequired: true,
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Nice",
+    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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+      {
+        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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+    ],
+  },
+];
+
+const productCategories2 = [
+  {
+    id: 1,
+    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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+        isRequired: true,
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "Nice",
+    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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        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.`,
+        minQuantity: 1,
+        maxQuantity: 10,
+        price: 1,
+      },
+    ],
+  },
+];
+
+const menus = [
+  {
+    id: 1,
+    name: "Menu 1",
+    menuSteps: [
+      {
+        id: 1,
+        name: "Burger",
+        productCategories: productCategories,
+      },
+      {
+        id: 2,
+        name: "Cheese",
+        productCategories: productCategories2,
+      },
+    ],
+  },
+];
+
+const defaultValues = {
+  "8": {
+    id: 8,
+    name: "Wine",
+    price: 1,
+    productsCategoryId: 1,
+    quantity: 1,
+  },
+};
+
+export function Default() {
+  const [_order, setOrder] = useState({});
+
+  const onSubmit = (values: any) => {
+    setOrder(values);
+  };
+
+  return (
+    <div>
+      <EventDetails
+        menus={menus}
+        description="On the other hand, we denounce with righteous indignation and dislike
+            men who are so beguiled and demoralized by the charms of pleasure of
+            the moment, so blinded by desire, that they cannot foresee the pain
+            and trouble that are bound to ensue; and equal blame belongs to those
+            who fail in their duty through weakness of will, which is the same as
+            saying through shrinking from toil and pain. These cases are perfectly
+            simple and easy to distinguish. In a free hour, when our power of
+            choice is untrammelled and when nothing prevents our being able to do
+            what we like best, every pleasure is to be welcomed and every pain
+            avoided. But in certain circumstances and owing to the claims of duty
+            or the obligations of business it will frequently occur that pleasures
+            have to be repudiated and annoyances accepted. The wise man therefore
+            always holds in these matters to this principle of selection: he
+            rejects pleasures to secure other greater pleasures, or else he
+            endures pains to avoid worse pains."
+        cost={6}
+        title="Glitterbomb Bucks / Baga Chipz"
+        date="Sat 2nd May"
+        // eslint-disable-next-line max-len
+        imageSrc="https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80 387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80 687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80 774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80 987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80 1287w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80 1374w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1587&q=80 1587w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1887&q=80 1887w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974&q=80 1974w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2187&q=80 2187w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2487&q=80 2487w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2574&q=80 2574w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80 2787w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3087&q=80 3087w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3174&q=80 3174w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3387&q=80 3387w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3687&q=80 3687w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3774&q=80 3774w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3987&q=80 3987w, https://images.unsplash.com/photo-1638988319382-90e61be77c59?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=4000&q=80 4000w"
+        onSubmit={onSubmit}
+        defaultValues={defaultValues}
+      />
+    </div>
+  );
+}

package/src/iframe/event/event-details/EventDetails.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useMemo } from "react";
+import { MemoryRouter, Route } from "react-router-dom";
+import {
+  EventDetailsForm,
+  EventDetailsFormProps,
+} from "./components/event-details-form";
+import { WizardFormValues } from "../../../types";
+import { routesByStepsCount } from "./utils";
+
+type EventDetailsProps = EventDetailsFormProps & {
+  onSubmit: (values: WizardFormValues) => void;
+  defaultValues?: WizardFormValues;
+};
+
+export function EventDetails({
+  onSubmit,
+  menus,
+  defaultValues = {},
+  ...restProps
+}: EventDetailsProps) {
+  const [stepFormValues, setStepFormValues] =
+    useState<WizardFormValues>(defaultValues);
+
+  const menu = menus && menus?.length !== 0 ? menus[0] : null;
+  const numberOfSteps = menu?.menuSteps?.length || 0;
+
+  const routes = useMemo(
+    () => routesByStepsCount(numberOfSteps),
+    [numberOfSteps]
+  );
+
+  const submitFormsValues = (values: WizardFormValues) => {
+    if (!onSubmit) return;
+
+    onSubmit(values);
+  };
+
+  const saveFormValues = ({
+    values,
+    pathname,
+    isBackAction = false,
+  }: {
+    values: WizardFormValues;
+    pathname?: string;
+    isBackAction?: boolean;
+  }) => {
+    const nextValues = { ...stepFormValues, ...values };
+    setStepFormValues(nextValues);
+
+    if (!pathname || (routes[routes.length - 1] === pathname && !isBackAction))
+      return submitFormsValues(nextValues);
+
+    return undefined;
+  };
+
+  if (routes.length) {
+    return (
+      <MemoryRouter initialEntries={routes} initialIndex={0}>
+        {routes.map((route: string) => {
+          return (
+            <Route
+              path={route}
+              exact
+              key={route}
+              render={() => (
+                <EventDetailsForm
+                  {...restProps}
+                  menu={menu}
+                  onFormSubmit={saveFormValues}
+                  routes={routes}
+                  numberOfSteps={numberOfSteps}
+                  defaultValues={stepFormValues}
+                />
+              )}
+            />
+          );
+        })}
+      </MemoryRouter>
+    );
+  }
+
+  return (
+    <EventDetailsForm
+      {...restProps}
+      menu={menu}
+      onFormSubmit={saveFormValues}
+      routes={routes}
+      numberOfSteps={numberOfSteps}
+      defaultValues={stepFormValues}
+    />
+  );
+}