|
|
@@ -4,7 +4,7 @@ import {APP_AVATAR, REQ_STATUS} from "@api/config";
|
|
|
import LazyImage from "@components/LazyImage";
|
|
|
import {useDispatch, useSelector} from "react-redux";
|
|
|
import {getChangeEmailStatus, getChangeInfoStatus, getChangePhoneStatus, getUserInfo} from "@features/mainSlice";
|
|
|
-import React, {useState} from "react";
|
|
|
+import React, {useEffect, useState} from "react";
|
|
|
import {Controller, useForm} from "react-hook-form";
|
|
|
import classNames from "classnames";
|
|
|
import PhoneInput from "@components/UInput/PhoneInput";
|
|
|
@@ -12,10 +12,19 @@ import {ReactComponent as Male} from '@assets/singlesvg/gener/male.svg';
|
|
|
import {ReactComponent as FeMale} from '@assets/singlesvg/gener/female.svg';
|
|
|
import SmallLoading from "@components/SmallLoading";
|
|
|
import {reqChangeEmail, reqChangeInfo, reqChangePhone} from "@features/api";
|
|
|
-import {APP_GENDER} from "@constants/app";
|
|
|
-import {validateCountryPhone} from "@utils/helpers";
|
|
|
+import {APP_GENDER, APP_THEME} from "@constants/app";
|
|
|
+import {validateCountryPhone, validateEmail} from "@utils/helpers";
|
|
|
import LazyImgix from "@components/Imgix/LazyImgix";
|
|
|
+import {useLocation} from "react-router";
|
|
|
+import {ROUTE_PATH} from "@constants/routes";
|
|
|
+import logo_dark from '@assets/logo/logo.png';
|
|
|
+import logo_light from '@assets/logo/logo_w.png';
|
|
|
+import {useThemeProvider} from "@contexts/themeContext";
|
|
|
const i18n=global.i18n;
|
|
|
+
|
|
|
+const TYPE_BASE="base";
|
|
|
+const TYPE_PHONE="phone";
|
|
|
+const TYPE_EMAIL="email";
|
|
|
const getAvatarUrl=(id)=>{
|
|
|
return `${APP_AVATAR}avatar_${id}.png?auto=format,compress&cs=srgb`;
|
|
|
}
|
|
|
@@ -52,9 +61,20 @@ const WEditProfile=({close})=>{
|
|
|
const dispatch = useDispatch();
|
|
|
const [avatarID,setAvatarID]=useState(user.FaceID);
|
|
|
const [country, setCountry] = useState(user.RegisterLocation);
|
|
|
+ const [showType,setShowType]=useState(TYPE_BASE);
|
|
|
+ const {pathname,hash} = useLocation();
|
|
|
+ const {theme,isMobile} = useThemeProvider();
|
|
|
+ const logourl=(theme===APP_THEME.DARK?logo_dark:logo_light);
|
|
|
const validatePhone=(value)=>{
|
|
|
return validateCountryPhone(country,value);
|
|
|
}
|
|
|
+ const validateMail=(value)=>{
|
|
|
+ return validateEmail(value);
|
|
|
+ }
|
|
|
+ const getPhoneError=()=>{
|
|
|
+ if (country==="55")return i18n.t("form_errors.phone_" + country);
|
|
|
+ else return i18n.t("form_errors.phone");
|
|
|
+ }
|
|
|
const getPhone=()=>{
|
|
|
let loc=user.RegisterLocation;
|
|
|
let phone=user.Phone;
|
|
|
@@ -76,6 +96,17 @@ const WEditProfile=({close})=>{
|
|
|
Email:user.Email
|
|
|
}
|
|
|
});
|
|
|
+ useEffect(() => {
|
|
|
+ if (hash===ROUTE_PATH.EDIT_PROFILE){
|
|
|
+ setShowType(TYPE_BASE);
|
|
|
+ }
|
|
|
+ else if (hash===ROUTE_PATH.EDIT_PHONE){
|
|
|
+ setShowType(TYPE_PHONE);
|
|
|
+ }
|
|
|
+ else if (hash===ROUTE_PATH.EDIT_EMAIL){
|
|
|
+ setShowType(TYPE_EMAIL);
|
|
|
+ }
|
|
|
+ }, [pathname,hash]);
|
|
|
const renderAvatar=()=>{
|
|
|
return (
|
|
|
<div className={styles.avatar_con}>
|
|
|
@@ -136,7 +167,7 @@ const WEditProfile=({close})=>{
|
|
|
name="Phone"
|
|
|
rules={{required: true,validate:validatePhone}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => {
|
|
|
- let message=error?i18n.t("form_errors.phone_"+country):"";
|
|
|
+ let message = error ? getPhoneError() : "";
|
|
|
return (
|
|
|
<PhoneInput
|
|
|
className={classNames({'input-control--error': error})}
|
|
|
@@ -161,20 +192,23 @@ const WEditProfile=({close})=>{
|
|
|
<div className={styles.title}>{i18n.t("user.title_email")}</div>
|
|
|
<Controller control={control}
|
|
|
name="Email"
|
|
|
- // rules={{required: true}}
|
|
|
+ rules={{validate:validateMail}}
|
|
|
render={({field: {ref, onChange, value}, fieldState: {error}}) => (
|
|
|
- <div className={classNames("input-control",{'input-control--error': error})}>
|
|
|
- <input
|
|
|
- value={value}
|
|
|
- type="tel"
|
|
|
- ref={ref}
|
|
|
- onChange={(e)=>{
|
|
|
- onChange(e.target.value);
|
|
|
- }}
|
|
|
- placeholder={i18n.t('user.email_ph')}
|
|
|
- />
|
|
|
+ <div className={`d-flex flex-column g-6`}>
|
|
|
+ <div className={classNames("input-control",{'input-control--error': error})}>
|
|
|
+ <input
|
|
|
+ value={value}
|
|
|
+ ref={ref}
|
|
|
+ onChange={(e)=>{
|
|
|
+ onChange(e.target.value);
|
|
|
+ }}
|
|
|
+ placeholder={i18n.t('user.email_ph')}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ error?(<div className="input-prompt-error">{i18n.t('form_errors.email')}</div>):(<></>)
|
|
|
+ }
|
|
|
</div>
|
|
|
-
|
|
|
)}
|
|
|
/>
|
|
|
</div>
|
|
|
@@ -221,10 +255,10 @@ const WEditProfile=({close})=>{
|
|
|
</div>
|
|
|
)
|
|
|
}
|
|
|
- const renderSubmit=()=>{
|
|
|
+ const renderSubmit=(isTop=true)=>{
|
|
|
let isLoading=getIsLock();
|
|
|
return (
|
|
|
- <div className={styles.submit_btn_con}>
|
|
|
+ <div className={`${isTop?styles.submit_btn_con:''}`}>
|
|
|
<button className={"button-green"}>
|
|
|
{
|
|
|
isLoading?(<SmallLoading fill={"#fff"}/>):i18n.t("user.submit_btn")
|
|
|
@@ -253,8 +287,9 @@ const WEditProfile=({close})=>{
|
|
|
if (key==="Phone"){
|
|
|
isSubmit_ph=true;
|
|
|
change_ph[key]=value;
|
|
|
+ change_ph["RegisterLocation"]=country;
|
|
|
}
|
|
|
- else if (key=="Email"){
|
|
|
+ else if (key==="Email"){
|
|
|
isSubmit_em=true;
|
|
|
change_em[key]=value;
|
|
|
}
|
|
|
@@ -271,30 +306,82 @@ const WEditProfile=({close})=>{
|
|
|
change_ph.callback=onCallback;
|
|
|
change_em.callback=onCallback;
|
|
|
if (isSubmit)dispatch(reqChangeInfo(change));
|
|
|
+ // data.callback=onCallback;
|
|
|
+ // dispatch(reqChangeInfo(data));
|
|
|
if (isSubmit_ph)dispatch(reqChangePhone(change_ph));
|
|
|
if (isSubmit_em)dispatch(reqChangeEmail(change_em));
|
|
|
}
|
|
|
const renderForm=()=>{
|
|
|
return (
|
|
|
- <form autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
|
|
|
+ <form key={"base"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
|
|
|
handleChangeInfo(data);
|
|
|
})}>
|
|
|
{renderUsername()}
|
|
|
- {renderPhone()}
|
|
|
- {renderEmail()}
|
|
|
+ {/*{renderPhone()}*/}
|
|
|
+ {/*{renderEmail()}*/}
|
|
|
{renderGender()}
|
|
|
{renderSelectAvatar()}
|
|
|
{renderSubmit()}
|
|
|
</form>
|
|
|
)
|
|
|
}
|
|
|
+ const renderEditBase=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.container}>
|
|
|
+ <Spring type="slideUp" className={styles.content}>
|
|
|
+ {renderAvatar()}
|
|
|
+ {renderForm()}
|
|
|
+ </Spring>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderLogo=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.l_logo}>
|
|
|
+ <img className={styles.logo_img} src={logourl}/>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderEditPhone=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.container}>
|
|
|
+ <Spring type="slideUp" className={styles.content}>
|
|
|
+ {renderLogo()}
|
|
|
+ <form key={"phone"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
|
|
|
+ handleChangeInfo(data);
|
|
|
+ })}>
|
|
|
+ {renderPhone()}
|
|
|
+ {renderSubmit(false)}
|
|
|
+ </form>
|
|
|
+ </Spring>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderEditEmail=()=>{
|
|
|
+ return (
|
|
|
+ <div className={styles.container}>
|
|
|
+ <Spring type="slideUp" className={styles.content}>
|
|
|
+ {renderLogo()}
|
|
|
+ <form key={"email"} autoComplete="off" className={styles.user_form} onSubmit={handleSubmit((data) => {
|
|
|
+ handleChangeInfo(data);
|
|
|
+ })}>
|
|
|
+ {renderEmail()}
|
|
|
+ {renderSubmit(false)}
|
|
|
+ </form>
|
|
|
+ </Spring>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+ const renderView=()=>{
|
|
|
+ if (showType === TYPE_BASE) return renderEditBase();
|
|
|
+ else if (showType===TYPE_PHONE)return renderEditPhone();
|
|
|
+ else if (showType===TYPE_EMAIL)return renderEditEmail();
|
|
|
+ return (<></>);
|
|
|
+ }
|
|
|
return (
|
|
|
- <div className={styles.container}>
|
|
|
- <Spring type="slideUp" className={styles.content}>
|
|
|
- {renderAvatar()}
|
|
|
- {renderForm()}
|
|
|
- </Spring>
|
|
|
- </div>
|
|
|
+ <>
|
|
|
+ {renderView()}
|
|
|
+ </>
|
|
|
)
|
|
|
}
|
|
|
export default WEditProfile;
|
