faq content add from API

src/components/FamilyAcc/Tabs/FamilyManageTabs.jsx

@@ -117,7 +117,7 @@ export default function FamilyManageTabs({
 
   return (
     <div
-      className={`w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
+      className={`update-table w-full bg-white dark:bg-dark-white overflow-y-auto rounded-2xl section-shadow min-h-[520px] max-h-[600px] ${
         className || ""
       }`}
     >

src/components/FamilyAcc/Tabs/FamilyTasks.jsx

@@ -5,12 +5,16 @@ import { handlePagingFunc } from "../../Pagination/HandlePagination";
 import PaginatedList from "../../Pagination/PaginatedList";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import Icons from "../../Helpers/Icons";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
 
 export default function FamilyTasks({ familyData, className, loader }) {
+  const filterCategories = ["All Categories", "Explore", "Featured"];
+  const [selectedCategory, setCategory] = useState(filterCategories[0]);
+
   let navigate = useNavigate();
   let { pathname } = useLocation();
 
+  let data = ["1", "2", "3", "4", "5", "6"]; // to be replaced later by result from API CALL
+
   const [currentPage, setCurrentPage] = useState(0);
   const indexOfFirstItem = Number(currentPage);
   const indexOfLastItem =
@@ -20,7 +24,10 @@ export default function FamilyTasks({ familyData, className, loader }) {
     indexOfLastItem
   );
 
-  const handlePagination = (e) => handlePagingFunc(e, setCurrentPage);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
 
   return (
     <div
@@ -45,14 +52,8 @@ export default function FamilyTasks({ familyData, className, loader }) {
                         familyData?.result_list &&
                         familyData.result_list.length > 0 &&
                         currentTask.map((value, index) => {
-                          // find due date
-                          const dueDate = value?.delivery_date.split(" ")[0];
-                          // the price
-                          let thePrice = PriceFormatter(
-                            value?.price * 0.01,
-                            value?.currency_code,
-                            value?.currency
-                          );
+  // find due date
+  const dueDate = value?.delivery_date.split(" ")[0]
                           return (
                             <tr
                               key={index}
@@ -72,42 +73,37 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                       {value.title}
                                     </h1>
                                     <div className="flex gap-4 items-center">
-                                      <span className="text-sm text-thin-light-gray">
-                                        Price:{" "}
-                                        <span className="text-purple">
-                                          {thePrice}
-                                        </span>
+                                    <span className="text-sm text-thin-light-gray">
+                                      Price:{" "}
+                                      <span className="text-purple">
+                                        {value.price * 0.01}
                                       </span>
-                                      <span className="text-sm text-thin-light-gray">
-                                        Duration:{" "}
-                                        <span className="text-purple">
-                                          {" "}
-                                          {value.timeline_days} day(s)
-                                        </span>
+                                    </span>
+                                    <span className="text-sm text-thin-light-gray">
+                                      Duration:{" "}
+                                      <span className="text-purple">
+                                        {" "}
+                                        {value.timeline_days} day(s)
                                       </span>
-                                      <span className="text-sm text-thin-light-gray">
-                                        Due Date:{" "}
-                                        <span className="text-purple">
-                                          {" "}
-                                          {dueDate}
-                                        </span>
+                                    </span>
+                                    <span className="text-sm text-thin-light-gray">
+                                      Due Date:{" "}
+                                      <span className="text-purple">
+                                        {" "}
+                                        {dueDate}
                                       </span>
+                                    </span>
                                     </div>
                                   </div>
                                 </div>
                               </td>
-
+  
                               <td className="text-right py-4 px-2">
                                 <button
                                   type="button"
                                   onClick={() => {
                                     navigate("/manage-active-job", {
-                                      state: {
-                                        ...value,
-                                        pathname,
-                                        dueDate,
-                                        thePrice,
-                                      },
+                                      state: { ...value, pathname },
                                     });
                                   }}
                                   className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
@@ -116,7 +112,7 @@ export default function FamilyTasks({ familyData, className, loader }) {
                                 </button>
                               </td>
                             </tr>
-                          );
+                          )
                         })}
                     </>
                   }

src/components/Helpers/Accordion.jsx

@@ -10,7 +10,7 @@ export default function Accordion({ datas }) {
     <>
       <div className="accordion-item overflow-hidden relative z-[1]">
         <div
-          className="accordion-title-bar flex items-center space-x-3 py-5 border-b  border-light-purple dark:border-[#5356fb29] "
+          className="accordion-title-bar flex items-center space-x-3 py-5 border-b  border-light-purple dark:border-[#5356fb29] cursor-pointer"
           onClick={accordionHandler}
         >
           <div className="accordion-title-icon relative">
@@ -36,7 +36,7 @@ export default function Accordion({ datas }) {
             <div className="w-[3px] h-auto bg-purple rounded-[28px]"></div>
             <div className="flex-1">
               <p className="text-base text-thin-light-gray tracking-wide">
-                {datas.content}
+                {datas.msg}
               </p>
             </div>
           </div>

src/components/Settings/Tabs/FaqTab.jsx

@@ -1,14 +1,18 @@
 import React from "react";
 import Accordion from "../../Helpers/Accordion";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
-export default function FaqTab({ datas = [] }) {
+export default function FaqTab({ datas }) {
   return (
     <div className="faq-tab w-full">
       <div className="accordion-items w-full">
-        {datas &&
-          datas.length > 0 &&
-          datas.map((value) => (
-            <Accordion key={value.id + Math.random()} datas={value} />
+        {datas.loading ? 
+          <LoadingSpinner color='sky-blue' size={16} />  
+        :
+        datas &&
+          datas?.data?.length > 0 &&
+          datas.data.map((value, index) => (
+            <Accordion key={index + Math.random()} datas={value} />
           ))}
       </div>
     </div>

src/components/Settings/index.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from "react";
 import cover from "../../assets/images/profile-info-cover.png";
 import profile from "../../assets/images/profile-info-profile.png";
-import faq from "../../data/faq.json";
+
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
 import ChangePasswordTab from "./Tabs/ChangePasswordTab";
@@ -12,7 +12,7 @@ import PaymentMathodsTab from "./Tabs/PaymentMathodsTab";
 import PersonalInfoTab from "./Tabs/PersonalInfoTab";
 import TermsConditionTab from "./Tabs/TermsConditionTab";
 
-export default function Settings() {
+export default function Settings({faq}) {
   const tabs = [
     {
       id: 1,
@@ -83,8 +83,6 @@ export default function Settings() {
     }
   };
 
-  // fab tab
-  const faqData = faq.datas;
   return (
     <>
       <Layout>
@@ -259,7 +257,7 @@ export default function Settings() {
                   )}
                   {tab === "login_activity" && <LoginActivityTab />}
                   {tab === "password" && <ChangePasswordTab />}
-                  {tab === "faq" && <FaqTab datas={faqData} />}
+                  {tab === "faq" && <FaqTab datas={faq} />}
                   {tab === "terms" && <TermsConditionTab />}
                 </div>
               </div>

src/services/UsersService.js

@@ -687,9 +687,19 @@ class usersService {
         action: 14015,
         ...reqData,
       };
-      return this.postAuxEnd("/activejobstatus ", postData);
+      return this.postAuxEnd("/activejobstatus", postData);
     }
 
+  // END POINT FOR OWNER JOB ACTION
+  getFaq() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      // member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+    };
+    return this.postAuxEnd("/faq", postData);
+  }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

src/views/SettingsPage.jsx

@@ -1,10 +1,29 @@
-import React from "react";
+import React,{useState, useEffect} from "react";
 import Settings from "../components/Settings";
+import usersService from "../services/UsersService";
 
 export default function SettingsPage() {
+
+  const apiCall = new usersService()
+
+  let [faq, setFaq] = useState({loading:true, data:[]}) // STATE TO HOLD FAQ DATA
+
+  //FUNCTION TO GET FAQ
+  const getFaq = () => {
+    apiCall.getFaq().then(res => {
+      setFaq({loading:false, data:res.data.result_list})
+    }).catch(err => {
+      setFaq({loading:false, data:[]})
+      console.log('Error', err)
+    })
+  }
+
+  useEffect(()=>{
+    getFaq()
+  },[])
   return (
     <>
-      <Settings />
+      <Settings faq={faq} />
     </>
   );
 }