cache banner API using redux

.env

@@ -102,4 +102,10 @@ 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
+
+# Displays the account dashboard
+REACT_APP_SHOW_ACCOUNT_DASH=1

.env.development

@@ -70,4 +70,10 @@ 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
+
+# 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/App.jsx

@@ -1,22 +1,22 @@
-import Toaster from "./components/Helpers/Toaster";
-import Routers from "./Routers";
-import Default from "./components/Partials/Default";
 import { Navigate, useLocation } from "react-router-dom";
+import Routers from "./Routers";
+import Toaster from "./components/Helpers/Toaster";
+import Default from "./components/Partials/Default";
 
 function App() {
-    const {pathname} = useLocation()
-    return (
-        <Default>
-            <>
-            {pathname.startsWith('/@') ?
-                <Navigate to="/app" replace={true} />
-            :
-                <Routers />
-            }
-                <Toaster />
-            </>
-        </Default>
-    );
+  const { pathname } = useLocation();
+  return (
+    <Default>
+      <>
+        {pathname.startsWith("/@") ? (
+          <Navigate to="/app" replace={true} />
+        ) : (
+          <Routers />
+        )}
+        <Toaster />
+      </>
+    </Default>
+  );
 }
 
 export default App;

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/AuthPages/SignUp/index2.jsx

@@ -9,19 +9,21 @@ export default function SignUp() {
   // eslint-disable-next-line no-restricted-globals
   const queryParams = new URLSearchParams(location?.search);
   const country = queryParams.get("cnt")?.toUpperCase();
-  
-  const {pathname} = useLocation()
-  const currentPath = country ? `${pathname}?cnt=${country.toLowerCase()}`:pathname // Determines the new pathname is country query params exist
+
+  const { pathname } = useLocation();
+  const currentPath = country
+    ? `${pathname}?cnt=${country.toLowerCase()}`
+    : pathname; // Determines the new pathname is country query params exist
 
   const [signUpLoading, setSignUpLoading] = useState(false);
   const [checked, setValue] = useState(false);
   // for the catch error
   const [msgError, setMsgError] = useState("");
   const [showPassword, setShowPassword] = useState(false);
-  const [countries, setCountries] = useState({loading:true, data:[]});
+  const [countries, setCountries] = useState({ loading: true, data: [] });
 
   const [formData, setFormData] = useState({
-    country: country? country : "",
+    country: country ? country : "",
     first_name: "",
     last_name: "",
     email: "",
@@ -47,22 +49,23 @@ export default function SignUp() {
 
   // Get Country Api
   const getCountryList = useCallback(async () => {
-    
     try {
       const res = await userApi.getSignupCountryData();
       if (res.status === 200 && res.data.internal_return >= 0) {
         const { result_list } = await res.data;
-        if(country){ // IF LINK/PATHNAME HAS CNT QUERY VALUE
-          let cnt = result_list.filter(item => item.code == country) // test to see country passed in query param exist from list of countries supplied by API
-          if(!cnt.length){ // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
-            setFormData(prev => ({...prev, country: ''}))
-            return setCountries({loading: false, data: result_list});
+        if (country) {
+          // IF LINK/PATHNAME HAS CNT QUERY VALUE
+          let cnt = result_list.filter((item) => item.code == country); // test to see country passed in query param exist from list of countries supplied by API
+          if (!cnt.length) {
+            // IF CNT EMPTY, SET FORMDATA COUNTRY BACK TO EMPTY STRING: RE: THIS IS BCOS WE INITAIL SET COUNTRY VALUE IN FORMDATA, IF COUNTRY PARAM IS PRESENT IN LINK
+            setFormData((prev) => ({ ...prev, country: "" }));
+            return setCountries({ loading: false, data: result_list });
           }
-          return setCountries({loading: false, data: cnt});
+          return setCountries({ loading: false, data: cnt });
         }
-        setCountries({loading: false, data:result_list});
+        setCountries({ loading: false, data: result_list });
       } else if (res.data.result !== 100) {
-        setCountries({loading: false, data:[]});
+        setCountries({ loading: false, data: [] });
       }
     } catch (error) {
       throw new Error(error);
@@ -113,9 +116,7 @@ export default function SignUp() {
         if (res.status === 200) {
           const { data } = res;
           if (data && data.acc === "DULPICATE") {
-            setMsgError(
-              "Unable to use this username. Please try another username."
-            );
+            setMsgError("Duplicate username. Please try another email.");
             setSignUpLoading(false);
           }
           if (data && data.status === "1") {
@@ -124,6 +125,11 @@ export default function SignUp() {
               setSignUpLoading(false);
             }, 2000);
           }
+
+          if (data && data.status === "5") {
+            setMsgError("Something went wrong. Please try another email.");
+            setSignUpLoading(false);
+          }
         } else {
           setSignUpLoading(false);
           setMsgError("An error occurred");
@@ -187,7 +193,9 @@ export default function SignUp() {
                   name="country"
                   value={formData.country}
                   inputHandler={handleInputChange}
-                  disable={country && countries?.data?.length <= 1 ? true : false}
+                  disable={
+                    country && countries?.data?.length <= 1 ? true : false
+                  }
                 />
                 <div className="input-fl-name mb-4 sm:flex w-full sm:space-x-6 ">
                   <div className="input-item sm:w-1/2 w-full mb-4 sm:mb-0">
@@ -339,27 +347,40 @@ export default function SignUp() {
                 {/* APP DOWNLOAD STORE */}
                 <div className="w-full mt-4">
                   <div className="w-full flex justify-center items-center gap-4">
-                      <div className='w-28 lg:w-32'>
-                          <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank'  href={process.env.REACT_APP_APPLE_APP}>
-                              <i className="fa-brands fa-apple text-3xl"></i>
-                              <div className="flex flex-col">
-                                  <span className="text-[11px]">Available on the</span> 
-                                  <span className="text-[12px] lg:text-base">App Store</span>
-                              </div>
-                          </a>
-                      </div>
-                      <div className='w-28 lg:w-32'>
-                          <a className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300" target='_blank' href={process.env.REACT_APP_ANDROID_APP}>
-                              <i className="fa-brands fa-google-play text-2xl"></i>
-                              <div className="flex flex-col">
-                                  <span className="text-[11px]">Available on the</span>
-                                  <span className="text-[12px] lg:text-base">Google Play</span>
-                              </div>
-                          </a>
-                      </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        target="_blank"
+                        href={process.env.REACT_APP_APPLE_APP}
+                        rel="noreferrer"
+                      >
+                        <i className="fa-brands fa-apple text-3xl"></i>
+                        <div className="flex flex-col">
+                          <span className="text-[11px]">Available on the</span>
+                          <span className="text-[12px] lg:text-base">
+                            App Store
+                          </span>
+                        </div>
+                      </a>
                     </div>
+                    <div className="w-28 lg:w-32">
+                      <a
+                        className="px-1 py-1 lg:py-2 flex justify-center items-center gap-1 w-full rounded-md bg-black text-white hover:text-slate-500 hover:shadow-lg transition-all duration-300"
+                        target="_blank"
+                        href={process.env.REACT_APP_ANDROID_APP}
+                        rel="noreferrer"
+                      >
+                        <i className="fa-brands fa-google-play text-2xl"></i>
+                        <div className="flex flex-col">
+                          <span className="text-[11px]">Available on the</span>
+                          <span className="text-[12px] lg:text-base">
+                            Google Play
+                          </span>
+                        </div>
+                      </a>
+                    </div>
+                  </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -375,7 +396,7 @@ const SelectOption = ({
   inputHandler,
   value,
   data, // passing the data from parent
-  disable
+  disable,
 }) => {
   return (
     <div className="input-com mb-7">
@@ -389,39 +410,33 @@ const SelectOption = ({
       </div>
       <div>
         <select
-        disabled={disable}
+          disabled={disable}
           name={name}
           id={name}
           className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base focus-visible:border-transparent focus-visible:outline-0 focus-visible:ring-transparent "
           onChange={inputHandler}
           value={value}
         >
-          {data?.data?.length > 1 ?
+          {data?.data?.length > 1 ? (
             <>
-            <option value={""}>Select your Country</option>
-            {data?.data?.map((item) => (
-              <option value={item.code} key={item.uid}>
-                {item.country}
-              </option>
-            ))}
+              <option value={""}>Select your Country</option>
+              {data?.data?.map((item) => (
+                <option value={item.code} key={item.uid}>
+                  {item.country}
+                </option>
+              ))}
             </>
-            :
-            data?.data?.length == 1 ?
+          ) : data?.data?.length == 1 ? (
             data?.data?.map((item) => (
               <option value={item.code} key={item.uid}>
                 {item.country}
               </option>
             ))
-            :
-            data?.data?.length < 1 && data.loading ?
-            <option value=''>
-              Loading...
-            </option>
-            :
-            <option value=''>
-              No Country Found!
-            </option>
-          }
+          ) : data?.data?.length < 1 && data.loading ? (
+            <option value="">Loading...</option>
+          ) : (
+            <option value="">No Country Found!</option>
+          )}
         </select>
       </div>
     </div>

src/components/AuthPages/VerifyLink/index.jsx

@@ -51,8 +51,7 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
-
+            localStorage.setItem("uid", data?.uid);
 
             navigate("/", { replace: true });
             setLinkLoader(false);
@@ -80,19 +79,19 @@ export default function VerifyLink() {
   };
 
   // for verifying the incoming verification link and render the correct component
-  const verifyEmail = useCallback(async (code) => {
+  const verifyEmail = async (code) => {
     try {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
         if (
           data &&
-          data.internal_return >= 0 && 
-          data.status == 0 && 
-          data.pending_id != '' && 
-          data.pending_uid != '' && 
-          data.username != '' &&
+          data.internal_return >= 0 &&
+          data.status == 0 &&
+          data.pending_id != "" &&
+          data.pending_uid != "" &&
+          data.username != "" &&
           data.status_text === "Link Verified"
         ) {
           setPageLoader(false);
@@ -106,12 +105,13 @@ export default function VerifyLink() {
       setLinkSuccess(false);
       throw new Error(error);
     }
-  }, []);
+  };
 
   // delay verify requests by 10000ms
   const debouncedEmail = debounce(verifyEmail, 1000);
 
   useEffect(() => {
+    setEmail("")
     debouncedEmail(token);
   }, []);
 
@@ -171,53 +171,57 @@ const SuccessfulComponent = ({
   handleEmail,
   msgErr,
   loader,
-}) => (
-  <div className="input-area">
-    {/* INPUT */}
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={email}
-        inputHandler={handleEmail}
-        placeholder="support@mermsemr.com"
-        label="Email"
-        name="email"
-        type="email"
-        iconName="message"
-      />
-    </div>
-    <div className="mb-5">
-      <InputCom
-        fieldClass="px-6"
-        value={password}
-        inputHandler={handlePassword}
-        placeholder="● ● ● ● ● ●"
-        label="Password"
-        name="password"
-        type="password"
-        iconName="password"
-      />
-    </div>
-    {msgErr && (
-      <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
-        {msgErr}
+}) => {
+  return (
+    <div className="input-area">
+      {/* INPUT */}
+      <div className="mb-5">
+        <InputCom
+          fieldClass="px-6"
+          value={email}
+          inputHandler={handleEmail}
+          placeholder="support@mermsemr.com"
+          label="Email"
+          name="email"
+          type="email"
+          iconName="message"
+          autoComplete="off"
+        />
+      </div>
+      <div className="mb-5">
+        <InputCom
+          fieldClass="px-6"
+          value={password}
+          inputHandler={handlePassword}
+          placeholder="● ● ● ● ● ●"
+          label="Password"
+          name="password"
+          type="password"
+          iconName="password"
+          autoComplete="off"
+        />
+      </div>
+      {msgErr && (
+        <div className="relative p-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]">
+          {msgErr}
+        </div>
+      )}
+      <div className="signin-area mb-3.5">
+        <button
+          onClick={onSubmit}
+          type="button"
+          className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
+        >
+          {loader ? (
+            <div className="signup btn-loader"></div>
+          ) : (
+            <span>Continue</span>
+          )}
+        </button>
       </div>
-    )}
-    <div className="signin-area mb-3.5">
-      <button
-        onClick={onSubmit}
-        type="button"
-        className={`btn-login  rounded-[0.475rem] mb-6 text-xl text-white flex justify-center bg-[#4687ba] hover:bg-[#009ef7] transition-all duration-300 items-center text-[15px]`}
-      >
-        {loader ? (
-          <div className="signup btn-loader"></div>
-        ) : (
-          <span>Continue</span>
-        )}
-      </button>
     </div>
-  </div>
-);
+  );
+};
 
 const ErrorComponent = ({ onClick }) => (
   <div className="input-area">

src/components/AuthPages/VerifyLink/index2.jsx

@@ -51,8 +51,7 @@ export default function VerifyLink() {
             localStorage.setItem("member_id", `${data?.member_id}`);
             localStorage.setItem("session_token", `${data?.session}`);
             localStorage.setItem("session", `${data?.session}`);
-            localStorage.setItem("uid", data?.uid)
-
+            localStorage.setItem("uid", data?.uid);
 
             navigate("/", { replace: true });
             setLinkLoader(false);
@@ -85,16 +84,17 @@ export default function VerifyLink() {
       const verifyRes = await userApi.verifyEmail(code);
       if (verifyRes.status === 200) {
         let { data } = verifyRes;
-        console.log('TESTING VERIFY',data)
+        console.log("TESTING VERIFY", data);
         if (
           data &&
-          data.internal_return >= 0 && 
-          data.status == 0 && 
-          data.pending_id != '' && 
-          data.pending_uid != '' && 
-          data.username != '' &&
+          data.internal_return >= 0 &&
+          data.status == 0 &&
+          data.pending_id != "" &&
+          data.pending_uid != "" &&
+          data.username != "" &&
           data.status_text === "Link Verified"
         ) {
+          setEmail(data.username);
           setPageLoader(false);
         } else {
           setPageLoader(false);
@@ -184,6 +184,7 @@ const SuccessfulComponent = ({
         name="email"
         type="email"
         iconName="message"
+        autoComplete="off"
       />
     </div>
     <div className="mb-5">
@@ -196,6 +197,7 @@ const SuccessfulComponent = ({
         name="password"
         type="password"
         iconName="password"
+        autoComplete="off"
       />
     </div>
     {msgErr && (

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(() => {
-    const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
-    setImageUrl(imagePath);
-  }, []);
+  // useEffect(() => {
+  //   const imagePath = require(`../../assets/images/${datas.thumbnil}`); // Replace with your directory path for local images
+  //   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="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="product-two-options flex justify-between mb-5 relative"></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/Helpers/Inputs/InputCom/index.jsx

@@ -27,6 +27,7 @@ export default function InputCom({
   direction,
   tabIndex,
   error,
+  autoComplete="on"
 }) {
   const inputRef = useRef(null);
   // Entry Validation
@@ -107,6 +108,7 @@ export default function InputCom({
           readOnly={disable}
           onBlur={blurHandler}
           dir={direction}
+          autoComplete={autoComplete}
         />
         {iconName && (
           <div className="absolute right-6 bottom-3 z-10 flex gap-2">

src/components/Home/FamilyDash.jsx

@@ -1,16 +1,129 @@
-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 { 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} /> */}
+
+        {process.env.REACT_APP_SHOW_NEW_FAMILY_DASH == '1' &&
+        <>
+          {familyBannersList?.result_list && Object.keys(familyBannersList?.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_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 className="px-2 py-1 flex justify-between items-center">
+                        <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 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={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 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 className="px-2 py-1 flex justify-between items-center">
+                      <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>
+        </>
+        }
+
         {familyOffers?.result_list && familyOffers?.result_list.length > 0 && (
           <MyOffersFamilyTable
             familyOffers={familyOffers?.result_list}

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/MyWallet/Popup/AddFundDollars.jsx

@@ -66,6 +66,8 @@ const initialValues = {
 function AddFundDollars(props) {
   let MaxNoOfCards = process.env.REACT_APP_MAX_CREDIT_CARDS; // HOLDS THE VALUE OF THE MAX NUMBER OF CARDS USER CAN ADD
 
+  let [loadingState, setLoadingState] = useState(false)
+
   const apiCall = new usersService();
   let countryWallet = props.walletItem.country;
   const [selectedOption, setSelectedOption] = useState("previous");
@@ -162,10 +164,11 @@ function AddFundDollars(props) {
       }
     }
 
-    props.setConfirmCredit((prev) => ({
-      ...prev,
-      show: { awaitConfirm: { loader: true } },
-    }));
+    // props.setConfirmCredit((prev) => ({
+    //   ...prev,
+    //   show: { awaitConfirm: { loader: true } },
+    // }));
+    setLoadingState(true)
 
     // Extracting card_uid from the previous card details
     const paymentCardValue = prevCardDetails["payment-card"];
@@ -193,6 +196,18 @@ function AddFundDollars(props) {
       if (res.data.internal_return < 0) {
         props.setInputError("An Error Occurred");
         throw new Error("An Error Occurred");
+
+        // use commented code when you when to display pop for failed start credit API
+        // props.setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
+        setLoadingState(false)
+        return
       }
 
       const _response = res.data;
@@ -204,6 +219,7 @@ function AddFundDollars(props) {
       stateData = { ...stateData, ..._response };
 
       setTimeout(() => {
+        setLoadingState(false)
         props.setConfirmCredit({
           show: {
             awaitConfirm: { loader: false, state: true },
@@ -213,6 +229,7 @@ function AddFundDollars(props) {
         });
       }, 1500);
     } catch (error) {
+      setLoadingState(false)
       props.setInputError(error.message);
       setTimeout(() => props.setInputError(""), 5000);
       props.setConfirmCredit((prev) => ({
@@ -582,7 +599,7 @@ function AddFundDollars(props) {
                             type="submit"
                             className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                           >
-                            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+                            {loadingState ? (
                               <LoadingSpinner size="6" color="sky-blue" />
                             ) : (
                               <>
@@ -616,7 +633,7 @@ function AddFundDollars(props) {
             type="button"
             className="px-4 py-1 h-11 max-w-[115px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
           >
-            {props.confirmCredit?.show?.awaitConfirm?.loader ? (
+            {loadingState ? (
               <LoadingSpinner size="6" color="sky-blue" />
             ) : (
               <span className="text-white">Continue</span>

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -86,6 +86,16 @@ function AddFundPop({
         }));
         setInputError("An Error Occurred");
         setTimeout(() => setInputError(""), 5000);
+
+        // use commented code when you when to display pop for failed start credit API
+        // setConfirmCredit((prev) => ({
+        //   ...prev,
+        //   show: {
+        //     awaitConfirm: { loader: false, state: false },
+        //     acceptConfirm: { loader: false, state: true },
+        //   },
+        //   data: {internal_return: -1}
+        // }));
         return;
       }
 

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -70,7 +70,8 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                             }`}
                           </span>
                         </div>
-
+                        
+                        {data?.curr_balance &&
                         <div className="flex items-center gap-8">
                           <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                             Wallet Balance
@@ -79,6 +80,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                             {data?.curr_balance * 0.01}
                           </span>
                         </div>
+                        }
 
                         {isSuccess && (
                           <div className="flex items-center gap-8">

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -239,7 +239,8 @@ function ConfirmAddFund({
         setConfirmCredit((prev) => ({
           ...prev,
           show: {
-            acceptConfirm: { loader: false },
+            awaitConfirm: { loader: false, state: false },
+            acceptConfirm: { loader: false, state: true },
           },
         }));
         return;
@@ -261,7 +262,8 @@ function ConfirmAddFund({
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
         },
       }));
       console.log(error);
@@ -333,7 +335,8 @@ function ConfirmAddFund({
       setConfirmCredit((prev) => ({
         ...prev,
         show: {
-          acceptConfirm: { loader: false },
+          awaitConfirm: { loader: false, state: false },
+          acceptConfirm: { loader: false, state: true },
         },
       }));
       setTimeout(() => onClose, 10000);

src/components/MyWallet/Wallet.jsx

@@ -47,7 +47,7 @@ const WalletRoutes = () => {
         }
         setAllCountries((prev) => ({
           loading: false,
-          data: res.data.result_list,
+          data: res?.data?.result_list,
         }));
       })
       .catch((error) => {

src/components/Partials/Header.jsx

@@ -48,6 +48,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
   // 9308RDR122
 
+
   const handlerBalance = () => {
     setbalanceValue.toggle();
     if (notificationDropdown) {
@@ -238,9 +239,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               </div>
             </button>
             {/* balance */}
-            
+
             {/* My Page Button */}
-            <PageButton />
+            {userDetails.account_type === "FULL" ? <PageButton /> : null}
 
             {/*<div className="lg:hidden block"></div>*/}
             <WalletHeader
@@ -671,28 +672,28 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   );
 }
 
-
 const PageButton = () => {
   return (
-    <Link to="/yourpage" className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4">
-      <div
-          className="flex items-center lg:justify-between justify-center w-full h-full"
-        >
-          <span className="lg:block hidden w-[25px]">
+    <Link
+      to="/yourpage"
+      className="lg:flex hidden user-balance cursor-pointer lg:w-[152px] w-[150px] h-[48px]  items-center rounded-full relative  bg-sky-blue pr-1.5 pl-4"
+    >
+      <div className="flex items-center lg:justify-between justify-center w-full h-full">
+        <span className="lg:block hidden w-[25px]">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 50" id="Page">
-          <path
-            fillRule="evenodd"
-            d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
-            fill="#ffffff"
-            className="color000000 svgShape"
-          ></path>
-        </svg>
-          </span>
-          <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
-          <span className="lg:block hidden">
-            {/* <Icons name="deep-plus" /> */}
-          </span>
-        </div>
+            <path
+              fillRule="evenodd"
+              d="M0 13V2a2 2 0 0 1 2-2h64a2 2 0 0 1 2 2v11H0Zm0 4v31a2 2 0 0 0 2 2h20V17H0Zm26 33h40a2 2 0 0 0 2-2V17H26v33Z"
+              fill="#ffffff"
+              className="color000000 svgShape"
+            ></path>
+          </svg>
+        </span>
+        <p className="lg:text-xl text-lg font-bold text-white">My Page</p>
+        <span className="lg:block hidden">
+          {/* <Icons name="deep-plus" /> */}
+        </span>
+      </div>
     </Link>
-  )
-}
+  );
+};

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 { tableReload } from "../store/TableReloads";
+import { familyBannersList } from "../store/FamilyBannerList";
 
 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,23 +217,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
@@ -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
   },
 });