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

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

@@ -25,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);
@@ -50,7 +47,7 @@ export const BookingSummary = ({
         </div>
         <hr />
 
-        {orderProducts?.length > 0 ? (
+        {orderProducts.length > 0 ? (
           <div>
             <div className="cart-items">
               {menuSteps.map((menuStep: MenuStep) => {

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,17 +6,17 @@ export const ACCORDION_KEY = "booking-summary";
 
 export type BookingSummaryProps = {
   date: string;
-  menuSteps?: MenuStep[];
-  formValues?: {
+  menuSteps: MenuStep[];
+  formValues: {
     [key: string]: Order;
   };
   totalWithDiscount?: number;
   isNotShownPeopleAmount?: boolean;
-  eventName?: string;
+  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,12 +1,8 @@
 import { Order } from "../../../../../types";
 
-export const cartSumByOrderProducts = (orderProducts?: Order[]) => {
-  if (!orderProducts || !orderProducts.length) {
-    return 0;
-  }
-  return orderProducts.reduce((prevSumValue: number, product) => {
+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

@@ -425,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,11 +19,10 @@ 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 { Category } from "./components/Category";
 import { MenuStep } from "../../../../types";
 import { STEP_FORM_ID } from "../../constants";
-import { ErrorModal } from "../ErrorModal/ErrorModal";
+import { ErrorModal } from "./components/ErrorModal";
 import { PageBody } from "../../../page/components/PageBody";
 import {
   CalendarSelect,
@@ -31,9 +30,8 @@ import {
 } 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 },
@@ -344,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}
                     />
                   </>
                 )}

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../../types";
 import { CategoryProductModal } from "./CategoryProductModal";
 
@@ -9,7 +8,6 @@ export type CategoryProps = {
   activePointId?: number;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const Category = ({
@@ -17,7 +15,6 @@ export const Category = ({
   activePointId,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProps) => {
   return (
     <>
@@ -34,7 +31,6 @@ export const Category = ({
                     activePointId={activePointId}
                     pointProducts={pointProducts}
                     onCloseModal={onCloseModal}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}

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

@@ -2,7 +2,6 @@ import React, { useMemo } from "react";
 import clsx from "clsx";
 import { Button } from "react-bootstrap";
 import { PointProduct } from "@licklist/core/dist/DataMapper/Product/PointProductDataMapper";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory, Product } from "../../../../../types";
 import { CategoryProduct } from "../../CategoryProduct";
 import Icon from "../../../../../static/Icon";
@@ -13,7 +12,6 @@ export type CategoryProductModalProps = {
   category: ProductCategory;
   pointProducts: PointProduct[];
   onCloseModal: () => void;
-  soldOutProducts?: QuantityCheckProductInfo[];
 };
 
 export const CategoryProductModal = ({
@@ -22,7 +20,6 @@ export const CategoryProductModal = ({
   category,
   pointProducts,
   onCloseModal,
-  soldOutProducts,
 }: CategoryProductModalProps) => {
   const activePointProduct = useMemo(
     () =>
@@ -45,7 +42,6 @@ export const CategoryProductModal = ({
         product={product}
         category={category}
         canExpandDescription={false}
-        soldOutProducts={soldOutProducts}
       />
       <div className="close-modal-button">
         <Button

package/src/iframe/order-process/components/{ErrorModal → CalendarStepsForm/components}/ErrorModal.tsx

@@ -5,7 +5,7 @@ import ModalHeader from "react-bootstrap/ModalHeader";
 import ModalTitle from "react-bootstrap/ModalTitle";
 import ModalBody from "react-bootstrap/ModalBody";
 import Modal from "react-bootstrap/Modal";
-import Icon from "../../../../static/Icon";
+import Icon from "../../../../../static/Icon";
 
 export interface ErrorModalProps {
   isOpen: boolean;

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

@@ -1,14 +1,13 @@
 import React from "react";
 
 import { DeepMap, FieldError } from "react-hook-form";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { ProductCategory } from "../../../../types";
 import { CategoryProduct } from "../CategoryProduct";
+import { StepsFormProps } from "../StepsForm/StepsForm";
 
 interface CategoryProps {
   productCategories: ProductCategory[];
-  productsWithErrors?: QuantityCheckProductInfo[];
-  soldOutProducts?: QuantityCheckProductInfo[];
+  productsWithErrors?: StepsFormProps["productsWithErrors"];
   errors?: DeepMap<Record<string, any>, FieldError>;
 }
 
@@ -16,7 +15,6 @@ export function Category({
   productCategories,
   productsWithErrors,
   errors,
-  soldOutProducts,
 }: CategoryProps) {
   return (
     <>
@@ -39,7 +37,6 @@ export function Category({
                     product={product}
                     category={category}
                     productsWithErrors={productsWithErrors}
-                    soldOutProducts={soldOutProducts}
                   />
                 );
               })}