shows offerlist only when offer exist

src/components/MyTasks/MyOffersTable.jsx

@@ -51,9 +51,9 @@ export default function MyOffersTable({ className, MyActiveOffersList}) {
         // }
     };
 
-//    if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
+   if ( !MyActiveOffersList || MyActiveOffersList?.result_list?.length == 0 ){
-//        return(''); // want blank or no appear when no items
+       return(''); // want blank or no appear when no items
-//    }
+   }
 
     return (
         <>

src/components/jobPopout/PendingJobsPopout.jsx

@@ -1,12 +1,47 @@
-import React from 'react'
+import React, { useMemo, useState } from "react";
-import Detail from './popoutcomponent/Detail'
+import Detail from "./popoutcomponent/Detail";
-import ModalCom from '../Helpers/ModalCom'
+import ModalCom from "../Helpers/ModalCom";
+import usersService from "../../services/UsersService";
 
+function PendingJobsPopout({ details, onClose, situation }) {
+  const [pendingJobLoader, setPendingJobLoader] = useState(false)
+  const apiCall = useMemo(() => new usersService(), []);
   
-function PendingJobsPopout({details, onClose, situation}) {
+  const handlePendingJobsBtn = async ({ target: { name } }) => {
+    setPendingJobLoader(true)
+    let { job_uid, offer_code } = details;
+
+    let reqData;
+
+    let pendingData = { job_uid, offer_code };
+
+    if (name === "extend") {
+      try {
+        reqData = { ...pendingData };
+        let { data } = await apiCall.pendingJobExtend(reqData);
+        console.log("This is for extend", data);
+        setPendingJobLoader(false)
+      } catch (error) {
+        setPendingJobLoader(false)
+        throw new Error(error);
+      }
+    } else if (name === "offer") {
+      try {
+        reqData = { ...pendingData };
+        let { data } = await apiCall.pendingJobSendTome(reqData);
+        console.log("This is for offer", data);
+        setPendingJobLoader(false)
+      } catch (error) {
+        setPendingJobLoader(false)
+        throw new Error(error);
+      }
+    } else return;
+
+    onClose();
+  };
   return (
     <ModalCom action={onClose} situation={situation}>
-    <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 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] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
             Manage Pending Item
@@ -37,88 +72,114 @@ function PendingJobsPopout({details, onClose, situation}) {
             </svg>
           </button>
         </div>
-        <div className='md:flex bg-white rounded-lg shadow-lg'>
+        <div className="md:flex bg-white rounded-lg shadow-lg">
-          <div className='p-4 w-full md:w-3/4 md:border-r-2'>
+          <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>
+            <p className="text-base font-semibold text-slate-900 tracking-wide">
-            <div className='my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300'>
+              {details.title}
-              <span className='w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100'>!</span>
+            </p>
-              <div className=''>
+            <div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
-                <p className='text-sm'>This Job have been sent to public view</p>
+              <span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
-                <p className='text-sm text-slate-600'>This Job will expire</p>
+                !
+              </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'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Date Added' 
+                label="Date Added"
-                  value={details.offer_added || 'default'}
+                value={details.offer_added || "default"}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
+              <Detail label="Description" value={details.description} />
+            </div>
+
+            <div className="my-2 md:flex">
               <Detail
-                  label='Description' 
+                label="Offer Expire"
-                  value={details.description} 
+                value={
+                  details.expire &&
+                  `${details.expire.split(" ")[0]} ${
+                    details.expire.split(" ")[1].split(".")[0]
+                  }`
+                }
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Offer Expire' 
+                label="Price"
-                  value={details.expire && `${details.expire.split(' ')[0]} ${details.expire.split(' ')[1].split('.')[0]}`}
+                value={`${details.price * 0.01} ${details.currency}`}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Price' 
+                label="Duration"
-                  value={`${details.price*0.01} ${details.currency}`} 
+                value={`${details.timeline_days} day(s)`}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Duration' 
+                label="Detail"
-                  value={`${details.timeline_days} day(s)`} 
+                value={details.job_description || details.description}
               />
             </div>
 
-            <div className='my-2 md:flex'>
+            <div className="my-2 md:flex">
               <Detail
-                  label='Detail' 
+                label="Public Link"
-                  value={details.job_description || details.description} 
+                value="https://work.wrenchboard.com/plb/viewjob/218B4BWB83"
+                bg="bg-slate-200"
               />
             </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'>
+          <div className="p-4 w-full md:w-1/4 h-full">
-            <p className='mb-6 text-sm'>Actions</p>
+            <p className="mb-6 text-sm">Actions</p>
 
-            <div className='mb-3'>
+            <div className="mb-3">
-              <p className='px-2 py-1 text-sm bg-slate-100'>Job sent to public view</p>
+              <p className="px-2 py-1 text-sm bg-slate-100">
+                Job sent to public view
+              </p>
             </div>
 
-            <div className='my-3'>
+            <div className="my-3">
-              <button className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>Extend by a week</button>
+              <button
+                className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                onClick={handlePendingJobsBtn}
+                name="extend"
+              >
+                Extend by a week
+              </button>
             </div>
 
-            <div className='my-3'>
+            <div className="my-3">
-              <button className='px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white'>Send to me</button>
+              <button
+                className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                onClick={handlePendingJobsBtn}
+                name="offer"
+              >
+                Send to me
+              </button>
             </div>
 
-            <div className='mt-10 md:mt-32 md:flex md:justify-center'>
+            <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'>Cancel Offer</button>
+              <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>
@@ -134,9 +195,9 @@ function PendingJobsPopout({details, onClose, situation}) {
           </button>
         </div>
         {/* end of close button */}
-    </div>
+      </div>
-  </ModalCom>
+    </ModalCom>
-    )
+  );
 }
 
-export default PendingJobsPopout
+export default PendingJobsPopout;

src/services/UsersService.js

@@ -486,6 +486,30 @@ class usersService {
     return this.postAuxEnd("/jobmanagerupdatejob", postData);
   }
 
+  pendingJobExtend(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      extend_days: 7,
+      action: 13041,
+      ...reqData,
+    };
+    return this.postAuxEnd("/pendingjobextend", postData);
+  }
+
+  pendingJobSendTome(reqData) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      mode: 200,
+      action: 13042,
+      ...reqData,
+    };
+    return this.postAuxEnd("/pendingjobsendtome", postData);
+  }
+
   // FUNCTION TO GET ACTIVE JOB MESSAGE LIST
   activeJobMesList(reqData) {
     var postData = {