@licklist/design 0.44.486-dev.83 → 0.44.486

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,
@@ -27,7 +29,7 @@ export {
 export {
   BookingSummary,
   NavigationSteps,
-  NavigationStep,
+  StepsForm,
   Timer,
   NavigationFooter,
   PaymentCard,
@@ -35,11 +37,7 @@ export {
   BookingSummaryFooterProps,
   CalendarStepsForm,
   CalendarStepsFormProps,
-  ErrorModal,
-  useCategoryVerification,
 } from "./order-process";
-export { BackButton } from "./back-button";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-card";
 export { CustomDateField, CustomDateFieldProps } from "./custom-fields";

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

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

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,
@@ -26,9 +25,6 @@ export const BookingSummary = ({
   const { formatNumber } = useIntl();
 
   const orderProducts = useMemo(() => {
-    if (!formValues) {
-      return undefined;
-    }
     const products = Object.values(formValues).filter(Boolean) as Order[];
 
     return products?.filter((prod) => prod?.quantity !== 0);
@@ -48,11 +44,10 @@ 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>}
         </div>
         <hr />
 
-        {orderProducts?.length > 0 ? (
+        {orderProducts.length > 0 ? (
           <div>
             <div className="cart-items">
               {menuSteps.map((menuStep: MenuStep) => {
@@ -65,7 +60,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/components/ProductsByMenuStep/ProductsByMenuStep.tsx

@@ -2,13 +2,13 @@ import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { Order, MenuStep } from "../../../../../../types";
 
 export type ProductsByMenuStepsProps = {
   orderProducts: Order[];
   step: MenuStep;
-  productsWithErrors?: QuantityCheckProductInfo[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
 };
 
 const getIdFromEntity = (entities: { id: number }[]) =>

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

@@ -1,4 +1,4 @@
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
+import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { MenuStep, Order } from "../../../../../types";
 
 export const MOBILE_WIDTH = 576;
@@ -6,18 +6,17 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  time?: string;
-  menuSteps?: MenuStep[];
-  formValues?: {
+  menuSteps: MenuStep[];
+  formValues: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
-  shouldHidePeopleAmount?: boolean;
-  eventName?: string;
+  isNotShownPeopleAmount?: boolean;
+  eventName: string;
   hasPeopleInput?: boolean;
   transactionFee?: number;
   isFreePayment?: boolean;
-  productsWithErrors?: QuantityCheckProductInfo[];
+  productsWithErrors?: ProductQuantityCheckResponse["products"];
   isLoading?: boolean;
   peopleAmount: number;
 };

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

@@ -1,14 +1,8 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
-  if (!orderProducts || !orderProducts.length) {
-    return 0;
-  }
-  return orderProducts.reduce((prevSumValue: number, product) => {
-    if (!product) return 0;
-
+export const cartSumByOrderProducts = (orderProducts: Order[]) =>
+  orderProducts.reduce((prevSumValue: number, product) => {
     return (
       prevSumValue + (product?.deposit || product?.price) * product.quantity
     );
   }, 0);
-};

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,
@@ -424,7 +425,6 @@ export function Default() {
                 menuStepWithVenueMap={MENU_STEPS[0] as any}
                 title="Select a product"
                 activeVenueMapId="7"
-                soldOutProducts={[{ product_id: 148, message: "message" }]}
               />
             }
             rightBlock={

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

@@ -19,21 +19,19 @@ import {
 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 { ErrorModal } from "../ErrorModal/ErrorModal";
+import { MenuStep } from "../../../../types";
+import { STEP_FORM_ID } from "../../constants";
+import { ErrorModal } from "./components/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";
+import { useCategory } from "../utils/category";
 
-// TODO move this component into apps/iframe
 export interface CalendarStepsFormProps {
   step: MenuStep;
   isLastMenuStep: boolean;
@@ -46,7 +44,6 @@ export interface CalendarStepsFormProps {
   onActiveVenueMapChange?: (nextVenueMapId: string) => void;
   title: string;
   menuStepWithVenueMap: Step;
-  soldOutProducts?: QuantityCheckProductInfo[];
 }
 
 export type StepsFormRef = {
@@ -70,13 +67,12 @@ export const CalendarStepsForm = forwardRef<
       title,
       menuStepWithVenueMap,
       onActiveVenueMapChange,
-      soldOutProducts,
     },
     ref
   ) => {
     const form = useForm({ defaultValues });
     const canvasRef = useRef<VenueMapRef>(null);
-    const verifyCategoryItems = useCategoryVerification();
+    const { verifyCategoryItems } = useCategory();
     const {
       control,
       formState: { errors },
@@ -117,19 +113,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;
       }
@@ -351,14 +340,12 @@ export const CalendarStepsForm = forwardRef<
                       ref={canvasRef}
                       choosedProductUuids={choosedProductUuids}
                       errorOnChoosedProductUuids={errorOnChoosedProductUuids}
-                      soldOutProducts={soldOutProducts}
                     />
                     <Category
                       productCategories={step?.productCategories}
                       activePointId={activePointId}
                       pointProducts={menuStepWithVenueMap.pointProducts}
                       onCloseModal={onCloseProductModal}
-                      soldOutProducts={soldOutProducts}
                     />
                   </>
                 )}
@@ -370,5 +357,3 @@ export const CalendarStepsForm = forwardRef<
     );
   }
 );
-
-CalendarStepsForm.displayName = "CalendarStepsForm";