@licklist/design 0.44.486-dev.83 → 0.44.486

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

@@ -0,0 +1,123 @@
+import { Meta } from "@storybook/react";
+import React, { useState } from "react";
+import { boolean } from "@storybook/addon-knobs";
+import { EventDetails } from "./EventDetails";
+
+export default {
+  title: "Iframe/Event/EventDetailsOneStepForm",
+  component: EventDetails,
+} as Meta;
+
+const productCategories = [
+  {
+    id: 1,
+    name: "Early Bird General Admission",
+    products: [
+      {
+        id: 7,
+        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: 8,
+        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: 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 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,
+      },
+    ],
+  },
+];
+
+export function Default() {
+  const [_order, setOrder] = useState({});
+
+  const onSubmit = (values: any) => {
+    setOrder(values);
+  };
+
+  const showImage = boolean("showImage", true);
+
+  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"
+        imageSrc={
+          // eslint-disable-next-line max-len
+          showImage
+            ? "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"
+            : null
+        }
+        onSubmit={onSubmit}
+        relyOnPeopleCategoryIds={[1]}
+      />
+    </div>
+  );
+}

package/src/iframe/event/event-details/components/category-product/CategoryProduct.tsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { useIntl } from "react-intl";
+import { useFormContext, Controller } from "react-hook-form";
+import clsx from "clsx";
+import { useTranslation, Trans } from "react-i18next";
+import { TicketDescription } from "../../../ticket-description";
+import { NumberInput } from "../../../../../static";
+import { ProductCategory, Product } from "../../../../../types";
+
+interface CategoryProductProps {
+  product: Product;
+  category: ProductCategory;
+}
+
+export const CategoryProduct = ({
+  product,
+  category,
+}: CategoryProductProps) => {
+  const { formatNumber } = useIntl();
+  const { t } = useTranslation("Design");
+  const { control, clearErrors } = useFormContext();
+
+  return (
+    <Controller
+      control={control}
+      name={`${product.id}` as const}
+      rules={{
+        required: product.isRequired,
+        validate: product.isRequired
+          ? (product) => product?.quantity > 0
+          : undefined,
+      }}
+      render={({
+        field: { onChange, value: productInfo = {} },
+        fieldState: { invalid },
+      }) => {
+        return (
+          <div id={String(product.id)}>
+            <div className={clsx("iframe-event__product", invalid && "error")}>
+              <TicketDescription
+                title={product.name}
+                description={product.description}
+                className="iframe-event__product-description"
+                images={product.images}
+              />
+
+              <NumberInput
+                onChange={(val) => {
+                  onChange({
+                    id: product.id,
+                    quantity: val,
+                    name: product.name,
+                    price: product.price,
+                    productsCategoryId: category.id,
+                  });
+                  clearErrors(`${product.id}` as const);
+                }}
+                onArrowDown={() => {
+                  onChange({
+                    id: product.id,
+                    quantity: productInfo?.quantity - 1 || 0,
+                    name: product.name,
+                    price: product.price,
+                    productsCategoryId: category.id,
+                  });
+                  clearErrors(`${product.id}` as const);
+                }}
+                onArrowUp={() => {
+                  onChange({
+                    id: product.id,
+                    quantity: (productInfo?.quantity ?? 0) + 1,
+                    name: product.name,
+                    price: product.price,
+                    productsCategoryId: category.id,
+                  });
+                  clearErrors(`${product.id}` as const);
+                }}
+                min={0}
+                value={productInfo?.quantity || 0}
+                className={clsx(
+                  "iframe-event__product-count",
+                  invalid && "error"
+                )}
+              />
+              <span className="iframe-event__product-price-multiplier">X</span>
+              <span className="iframe-event__product-price">
+                {formatNumber(product.price * (productInfo?.quantity || 1), {
+                  style: "currency",
+                  currency: "GBP",
+                })}
+              </span>
+            </div>
+            {invalid && (
+              <div className="d-flex mt-3 ml-5 mr-5 w-100">
+                <p className="iframe-event__message-error">
+                  <Trans
+                    t={t}
+                    i18nKey="pleaseSelectAtLeastFrom"
+                    values={{ min: 1, type: "item", from: "this category" }}
+                  />
+                </p>
+              </div>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};

package/src/iframe/event/event-details/components/category-product/index.ts

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

package/src/iframe/event/event-details/components/event-details-form/EventDetailsForm.tsx

@@ -0,0 +1,250 @@
+import React, {
+  CSSProperties,
+  useState,
+  useRef,
+  useEffect,
+  useMemo,
+} from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import { Badge, Image, Form } from "react-bootstrap";
+import { useTranslation, Trans } from "react-i18next";
+import { useIntl } from "react-intl";
+import { useForm, FormProvider, useWatch } from "react-hook-form";
+import clsx from "clsx";
+import {
+  scrollToError,
+  scrollToElement,
+} from "@licklist/plugins/dist/utils/ScrollUtils";
+import {
+  getFirstErrorKey,
+  isFormValuesEmpty,
+} from "@licklist/plugins/dist/utils/FormValues";
+
+import { TextExpand } from "../../../../../static";
+import { EventNavigationFooter } from "../../../event-navigation-footer";
+import { ProductCategoryView } from "../product-category-view";
+import { NumberOfPeopleInput } from "../number-of-people-input";
+
+import { Menu, WizardFormValues } from "../../../../../types";
+import { TipTapEditor } from "../../../../../tiptap-editor/TipTapEditor";
+
+const DESCRIPTION_MAX_LENGTH = 120;
+const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
+
+export interface WizardFormProps {
+  onFormSubmit: (props: {
+    values: WizardFormValues;
+    pathname?: string;
+    isBackAction?: boolean;
+  }) => void;
+  routes?: string[];
+  menu: Menu;
+  numberOfSteps: number;
+  defaultValues: WizardFormValues;
+}
+
+export interface EventDetailsFormProps {
+  title: string;
+  date: string;
+  cost?: number;
+  description: string;
+  imageSrc?: null | string;
+  menus?: Menu[];
+  isBuyNowDisabled?: boolean;
+  relyOnPeopleCategoryIds?: number[];
+  onPrevStep?: () => void;
+}
+
+export function EventDetailsForm({
+  title,
+  cost,
+  description,
+  imageSrc,
+  date,
+  menu,
+  isBuyNowDisabled,
+  onFormSubmit,
+  routes = [],
+  numberOfSteps,
+  defaultValues,
+  relyOnPeopleCategoryIds = [],
+  onPrevStep,
+}: EventDetailsFormProps & WizardFormProps) {
+  const history = useHistory();
+  const { pathname } = useLocation();
+
+  const { formatNumber } = useIntl();
+  const { t } = useTranslation("Design");
+  const form = useForm({ defaultValues });
+  const headerRef = useRef(null);
+
+  const {
+    trigger,
+    handleSubmit,
+    getValues,
+    control,
+    setError,
+    clearErrors,
+    formState: { errors },
+  } = form;
+  const formValues = useWatch({ control });
+
+  const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
+
+  const pathNameIndex = routes.indexOf(pathname);
+  const step = pathNameIndex > 0 ? pathNameIndex : 0;
+  const nextStep = step + 1;
+
+  const onNextClick = async () => {
+    if (!(await trigger())) {
+      scrollToError(getFirstErrorKey(errors));
+      return;
+    }
+    submitCurrentForm(getValues());
+
+    if (routes.length) {
+      history.push(routes[pathNameIndex + 1]);
+    }
+  };
+
+  const onPrevClick = () => {
+    onFormSubmit({ values: getValues(), pathname, isBackAction: true });
+
+    if (routes.length) {
+      history.push(routes[pathNameIndex - 1]);
+    }
+  };
+
+  const submitCurrentForm = (values: WizardFormValues) => {
+    if (nextStep === numberOfSteps && isFormValuesEmpty(values)) {
+      setError(NO_ORDER_ITEMS_ERROR, {});
+      scrollToError(NO_ORDER_ITEMS_ERROR);
+      return;
+    }
+
+    onFormSubmit({ values, pathname, isBackAction: false });
+  };
+
+  const onErrorSubmit = (submitErrors) => {
+    scrollToError(getFirstErrorKey(submitErrors));
+  };
+
+  const shouldShowPeopleInput = useMemo(() => {
+    const values = Object.values(formValues)
+      .filter(Boolean)
+      .filter(
+        (product) =>
+          relyOnPeopleCategoryIds.includes(product.productsCategoryId) &&
+          product.quantity > 0
+      );
+
+    return Boolean(values.length);
+  }, [formValues, relyOnPeopleCategoryIds]);
+
+  useEffect(() => {
+    scrollToElement(headerRef.current);
+  }, []);
+
+  useEffect(() => {
+    if (!isFormValuesEmpty(formValues)) {
+      clearErrors(NO_ORDER_ITEMS_ERROR);
+    }
+  }, [formValues, clearErrors]);
+
+  const descriptionWrapperStyle = {
+    "--description-wrapper-height": isDescriptionExpanded ? "inherit" : "8rem",
+  } as CSSProperties;
+
+  return (
+    <Form onSubmit={handleSubmit(submitCurrentForm, onErrorSubmit)}>
+      <FormProvider {...form}>
+        <div className="iframe-event">
+          <div className="iframe-event__header" ref={headerRef}>
+            {imageSrc && (
+              <Image src={imageSrc} width="300rem" height="250rem" />
+            )}
+            <div className={clsx(imageSrc && "ml-5")}>
+              <Badge variant="dark" className="iframe-event__badge">
+                {date}
+              </Badge>
+              <h5 className="mt-3 iframe-event__title">{title}</h5>
+              <div className="d-flex flex-wrap justify-content-between">
+                {cost !== undefined && (
+                  <div>
+                    <div className="iframe-event-card__label">{t("cost")}</div>
+                    <div className="iframe-event-card__bold">
+                      {t("from")}{" "}
+                      {formatNumber(cost, {
+                        style: "currency",
+                        currency: "GBP",
+                      })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          {!!description && (
+            <div
+              className="iframe-event__description-wrapper"
+              style={descriptionWrapperStyle}
+            >
+              {description.length > DESCRIPTION_MAX_LENGTH ? (
+                <TextExpand
+                  className="iframe-event__description my-6"
+                  isExpanded={isDescriptionExpanded}
+                  setIsExpanded={setIsDescriptionExpanded}
+                >
+                  <TipTapEditor viewMode disabled content={description} />
+                </TextExpand>
+              ) : (
+                <div className="my-6">
+                  <TipTapEditor viewMode disabled content={description} />
+                </div>
+              )}
+            </div>
+          )}
+          {!!menu && (
+            <>
+              {menu.menuSteps[step].name && (
+                <h3 className="iframe-event__name">
+                  {menu.menuSteps[step].name}
+                </h3>
+              )}
+
+              <ProductCategoryView
+                productCategories={menu.menuSteps[step]?.productCategories}
+              />
+
+              {shouldShowPeopleInput && nextStep === numberOfSteps && (
+                <NumberOfPeopleInput />
+              )}
+              {errors[NO_ORDER_ITEMS_ERROR] && (
+                <div
+                  className="d-flex m-5 justify-content-center form-error"
+                  id={NO_ORDER_ITEMS_ERROR}
+                >
+                  <Trans
+                    t={t}
+                    i18nKey="pleaseSelectAtLeastFrom"
+                    values={{ min: 1, type: "item", from: "those categories" }}
+                  />
+                </div>
+              )}
+              <div className="iframe-event__footer">
+                <EventNavigationFooter
+                  isBuyNowDisabled={isBuyNowDisabled}
+                  amount={numberOfSteps}
+                  activeElement={nextStep}
+                  onPrevClick={onPrevClick}
+                  onNextClick={onNextClick}
+                  onPrevStep={onPrevStep}
+                />
+              </div>
+            </>
+          )}
+        </div>
+      </FormProvider>
+    </Form>
+  );
+}

package/src/iframe/event/event-details/components/event-details-form/index.ts

@@ -0,0 +1,5 @@
+export {
+  EventDetailsForm,
+  EventDetailsFormProps,
+  WizardFormProps,
+} from "./EventDetailsForm";

package/src/{number-of-people-input → iframe/event/event-details/components/number-of-people-input}/NumberOfPeopleInput.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from "react";
 import { useFormContext, Controller } from "react-hook-form";
-import { RenderNumberOfPeopleInputComponent } from "./components";
+import { RenderNumberOfPeopleInputComponent } from "./component";
 
 const NUMBER_OF_PEOPLE = "numberOfPeople";
 

package/src/{number-of-people-input/components → iframe/event/event-details/components/number-of-people-input/component}/RenderNumberOfPeopleInputComponent.tsx

@@ -1,14 +1,14 @@
 import React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import clsx from "clsx";
-import { NumberInput } from "../../iframe/order-process/components/CategoryProduct/components/NumberInput/NumberInput";
+import { NumberInput } from "../../../../../order-process/components/CategoryProduct/components/NumberInput";
 
 const NUMBER_OF_PEOPLE = "numberOfPeople";
 
-export interface RenderNumberOfPeopleInputComponentProps {
+interface RenderNumberOfPeopleInputComponentProps {
   onChangePeopleAmount: (value: number) => void;
   peopleAmount: number;
-  peopleAmountError?: boolean;
+  peopleAmountError: boolean;
 }
 
 export const RenderNumberOfPeopleInputComponent = ({

package/src/iframe/event/event-details/components/number-of-people-input/component/index.ts

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

package/src/iframe/event/event-details/components/number-of-people-input/index.ts

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

package/src/iframe/event/event-details/components/product-category-view/ProductCategoryView.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+
+import { ProductCategory } from "../../../../../types";
+import { CategoryProduct } from "../category-product";
+
+interface ProductCategoryViewProps {
+  productCategories: ProductCategory[];
+}
+
+export function ProductCategoryView({
+  productCategories,
+}: ProductCategoryViewProps) {
+  return (
+    <>
+      {productCategories.length !== 0 &&
+        productCategories.map((category) => {
+          return (
+            <div key={category.id} className="iframe-event__category">
+              <h4 className="iframe-event__name">{category.name}</h4>
+              {category.products.map((product) => {
+                return (
+                  <CategoryProduct
+                    key={product.id}
+                    product={product}
+                    category={category}
+                  />
+                );
+              })}
+            </div>
+          );
+        })}
+    </>
+  );
+}

package/src/iframe/event/event-details/components/product-category-view/index.ts

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

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

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

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

@@ -0,0 +1 @@
+export * from "./routes";

package/src/iframe/event/event-details/utils/routes.ts

@@ -0,0 +1,6 @@
+const STEP_PATH_PREFIX = "step_";
+
+export const routesByStepsCount = (count: number) =>
+  Array.from({ length: count }, (_v, i) => i).map(
+    (stepIndex: number) => `/${STEP_PATH_PREFIX}${stepIndex}`
+  );

package/src/iframe/event/event-order-short-summary/components/Summary/Summary.tsx

@@ -8,25 +8,25 @@ export type SummaryDataType = {
   quantity?: number;
 }[];
 
-export const Summary = ({ data = [] }: { data: SummaryDataType }) => {
-  return (
-    <>
-      {data.map(({ name, image, quantity, title }) => {
-        const classNames = clsx("name", "mb-4", image && "align-items-center");
+export type SummaryProps = ({
+  data: SummaryDataType,
+}) => React.PropsWithChildren<any>;
 
-        return (
-          <div key={name} className="summary">
-            <p className="title mb-1">{title}</p>
-            <div className={classNames}>
-              {image && <img className="image mr-3" src={image} alt={name} />}
-              {quantity && quantity > 1 && (
-                <span className="quantity mr-3">{quantity}x</span>
-              )}
-              {name}
-            </div>
-          </div>
-        );
-      })}
-    </>
-  );
+export const Summary: SummaryProps = ({ data = [] }) => {
+  return data.map(({ name, image, quantity, title }) => {
+    const classNames = clsx("name", "mb-4", image && "align-items-center");
+
+    return (
+      <div key={name} className="summary">
+        <p className="title mb-1">{title}</p>
+        <div className={classNames}>
+          {image && <img className="image mr-3" src={image} alt={name} />}
+          {quantity && quantity > 1 && (
+            <span className="quantity mr-3">{quantity}x</span>
+          )}
+          {name}
+        </div>
+      </div>
+    );
+  });
 };

package/src/iframe/event/event-venue-map/IframeEventVenueMap.stories.tsx

@@ -5,8 +5,7 @@ import { IframeEventVenueMap } from "./IframeEventVenueMap";
 import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
 import { BookingSummary } from "../../order-process/components/BookingSummary";
-import { CalendarSelect } from "../../../calendar/components/CalendarSelect";
-import { Product } from "../../../types";
+import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
 
 export default {
   title: "Iframe/Event/IframeEventVenueMap",
@@ -26,6 +25,7 @@ const MENU_STEPS = [
         maxSubItems: 1,
         quantityType: "constant",
         type: "menuItems",
+        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,
@@ -268,10 +268,6 @@ export function Default() {
               pointProducts={MENU_STEPS[0].pointProducts}
               usedInIframe={usedInIframe}
               onPointClick={(pointId) => console.log({ pointId })}
-              products={
-                MENU_STEPS[0].productCategories[0]
-                  .products as Partial<Product>[]
-              }
               choosedProductUuids={[
                 "beb6393c-2fdd-40f7-bb92-8800685b203f",
                 "beb6393c-2fdd-40f7-bb92-8800685b203a",