@licklist/design 0.44.486-dev.69 → 0.44.486-dev.7

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-venue-map/IframeEventVenueMap.stories.tsx

@@ -5,7 +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 { CalendarSelect } from "../event-calendar/components/CalendarSelect";
 import { Product } from "../../../types";
 
 export default {
@@ -26,6 +26,7 @@ const MENU_STEPS = [
         maxSubItems: 1,
         quantityType: "constant",
         type: "menuItems",
+        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

package/src/iframe/event/index.ts

@@ -1,6 +1,7 @@
 export { EventBookingForm } from "./event-booking-form";
 export { EventBookingView } from "./event-booking-view";
 export { IframeEventCard, IframeEventCardSkeleton } from "./event-card";
+export { EventDetails } from "./event-details";
 export { TicketDescription } from "./ticket-description";
 export { EventTables } from "./event-tables";
 export { EventOrderSummary } from "./event-order-summary";
@@ -12,6 +13,12 @@ export {
 } from "./event-order-short-summary";
 export { EventDescription } from "./event-description";
 export { EventProductSets, EventProductSetsProps } from "./event-product-sets";
+export {
+  EventCalendar,
+  CalendarSelect,
+  CalendarSelectProps,
+  CalendarSelectOption,
+} from "./event-calendar";
 export {
   EventStepVenueMapZones,
   EventStepVenueMapZonesProps,

package/src/iframe/event/ticket-description/TicketDescription.stories.tsx

@@ -19,10 +19,7 @@ export const Default: Story = () => {
       If you are a student at Bucks University you do not need to buy a ticket, 
       your general admission is included as part of the Big Deal packages."
         images={[
-          {
-            id: 1,
-            url: "https://cdn.lickli.st/ZH4SRqrufMqcC8S1TWR3ELz9FU45he1t/images/original/000/000/000/000/481-b7e137ca90c91e24.jpeg",
-          } as Image,
+          { id: 1, path: "https://source.unsplash.com/random" } as Image,
         ]}
       />
     </div>
@@ -41,10 +38,7 @@ export const Highlighted: Story = () => {
       If you are a student at Bucks University you do not need to buy a ticket, 
       your general admission is included as part of the Big Deal packages."
         images={[
-          {
-            id: 1,
-            url: "https://cdn.lickli.st/ZH4SRqrufMqcC8S1TWR3ELz9FU45he1t/images/original/000/000/000/000/481-b7e137ca90c91e24.jpeg",
-          } as Image,
+          { id: 1, path: "https://source.unsplash.com/random" } as Image,
         ]}
       />
     </div>

package/src/iframe/event/ticket-description/TicketDescription.tsx

@@ -1,9 +1,6 @@
 import React, { CSSProperties, ReactNode, useState } from "react";
 import clsx from "clsx";
-import {
-  Image,
-  THUMBNAIL_IMAGE_SIZE,
-} from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
+import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
 import MediaService from "@licklist/plugins/dist/services/Media/MediaService";
 import { TextExpand } from "../../../static/text-expand";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
@@ -34,9 +31,7 @@ export function TicketDescription({
 
   const wrapperClasses = clsx("ticket-description", className);
 
-  const imageSrc = images
-    ? MediaService.getImageSrc(images, THUMBNAIL_IMAGE_SIZE)
-    : null;
+  const imageSrc = images ? MediaService.getImageSrc(images) : null;
 
   const descriptionWrapperStyle = {
     "--description-wrapper-height": "inherit",

package/src/iframe/index.ts

@@ -3,12 +3,14 @@ export {
   EventBookingView,
   EventOrderSummary,
   EventTables,
+  EventDetails,
   IframeEventCard,
   TicketDescription,
   EventBookingProducts,
   EventOrderShortSummary,
   SummaryDataType,
   EventDescription,
+  EventCalendar,
   EventProductSets,
   EventProductSetsProps,
   IframeEventVenueMap,
@@ -41,5 +43,5 @@ export {
 export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-card";
+export * from "./activity-cards";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

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

@@ -11,10 +11,9 @@ import { BookingSummaryAccordion } from "./components/BookingSummaryAccordion";
 
 export const BookingSummary = ({
   date,
-  time,
   menuSteps,
   formValues,
-  shouldHidePeopleAmount,
+  isNotShownPeopleAmount,
   eventName,
   transactionFee = 0,
   productsWithErrors,
@@ -48,7 +47,7 @@ export const BookingSummary = ({
         <div className="event-info">
           <p className="m-0 title event-name">{eventName}</p>
           <p className="m-0">{date}</p>
-          {time && <p className="m-0">{time}</p>}
+          {/* TODO implement start time here */}
         </div>
         <hr />
 
@@ -65,7 +64,7 @@ export const BookingSummary = ({
                   />
                 );
               })}
-              {!shouldHidePeopleAmount && peopleAmount > 0 && (
+              {!isNotShownPeopleAmount && peopleAmount > 0 && (
                 <>
                   <hr />
                   <div className="d-flex justify-content-between mt-3">

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

@@ -6,13 +6,12 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  time?: string;
   menuSteps?: MenuStep[];
   formValues?: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
-  shouldHidePeopleAmount?: boolean;
+  isNotShownPeopleAmount?: boolean;
   eventName?: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;

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

@@ -5,8 +5,6 @@ export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
     return 0;
   }
   return orderProducts.reduce((prevSumValue: number, product) => {
-    if (!product) return 0;
-
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );

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

@@ -212,6 +212,7 @@ const MENU_STEPS = [
         minSubItems: 1,
         quantityType: "constant" as const,
         type: "menuItems" as const,
+        isRelyOnPeople: false,
         collectUserInfo: false,
         isTimeRelated: false,
         hasTicket: false,

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

@@ -20,15 +20,15 @@ import { Step } from "@licklist/core/dist/DataMapper/Product/StepDataMapper";
 import { useTranslation } from "react-i18next";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { MenuStep } from "@licklist/plugins/dist/types/context/sale/menuSteps";
 import { Category } from "./components/Category";
-import { MIN_SPEND_ERROR, STEP_FORM_ID } from "../../constants";
+import { MenuStep } from "../../../../types";
+import { STEP_FORM_ID } from "../../constants";
 import { ErrorModal } from "../ErrorModal/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
   CalendarSelectOption,
-} from "../../../../calendar/components/CalendarSelect";
+} from "../../../event/event-calendar/components/CalendarSelect";
 import { IframeEventVenueMap } from "../../../event/event-venue-map";
 import { VenueMapRef } from "../../../../events/event-venue-map/components/VenueMap";
 import { useCategoryVerification } from "../utils/useCategoryVerification";
@@ -117,19 +117,12 @@ export const CalendarStepsForm = forwardRef<
         );
         return;
       }
-      const orderError = verifyCategoryItems(
-        values,
-        step.productCategories,
-        isLastMenuStep
-      );
+      const categoryError = verifyCategoryItems(values, step);
 
-      if (orderError) {
-        const categoryId = orderError.id
-          ? `category_${orderError.id}`
-          : MIN_SPEND_ERROR;
-        setStepFormError(orderError.message);
-        setError(categoryId as never, {
-          message: orderError.message,
+      if (categoryError) {
+        setStepFormError(categoryError.message);
+        setError(`category_${categoryError.id}`, {
+          message: categoryError.message,
         });
         return;
       }
@@ -370,5 +363,3 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
-
-CalendarStepsForm.displayName = "CalendarStepsForm";

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

@@ -84,9 +84,23 @@ export const CategoryProduct = ({
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
 
-          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
+          const {
+            isRequired = false,
+            maxAmount = 0,
+            minAmount = 0,
+            minSpend,
+            price,
+          } = product;
 
           const currentQuantity = value?.quantity ?? 0;
+          if (minSpend && currentQuantity * price < minSpend) {
+            return t("Design:minimumSpendSumValidation", {
+              minSpend: formatNumber(minSpend, {
+                style: "currency",
+                currency: Config.Currency.GBP,
+              }),
+            }) as string;
+          }
 
           if (!value) return true;