import { useEffect, useMemo, useState } from "react"; import { toast } from "react-toastify"; import usersService from "../../../services/UsersService"; import ModalCom from "../../Helpers/ModalCom"; import { PriceFormatter } from "../../Helpers/PriceFormatter"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; import { SocketValues } from "../../Contexts/SocketIOContext"; const MarketPopUp = ({ details, onClose, situation, marketInt }) => { let {sendJobInterestToOwner} = SocketValues() // function to emit job interest request const emitOfferInterest = () => { let message = { "audience": "MERCHANT", "action": "REFRESH_OFFERS", "offer_code": details?.offer_code, "offer_uid": details?.offer_uid, "job_uid": details?.job_uid, "market_uid": details?.market_uid } let room = `INTEREST-${details?.market_uid}` sendJobInterestToOwner(message, room) } const [textValue, setTextValue] = useState(""); const [errMsg, setErrMsg] = useState({ market: false, manage: false, }); const apiCall = useMemo(() => new usersService(), []); const handleInputChange = ({ target: { value } }) => { setTextValue(value); }; const MarketCalls = (details) => { const [marketMsg, setMarketMsg] = useState({ loading: false, data: {}, state: undefined, }); const [manageInt, setManageInt] = useState({ loading: false, data: {}, state: undefined, msg: "", }); const { offer_code } = details; const reqData = { offer_code }; const MarketDetail = async () => { try { if (!textValue) return; setMarketMsg({ loading: true }); 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; } setMarketMsg({ data: marketMessageRes, state: true }); } catch (error) { setErrMsg({ market: true }); setMarketMsg({ loading: false, state: false }); throw new Error(error); } finally { setTextValue(""); setTimeout(() => { setMarketMsg({ loading: false, state: false }); setErrMsg({ market: false }); }, 5000); } }; const ManageInterest = async () => { try { setManageInt({ loading: true }); const manageInt = await apiCall.MarketInterest(reqData); const manageIntRes = manageInt?.data; if (manageIntRes?.internal_return < 0) { setManageInt({ loading: false, msg: manageIntRes?.status, data: manageIntRes, state: false, }); } else { setManageInt({ loading: false, msg: manageIntRes?.status, data: manageIntRes, state: true, }); } emitOfferInterest() // FUNCTIONS TO EMIT EVENT INDICATING SOMEONE SENDS AN INTEREST IN YOUR JOB setTimeout(() => setManageInt({ msg: "" }), 3000); } catch (error) { throw new Error(error); } }; return { MarketDetail, ManageInterest, manageInt, marketMsg }; }; let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(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]; let cleanedText = details?.job_description ?.replace(/</g, "<") .replace(/>/g, ">") .replace(/"/g, '"') .replace(/&/g, "&"); return (

{details.offer_code}

{details?.title}

{/* 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) => (
{danger ? (

) : (

{name !== "Delivery Detail" ? ( <> {typeof content !== "object" ? content : null} {typeof content === "object" && ( <>


{content?.text} {thePrice}
)} ) : ( "" )}

)}
))}