web/components/LoginComponents/VerifyCodeStep.jsx

70 lines
1.8 KiB
JavaScript

"use client";
import AppContext from "@ctx/AppContext";
import { useLocale, useTranslations } from "next-intl";
import Buttonbriz from "plugins/Buttonbriz/page";
import Input from "plugins/Input/page";
import PersianNumber from "plugins/PersianNumber";
import React, { useContext } from "react";
const VerifyCodeStep = () => {
const CTX = useContext(AppContext);
const phoneNumber = CTX.state.phoneNumber;
const verifyCode = CTX.state.verifyCode;
const t = useTranslations("login");
const locale = useLocale();
const isRTL = locale === "fa";
const handleSendVerify = () => {
if (verifyCode.length <= 5) {
toast.error(" کد را صحیح وارد کنید ", {
position: "bottom-right",
closeOnClick: true,
});
} else {
CTX.LoginWhitVerifyCode();
}
};
return (
<div className="px-5 mt-6">
{isRTL ? (
<p className="mb-0 text-white mt-1 text-right text-sm">
کد تایید برای شماره
<strong className="mx-1">
<PersianNumber number={phoneNumber} />
</strong>
ارسال شده است
</p>
) : (
<p className="mb-0 text-white mt-1 text-center text-sm">
{t("confirmText")}{" "}
</p>
)}
<div className="mt-3">
<Input
lable={t("confirmInput")}
id="verifyCode-id"
name="verifyCode"
type={"number"}
style="text-center"
inputEvent={(e) => CTX.setVerifyCode(e.target.value)}
mt={5}
theme={1}
/>
</div>
<Buttonbriz
title={t("loginButton")}
color="SECONDARY"
icon="PHONE"
buttonEvent={() => handleSendVerify()}
/>
</div>
);
};
export default VerifyCodeStep;