handle register and poster and fix bugs

components/register/SetCodePage.js

@@ -6,13 +6,43 @@ import OTPForm from "./element/OTPForm";
 import EditLogin from "../icons/EditLogin";
 import RetryLogin from "../icons/RetryLogin";
 import ArrowRightS from "../icons/ArrowRightS";
+import { request } from "@/services/response";
+import { changeNumToDefault } from "@/helper";
 
 const time_resend_code = 120;
 
-function SetCodePage({ setIsSendMsg, link, setStep }) {
+function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
+  const [code, setCode] = useState(["", "", "", ""]);
+  const [isError, setIsError] = useState(false);
+  const inputRefs = Array.from({ length: 5 }, () => useRef());
+
+  const handleChange = (index, val) => {
+    const newCode = [...code];
+
+    if (val === "backspace") {
+      newCode[index] = "";
+      setCode(newCode);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+
+    newCode[index] = val;
+
+    if (newCode.join("").length === 4 && isError) {
+      setIsError(false);
+    }
+
+    setCode(newCode);
+
+    if (val && index < inputRefs.length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
 
   const handleTimer = () => {
     setTimer("loading");
@@ -28,8 +58,21 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
     }, 1000);
   };
 
-  const handleOTP = (e) => {
-    e.target.nextElementSibling && e.target.nextElementSibling.focus();
+  const handleReq = () => {
+    request
+      .getToken(
+        "mobile",
+        process.env.NEXT_PUBLIC_CLIENT_ID,
+        process.env.NEXT_PUBLIC_CLIENT_SECRET,
+        changeNumToDefault(num),
+        code.join("")
+      )
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   };
 
   return (
@@ -53,20 +96,32 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
         کد تایید برای شماره 09013261200 ارسال شد.
       </p>
       <div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
-        <div
-          className="w-full mb-[27px] flex items-center justify-center gap-6 sm:gap-6"
-          dir="ltr"
-        >
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
+        <div className="mb-[27px]" dir="ltr">
+          <div
+            className="w-full flex items-center justify-center gap-6 sm:gap-6"
+            dir="ltr"
+          >
+            {code.map((digit, index) => (
+              <OTPForm
+                key={index}
+                index={index}
+                value={digit}
+                isError={isError}
+                onChange={handleChange}
+                inputRef={inputRefs[index]}
+              />
+            ))}
+          </div>
+          <p
+            className={`
+          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
+            transform text-right 
+            ${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
+        `}
+          >
+            !کد را وارد کنید
+          </p>
         </div>
-        {/* <Button className="flex items-center justify-start gap-1">
-                    <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
-                    <ArrowLeftOrangeS />
-                </Button> */}
         <div className="flex w-full items-center justify-between flex-wrap gap-y-5">
           <Button
             className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
@@ -83,16 +138,13 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
 
           <Button
             className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
-            // sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
             disabled={typeof timer === "number" && timer !== 0}
             onClick={() => {
               if (!timer && timer !== "loading") {
                 handleTimer();
 
-                // Rotate Retry Icon
                 retryIcon.current.classList.add("retry-icon");
 
-                // Remove Style Rotate Icon
                 setTimeout(() => {
                   retryIcon.current &&
                     retryIcon.current.classList.remove("retry-icon");
@@ -117,19 +169,22 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
           </Button>
         </div>
       </div>
-      <Link href={link || ""} onClick={(e) => !link && e.preventDefault()}>
-        <Button
-          fullWidth
-          variant="contained"
-          onClick={() => {
-            setIsSendMsg && setIsSendMsg(true);
-            setStep && setStep((prev) => prev + 1);
-          }}
-          className="!rounded-[8px] !bg-[#5559CE]"
-        >
-          تایید
-        </Button>
-      </Link>
+      <Button
+        fullWidth
+        variant="contained"
+        onClick={() => {
+          setIsSendMsg && setIsSendMsg(true);
+          setStep && setStep((prev) => prev + 1);
+          if (code.join("").length !== 4) {
+            setIsError(true);
+          } else {
+            handleReq();
+          }
+        }}
+        className="!rounded-[8px] !bg-[#5559CE]"
+      >
+        تایید
+      </Button>
     </div>
   );
 }