faq content add from API

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/MyCoupons/CouponPopup.jsx

@@ -1,17 +1,10 @@
 import { useMemo, useState } from "react";
+import { toast } from "react-toastify";
 import usersService from "../../services/UsersService";
-import { useDispatch } from "react-redux";
-import { tableReload } from "../../store/TableReloads";
 
 const CouponPopup = ({ popUpHandler, data }) => {
   const [loader, setLoader] = useState(false);
   const apiCall = useMemo(() => new usersService(), []);
-  const [statusMsg, setStatusMsg] = useState({
-    success: "",
-    error: "",
-  });
-
-  const dispatch = useDispatch();
 
   const redeemCouponHandler = async () => {
     setLoader(true);
@@ -21,34 +14,28 @@ const CouponPopup = ({ popUpHandler, data }) => {
       const reqData = { code_id: Number(coupon_id), code };
 
       const res = await apiCall.getCouponRedeem(reqData);
+      if (res.statusText === "OK") {
+        toast.success("Great news! Your coupon has been redeemed.", {
+          autoClose: 3000,
+          hideProgressBar: true,
+        });
+      }
 
-      if (res.data?.internal_return < 0)
-        setStatusMsg({ error: "An error occurred" });
-      else setStatusMsg({ success: res.data?.status_text });
-
-      dispatch(tableReload({ type: "COUPONTABLE" }));
       setTimeout(() => {
         popUpHandler();
         setLoader(false);
-      }, 10000);
+      }, 3000);
+      throw new Response(res);
     } catch (error) {
+      // error &&
+      //   toast.warn("An error occurred while processing your coupon.", {
+      //     autoClose: 3000,
+      //     hideProgressBar: true,
+      //   });
       setLoader(false);
-      if (error?.status !== 200)
-        setStatusMsg({
-          error: {
-            status: true,
-            msg:
-              error?.statusText !== ""
-                ? error?.statusText
-                : "An error occurred",
-          },
-        });
-      throw new Error(error);
-    } finally {
-      setStatusMsg({
-        success: "",
-        error: "",
-      });
+      console.log(error);
+      return;
+      // throw new Error(error);
     }
   };
 
@@ -90,8 +77,9 @@ const CouponPopup = ({ popUpHandler, data }) => {
               Amount:
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">{data?.thePrice}</div>
+          <div className=" flex-[0.7] max-w-[150px]">{`${data?.amount} Naira`}</div>
         </div>
+
         <div className="signin-area w-full">
           <div className="flex justify-end">
             <button
@@ -108,12 +96,6 @@ const CouponPopup = ({ popUpHandler, data }) => {
               )}
             </button>
           </div>
-          {statusMsg.success && (
-            <p className="text-sm text-green-500 italic">{statusMsg.success}</p>
-          )}
-          {statusMsg.error && (
-            <p className="text-sm text-red-500 italic">{statusMsg.error}</p>
-          )}
         </div>
       </form>
       <div className="signin-area w-full px-5 py-4">

src/components/MyCoupons/CouponTable.jsx

@@ -4,7 +4,6 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import ModalCom from "../Helpers/ModalCom";
 import CouponPopup from "./CouponPopup";
 import { useNavigate } from "react-router-dom";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 function CouponTable({ coupon }) {
   const [currentPage, setCurrentPage] = useState(0);
@@ -39,18 +38,12 @@ function CouponTable({ coupon }) {
         </thead>
         {coupon.data.length ? (
           <tbody>
-            {currentCoupon.map((item, index) => {
-              let thePrice = PriceFormatter(
-                item?.amount * 0.01,
-                item?.currency_code,
-                item?.currency
-              );
-              return(
+            {currentCoupon.map((item, index) => (
               <tr key={index} className="text-slate-500">
                 <td className="p-2 cursor-default">
                   {item.added} <br /> {item.code}
                 </td>
-                <td className="p-2 text-center cursor-default">{thePrice}</td>
+                <td className="p-2 text-center cursor-default">{`${item.amount} Naira`}</td>
                 <td className="p-2 h-20 flex items-center justify-end">
                   <button
                     type="button"
@@ -58,7 +51,7 @@ function CouponTable({ coupon }) {
                     onClick={() => {
                       setCouponPopup((prev) => ({
                         state: !prev.state,
-                        data: {...item, thePrice},
+                        data: item,
                       }));
                     }}
                   >
@@ -66,7 +59,7 @@ function CouponTable({ coupon }) {
                   </button>
                 </td>
               </tr>
-            )})}
+            ))}
           </tbody>
         ) : coupon.error ? (
           <tbody>

src/components/MyCoupons/MyCoupons.jsx

@@ -1,13 +1,11 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Layout from "../Partials/Layout";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import CouponTable from "./CouponTable";
 import usersService from "../../services/UsersService";
-import { useSelector } from "react-redux";
 
 export default function MyCoupons() {
-  const apiCall = useMemo(() => new usersService(), []);
-  const {couponTable} = useSelector(state => state.tableReload)
+  const apiCall = new usersService();
   let [couponHistory, setCouponHistory] = useState({
     // FOR COUPON HISTORY
     loading: true,
@@ -16,7 +14,7 @@ export default function MyCoupons() {
   });
 
   //FUNCTION TO GET COUPON HISTORY
-  const getCouponHistory = useCallback(() => {
+  const getCouponHistory = () => {
     apiCall
       .getCouponPending()
       .then((res) => {
@@ -34,11 +32,11 @@ export default function MyCoupons() {
       .catch((error) => {
         setCouponHistory((prev) => ({ ...prev, loading: false, error: true }));
       });
-  }, [apiCall]);
+  };
 
   useEffect(() => {
     getCouponHistory();
-  }, [couponTable]);
+  }, []);
 
   return (
     <>
@@ -61,7 +59,7 @@ export default function MyCoupons() {
                     <LoadingSpinner size="16" color="sky-blue" />
                   </div>
                 ) : (
-                  <CouponTable coupon={couponHistory} />
+                  <CouponTable coupon={couponHistory} />    
                 )}
               </div>
             </div>

src/components/MyJobs/MyJobTable.jsx

@@ -11,7 +11,6 @@ import usersService from "../../services/UsersService";
 import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 import EditJobPopOut from "../jobPopout/EditJobPopout";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
 
 export default function MyJobTable({ MyJobList, reloadJobList, className }) {
   const [myCountry, setCountries] = useState("");
@@ -102,15 +101,9 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
               {selectedCategory === "All Categories" ? (
                 <>
                   {MyJobList &&
-                  MyJobList?.data?.result_list &&
-                  MyJobList.data?.result_list.length > 0 ? (
-                    currentJobList.map((value, index) => {
-                      let thePrice = PriceFormatter(
-                        value?.price * 0.01,
-                        value?.currency_code,
-                        value?.currency
-                      );
-                      return(
+                    MyJobList?.data?.result_list &&
+                    MyJobList.data?.result_list.length > 0 ?
+                    currentJobList.map((value, index) => (
                       <tr
                         key={index}
                         className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
@@ -133,7 +126,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                                 <span className="text-sm text-thin-light-gray">
                                   Price:{" "}
                                   <span className="text-purple">
-                                    {thePrice}
+                                    {value.price * 0.01}
                                   </span>
                                 </span>
                                 <span className="text-sm text-thin-light-gray">
@@ -188,12 +181,14 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                           </button>
                         </td>
                       </tr>
-                    )})
-                  ) : (
+                    ))
+                    :
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">No Jobs Avaliable!</td>
+                      <td className="p-2">
+                        No Jobs Avaliable!
+                      </td>
                     </tr>
-                  )}
+                    }
                 </>
               ) : selectedCategory === "Explore" ? (
                 <></>

src/components/MyJobs/index.jsx

@@ -9,10 +9,12 @@ export default function MyJobs(props) {
   const filterHandler = (value) => {
     setValue(value);
   };
-
+  
   return (
     <Layout>
-      <CommonHead commonHeadData={props.commonHeadData} />
+      <CommonHead
+          commonHeadData={props.commonHeadData}
+      />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
@@ -40,9 +42,11 @@ export default function MyJobs(props) {
               ></div>
             </div>
           </div>
-          <MyJobTable MyJobList={props.MyJobList} />
+          <MyJobTable
+              MyJobList={props.MyJobList}
+          />
         </div>
       </div>
     </Layout>
   );
-}
+}

src/components/MyWallet/WalletComponent/CouponTable.jsx

@@ -1,85 +1,66 @@
-import React, { useState } from "react";
+import React, {useState} from 'react'
 
-import PaginatedList from "../../Pagination/PaginatedList";
-import { handlePagingFunc } from "../../Pagination/HandlePagination";
-import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import PaginatedList from '../../Pagination/PaginatedList'
+import { handlePagingFunc } from '../../Pagination/HandlePagination';
 
-function CouponTable({ coupon }) {
-  const [currentPage, setCurrentPage] = useState(0);
-  const indexOfFirstItem = Number(currentPage);
-  const indexOfLastItem =
-    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
-  const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+function CouponTable({coupon}) {
 
-  const handlePagination = (e) => {
-    handlePagingFunc(e, setCurrentPage);
-  };
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
 
   return (
-    <div className="flex flex-col justify-between h-full">
-      <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className="border-b-2">
-          <tr className="text-slate-600">
+    <div className='flex flex-col justify-between h-full'>
+    <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className='border-b-2'>
+            <tr className='text-slate-600'>
             <th className="p-2">Date</th>
             <th className="p-2">Description</th>
             <th className="p-2">Amount</th>
             <th className="p-2">Active</th>
-          </tr>
+            </tr>
         </thead>
-        {coupon.data.length ? (
-          <tbody>
-            {currentCoupon.map((item, index) => {
-              let thePrice = PriceFormatter(
-                item?.price * 0.01,
-                item?.currency_code,
-                item?.currency
-              );
-              return (
-                <tr key={index} className="text-slate-500">
-                  <td className="p-2">{item.added}</td>
-                  <td className="p-2">{item.code}</td>
-                  <td className="p-2">{item.amount}</td>
-                  <td className="p-2">{item.status}</td>
-                </tr>
-              );
-            })}
-          </tbody>
-        ) : coupon.error ? (
-          <tbody>
-            <tr className="text-slate-500">
-              <td className="p-2" colSpan={4}>
-                Opps! an error occurred. Please try again!
-              </td>
+        {coupon.data.length ?
+        (
+        <tbody>
+            {currentCoupon.map((item, index) => (
+            <tr key={index} className='text-slate-500'>
+                <td className="p-2">{item.added}</td>
+                <td className="p-2">{item.code}</td>
+                <td className="p-2">{item.amount}</td>
+                <td className="p-2">{item.status}</td>
             </tr>
-          </tbody>
-        ) : (
-          <tbody>
-            <tr className="text-slate-500">
-              <td className="p-2" colSpan={4}>
-                No Purchase History Found!
-              </td>
+            ))}
+        </tbody>
+        )
+        :
+        coupon.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
             </tr>
-          </tbody>
-        )}
-      </table>
-
-      {/* PAGINATION BUTTON */}
-      <PaginatedList
-        onClick={handlePagination}
-        prev={currentPage == 0 ? true : false}
-        next={
-          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
-          coupon?.data?.length
-            ? true
-            : false
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
+            </tr>
+        </tbody>
         }
-        data={coupon?.data}
-        start={indexOfFirstItem}
-        stop={indexOfLastItem}
-      />
-      {/* END OF PAGINATION BUTTON */}
+    </table>
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
     </div>
-  );
+  )
 }
 
-export default CouponTable;
+export default CouponTable

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/store/TableReloads.js

@@ -4,8 +4,7 @@ const initialState = {
   jobListTable: false,
   pendingListTable: false,
   myTaskTable: false,
-  othersInterestedTable: false,
-  couponTable: false
+  othersInterestedTable: false
 };
 
 export const tableReloadSlice = createSlice({
@@ -13,24 +12,21 @@ export const tableReloadSlice = createSlice({
   initialState,
   reducers: {
     tableReload: (state, action) => {
-      switch (action.payload.type) {
-        case "JOBTABLE":
+      switch(action.payload.type){
+        case 'JOBTABLE':
           state.jobListTable = !state.jobListTable;
-          return;
-        case "PENDINGTABLE":
+          return
+        case 'PENDINGTABLE' :
           state.pendingListTable = !state.pendingListTable;
-          return;
-        case "MYTASKTABLE":
+          return
+        case 'MYTASKTABLE' :
           state.myTaskTable = !state.myTaskTable;
-          return;
-        case "OTHERSINTERESTEDTABLE":
+          return
+        case 'OTHERSINTERESTEDTABLE' :
           state.othersInterestedTable = !state.othersInterestedTable;
-          return;
-        case "COUPONTABLE":
-          state.couponTable = !state.couponTable;
-          return;
+          return
         default:
-          return state;
+          return state
       }
     },
   },
@@ -38,4 +34,4 @@ export const tableReloadSlice = createSlice({
 
 export const { tableReload } = tableReloadSlice.actions;
 
-export default tableReloadSlice.reducer;
+export default tableReloadSlice.reducer;

src/views/MyJobsPage.jsx

@@ -1,16 +1,41 @@
+//import React from "react";
+import React, { useContext, useState, useEffect } from "react";
+// import MyTasks from "../components/MyTasks";
+// import UsersService from "../services/UsersService";
+import usersService from "../services/UsersService";
 import MyJobs from "../components/MyJobs";
 import { useSelector } from "react-redux";
 
 export default function MyJobsPage() {
-  let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner);
-  const { userJobList } = useSelector((state) => state.userJobList);
+  let {commonHeadBanner} = useSelector(state => state.commonHeadBanner)
 
+  const {userJobList} = useSelector((state) => state.userJobList)
+  
+  // const { jobListTable } = useSelector((state) => state.tableReload);
+  // const userApi = new usersService();
+  // const activeJobList  = userApi.getMyJobList();
+  // const [myJobList, setMyJobList] = useState({ loading: true, data: [] });
+  // const api = new usersService();
+
+  // const getMyJobList = async () => {
+  //   setMyJobList({ loading: true, data: [] });
+  //   try {
+  //     const res = await api.getMyJobList();
+  //     setMyJobList({ loading: false, data: res.data });
+  //     // setMyJobList(res.data);
+  //   } catch (error) {
+  //     setMyJobList({ loading: false, data: [] });
+  //     console.log("Error getting mode");
+  //   }
+  // };
+  // useEffect(() => {
+  //   getMyJobList();
+  // }, [jobListTable]);
+
+  // debugger;
   return (
     <>
-      <MyJobs
-        MyJobList={userJobList}
-        commonHeadData={commonHeadBanner.result_list}
-      />
+      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadBanner.result_list} />
     </>
   );
 }

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} />
     </>
   );
 }