308 lines
12 KiB
React
308 lines
12 KiB
React
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 { Form, Formik } from "formik";
|
|
import * as Yup from "yup";
|
|
|
|
export default function FamilyProfile({ familyData, className }) {
|
|
const validationSchema = Yup.object().shape({
|
|
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`
|
|
),
|
|
month: Yup.number()
|
|
.required("Month is required")
|
|
.min(1, "Month is required"),
|
|
});
|
|
|
|
const navigate = useNavigate();
|
|
const api = new usersService();
|
|
|
|
let [requestStatus, setRequestStatus] = useState({
|
|
loading: false,
|
|
status: false,
|
|
message: "",
|
|
});
|
|
|
|
// let [updateDetails, setUpdateDetails] = useState({
|
|
// family_uid: familyData.uid,
|
|
// firstname: familyData.firstname,
|
|
// lastname: familyData.lastname,
|
|
// year: familyData.year,
|
|
// month: familyData.month,
|
|
// action: 22020
|
|
// })
|
|
|
|
// initial values for formik
|
|
let initialValues = {
|
|
family_uid: familyData?.uid,
|
|
firstname: familyData?.firstname,
|
|
lastname: familyData?.lastname,
|
|
year: familyData?.year,
|
|
month: familyData?.month,
|
|
enable_traking: familyData?.enable_traking,
|
|
};
|
|
|
|
// const handleChange = ({ target: { name, value } }) => {
|
|
// setUpdateDetails((prev) => ({ ...prev, [name]: value }));
|
|
// };
|
|
|
|
const updateFamily = (values, helpers) => {
|
|
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'})
|
|
// return 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
|
|
className={`w-full bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow lg:min-h-[538px] p-3 ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<Formik
|
|
initialValues={initialValues}
|
|
validationSchema={validationSchema}
|
|
onSubmit={updateFamily}
|
|
>
|
|
{(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 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]`}
|
|
>
|
|
{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>
|
|
);
|
|
}}
|
|
</Formik>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Get the current year
|
|
// const currentYear = new Date().getFullYear() - process.env.REACT_APP_FAMILY_MINIMUM_AGE;
|
|
|
|
// Calculate the current year and the year 3 years before the current year
|
|
const currentYear = new Date().getFullYear();
|
|
const startYear = currentYear - 3;
|
|
|
|
// Generate an array of years from 4 years before the current year to 18 years before the current year
|
|
const years = Array.from({ length: 15 }, (_, index) => startYear - index).reverse();
|
|
// const latestYears = years.slice(0, process.env.REACT_APP_FAMILY_YEAR_RANGE);
|
|
|
|
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" },
|
|
];
|