@licklist/design 0.44.485-dev.89 → 0.44.485-dev.9

package/src/iframe/event/event-card/IframeEventCard.tsx

@@ -3,7 +3,7 @@ import { Card } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import clsx from "clsx";
-import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
 import { TipTapEditor } from "../../../tiptap-editor/TipTapEditor";
 import { formatContent } from "../../../events/event-card/utils";
 import { ReactComponent as ClockSvg } from "../../../assets/iframe/clock.svg";
@@ -18,8 +18,7 @@ interface IframeEventCardProps {
   cost?: number;
   date: string;
   imageSrc?: string;
-  // eslint-disable-next-line react/no-unused-prop-types
-  snippetSetting?: Snippet["widgetSetting"];
+  snippetSetting?: SnippetSetting;
   colour?: string;
   goToDetails?: () => void;
   description?: string | null;
@@ -36,6 +35,11 @@ export function IframeEventCard({
   cost,
   date,
   imageSrc,
+  snippetSetting = {
+    displayType: true,
+    displayCost: true,
+    displayDescription: true,
+  },
   colour,
   goToDetails,
   description,
@@ -98,7 +102,7 @@ export function IframeEventCard({
             </div>
           </Card.Text>
 
-          {type && (
+          {type && !!snippetSetting.displayType && (
             <Card.Text as="div" className="list-view-hided">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -109,7 +113,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {typeof cost === "number" && (
+          {typeof cost === "number" && !!snippetSetting.displayCost && (
             <Card.Text as="div">
               <div className="d-flex align-items-center mb-3">
                 <div className="icon-wrapper">
@@ -123,7 +127,7 @@ export function IframeEventCard({
             </Card.Text>
           )}
 
-          {description && (
+          {description && !!snippetSetting.displayDescription && (
             <Card.Text as="div" className="list-view-hided">
               <TipTapEditor
                 viewMode

package/src/iframe/event/event-card/IframeEventCardSkeleton.tsx

@@ -2,12 +2,11 @@ import React, { memo } from "react";
 import { Card } from "react-bootstrap";
 import clsx from "clsx";
 import Skeleton from "react-loading-skeleton";
-import { Snippet } from "@licklist/core/dist/DataMapper/Provider/SnippetDataMapper";
+import { SnippetSetting } from "@licklist/core/dist/DataMapper/Provider/SnippetSettingDataMapper";
 
 interface IframeEventCardSkeletonProps {
   showImage?: boolean;
-  // eslint-disable-next-line react/no-unused-prop-types
-  snippetSetting?: Snippet["widgetSetting"];
+  snippetSetting?: SnippetSetting;
   colour?: string;
   isListView?: boolean;
   className?: string;
@@ -16,6 +15,11 @@ interface IframeEventCardSkeletonProps {
 export const IframeEventCardSkeleton = memo(
   ({
     showImage,
+    snippetSetting = {
+      displayType: true,
+      displayCost: true,
+      displayDescription: true,
+    },
     colour,
     isListView = false,
     className,
@@ -57,25 +61,31 @@ export const IframeEventCardSkeleton = memo(
               </div>
             </Card.Text>
 
-            <Card.Text as="div" className="list-view-hided">
-              <div className="d-flex align-items-center mb-3">
-                <p className="iframe-event-card__bold m-0">
-                  <Skeleton className="skeleton-w6" />
-                </p>
-              </div>
-            </Card.Text>
+            {!!snippetSetting.displayType && (
+              <Card.Text as="div" className="list-view-hided">
+                <div className="d-flex align-items-center mb-3">
+                  <p className="iframe-event-card__bold m-0">
+                    <Skeleton className="skeleton-w6" />
+                  </p>
+                </div>
+              </Card.Text>
+            )}
 
-            <Card.Text as="div">
-              <div className="d-flex align-items-center mb-3">
-                <p className="iframe-event-card__bold m-0">
-                  <Skeleton className="skeleton-w6" />
-                </p>
-              </div>
-            </Card.Text>
+            {!!snippetSetting.displayCost && (
+              <Card.Text as="div">
+                <div className="d-flex align-items-center mb-3">
+                  <p className="iframe-event-card__bold m-0">
+                    <Skeleton className="skeleton-w6" />
+                  </p>
+                </div>
+              </Card.Text>
+            )}
 
-            <Card.Text as="div" className="list-view-hided">
-              <Skeleton className="w-100 h-100" />
-            </Card.Text>
+            {!!snippetSetting.displayDescription && (
+              <Card.Text as="div" className="list-view-hided">
+                <Skeleton className="w-100 h-100" />
+              </Card.Text>
+            )}
           </div>
         </Card.Body>
       </Card>

package/src/iframe/event/event-card/IframeEventCards.stories.tsx

@@ -581,8 +581,9 @@ export function Default() {
             date={String(event.startAt)}
             colour={event.colour}
             snippetSetting={{
-              includeAvailability: [],
-              includeFromPrice: [],
+              displayCost,
+              displayType,
+              displayDescription,
             }}
             imageSrc={event.imgSrc}
             goToDetails={() => {}}

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

@@ -6,7 +6,6 @@ import { Page, PageBody, PageHeader } from "../../page";
 import { BookingSummaryFooter } from "../../order-process/components/BookingSummaryFooter";
 import { BookingSummary } from "../../order-process/components/BookingSummary";
 import { CalendarSelect } from "../event-calendar/components/CalendarSelect";
-import { Product } from "../../../types";
 
 export default {
   title: "Iframe/Event/IframeEventVenueMap",
@@ -269,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",

package/src/iframe/index.ts

@@ -29,7 +29,7 @@ export {
 export {
   BookingSummary,
   NavigationSteps,
-  NavigationStep,
+  StepsForm,
   Timer,
   NavigationFooter,
   PaymentCard,
@@ -37,10 +37,7 @@ export {
   BookingSummaryFooterProps,
   CalendarStepsForm,
   CalendarStepsFormProps,
-  ErrorModal,
-  useCategoryVerification,
 } from "./order-process";
 export { PoweredBy } from "./powered-by";
 export * from "./page";
-export * from "./activity-cards";
 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

@@ -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);
-};