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/Helpers/Inputs/InputCom/index.jsx

@@ -68,13 +68,13 @@ export default function InputCom({
         )}
       </div>
       <div
-        className={`input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-[0.475rem] 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 ${inputClass}`}
+        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 ${inputClass}`}
       >
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className={`input-field placeholder:text-base text-dark-gray w-full h-full ${
+          className={`input-field placeholder:text-base text-dark-gray w-full h-full tracking-wide ${
             inputBg ? inputBg : "bg-[#FAFAFA]"
           } dark:bg-[#11131F] focus:ring-0 focus:outline-none ${fieldClass}`}
           type={type}

src/components/History/index.jsx

@@ -241,7 +241,7 @@ export default function History() {
                 </div>
                 {/* END OF RECENT ACTIVITY SECTION */}
             </div>
-            <HistoryTable />
+            {/*<HistoryTable />*/}
           </div>
         </div>
       </Layout>

src/components/MyWallet/WalletComponent/ReferralTable.jsx

@@ -15,7 +15,7 @@ function ReferralTable({history}) {
     }
 
   return (
-    <div className='flex flex-col justify-between h-full'>
+    <div className='flex flex-col justify-between min-h-[420px] overflow-x-auto'>
         <table className="referral-list w-full table-auto border-collapse text-left">
             <thead className='border-b-2'>
                 <tr className='text-slate-600'>

src/components/Referral/ReferralDisplay.jsx

@@ -116,10 +116,21 @@ function ReferralDisplay() {
   }, [refHistoryReload]);
 
   return (
-    <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full  md:p-8 p-4 h-full bg-white dark:bg-dark-white rounded-2xl shadow">
-          <h2 className="text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
+    <div className="content-wrapper w-full lg:flex xl:space-x-8  bottomMargin">
+      <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+        <div className="sm:flex justify-between items-center mb-6">
+          <div className="mb-5 sm:mb-0">
+            <h1 className="text-26 font-bold inline-flex gap-3 text-dark-gray dark:text-white items-center">
+                <span>
+                 Refer a Friend
+                </span>
+            </h1>
+          </div>
+
+        </div>
+
+        <div className="referral w-full  md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
+          <h2 className="mb-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Send Referral
           </h2>
           <Formik
@@ -129,42 +140,44 @@ function ReferralDisplay() {
           >
             {(props) => (
               <Form className="referral-info">
-                {/* Firstname */}
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Firstname"
-                    type="text"
-                    name="firstname"
-                    placeholder="Firstname"
-                    value={props.values.firstname}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.firstname && props.touched.firstname && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.firstname}
-                    </p>
-                  )}
-                </div>
+                <div className="block md:mb-6 md:flex gap-10">
+                  {/* Firstname */}
+                  <div className="field w-full mb-6 md:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Firstname"
+                      type="text"
+                      name="firstname"
+                      placeholder="Firstname"
+                      value={props.values.firstname}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                    />
+                    {props.errors.firstname && props.touched.firstname && (
+                      <p className="text-sm text-red-500">
+                        {props.errors.firstname}
+                      </p>
+                    )}
+                  </div>
 
-                {/* Lastname */}
-                <div className="field w-full mb-6">
-                  <InputCom
-                    fieldClass="px-6"
-                    label="Lastname"
-                    type="text"
-                    name="lastname"
-                    placeholder="Lastname"
-                    value={props.values.lastname}
-                    inputHandler={props.handleChange}
-                    blurHandler={props.handleBlur}
-                  />
-                  {props.errors.lastname && props.touched.lastname && (
-                    <p className="text-sm text-red-500">
-                      {props.errors.lastname}
-                    </p>
-                  )}
+                  {/* Lastname */}
+                  <div className="field w-full mb-6 md:mb-0">
+                    <InputCom
+                      fieldClass="px-6"
+                      label="Lastname"
+                      type="text"
+                      name="lastname"
+                      placeholder="Lastname"
+                      value={props.values.lastname}
+                      inputHandler={props.handleChange}
+                      blurHandler={props.handleBlur}
+                    />
+                    {props.errors.lastname && props.touched.lastname && (
+                      <p className="text-sm text-red-500">
+                        {props.errors.lastname}
+                      </p>
+                    )}
+                  </div>
                 </div>
 
                 <div className="field w-full mb-6">
@@ -193,8 +206,7 @@ function ReferralDisplay() {
                   ) : (
                     <button
                       type="submit"
-                      className="text-lg text-white bg-sky-blue p-2 hover:opacity-90 rounded-md"
-                    >
+                      className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"                    >
                       Send Message
                     </button>
                   )}
@@ -203,20 +215,20 @@ function ReferralDisplay() {
             )}
           </Formik>
         </div>
-      </div>
 
-      <div className="lg:w-1/2 w-full mb-10 lg:mb-0">
-        <div className="referral w-full md:p-8 p-4 h-full max-h-[700px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
+        <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
           <h2 className="mb-2 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
             Referral List
           </h2>
           {referralList.loading ? (
-            <LoadingSpinner size="32" color="sky-blue" />
+              <LoadingSpinner size="32" color="sky-blue" />
           ) : (
-            <ReferralTable history={referralList} />
+              <ReferralTable history={referralList} />
           )}
         </div>
       </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/index.css

@@ -10,6 +10,9 @@
   src: url("./assets/fonts/Product Sans Bold.ttf");
 }
 
+.referral{
+  margin-bottom: 20px
+}
 .heroSilderTitle{
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
   font-family: sans; color: white;

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