@licklist/design 0.44.526 → 0.44.528

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

@@ -1,363 +0,0 @@
-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,
-        minSub: 10,
-        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(120000);
-  const updateTimerState = () => {
-    setTimer((prevValue) => {
-      if (prevValue <= 0) {
-        return 0;
-      }
-
-      const nexValue = prevValue - 1000;
-
-      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/Category/Category.stories.tsx

@@ -1,118 +0,0 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { useForm, FormProvider } from "react-hook-form";
-import { Image } from "@licklist/core/dist/DataMapper/Media/ImageDataMapper";
-import { Category } from "./Category";
-
-export default {
-  title: "Iframe/Order-Process/Category",
-  component: Category,
-} as Meta;
-
-const IMAGES = [
-  {
-    id: 1,
-    path: "test",
-    imageType: "image",
-    url: "https://fastly.picsum.photos/id/13/2500/1667.jpg?hmac=SoX9UoHhN8HyklRA4A3vcCWJMVtiBXUg0W4ljWTor7s",
-  } as Image,
-];
-
-const productCategories = [
-  {
-    id: 1,
-    name: "Early Bird General Admission",
-    allowDeposits: true,
-    remainderExpireAfter: null,
-    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.`,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 7,
-        images: IMAGES,
-        isRequired: true,
-        deposit: 4,
-      },
-      {
-        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.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,
-        isSoldOut: true,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    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,
-        images: [],
-      },
-      {
-        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,
-        images: IMAGES,
-      },
-    ],
-  },
-  {
-    id: 9,
-    name: "Super",
-    products: [
-      {
-        id: 10,
-        name: "Beer no description",
-        description: ``,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 1,
-        images: IMAGES,
-      },
-      {
-        id: 11,
-        name: "Wine no description",
-        description: ``,
-        minQuantity: 1,
-        maxQuantity: 10,
-        price: 0,
-        images: IMAGES,
-      },
-    ],
-  },
-];
-
-export function Default() {
-  const form = useForm();
-  return (
-    <FormProvider {...form}>
-      <div className="payment-process">
-        <Category productCategories={productCategories} />
-      </div>
-    </FormProvider>
-  );
-}

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

@@ -1,51 +0,0 @@
-import React from "react";
-
-import { DeepMap, FieldError } from "react-hook-form";
-import { ProductCategory } from "../../../../types";
-import { CategoryProduct } from "../CategoryProduct";
-import { StepsFormProps } from "../StepsForm/StepsForm";
-
-interface CategoryProps {
-  productCategories: ProductCategory[];
-  productsWithErrors?: StepsFormProps["productsWithErrors"];
-  soldOutProducts?: StepsFormProps["productsWithErrors"];
-  errors?: DeepMap<Record<string, any>, FieldError>;
-}
-
-export function Category({
-  productCategories,
-  productsWithErrors,
-  errors,
-  soldOutProducts,
-}: CategoryProps) {
-  return (
-    <>
-      {productCategories.length !== 0 &&
-        productCategories.map((category) => {
-          const categoryError = errors?.[`category_${category.id}`];
-          return (
-            <div key={category.id} className="iframe-event__category">
-              <h4 className="iframe-event__name">{category.name}</h4>
-              {categoryError && (
-                <div className="iframe-event__message-error">
-                  {categoryError?.message}
-                </div>
-              )}
-
-              {category.products.map((product) => {
-                return (
-                  <CategoryProduct
-                    key={product.id}
-                    product={product}
-                    category={category}
-                    productsWithErrors={productsWithErrors}
-                    soldOutProducts={soldOutProducts}
-                  />
-                );
-              })}
-            </div>
-          );
-        })}
-    </>
-  );
-}

package/src/iframe/order-process/components/Category/index.ts

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

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

@@ -1,176 +0,0 @@
-import React, {
-  useEffect,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-} from "react";
-import { useWatch, useForm, FormProvider } from "react-hook-form";
-import { isEqual } from "lodash";
-import { Form } from "react-bootstrap";
-import { useTranslation, Trans } from "react-i18next";
-import { scrollToError } from "@licklist/plugins/dist/utils/ScrollUtils";
-import { usePreviousValue } from "@licklist/plugins/dist/hooks/Value/usePreviousValue";
-import {
-  getFirstErrorKey,
-  isFormValuesEmpty,
-} from "@licklist/plugins/dist/utils/FormValues";
-import { ProductQuantityCheckResponse } from "@licklist/plugins/dist/types/Api/verifyStock";
-import { Category } from "../Category";
-import { MenuStep } from "../../../../types";
-import { STEP_FORM_ID } from "../../constants";
-import { ErrorModal } from "../CalendarStepsForm/components/ErrorModal";
-import { useCategory } from "../utils/category";
-
-const NO_ORDER_ITEMS_ERROR = "NO_ORDER_ITEMS_ERROR";
-
-export interface StepsFormProps {
-  step: MenuStep;
-  isLastMenuStep: boolean;
-  onSubmit: (values: Record<string, any>) => void;
-  setFormValues: (values: Record<string, any>) => void;
-  defaultValues: Record<string, any>;
-  setFormErrors?: (errors: Record<string, any>) => void;
-  id?: string;
-  productsWithErrors?: ProductQuantityCheckResponse["products"];
-  soldOutProducts?: ProductQuantityCheckResponse["products"];
-}
-
-export type StepsFormRef = {
-  getFormValues: () => Record<string, any>;
-};
-
-export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
-  (
-    {
-      step,
-      isLastMenuStep,
-      setFormValues,
-      defaultValues,
-      onSubmit,
-      setFormErrors,
-      id = STEP_FORM_ID,
-      productsWithErrors,
-      soldOutProducts,
-    },
-    ref
-  ) => {
-    const form = useForm({ defaultValues });
-    const { t } = useTranslation(["Design", "Validation"]);
-    const [formStepError, setStepFormError] = useState("");
-
-    const { verifyCategoryItems } = useCategory();
-    const {
-      control,
-      formState: { errors },
-      getValues,
-      setError,
-      clearErrors,
-      reset,
-    } = form;
-    const formValues = useWatch({ control });
-    const prevErrors = usePreviousValue(errors);
-
-    useImperativeHandle(ref, () => {
-      return {
-        getFormValues: () => getValues(),
-      };
-    });
-
-    useEffect(() => {
-      if (!productsWithErrors) {
-        return;
-      }
-      setStepFormError(t("soldOutProduct"));
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [productsWithErrors]);
-
-    const submitCurrentForm = (values: Record<string, any>) => {
-      if (isLastMenuStep && isFormValuesEmpty(values)) {
-        setError(NO_ORDER_ITEMS_ERROR, {});
-        scrollToError(NO_ORDER_ITEMS_ERROR);
-        return;
-      }
-
-      // @TODO it's temporary solution, please remove it later
-      const categoryError = verifyCategoryItems(values, step);
-
-      if (categoryError) {
-        setStepFormError(categoryError.message);
-        setError(`category_${categoryError.id}`, {
-          message: categoryError.message,
-        });
-        return;
-      }
-
-      onSubmit(values);
-    };
-
-    const onErrorSubmit = (submitErrors) => {
-      scrollToError(getFirstErrorKey(submitErrors));
-      setStepFormError(t("pleaseCheckSelectedProducts"));
-    };
-
-    useEffect(() => {
-      if (errors) {
-        setTimeout(clearErrors, 0);
-      }
-      setFormValues(formValues);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [formValues]);
-
-    useEffect(() => {
-      if (isFormValuesEmpty(formValues)) return;
-
-      clearErrors(NO_ORDER_ITEMS_ERROR);
-    }, [formValues, clearErrors]);
-
-    useEffect(() => {
-      reset(defaultValues);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [defaultValues]);
-
-    useEffect(() => {
-      if (isEqual(errors, prevErrors) || !setFormErrors) return;
-
-      setFormErrors(errors);
-    }, [errors, prevErrors, setFormErrors]);
-
-    return (
-      <Form
-        onSubmit={form.handleSubmit(submitCurrentForm, onErrorSubmit)}
-        id={id}
-      >
-        <FormProvider {...form}>
-          <ErrorModal
-            isOpen={Boolean(formStepError)}
-            messageKey={formStepError}
-            onClose={() => setStepFormError("")}
-          />
-          <div>
-            <div className="iframe-event">
-              <Category
-                productCategories={step?.productCategories}
-                productsWithErrors={productsWithErrors}
-                errors={errors}
-                soldOutProducts={soldOutProducts}
-              />
-
-              {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>
-          </div>
-        </FormProvider>
-      </Form>
-    );
-  }
-);