web/components/LoginComponents/LoginStep.jsx

92 lines
2.8 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;
// console.log(alertRolCheckBox);
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) {
setTimeout(() => {
setAlertRolCheckBox(true);
}, 100);
}
}
};
return (
<div className="px-5 mt-6">
<p className="mb-0 text-textMain-100 mt-1 text-right text-sm">
{" "}
برای ورود یا ثبت نام به اپلیکیشن مدیریت وظایف رستوران باید شماره تلفن
همراه خود را وارد کنید
</p>
<div className="mt-3">
<Input
lable="شماره تلفن خود را وارد کنید"
id="phoneNumber-id"
name="phoneNumber"
type={"number"}
inputEvent={(e) => CTX.setPhoneNumber(e.target.value)}
/>
</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"
className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
value={}
/> */}
<input
type="checkbox"
checked={roleCheckBox ? true : false}
defaultValue={roleCheckBox}
className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
name="hasSchengenRelative"
onClick={(e) => setRoleCheckBox(e.target.checked)}
/>
</div>
<p className={`mb-0 text-textMain-100 mt-1 text-right text-sm `}>
با تایید شماره تلفن همراه با همه شرایط حریم خصوص اپلیکیشن مدیریت توک
موافقت می کنم
</p>
</div>
</div>
);
};
export default LoginStep;