79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import Notifications from "@/core/components/notifications";
|
|
import useDirection from "@/lib/app/hooks/useDirection";
|
|
import {Button} from "@mui/material";
|
|
import axios from "axios";
|
|
import {useTranslations} from "next-intl";
|
|
import {useEffect} from "react";
|
|
import {LOGIN, SEND_OTP_TOKEN} from "../data/apiRoutes";
|
|
import useRequest from "@/lib/app/hooks/useRequest";
|
|
|
|
const ResendToken = ({initialTimerValue, timer, setTimer, PhoneNumber, disabled}) => {
|
|
const t = useTranslations();
|
|
const {directionApp} = useDirection();
|
|
const requestServer = useRequest();
|
|
// 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 = () => {
|
|
if (timer != 0) return;
|
|
requestServer(SEND_OTP_TOKEN, "post", {
|
|
auth: false, data: {
|
|
phone_number: PhoneNumber,
|
|
}
|
|
})
|
|
.then(function (response) {
|
|
setTimer(initialTimerValue);
|
|
}).catch(function (error) {
|
|
});
|
|
};
|
|
// End Handle Resend Token
|
|
|
|
return (
|
|
<>
|
|
{timer > 0 ? (
|
|
<Button
|
|
color="success"
|
|
disabled
|
|
sx={{width: "auto", alignSelf: "center", mt: 0}}
|
|
onClick={handleResendClick}
|
|
>
|
|
{t("Resend_code_in")} {timer} {" "}
|
|
{t("seconds_later")}
|
|
</Button>
|
|
) : (
|
|
<Button
|
|
color="success"
|
|
sx={{width: "120px", alignSelf: "center", mt: 0}}
|
|
disabled={disabled}
|
|
onClick={handleResendClick}
|
|
>
|
|
{t("resend_code")}
|
|
</Button>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
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
|