138 lines
4.7 KiB
JavaScript
138 lines
4.7 KiB
JavaScript
import { useRef, useState } from "react";
|
|
|
|
import Link from "next/link";
|
|
import { Button } from "@mui/material";
|
|
import OTPForm from "./element/OTPForm";
|
|
import EditLogin from "../icons/EditLogin";
|
|
import RetryLogin from "../icons/RetryLogin";
|
|
import ArrowRightS from "../icons/ArrowRightS";
|
|
|
|
const time_resend_code = 120;
|
|
|
|
function SetCodePage({ setIsSendMsg, link, setStep }) {
|
|
const retryIcon = useRef();
|
|
|
|
const [timer, setTimer] = useState(0);
|
|
|
|
const handleTimer = () => {
|
|
setTimer("loading");
|
|
setTimeout(() => {
|
|
setTimer(time_resend_code);
|
|
let timePresent = time_resend_code;
|
|
const timerInterval = setInterval(() => {
|
|
timePresent--;
|
|
setTimer(timePresent);
|
|
|
|
!timePresent && clearInterval(timerInterval);
|
|
}, 1000);
|
|
}, 1000);
|
|
};
|
|
|
|
const handleOTP = (e) => {
|
|
e.target.nextElementSibling && e.target.nextElementSibling.focus();
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="rounded-[16px] mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
|
|
p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
|
|
>
|
|
<div
|
|
className="cursor-pointer"
|
|
onClick={() => {
|
|
setStep && setStep((prev) => prev - 1);
|
|
setIsSendMsg && setIsSendMsg(false);
|
|
}}
|
|
>
|
|
<ArrowRightS />
|
|
</div>
|
|
<p className="text-[#525252] mt-[10px] sm:mt-[12px] md:mt-[14px] lg:mt-[16px] text-[18px] font-bold">
|
|
کد تایید را وارد نمایید
|
|
</p>
|
|
<p className="text-[#616161] mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] text-[14px] font-normal text-right">
|
|
کد تایید برای شماره 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>
|
|
{/* <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"
|
|
onClick={() => {
|
|
setStep && setStep((prev) => prev - 1);
|
|
setIsSendMsg && setIsSendMsg(false);
|
|
}}
|
|
>
|
|
<EditLogin />
|
|
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
|
ویرایش شماره موبایل
|
|
</p>
|
|
</Button>
|
|
|
|
<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");
|
|
}, 1000);
|
|
}
|
|
}}
|
|
>
|
|
{timer && timer !== "loading" ? (
|
|
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
|
{timer} ثانیه
|
|
</p>
|
|
) : (
|
|
<>
|
|
<div ref={retryIcon}>
|
|
<RetryLogin />
|
|
</div>
|
|
<p className="text-[#F17732] text-[14px] font-normal select-none">
|
|
دریافت مجدد کد
|
|
</p>
|
|
</>
|
|
)}
|
|
</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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SetCodePage;
|