made home banner API load after login

src/Routers.jsx

@@ -69,6 +69,7 @@ import FamilyActivitiesPage from "./views/FamilyActivitiesPage";
 import FamGamesPage from "./views/FamGamesPage";
 import FamilyRoutesPage from "./views/FamilyRoutesPage";
 import PromoPage from "./views/PromoPage";
+import LearnMorePage from "./views/LearnMorePage";
 
 export default function Routers() {
   return (
@@ -203,6 +204,7 @@ export default function Routers() {
           <Route exact path="/sell" element={<SellPage />} />
           <Route exact path="/saved" element={<SavedPage />} />
           <Route exact path="/history" element={<HistoryPage />} />
+          <Route exact path="/learnmore" element={<LearnMorePage />} />
           {/*<Route exact path="/upload-product" element={<UploadProductPage />} />*/}
           <Route exact path="/my-uploads" element={<UploadProductPage />} />
           <Route exact path="/profile" element={<AuthProfilePage />} />

src/components/Dashboards/AccountDashboard.jsx

@@ -9,7 +9,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
 
   let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW
 
-  let offersListLength = offersList?.length
+  let offersListLength = offersList?.length > 2 ? 2 : offersList?.length
 
   // getting the upper three banners for the home layout
   const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength);
@@ -44,7 +44,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
                 );
               
                 let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}`
-                if(index < 3){
+                if(index < offersListLength){
                   return (
                     <div key={item.offer_uid}>
                         <NewOfferCard datas={item} image={image} price={thePrice} setOfferPopout={setOfferPopout} />
@@ -78,7 +78,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
         {/* for flat banner section */}
         <div className="w-full grid-cols-1 md:grid-cols-2 2xl:grid-cols-3 grid items-center justify-center gap-2 md:gap-4">    
           {/* OFFER LIST DISPLAY */}
-          <>
+          {/* <>
             {(offersList && offersList?.length > 0) &&
               offersList.map((item, index) => {
                 let thePrice = PriceFormatter(
@@ -96,7 +96,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) =>
                     )
                 }
             })}
-          </>
+          </> */}
           {getLowerBanner?.map((props, idx) => {
             let image = getImage(props);
 

src/components/FamilyAcc/FamilyTableNew.jsx

@@ -58,9 +58,9 @@ export default function FamilyTableNew() {
 
   // Array of tab names
   const tabs = [
-    { id: 1, name: "tasks" },
-    { id: 2, name: "waiting" },
-    { id: 3, name: "pending" },
+    { id: 1, name: "Tasks" },
+    { id: 2, name: "Waiting" },
+    { id: 3, name: "Pending" },
   ];
 
   // State for the currently selected tab
@@ -68,31 +68,31 @@ export default function FamilyTableNew() {
 
   // Function to handle tab changes
   const tabHandler = (value) => {
-    setTab(value);
+    setTab(value.toLowerCase());
   };
 
   // Object that maps tab names to their corresponding components
   const tabComponents = {
-    Tasks: (
+    tasks: (
       <FamilyTasks
         familyData={familyTasks}
         action={familyAssignPopUpHandler}
       />
     ),
-    Waiting: (
+    waiting: (
       <FamilyWaitlist
         familyData={familyWaitList}
         setUpdatePage={setUpdatePage}
       />
     ),
-    Pending: (
+    pending: (
       <FamilyPending
         familyData={familyPending}
       />
     ),
   };
 
-  const defaultTabComponent = tabComponents.Tasks;
+  const defaultTabComponent = tabComponents.tasks;
 
   // Selected tab component based on the current 'tab'
   const selectedTabComponent = tabComponents[tab] || defaultTabComponent;
@@ -200,7 +200,7 @@ export default function FamilyTableNew() {
         <Suspense
           fallback={
             <div className="h-full min-h-[609px] w-full overflow-hidden flex justify-center items-center">
-              <LoadingSpinner size="16" color="sky-blue" />
+              <LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />
             </div>
           }
         >
@@ -213,7 +213,7 @@ export default function FamilyTableNew() {
                       <li
                         onClick={() => tabHandler(name)}
                         className={`p-4 flex hover:text-purple transition-all ease-in-out items-center cursor-pointer overflow-hidden text-xl relative top-[2px] ${
-                          tab === name
+                          tab.toLowerCase() === name.toLowerCase()
                             ? "text-purple border-r"
                             : "text-thin-light-gray"
                         }`}
@@ -235,7 +235,7 @@ export default function FamilyTableNew() {
                 <div className="flex-[0.9] h-full">
                   <div className="h-full relative overflow-y-auto">
                     <Suspense
-                      fallback={<LoadingSpinner size="16" color="sky-blue" />}
+                      fallback={<LoadingSpinner size="16" color="sky-blue" height='h-[30rem]' />}
                     >
                       {selectedTabComponent}
                     </Suspense>

src/components/LearnMore/LearnMore.jsx

@@ -0,0 +1,152 @@
+import React, {useState, useEffect} from "react";
+import Layout from "../Partials/Layout";
+
+import usersService from "../../services/UsersService";
+import LoadingSpinner from "../Spinners/LoadingSpinner";
+
+import TabButton from "../customTabs/TabButton";
+
+export default function LearnMore() {
+
+    const apiCall = new usersService()
+
+    const [selectedTab, setSelectedTab] = useState("topic 1");
+
+    const [tabs, setTabs] = useState(
+        [  //STATE FOR SWITCHING BETWEEN TABS
+            {
+                id: 1,
+                title: "topic 1",
+                iconName: "history",
+              },
+              {
+                id: 2,
+                title: "topic 2",
+                iconName: "history",
+              },
+              {
+                id: 3,
+                title: "topic 3",
+                iconName: "history",
+              },
+              {
+                id: 4,
+                title: "topic 4",
+                iconName: "history",
+              },
+        ]
+    )
+
+    // const tabs = [  //STATE FOR SWITCHING BETWEEN TABS
+    //     {
+    //         id: 1,
+    //         title: "topic 1",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 2,
+    //         title: "topic 2",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 3,
+    //         title: "topic 3",
+    //         iconName: "history",
+    //       },
+    //       {
+    //         id: 4,
+    //         title: "topic 4",
+    //         iconName: "history",
+    //       },
+    // ]
+
+    let [topics, setTopics] = useState({ // FOR PAYMENT HISTORY
+        loading: true,
+        data: [],
+    })
+
+    //FUNCTION TO GET LEARN MORE TOPIC
+  
+  useEffect(()=>{
+    apiCall.getLearnmoreTopics().then((res)=>{
+        if(res.data.internal_return < 0){ // success but no data
+            setTopics(prev => ({...prev, loading: false}))
+            return
+        }
+        const resData = res?.data?.result_list
+        setTopics(prev => ({...prev, loading: false, data: resData}))
+        setTabs(prev => {
+           return prev.map((item, index) => ({...item, title:resData[index].topic}))
+        })
+        setSelectedTab(resData[0].topic)
+        // console.log('RES', resData)
+    }).catch((error)=>{
+        setTopics(prev => ({...prev, loading: false}))
+    })
+  }, [])
+
+
+  return (
+    <>
+      <Layout>
+        <div className="history-wrapper w-full mb-10">
+            <div className="w-full">
+                <div className="sm:flex justify-between items-center mb-6">
+                    <div className="mb-5 sm:mb-0">
+                        <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+
+                    Learn More
+
+                        </h1>
+                    </div>
+                    <div className="slider-btns flex space-x-4">
+
+                    </div>
+                </div>
+                <div className="w-full h-full p-4 bg-white dark:bg-dark-white rounded-2xl section-shadow lg:flex lg:px-10 px-4 justify-between">
+                    <div className="content-tab-items lg:w-[230px] w-full mr-2">
+                        <div className='overflow-hidden mb-5 lg:mb-0 py-2 lg:py-8'>
+                            {(!topics.loading  && topics?.data?.length > 0) && tabs.map((item) => (
+                                <div key={item.id} className='w-full'>
+                                    <TabButton 
+                                        key={item.id}
+                                        item={item.title}
+                                        iconName={item.iconName}
+                                        selectedTab={selectedTab}
+                                        setSelectedTab={setSelectedTab}
+                                    />
+                                </div>
+                            ))}
+                        </div>
+                    </div>
+                    <div className="w-[1px] bg-[#E3E4FE] dark:bg-[#a7a9b533]  mr-10"></div>
+                    <div className="flex-1 overflow-y-auto min-h-[520px]">
+                        <>
+                            {/* TOPICS SECTION */}
+                            <div className="w-full py-2 lg:py-8">
+                                {topics.loading ? 
+                                <LoadingSpinner size='16' color='sky-blue' height='h-[500px]' />
+                                :
+                                <>
+                                    {(topics?.data && topics?.data?.length > 0) ?
+                                    <div dangerouslySetInnerHTML={{
+                                        __html: topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents,
+                                      }} className='prose dark:text-white dark:bg-dark-white'
+                                    >
+                                        {/* {topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents} */}
+                                    </div>
+                                    :
+                                    <p className='p-2 text-slate-500 flex flex-col grow justify-center items-center'>No Topics found</p>}
+                                </>
+                                }
+                            </div>
+                            {/* END OF TOPICS SECTION */}
+                        </>
+                    </div>
+                </div>
+            </div>
+        </div>
+      </Layout>
+    </>
+  );
+}

src/components/customTabs/TabButton.jsx

@@ -15,7 +15,7 @@ export default function TabButton({ item='', iconName='', selectedTab='', setSel
         <Icons name={iconName} />
       </div>
       <div>
-        <p className="text-18 tracking-wide">{item[0].toUpperCase() + item.slice(1)}</p>
+        <p className="text-18 tracking-wide">{item[0]?.toUpperCase() + item?.slice(1)}</p>
       </div>
     </button>
   )

src/components/jobPopout/OfferJobPopout.jsx

@@ -142,80 +142,67 @@ function OfferJobPopout({ details, onClose, situation }) {
           </button>
         </div>
         <div className="grid md:grid-cols-4 bg-white dark:bg-dark-white rounded-lg">
-          <div className="p-4 w-full md:col-span-3 md:border-r-2">
+          <div className="md:col-span-3 md:border-r-2">
 
             {/* INPUT SECTION */}
-            <div className='grid md:grid-cols-2'>
-              <div className="my-2 md:flex">
-                {/* <Detail
-                  label="Date :"
-                  value={
-                    (details.offer_added && details.offer_added?.split(" ")[0]) ||
-                    "default"
-                  }
-                /> */}
-                <label className='job-label w-full md:w-[150px] md:text-right'>Date :</label>
-                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>
-                  {
-                    (details.offer_added && details.offer_added?.split(" ")[0]) ||
-                    "default"
-                  }
-                </p>
+            <div className='bg-[#FFFDEE] p-4 w-full'>
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Date :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>
+                    {
+                      (details.offer_added && details.offer_added?.split(" ")[0]) ||
+                      "default"
+                    }
+                  </p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Expire :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{details.expire && details.expire.split(" ")[0]}</p>
+                </div>
               </div>
 
+              <div className='grid md:grid-cols-2'>
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Reward :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{thePrice}</p>
+                </div>
+
+                <div className="my-2 md:flex">
+                  <label className='job-label w-full md:w-[150px] md:text-right'>Duration :</label>
+                  <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{`${details.timeline_days} day(s)`}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div className='p-4 w-full'>
+              <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
+                {details.title}
+              </p>
+
               <div className="my-2 md:flex">
-                {/* <Detail
-                  label="Offer Expire :"
-                  value={details.expire && details.expire.split(" ")[0]}
-                /> */}
-                <label className='job-label w-full md:w-[150px] md:text-right'>Expire :</label>
-                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{details.expire && details.expire.split(" ")[0]}</p>
+                <label className='job-label w-full md:w-[150px]'>Description :</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
+                {/* <Detail label="Description" value={details.description} /> */}
+              </div>
+
+              <div className="my-2 md:flx">
+                {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
+                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
+                <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
+                  Delivery Detail :
+                </label>
+                <textarea
+                  className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
+                  rows="5"
+                  style={{ resize: "none" }}
+                  value={details.job_description || details.job_detail}
+                  readOnly
+                />
               </div>
             </div>
 
-            <div className='grid md:grid-cols-2'>
-              <div className="my-2 md:flex">
-                {/* <Detail label="Reward :" value={thePrice} /> */}
-                <label className='job-label w-full md:w-[150px] md:text-right'>Reward :</label>
-                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{thePrice}</p>
-              </div>
-
-              <div className="my-2 md:flex">
-                {/* <Detail
-                  label="Duration :"
-                  value={`${details.timeline_days} day(s)`}
-                /> */}
-                <label className='job-label w-full md:w-[150px] md:text-right'>Duration :</label>
-                <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white`}>{`${details.timeline_days} day(s)`}</p>
-              </div>
-            </div>
-
-            <p className="text-lg my-2 font-semibold text-slate-900 dark:text-white tracking-wide max-h-[200px] overflow-y-auto">
-              {details.title}
-            </p>
-
-            <div className="my-2 md:flex">
-              <label className='job-label w-full md:w-[150px]'>Description :</label>
-              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white max-h-[200px] overflow-y-auto`}>{details.description}</p>
-              {/* <Detail label="Description" value={details.description} /> */}
-            </div>
-
-
-
-            <div className="my-2 md:flx">
-              {/* <label className='job-label w-full md:w-[150px]'>Detail</label>
-              <p className={`p-1 w-full md:w-3/4 text-sm text-slate-900 dark:text-white min-h-[100px] max-h-[200px] overflow-y-auto border-2 rounded-md`}>{details.job_description || details.job_detail}</p> */}
-              <label className="w-full text-slate-900 dark:text-white tracking-wide font-semibold">
-                Delivery Detail :
-              </label>
-              <textarea
-                className={`p-2 w-full text-sm text-slate-900 dark:text-white bg-transparent outline-none border border-slate-300 rounded-md`}
-                rows="5"
-                style={{ resize: "none" }}
-                value={details.job_description || details.job_detail}
-                readOnly
-              />
-            </div>
           </div>
 
           {/* ACTION SECTION */}

src/middleware/AuthRoute.jsx

@@ -111,6 +111,24 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     }
   }, []);
 
+  //FUNCTION TO GET COMMON HEAD DATA
+  useEffect(() => {
+    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, homeBanners]);
+
   useEffect(() => { // FUNCTION TO GET NOTIFICATIONS LIST
     const notifications = () => {
       // function to load user notification
@@ -231,24 +249,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     getMarketActiveJobList();
   }, [apiCall, dispatch, marketTableList, isLogin.status]);
 
-  //FUNCTION TO GET COMMON HEAD DATA
-  useEffect(() => {
-    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, homeBanners]);
-
   //FUNCTION TO GET COMMON HEAD DATA
   // useEffect(() => {
   //   if((!loggedIn && !isLogin.status) || account_type == 'FAMILY'){ // DO NOT CALL THIS, IF USER ACCOUNT TYPE IS FAMILY

src/services/UsersService.js

@@ -1502,14 +1502,25 @@ class usersService {
     return this.postAuxEnd("/promoverify", postData);
   }
 
-    // API FUNCTION TO LOGIN USER THROUGH PROMO LINK
-    loginPromo(reqData) {
-      var postData = {
-        action: apiConst.WRENCHBOARD_LOGIN_PROMO,
-        ...reqData
-      };
-      return this.postAuxEnd("/loginpromo", postData);
-    }
+  // API FUNCTION TO LOGIN USER THROUGH PROMO LINK
+  loginPromo(reqData) {
+    var postData = {
+      action: apiConst.WRENCHBOARD_LOGIN_PROMO,
+      ...reqData
+    };
+    return this.postAuxEnd("/loginpromo", postData);
+  }
+
+  // API FUNCTION TO GET LEARN MORE TOPICS
+  getLearnmoreTopics() {
+    var postData = {
+      member_uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      // action: apiConst.WRENCHBOARD_LOGIN_PROMO,
+    };
+    return this.postAuxEnd("/learnmore", postData);
+  }
 
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)

src/views/LearnMorePage.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import LearnMore from "../components/LearnMore/LearnMore";
+
+export default function LearnMorePage() {
+  return (
+    <>
+      <LearnMore />
+    </>
+  );
+}