@licklist/design 0.44.486-dev.78 → 0.44.486-dev.8

package/src/iframe/activity-cards/list-activity-card/ListActivityCard.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import clsx from "clsx";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+
+export interface ListActivityCardProps {
+  title: string;
+  duration: string;
+  price: string;
+  image?: Image | null;
+  onSelect: () => void;
+  isSelected: boolean;
+}
+
+export const ListActivityCard = ({
+  title,
+  duration,
+  price,
+  image,
+  onSelect,
+  isSelected,
+}: ListActivityCardProps) => {
+  return (
+    <div role="button" onClick={onSelect} onKeyPress={onSelect} tabIndex={0}>
+      <div
+        className={clsx("list-activity-card", {
+          active: isSelected,
+        })}
+      >
+        <div className="description">
+          <div className="title">{title}</div>
+          {duration && (
+            <div>
+              <p>{duration}</p>
+            </div>
+          )}
+
+          {price && <div>{price}</div>}
+        </div>
+
+        {image && (
+          <div className="image-container">
+            <img className="image" src={image.url} alt="" />
+          </div>
+        )}
+      </div>
+      <hr className="list-activity-card-hr" />
+    </div>
+  );
+};

package/src/iframe/event/event-calendar/EventCalendar.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { DateTime } from "luxon";
+import { Meta, Story } from "@storybook/react";
+import {
+  EventCalendarProvider,
+  getMonthCalendarDates,
+} from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { EventCalendar, EventCalendarProps } from "./EventCalendar";
+
+export default {
+  title: "Iframe/Event/Calendar",
+  component: EventCalendar,
+} as Meta;
+
+export const Default: Story<EventCalendarProps> = (args) => {
+  return (
+    <EventCalendarProvider getCalendarDates={getMonthCalendarDates}>
+      <div style={{ backgroundColor: "white" }}>
+        <EventCalendar {...args} />
+      </div>
+    </EventCalendarProvider>
+  );
+};
+
+const now = DateTime.now().set({
+  hour: 0,
+  second: 0,
+  millisecond: 0,
+  minute: 0,
+});
+
+Default.args = {
+  disabledDates: [now.minus({ day: 2 }), now, now.plus({ day: 2 })],
+  isLoading: false,
+  fromPrice: "from £10",
+};

package/src/iframe/event/event-calendar/EventCalendar.tsx

@@ -0,0 +1,27 @@
+import React, { ReactElement } from "react";
+import { CalendarButtons } from "./components/CalendarButtons";
+import { CalendarDates } from "./components/CalendarDates";
+import { CalendarBaseProps } from "./types";
+
+export type EventCalendarProps = CalendarBaseProps & {
+  fromPrice?: string | ReactElement | null;
+};
+
+export const EventCalendar = ({
+  disabledDates = [],
+  isLoading = false,
+  fromPrice,
+}: EventCalendarProps) => {
+  return (
+    <div className="calendar-wrapper">
+      <div className="calendar">
+        <CalendarButtons disabledDates={disabledDates} isLoading={isLoading} />
+        <CalendarDates
+          disabledDates={disabledDates}
+          isLoading={isLoading}
+          fromPrice={fromPrice}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -1,53 +1,36 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useContext, useMemo } from "react";
 import { Button } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { range } from "lodash";
-import { ReactComponent as SelectArrow } from "../../../assets/iframe/selectArrow.svg";
+import { EventCalendarContext } from "@licklist/plugins/dist/context/event/EventCalendarContext";
+import { ReactComponent as SelectArrow } from "../../../../../assets/iframe/selectArrow.svg";
 import { CalendarSelect } from "../CalendarSelect";
+import { CalendarBaseProps } from "../../types";
 import { isSelectedDateDisabled } from "../../utils";
-import { CalendarProps } from "../../Calendar";
 
-type CalendarButtonsProps = Pick<
-  CalendarProps,
-  | "isLoading"
-  | "disabledDates"
-  | "initialDate"
-  | "currentDate"
-  | "setCurrentDate"
-  | "setSelectedDate"
->;
+type CalendarButtonsProps = CalendarBaseProps;
 
 export const CalendarButtons = ({
   disabledDates = [],
   isLoading = false,
-  initialDate,
-  currentDate,
-  setCurrentDate,
-  setSelectedDate,
 }: CalendarButtonsProps) => {
+  const {
+    initialDate,
+    currentDate,
+    canMoveBack,
+    onSelectPreviousMonth,
+    onSelectNextMonth,
+    setCurrentDate,
+    setSelectedDate,
+  } = useContext(EventCalendarContext);
   const { t } = useTranslation("Design");
 
-  const onSelectNextMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.plus({ months: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const onSelectPreviousMonth = useCallback(() => {
-    setCurrentDate((prevDate) => prevDate.minus({ month: 1 }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const yearOptions = useMemo(() => {
     return range(initialDate.year, initialDate.year + 5, 1).map((year) => {
       return { label: String(year), value: year };
     });
   }, [initialDate]);
 
-  const canMoveBack = useMemo(
-    () => currentDate > initialDate,
-    [currentDate, initialDate]
-  );
-
   const onSelectYear = (value: string) => {
     const selectedYear = Number(value);
     const nextDateTime = currentDate.set({ year: selectedYear });

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

@@ -0,0 +1,51 @@
+import React, { ReactElement } 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;
+  fromPrice?: string | ReactElement | null;
+};
+
+export const CalendarDate = ({
+  initialDate,
+  currentDate,
+  selectedDate,
+  setSelectedDate,
+  isDisabled = false,
+  fromPrice,
+}: CalendarDateProps) => {
+  const onClick = () => {
+    if (isDisabled) return;
+
+    setSelectedDate(currentDate);
+  };
+
+  const disabled = currentDate < initialDate || isDisabled;
+
+  return (
+    <Button
+      variant="link"
+      disabled={disabled}
+      className={clsx(
+        "calendar-date",
+        selectedDate?.hasSame(currentDate, "day") && "selected-date",
+        disabled && "disabled-date"
+      )}
+      onClick={onClick}
+    >
+      <div>{currentDate.day}</div>
+
+      {typeof fromPrice === "string" ? (
+        <div>{fromPrice}</div>
+      ) : (
+        <>{fromPrice}</>
+      )}
+    </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,23 @@
-import React, { useMemo } from "react";
+import React, { ReactElement, 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 & {
+  fromPrice?: string | ReactElement | null;
+};
 
 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 +40,22 @@ 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
+              fromPrice={fromPrice}
             />
           );
         })}

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-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}
+    />
+  );
+}