@licklist/design 0.44.485-dev.70 → 0.44.485-dev.71

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

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

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