dashdata api removed

src/components/Dashboards/AccountDashboard.jsx

@@ -1,10 +1,19 @@
-import React from "react";
+import React, { Suspense, lazy, useState } from "react";
 import { Link } from "react-router-dom";
+import VideoElement from '../../components/VideoCom/VideoElement'
+import OfferJobPopout from '../../components/jobPopout/OfferJobPopout'
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CountDown from '../Helpers/CountDown'
+
+const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => {
+
+  let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
+
+  let offersListLength = offersList?.length
 
-const AccountDashboard = ({ className, bannerList }) => {
   // getting the upper three banners for the home layout
-  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2);
-  const getLowerBanner = bannerList?.filter((value, idx) => idx > 2);
+  const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength);
+  const getLowerBanner = bannerList?.filter((value, idx) => !getUpperBanner?.map(item => item?.title)?.includes(value.title));
 
   let getImage = ({ banner_location, banner }) => {
     if (banner_location == "LOCAL") {
@@ -15,54 +24,89 @@ const AccountDashboard = ({ className, bannerList }) => {
   };
 
   return (
-    <div
-      className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
-        className || ""
-      }`}
-    >
-      <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
-        {getUpperBanner?.map((props, idx) => {
-          let image = getImage(props);
+    <>
+      <div
+        className={`w-full min-h-[450px] flex flex-col justify-between items-center gap-4 rounded-2xl overflow-hidden ${
+          className || ""
+        }`}
+      >
 
-          let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
-            props;
+        <div className="w-full grid xxs:grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 items-center justify-center gap-2 md:gap-4">
 
-          return (
-            <div key={idx}>
-              <TopBanner
-                btn={short_button_text}
-                image={image}
-                title={short_title}
-                desc={short_description}
-                link_path={card_type=='BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path}
-              />
-            </div>
-          );
-        })}
+          {/* OFFER LIST DISPLAY */}
+          <>
+            {(offersList && offersList?.length > 0) &&
+              offersList.map((item, index) => {
+                let thePrice = PriceFormatter(
+                  item?.price * 0.01,
+                  item?.currency_code,
+                  item?.currency
+                );
+              
+                let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
+                return (
+                  <div key={item.id}>
+                    <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                  </div>
+                )
+            })}
+          </>
+
+          {getUpperBanner?.map((props, idx) => {
+            let image = getImage(props);
+
+            let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
+              props;
+
+            return (
+              <div key={idx}>
+                <TopBanner
+                  btn={short_button_text}
+                  image={image}
+                  title={short_title}
+                  desc={short_description}
+                  link_path={card_type=='BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path}
+                />
+              </div>
+            );
+          })}
+        </div>
+        <div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
+          {getLowerBanner?.map((props, idx) => {
+            let image = getImage(props);
+
+            let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
+              props;
+
+            return (
+              <div key={idx}>
+                <LowerBanner
+                  btn={short_button_text}
+                  image={image}
+                  title={short_title}
+                  desc={short_description}
+                  link_path={link_path}
+                  card_type={card_type}
+                  blog_id={blog_id}
+                />
+              </div>
+            );
+          })}
+        </div>
       </div>
-      <div className="w-full grid-cols-1 md:grid-cols-2 2xl::grid-cols-3 grid items-center justify-center gap-2 md:gap-4">
-        {getLowerBanner?.map((props, idx) => {
-          let image = getImage(props);
 
-          let { short_title, short_description, short_button_text, link_path, card_type, blog_id } =
-            props;
-
-          return (
-            <div key={idx}>
-              <LowerBanner
-                btn={short_button_text}
-                image={image}
-                title={short_title}
-                desc={short_description}
-                link_path={link_path}
-                card_type={card_type}
-                blog_id={blog_id}
-              />
-            </div>
-          );
-        })}
-      </div>
-    </div>
+      {/* Offer Job Popout */}
+      {offerPopout.show && (
+        <OfferJobPopout
+          details={offerPopout.data}
+          onClose={() => {
+            setOfferPopout({ show: false, data: {} });
+          }}
+          situation={offerPopout.show}
+        />
+      )}
+      {/* End of Offer Job Popout */}
+    </>
   );
 };
 
@@ -103,6 +147,64 @@ const TopBanner = ({ image, title = "", desc = "", btn, link_path, key }) => {
   );
 };
 
+const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) => {
+  return (
+    <div className="flex flex-col shadow-md bg-red-50 dark:bg-dark-white rounded-xl dark:border-[#5356fb29] overflow-hidden">
+      <div className="h-[12rem] bg-transparent">
+        {/* thumbnail image/video */}
+        {datas.job_type == "MEDIA" ?
+        <Suspense fallback={<p>Loading...</p>}>
+          <VideoElement videoId={datas?.media_uid} />
+        </Suspense>
+        :
+        <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
+          style={{
+            background: `url(${image}) center / contain no-repeat`,
+          }}
+        >
+          {hidden && <div className="flex justify-center"></div>}
+        </div>
+        }
+      </div>
+      <div className="rounded-b-xl bg-transparent dark:bg-dark-transparent">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem] flex flex-col gap-2 dark:text-white">
+          <h1 className="font-bold text-lg line-clamp-1 text-center">
+            {datas?.title}
+          </h1>
+          {/* <Link to={link_path} className="text-sm">
+            {desc}
+          </Link> */}
+          <div className="card-buttons flex justify-center items-center space-x-2">
+            <button
+              type="button"
+              onClick={() =>
+                setOfferPopout({ show: true, data: { ...datas, price, image } })
+              }
+              className="btn-shine w-2/3 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+            >
+              Start Task
+            </button>
+          </div>
+        </div>
+        <div className="flex justify-between w-full p-1 items-center">
+          <div className="flex gap-1 items-center">
+            <p className="text-[12px] text-red-500 tracking-wide">Expires</p>
+            <p className="text-[12px] font-semibold tracking-wide text-dark-gray dark:text-white">
+              <CountDown lastDate={datas.expire} />
+            </p>
+          </div>
+          <button className="flex items-center justify-center gap-2">
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+            <div className="w-[4px] h-[4px] bg-slate-400 rounded-full"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const LowerBanner = ({ image, title = "", desc = "", btn, link_path, card_type, blog_id, key }) => {
   const newLinkPath = card_type == 'BLOG' ? `${link_path}?blog_id=${blog_id}` : link_path
 

src/components/Dashboards/FamilyParentDashboard.jsx

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function FamilyParentDashboard({
   className,
   bannerList,
-  nextDueTask,
 }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 

src/components/Dashboards/HomeDashboard.jsx

@@ -2,7 +2,7 @@ import React from "react";
 // import HomeSliders from "./HomeSliders";
 import { useSelector } from "react-redux";
 
-export default function HomeDashboard({ className, bannerList, nextDueTask }) {
+export default function HomeDashboard({ className, bannerList }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   let loginDate = userDetails?.last_login.split(" ")[0];

src/components/Dashboards/JobOwnerDashboard.jsx

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function JobOwnerDashboard({
   className,
   bannerList,
-  nextDueTask,
 }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 

src/components/Dashboards/WorkerDashboard.jsx

@@ -5,7 +5,6 @@ import { useSelector } from "react-redux";
 export default function WorkerDashboard({
   className,
   bannerList,
-  nextDueTask,
 }) {
   const { userDetails } = useSelector((state) => state?.userDetails);
 

src/components/Home/FullAccountDash.jsx

@@ -22,7 +22,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "FAMILY_PARENT_DASH":
@@ -31,7 +30,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "WORKER_HOME_DASH":
@@ -40,7 +38,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       case "JOBOWNER_HOME_DASH":
@@ -49,7 +46,6 @@ export default function FullAccountDash(props) {
             className="mb-4"
             data={userDetails}
             bannerList={props.bannerList}
-            nextDueTask={props.nextDueTask}
           />
         );
       default:
@@ -62,16 +58,19 @@ export default function FullAccountDash(props) {
       <div className="home-page-wrapper">
         {renderDashboard()}
         {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
-          <AccountDashboard className="mb-4" bannerList={props.bannerList} />
+          <AccountDashboard className="mb-4" bannerList={props.bannerList} offersList={props.offersList} imageServer={props.imageServer} />
         )}
 
-        {props?.dashTypes !== "undefined" &&
-        props.offersList?.data?.result_list?.length ? (
-          <MyOffersTable
-            MyActiveOffersList={props.offersList?.data}
-            className="mb-10"
-          />
-        ) : props.MyActiveJobList?.data?.length ? (
+        {
+        // props?.dashTypes !== "undefined" &&
+        // props.offersList?.data?.result_list?.length ? (
+        //   <MyOffersTable
+        //     MyActiveOffersList={props.offersList?.data}
+        //     className="mb-10"
+        //   />
+        // ) 
+        // : 
+        props.MyActiveJobList?.data?.length ? (
           <>
             <div className="w-full mb-5 flex justify-between items-center gap-1">
               <h1 className="text-26 font-bold   text-dark-gray dark:text-white">

src/components/Home/index.jsx

@@ -5,19 +5,16 @@ import usersService from "../../services/UsersService";
 import { useSelector } from "react-redux";
 import FamilyDash from "./FamilyDash";
 import FullAccountDash from "./FullAccountDash";
+import LoadingSpinner from '../../components/Spinners/LoadingSpinner'
 
 export default function Home(props) {
  // console.log("PROPS IN HOME->", props);
   const userApi = new usersService();
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
-  let [nextDueTask, setNextDueTask] = useState({});
-  const [MyOffersList, setMyOffersList] = useState({loading: true, data: []});
-
   const { userDetails } = useSelector((state) => state?.userDetails);
 
   const [MyActiveJobList, setMyActiveJobList] = useState({loading:true, data:[]}); // STATE TO HOLD ACTIVE/CURRENT TASKS
-  // const [MyActiveJobList, setMyActiveJobList] = useState([]); // STATE TO HOLD ACTIVE/CURRENT TASKS
 
   const getMyActiveJobList = async () => { // FUNCTION TO POPULATE ACTIVE/CURRENT TASK LIST
     try {
@@ -32,41 +29,41 @@ export default function Home(props) {
   };
 
   // FUNCTION TO GET DASH DATA TO DETERMINE CURRENT TASK DUE TIME
-  const getHomeDate = () => {
-    userApi
-      .getHomeDate()
-      .then((res) => {
-        if (res.status != 200 || res.internal_return < 0) {
-          return;
-        }
-        setNextDueTask(res.data);
-      })
-      .catch((error) => {
-        console.log(error);
-      });
-  };
+  // const getHomeDate = () => {
+  //   userApi
+  //     .getHomeDate()
+  //     .then((res) => {
+  //       if (res.status != 200 || res.internal_return < 0) {
+  //         return;
+  //       }
+  //       setNextDueTask(res.data);
+  //     })
+  //     .catch((error) => {
+  //       console.log(error);
+  //     });
+  // };
 
-  const getMyOffersList = async () => {
-    try {
-      const res = await userApi.getOffersList();
-      setMyOffersList({loading:false, data:res.data});
-    } catch (error) {
-      setMyOffersList({loading:false, data:[]});
-      console.log("Error getting offers", error);
-    }
-  };
+  // const getMyOffersList = async () => {
+  //   try {
+  //     const res = await userApi.getOffersList();
+  //     setMyOffersList({loading:false, data:res.data});
+  //   } catch (error) {
+  //     setMyOffersList({loading:false, data:[]});
+  //     console.log("Error getting offers", error);
+  //   }
+  // };
 
   useEffect(() => {
-    const fetchData = async () => {
-      await Promise.all([getHomeDate(), getMyOffersList(), getMyActiveJobList()]);
-    };
     if(userDetails?.account_type == 'FULL'){
-      fetchData();
+      getMyActiveJobList();
     }
   }, []);
 
   return (
     <Layout>
+      {Object.keys(commonHeadBanner).length < 1 ?
+      <LoadingSpinner height='h-48' size='16' />
+      :
       <div className="w-full">
         {userDetails && userDetails?.account_type == "FAMILY" ? (
           <FamilyDash
@@ -78,11 +75,12 @@ export default function Home(props) {
           />
         ) : userDetails && userDetails?.account_type == "FULL" ? (
           <FullAccountDash
-            nextDueTask={nextDueTask}
             bannerList={props.bannerList}
             dashTypes={props.dashTypes}
-            offersList={MyOffersList}
+            // offersList={MyOffersList}
             MyActiveJobList={MyActiveJobList}
+            offersList={props.offersList}
+            imageServer={props.imageServer}
           />
         ) : (
           <div>
@@ -90,6 +88,7 @@ export default function Home(props) {
           </div>
         )}
       </div>
+      }
     </Layout>
   );
 }

src/views/HomePages.jsx

@@ -7,6 +7,8 @@ export default function HomePages() {
   const bannerOptions = {
     bannerList: commonHeadBanner?.result_list,
     dashTypes: commonHeadBanner?.home_dash_type,
+    offersList: commonHeadBanner?.offers_list,
+    imageServer: commonHeadBanner?.session_image_server
   };
 
   return (