web/components/LoginComponents/LoginStep.jsx

91 lines
2.7 KiB
JavaScript

"use client";
import AppContext from "@ctx/AppContext";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import validateIranPhone from "plugins/IranPhoneRegex";
import React, { useContext, useState } from "react";
import { toast } from "react-toastify";
const LoginStep = (props) => {
const [roleCheckBox, setRoleCheckBox] = useState(false);
const [alertRolCheckBox, setAlertRolCheckBox] = useState(false);
const CTX = useContext(AppContext);
const phoneNumber = CTX.state.phoneNumber;
const handleConfirmPhoneNumber = () => {
setAlertRolCheckBox(false);
if (validateIranPhone(phoneNumber) && roleCheckBox) {
CTX.ConfirmPhoneNumber(phoneNumber);
} else {
if (!validateIranPhone(phoneNumber)) {
toast.error(" شماره تماس را درست وارد کنید ", {
position: "bottom-right",
closeOnClick: true,
});
} else if (!roleCheckBox) {
toast.error(`برای ورود تایید قوانین الزامی است`, {
position: "bottom-right",
closeOnClick: true,
});
setTimeout(() => {
setAlertRolCheckBox(true);
}, 100);
}
}
};
return (
<div className="px-5 mt-20">
{/* <p className="mb-0 text-textMain-100 mt-1 text-right text-sm">
{" "}
برای ورود یا ثبت نام باید شماره تلفن همراه خود را وارد کنید
</p> */}
<div className="mt-3">
<Input
lable=".شماره تلفن خود را وارد کنید"
theme={1}
id="phoneNumber-id"
name="phoneNumber"
type={"number"}
inputEvent={(e) => CTX.setPhoneNumber(e.target.value)}
mt={5}
/>
</div>
<Buttonbriz
title="تایید شماره تلفن"
color="SECONDARY"
icon="PHONE"
buttonEvent={() => handleConfirmPhoneNumber()}
/>
<div
className={`flex rtl mt-4 tr03 border-[2px] border-transparent py-2 ${
alertRolCheckBox ? "animate-pulse-1 " : ""
}`}
>
<div>
<input
type="checkbox"
checked={roleCheckBox ? true : false}
defaultValue={roleCheckBox}
className="w-[35px] h-[10px] !rounded-xl mx-2 custom-checkbox mt-1 "
name="hasSchengenRelative"
onClick={(e) => setRoleCheckBox(e.target.checked)}
/>
</div>
<p className={`mb-0 text-white mt-1 text-right text-sm `}>
با تایید شماره تلفن با همه شرایط حریم خصوص اپلیکیشن بریز موافقت می کنم
.
</p>
</div>
</div>
);
};
export default LoginStep;