.

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}
-                  // onChange={handleInputChange}
+                  value={textValue}
+                  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 */}