changed to three cards banner

.env

@@ -102,4 +102,7 @@ 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'
+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

.env.development

@@ -70,4 +70,7 @@ 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'
+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

.env.production

@@ -77,3 +77,6 @@ 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

src/assets/images/facebook.svg

@@ -1,4 +1,4 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
-<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
-</svg>
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5 0H2.5C1.12125 0 0 1.12125 0 2.5V17.5C0 18.8787 1.12125 20 2.5 20H17.5C18.8787 20 20 18.8787 20 17.5V2.5C20 1.12125 18.8787 0 17.5 0Z" fill="#1976D2"/>
+<path d="M16.875 10H13.75V7.5C13.75 6.81 14.31 6.875 15 6.875H16.25V3.75H13.75C11.6788 3.75 10 5.42875 10 7.5V10H7.5V13.125H10V20H13.75V13.125H15.625L16.875 10Z" fill="#FAFAFA"/>
+</svg>

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/Dashboards/AccountDashboard.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const AccountDashboard = ({className}) => {
+  return (
+    <div className={`w-full min-h-[400px] md:grid grid-cols-2 lg:p-8 p-4 justify-between items-center gap-2 rounded-2xl overflow-hidden ${
+        className || ""
+      }`}>
+      <div className="w-full h-full flex items-center justify-center text-5xl text-center">
+        Account Dashboard
+      </div>
+    </div>
+  )
+}
+
+export default AccountDashboard

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,75 @@
-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";
 
 export default function FamilyDash({ familyOffers, MyActiveJobList }) {
   // console.log("PROPS IN FAMILY DASH->", familyOffers?.result_list);
+  
+  const userApi = new usersService();
 
   const trending = MyActiveJobList;
+
+  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()
+  },[])
+
   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">
-          {[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'}`}>
-              <div >
+        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
+        <>
+          {!familyBannersList.loading && familyBannersList?.result?.result_list && Object.keys(familyBannersList?.result?.result_list).length > 0 &&
+            // 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?.result_list).map((item, index) => {
+                let content = familyBannersList?.result?.result_list[item]
+                return (
+                  <Link key={item} to='/' className={`p-2 h-40 rounded-lg shadow-sm flex justify-center items-center transition-all duration-300 hover:shadow-md ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                    <div className="h-full w-full">
+                      <img className="w-full h-1/2 object-cover rounded-lg" src={content.banner.image} alt='banner image' />
+                      <h1 className="my-2 text-lg font-medium tracking-wide">{content.banner.text}</h1>
+                      <p className="text-sm">{content.banner.description}</p>
+                    </div>
+                  </Link>
+                )
+              })}
+            </div>
+          }
+          
+          <div className="my-4">
+            <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">
+              {[1,2,3,4,5].map((item, index) => (
+                <Link key={index} to='/' className={`h-40 rounded-lg shadow-sm ${index%2==0 ? 'bg-red-200/50' : 'bg-sky-300/50'}`}>
+                  <div >
 
-              </div>
-            </Link>
-          ))}
-        </div>
-        
-        <div className="my-4">
-          <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">
-            {[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'}`}>
-                <div >
-
-                </div>
-              </Link>
-            ))}
+                  </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);
@@ -57,9 +62,11 @@ export default function FullAccountDash(props) {
   return (
     <>
       <div className="home-page-wrapper">
+        <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/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,6 @@ 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 { tableReload } from "../store/TableReloads";
 
 const AuthRoute = ({ redirectPath = "/login", children }) => {
   const apiCall = useMemo(() => new usersService(), []);
@@ -26,7 +25,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
   );
 
   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 +166,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 +183,7 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMyJobList();
-  }, [jobListTable]);
+  }, [jobListTable, isLogin.status]);
 
   useEffect(() => {
     const getMyWalletList = async () => {
@@ -201,6 +203,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,23 +216,26 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
       }
     };
     getMarketActiveJobList();
-  }, [apiCall, dispatch, jobListTable]);
+  }, [apiCall, dispatch, jobListTable, isLogin.status]);
 
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
-    apiCall
-      .getHeroJBanners()
-      .then((res) => {
-        if (res.data.internal_return < 0) {
-          return;
-        }
-        dispatch(commonHeadBanner(res.data));
-      })
-      .catch((error) => {
-        console.log("ERROR ", error);
-      });
-  }, []);
-  
+    if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){  // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY
+      return
+    }
+      apiCall
+        .getHeroJBanners()
+        .then((res) => {
+          if (res.data.internal_return < 0) {
+            return;
+          }
+          dispatch(commonHeadBanner(res.data));
+        })
+        .catch((error) => {
+          console.log("ERROR ", error);
+        });
+  }, [isLogin.status]);
+
   //FUNCTION TO GET COMMON HEAD DATA
   useEffect(() => {
     apiCall

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)