import React, { useEffect, useState } from "react"; import { View, Text, TextInput, Dimensions, TouchableOpacity, ActivityIndicator, KeyboardAvoidingView, ScrollView, Platform, } from "react-native"; import tw from "tailwind-rn"; import { connect } from "react-redux"; import Svg, { Defs, Pattern, Image, Path } from "react-native-svg"; import { asyncAwesomeAlert } from "../../utils/AsyncWrappers"; import { digitToEn } from "../../utils"; import onInput from "../../utils/onInput"; import { user } from "../../redux/actions"; import fontSize from "../../constants/fontSize"; import Colors from "../../constants/Colors"; const ios = Platform.OS === "ios"; const { height } = Dimensions.get("window"); let ref1; let ref2; let ref3; let ref4; let timer = 120; function Otp(props) { const [firstCode, setFirstCode] = useState(""); const [secondCode, setSecondCode] = useState(""); const [thirdCode, setThirdCode] = useState(""); const [fourthCode, setFourthCode] = useState(""); const [time, setTime] = useState(120); const [loading, setLoading] = useState(false); const [timeEnd, setTimeEnd] = useState(false); const onChangeCode = (value, key) => { if (onInput.numberOnly(value) || value === "") { switch (key) { case "1": setFirstCode(value); if (value !== "") { ref2.focus(); } break; case "2": setSecondCode(value); if (value !== "") { ref3.focus(); } else { ref1.focus(); } break; case "3": setThirdCode(value); if (value !== "") { ref4.focus(); } else { ref2.focus(); } break; case "4": setFourthCode(value); if (value !== "") { // ref3.focus(); } else { ref3.focus(); } break; } } else { return; } }; const getEnCode = () => { return Number( digitToEn(firstCode) + digitToEn(secondCode) + digitToEn(thirdCode) + digitToEn(fourthCode) ); }; const submit = async () => { if (firstCode && secondCode && thirdCode && fourthCode) { props.sendOtp({ cellphone: props.route.params?.phone, otp: String(getEnCode()), applicationToken: "1", userToken: "1", }); } else { asyncAwesomeAlert("خطا", "کد تاییدیه را کامل وارد کنید.", { showCancelButton: false, }); } }; useEffect(() => { ref1.focus(); }, []); useEffect(() => { if (!timeEnd) { let interval = setInterval(() => { if (time > 0) { setTime(timer - 1); timer -= 1; } }, 1000); let timeout = setTimeout(() => { clearInterval(interval); setTimeEnd(true); }, 10000); return () => { clearInterval(interval); clearTimeout(timeout); }; } }, [timeEnd]); const duration = React.useCallback( (value) => { const minute = value % 60; const hour = Math.floor(value / 60); return ( (hour > 0 ? (hour.toString().length === 1 ? "0" + hour.toString() : hour) + "" : "") + ":" + (minute.toString().length === 1 ? "0" + minute.toString() : minute) ); }, [props.route] ); const submitCellphone = React.useCallback(() => { setTimeEnd(false); setTime(120); setFirstCode(""); setSecondCode(""); setThirdCode(""); setFourthCode(""); props.sendCellphone({ cellphone: props.cellphone }); timer = 120; }, []); useEffect(() => { if (props.isLogin) { // props.navigation.navigate("Root"); } }, [props.isLogin]); const goBack = () => { timer = 120; props.navigation.navigate("Login"); }; return ( {" "} یک کد تائیدیه به شماره {" " + (props.route.params?.phone || "") + " "} {" "} ارسال شد. آن را در قسمت زیر وارد کنید. (ref1 = ref)} onChangeText={(text) => onChangeCode(text, "1")} regex={onInput.numberOnly} direction="ltr" keyboardType="numeric" /> (ref2 = ref)} onChangeText={(text) => onChangeCode(text, "2")} regex={onInput.numberOnly} direction="ltr" keyboardType="numeric" /> (ref3 = ref)} onChangeText={(text) => onChangeCode(text, "3")} regex={onInput.numberOnly} direction="ltr" keyboardType="numeric" /> (ref4 = ref)} onChangeText={(text) => onChangeCode(text, "4")} regex={onInput.numberOnly} direction="ltr" keyboardType="numeric" /> submit()} > {loading ? ( ) : ( {"تایید کد"} )} {!timeEnd ? ( {"زمان باقی مانده تا ارسال مجدد: " + duration(time)} ) : ( submitCellphone()} > {"ارسال مجدد کد"} goBack()} > {"بازگشت به مرحله قبل و اصلاح شماره"} )} ); } const mapStateToProps = (state) => ({ isLogin: state.user.status, mobile: state.publicApi.mobile, theme: state.publicApi.theme, }); const mapDispatchToProps = { sendOtp: user.otp_login, sendCellphone: user.otp, }; export default connect(mapStateToProps, mapDispatchToProps)(Otp);