victorAnumudu
287 lines
11 KiB
React
287 lines
11 KiB
React
import React, { useEffect, useState } from "react";
|
|
import usersService from "../../../services/UsersService";
|
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
|
import {PriceFormatter} from '../../Helpers/PriceFormatter'
|
|
|
|
export default function LockJob({
|
|
details,
|
|
marketPlaceProduct,
|
|
ManageInterest,
|
|
manageInt,
|
|
handleInputChange,
|
|
MarketDetail,
|
|
marketMsg,
|
|
errMsg,
|
|
textValue,
|
|
}) {
|
|
const apiCall = new usersService();
|
|
|
|
const [completedTask, setCompletedTask] = useState({
|
|
loading: true,
|
|
data: [],
|
|
});
|
|
|
|
let thePrice = PriceFormatter(
|
|
details?.price * 0.01,
|
|
details?.currency_code,
|
|
details?.currency
|
|
);
|
|
|
|
let cleanedText = details?.job_description
|
|
?.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, '"')
|
|
.replace(/&/g, "&");
|
|
|
|
let dependOn = marketPlaceProduct?.filter(
|
|
(item) => item?.job_uid == details?.offer_depend_uid
|
|
)[0];
|
|
|
|
useEffect(() => {
|
|
apiCall
|
|
.getVerifyCompletedTask({ offer_depend_uid: details?.offer_depend_uid })
|
|
.then((res) => {
|
|
// console.log("RES", res.data);
|
|
setCompletedTask({ loading: false, data: res?.data?.result_list });
|
|
})
|
|
.catch((err) => {
|
|
setCompletedTask({ loading: false, data: [] });
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<>
|
|
{completedTask.loading ? (
|
|
<div className="w-full md:col-span-4 flex justify-center items-center min-h-[500px]">
|
|
<LoadingSpinner size="10" />
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className='md:grid md:grid-cols-4'>
|
|
<div className="px-4 py-2 w-full md:col-span-3 md:border-r-1">
|
|
<div className="min-h-[200px]">
|
|
<h2 className="w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-white tracking-wide">
|
|
{details?.offer_depend_uid && (
|
|
<i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>
|
|
)}
|
|
{details?.title}
|
|
</h2>
|
|
|
|
{/* INPUT SECTION */}
|
|
{[
|
|
{
|
|
name: "Description",
|
|
content: details.description,
|
|
},
|
|
{
|
|
name: "",
|
|
content: {
|
|
text: `Timeline: ${details.timeline_days} day(s) -- `,
|
|
bold: `Budget: ${thePrice}`,
|
|
},
|
|
},
|
|
// {
|
|
// name: "Delivery Detail",
|
|
// content: cleanedText,
|
|
// danger: true,
|
|
// },
|
|
].map(({ name, content, danger }, idx) => (
|
|
<div className={`my-1 flex flex-col items-start`} key={idx}>
|
|
<label className="py-1 job-label w-full">{name}</label>
|
|
<div
|
|
className={`w-full p-2 text-slate-900 dark:text-white market-pop rounded-2xl ${
|
|
name == "Description"
|
|
? "min-h-[100px] max-h-[100px] h-full overflow-y-auto break-words bg-slate-50"
|
|
: name == "Delivery Detail"
|
|
? " overflow-y-auto h-full min-h-[100px] max-h-[100px] bg-slate-50"
|
|
: "h-full flex items-center"
|
|
}`}
|
|
>
|
|
{danger ? (
|
|
<p
|
|
className={`dark:text-black`}
|
|
dangerouslySetInnerHTML={{
|
|
__html: danger && content,
|
|
}}
|
|
/>
|
|
) : (
|
|
<p className={`w-full text-slate-900 dark:text-black`}>
|
|
{name !== "Delivery Detail" ? (
|
|
<>
|
|
{typeof content !== "object" ? content : null}
|
|
{typeof content === "object" && (
|
|
<>
|
|
{/* <hr className="mb-1" /> */}
|
|
<span className="flex w-full mb-1 h-[1px] bg-slate-500"></span>
|
|
<span className="flex items-center gap-2 dark:text-white">
|
|
{content?.text}
|
|
<strong>{thePrice}</strong>
|
|
</span>
|
|
<span className="flex w-full mt-1 h-[1px] bg-slate-500"></span>
|
|
{/* <hr className="mt-1" /> */}
|
|
</>
|
|
)}
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
{/* <hr className='my-3' /> */}
|
|
{completedTask.loading ? (
|
|
<p className="py-3 w-full text-center text-lg">Loading...</p>
|
|
) : completedTask?.data?.filter(
|
|
(item) => item?.job_uid == details.offer_depend_uid
|
|
).length > 0 ? (
|
|
<div className="w-full">
|
|
<label className="job-label w-full flex gap-2 items-center">
|
|
If you have any questions about this task:
|
|
<span
|
|
className={`text-sm ${
|
|
marketMsg.state ? "text-[#57cd89]" : "text-red-500"
|
|
}`}
|
|
>
|
|
{marketMsg.state && "Message Sent!"}
|
|
{errMsg.market && "Failed to send"}
|
|
</span>
|
|
</label>
|
|
<div className="w-full flex items-center gap-3">
|
|
<div className="w-full">
|
|
<textarea
|
|
className={`p-1 w-full text-sm text-slate-900 dark:text-white ${
|
|
marketMsg.loading && "italic text-[#9CA3AF]"
|
|
} bg-transparent outline-none border-2 border-slate-300 rounded-md`}
|
|
rows="3"
|
|
style={{ resize: "none" }}
|
|
placeholder="Enter message here ..."
|
|
value={marketMsg.loading ? "Sending..." : textValue}
|
|
onChange={handleInputChange}
|
|
/>
|
|
</div>
|
|
<div className="relative flex flex-col">
|
|
<button
|
|
className="rounded-full flex justify-center items-center w-12 h-11 bg-yellow-500 text-white"
|
|
name="market-message"
|
|
onClick={MarketDetail}
|
|
disabled={marketMsg.loading}
|
|
>
|
|
{marketMsg.loading ? (
|
|
<LoadingSpinner size={5} color="white" />
|
|
) : (
|
|
// "Send Message"
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 11 20"
|
|
id="Arrow"
|
|
className="w-[0.7rem]"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
d="M.366 19.708c.405.39 1.06.39 1.464 0l8.563-8.264a1.95 1.95 0 0 0 0-2.827L1.768.292A1.063 1.063 0 0 0 .314.282a.976.976 0 0 0-.011 1.425l7.894 7.617a.975.975 0 0 1 0 1.414L.366 18.295a.974.974 0 0 0 0 1.413"
|
|
// fill=""
|
|
className="color000000 svgShape fill-[#fff]"
|
|
></path>
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="w-full">
|
|
<h1 className="text-red-600 text-lg">
|
|
This task depends on the task below
|
|
</h1>
|
|
<div className="rounded-2xl bg-red-50">
|
|
<div className="my-1 w-full">
|
|
<h2 className="p-2 w-full flex gap-1 items-center font-semibold text-slate-900 dark:text-black tracking-wide">
|
|
{dependOn?.offer_depend_uid && (
|
|
<i className="fa-solid fa-lock p-1 text-red-500 text-[12px]"></i>
|
|
)}
|
|
{dependOn?.title}
|
|
</h2>
|
|
</div>
|
|
<div className={`p-2 flex flex-col items-start`}>
|
|
<p className="py-1 job-label w-full dark:text-black">
|
|
Description
|
|
</p>
|
|
<div
|
|
className={`w-full p-2 text-slate-900 dark:text-black market-pop rounded-2xl bg-white break-words min-h-[100px] max-h-[100px]`}
|
|
>
|
|
{dependOn?.description}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="py-2 w-full md:col-span-1 h-full flex flex-col rounded-2xl">
|
|
<div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md w-full h-full md:min-h-[420px] flex flex-col justify-between">
|
|
<div className="w-full flex flex-col justify-center pb-4 gap-2">
|
|
<p className="job-label w-full">Interested?</p>
|
|
<hr />
|
|
{completedTask.loading ? (
|
|
<p className="py-3 w-full text-center text-lg">Loading...</p>
|
|
) : completedTask?.data?.filter(
|
|
(item) => item?.job_uid == details.offer_depend_uid
|
|
).length > 0 ? (
|
|
<button
|
|
className="btn-gradient text-white px-2 py-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl"
|
|
name="market-interest"
|
|
onClick={ManageInterest}
|
|
>
|
|
{" "}
|
|
<div className="flex md:flex-col justify-center gap-2">
|
|
<span>Notify</span>
|
|
<span>Owner</span>
|
|
</div>
|
|
</button>
|
|
) : (
|
|
<h1 className="text-red-600 text-base font-bold">
|
|
This task depends on completion of another task
|
|
</h1>
|
|
)}
|
|
<>
|
|
{manageInt.loading ? (
|
|
<p className="text-sm italic">please wait...</p>
|
|
) : (
|
|
<>
|
|
{manageInt?.msg !== "" && (
|
|
<p
|
|
className={`text-sm italic ${
|
|
manageInt?.state ? "text-green-500" : "text-red-500"
|
|
}`}
|
|
>
|
|
{manageInt?.msg}
|
|
</p>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
</div>
|
|
|
|
<div className="text-slate-900">
|
|
<p className="flex items-center tracking-wide">
|
|
<span className="job-label">Interest: </span>{" "}
|
|
<b className="ml-1">{details.interest_count}</b>
|
|
</p>
|
|
<hr />
|
|
<p className="my-1 flex flex-col">
|
|
<span className="job-label">Expire: </span>
|
|
<span> {new Date(details.expire).toLocaleString()} </span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|