.
This commit is contained in:
@@ -1,69 +1,283 @@
|
|||||||
import { useCallback, useMemo, useState } from "react";
|
import React, { useCallback, useMemo, useState } from "react";
|
||||||
import Detail from "./Detail";
|
|
||||||
import ModalCom from "../../Helpers/ModalCom";
|
import ModalCom from "../../Helpers/ModalCom";
|
||||||
import usersService from "../../../services/UsersService";
|
|
||||||
import { toast } from "react-toastify";
|
import { toast } from "react-toastify";
|
||||||
|
import { Form, Formik } from "formik";
|
||||||
|
import usersService from "../../../services/UsersService";
|
||||||
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../../Spinners/LoadingSpinner";
|
||||||
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../../Helpers/PriceFormatter";
|
||||||
|
|
||||||
const showSuccessToast = (message) => {
|
const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
|
||||||
toast.success(message, {
|
const [marketMsg, setMarketMsg] = useState({
|
||||||
autoClose: 3000,
|
loading: false,
|
||||||
hideProgressBar: true,
|
data: {},
|
||||||
|
state: undefined,
|
||||||
});
|
});
|
||||||
|
const [manageInt, setManageInt] = useState({
|
||||||
|
loading: false,
|
||||||
|
data: {},
|
||||||
|
state: undefined,
|
||||||
|
msg: "",
|
||||||
|
});
|
||||||
|
|
||||||
|
const [textValue, setTextValue] = useState("");
|
||||||
|
|
||||||
|
const handleInputChange = ({ target: { value } }) => {
|
||||||
|
setTextValue(value);
|
||||||
};
|
};
|
||||||
|
|
||||||
function MarketPopUp({ details, onClose, situation }) {
|
|
||||||
const [pendingJobLoader, setPendingJobLoader] = useState({
|
|
||||||
extend: false,
|
|
||||||
offer: false,
|
|
||||||
});
|
|
||||||
const apiCall = useMemo(() => new usersService(), []);
|
const apiCall = useMemo(() => new usersService(), []);
|
||||||
|
|
||||||
const handlePendingJobsBtn = useCallback(
|
const marketCalls = useCallback(
|
||||||
async ({ target: { name } }) => {
|
async (e) => {
|
||||||
let { job_uid, offer_code } = details;
|
|
||||||
|
|
||||||
let reqData;
|
|
||||||
|
|
||||||
let pendingData = { job_uid, offer_code };
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
if (name === "extend") {
|
const nameOfCall = e?.target?.name;
|
||||||
setPendingJobLoader({ extend: true });
|
const { offer_code } = details;
|
||||||
reqData = { ...pendingData };
|
const reqData = { offer_code };
|
||||||
// let { data } =
|
|
||||||
await apiCall.pendingJobExtend(reqData);
|
|
||||||
// console.log("This is for extend", data);
|
|
||||||
showSuccessToast("Job has been extended by a week!");
|
|
||||||
} else if (name === "offer") {
|
|
||||||
setPendingJobLoader({ offer: true });
|
|
||||||
reqData = { ...pendingData };
|
|
||||||
// let { data } =
|
|
||||||
await apiCall.pendingJobSendTome(reqData);
|
|
||||||
// console.log("This is for offer", data);
|
|
||||||
showSuccessToast("Offer sent, check your email");
|
|
||||||
} else return;
|
|
||||||
|
|
||||||
setTimeout(() => {
|
if (nameOfCall === "market-message") {
|
||||||
setPendingJobLoader({ extend: false, offer: false });
|
setMarketMsg({ loading: true });
|
||||||
|
if (!textValue) return;
|
||||||
|
|
||||||
|
reqData.yourmessage = textValue;
|
||||||
|
|
||||||
|
const marketMessage = await apiCall.MarketMessage(reqData);
|
||||||
|
const marketMessageRes = marketMessage?.data;
|
||||||
|
|
||||||
|
if (marketMessageRes?.internal_return < 0) {
|
||||||
|
toast.warn("Something wrong happened", {
|
||||||
|
autoClose: 2000,
|
||||||
|
hideProgressBar: true,
|
||||||
|
});
|
||||||
onClose();
|
onClose();
|
||||||
}, 2700);
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
toast.success("Message sent", {
|
||||||
|
autoClose: 2500,
|
||||||
|
hideProgressBar: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
setMarketMsg({ data: marketMessageRes, state: true });
|
||||||
|
setTimeout(() => onClose(), 2000);
|
||||||
|
} else {
|
||||||
|
setManageInt({ loading: true });
|
||||||
|
|
||||||
|
const manageInt = await apiCall.MarketInterest(reqData);
|
||||||
|
const manageIntRes = manageInt?.data;
|
||||||
|
|
||||||
|
if (manageIntRes?.internal_return < 0) {
|
||||||
|
setManageInt({
|
||||||
|
loading: false,
|
||||||
|
msg: `Error - ${manageIntRes?.status}`,
|
||||||
|
data: manageIntRes,
|
||||||
|
state: false,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setManageInt({
|
||||||
|
loading: false,
|
||||||
|
msg: manageIntRes?.status,
|
||||||
|
data: manageIntRes,
|
||||||
|
state: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => setManageInt({ msg: "" }), 3000);
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setPendingJobLoader({ extend: false, offer: false });
|
|
||||||
throw new Error(error);
|
throw new Error(error);
|
||||||
|
} finally {
|
||||||
|
setTimeout(() => {
|
||||||
|
setTextValue("");
|
||||||
|
setMarketMsg({ loading: false });
|
||||||
|
}, 2000);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[onClose, apiCall, details]
|
[apiCall, details, onClose, textValue]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
let thePrice = PriceFormatter(
|
||||||
|
details?.price * 0.01,
|
||||||
|
details?.currency_code,
|
||||||
|
details?.currency
|
||||||
|
);
|
||||||
|
|
||||||
|
// let addedIntDate = marketInt?.added?.split(" ")[0];
|
||||||
|
let expireIntDate = marketInt?.expire?.split(" ")[0];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={onClose} situation={situation} className="edit-popup">
|
<ModalCom action={onClose} situation={situation} className="edit-popup">
|
||||||
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
Manage Pending Item
|
{details.offer_code}
|
||||||
</h1>
|
</h1>
|
||||||
|
<CloseIcon onClose={onClose} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="md:flex bg-white rounded-lg">
|
||||||
|
<div className="p-4 w-full md:w-[75%] md:border-r-1">
|
||||||
|
<div className="min-h-[263px]">
|
||||||
|
<h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
|
||||||
|
{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: details.job_description,
|
||||||
|
danger: true,
|
||||||
|
},
|
||||||
|
].map(({ name, content, danger }, idx) => (
|
||||||
|
<div className={`my-3 md:flex items-center`} key={idx}>
|
||||||
|
<label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
|
||||||
|
{name}
|
||||||
|
</label>
|
||||||
|
<div
|
||||||
|
className={`w-full md:w-3/4 text-slate-900 market-pop ${
|
||||||
|
name !== "Delivery Detail"
|
||||||
|
? " h-full max-h-28 flex items-center"
|
||||||
|
: " overflow-y-auto max-h-[100px]"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{danger ? (
|
||||||
|
<p
|
||||||
|
className={``}
|
||||||
|
dangerouslySetInnerHTML={{
|
||||||
|
__html: danger && content?.replace(/"/g, ""),
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<p className={`w-full text-slate-900`}>
|
||||||
|
{name !== "Delivery Detail" ? (
|
||||||
|
<>
|
||||||
|
{typeof content !== "object" ? content : null}
|
||||||
|
{typeof content === "object" && (
|
||||||
|
<>
|
||||||
|
<hr className="mb-1" />
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
{content?.text}
|
||||||
|
<strong>{thePrice}</strong>
|
||||||
|
</span>
|
||||||
|
<hr className="mt-1" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
""
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className="my-3 w-full flex flex-col gap-3">
|
||||||
|
<div className="w-full">
|
||||||
|
<label className="w-full text-slate-900 tracking-wide">
|
||||||
|
If you have any questions about this task:
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
|
||||||
|
rows="5"
|
||||||
|
style={{ resize: "none" }}
|
||||||
|
placeholder="Enter message here ..."
|
||||||
|
value={textValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
|
||||||
|
name="market-message"
|
||||||
|
onClick={marketCalls}
|
||||||
|
>
|
||||||
|
{marketMsg.loading ? (
|
||||||
|
<LoadingSpinner size={5} color="white" />
|
||||||
|
) : !marketMsg.state ? (
|
||||||
|
"Send Message"
|
||||||
|
) : (
|
||||||
|
"Message Sent"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="w-full md:w-[23%] h-full ">
|
||||||
|
<div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
|
||||||
|
<div className="w-full flex flex-col justify-center py-4 gap-2">
|
||||||
|
<p className="w-full text-slate-900 tracking-wide my-1">
|
||||||
|
Interested in the task?
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
<button
|
||||||
|
className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
|
||||||
|
name="market-interest"
|
||||||
|
onClick={marketCalls}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
<span>Send</span>
|
||||||
|
<span>Interest</span>
|
||||||
|
<span>Request</span>
|
||||||
|
</button>
|
||||||
|
<>
|
||||||
|
{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="">
|
||||||
|
<p className="flex items-center tracking-wide">
|
||||||
|
Interest: <b className="ml-1">{details.interest_count}</b>
|
||||||
|
</p>
|
||||||
|
<hr />
|
||||||
|
<p className="my-1">Expire: {expireIntDate}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
className="self-end w-[150px] mt-2 h-[52px] rounded-md text-base bg-transparent border border-red-500 text-red-500 mx-auto"
|
||||||
|
name="cancel"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* END OF ACTION SECTION */}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ModalCom>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MarketPopUp;
|
||||||
|
|
||||||
|
const CloseIcon = ({ onClose }) => (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="text-[#374557] dark:text-red-500"
|
||||||
@@ -89,146 +303,4 @@ function MarketPopUp({ details, onClose, situation }) {
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
<div className="md:flex bg-white rounded-lg shadow-lg">
|
|
||||||
<div className="p-4 w-full md:w-3/4 md:border-r-2">
|
|
||||||
<p className="text-base font-semibold text-slate-900 tracking-wide">
|
|
||||||
{details.title}
|
|
||||||
</p>
|
|
||||||
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
|
|
||||||
<span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
|
|
||||||
!
|
|
||||||
</span>
|
|
||||||
<div className="">
|
|
||||||
<p className="text-sm">
|
|
||||||
This Job have been sent to public view
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-slate-600">This Job will expire</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* INPUT SECTION */}
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Date Added"
|
|
||||||
value={details.offer_added || "default"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail label="Description" value={details.description} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Offer Expire"
|
|
||||||
value={
|
|
||||||
details.expire &&
|
|
||||||
`${details.expire.split(" ")[0]} ${
|
|
||||||
details.expire.split(" ")[1].split(".")[0]
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Price"
|
|
||||||
// value={`${details.price * 0.01} ${details.currency}`}
|
|
||||||
value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Duration"
|
|
||||||
value={`${details.timeline_days} day(s)`}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Detail"
|
|
||||||
value={details.job_description || details.description}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-2 md:flex">
|
|
||||||
<Detail
|
|
||||||
label="Public Link"
|
|
||||||
value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
|
|
||||||
bg="bg-slate-200"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ACTION SECTION */}
|
|
||||||
<div className="p-4 w-full md:w-1/4 h-full">
|
|
||||||
<p className="mb-6 text-sm">Actions</p>
|
|
||||||
|
|
||||||
<div className="mb-3">
|
|
||||||
<p className="px-2 py-1 text-sm bg-slate-100">
|
|
||||||
Job sent to public view
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3">
|
|
||||||
<button
|
|
||||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
onClick={handlePendingJobsBtn}
|
|
||||||
name="extend"
|
|
||||||
>
|
|
||||||
{pendingJobLoader.extend ? (
|
|
||||||
<div className="w-[136px] flex justify-center items-center h-full">
|
|
||||||
<LoadingSpinner size={5} color="sky-blue" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
"Extend by a week"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="my-3">
|
|
||||||
<button
|
|
||||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
onClick={handlePendingJobsBtn}
|
|
||||||
name="offer"
|
|
||||||
>
|
|
||||||
{pendingJobLoader.offer ? (
|
|
||||||
<div className="w-[96px] flex justify-center items-center h-full">
|
|
||||||
<LoadingSpinner size={5} color="sky-blue" />
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
"Send to me"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-10 md:mt-32 md:flex md:justify-center">
|
|
||||||
<button
|
|
||||||
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Cancel Offer
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* close button */}
|
|
||||||
<div className="p-6 flex justify-center">
|
|
||||||
<button
|
|
||||||
onClick={onClose}
|
|
||||||
type="button"
|
|
||||||
className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
|
||||||
>
|
|
||||||
<span className="text-gradient">Close</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/* end of close button */}
|
|
||||||
</div>
|
|
||||||
</ModalCom>
|
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
export default MarketPopUp;
|
|
||||||
@@ -1,12 +1,16 @@
|
|||||||
import React, { useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
import dataImage2 from "../../assets/images/data-table-user-2.png";
|
||||||
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
import { handlePagingFunc } from "../Pagination/HandlePagination";
|
||||||
import PaginatedList from "../Pagination/PaginatedList";
|
import PaginatedList from "../Pagination/PaginatedList";
|
||||||
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
|
import PendingJobsPopout from "../jobPopout/PendingJobsPopout";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
|
import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
|
||||||
|
import usersService from "../../services/UsersService";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
export default function MyWaitingJobTable({ MyJobList, className }) {
|
export default function MyWaitingJobTable({ MyJobList, className }) {
|
||||||
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
let [jobPopout, setJobPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
|
||||||
|
const [manageInt, setManageInt] = useState(null);
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(0);
|
const [currentPage, setCurrentPage] = useState(0);
|
||||||
const indexOfFirstItem = Number(currentPage);
|
const indexOfFirstItem = Number(currentPage);
|
||||||
@@ -21,6 +25,31 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
|
|||||||
handlePagingFunc(e, setCurrentPage);
|
handlePagingFunc(e, setCurrentPage);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let navigate = useNavigate();
|
||||||
|
|
||||||
|
const apiCall = useMemo(() => new usersService(), []);
|
||||||
|
|
||||||
|
const marketInterestData = useCallback(async () => {
|
||||||
|
let { offer_code } = MyJobList;
|
||||||
|
let reqData = { offer_code };
|
||||||
|
|
||||||
|
try {
|
||||||
|
const manageInt = await apiCall.MarketInterest(reqData);
|
||||||
|
const manageIntRes = await manageInt?.data;
|
||||||
|
setManageInt(manageIntRes);
|
||||||
|
} catch (error) {
|
||||||
|
throw new Error(error);
|
||||||
|
}
|
||||||
|
}, [apiCall, MyJobList]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!MyJobList) {
|
||||||
|
navigate("/pend-interest", { replace: true });
|
||||||
|
}
|
||||||
|
marketInterestData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[520px] ${
|
||||||
@@ -138,11 +167,12 @@ export default function MyWaitingJobTable({ MyJobList, className }) {
|
|||||||
|
|
||||||
{/* Active Job Popout */}
|
{/* Active Job Popout */}
|
||||||
{jobPopout.show && (
|
{jobPopout.show && (
|
||||||
<PendingJobsPopout
|
<MarketPopUp
|
||||||
details={jobPopout.data}
|
details={jobPopout.data}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
setJobPopout({ show: false, data: {} });
|
setJobPopout({ show: false, data: {} });
|
||||||
}}
|
}}
|
||||||
|
marketInt={manageInt}
|
||||||
situation={jobPopout.show}
|
situation={jobPopout.show}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1,282 +1,69 @@
|
|||||||
import { useCallback, useMemo, useState } from "react";
|
import React, { useCallback, useMemo, useState } from "react";
|
||||||
|
import Detail from "./popoutcomponent/Detail";
|
||||||
import ModalCom from "../Helpers/ModalCom";
|
import ModalCom from "../Helpers/ModalCom";
|
||||||
import { toast } from "react-toastify";
|
|
||||||
import usersService from "../../services/UsersService";
|
import usersService from "../../services/UsersService";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
import LoadingSpinner from "../Spinners/LoadingSpinner";
|
||||||
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
import { PriceFormatter } from "../Helpers/PriceFormatter";
|
||||||
|
|
||||||
const PendingJobsPopout = ({ details, onClose, situation, marketInt }) => {
|
const showSuccessToast = (message) => {
|
||||||
const [marketMsg, setMarketMsg] = useState({
|
toast.success(message, {
|
||||||
loading: false,
|
autoClose: 3000,
|
||||||
data: {},
|
hideProgressBar: true,
|
||||||
state: undefined,
|
|
||||||
});
|
});
|
||||||
const [manageInt, setManageInt] = useState({
|
|
||||||
loading: false,
|
|
||||||
data: {},
|
|
||||||
state: undefined,
|
|
||||||
msg: "",
|
|
||||||
});
|
|
||||||
|
|
||||||
const [textValue, setTextValue] = useState("");
|
|
||||||
|
|
||||||
const handleInputChange = ({ target: { value } }) => {
|
|
||||||
setTextValue(value);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function PendingJobsPopout({ details, onClose, situation }) {
|
||||||
|
const [pendingJobLoader, setPendingJobLoader] = useState({
|
||||||
|
extend: false,
|
||||||
|
offer: false,
|
||||||
|
});
|
||||||
const apiCall = useMemo(() => new usersService(), []);
|
const apiCall = useMemo(() => new usersService(), []);
|
||||||
|
|
||||||
const marketCalls = useCallback(
|
const handlePendingJobsBtn = useCallback(
|
||||||
async (e) => {
|
async ({ target: { name } }) => {
|
||||||
|
let { job_uid, offer_code } = details;
|
||||||
|
|
||||||
|
let reqData;
|
||||||
|
|
||||||
|
let pendingData = { job_uid, offer_code };
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const nameOfCall = e?.target?.name;
|
if (name === "extend") {
|
||||||
const { offer_code } = details;
|
setPendingJobLoader({ extend: true });
|
||||||
const reqData = { offer_code };
|
reqData = { ...pendingData };
|
||||||
|
// let { data } =
|
||||||
|
await apiCall.pendingJobExtend(reqData);
|
||||||
|
// console.log("This is for extend", data);
|
||||||
|
showSuccessToast("Job has been extended by a week!");
|
||||||
|
} else if (name === "offer") {
|
||||||
|
setPendingJobLoader({ offer: true });
|
||||||
|
reqData = { ...pendingData };
|
||||||
|
// let { data } =
|
||||||
|
await apiCall.pendingJobSendTome(reqData);
|
||||||
|
// console.log("This is for offer", data);
|
||||||
|
showSuccessToast("Offer sent, check your email");
|
||||||
|
} else return;
|
||||||
|
|
||||||
if (nameOfCall === "market-message") {
|
|
||||||
setMarketMsg({ loading: true });
|
|
||||||
if (!textValue) return;
|
|
||||||
|
|
||||||
reqData.yourmessage = textValue;
|
|
||||||
|
|
||||||
const marketMessage = await apiCall.MarketMessage(reqData);
|
|
||||||
const marketMessageRes = marketMessage?.data;
|
|
||||||
|
|
||||||
if (marketMessageRes?.internal_return < 0) {
|
|
||||||
toast.warn("Something wrong happened", {
|
|
||||||
autoClose: 2000,
|
|
||||||
hideProgressBar: true,
|
|
||||||
});
|
|
||||||
onClose();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
toast.success("Message sent", {
|
|
||||||
autoClose: 2500,
|
|
||||||
hideProgressBar: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
setMarketMsg({ data: marketMessageRes, state: true });
|
|
||||||
setTimeout(() => onClose(), 2000);
|
|
||||||
} else {
|
|
||||||
setManageInt({ loading: true });
|
|
||||||
|
|
||||||
const manageInt = await apiCall.MarketInterest(reqData);
|
|
||||||
const manageIntRes = manageInt?.data;
|
|
||||||
|
|
||||||
if (manageIntRes?.internal_return < 0) {
|
|
||||||
setManageInt({
|
|
||||||
loading: false,
|
|
||||||
msg: `Error - ${manageIntRes?.status}`,
|
|
||||||
data: manageIntRes,
|
|
||||||
state: false,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
setManageInt({
|
|
||||||
loading: false,
|
|
||||||
msg: manageIntRes?.status,
|
|
||||||
data: manageIntRes,
|
|
||||||
state: true,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(() => setManageInt({ msg: "" }), 3000);
|
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
throw new Error(error);
|
|
||||||
} finally {
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setTextValue("");
|
setPendingJobLoader({ extend: false, offer: false });
|
||||||
setMarketMsg({ loading: false });
|
onClose();
|
||||||
}, 2000);
|
}, 2700);
|
||||||
|
} catch (error) {
|
||||||
|
setPendingJobLoader({ extend: false, offer: false });
|
||||||
|
throw new Error(error);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[apiCall, details, onClose, textValue]
|
[onClose, apiCall, details]
|
||||||
);
|
);
|
||||||
|
|
||||||
let thePrice = PriceFormatter(
|
|
||||||
details?.price * 0.01,
|
|
||||||
details?.currency_code,
|
|
||||||
details?.currency
|
|
||||||
);
|
|
||||||
|
|
||||||
// let addedIntDate = marketInt?.added?.split(" ")[0];
|
|
||||||
let expireIntDate = marketInt?.expire?.split(" ")[0];
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ModalCom action={onClose} situation={situation} className="edit-popup">
|
<ModalCom action={onClose} situation={situation} className="edit-popup">
|
||||||
<div className="logout-modal-wrapper md:w-[750px] md:h-[660px] h-full bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
<div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
|
||||||
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px]">
|
<div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29] border-light-purple">
|
||||||
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
<h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
|
||||||
{details.offer_code}
|
Manage Pending Item
|
||||||
</h1>
|
</h1>
|
||||||
<CloseIcon onClose={onClose} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="md:flex bg-white rounded-lg">
|
|
||||||
<div className="p-4 w-full md:w-[75%] md:border-r-1">
|
|
||||||
<div className="min-h-[263px]">
|
|
||||||
<h2 className="font-semibold text-slate-900 dark:text-black tracking-wide">
|
|
||||||
{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: details.job_description,
|
|
||||||
danger: true,
|
|
||||||
},
|
|
||||||
].map(({ name, content, danger }, idx) => (
|
|
||||||
<div className={`my-3 md:flex items-center`} key={idx}>
|
|
||||||
<label className="w-full md:w-[19%] text-slate-900 tracking-wide font-semibold whitespace-pre-wrap">
|
|
||||||
{name}
|
|
||||||
</label>
|
|
||||||
<div
|
|
||||||
className={`w-full md:w-3/4 text-slate-900 market-pop ${
|
|
||||||
name !== "Delivery Detail"
|
|
||||||
? " h-full max-h-28 flex items-center"
|
|
||||||
: " overflow-y-auto max-h-[100px]"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{danger ? (
|
|
||||||
<p
|
|
||||||
className={``}
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: danger && content?.replace(/"/g, ""),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<p className={`w-full text-slate-900`}>
|
|
||||||
{name !== "Delivery Detail" ? (
|
|
||||||
<>
|
|
||||||
{typeof content !== "object" ? content : null}
|
|
||||||
{typeof content === "object" && (
|
|
||||||
<>
|
|
||||||
<hr className="mb-1" />
|
|
||||||
<span className="flex items-center gap-2">
|
|
||||||
{content?.text}
|
|
||||||
<strong>{thePrice}</strong>
|
|
||||||
</span>
|
|
||||||
<hr className="mt-1" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<hr />
|
|
||||||
<div className="my-3 w-full flex flex-col gap-3">
|
|
||||||
<div className="w-full">
|
|
||||||
<label className="w-full text-slate-900 tracking-wide">
|
|
||||||
If you have any questions about this task:
|
|
||||||
</label>
|
|
||||||
<textarea
|
|
||||||
className={`p-1 w-full text-sm text-slate-900 outline-none border border-slate-300 rounded-md`}
|
|
||||||
rows="5"
|
|
||||||
style={{ resize: "none" }}
|
|
||||||
placeholder="Enter message here ..."
|
|
||||||
value={textValue}
|
|
||||||
onChange={handleInputChange}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
|
|
||||||
name="market-message"
|
|
||||||
onClick={marketCalls}
|
|
||||||
>
|
|
||||||
{marketMsg.loading ? (
|
|
||||||
<LoadingSpinner size={5} color="white" />
|
|
||||||
) : !marketMsg.state ? (
|
|
||||||
"Send Message"
|
|
||||||
) : (
|
|
||||||
"Message Sent"
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="w-full md:w-[23%] h-full ">
|
|
||||||
<div className="mx-auto bg-[#f1f8ff] p-4 rounded-md md:min-h-[498px] flex flex-col justify-between">
|
|
||||||
<div className="w-full flex flex-col justify-center py-4 gap-2">
|
|
||||||
<p className="w-full text-slate-900 tracking-wide my-1">
|
|
||||||
Interested in the task?
|
|
||||||
</p>
|
|
||||||
<hr />
|
|
||||||
<button
|
|
||||||
className="bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md inline-flex sm:flex-col flex-row sm:gap-0 gap-1 items-center justify-center"
|
|
||||||
name="market-interest"
|
|
||||||
onClick={marketCalls}
|
|
||||||
>
|
|
||||||
{" "}
|
|
||||||
<span>Send</span>
|
|
||||||
<span>Interest</span>
|
|
||||||
<span>Request</span>
|
|
||||||
</button>
|
|
||||||
<>
|
|
||||||
{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="">
|
|
||||||
<p className="flex items-center tracking-wide">
|
|
||||||
Interest: <b className="ml-1">{details.interest_count}</b>
|
|
||||||
</p>
|
|
||||||
<hr />
|
|
||||||
<p className="my-1">Expire: {expireIntDate}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
className="self-end w-[150px] mt-2 h-[52px] rounded-md text-base bg-transparent border border-red-500 text-red-500 mx-auto"
|
|
||||||
name="cancel"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
{/* END OF ACTION SECTION */}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ModalCom>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default PendingJobsPopout;
|
|
||||||
|
|
||||||
const CloseIcon = ({ onClose }) => (
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="text-[#374557] dark:text-red-500"
|
className="text-[#374557] dark:text-red-500"
|
||||||
@@ -302,4 +89,146 @@ const CloseIcon = ({ onClose }) => (
|
|||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="md:flex bg-white rounded-lg shadow-lg">
|
||||||
|
<div className="p-4 w-full md:w-3/4 md:border-r-2">
|
||||||
|
<p className="text-base font-semibold text-slate-900 tracking-wide">
|
||||||
|
{details.title}
|
||||||
|
</p>
|
||||||
|
<div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
|
||||||
|
<span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
|
||||||
|
!
|
||||||
|
</span>
|
||||||
|
<div className="">
|
||||||
|
<p className="text-sm">
|
||||||
|
This Job have been sent to public view
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-slate-600">This Job will expire</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* INPUT SECTION */}
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Date Added"
|
||||||
|
value={details.offer_added || "default"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail label="Description" value={details.description} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Offer Expire"
|
||||||
|
value={
|
||||||
|
details.expire &&
|
||||||
|
`${details.expire.split(" ")[0]} ${
|
||||||
|
details.expire.split(" ")[1].split(".")[0]
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Price"
|
||||||
|
// value={`${details.price * 0.01} ${details.currency}`}
|
||||||
|
value={PriceFormatter(details.price * 0.01, details?.currency_code, details.currency)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Duration"
|
||||||
|
value={`${details.timeline_days} day(s)`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Detail"
|
||||||
|
value={details.job_description || details.description}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-2 md:flex">
|
||||||
|
<Detail
|
||||||
|
label="Public Link"
|
||||||
|
value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
|
||||||
|
bg="bg-slate-200"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ACTION SECTION */}
|
||||||
|
<div className="p-4 w-full md:w-1/4 h-full">
|
||||||
|
<p className="mb-6 text-sm">Actions</p>
|
||||||
|
|
||||||
|
<div className="mb-3">
|
||||||
|
<p className="px-2 py-1 text-sm bg-slate-100">
|
||||||
|
Job sent to public view
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-3">
|
||||||
|
<button
|
||||||
|
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
onClick={handlePendingJobsBtn}
|
||||||
|
name="extend"
|
||||||
|
>
|
||||||
|
{pendingJobLoader.extend ? (
|
||||||
|
<div className="w-[136px] flex justify-center items-center h-full">
|
||||||
|
<LoadingSpinner size={5} color="sky-blue" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
"Extend by a week"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="my-3">
|
||||||
|
<button
|
||||||
|
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
onClick={handlePendingJobsBtn}
|
||||||
|
name="offer"
|
||||||
|
>
|
||||||
|
{pendingJobLoader.offer ? (
|
||||||
|
<div className="w-[96px] flex justify-center items-center h-full">
|
||||||
|
<LoadingSpinner size={5} color="sky-blue" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
"Send to me"
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-10 md:mt-32 md:flex md:justify-center">
|
||||||
|
<button
|
||||||
|
className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
Cancel Offer
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* close button */}
|
||||||
|
<div className="p-6 flex justify-center">
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
type="button"
|
||||||
|
className=" border-gradient text-18 tracking-wide px-2 py-2 rounded-full"
|
||||||
|
>
|
||||||
|
<span className="text-gradient">Close</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* end of close button */}
|
||||||
|
</div>
|
||||||
|
</ModalCom>
|
||||||
);
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PendingJobsPopout;
|
||||||
Reference in New Issue
Block a user