@licklist/design 0.44.486-dev.9 → 0.44.487

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.stories.tsx

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,48 @@
+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"];
+  errors?: DeepMap<Record<string, any>, FieldError>;
+}
+
+export function Category({
+  productCategories,
+  productsWithErrors,
+  errors,
+}: 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}
+                  />
+                );
+              })}
+            </div>
+          );
+        })}
+    </>
+  );
+}

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

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

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

@@ -5,17 +5,16 @@ import { useTranslation } from "react-i18next";
 import { useIntl } from "react-intl";
 import * as Config from "@licklist/core/dist/Config";
 import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { QuantityCheckProductInfo } from "@licklist/plugins/dist/types/Api/verifyStock";
 import { TicketDescription } from "../../../event/ticket-description";
 import { ProductCategory, Product } from "../../../../types";
+import { StepsFormProps } from "../StepsForm/StepsForm";
 import { ProductQuantityInput } from "./components/ProductQuantityInput";
 
 interface CategoryProductProps {
   product: Product;
   category: ProductCategory;
   canExpandDescription?: boolean;
-  productsWithErrors?: QuantityCheckProductInfo[];
-  soldOutProducts?: QuantityCheckProductInfo[];
+  productsWithErrors?: StepsFormProps["productsWithErrors"];
 }
 
 export const CategoryProduct = ({
@@ -23,7 +22,6 @@ export const CategoryProduct = ({
   category,
   canExpandDescription = true,
   productsWithErrors,
-  soldOutProducts,
 }: CategoryProductProps) => {
   const { formatNumber } = useIntl();
   const { t } = useTranslation(["Design", "Validation"]);
@@ -51,16 +49,6 @@ export const CategoryProduct = ({
     return product.deposit;
   }, [category, product]);
 
-  const checkIfSoldOutProduct = () => {
-    if (!soldOutProducts || product?.isSoldOut) {
-      return undefined;
-    }
-    const error = soldOutProducts.find(
-      (productWithError) => productWithError.product_id === product.id
-    );
-    return !!error?.message;
-  };
-
   useEffect(() => {
     if (!productQuantityError) {
       return;
@@ -83,32 +71,17 @@ export const CategoryProduct = ({
           // One case when no value is that we have product,
           // but didn't click on number input.
           // If it will be required then required check fired firstly.
+          if (!value) return true;
 
-          const {
-            isRequired = false,
-            maxAmount = 0,
-            minAmount = 0,
-            minSpend,
-            price,
-          } = product;
+          const { isRequired = false, maxAmount = 0, minAmount = 0 } = product;
 
-          const currentQuantity = value?.quantity ?? 0;
-          if (minSpend && currentQuantity * price < minSpend) {
-            return t("Design:minimumSpendSumValidation", {
-              minSpend: formatNumber(minSpend, {
-                style: "currency",
-                currency: Config.Currency.GBP,
-              }),
-            }) as string;
-          }
-
-          if (!value) return true;
+          const { quantity = 0 } = value;
 
-          if (!currentQuantity && !isRequired) {
+          if (!quantity && !isRequired) {
             return true;
           }
 
-          if (!currentQuantity && isRequired) {
+          if (!quantity && isRequired) {
             return t("Design:pleaseSelectAtLeastFrom", {
               min: 1,
               type: "item",
@@ -116,18 +89,14 @@ export const CategoryProduct = ({
             }) as string;
           }
 
-          if (currentQuantity < minAmount) {
+          if (quantity < minAmount) {
             return t("Validation:fieldMinNumber", {
               min: product.minAmount,
               attribute: product.name,
             }) as string;
           }
 
-          if (
-            maxAmount &&
-            currentQuantity >= minAmount &&
-            maxAmount < currentQuantity
-          ) {
+          if (maxAmount && quantity >= minAmount && maxAmount < quantity) {
             return t("Validation:quantityMaxNumber", {
               max: product.maxAmount,
             }) as string;
@@ -165,12 +134,9 @@ export const CategoryProduct = ({
               <ProductQuantityInput
                 onChange={onChange}
                 productInfo={productInfo}
-                refCallback={ref}
+                ref={ref}
                 clearErrors={clearErrors}
-                product={{
-                  ...product,
-                  isSoldOut: product?.isSoldOut || checkIfSoldOutProduct(),
-                }}
+                product={product}
                 category={category}
                 invalid={invalid}
                 deposit={deposit}

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

@@ -10,7 +10,6 @@ interface NumberInputProps {
   onArrowDown?: (value: number) => void;
   min?: number;
   max?: number;
-  placeholder?: string;
   defaultValue?: number;
   disabled?: boolean;
 }
@@ -25,7 +24,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
       onArrowUp,
       min,
       max,
-      placeholder,
       defaultValue,
       disabled,
     },
@@ -68,7 +66,6 @@ export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
           min={min}
           max={max}
           defaultValue={defaultValue}
-          placeholder={placeholder}
           height="5rem"
           disabled={disabled}
           ref={ref}

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

@@ -21,7 +21,7 @@ interface ProductQuantityInputProps {
   clearErrors: UseFormClearErrors<FieldValues>;
   onChange: (value: FormOrderItem) => void;
   deposit?: number;
-  refCallback: RefCallBack;
+  ref: RefCallBack;
   invalid: boolean;
   productInfo: FormOrderItem;
 }
@@ -31,7 +31,7 @@ export const ProductQuantityInput = ({
   category,
   onChange,
   clearErrors,
-  refCallback,
+  ref,
   productInfo,
   invalid,
   deposit,
@@ -59,7 +59,7 @@ export const ProductQuantityInput = ({
   if (product?.maxAmount === 1) {
     return (
       <Button
-        ref={refCallback}
+        ref={ref}
         disabled={product.isSoldOut}
         className={clsx(
           `iframe-event__${
@@ -75,7 +75,7 @@ export const ProductQuantityInput = ({
   }
   return (
     <NumberInput
-      ref={refCallback}
+      ref={ref}
       onChange={(val) => {
         onChange({
           id: product.id,
@@ -83,7 +83,7 @@ export const ProductQuantityInput = ({
           deposit,
           price: product.price,
           productsCategoryId: category.id,
-          quantity: val || null,
+          quantity: val,
         });
         clearErrors(`${product.id}` as const);
       }}
@@ -110,9 +110,8 @@ export const ProductQuantityInput = ({
         clearErrors(`${product.id}` as const);
       }}
       min={0}
-      placeholder="0"
       disabled={product.isSoldOut}
-      value={productInfo?.quantity}
+      value={productInfo?.quantity || 0}
       className={clsx(invalid && "error")}
     />
   );

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

@@ -10,15 +10,13 @@ import clsx from "clsx";
 import { useTranslation } from "react-i18next";
 import { SnippetLoader } from "../../../../static";
 
-export type NavigationStep = {
-  pathname: string;
-  key: string;
-  name: string;
-  queryParams?: Record<string, string>;
-};
-
 type NavigationStepsProps = {
-  steps: NavigationStep[];
+  steps: {
+    pathname: string;
+    key: string;
+    name: string;
+    queryParams?: Record<string, string>;
+  }[];
   isLoading?: boolean;
 };
 

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

@@ -1 +1 @@
-export { NavigationSteps, NavigationStep } from "./NavigationSteps";
+export { NavigationSteps } from "./NavigationSteps";

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

@@ -0,0 +1,173 @@
+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"];
+}
+
+export type StepsFormRef = {
+  getFormValues: () => Record<string, any>;
+};
+
+export const StepsForm = forwardRef<StepsFormRef, StepsFormProps>(
+  (
+    {
+      step,
+      isLastMenuStep,
+      setFormValues,
+      defaultValues,
+      onSubmit,
+      setFormErrors,
+      id = STEP_FORM_ID,
+      productsWithErrors,
+    },
+    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}
+              />
+
+              {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>
+    );
+  }
+);

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

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

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

@@ -11,7 +11,7 @@ export function Default() {
   return (
     <div className="payment-process">
       <div className="col-lg-4">
-        <Timer timer={120000} />
+        <Timer timer={300} />
       </div>
     </div>
   );

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

@@ -1,7 +1,7 @@
-export const fancyTimeFormat = (miliseconds: number) => {
-  const date = new Date(miliseconds);
-  const mins = date.getMinutes();
-  const secs = date.getSeconds();
+export const fancyTimeFormat = (duration: number) => {
+  const mins = Math.floor((duration % 3600) / 60);
+  const secs = Math.floor(duration) % 60;
+
   let timerString = "";
 
   timerString += `${mins}:${secs < 10 ? "0" : ""}`;

package/src/iframe/order-process/components/utils/category.ts

@@ -0,0 +1,48 @@
+import { useTranslation } from "react-i18next";
+import { MenuStep } from "../../../../types";
+
+interface CategoryError {
+  message: string;
+  id: number;
+}
+export const useCategory = () => {
+  const { t } = useTranslation("Validation");
+  const verifyCategoryItems = (
+    values: Record<string, any>,
+    step: MenuStep
+  ): CategoryError | void => {
+    let errorMessage;
+    const productArray = Object.values(values).filter(
+      (product) => product?.quantity > 0
+    );
+    step?.productCategories.forEach(
+      ({ minSubItems, maxSubItems, id, name }) => {
+        if (!minSubItems && !maxSubItems) {
+          return;
+        }
+
+        const categoryProductsQuantity = productArray.filter(
+          (product) => Number(product?.productsCategoryId) === Number(id)
+        ).length;
+        if (categoryProductsQuantity < minSubItems) {
+          const message = t("Validation:fieldMinNumber", {
+            min: minSubItems,
+            attribute: `number of products in the ${name} category`,
+          });
+          errorMessage = { id, message };
+
+          return;
+        }
+        if (maxSubItems && categoryProductsQuantity > maxSubItems) {
+          const message = t("Validation:fieldMaxNumber", {
+            max: maxSubItems,
+            attribute: `number of products in the ${name} category`,
+          });
+          errorMessage = { id, message };
+        }
+      }
+    );
+    return errorMessage;
+  };
+  return { verifyCategoryItems };
+};

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

@@ -1,5 +1,6 @@
 export { BookingSummary } from "./components/BookingSummary";
-export { NavigationSteps, NavigationStep } from "./components/NavigationSteps";
+export { NavigationSteps } from "./components/NavigationSteps";
+export { StepsForm } from "./components/StepsForm";
 export { Timer } from "./components/Timer";
 export { NavigationFooter } from "./components/NavigationFooter";
 export { PaymentCard } from "./components/PaymentCard";
@@ -7,5 +8,3 @@ export { BookingSummaryFooter } from "./components/BookingSummaryFooter";
 export type { BookingSummaryFooterProps } from "./components/BookingSummaryFooter";
 export { CalendarStepsForm } from "./components/CalendarStepsForm";
 export type { CalendarStepsFormProps } from "./components/CalendarStepsForm";
-export { useCategoryVerification } from "./components/utils/useCategoryVerification";
-export { ErrorModal } from "./components/ErrorModal";

package/src/iframe/page/components/PageBody/PageBody.tsx

@@ -21,7 +21,7 @@ export const PageBody = ({
     <div className={clsx("page-body", className)} {...props}>
       {children}
       {leftBlock}
-      {rightBlock}
+      {rightBlock && rightBlock}
     </div>
   );
 };