import React, { useState, useRef, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import Input from "../../../components/Input"; import Button from "../../../components/Button"; import Timer from "../../../components/Timer"; import onInput from "../../../utils/onInput"; import Loading from "../../../components/Loading"; import { connect } from "react-redux"; import { user, publicApi } from "../../../redux/actions"; import _ from "lodash"; //assets import logoIcon from "./assets/logo.svg"; function SignUp({ sendOtp, sendPhoneNumber, loginFlag, theme, headerOptions, setHeaderOptions, loading, }) { const [level, setLevel] = useState("phonenumber"); const [signUpFields, setSignUpFiels] = useState({}); const [error, setError] = useState(""); const [resend, setResend] = useState(false); const navigate = useNavigate(); const otp1 = useRef(); const otp2 = useRef(); const otp3 = useRef(); const otp4 = useRef(); const onChange = (name, value) => { setSignUpFiels({ ...signUpFields, [name]: value }); switch (name) { case "otp1": if (value) { otp2.current.focus(); } break; case "otp2": if (value) { otp3.current.focus(); } else { otp1.current.focus(); } break; case "otp3": if (value) { otp4.current.focus(); } else { otp2.current.focus(); } break; case "otp4": if (value) { checkOtp(); } else { otp3.current.focus(); } break; default: break; } }; const checkPhoneNumber = (e) => { if ( signUpFields?.cellphone?.slice(0, 2) === "09" && signUpFields?.cellphone.length === 11 ) { setLevel("otp"); setResend(false); sendPhoneNumber({ cellphone: signUpFields?.cellphone }); setError(undefined); } else { setError(window.t("شماره موبایل خود را وارد کنید.")); } }; const checkOtp = () => { if ( signUpFields?.otp1 && signUpFields?.otp2 && signUpFields?.otp3 && signUpFields?.otp4 ) { sendOtp({ cellphone: signUpFields?.cellphone, otp: signUpFields?.otp1 + signUpFields?.otp2 + signUpFields?.otp3 + signUpFields?.otp4, userToken: "2", applicationToken: "22", }); setError(undefined); } else { setError(window.t("کد وارد شده را چک کنید.")); } }; const numberInput = useRef(); useEffect(() => { // numberInput.current.focus(); setHeaderOptions(headerOptions); }, []); useEffect(() => { if (signUpFields?.otp?.length === 4) { sendOtp({ cellphone: signUpFields?.cellphone, otp: signUpFields?.otp, userToken: "2", applicationToken: "22", }); } }, [signUpFields]); useEffect(() => { if (level === "phonenumber") { // numberInput.current.focus(); } else { // otpInput.current.focus(); } }, [level]); useEffect(() => { if (loginFlag) { navigate("/"); } }, [loginFlag]); const light = theme === "light"; return (
{window.t("سلام")}
{window.t("خوش برگشتی!")}
onChange(name, value)} value={signUpFields?.cellphone} align="text-center" maxLength="11" direction="ltr" /> {error}
{!resend && (
{window.t("یک کد چهار رقمی تا")}     {window.t("دیگر برای شماره")}   {signUpFields?.cellphone}   {window.t("ارسال خواهد شد.")}
)}
onChange( e.target.name, (e.target.value = onInput.numberOnly(e.target.value)) ) } maxlength="1" ref={otp1} /> onChange( e.target.name, (e.target.value = onInput.numberOnly(e.target.value)) ) } maxlength="1" ref={otp2} /> onChange( e.target.name, (e.target.value = onInput.numberOnly(e.target.value)) ) } maxlength="1" ref={otp3} /> onChange( e.target.name, (e.target.value = onInput.englishAndNumberWithoutSpace( e.target.value )) ) } maxlength="1" ref={otp4} />

); } const mapStateToProps = (state) => ({ loginFlag: state.user.status, loading: state.user.loading, }); const mapDispatchToProps = { sendOtp: user.otp_login, sendPhoneNumber: user.otp, setHeaderOptions: publicApi.setHeaderOptions, }; export default connect(mapStateToProps, mapDispatchToProps)(SignUp);