offer list flat banner bug fixed

src/components/Contexts/SocketIOContext.js

@@ -85,6 +85,7 @@ export default function SocketIOContextProvider({children}) {
             }
             console.log('data', data)
         });
+        // dispatch(tableReload({ type: "HOMEBANNERS" })); // RELOADS HOME BANNERS
 
     }, [socket]);
 

src/components/Dashboards/AccountDashboard.jsx

@@ -31,8 +31,8 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
         }`}
       >
 
+        {/* for normal banner section */}
         <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">
-
           {/* OFFER LIST DISPLAY */}
           <>
             {(offersList && offersList?.length > 0) &&
@@ -46,7 +46,9 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
                 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} />
+                    {index < 3 &&
+                      <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    }
                   </div>
                 )
             })}
@@ -71,7 +73,31 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
             );
           })}
         </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">
+
+
+        {/* for flat banner section */}
+        <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">    
+          {/* 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}`
+                if(index >= 3) {
+                    return 
+                    (<div key={item.id}>
+                        <NewOfferCardFlat datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
+                    </div>)
+                }else{
+                  null
+                }
+            })}
+          </>
           {getLowerBanner?.map((props, idx) => {
             let image = getImage(props);
 
@@ -160,9 +186,16 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
         <div
           className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
           style={{
-            background: `url(${image}) center / contain no-repeat`,
+            // background: `url(${image}) center / contain no-repeat`,
           }}
         >
+          {/* <img src={image} className='' /> */}
+          <div
+          className="thumbnail w-full h-full rounded-xl overflow-hidden"
+          style={{
+            background: `url(${image}) center / contain no-repeat`,
+          }}
+        ></div>
           {hidden && <div className="flex justify-center"></div>}
         </div>
         }
@@ -172,9 +205,6 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
           <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"
@@ -205,6 +235,62 @@ const NewOfferCard = ({ datas, hidden = false, price, setOfferPopout, image }) =
   );
 };
 
+const NewOfferCardFlat = ({ 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="w-full xxs:flex justify-between items-center border-b border-slate-300 p-2">
+        <div className="min-h-[130px] sm:min-h-[100px] flex justify-between items-center">
+          <div className="px-2 flex flex-col gap-2 dark:text-white">
+            <h1 className="font-bold text-lg line-clamp-1 text-center">
+              {datas?.title}
+            </h1>
+            <div className="card-buttons flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={() =>
+                  setOfferPopout({ show: true, data: { ...datas, image } })
+                }
+                className="btn-shine w-28 h-[40px] text-white rounded-full text-sm bg-pink flex justify-center items-center"
+              >
+                Start Now
+              </button>
+            </div>
+          </div>
+        </div>
+        <div className='w-[150px] h-[100px]'>
+          {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>
+      <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>
+  );
+};
+
 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/jobPopout/OfferJobPopout.jsx

@@ -78,6 +78,7 @@ function OfferJobPopout({ details, onClose, situation }) {
         setTimeout(() => {
           onClose();
           dispatch(tableReload({ type: "MYTASKTABLE" }));
+          dispatch(tableReload({ type: "HOMEBANNERS" }));
           navigate("/mytask", { replace: true });
           setRequestStatus({
             loading: false,

src/middleware/AuthRoute.jsx

@@ -27,7 +27,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, marketTableList, walletTable, familyBannersListTable } = useSelector(
+  const { jobListTable, marketTableList, walletTable, familyBannersListTable, homeBanners } = useSelector(
     (state) => state.tableReload
   );
 
@@ -247,7 +247,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
         .catch((error) => {
           console.log("ERROR ", error);
         });
-  }, [isLogin.status]);
+  }, [isLogin.status, homeBanners]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   // useEffect(() => {

src/store/TableReloads.js

@@ -14,6 +14,7 @@ const initialState = {
   familyOfferList: false,
   parentFamilyTaskList: false,
   offerInterestListReload: false,
+  homeBanners: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -61,6 +62,9 @@ export const tableReloadSlice = createSlice({
         case "OFFERINTERESTLISTRELOAD": // to reload offer interest list of owner when a worker sends interest in a job
           state.offerInterestListReload = !state.offerInterestListReload;
           return;
+        case "HOMEBANNERS": // to reload offer interest list of owner when a worker sends interest in a job
+          state.homeBanners = !state.homeBanners;
+          return;
         default:
           return state;
       }

src/views/HomePages.jsx

@@ -1,15 +1,23 @@
+import {useState, useEffect} from 'react'
 import { useSelector } from "react-redux";
 import Home from "../components/Home";
 
 export default function HomePages() {
   const { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
 
-  const bannerOptions = {
-    bannerList: commonHeadBanner?.result_list,
-    dashTypes: commonHeadBanner?.home_dash_type,
-    offersList: commonHeadBanner?.offers_list,
-    imageServer: commonHeadBanner?.session_image_server
-  };
+  const [bannerOptions, setBannerOptions] = useState({})
+
+
+
+  useEffect(()=>{
+    const bannerOptions = {
+      bannerList: commonHeadBanner?.result_list,
+      dashTypes: commonHeadBanner?.home_dash_type,
+      offersList: commonHeadBanner?.offers_list,
+      imageServer: commonHeadBanner?.session_image_server
+    };
+    setBannerOptions(bannerOptions)
+  },[commonHeadBanner])
 
   return (
     <>