Resend Token Core Component

src/core/components/ResendToken.jsx

@@ -0,0 +1,77 @@
+import Notifications from "@/core/components/notifications";
+import useDirection from "@/lib/app/hooks/useDirection";
+import { Typography } from "@mui/material";
+import axios from "axios";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+import { LOGIN_SEND_OTP_TOKEN } from "../data/apiRoutes";
+
+const ResendToken = ({ initialTimerValue, timer, setTimer, PhoneNumber }) => {
+  const t = useTranslations();
+  const { directionApp } = useDirection();
+
+  // Countdown Timer
+  useEffect(() => {
+    let interval;
+    if (timer > 0) {
+      interval = setInterval(() => {
+        setTimer((prevTimer) => prevTimer - 1);
+      }, 1000);
+    } else {
+      clearInterval(interval);
+    }
+
+    return () => clearInterval(interval);
+  }, [timer]);
+  // End Countdown Timer
+
+  // Handle Resend Token
+  const handleResendClick = async () => {
+    // work on it
+    if (timer != 0) return;
+    Notifications(directionApp, t, undefined);
+    await axios
+      .post(LOGIN_SEND_OTP_TOKEN, {
+        phone_number: PhoneNumber,
+      })
+      .then(function (response) {
+        Notifications(directionApp, t, response);
+        setTimer(initialTimerValue);
+      })
+      .catch(function (error) {
+        Notifications(directionApp, t, error.response);
+      });
+  };
+  // End Handle Resend Token
+
+  return (
+    <>
+      {timer > 0 ? (
+        <Typography variant={"button"} sx={{ textAlign: "center" }}>
+          {t("LoginPage.Resend_code_in")}: {timer}
+          {t("LoginPage.seconds_later")}
+        </Typography>
+      ) : (
+        <Typography
+          variant={"button"}
+          sx={{ cursor: "pointer", textAlign: "center" }}
+          onClick={handleResendClick}
+          underline="hover"
+        >
+          {t("LoginPage.resend_code")}
+        </Typography>
+      )}
+    </>
+  );
+};
+
+export default ResendToken;
+
+
+//////****** usage document ******/////////
+// 1.) use <ResendToken /> component inside your page
+// 2.) list of props that you need to send is down below
+// 2.1) initialTimerValue **** Delay Time For Sending Token
+// 2.2) timer **** Timer Of Resending Token
+// 2.3) setTimer **** Set Timer Of Resend (note: every places in your components if you are requesting for getting token you should use this prop like this setTimer(initialTimerValue) )
+// 2.4) PhoneNumber **** Phone Number That Should Recive Token

src/core/components/notifications/index.jsx

@@ -4,7 +4,6 @@ import SuccessNotification from "./SuccessNotification";
 import WarningNotification from "./WarningNotification";
 
 const Notifications = async (directionApp, t, response) => {
-  console.log(directionApp, t, response);
   const { status, data } = response != undefined ? response : ""
   toast.dismiss();
   switch (status) {