|
@@ -13,7 +13,7 @@ import {
|
|
|
import { useEffect } from 'react';
|
|
import { useEffect } from 'react';
|
|
|
import { REQ_STATUS } from "@api/config";
|
|
import { REQ_STATUS } from "@api/config";
|
|
|
import { reqSendCode } from "@features/api";
|
|
import { reqSendCode } from "@features/api";
|
|
|
-import { getCountryPhoneError, validateCountryPhone } from "@utils/helpers";
|
|
|
|
|
|
|
+import { getCountryPhoneError, normalizeCountryPhone, validateCountryPhone } from "@utils/helpers";
|
|
|
import { CircularProgress } from "@mui/material";
|
|
import { CircularProgress } from "@mui/material";
|
|
|
import { toast } from 'react-toastify';
|
|
import { toast } from 'react-toastify';
|
|
|
import MainButton from '@components/Buttons/MainButton';
|
|
import MainButton from '@components/Buttons/MainButton';
|
|
@@ -32,11 +32,10 @@ const DEFAULT_COUNTRY = String(getPhoneCode()).replace(/^\+/, "") || "44";
|
|
|
|
|
|
|
|
const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChange, options = {}, defValues = {}, className = '' }) => {
|
|
const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChange, options = {}, defValues = {}, className = '' }) => {
|
|
|
const [country, setCountry] = useState(DEFAULT_COUNTRY);
|
|
const [country, setCountry] = useState(DEFAULT_COUNTRY);
|
|
|
- const [phoneValid, setPhoneValid] = useState(Boolean(defValues.phone));
|
|
|
|
|
const [phoneMessage] = useState("");
|
|
const [phoneMessage] = useState("");
|
|
|
const [sendCount, setSendCount] = useState(0);
|
|
const [sendCount, setSendCount] = useState(0);
|
|
|
const dispatch = useDispatch();
|
|
const dispatch = useDispatch();
|
|
|
- const { handleSubmit, control, watch } = useForm({
|
|
|
|
|
|
|
+ const { handleSubmit, control, getValues, watch } = useForm({
|
|
|
defaultValues: {
|
|
defaultValues: {
|
|
|
// country 由当前区域配置决定。
|
|
// country 由当前区域配置决定。
|
|
|
account: '',
|
|
account: '',
|
|
@@ -56,7 +55,7 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
const onSendCode = (e) => {
|
|
const onSendCode = (e) => {
|
|
|
if (otpCD > 0) return;
|
|
if (otpCD > 0) return;
|
|
|
if (otpStatus === REQ_STATUS.LOADING) return;
|
|
if (otpStatus === REQ_STATUS.LOADING) return;
|
|
|
- let phone = control._formValues.phone;
|
|
|
|
|
|
|
+ const phone = getValues("phone");
|
|
|
let validate = validatePhone(phone);
|
|
let validate = validatePhone(phone);
|
|
|
if (!validate) {
|
|
if (!validate) {
|
|
|
let msg = getCountryPhoneError(country);
|
|
let msg = getCountryPhoneError(country);
|
|
@@ -65,7 +64,7 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
control.setError("phone", true);
|
|
control.setError("phone", true);
|
|
|
return;
|
|
return;
|
|
|
}
|
|
}
|
|
|
- let params = { phone: phone, country: country };
|
|
|
|
|
|
|
+ let params = { phone: normalizeCountryPhone(country, phone), country: country };
|
|
|
dispatch(reqSendCode(params));
|
|
dispatch(reqSendCode(params));
|
|
|
}
|
|
}
|
|
|
const getLeftCD = useCallback(() => {
|
|
const getLeftCD = useCallback(() => {
|
|
@@ -77,13 +76,7 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
else return delta;
|
|
else return delta;
|
|
|
}, [otpTimeStamp]);
|
|
}, [otpTimeStamp]);
|
|
|
const checkPhone = (value) => {
|
|
const checkPhone = (value) => {
|
|
|
- const ok = validatePhone(value);
|
|
|
|
|
- if (!ok) {
|
|
|
|
|
- setPhoneValid(false);
|
|
|
|
|
- } else {
|
|
|
|
|
- setPhoneValid(true);
|
|
|
|
|
- }
|
|
|
|
|
- return ok;
|
|
|
|
|
|
|
+ return validatePhone(value);
|
|
|
}
|
|
}
|
|
|
const clearTimer = () => {
|
|
const clearTimer = () => {
|
|
|
if (objInfo.cdTimer != null) {
|
|
if (objInfo.cdTimer != null) {
|
|
@@ -122,6 +115,7 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
|
|
|
|
|
const codeValue = watch("code");
|
|
const codeValue = watch("code");
|
|
|
const phoneValue = watch("phone");
|
|
const phoneValue = watch("phone");
|
|
|
|
|
+ const phoneValid = validatePhone(phoneValue);
|
|
|
const checkCode = () => {
|
|
const checkCode = () => {
|
|
|
return (!codeValue || codeValue.length < CODE_MIN || codeValue.length > CODE_MAX)
|
|
return (!codeValue || codeValue.length < CODE_MIN || codeValue.length > CODE_MAX)
|
|
|
}
|
|
}
|
|
@@ -144,6 +138,7 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
if (!checkFormOnClaim()) return;
|
|
if (!checkFormOnClaim()) return;
|
|
|
//data.phone data.code
|
|
//data.phone data.code
|
|
|
data.country = country;
|
|
data.country = country;
|
|
|
|
|
+ data.phone = normalizeCountryPhone(country, data.phone);
|
|
|
callback && callback(data);
|
|
callback && callback(data);
|
|
|
}
|
|
}
|
|
|
return (
|
|
return (
|
|
@@ -163,12 +158,10 @@ const PhoneSMS = ({ children, callback, buttonText, handleStatus, onCountryChang
|
|
|
onChange={
|
|
onChange={
|
|
|
e => {
|
|
e => {
|
|
|
onChange(e.target.value);
|
|
onChange(e.target.value);
|
|
|
- setPhoneValid(validatePhone(e.target.value));
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
onChangeCountry={(country) => {
|
|
onChangeCountry={(country) => {
|
|
|
setCountry(country);
|
|
setCountry(country);
|
|
|
- setPhoneValid(validatePhone(control._formValues.phone, country));
|
|
|
|
|
if (onCountryChange != null) onCountryChange(country);
|
|
if (onCountryChange != null) onCountryChange(country);
|
|
|
}}
|
|
}}
|
|
|
placeholder={i18n.t('login.phone_ph')}
|
|
placeholder={i18n.t('login.phone_ph')}
|