import React, { useState, useEffect, useTransition } from "react"; import ModalCom from "../../Helpers/ModalCom"; import Detail from "../../jobPopout/popoutcomponent/Detail"; import usersService from "../../../services/UsersService"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import { PriceFormatter } from "../../Helpers/PriceFormatter"; import { NewTasks } from "./forms"; const AssignTaskPopout = React.memo(({ action, details, situation, familyDetails }) => { const apiCall = new usersService(); let [requestStatus, setRequestStatus] = useState({ loading: false, status: false, message: "", }); // HOLDS RESPONSE FOR SENDING API REQUEST let [familyTask, setFamilyTask] = useState({ loading: false, data: [] }); let [taskType, setTaskType] = useState(details ? "new" : "select"); // SWITCHES BTW SELECT TASK AND NEW TASK let [activeTask, setActiveTask] = useState({ id: 0, data: {} }); // HOLDS SELECTED TASK const switchTaskType = ({ target: { value } }) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK setTaskType(value); }; const handleActiveTask = (id = 0, data = {}) => { // FUNCTION TO CHANGE SELECTED ACTIVE TASK setActiveTask({ id, data }); }; // New Task const [formState, setFormState] = useState({ // Initialize form state with desired fields banner: details?.banner || "default.jpg", country: details?.country || "", price: details?.price || "", title: details?.title || "", description: details?.description || "", job_detail: details?.job_detail || "", timeline_days: details?.timeline_days || "", category: details?.category || "", }); const assignFamilyTask = () => { setRequestStatus({ loading: true, status: false, message: "" }); let reqData = {}; if (taskType == "select") { // RUNS HERE IF TASK TYPE IS SELECT if (!Object.keys(activeTask.data).length) { setRequestStatus({ loading: false, status: false, message: "No Task is seleted", }); return setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" }); }, 3000); } reqData = { // API PAYLOADS job_id: activeTask.data?.job_id, job_uid: activeTask.data?.job_uid, family_uid: familyDetails?.uid || details?.family_uid, job_description: activeTask.data?.description, assign_mode: 110011, }; } if (taskType === "new") { const { banner, category, country, description, job_detail, price, timeline_days, title, } = formState; const requiredFields = { banner, // category, country, description, job_detail, price, timeline_days, title, }; for (let field in requiredFields) { if (requiredFields[field] == "") { // let currencyErrMsg = field == "country" && "currency" setRequestStatus({ loading: false, status: false, message: `${field} is empty`, }); return setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" }); }, 3000); } } reqData = { banner, category, country, description, job_detail, price: price * 100, timeline_days, title, assign_mode: 110055, family_uid: details?.family_uid || familyDetails?.uid, }; } apiCall .assignFamilyTask(reqData) .then((res) => { if (res.status != 200 || res.data.internal_return < 0) { setRequestStatus({ loading: false, status: false, message: "failed to assign task", }); return setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" }); }, 5000); } setRequestStatus({ loading: false, status: true, message: "action successful", }); setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" }); action(); // FUNCTION THAT CLOSES THE MODAL BOX }, 5000); }) .catch((err) => { setRequestStatus({ loading: false, status: false, message: "An Error occured, try again", }); setTimeout(() => { setRequestStatus({ loading: false, status: false, message: "" }); }, 5000); }); }; useEffect(() => { let checkFamilyTask = true; const reqData = { limit: 30, offset: 0, job_type: "FAMILY", action: 13005, }; apiCall .getMyJobList(reqData) .then((res) => { if (checkFamilyTask) { setFamilyTask({ loading: false, data: res?.data?.result_list }); if (res?.data?.result_list?.length) { setActiveTask((prev) => ({ ...prev, data: res?.data?.result_list[0], })); } } }) .catch((err) => { setFamilyTask({ loading: false, data: [] }); console.log("Error", err); }); return () => { checkFamilyTask = false; }; }, []); return ( <>

Assign task to {familyDetails?.firstname || details.firstName}

{familyTask.loading ? (
) : ( <>
Select Task
New Task
{/* Task Type === select */} {taskType == "select" && (
{familyTask?.data?.length ? ( familyTask?.data?.map((item, index) => (
handleActiveTask(item.job_uid, item)} > handleActiveTask(item.job_uid, item) } className="w-[15px] h-[15px] cursor-pointer" />

{item?.title}

)) ) : (

No Task found!

)}
)} {taskType == "new" && (
)}
{/*Right Hand Side for details && Task Type === select */} {taskType == "select" && ( <> {familyTask?.data?.length > 0 ? (

{activeTask?.data?.title}

{PriceFormatter( activeTask?.data?.price * 0.01, activeTask?.data?.currency, activeTask?.data?.curreny_code )}

{`${activeTask?.data?.timeline_days} day(s)`}