@licklist/design 0.44.486-dev.9 → 0.44.486

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

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

@@ -6,14 +6,14 @@ import { useResizePageBody } from "../../hooks/useResizePageBody";
 
 export type LeftBlockProps = PropsWithChildren<
   {
-    pageTitle?: ReactNode;
+    title?: string;
     component?: ReactNode;
     childrenClassName?: string;
   } & HTMLAttributes<HTMLDivElement>
 >;
 
 export const LeftBlock = ({
-  pageTitle,
+  title,
   children,
   className,
   component,
@@ -24,9 +24,9 @@ export const LeftBlock = ({
 
   return (
     <div className={clsx("left-block", className)} {...props}>
-      {pageTitle && (
+      {title && (
         <div className="navigation">
-          <div className="title">{pageTitle}</div>
+          <p className="title">{title}</p>
           {component}
         </div>
       )}

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

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, HTMLAttributes, useCallback } from "react";
-import { BackButton } from "../../../back-button/BackButton";
 import { useSnippetStepsBackgroundColor } from "./hooks/useSnippetStepsBackgroundColor";
 
 export type PageHeaderProps = PropsWithChildren<
@@ -36,7 +35,19 @@ export const PageHeader = ({
   return (
     <div className="page-header" {...props}>
       <div className="header-container">
-        {showBackButton && <BackButton onClick={onReturnBack} />}
+        {showBackButton && (
+          <div className="button-wrapper back-button">
+            <div
+              className="back-button"
+              onClick={onReturnBack}
+              onKeyPress={onReturnBack}
+              role="button"
+              tabIndex={0}
+            >
+              &lt;
+            </div>
+          </div>
+        )}
         {children && (
           <div className="children-wrapper" style={style}>
             {children}

package/src/iframe/payment/order-items-table/OrderItemsTable.stories.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Meta } from "@storybook/react";
 import { boolean } from "@storybook/addon-knobs";
-import { ORDER_FEE_CHARGE_TYPE_CLIENT } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { OrderItemsTable } from "./OrderItemsTable";
 
 export default {
@@ -25,7 +24,6 @@ export function Default(args) {
 
 Default.args = {
   order: {
-    feeChargeType: ORDER_FEE_CHARGE_TYPE_CLIENT,
     products: [
       {
         id: 1,

package/src/iframe/payment/order-items-table/hooks/useTableData.tsx

@@ -9,12 +9,18 @@ import {
   PAYMENT_TYPE_NET_PROFIT,
 } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { StaticTableData } from "../../../../table";
-import { getProductQuantityAndPrice, getTotalSumByCategory } from "../utils";
+import {
+  getProductQuantityAndPrice,
+  calculateTotalDiscount,
+  calculateTotalPrice,
+  getPaymentValueByType,
+  getExternalPaymentDetail,
+  getTotalSumByCategory,
+} from "../utils";
 import { OrderItemsTableProps, SummaryItem } from "../types";
-import { getOrderSummaryItems } from "../utils/paymentSummary";
 
 const CURRENCY_DEFAULT = "GBP";
-export const PAYMENT_TYPE_TRANSLATE_KEYS = {
+const TRANSLATE_KEYS = {
   [PAYMENT_TYPE_NET_PROFIT]: "netAmount",
   [PAYMENT_TYPE_FEE]: "bookeditFee",
   [PAYMENT_TYPE_VAT]: "vat",
@@ -108,7 +114,9 @@ export const useTableData = ({
     );
   };
 
-  const renderSummaryItems = (summaryItems: SummaryItem[]) => {
+  const renderSummaryItems = (
+    summaryItems: { translateKey: string; price: number }[]
+  ) => {
     return summaryItems.map(({ translateKey, price }) => {
       return {
         key: uniqueId(`summary-info-${translateKey}`),
@@ -119,6 +127,86 @@ export const useTableData = ({
     });
   };
 
+  const paymentNotProcessedSummary = () => {
+    const total = calculateTotalPrice(order.orderProducts);
+
+    const summaryItems: SummaryItem[] = [
+      {
+        translateKey: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (externalDiscount) {
+      summaryItems.push({
+        price: externalDiscount,
+        translateKey: "amountWithDiscount",
+      });
+    }
+
+    if (paymentDetail) {
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+    }
+
+    return summaryItems;
+  };
+
+  const processedPaymentSummary = () => {
+    const total = calculateTotalPrice(order.orderProducts);
+    const totalDiscount = calculateTotalDiscount(order.payments);
+    const totalWithDiscount = total - Number(totalDiscount);
+    let summaryItems: SummaryItem[] = [
+      {
+        translateKey: "amountTotal",
+        price: total,
+      },
+    ];
+
+    if (totalDiscount) {
+      summaryItems.push({
+        translateKey: "amountWithDiscount",
+        price: totalWithDiscount < 0 ? 0 : totalWithDiscount,
+      });
+    }
+
+    if (paymentDetail && !order.payments.length) {
+      return [...summaryItems, ...getExternalPaymentDetail(paymentDetail)];
+    }
+
+    summaryItems.push({
+      translateKey: "totalPaid",
+      price: totalWithDiscount <= 0 ? 0 : order.totalAmount,
+    });
+    if (totalWithDiscount <= 0) {
+      return summaryItems;
+    }
+    summaryItems = [
+      ...summaryItems,
+      ...Object.keys(TRANSLATE_KEYS).map((key) => {
+        return {
+          translateKey: TRANSLATE_KEYS[key],
+          price: getPaymentValueByType(order.payments, key),
+        };
+      }),
+    ];
+
+    if (totalWithDiscount > order.totalAmount) {
+      summaryItems.push({
+        translateKey: "remainingToPay",
+        price: totalWithDiscount - order.totalAmount,
+      });
+    }
+    return summaryItems;
+  };
+
+  const getOrderSummaryItems = () => {
+    if (!isPaymentProcessed) {
+      return paymentNotProcessedSummary();
+    }
+
+    return processedPaymentSummary();
+  };
+
   const data = useMemo(
     () => {
       if (!order) {
@@ -127,14 +215,7 @@ export const useTableData = ({
 
       return [
         ...renderProductsContent(),
-        ...renderSummaryItems(
-          getOrderSummaryItems({
-            order,
-            paymentDetail,
-            isPaymentProcessed,
-            externalDiscount,
-          })
-        ),
+        ...renderSummaryItems(getOrderSummaryItems()),
       ];
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/iframe/payment/order-items-table/types/index.ts

@@ -1,24 +1,7 @@
 import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
 
-export const AMOUNT_TOTAL = "amountTotal";
-export const AMOUNT_WITH_DISCOUNT = "amountWithDiscount";
-export const TOTAL_PAID = "totalPaid";
-export const REMAINING_TO_PAY = "remainingToPay";
-
-export const SUMMARY_TRANSLATE_KEYS = [
-  AMOUNT_TOTAL,
-  AMOUNT_WITH_DISCOUNT,
-  TOTAL_PAID,
-  REMAINING_TO_PAY,
-];
-
-export type SUMMARY_TRANSLATE_KEY = typeof SUMMARY_TRANSLATE_KEYS[number];
-
-export type SummaryItem = {
-  translateKey: SUMMARY_TRANSLATE_KEY;
-  price: number;
-};
+export type SummaryItem = { translateKey: string; price: number };
 
 export type OrderItemsTableProps = {
   order?: Order;

package/src/iframe/payment/order-items-table/utils/index.ts

@@ -1,16 +1,13 @@
-import {
-  Order,
-  ORDER_FEE_CHARGE_TYPE_CLIENT,
-} from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
+import { Order } from "@licklist/core/dist/DataMapper/Order/OrderDataMapper";
 import { Product } from "@licklist/core/dist/DataMapper/Product/ProductDataMapper";
 import { PAYMENT_TYPE_DISCOUNT } from "@licklist/core/dist/DataMapper/Order/PaymentDataMapper";
 import { PaymentDetail } from "@licklist/core/dist/DataMapper/Order/PaymentDetailDataMapper";
-import { PAYMENT_TYPE_TRANSLATE_KEYS } from "../hooks/useTableData";
 
 const TRANSLATE_KEYS = {
   totalAmount: "totalPaid",
   netAmount: "netAmount",
   fee: "bookeditFee",
+  remainingToPay: "remainingToPay",
 };
 
 export enum PAYMENT_TYPE_TITLES {
@@ -19,35 +16,14 @@ export enum PAYMENT_TYPE_TITLES {
   VAT = "VAT",
 }
 
-interface ExternalPaymnetDetail {
-  translateKey: string;
-  price: number;
-}
-
-export const calculateTotalPrice = (
-  order: Order,
-  externalPaymentDetails?: ExternalPaymnetDetail[]
-) => {
-  const totalPrice =
-    order?.orderProducts?.reduce(
+export const calculateTotalPrice = (orderProducts: Order["orderProducts"]) => {
+  return (
+    orderProducts?.reduce(
       (total: number, product) =>
         total + (product?.quantity ?? 1) * product.price,
       0
-    ) ?? 0;
-
-  if (
-    order?.feeChargeType !== ORDER_FEE_CHARGE_TYPE_CLIENT ||
-    !externalPaymentDetails
-  ) {
-    return totalPrice;
-  }
-
-  const fee =
-    externalPaymentDetails.find(
-      (externalPayment) =>
-        externalPayment.translateKey === PAYMENT_TYPE_TRANSLATE_KEYS.fee
-    )?.price || 0;
-  return totalPrice + fee;
+    ) ?? 0
+  );
 };
 
 export const calculateTotalDiscount = (payments: Order["payments"]) => {
@@ -75,37 +51,21 @@ export const getProductQuantityAndPrice = (
 export const getPaymentValueByType = (
   payments: Order["payments"],
   paymentTypeTitle: string
-): number => {
-  if (!payments || !payments.length) {
-    return 0;
-  }
+) => {
   if (paymentTypeTitle === PAYMENT_TYPE_TITLES.FEE) {
     const feeWithoutVatValue =
-      payments?.reduce((sumOfPayments, payment) => {
-        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.FEE) {
-          return sumOfPayments;
-        }
-
-        return sumOfPayments + (payment?.amount ?? 0);
-      }, 0) ?? 0;
+      payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
+        ?.amount ?? 0;
 
     const vatValue =
-      payments?.reduce((sumOfPayments, payment) => {
-        if (payment.paymentType.title !== PAYMENT_TYPE_TITLES.VAT) {
-          return sumOfPayments;
-        }
-        return sumOfPayments + (payment?.amount ?? 0);
-      }, 0) ?? 0;
+      payments.find(
+        (payment) => payment.paymentType.title === PAYMENT_TYPE_TITLES.VAT
+      )?.amount ?? 0;
     return feeWithoutVatValue + vatValue;
   }
-
   return (
-    payments?.reduce((sumOfPayments, payment) => {
-      if (payment.paymentType.title !== paymentTypeTitle) {
-        return sumOfPayments;
-      }
-      return sumOfPayments + (payment?.amount ?? 0);
-    }, 0) ?? 0
+    payments.find((payment) => payment.paymentType.title === paymentTypeTitle)
+      ?.amount ?? 0
   );
 };