cache banner API using redux

.env

@@ -103,3 +103,9 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

.env.development

@@ -71,3 +71,9 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=1
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

.env.production

@@ -77,3 +77,9 @@ REACT_APP_NEW_LOGIN_LAYOUT=1
 #APP DOWNLOAD LINKS
 REACT_APP_ANDROID_APP='https://play.google.com/store/apps/details?id=com.wrenchboard.users'
 REACT_APP_APPLE_APP='https://itunes.apple.com/us/app/wrenchboard/id1435718367?ls=1&mt=8'
+
+# Displays the new family dashboard with boxes
+REACT_APP_SHOW_NEW_FAMILY_DASH=0
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=0

src/components/AuthPages/Login/index.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";

src/components/AuthPages/Login/index2.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useLayoutEffect, useState } from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import linkedInLogo from "../../../assets/images/Linkedin.png";
 import appleLogo from "../../../assets/images/apple-black.svg";
-import facebookLogo from "../../../assets/images/facebook-4.svg";
+import facebookLogo from "../../../assets/images/facebook.svg";
 import googleLogo from "../../../assets/images/google-logo.svg";
 import WrenchBoard from "../../../assets/images/wrenchboard-logo-text.png";
 import usersService from "../../../services/UsersService";

src/components/Cards/AvailableJobsCard.jsx

@@ -1,10 +1,11 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { PriceFormatter } from "../Helpers/PriceFormatter";
 import MarketPopUp from "../MarketPlace/PopUp/MarketPopUp";
 
 export default function AvailableJobsCard({
   className,
   datas,
+  key,
   hidden = false,
   contentDisplay,
   image_server,
@@ -19,10 +20,10 @@ export default function AvailableJobsCard({
     datas?.currency
   );
 
-  useEffect(() => {
+  // useEffect(() => {
-    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+  //   const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-    setImageUrl(imagePath);
+  //   setImageUrl(imagePath);
-  }, []);
+  // }, []);
 
   const image = localStorage.getItem("session_token")
     ? `${image_server}${localStorage.getItem("session_token")}/job/${
@@ -37,6 +38,7 @@ export default function AvailableJobsCard({
           className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
             className || ""
           }`}
+          key={key}
         >
           <div
             onClick={() => {
@@ -75,34 +77,16 @@ export default function AvailableJobsCard({
               <div
                 className="w-full h-[236px] p-6  rounded-xl overflow-hidden bg-center bg-cover bg-no-repeat"
                 style={{
-                  backgroundImage: `url('${imageUrl}')`,
+                  backgroundImage: `url('${image}')`,
                 }}
               >
-                <div className="flex justify-center">{datas.description}</div>
+                <div className="flex justify-center bg-slate-100 p-2 rounded-md">
+                  {datas.description}
+                </div>
               </div>
             </div>
             <div className="details-area">
-              <div className="product-two-options flex justify-between mb-5 relative">
+              <div className="product-two-options flex justify-between mb-5 relative"></div>
-                {/*      <div className="status">*/}
-                {/*          {datas.isActive && (*/}
-                {/*              <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
-                {/*  Active*/}
-                {/*</span>*/}
-                {/*          )}*/}
-                {/*      </div>*/}
-
-                {/*<div className=" review flex space-x-2">*/}
-                {/*    <button*/}
-                {/*        onClick={favoriteHandler}*/}
-                {/*        type="button"*/}
-                {/*        className={`w-7 h-7 bg-white    rounded-full flex justify-center items-center  ${*/}
-                {/*            addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
-                {/*        }`}*/}
-                {/*    >*/}
-                {/*        <Icons name="star" />*/}
-                {/*    </button>*/}
-                {/*</div>*/}
-              </div>
 
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">

src/components/Dashboards/AccountDashboard.jsx

@@ -0,0 +1,83 @@
+import React from "react";
+
+const AccountDashboard = ({ className }) => {
+  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 h-[300px] md:grid grid-cols-3 items-center justify-center gap-2">
+        <TopBanner />
+        <TopBanner />
+        <TopBanner />
+      </div>
+      <div className="w-full h-[150px] md:grid grid-cols-2 items-center justify-center gap-4">
+        <LowerBanner />
+        <LowerBanner />
+      </div>
+    </div>
+  );
+};
+
+export default AccountDashboard;
+
+const TopBanner = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col shadow-md rounded-xl">
+      <div className="h-[12rem] rounded-t-xl">
+        <img
+          src={Image}
+          alt="banner-img"
+          className="w-full h-full rounded-t-xl"
+        />
+      </div>
+      <div className="h-[7rem] rounded-b-xl bg-white">
+        <div className="border-b border-slate-300 px-2 py-1 h-[5.4rem]">
+          <h3 className="font-bold text-lg">Banner Title</h3>
+          <p>Banner description text will come follow</p>
+        </div>
+        <div className="flex justify-between w-full px-2 items-center">
+          <span className="text-slate-300 font-semibold">follow up text</span>
+          <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 = () => {
+  let Image = require(`../../assets/images/offer.jpg`);
+  return (
+    <div className="flex flex-col bg-white shadow-md h-full rounded-xl">
+      <div className="w-full flex justify-between border-b border-slate-300 p-2">
+        <div className="h-[130px] flex justify-between items-center">
+          <div className="px-2">
+            <h3 className="text-lg font-bold">Banner Title</h3>
+            <p className="text-sm">Banner description text will come follow</p>
+          </div>
+        </div>
+        <div className="w-[150px] h-[100px]">
+          <img
+            src={Image}
+            alt="banner-img"
+            className="w-full h-full rounded-xl"
+          />
+        </div>
+      </div>
+      <div className="flex justify-between w-full px-2 items-center">
+        <span className="text-slate-300 font-semibold">follow up text</span>
+        <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>
+  );
+};

src/components/Dashboards/index.js

@@ -2,10 +2,12 @@ import FamilyParentDashboard from "./FamilyParentDashboard";
 import HomeDashboard from "./HomeDashboard";
 import JobOwnerDashboard from "./JobOwnerDashboard";
 import WorkerDashboard from "./WorkerDashboard";
+import AccountDashboard from "./AccountDashboard";
 
 export {
   FamilyParentDashboard,
   HomeDashboard,
   JobOwnerDashboard,
   WorkerDashboard,
+  AccountDashboard
 };

src/components/Home/FamilyDash.jsx

@@ -1,40 +1,128 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import usersService from "../../services/UsersService";
 import ParentWaiting from "../MyOffers/ParentWaiting";
 import MyOffersFamilyTable from "../MyTasks/MyOffersFamilyTable";
 import FamilyActiveLSlde from "./FamilyActiveLSlde";
-import { Link } from "react-router-dom";
+import { useDispatch, useSelector } from "react-redux";
+import { tableReload } from "../../store/TableReloads";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
 
+  const dispatch = useDispatch();
+  
+  const userApi = new usersService();
+
   const trending = MyActiveJobList;
+  
+  const { familyBannersList } = useSelector((state) => state.familyBannersList);
+
+  let [reloadBanner, setReloadBanner] = useState(0)
+
+  // DO NOT UNCOMMENT THE CODE BELOW
+  
+  // let [familyBannersList, setFamilyBannersList] = useState({loading:false, result:{}})
+  // const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+  //   setFamilyBannersList({loading:true, result:[]});
+  //   try {
+  //     const res = await userApi.getFamilyBannersList();
+  //     setFamilyBannersList({loading:false, result:res.data});
+  //     console.log('TEST RESPONSE', res.data)
+  //   } catch (error) {
+  //     setFamilyBannersList({loading:false, result:[]});
+  //     console.log("Error getting tasks");
+  //   }
+  // };
+
+  // useEffect(()=>{
+  //   getFamilyBanners()
+  // },[])
+
+  useEffect(()=>{
+    if(reloadBanner >= 2){
+      dispatch(tableReload({ type: "FAMILYBANNERSLIST" })); // RELOAD FAMILY BANNERS LIST EVERY 10 MINS
+      setReloadBanner(0)
+    }
+    const timer = setInterval(()=>{
+      setReloadBanner(prev => prev+1)
+    },300000)
+
+    return ()=>{
+      clearInterval(timer)
+    }
+  },[reloadBanner])
+
   return (
     <div>
       <div className="home-page-wrapper">
         {/* <CommonHead commonHeadData={props.commonHeadData} /> */}
 
-        <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
+        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
-          {[1,2,3,4,5].map((item, index) => (
+        <>
-            <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+          {familyBannersList?.result_list && Object.keys(familyBannersList?.result_list).length > 0 &&
-              <div >
+            // Loop for Family Banners
+            <div className="w-full mb-4 grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
+              {Object.keys(familyBannersList?.result_list).map((item, index) => {
+                let content = familyBannersList?.result_list[item]
+                let action = item == 'recommend' ? 'familymarket' : 'mytask'
+                return (
+                  <Link key={item} to={`/${action}`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
+                    <div className="h-full w-full">
+                      <img className="w-full h-1/2 object-cover rounded-t-lg" src={content.banner.image} alt='banner image' />
+                      <div className="px-2 py-1">
+                        <h1 className="text-lg text-[#083e21] dark:text-white font-normal tracking-wide">{content.banner.text}</h1>
+                        <p className="text-sm text-black dark:text-white">{content.banner.description}</p>
+                      </div>
+                      {/* Horizontal Line */}
+                      <div className="w-full h-[1px] bg-slate-300"></div>
 
-              </div>
+                      <div className="px-2 py-1 flex justify-between items-center">
-            </Link>
+                        <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-          ))}
+                        {/* Dots */}
-        </div>
+                        <div className="flex justify-center gap-1">
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                          <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                        </div>
+                      </div>
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          }
           
-        <div className="my-4">
+          <div className="my-4">
-          <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
+            <h1 className="my-4 text-26 font-bold text-dark-gray dark:text-white tracking-wide">Resources</h1>
-          <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
+            <div className="w-full grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4">
-            {[1,2,3,4,5].map((item, index) => (
+              {[1,2,3,4,5].map((item, index) => (
-              <Link to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                  <Link key={item} to={`/`} className={`h-44 rounded-lg bg-white dark:bg-dark-white shadow-md flex justify-center items-center transition-all duration-300 hover:shadow-sm`}>
-                <div >
+                  <div className="h-full w-full">
+                    <img className="w-full h-1/2 object-cover rounded-t-lg" src={''} alt='banner image' />
+                    <div className="px-2 py-1">
+                      <h1 className="text-lg text-[#083e21] dark:text-white font-medium tracking-wide">{'Heading'}</h1>
+                      <p className="text-sm text-black dark:text-white">{'Description'}</p>
+                    </div>
+                    {/* Horizontal Line */}
+                    <div className="w-full h-[1px] bg-slate-300"></div>
 
-                </div>
+                    <div className="px-2 py-1 flex justify-between items-center">
-              </Link>
+                      <span className="text-slate-400 dark:text-slate-200 text-sm">6w ago</span>
-            ))}
+                      {/* Dots */}
+                      <div className="flex justify-center gap-1">
+                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                        <div className="w-1 h-1 bg-slate-400 rounded-full"></div>
+                      </div>
+                    </div>
+                  </div>
+                </Link>
+              ))}
+            </div>
           </div>
-        </div>
+        </>
+        }
 
         {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable

src/components/Home/FullAccountDash.jsx

@@ -1,10 +1,15 @@
 import { useSelector } from "react-redux";
+import {
+  AccountDashboard,
+  FamilyParentDashboard,
+  HomeDashboard,
+  JobOwnerDashboard,
+  WorkerDashboard,
+} from "../Dashboards";
 import MyJobTable from "../MyTasks/MyJobTable";
 import MyOffersTable from "../MyTasks/MyOffersTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
-import Hero from "./Hero";
 import HomeActivities from "./HomeActivities";
-import { FamilyParentDashboard, HomeDashboard, JobOwnerDashboard, WorkerDashboard } from "../Dashboards";
 
 export default function FullAccountDash(props) {
   // console.log("PROPS IN HOME->", props);
@@ -54,12 +59,18 @@ export default function FullAccountDash(props) {
     }
   };
 
+  console.log(process.env.REACT_APP_SHOW_ACCOUNT_DASH)
+
   return (
     <>
       <div className="home-page-wrapper">
+        {process.env.REACT_APP_SHOW_ACCOUNT_DASH == "1" && (
+          <AccountDashboard className="mb-4" />
+        )}
         {renderDashboard()}
 
-        {props?.dashTypes !== "undefined" && props.offersList?.data?.result_list?.length ? (
+        {props?.dashTypes !== "undefined" &&
+        props.offersList?.data?.result_list?.length ? (
           <MyOffersTable
             MyActiveOffersList={props.offersList?.data}
             className="mb-10"

src/components/MarketPlace/MainSection.jsx

@@ -112,7 +112,7 @@ export default function MainSection({
                 <AvailableJobsCard
                   contentDisplay={contentDisplay}
                   image_server={image_server}
-                  key={datas.id}
+                  key={datas.job_uid}
                   datas={datas}
                 />
               )}

src/components/Partials/MobileSideBar.jsx

@@ -89,7 +89,7 @@ export default function MobileSidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title="Dashboard"
+                title= {userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"

src/components/Partials/Sidebar.jsx

@@ -110,7 +110,7 @@ export default function Sidebar({
             <ul className="flex flex-col space-y-6">
               {/* Using mini component reduces the bulk amount of html */}
               <ListItem
-                title="Dashboard"
+                title={userDetails?.account_type == "FULL" ? "Dashboard" : "Home"}
                 route="/"
                 sidebar={sidebar}
                 iconName="new-dashboard"

src/lib/apiConst.js

@@ -132,6 +132,7 @@ export const apiConst = {
 
     WRENCHBOARD_ACCOUNT_HOMEBANNERS:   11200,
     WRENCHBOARD_ACCOUNT_PLAYGROUND:    11201,
+    WRENCHBOARD_ACCOUNT_FAMILY_BANNERS: 22005,
 
     WRENCHBOARD_ACCOUNT_RECENTS:       11202,
     WRENCHBOARD_ACCOUNT_NOTIFICATIONS: 11205,

src/middleware/AuthRoute.jsx

@@ -2,6 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { Navigate, Outlet, useNavigate } from "react-router-dom";
 import LoadingSpinner from "../components/Spinners/LoadingSpinner";
+import { formattedDate } from "../lib";
 import usersService from "../services/UsersService";
 import { commonHeadBanner } from "../store/CommonHeadBanner";
 import { recentActivitiesData } from "../store/RecentActivitiesData";
@@ -10,8 +11,7 @@ import { updateJobs } from "../store/jobLists";
 import { updateNotifications } from "../store/notifications";
 import { updateUserJobList } from "../store/userJobList";
 import { updateWalletDetails } from "../store/walletDetails";
-import { formattedDate } from "../lib";
+import { familyBannersList } from "../store/FamilyBannerList";
-import { tableReload } from "../store/TableReloads";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -21,12 +21,12 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   const [loadProfileDetails, setLoadProfileDetails] = useState([]);
   const navigate = useNavigate();
 
-  const { jobListTable, walletTable } = useSelector(
+  const { jobListTable, walletTable, familyBannersListTable } = useSelector(
     (state) => state.tableReload
   );
 
   const {
-    userDetails: { username, uid, session},
+    userDetails: { username, uid, session, account_type },
   } = useSelector((state) => state?.userDetails); // CHECKS IF USER Details are avaliable, to determine if user is active
 
   let loggedIn = username && session && uid ? true : false; // variable to determine if user is logged in
@@ -167,6 +167,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, []);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     const getMyJobList = async () => {
       dispatch(updateUserJobList({ loading: true, data: [] }));
       try {
@@ -181,7 +184,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyJobList();
-  }, [jobListTable]);
+  }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
     const getMyWalletList = async () => {
@@ -201,6 +204,9 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   }, [walletTable]);
 
   useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
     // Getting market data
     const getMarketActiveJobList = async () => {
       try {
@@ -211,22 +217,25 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable]);
+  }, [apiCall, dispatch, jobListTable, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
-    apiCall
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
-      .getHeroJBanners()
+      return
-      .then((res) => {
+    }
-        if (res.data.internal_return < 0) {
+      apiCall
-          return;
+        .getHeroJBanners()
-        }
+        .then((res) => {
-        dispatch(commonHeadBanner(res.data));
+          if (res.data.internal_return < 0) {
-      })
+            return;
-      .catch((error) => {
+          }
-        console.log("ERROR ", error);
+          dispatch(commonHeadBanner(res.data));
-      });
+        })
-  }, []);
+        .catch((error) => {
+          console.log("ERROR ", error);
+        });
+  }, [isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
@@ -244,6 +253,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       });
   }, []);
 
+
+  //FUNCTION TO GET FAMILY BANNERS
+  useEffect(() => {
+    if((!loggedIn && !isLogin.status) || account_type == 'FULL'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FULL
+      return
+    }
+    const getFamilyBanners = async () => { // FUNCTION TO GET FAMILY BANNERS
+      // setFamilyBannersList({loading:true, result:[]});
+      try {
+        const res = await apiCall.getFamilyBannersList();
+        dispatch(familyBannersList(res.data))
+      } catch (error) {
+        console.log("Error getting tasks");
+      }
+    };
+    getFamilyBanners()
+  }, [isLogin.status, familyBannersListTable]);
+
   // useEffect(() => {
   //   apiCall
   //     .getHeroJBanners()

src/services/UsersService.js

@@ -1249,6 +1249,19 @@ class usersService {
     };
     return this.postAuxEnd("/familyrelinvite", postData);
   }
+  
+  // API FUNCTION TO FAMILY BANNERS
+  getFamilyBannersList() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: apiConst.WRENCHBOARD_ACCOUNT_FAMILY_BANNERS,
+      limit: 20,
+      offset: 1
+    };
+    return this.postAuxEnd("/familybanners", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/store/FamilyBannerList.js

@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+    familyBannersList: {}
+};
+
+export const familyBannersListSlice = createSlice({
+  name: "familyBannersList",
+  initialState,
+  reducers: {
+    familyBannersList: (state,action) => {
+      state.familyBannersList = {...action.payload}
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { familyBannersList } = familyBannersListSlice.actions;
+
+export default familyBannersListSlice.reducer;

src/store/TableReloads.js

@@ -8,6 +8,7 @@ const initialState = {
   couponTable: false,
   walletTable: false,
   uploadsTable: false,
+  familyBannersListTable: false,
 };
 
 export const tableReloadSlice = createSlice({
@@ -37,6 +38,9 @@ export const tableReloadSlice = createSlice({
         case "UPLOADSTABLE":
           state.uploadsTable = !state.uploadsTable;
           return;
+        case "FAMILYBANNERSLIST":
+          state.familyBannersListTable = !state.familyBannersListTable;
+          return;
         default:
           return state;
       }

src/store/store.js

@@ -8,6 +8,7 @@ import jobReducer from "./jobLists";
 import notificationsReducer from "./notifications";
 import userJobListReducer from "./userJobList";
 import walletDetails from "./walletDetails";
+import familyBannerListReducer from "./FamilyBannerList"
 
 export default configureStore({
   reducer: {
@@ -18,6 +19,7 @@ export default configureStore({
     userJobList: userJobListReducer,
     commonHeadBanner: commonHeadBannerReducer,
     notifications: notificationsReducer,
-    walletDetails: walletDetails
+    walletDetails: walletDetails,
+    familyBannersList: familyBannerListReducer
   },
 });