.

src/components/Cards/AvailableJobsCard.jsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Link, useNavigate,  } from "react-router-dom";
 import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
 import Icons from "../Helpers/Icons";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
+import usersService from "../../services/UsersService";
 
 export default function AvailableJobsCard({
   className,
@@ -13,8 +14,11 @@ export default function AvailableJobsCard({
   //debugger;
   const [addFavorite, setValue] = useState(datas.whishlisted);
   const [marketPopUp, setMarketPopUp] = useState({ show: false, data: {} });
+  const [manageInt, setManageInt] = useState(null)
 
   const navigate = useNavigate();
+  const apiCall = useMemo(() => new usersService(), []);
+
 
   const favoriteHandler = () => {
     if (!addFavorite) {
@@ -26,11 +30,26 @@ export default function AvailableJobsCard({
     }
   };
 
+  const marketInterestData = useCallback(async() => {
+    let { offer_code } = datas;
+    let reqData = { offer_code };
+
+    try {
+      const manageInt = await apiCall.MarketInterest(reqData);
+      const manageIntRes = await manageInt?.data;
+      setManageInt(manageIntRes)
+    } catch (error) {
+      throw new Error(error)
+    }
+
+  }, [])
+
   useEffect(() => {
     if (!datas) {
       navigate("/market", { replace: true });
     }
-  }, [])
+    marketInterestData()
+  }, [marketInterestData, datas])
   return (
     <>
       <div
@@ -135,6 +154,7 @@ export default function AvailableJobsCard({
             setMarketPopUp({ show: false, data: {} });
           }}
           situation={marketPopUp.show}
+          marketInt={manageInt}
         />
       )}
     </>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,9 +1,51 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
 import { Form, Formik } from "formik";
+import usersService from "../../../services/UsersService";
 
-const MarketPopUp = ({ details, onClose, situation }) => {
+const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [marketMsg, setMarketMsg] = useState({ loading: false, data: {} });
+  const [textValue, setTextValue] = useState("");
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
   console.log("maker pop data", details);
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const marketCalls = useCallback(async (e) => {
+    let nameOfCall = e?.target?.name;
+    let { offer_code } = details;
+    let reqData = { offer_code };
+
+    try {
+      if (nameOfCall === "market-message") {
+        // To manage the manage msg data
+        setMarketMsg({ loading: true });
+        reqData = { your_message: textValue, ...reqData };
+
+        const marketMessage = await apiCall.MarketMessage(reqData);
+        const marketMessageRes = await marketMessage?.data;
+
+        // To manage the manage msg data
+        setMarketMsg({ loading: false, data: marketMessageRes });
+
+        setTimeout(() => {
+          onClose();
+        }, 3500);
+      }
+    } catch (error) {
+      throw new Error(error);
+    }
+  });
+
+  useEffect(() => {
+    marketCalls();
+  }, []);
+
+  let addedIntDate = marketInt?.added?.split(" ")[0];
+  let expireIntDate = marketInt?.expire?.split(" ")[0];
+
   return (
     // className="job-popup"
     <ModalCom action={onClose} situation={situation}>
@@ -63,11 +105,15 @@ const MarketPopUp = ({ details, onClose, situation }) => {
                   rows="5"
                   style={{ resize: "none" }}
                   placeholder="Enter message here ..."
-                  // value={textArea}
+                  value={textValue}
-                  // onChange={handleInputChange}
+                  onChange={handleInputChange}
                 />
               </div>
-              <button className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white">
+              <button
+                className="self-end w-[150px] h-[52px] rounded-md text-base bg-yellow-500 text-white"
+                name="market-message"
+                onClick={marketCalls}
+              >
                 Send Message
               </button>
             </div>
@@ -86,13 +132,13 @@ const MarketPopUp = ({ details, onClose, situation }) => {
                   <span>Interest</span>
                   <span>Request</span>
                 </button>
-                <p>Error - You can not accept your job</p>
+                <p>Error - {marketInt?.status}</p>
                 <p className="mt-2 flex items-center">
                   Interest: <b className="ml-1">0</b>
                 </p>
                 <hr />
               </div>
-              <p className="my-10">Expire: {details.expire}</p>
+              <p className="my-10">Expire: {expireIntDate}</p>
             </div>
           </div>
           {/* END OF ACTION SECTION */}

src/services/UsersService.js

@@ -466,6 +466,31 @@ class usersService {
     return this.postAuxEnd("/accounttypes", postData);
   }
 
+  // Manage Interest
+  MarketInterest(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      msg_type: 'JOB',
+      action: 13033,
+      ...reqData
+    };
+    return this.postAuxEnd("/marketinterest", postData);
+  }
+
+  MarketMessage(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      msg_type: 'JOB',
+      action: 13036,
+      ...reqData
+    };
+    return this.postAuxEnd("/marketmessage", postData);
+  }
+
   // END POINT TO ACCEPT TERMS AND AGREEMENT
   jobManagerAgree() {
     var postData = {