Added Tracking to Family Profile
This commit was merged in pull request #462.
This commit is contained in:
@@ -1,35 +1,42 @@
|
||||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import InputCom from "../../Helpers/Inputs/InputCom";
|
||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||
import usersService from "../../../services/UsersService";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { Formik, Form } from "formik";
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
|
||||
export default function FamilyProfile({familyData, className }) {
|
||||
|
||||
export default function FamilyProfile({ familyData, className }) {
|
||||
const validationSchema = Yup.object().shape({
|
||||
firstname: Yup.string()
|
||||
.required("Firstname is required"),
|
||||
firstname: Yup.string().required("Firstname is required"),
|
||||
lastname: Yup.string()
|
||||
// .min(3, "Minimum 3 characters")
|
||||
// .max(25, "Maximum 25 characters")
|
||||
.required("Lastname is required"),
|
||||
year: Yup.number()
|
||||
.required("Year is required")
|
||||
.min(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MAXIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`)
|
||||
.max(new Date().getFullYear()-process.env.REACT_APP_FAMILY_MINIMUM_AGE, `Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`),
|
||||
.min(
|
||||
new Date().getFullYear() - process.env.REACT_APP_FAMILY_MAXIMUM_AGE,
|
||||
`Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
|
||||
)
|
||||
.max(
|
||||
new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE,
|
||||
`Age must be within ${process.env.REACT_APP_FAMILY_MINIMUM_AGE} to ${process.env.REACT_APP_FAMILY_MAXIMUM_AGE} years`
|
||||
),
|
||||
month: Yup.number()
|
||||
.required("Month is required")
|
||||
.min(1, "Month is required"),
|
||||
});
|
||||
|
||||
const navigate = useNavigate()
|
||||
const api = new usersService()
|
||||
const navigate = useNavigate();
|
||||
const api = new usersService();
|
||||
|
||||
let [requestStatus, setRequestStatus] = useState({loading:false, status:false, message: ''})
|
||||
let [requestStatus, setRequestStatus] = useState({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "",
|
||||
});
|
||||
|
||||
// let [updateDetails, setUpdateDetails] = useState({
|
||||
// family_uid: familyData.uid,
|
||||
@@ -47,15 +54,16 @@ export default function FamilyProfile({familyData, className }) {
|
||||
lastname: familyData.lastname,
|
||||
year: familyData.year,
|
||||
month: familyData.month,
|
||||
action: 22020
|
||||
enable_traking: familyData.enable_traking,
|
||||
action: 22020,
|
||||
};
|
||||
|
||||
const handleChange = ({target:{name, value}})=>{
|
||||
setUpdateDetails(prev => ({...prev, [name]:value}))
|
||||
}
|
||||
|
||||
// const handleChange = ({ target: { name, value } }) => {
|
||||
// setUpdateDetails((prev) => ({ ...prev, [name]: value }));
|
||||
// };
|
||||
|
||||
const updateFamily = (values, helpers) => {
|
||||
setRequestStatus({loading:true, status:false, message: ''})
|
||||
setRequestStatus({ loading: true, status: false, message: "" });
|
||||
// let {firstname, lastname, year, month} = updateDetails
|
||||
// if(!firstname || !lastname || year == 0 || month == 0) {
|
||||
// setRequestStatus({loading:false, status:false, message: 'Please fill all fields'})
|
||||
@@ -63,22 +71,38 @@ export default function FamilyProfile({familyData, className }) {
|
||||
// setRequestStatus({loading:false, status:false, message: ''})
|
||||
// }, 5000)
|
||||
// }
|
||||
api.getFamilyUpdate(values).then(res=>{
|
||||
if(res.data.internal_return < 0){
|
||||
return setRequestStatus({loading:false, status:false, message: 'Failed, try again!'})
|
||||
}
|
||||
setRequestStatus({loading:false, status:true, message: 'Family account updated'})
|
||||
setTimeout(()=>{
|
||||
navigate('/acc-family', {replace:true})
|
||||
}, 5000)
|
||||
}).catch(error => {
|
||||
setRequestStatus({loading:false, status:false, message: 'Unable to update, try again!'})
|
||||
}).finally(()=>{
|
||||
setTimeout(()=>{
|
||||
setRequestStatus({loading:false, status:false, message: ''})
|
||||
}, 5000)
|
||||
})
|
||||
}
|
||||
api
|
||||
.getFamilyUpdate(values)
|
||||
.then((res) => {
|
||||
if (res.data.internal_return < 0) {
|
||||
return setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Failed, try again!",
|
||||
});
|
||||
}
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: true,
|
||||
message: "Family account updated",
|
||||
});
|
||||
setTimeout(() => {
|
||||
navigate("/acc-family", { replace: true });
|
||||
}, 5000);
|
||||
})
|
||||
.catch((error) => {
|
||||
setRequestStatus({
|
||||
loading: false,
|
||||
status: false,
|
||||
message: "Unable to update, try again!",
|
||||
});
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
setRequestStatus({ loading: false, status: false, message: "" });
|
||||
}, 5000);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -93,102 +117,163 @@ export default function FamilyProfile({familyData, className }) {
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
|
||||
<InputCom
|
||||
placeholder="Firstname"
|
||||
label="First Name:"
|
||||
name="firstname"
|
||||
type="text"
|
||||
parentClass="flex items-center gap-1 w-full"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.firstname && props.touched.firstname ? 'border border-red-500' : ''}`}
|
||||
fieldClass="px-2"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
/>
|
||||
<InputCom
|
||||
placeholder="Lastname"
|
||||
label="Last Name:"
|
||||
name="lastname"
|
||||
type="text"
|
||||
parentClass="flex items-center gap-1 w-full"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${props.errors.lastname && props.touched.lastname ? 'border border-red-500' : ''}`}
|
||||
fieldClass="px-2"
|
||||
value={props.values?.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
/>
|
||||
<div className="input-com mb-7 flex flex-col gap-1 w-full">
|
||||
{/* Age dropdown */}
|
||||
<div className="">
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
|
||||
htmlFor="age-selection"
|
||||
<Form className="logout-modal-body w-full lg:w-[500px] lg:mx-auto flex flex-col items-center px-10 py-8 gap-4">
|
||||
<InputCom
|
||||
placeholder="Firstname"
|
||||
label="First Name:"
|
||||
name="firstname"
|
||||
type="text"
|
||||
parentClass="flex items-center gap-1 w-full"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${
|
||||
props.errors.firstname && props.touched.firstname
|
||||
? "border border-red-500"
|
||||
: ""
|
||||
}`}
|
||||
fieldClass="px-2"
|
||||
value={props.values.firstname}
|
||||
inputHandler={props.handleChange}
|
||||
/>
|
||||
<InputCom
|
||||
placeholder="Lastname"
|
||||
label="Last Name:"
|
||||
name="lastname"
|
||||
type="text"
|
||||
parentClass="flex items-center gap-1 w-full"
|
||||
labelClass="flex-[0.2] mb-0"
|
||||
inputClass={`flex-[0.8] input-curve lg border border-[#dce4e9] ${
|
||||
props.errors.lastname && props.touched.lastname
|
||||
? "border border-red-500"
|
||||
: ""
|
||||
}`}
|
||||
fieldClass="px-2"
|
||||
value={props.values?.lastname}
|
||||
inputHandler={props.handleChange}
|
||||
/>
|
||||
|
||||
<div className="input-com flex flex-col gap-1 w-full">
|
||||
{/* Age dropdown */}
|
||||
<div className="">
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
|
||||
htmlFor="age-selection"
|
||||
>
|
||||
Birthday: (Year/Month)
|
||||
</label>
|
||||
{((props.errors.year && props.touched.year) ||
|
||||
(props.errors.month && props.touched.month)) && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{" "}
|
||||
{props.errors.year || props.errors.month}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex max-w-[330px] w-full self-end gap-4">
|
||||
<select
|
||||
name="year"
|
||||
id="yearDropdown"
|
||||
value={props.values.year}
|
||||
onChange={props.handleChange}
|
||||
className={`input-wrapper border border-[#f5f8fa] ${
|
||||
props.errors.year && props.touched.year
|
||||
? "border border-red-500"
|
||||
: ""
|
||||
} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
|
||||
>
|
||||
<option value="">Select a Year</option>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
name="month"
|
||||
id="monthDropdown"
|
||||
// value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
|
||||
value={
|
||||
months.filter(
|
||||
(month) => month.id == props.values.month
|
||||
)[0]?.id || 0
|
||||
}
|
||||
onChange={props.handleChange}
|
||||
className={`input-wrapper border border-[#f5f8fa] ${
|
||||
props.errors.month && props.touched.month
|
||||
? "border border-red-500"
|
||||
: ""
|
||||
} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
|
||||
>
|
||||
<option value="">Select a Month</option>
|
||||
{months.map(({ id, name }) => (
|
||||
<option key={id} value={id}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="input-com mb-7 flex flex-col gap-1 w-full">
|
||||
{/* Location dropdown */}
|
||||
<div className="">
|
||||
<label
|
||||
className="input-label text-[#181c32] dark:text-white text-[15px] font-semibold"
|
||||
htmlFor="age-selection"
|
||||
>
|
||||
Location Tracking
|
||||
</label>
|
||||
{/* {((props.errors.year && props.touched.year) ||
|
||||
(props.errors.month && props.touched.month)) && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{" "}
|
||||
{props.errors.year || props.errors.month}
|
||||
</span>
|
||||
)} */}
|
||||
</div>
|
||||
<div className="flex max-w-[330px] w-full self-end gap-4">
|
||||
<select
|
||||
name="enable_traking"
|
||||
id="enable_traking"
|
||||
value={props.values.enable_traking}
|
||||
onChange={props.handleChange}
|
||||
className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
|
||||
>
|
||||
<option value={+0}>Disabled</option>
|
||||
<option value={+100}>Enabled</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{requestStatus.message && (
|
||||
<div
|
||||
className={`relative p-2 ${
|
||||
!requestStatus.status
|
||||
? "text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]"
|
||||
: "text-green-700"
|
||||
} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}
|
||||
>
|
||||
Birthday: (Year/Month)
|
||||
</label>
|
||||
{((props.errors.year && props.touched.year) || (props.errors.month && props.touched.month)) && (
|
||||
<span className="text-[12px] text-red-500">
|
||||
{' '}{props.errors.year || props.errors.month}
|
||||
</span>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end w-full">
|
||||
{requestStatus.loading ? (
|
||||
<>
|
||||
<div className="signup btn-loader"></div>
|
||||
<LoadingSpinner size="4" />
|
||||
</>
|
||||
) : (
|
||||
<button
|
||||
type="submit"
|
||||
// onClick={updateFamily}
|
||||
// className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex max-w-[330px] w-full self-end gap-4">
|
||||
<select
|
||||
name='year'
|
||||
id="yearDropdown"
|
||||
value={props.values.year}
|
||||
onChange={props.handleChange}
|
||||
className={`input-wrapper border border-[#f5f8fa] ${props.errors.year && props.touched.year ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
|
||||
>
|
||||
<option value="">Select a Year</option>
|
||||
{years.map((year) => (
|
||||
<option key={year} value={year}>
|
||||
{year}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
name='month'
|
||||
id="monthDropdown"
|
||||
// value={(months.filter(month => month.id == selectedMonth)[0]?.id) || ''}
|
||||
value={(months.filter(month => month.id == props.values.month)[0]?.id) || 0}
|
||||
onChange={props.handleChange}
|
||||
className={`input-wrapper border border-[#f5f8fa] ${props.errors.month && props.touched.month ? 'border border-red-500' : ''} dark:border-[#5e6278] w-56 rounded-[35px] h-10 overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent px-4`}
|
||||
>
|
||||
<option value="">Select a Month</option>
|
||||
{months.map(({id, name}) => (
|
||||
<option key={id} value={id}>
|
||||
{name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
{requestStatus.message && (
|
||||
<div className={`relative p-2 ${!requestStatus.status ? 'text-[#912741] bg-[#fcd9e2] border-[#fbc6d3]' : 'text-green-700'} mb-2 rounded-[0.475rem] text-xs font-light leading-[19.5px]`}>
|
||||
{requestStatus.message}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex justify-end w-full">
|
||||
{requestStatus.loading ?
|
||||
<>
|
||||
<div className="signup btn-loader"></div>
|
||||
<LoadingSpinner size='4' />
|
||||
</>
|
||||
:
|
||||
<button
|
||||
type="submit"
|
||||
// onClick={updateFamily}
|
||||
// className={`rounded-[0.475rem] text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center h-[42px] py-[0.8875rem] px-[1.81rem] text-[14.95px] btn-login`}
|
||||
className="text-white btn-gradient text-lg tracking-wide px-6 py-2 rounded-full"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</Form>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
@@ -196,26 +281,24 @@ export default function FamilyProfile({familyData, className }) {
|
||||
);
|
||||
}
|
||||
|
||||
// Get the current year
|
||||
// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Generate an array of years from the current year to (currentYear - 19)
|
||||
const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
|
||||
|
||||
const months = [
|
||||
{id:'1', name:"January"},
|
||||
{id:'2', name:"February"},
|
||||
{id:'3', name:"March"},
|
||||
{id:'4', name:"April"},
|
||||
{id:'5', name:"May"},
|
||||
{id:'6', name:"June"},
|
||||
{id:'7', name:"July"},
|
||||
{id:'8', name:"August"},
|
||||
{id:'9', name:"September"},
|
||||
{id:'10', name:"October"},
|
||||
{id:'11', name:"November"},
|
||||
{id:'12', name:"December"},
|
||||
];
|
||||
// Get the current year
|
||||
// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
// Generate an array of years from the current year to (currentYear - 19)
|
||||
const years = Array.from({ length: 19 }, (_, index) => currentYear - index);
|
||||
|
||||
const months = [
|
||||
{ id: "1", name: "January" },
|
||||
{ id: "2", name: "February" },
|
||||
{ id: "3", name: "March" },
|
||||
{ id: "4", name: "April" },
|
||||
{ id: "5", name: "May" },
|
||||
{ id: "6", name: "June" },
|
||||
{ id: "7", name: "July" },
|
||||
{ id: "8", name: "August" },
|
||||
{ id: "9", name: "September" },
|
||||
{ id: "10", name: "October" },
|
||||
{ id: "11", name: "November" },
|
||||
{ id: "12", name: "December" },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user