web/components/LoginComponents/SignUp.jsx

"use client";

import AppContext from "@ctx/AppContext";
import { useRouter } from "next/navigation";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext, useEffect, useRef, useState } from "react";
import { toast } from "react-toastify";
import SimpleReactValidator from "simple-react-validator";
import { useSearchParams } from "next/navigation";
import { useLocale, useTranslations } from "next-intl";

const SignUp = (props) => {
  const CTX = useContext(AppContext);
  const router = useRouter();
  const query = useSearchParams();

  const t = useTranslations("login");
  const locale = useLocale();
  const isRTL = locale === "fa";

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [complexName, setComplexName] = useState("");
  const [supportPhoneNumber, setSupportPhoneNumber] = useState(
    CTX.state.phoneNumber
  );
  const [complexAddress, setComplexAddress] = useState("");
  const [, forceUpdate] = useState();

  const validator = useRef(
    new SimpleReactValidator({
      messages: {
        required: "پر کردن این فیلد الزامی میباشد",
      },
      element: (message) => (
        <>
          <div className="text-right px-1 ">
            <small className="text-red-600 t-ig-small  ">{message}</small>
          </div>
        </>
      ),
    })
  );

  const body = {
    firstName,
    lastName,
    complexName,
    supportPhoneNumber,
    complexAddress,
  };

  useEffect(() => {
    if (!!query.get("phoneNumber")) {
      setSupportPhoneNumber(query.get("phoneNumber"));
    }
  }, []);

  const handleSingnUp = () => {
    if (validator.current.allValid()) {
      CTX.SignUpLogin(body);
    } else {
      toast.error("پرکردن همه ی فیلد ها واجب است", {
        position: "bottom-right",
        autoClose: 2000,
        hideProgressBar: false,
        closeOnClick: true,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
      });

      validator.current.showMessages();
      forceUpdate(1);
    }
  };

  return (
    <div className="px-5 pt-6">
      <p
        className={`mb-0 text-white mt-1  text-sm ${
          isRTL ? "text-right" : "text-left"
        } `}
      >
        {t("singUpDesc")}
      </p>

      <div className="mt-8">
        <Input
          lable={t("singUpFirstNameInput")}
          mt={5}
          theme={1}
          id="firstName-id"
          name="firstName"
          type={"text"}
          value={firstName}
          inputEvent={(e) => {
            setFirstName(e.target.value);
            validator.current.showMessageFor("firstName");
          }}
          style="text-right"
          validator={true}
          validatorData={validator.current.message(
            "firstName",
            firstName,
            "required"
          )}
        />
      </div>
      <div className="mt-8">
        <Input
          lable={t("signUpLastNameInput")}
          mt={5}
          theme={1}
          id="lastName-id"
          name="lastName"
          type={"text"}
          value={lastName}
          inputEvent={(e) => {
            setLastName(e.target.value);
            validator.current.showMessageFor("lastName");
          }}
          style="text-right"
          validator={true}
          validatorData={validator.current.message(
            "lastName",
            lastName,
            "required"
          )}
        />
      </div>

      <div className="mt-8">
        <Input
          lable={t("signUpComplexNameInput")}
          mt={5}
          theme={1}
          id="complexName-id"
          name="complexName"
          type={"text"}
          value={complexName}
          inputEvent={(e) => {
            setComplexName(e.target.value);
            validator.current.showMessageFor("complexName");
          }}
          style="text-right"
          validator={true}
          validatorData={validator.current.message(
            "complexName",
            complexName,
            "required"
          )}
        />
      </div>
      <div className="mt-3">
        <Input
          lable={t("signUpSupportPhoneNumberInput")}
          mt={5}
          theme={1}
          id="supportPhoneNumber-id"
          name="supportPhoneNumber"
          type={"number"}
          value={supportPhoneNumber}
          inputEvent={(e) => setSupportPhoneNumber(e.target.value)}
          style="text-right"
          readOnly={true}
        />
      </div>
      <div className="mt-3">
        <Input
          lable={t("signUpComplexAddressInput")}
          mt={5}
          theme={1}
          id="complexAddress-id"
          name="complexAddress"
          type={"text"}
          value={complexAddress}
          inputEvent={(e) => {
            setComplexAddress(e.target.value);
            validator.current.showMessageFor("complexAddress");
          }}
          style="text-right"
          validator={true}
          validatorData={validator.current.message(
            "complexAddress",
            complexAddress,
            "required"
          )}
        />
      </div>

      <Buttonbriz
        title={t("signUpButton")}
        color="PRIMARY"
        icon="CHECK"
        buttonEvent={() => handleSingnUp()}
      />
    </div>
  );
};

export default SignUp;