import { Field, Form, Formik } from "formik"; import React, { useCallback, useEffect, useMemo, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import * as Yup from "yup"; import usersService from "../../services/UsersService"; import { tableReload } from "../../store/TableReloads"; import InputCom from "../Helpers/Inputs/InputCom/index"; import ModalCom from "../Helpers/ModalCom"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import Detail from "./popoutcomponent/Detail"; const validationSchema = Yup.object().shape({ family: Yup.string().required("This is required "), public: Yup.string(), individual: Yup.string() .email("Invalid email format") .matches( /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/, "Invalid email format" ) .required("Email is required"), group: Yup.string(), }); function JobListPopout({ details, onClose, situation, openWallet, setWalletItem, }) { const [selectedTab, setSelectedTab] = useState("public"); const tabs = ["public", "individual", "group"]; const dispatch = useDispatch(); const [requestStatus, setRequestStatus] = useState({ message: "", status: false, }); const [familyList, setFamilyList] = useState([]); let [loader, setLoader] = useState({ member: false, jobFields: { family: false, public: false, individual: false, group: false, }, }); const apiCall = useMemo(() => new usersService(), []); const { walletDetails } = useSelector((state) => state.walletDetails); const getWalletDetail = (currency) => { // A FUNCTION TO GET USER BALANCE BASED ON TASK CURRENCY const walletChecker = walletDetails?.data.find( (item) => item.description === currency ); return walletChecker ? { description: walletChecker.description, country: walletChecker.country, code: walletChecker.code, amount: walletChecker.amount, } : 0; }; const taskWalletSelector = getWalletDetail(details?.currency); const openCreditPopup = () => { onClose(); setWalletItem(taskWalletSelector); openWallet(); }; // member listing const memberList = useCallback(async () => { setLoader({ member: true, jobFields: false }); try { let res = await apiCall.familyListings(); const { data } = res; if (data?.internal_return >= 0 && data?.status == "OK") { let { result_list } = data; setFamilyList(result_list); setLoader({ member: false, jobFields: false }); } else return; } catch (error) { setLoader({ member: false, jobFields: false }); throw new Error(error); } }, [apiCall]); useEffect(() => { memberList(); }, [memberList]); let initialValues = { family: "", public: "", individual: "", group: "", }; let [textArea, setTextArea] = useState(details?.job_detail); const [errMsg, setErrMsg] = useState({ deliveryDetail: "", jobFields: { family: "", public: "", individual: "", group: "", }, }); const handleInputChange = ({ target: { value } }) => { setTextArea(value); }; const errorHandler = ({ target: { name } }) => { try { if (name === "family") setErrMsg({ jobFields: { family: "please select a family member" } }); else if (name === "public") setErrMsg({ jobFields: { public: "please select duration" } }); else if (name === "individual") setErrMsg({ jobFields: { individual: "please enter email" } }); else if (name === "group") setErrMsg({ jobFields: { group: "please select a group" } }); } finally { setTimeout(() => { setErrMsg({ jobFields: "" }); }, 3000); } }; const jobFieldHandler = async (values, helpers) => { let { job_id, job_uid } = details; if (!textArea) { setErrMsg({ deliveryDetail: "delivery detail is required!" }); return; } let jobReq = { job_id, job_uid, job_description: textArea, }; let reqData; // for family input if (values?.family !== "") { reqData = { ...jobReq, family_uid: values?.family, assign_mode: 110011, }; setLoader({ jobFields: { family: true } }); } else if (values?.public !== "") { // for public input reqData = { ...jobReq, duration: Number(values?.public), assign_mode: 110022, }; setLoader({ jobFields: { public: true } }); } else if (values?.individual !== "") { // for individual input reqData = { ...jobReq, email: values?.individual, assign_mode: 110033, }; setLoader({ jobFields: { individual: true } }); } else if (values?.group !== "") { // for group input reqData = { ...jobReq, email: "", group_id: values?.group, assign_mode: 110044, duration: details?.timeline_days, // duration: 0, }; setLoader({ jobFields: { group: true } }); } else { return; } try { const res = await apiCall.assignJobTask(reqData); let { status, data } = await res; if (status != 200 || data.internal_return < 0) { setRequestStatus({ message: data?.status ? data?.status : "Unable to assign offer", status: false }); return setTimeout(() => { setLoader({ jobFields: false }); setRequestStatus({ message: "", status: false }); }, 3000); } dispatch(tableReload({ type: "JOBTABLE" })); setRequestStatus({ message: data?.status_msg ? data?.status_msg : "Offer Assigned Successful", status: true }); setTimeout(() => { setLoader({ jobFields: false }); onClose(); // throw new Response(data); }, 3000); } catch (error) { setRequestStatus({ message: "Unable to complete", status: false }); setTimeout(() => { setRequestStatus({ message: "", status: false }); setLoader({ jobFields: false }); throw new Error(error); }, 3000); } }; const [groupList, setGroupList] = useState({ loading: true, groups: [], members: [], }); // FUNCTION TO POPULATE USER GROUP LIST useEffect(() => { // setGroupList({loading: true, groups: [], members: []}) apiCall .jobGroupList({}) .then((res) => { const { status, data } = res; if (status != 200 || data?.internal_return < 0) { setGroupList({ loading: false, groups: [], members: [] }); return; } if (data.result_list.length < 0) { setGroupList({ loading: false, groups: [], members: [] }); return; } setGroupList({ loading: false, groups: data.result_list, members: data.result_list_member, }); }) .catch((error) => { setGroupList({ loading: false, groups: [], members: [] }); }); }, []); const DetailsSection = ({ label, value }) => (
); const DetailsComponent = () => { const detailsArray = [ { label: "Description", value: details.description }, { label: "Price", value: details.thePrice }, { label: "Timeline", value: `${details.timeline_days} day(s)` }, { label: "Created", value: new Date(details?.created).toDateString() }, ]; return (
{/*

{details.title}

*/} {/* INPUT SECTION */} {detailsArray.map((detail, index) => ( ))}