@licklist/design 0.44.485-dev.90 → 0.44.485-dev.91

package/src/sales/manual-booking/create-user/CreateUser.tsx

@@ -1,224 +0,0 @@
-import React, { useEffect } from "react";
-import { useFormContext } from "react-hook-form";
-import lettersRule from "@licklist/plugins/dist/validation/Rules/lettersRule";
-import { useTranslation } from "react-i18next";
-import { Button, Form } from "react-bootstrap";
-import {
-  HookFormService,
-  checkIsValidBirthday,
-  emailRule,
-  phoneRule,
-  useDashboardUserApi,
-} from "@licklist/plugins/dist";
-import clsx from "clsx";
-import useNotification from "@licklist/plugins/dist/context/app/hooks/useNotification";
-import {
-  DEFAULT_USER_LAST_NAME,
-  DEFAULT_USER_EMAIL,
-} from "@licklist/core/dist/Config/DefaultUser";
-import { dateToSqlDate } from "../../../static/manual-date-picker/utils";
-import { ManualDatePicker } from "../../../static/manual-date-picker";
-import { useManualDatePicker } from "../../../static/manual-date-picker/hooks/useManualDatePicker";
-import { Icon } from "../../../static";
-
-export const CreateUser = ({
-  goToSearchUsers,
-  providerId,
-}: {
-  goToSearchUsers: () => void;
-  providerId: number;
-}) => {
-  const { t } = useTranslation(["Sale", "Design", "App", "Validation"]);
-  const notification = useNotification();
-  const { create } = useDashboardUserApi(providerId);
-
-  const {
-    formState: { errors, isSubmitted },
-    register,
-    setValue,
-    watch,
-    getValues,
-  } = useFormContext();
-  const birthday = watch("birthdate");
-  const firstname = watch("firstName");
-  const [manualDatePickerProps, { isChoosedDateValid, fieldErrors }] =
-    useManualDatePicker({
-      isRequired: false,
-      isSubmitted,
-      fieldName: "birthdate",
-      value: birthday,
-      fieldErrors: HookFormService.getErrors("birthdate" as const, errors),
-    });
-  const { day, year, month } = manualDatePickerProps;
-
-  useEffect(() => {
-    if (!day || !month || !year || !isChoosedDateValid()) {
-      return;
-    }
-
-    setValue("birthdate" as const, dateToSqlDate(day, month, year), {
-      shouldValidate: true,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [day, month, year]);
-
-  const onAddUser = async () => {
-    const values = getValues();
-    const user = await create.execute({
-      first_name: values.firstName,
-      last_name: values.lastName,
-      email: values.email,
-      user_detail: {
-        phone: values.phone,
-        birthday: values.birthdate,
-      },
-    });
-
-    if (!user) {
-      return;
-    }
-
-    const userInfo = {
-      userId: String(user.id),
-      firstName: user.firstName,
-      lastName: user.lastName === DEFAULT_USER_LAST_NAME ? null : user.lastName,
-      email: user.email === DEFAULT_USER_EMAIL ? null : user.email,
-      phone:
-        user?.userDetail && user?.userDetail?.phone
-          ? String(user?.userDetail?.phone)
-          : undefined,
-      birthdate:
-        user?.userDetail && user.userDetail?.birthday
-          ? user.userDetail?.birthday
-          : undefined,
-    };
-    Object.entries(userInfo).forEach(([field, value]) => {
-      setValue(field as keyof typeof userInfo, value);
-    });
-    notification.success({
-      title: t("App:success"),
-      message: t("Notification:customerAddedSuccessfully"),
-    });
-  };
-
-  return (
-    <>
-      <Button
-        as="button"
-        type="button"
-        onClick={goToSearchUsers}
-        variant="primary"
-        className="mb-4 mt-4 align-items-center d-flex"
-      >
-        {t("Design:search")}
-        <Icon type="search" height="1.4rem" width="1.4rem" className="ml-3" />
-      </Button>
-      <div className="input-label">
-        {t("Design:firstName")}
-        <span className="text-danger">*</span>
-      </div>
-      <Form.Control
-        type="text"
-        isInvalid={!!errors?.firstName}
-        {...register("firstName", {
-          pattern: lettersRule,
-          maxLength: 255,
-          required: true,
-        })}
-      />
-      <Form.Control.Feedback type="invalid">
-        {HookFormService.hasError(errors?.firstName, "required") &&
-          t("Validation:fieldRequired", {
-            attribute: t("Design:firstName"),
-          })}
-        {HookFormService.hasError(errors?.firstName, "pattern") &&
-          t("Sale:fieldIsNotValid", {
-            attribute: t("Design:firstName"),
-          })}
-      </Form.Control.Feedback>
-      <div className="input-label">{t("Design:lastName")}</div>
-      <Form.Control
-        type="text"
-        isInvalid={!!errors?.lastName}
-        {...register("lastName", {
-          pattern: lettersRule,
-          maxLength: 255,
-        })}
-      />
-      <Form.Control.Feedback type="invalid">
-        {errors?.lastName &&
-          t("Sale:fieldIsNotValid", { attribute: t("Design:lastName") })}
-      </Form.Control.Feedback>
-      <div className="input-label">{t("Design:email")}</div>
-      <Form.Control
-        type="text"
-        isInvalid={HookFormService.isInvalid(`email` as const, errors)}
-        {...register("email", { pattern: emailRule, maxLength: 255 })}
-      />
-      <Form.Control.Feedback type="invalid">
-        {errors?.email &&
-          t("Sale:fieldIsNotValid", { attribute: t("Design:email") })}
-      </Form.Control.Feedback>
-      <div className="input-label">{t("Design:phone")}</div>
-      <Form.Control
-        type="number"
-        {...register("phone", { pattern: phoneRule, maxLength: 255 })}
-        isInvalid={!!errors?.phone}
-      />
-      <Form.Control.Feedback type="invalid">
-        {errors?.phone &&
-          t("Sale:fieldIsNotValid", {
-            attribute: "phone number",
-          })}
-      </Form.Control.Feedback>
-      <div className="input-label">{t("Design:dayOfBirthShort")}</div>
-      <Form.Control
-        type="hidden"
-        {...register("birthdate", {
-          validate: (value) => {
-            if (!value) {
-              return true;
-            }
-
-            if (!checkIsValidBirthday(value)) {
-              return `${t("Sale:fieldIsNotValid", {
-                attribute: t("App:birthday"),
-              })}`;
-            }
-
-            return true;
-          },
-        })}
-        isInvalid={!!errors.birthdate}
-        className={clsx(
-          "datetime-form-picker",
-          birthday && "date-input-with-value"
-        )}
-      />
-      <div className="d-flex">
-        <ManualDatePicker {...manualDatePickerProps} isRequred={false} />
-      </div>
-      <Form.Control.Feedback type="invalid">
-        {errors?.birthdate?.message || fieldErrors()}
-      </Form.Control.Feedback>
-      <Button
-        as="button"
-        type="button"
-        onClick={onAddUser}
-        variant="primary"
-        className="mb-4"
-        disabled={
-          !firstname ||
-          errors?.firstName ||
-          errors?.lastName ||
-          errors?.email ||
-          errors?.phone ||
-          errors?.birthday ||
-          create.isLoading
-        }
-      >
-        {t("Sale:addCustomer")}
-      </Button>
-    </>
-  );
-};

package/src/sales/manual-booking/create-user/index.ts

@@ -1 +0,0 @@
-export * from "./CreateUser";

package/src/sales/manual-booking/customer-info/CustomerInfo.tsx

@@ -1,128 +0,0 @@
-import React, { FC, useEffect, useMemo, useState } from "react";
-import { Accordion } from "react-bootstrap";
-import { useTranslation } from "react-i18next";
-import { useFormContext } from "react-hook-form";
-import HookFormService from "@licklist/plugins/dist/services/Form/HookFormService";
-import { CreateUser } from "../create-user/CreateUser";
-import { CollapsibleInputGroup } from "../../../collapsible-input-group";
-import { SearchUser } from "../search-user";
-
-type CustomerInfoProps = { providerId: number | undefined };
-
-const userFields = [
-  "firstName",
-  "lastName",
-  "userId",
-  "birthday",
-  "phone",
-  "email",
-] as const;
-
-export const CustomerInfo: FC<CustomerInfoProps> = ({ providerId }) => {
-  const { t } = useTranslation(["Sale", "Design", "Validation"]);
-  const {
-    formState: { errors },
-    watch,
-    clearErrors,
-    setValue,
-    register,
-  } = useFormContext();
-  const firstName = watch("firstName");
-  const firstNameRequired = useMemo(
-    () => HookFormService.hasError(errors?.firstName, "required"),
-    [errors?.firstName]
-  );
-
-  const errorMessage = firstNameRequired
-    ? t("Validation:fieldRequired", {
-        attribute: t("Sale:Customer first name"),
-      })
-    : t("Sale:customerInfoError");
-
-  useEffect(() => {
-    if (!firstNameRequired || !firstName || !firstName.length) {
-      return;
-    }
-
-    clearErrors("firstName");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [errors?.firstName, firstName]);
-
-  const customerInfoError = useMemo(
-    () =>
-      !!errors?.firstName ||
-      !!errors?.lastName ||
-      !!errors?.email ||
-      !!errors?.phone ||
-      !!errors?.birthdate,
-    [
-      errors.firstName,
-      errors?.lastName,
-      errors?.email,
-      errors?.phone,
-      errors?.birthdate,
-    ]
-  );
-
-  const [isCreatingUser, setCreatingUser] = useState(false);
-
-  const resetFields = (fieldForSave?: string) => {
-    userFields.forEach((field) => {
-      if (fieldForSave && field === fieldForSave) {
-        return;
-      }
-      setValue(field, undefined);
-    });
-  };
-
-  const handleNoFoundUsers = (isSearchName?: boolean) => {
-    setCreatingUser(true);
-    resetFields(isSearchName ? "firstName" : "email");
-  };
-
-  const goToSearchUsers = () => {
-    setCreatingUser(false);
-    resetFields();
-  };
-
-  register("firstName", { required: true });
-
-  return (
-    <Accordion className="medium-accordition accordition-customer-info">
-      <CollapsibleInputGroup
-        description=""
-        eventKey="medium-accordition"
-        label={
-          <>
-            <div className="medium-accordition-header">
-              <div className="product-title">{t("Sale:customerInfo")}</div>
-            </div>
-            {customerInfoError && (
-              <div className="d-flex mt-3 w-100">
-                <p className="iframe-event__message-error mb-0">
-                  {errorMessage}
-                </p>
-              </div>
-            )}
-          </>
-        }
-      >
-        <div className="customer-info">
-          {isCreatingUser ? (
-            <>
-              <CreateUser
-                goToSearchUsers={goToSearchUsers}
-                providerId={providerId}
-              />
-            </>
-          ) : (
-            <SearchUser
-              providerId={providerId}
-              handleNoFoundUsers={handleNoFoundUsers}
-            />
-          )}
-        </div>
-      </CollapsibleInputGroup>
-    </Accordion>
-  );
-};

package/src/sales/manual-booking/customer-info/index.ts

@@ -1 +0,0 @@
-export * from "./CustomerInfo";

package/src/sales/manual-booking/final-step/FinalStep.tsx

@@ -1,38 +0,0 @@
-import React, { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { Controller, useFormContext } from "react-hook-form";
-import { CustomerInfo } from "../customer-info/CustomerInfo";
-
-type FinalStepProps = { providerId: number | undefined };
-
-export const FinalStep: FC<FinalStepProps> = ({ providerId }) => {
-  const { t } = useTranslation("Sale");
-  const { control } = useFormContext();
-  return (
-    <>
-      <div className="manual-booking-header mt-6 mt-5 border-bottom">
-        <div className="manual-booking-title">{t("Sale:finalSteps")}</div>
-      </div>
-      <CustomerInfo providerId={providerId} />
-      <Controller
-        control={control}
-        name={`specialNotes` as const}
-        render={({ field: { onChange, value, ref } }) => (
-          <div className="special-notes-container">
-            <div className="margin-top-2-rem input-label ">
-              {t("specialNotes")}
-            </div>
-
-            <textarea
-              rows={3}
-              onChange={onChange}
-              ref={ref}
-              value={value}
-              className="special-notes"
-            />
-          </div>
-        )}
-      />
-    </>
-  );
-};

package/src/sales/manual-booking/final-step/index.ts

@@ -1 +0,0 @@
-export * from "./FinalStep";