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 (