customer-dashboard/src/Components/MyFormInputs/index.js

import { Form, Input, InputNumber, Skeleton } from "antd";
import { Constants, isEmailValid, myFetch } from "../../utils";
import { createElement, useRef } from "react";
import { useTranslation } from "react-i18next";
import { useAppContext } from "../../Contexts/AppContext";

export function MyUsernameFormInput({
  propsFormItem,
  propsInput,
  showSkeleton,
  thirdPerson,
}) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      showSkeleton={showSkeleton}
      formItemName="username"
      minLength={Constants.GLOBALS.MIN_USERNAME_LENGTH}
      maxLength={Constants.GLOBALS.MAX_USERNAME_LENGTH}
      label={t("common.username")}
      ruleMessageValueRequired={t("common.inputRules.usernameRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.usernameMinLength",
        {
          minLength: Constants.GLOBALS.MIN_USERNAME_LENGTH,
        }
      )}
      inputPlaceholder={
        thirdPerson
          ? t("common.usernamePlaceholderThirdPerson")
          : t("common.usernamePlaceholder")
      }
    />
  );
}

export function MyPasswordFormInput({
  propsFormItem,
  propsInput,
  formItemName,
  label,
  inputPlaceholder,
  formItemRules,
  newPassword,
}) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      formItemName={formItemName || "password"}
      minLength={Constants.GLOBALS.MIN_PASSWORD_LENGTH}
      maxLength={Constants.GLOBALS.MAX_PASSWORD_LENGTH}
      label={label || t("common.password")}
      ruleMessageValueRequired={t("common.inputRules.passwordRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.passwordMinLength",
        {
          minLength: Constants.GLOBALS.MIN_PASSWORD_LENGTH,
        }
      )}
      inputPlaceholder={
        inputPlaceholder || newPassword
          ? t("common.passwordPlaceholderNew")
          : t("common.passwordPlaceholder")
      }
      inputType="password"
      formItemRules={formItemRules}
    />
  );
}

export function MyEmailFormInput({
  inputNotRequired,
  propsFormItem,
  propsInput,
  disableEmailCheck,
  hasFeedback,
  showSkeleton,
  thirdPerson,
  newEmail,
}) {
  const { t } = useTranslation();

  return (
    <MyAvailableCheckFormInput
      inputNotRequired={inputNotRequired}
      propsFormItem={propsFormItem}
      propsInput={propsInput}
      hasFeedback={hasFeedback}
      showSkeleton={showSkeleton}
      formItemName="email"
      minLength={Constants.GLOBALS.MIN_EMAIL_LENGTH}
      maxLength={Constants.GLOBALS.MAX_EMAIL_LENGTH}
      label={t("common.email")}
      ruleMessageValueRequired={t("common.inputRules.emailRequired")}
      ruleMessageValueNotAvailable={t("common.inputRules.emailTaken")}
      inputPlaceholder={
        thirdPerson
          ? t("common.emailPlaceholderThirdPerson")
          : newEmail
          ? t("common.emailPlaceholderNew")
          : t("common.emailPlaceholder")
      }
      ruleMessageValueMinLengthRequired={t("common.inputRules.emailMinLength", {
        minLength: Constants.GLOBALS.MIN_EMAIL_LENGTH,
      })}
      inputType="email"
      disableAvailableCheck={disableEmailCheck}
      fetchUrl="/user/auth/check/email"
      fetchParameter="email"
      fetchDelay={Constants.DELAY_EMAIL_CHECK}
      formItemRules={[
        {
          type: "email",
          message: t("common.inputRules.emailInvalid"),
        },
      ]}
    />
  );
}

export function MyCalendarMaxFutureBookingDaysFormInput({
  formItemName = "calendarMaxFutureBookingDays",
}) {
  const { t } = useTranslation();
  const appContext = useAppContext();

  return (
    <MyFormInput
      formItemName={formItemName}
      minLength={Constants.GLOBALS.MIN_CALENDAR_FUTURE_BOOKING_DAYS}
      maxLength={
        Constants.PAYMENT_PLAN[appContext.paymentPlan]
          .calendarMaxFutureBookingDays
      }
      label={t("common.calendarMaxFutureBookingDays")}
      ruleMessageValueRequired={t(
        "common.inputRules.calendarMaxFutureBookingDaysRequired"
      )}
      inputPlaceholder={14}
      inputType="number"
      propsInput={{
        addonAfter: t("common.unit.days"),
      }}
    />
  );
}

export function MyCalendarMinEarliestBookingTimeFormInput({
  formItem = "calendarMinEarliestBookingTime",
}) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      formItemName={formItem}
      minLength={Constants.GLOBALS.MIN_CALENDAR_EARLIEST_BOOKING_TIME}
      maxLength={Constants.GLOBALS.MAX_CALENDAR_EARLIEST_BOOKING_TIME}
      label={t("common.calendarMinEarliestBookingTime")}
      ruleMessageValueRequired={t(
        "common.inputRules.calendarMinEarliestBookingTimeRequired"
      )}
      inputPlaceholder={15}
      inputType="number"
      propsInput={{
        addonAfter: t("common.unit.minutes"),
      }}
    />
  );
}

export function MyCompanyNameFormInput({ showSkeleton }) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      formItemName="companyName"
      label={t("common.companyName")}
      propsFormItem={{ tooltip: t("common.companyNameInfo") }}
      inputPlaceholder={t("common.companyNamePlaceholder")}
      showSkeleton={showSkeleton}
      ruleMessageValueRequired={t("common.inputRules.companyNameRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.companyNameMinLength",
        {
          minLength: Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_NAME_LENGTH,
        }
      )}
      minLength={Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_NAME_LENGTH}
      maxLength={Constants.GLOBALS.MAX_STORE_SETTING_COMPANY_NAME_LENGTH}
    />
  );
}

export function MyCompanyAddressFormInput({ showSkeleton }) {
  const { t } = useTranslation();

  return (
    <MyFormInput
      formItemName="companyAddress"
      propsFormItem={{ tooltip: t("common.companyAddressInfo") }}
      label={t("common.companyAddress")}
      inputType="textarea"
      inputPlaceholder={t("common.companyAddressPlaceholder")}
      showSkeleton={showSkeleton}
      ruleMessageValueRequired={t("common.inputRules.companyAddressRequired")}
      ruleMessageValueMinLengthRequired={t(
        "common.inputRules.companyAddressMinLength",
        {
          minLength: Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_ADDRESS_LENGTH,
        }
      )}
      minLength={Constants.GLOBALS.MIN_STORE_SETTING_COMPANY_ADDRESS_LENGTH}
      maxLength={Constants.GLOBALS.MAX_STORE_SETTING_COMPANY_ADDRESS_LENGTH}
    />
  );
}

export function MyAvailableCheckFormInput({
  inputNotRequired,
  propsFormItem,
  propsInput,
  formItemName,
  minLength,
  maxLength,
  label,
  ruleMessageValueRequired,
  ruleMessageValueMinLengthRequired,
  ruleMessageValueNotAvailable,
  inputPlaceholder,
  inputType,
  disableAvailableCheck = false,
  fetchUrl,
  fetchParameter,
  fetchDelay,
  hasFeedback,
  showSkeleton,
  formItemRules,
}) {
  const delayTimeout = useRef();

  const isValid = (value) => {
    return value.length >= minLength && value.length <= maxLength;
  };

  return (
    <MyFormInput
      inputNotRequired={inputNotRequired}
      propsFormItem={{
        ...propsFormItem,
        hasFeedback: hasFeedback,
      }}
      propsInput={propsInput}
      formItemName={formItemName}
      minLength={minLength}
      maxLength={maxLength}
      label={label}
      ruleMessageValueRequired={ruleMessageValueRequired}
      ruleMessageValueMinLengthRequired={ruleMessageValueMinLengthRequired}
      inputPlaceholder={inputPlaceholder}
      inputType={inputType}
      showSkeleton={showSkeleton}
      formItemRules={[
        ...formItemRules,
        () => ({
          validator(_, value) {
            if (inputNotRequired && !value) {
              return Promise.resolve();
            }

            if (
              !value ||
              !isValid(value) ||
              (inputType === "email" && isEmailValid(value) === false)
            ) {
              return Promise.reject("");
            }

            if (disableAvailableCheck) {
              return Promise.resolve();
            }

            if (delayTimeout.current) {
              clearTimeout(delayTimeout.current);
            }

            return new Promise((resolve, reject) => {
              delayTimeout.current = setTimeout(() => {
                let body = {};

                body[fetchParameter] = value; // like email: value

                myFetch({
                  url: fetchUrl,
                  method: "POST",
                  body: body,
                })
                  .then(() => resolve())
                  .catch(() => reject(ruleMessageValueNotAvailable));
              }, fetchDelay);
            });
          },
        }),
      ]}
    />
  );
}

export function MyFormInput({
  propsFormItem,
  propsInput,
  formItemName,
  formItemRules,
  minLength,
  maxLength,
  label,
  ruleMessageValueRequired,
  ruleMessageValueMinLengthRequired,
  inputPlaceholder,
  inputType,
  inputNotRequired,
  showSkeleton,
  InputFatherElement,
}) {
  const commonProps = {
    ...propsInput,
    placeholder: inputPlaceholder,
  };

  const myFormItemRules = [];

  if (!inputNotRequired) {
    myFormItemRules.push({
      required: true,
      message: ruleMessageValueRequired,
    });
  }

  if (formItemRules) {
    // check if formItemRules is an array
    if (Array.isArray(formItemRules)) {
      myFormItemRules.push(...formItemRules);
    } else {
      myFormItemRules.push(formItemRules);
    }
  }

  if (inputType === "number") {
    commonProps.min = minLength;
    commonProps.max = maxLength;
  } else {
    commonProps.minLength = minLength;
    commonProps.maxLength = maxLength;

    myFormItemRules.push({
      min: minLength,
      message: ruleMessageValueMinLengthRequired,
    });
  }

  const inputComponents = {
    textarea: showSkeleton ? (
      <Skeleton.Input size="large" active block />
    ) : (
      <Input.TextArea {...commonProps} autoSize={{ minRows: 2, maxRows: 6 }} />
    ),
    number: <InputNumber {...commonProps} />,
    password: <Input.Password {...commonProps} />,
    default: showSkeleton ? (
      <Skeleton.Input active block />
    ) : (
      <Input {...commonProps} />
    ),
  };

  const inputComponent = inputComponents[inputType] || inputComponents.default;

  return (
    <Form.Item
      {...propsFormItem}
      label={label}
      name={formItemName}
      required
      rules={myFormItemRules}
    >
      {InputFatherElement ? (
        createElement(InputFatherElement, { children: inputComponent })
      ) : (
        <>{inputComponent}</>
      )}
    </Form.Item>
  );
}