active task header count down added

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,72 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import ModalCom from "../../Helpers/ModalCom";
+import { toast } from "react-toastify";
 import { Form, Formik } from "formik";
+import usersService from "../../../services/UsersService";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+
+const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [marketMsg, setMarketMsg] = useState({
+    loading: false,
+    data: {},
+    state: undefined,
+  });
+  const [textValue, setTextValue] = useState("");
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
+  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 = { yourmessage: textValue, ...reqData };
+
+          const marketMessage = await apiCall.MarketMessage(reqData);
+          const marketMessageRes = await marketMessage?.data;
+
+          if (marketMessageRes?.internal_return < 0) {
+            setMarketMsg({ loading: false });
+            toast.warn("Something wrong happened", {
+              autoClose: 2000,
+              hideProgressBar: true,
+            });
+            onClose();
+            return;
+          }
+
+          toast.success("Message sent", {
+            autoClose: 2500,
+            hideProgressBar: true,
+          });
+          // To manage the manage msg data
+          setMarketMsg({ data: marketMessageRes, state: true });
+        }
+      } catch (error) {
+        throw new Error(error);
+      } finally {
+        setTimeout(() => {
+          onClose();
+          setTextValue("");
+          setMarketMsg({ loading: false });
+        }, 2000);
+      }
+    },
+    [apiCall, details, onClose, setMarketMsg, textValue]
+  );
+
+  // let addedIntDate = marketInt?.added?.split(" ")[0];
+  let expireIntDate = marketInt?.expire?.split(" ")[0];
 
-const MarketPopUp = ({ details, onClose, situation }) => {
-  console.log("maker pop data", details);
   return (
     // className="job-popup"
     <ModalCom action={onClose} situation={situation}>
@@ -63,12 +126,22 @@ 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">
-                Send Message
+              <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>
@@ -86,13 +159,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>
+                  Interest: <b className="ml-1">{marketInt?.public_view}</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/components/MyActiveJobs/ActiveJobs.jsx

@@ -5,6 +5,8 @@ import { useNavigate } from "react-router-dom";
 import ActiveJobMessage from "./ActiveJobMessage";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 
+import CountDown from "../Helpers/CountDown";
+
 import usersService from "../../services/UsersService";
 
 function ActiveJobs(props) {
@@ -148,7 +150,7 @@ function ActiveJobs(props) {
   return (
     <Layout>
 
-        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start space-y-4 md:space-x-4 md:space-y-0">
+        <div className="py-[20px] bg-white px-4 rounded-2xl shadow-md md:flex justify-between items-start gap-8">
             {/* job title */}
             <div className="w-full md:w-8/12">
               <div className="w-full flex justify-start space-x-3 items-start">
@@ -172,20 +174,14 @@ function ActiveJobs(props) {
                 </h1>
               </div>
 
-              <div className="w-full my-4">
-                <div className="pb-2 w-full flex items-center">
-                  <p className="w-full lg:w-2/3 text-base text-slate-700 dark:text-black">
-                    {props.details?.contract && props.details.contract}
-                  </p>
-                  <p className="w-full lg:w-1/3 text-base text-sky-blue">
-                    {userDetails.firstname && userDetails.firstname}
-                  </p>
-                </div>
-                
-                <p className="text-base text-slate-700 dark:text-black">
-                  <span className="font-semibold">Description: </span>
-                  {props.details?.description && props.details.description}
+              <div className="w-full my-2">
+                <p className="w-full text-base text-right text-sky-blue">
+                  {userDetails.firstname && userDetails.firstname}
                 </p>
+                <div className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <p className="font-semibold text-black">Description: </p>
+                    <p className="p-2 border border-sky-blue">{props.details?.description && props.details.description}</p>
+                </div>
               </div>
             </div>
             {/* end of job title */}
@@ -193,19 +189,27 @@ function ActiveJobs(props) {
             {/* job details */}
             <div className="w-full md:w-4/12">
               <p className="text-base text-sky-blue">Delivery Detail</p>
-              <div className="mt-2">
-                  <p className="text-base text-slate-700 dark:text-black">
-                    <span className="font-semibold">Due: </span>
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[0]}
-                  </p>
-                  <p className="py-2 text-base text-slate-700 dark:text-black">
-                    {props.details?.delivery_date &&
-                      props.details.delivery_date.split(" ")[1]}
-                  </p>
-                  <p className="text-base text-slate-700 dark:text-black">
-                    {props.details?.timeline_days && props.details.timeline_days} day(s)
+              <div className="my-1 flex items-start gap-3">
+                <p className="font-semibold">Due: </p>
+                <div className="flex flex-col justify-between">
+                  <p className="text-base text-slate-700 dark:text-black tracking-wide">
+                    <CountDown lastDate={props.details.delivery_date} />
                   </p>
+                  <div className="text-base text-slate-700 dark:text-black tracking-wide flex gap-[5px]">
+                    <span>Hrs</span>
+                    <span>Min</span>
+                    <span>Sec</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">Duration: </span>
+                <span className="">{props.details?.timeline_days && props.details.timeline_days} day(s)</span>
+              </div>
+              <div className="my-1 text-base text-slate-700 dark:text-black tracking-wide flex items-center gap-3">
+                <span className="font-semibold text-black">No: </span>
+                <span className="">{props.details?.contract && props.details.contract}</span>
               </div>
             </div>
             {/* end of job details */}
@@ -293,24 +297,6 @@ function ActiveJobs(props) {
 
                 {/* Buttons Sections */}
                 <div className="py-2 sm:flex sm:justify-end sm:items-center">
-                  {/* <div className="w-full mb-3 sm:mb-0 sm:w-2/4">
-                    {tab == 'files' && 
-                      (
-                        <button
-                          onClick={()=>{console.log('working')}}
-                          type="button"
-                          className="btn-gradient text-base tracking-wide px-4 py-2 rounded-md flex justify-center items-center"
-                        >
-                          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill='white'>
-                            <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z"/>
-                          </svg>
-
-                          <span className="text-white">Upload Files</span>
-                        </button>
-                      )
-                    }
-                  </div> */}
-
                   <div className="w-full sm:w-2/4 flex justify-between items-center space-x-2">
                     <button
                         type="button"

src/services/UsersService.js

@@ -467,6 +467,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 = {