Add family acc
This commit is contained in:
Ebube
@@ -1,39 +1,39 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useSelector } from "react-redux";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import Icons from "../../Helpers/Icons";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import {Link, useNavigate} from 'react-router-dom'
|
||||
import usersService from "../../../services/UsersService";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
import {toast} from 'react-toastify'
|
||||
import { toast } from "react-toastify";
|
||||
|
||||
import {Formik, Form} from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email('Wrong email format')
|
||||
.min(3, 'Minimum 3 characters')
|
||||
.max(50, 'Maximum 50 characters')
|
||||
.required('Email is required'),
|
||||
.email("Wrong email format")
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
firstname: Yup.string()
|
||||
.min(3, 'Minimum 3 characters')
|
||||
.max(25, 'Maximum 25 characters')
|
||||
.required('Firstname is required'),
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("Firstname is required"),
|
||||
lastname: Yup.string()
|
||||
.min(3, 'Minimum 3 characters')
|
||||
.max(25, 'Maximum 25 characters')
|
||||
.required('Lastname is required'),
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("Lastname is required"),
|
||||
city: Yup.string()
|
||||
.min(3, 'Minimum 3 characters')
|
||||
.max(25, 'Maximum 25 characters')
|
||||
.required('City is required'),
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("City is required"),
|
||||
state: Yup.string()
|
||||
.min(3, 'Minimum 3 characters')
|
||||
.max(25, 'Maximum 25 characters')
|
||||
.required('State is required'),
|
||||
})
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(25, "Maximum 25 characters")
|
||||
.required("State is required"),
|
||||
});
|
||||
|
||||
export default function PersonalInfoTab({
|
||||
datas,
|
||||
@@ -49,72 +49,86 @@ export default function PersonalInfoTab({
|
||||
browseCoverImg,
|
||||
coverImgChangHandler,
|
||||
}) {
|
||||
let { userDetails } = useSelector((state) => state.userDetails);
|
||||
|
||||
let {userDetails} = useSelector((state) => state.userDetails)
|
||||
|
||||
const apiCall = new usersService()
|
||||
const apiCall = new usersService();
|
||||
|
||||
let navigate = useNavigate()
|
||||
let navigate = useNavigate();
|
||||
|
||||
let [togglePromotion, setTogglePromotion] = useState(false)
|
||||
let [togglePromotion, setTogglePromotion] = useState(false);
|
||||
|
||||
const initialValues = {
|
||||
firstname: userDetails?.firstname,
|
||||
lastname: userDetails?.lastname,
|
||||
state: userDetails?.state,
|
||||
city: userDetails?.city,
|
||||
email: userDetails?.email
|
||||
}
|
||||
email: userDetails?.email,
|
||||
};
|
||||
|
||||
let [profile, setProfile] = useState({ // state for requesting from load profile API
|
||||
let [profile, setProfile] = useState({
|
||||
// state for requesting from load profile API
|
||||
loading: true,
|
||||
status: false
|
||||
})
|
||||
status: false,
|
||||
});
|
||||
|
||||
let [requestStatus, setRequestState] = useState({ // state for requesting from update api
|
||||
message: '',
|
||||
let [requestStatus, setRequestState] = useState({
|
||||
// state for requesting from update api
|
||||
message: "",
|
||||
loading: false,
|
||||
status: false
|
||||
})
|
||||
status: false,
|
||||
});
|
||||
|
||||
const handleUpdateUser = (values, helpers)=> {
|
||||
setRequestState({message: '', loading: true, status: false})
|
||||
|
||||
apiCall.updateProfile(values).then((res)=>{ // API CALL TO UPDATE USER DETAILS
|
||||
if(res.data.internal_return < 0){
|
||||
setRequestState({message: 'Profile Was unable to update', loading: false, status: false})
|
||||
return
|
||||
}
|
||||
// setRequestState({message: 'Profile update successfully', loading: false, status: true})
|
||||
toast.success("Update Successful");
|
||||
setTimeout(()=>{
|
||||
navigate('/',{replace:true})
|
||||
window.location.reload(true)
|
||||
},1000)
|
||||
}).catch(error => {
|
||||
setRequestState({message: 'Opps! an error occurred. Try Agian', loading: false, status: false})
|
||||
})
|
||||
}
|
||||
const handleUpdateUser = (values, helpers) => {
|
||||
setRequestState({ message: "", loading: true, status: false });
|
||||
|
||||
useEffect(()=>{
|
||||
setProfile({loading: false, status: true})
|
||||
},[])
|
||||
apiCall
|
||||
.updateProfile(values)
|
||||
.then((res) => {
|
||||
// API CALL TO UPDATE USER DETAILS
|
||||
if (res.data.internal_return < 0) {
|
||||
setRequestState({
|
||||
message: "Profile Was unable to update",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
return;
|
||||
}
|
||||
// setRequestState({message: 'Profile update successfully', loading: false, status: true})
|
||||
toast.success("Update Successful");
|
||||
setTimeout(() => {
|
||||
navigate("/", { replace: true });
|
||||
window.location.reload(true);
|
||||
}, 1000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestState({
|
||||
message: "Opps! an error occurred. Try Agian",
|
||||
loading: false,
|
||||
status: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
useEffect(() => {
|
||||
setProfile({ loading: false, status: true });
|
||||
}, []);
|
||||
|
||||
profile.loading ?
|
||||
<div className="personal-info-tab w-full flex flex-col justify-between">
|
||||
<div className="p-3">
|
||||
<LoadingSpinner size='32' color='sky-blue' />
|
||||
</div>
|
||||
return profile.loading ? (
|
||||
<div className="personal-info-tab w-full flex flex-col justify-between">
|
||||
<div className="p-3">
|
||||
<LoadingSpinner size="32" color="sky-blue" />
|
||||
</div>
|
||||
:
|
||||
<div className="personal-info-tab w-full flex flex-col justify-between">
|
||||
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleUpdateUser}>
|
||||
{(props => {
|
||||
return (
|
||||
</div>
|
||||
) : (
|
||||
<div className="personal-info-tab w-full flex flex-col justify-between">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleUpdateUser}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form>
|
||||
|
||||
<div className="flex flex-col-reverse sm:flex-row">
|
||||
<div className="flex-1 sm:mr-10">
|
||||
<div className="fields w-full">
|
||||
@@ -122,6 +136,7 @@ export default function PersonalInfoTab({
|
||||
{/* username */}
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="User Name"
|
||||
type="text"
|
||||
name="username"
|
||||
@@ -134,6 +149,7 @@ export default function PersonalInfoTab({
|
||||
{/* Email */}
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Email"
|
||||
type="text"
|
||||
name="email"
|
||||
@@ -142,12 +158,17 @@ export default function PersonalInfoTab({
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.email && props.touched.email) && <p className="text-sm text-red-500">{props.errors.email}</p>}
|
||||
{props.errors.email && props.touched.email && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{/* first name and last name */}
|
||||
<div className="xl:flex xl:space-x-7 mb-6">
|
||||
<div className="field w-full mb-6 xl:mb-0">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="First Name"
|
||||
type="text"
|
||||
name="firstname"
|
||||
@@ -156,10 +177,15 @@ export default function PersonalInfoTab({
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.firstname && props.touched.firstname) && <p className="text-sm text-red-500">{props.errors.firstname}</p>}
|
||||
{props.errors.firstname && props.touched.firstname && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.firstname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="field w-full">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Last Name"
|
||||
type="text"
|
||||
name="lastname"
|
||||
@@ -168,13 +194,18 @@ export default function PersonalInfoTab({
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.lastname && props.touched.lastname) && <p className="text-sm text-red-500">{props.errors.lastname}</p>}
|
||||
{props.errors.lastname && props.touched.lastname && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.lastname}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Country */}
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="Country"
|
||||
type="text"
|
||||
name="country"
|
||||
@@ -186,6 +217,7 @@ export default function PersonalInfoTab({
|
||||
{/* State/Province */}
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="State/Province"
|
||||
type="text"
|
||||
name="state"
|
||||
@@ -194,12 +226,17 @@ export default function PersonalInfoTab({
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.state && props.touched.state) && <p className="text-sm text-red-500">{props.errors.state}</p>}
|
||||
{props.errors.state && props.touched.state && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.state}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* City */}
|
||||
<div className="field w-full mb-6">
|
||||
<InputCom
|
||||
fieldClass="px-6"
|
||||
label="City"
|
||||
type="text"
|
||||
name="city"
|
||||
@@ -208,34 +245,65 @@ export default function PersonalInfoTab({
|
||||
inputHandler={props.handleChange}
|
||||
blurHandler={props.handleBlur}
|
||||
/>
|
||||
{(props.errors.city && props.touched.city) && <p className="text-sm text-red-500">{props.errors.city}</p>}
|
||||
{props.errors.city && props.touched.city && (
|
||||
<p className="text-sm text-red-500">
|
||||
{props.errors.city}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Preferred Communication*/}
|
||||
<div className='field w-full mb-6 md:flex items-center space-x-4'>
|
||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold'>Pref. Communication</label>
|
||||
<div className="check-box">
|
||||
<div className="flex items-center justify-start">
|
||||
<div className="check-input flex items-center mr-1">
|
||||
<input className="w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm1" id="" />
|
||||
<span className="mx-2 text-base text-dark-gray dark:text-white">Email</span>
|
||||
</div>
|
||||
<div className="check-input flex items-center">
|
||||
<input className="w-4 h-4 cursor-pointer" type="checkbox" name="prefcomm2" id="" />
|
||||
<span className="mx-2 text-base text-dark-gray dark:text-white">Phone</span>
|
||||
</div>
|
||||
<div className="field w-full mb-6 md:flex items-center space-x-4">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold">
|
||||
Pref. Communication
|
||||
</label>
|
||||
<div className="check-box">
|
||||
<div className="flex items-center justify-start">
|
||||
<div className="check-input flex items-center mr-1">
|
||||
<input
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
type="checkbox"
|
||||
name="prefcomm1"
|
||||
id=""
|
||||
/>
|
||||
<span className="mx-2 text-base text-dark-gray dark:text-white">
|
||||
Email
|
||||
</span>
|
||||
</div>
|
||||
<div className="check-input flex items-center">
|
||||
<input
|
||||
className="w-4 h-4 cursor-pointer"
|
||||
type="checkbox"
|
||||
name="prefcomm2"
|
||||
id=""
|
||||
/>
|
||||
<span className="mx-2 text-base text-dark-gray dark:text-white">
|
||||
Phone
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Allow Promotions */}
|
||||
<div className='field w-full mb-6 flex items-center space-x-4'>
|
||||
<label className='input-label text-[#181c32] dark:text-white text-base font-semibold'>Allow Promotions</label>
|
||||
<div className="cursor-pointer flex items-center" onClick={()=>setTogglePromotion(prev => !prev)}>
|
||||
<div className={`h-6 w-8 mr-1 p-1 ${togglePromotion ? 'bg-sky-blue flex justify-end items-center': 'bg-slate-200'} rounded-full transition`}>
|
||||
<div className="w-4 h-full bg-white rounded-full"></div>
|
||||
</div>
|
||||
<div className="field w-full mb-6 flex items-center space-x-4">
|
||||
<label className="input-label text-[#181c32] dark:text-white text-base font-semibold">
|
||||
Allow Promotions
|
||||
</label>
|
||||
<div
|
||||
className="cursor-pointer flex items-center"
|
||||
onClick={() => setTogglePromotion((prev) => !prev)}
|
||||
>
|
||||
<div
|
||||
className={`h-6 w-8 mr-1 p-1 ${
|
||||
togglePromotion
|
||||
? "bg-sky-blue flex justify-end items-center"
|
||||
: "bg-slate-200"
|
||||
} rounded-full transition`}
|
||||
>
|
||||
<div className="w-4 h-full bg-white rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* inputs ends here */}
|
||||
</div>
|
||||
@@ -300,11 +368,19 @@ export default function PersonalInfoTab({
|
||||
</div>
|
||||
|
||||
<div className="content-footer w-full">
|
||||
{requestStatus.message != '' && <p className={`text-center text-base ${requestStatus.status ? 'text-green-800' : 'text-red-600'}`}>{requestStatus.message}</p>}
|
||||
{requestStatus.message != "" && (
|
||||
<p
|
||||
className={`text-center text-base ${
|
||||
requestStatus.status ? "text-green-800" : "text-red-600"
|
||||
}`}
|
||||
>
|
||||
{requestStatus.message}
|
||||
</p>
|
||||
)}
|
||||
<div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29] flex justify-end items-center">
|
||||
<div className="flex items-center space-x-4 mr-9">
|
||||
<Link
|
||||
to='/'
|
||||
to="/"
|
||||
className="text-18 text-light-red tracking-wide "
|
||||
>
|
||||
<span className="border-b dark:border-[#5356fb29] border-light-red">
|
||||
@@ -313,23 +389,23 @@ export default function PersonalInfoTab({
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{requestStatus.loading ?
|
||||
<LoadingSpinner size='8' color='sky-blue' />
|
||||
:
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Update Profile
|
||||
</button>
|
||||
}
|
||||
{requestStatus.loading ? (
|
||||
<LoadingSpinner size="8" color="sky-blue" />
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||
>
|
||||
Update Profile
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
})}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user