API for paycard listing added

src/components/MyWallet/AddFundDollars.jsx

@@ -1,8 +1,10 @@
-import React,{useState} from 'react'
+import React,{useEffect, useState} from 'react'
 import { useNavigate } from 'react-router-dom'
 import InputCom from '../Helpers/Inputs/InputCom';
 import PaginatedList from '../Pagination/PaginatedList';
 import { handlePagingFunc } from '../Pagination/HandlePagination';
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+import usersService from '../../services/UsersService';
 
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
@@ -56,17 +58,18 @@ const initialValues = {
 
 function AddFundDollars(props) {
     const navigate = useNavigate()
+    let apiCall = new usersService()
 
     let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
 
     let [prevCardDetails, setPrevCardDetails] = useState(null) // STATE TO HOLD PREVIOUS CARD SELECTED
 
-    let previousCards = {data:[1,2]} //USER PREVIOUS CARDS // TO BE REPLACED LATER FROM DATA FROM API
+    let [payListCard, setPayListCard] = useState({loading: true, data:[]}) //USER PREVIOUS CARDS
 
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentPreviousCards = previousCards?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentPreviousCards = payListCard?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
@@ -95,6 +98,15 @@ function AddFundDollars(props) {
         props.setInput('')
     }
 
+    useEffect(()=>{
+        apiCall.payListCard().then(res => {
+            setPayListCard({loading: false, data: res.data.result_list})
+        }).catch(err => {
+            console.log('PAYCARDLIST ERROR', err)
+            setPayListCard({loading: false, data: []})
+        })
+    }, [])
+
   return (
     <>
         <h1 className='mb-2 text-xl font-bold text-dark-gray dark:text-white'>Payment Method</h1>
@@ -125,18 +137,24 @@ function AddFundDollars(props) {
             {/* previous tab */}
             {tab == 'previous' ?
             <div className="p-4 previous-details w-full border min-h-[300px] flex flex-col justify-between items-center">
-            {previousCards?.data?.length ?
+            { payListCard.loading ?
+                <LoadingSpinner size='10' color='sky-blue' />
+                :
+                payListCard?.data?.length ?
                 <table className="my-3 w-full">
                     <tbody>
                     {currentPreviousCards.map((item, index)=>(
-                        <tr key={index}>
+                        <tr key={index} className={index != 0 && 'border-t-2'}>
                             <td>
-                                <div className='flex items-center gap-5'>
+                                <div className='my-2 flex items-center gap-5'>
                                     <input type="radio" className='w-8 h-8' name='card' value='value' />
                                     <div className='card-details'>
-                                        <h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>Master Card</h1>
-                                        <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************3535</p>
-                                        <p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
+                                        <h1 className='text-lg font-bold text-dark-gray dark:text-white tracking-wide'>{item.description} Card</h1>
+                                        <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>Bank **************{item.digits}</p>
+                                        <div className='w-full sm:flex items-center gap-5'>
+                                            <p className='text-base font-bold text-dark-gray dark:text-white tracking-wide'>{item.added}</p>
+                                            <p className='text-sm font-bold text-green-700 dark:text-white tracking-wide'>Verified</p>
+                                        </div>
                                     </div>
                                 </div>
                             </td>
@@ -168,7 +186,7 @@ function AddFundDollars(props) {
                 }
                 {/* PAGINATION BUTTON */}
                 <div className='w-full'>
-                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= previousCards?.data?.length ? true : false} data={previousCards?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+                    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= payListCard?.data?.length ? true : false} data={payListCard?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
                 </div>
                 {/* END OF PAGINATION BUTTON */}
             </div>

src/services/UsersService.js

@@ -719,6 +719,16 @@ class usersService {
     return this.postAuxEnd("/faq", postData);
   }
 
+  // END POINT TO GET LIST OF USER PREVIOUS CARDS
+  payListCard() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11055
+    };
+    return this.postAuxEnd("/paylistcard", postData);
+  }
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)