added add card API

src/components/Dashboard/DashboardHomeIntro.tsx

@@ -108,8 +108,6 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
     }
     getUserPendingLoanList(uid)
       .then((res) => {
-        console.log('RES', res);
-        console.log('RES', userLoanList);
         if (!res || !res.data.loans) {
           setUserLoanList({ loading: false, data: [] });
           return;
@@ -117,7 +115,6 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
         setUserLoanList({ loading: false, data: res?.data?.loans });
       })
       .catch((err) => {
-        console.log(err);
         setUserLoanList({ loading: false, data: [] });
       });
   }, []);

src/components/Dashboard/PendingLoanPopout.tsx

@@ -1,17 +1,47 @@
-import React from 'react'
+import React, {useState} from 'react'
 import ModalWrapper from '../modal/ModalWrapper'
 import { PendingTableList } from '../../core/models'
 import { NewDateTimeFormatter } from '../../lib/NewDateTimeFormatter'
+import { addCard } from '../../core/apiRequest'
+import CustomSpinner from '../CustomSpinner'
 
 
 interface Props<T> {
-    action?: ()=>void
+    action: ()=>void
     data?: T
   }
 
 export default function PendingLoanPopout({data, action}:Props<PendingTableList>) {
-    const addCard = () => {
-        console.log('good')
+
+    const [addCardStatus, setAddCardStatus] = useState<{
+        loading: boolean;
+        status: boolean
+        msg: string
+      }>({ loading: false, status: false, msg: ''});
+
+    const handleAddCard = (appID:string) => {
+        let reqData = {
+            application_uid: appID
+
+        }
+        setAddCardStatus({ loading: true, status: false, msg: ''})
+        addCard(reqData).then(res => {
+            if(res?.data?.call_return != '100'){
+                setAddCardStatus({ loading: false, status: false, msg: 'failed to add card'})
+                setTimeout(()=>{
+                    setAddCardStatus({ loading: false, status: false, msg: ''})
+                },3000)
+            }
+            window.location.href = res?.data?.redirect_url
+            setAddCardStatus({ loading: false, status: true, msg: 'card added'})
+            action() // TO CLOSE MODAL
+        }).catch(err => {
+            setAddCardStatus({ loading: false, status: false, msg: 'failed to add card'})
+            console.log('ERR', err)
+            setTimeout(()=>{
+                setAddCardStatus({ loading: false, status: false, msg: ''})
+            },3000)
+        })
     }
   return (
     <ModalWrapper>
@@ -67,7 +97,11 @@ export default function PendingLoanPopout({data, action}:Props<PendingTableList>
         </div>
         <div className='modal-footer'>
             <button onClick={action} name='cancel' className='custom-btn text-red-500 border border-red-500 hover:text-red-700'>Cancel</button>
-            <button onClick={addCard} name='proceed' className='custom-btn border border-sky-500 text-sky-500 hover:text-sky-700'>Add Card</button>
+            {addCardStatus.loading ? 
+            <CustomSpinner width='w-6' height='h-6' />
+            :
+            <button onClick={()=>handleAddCard(data?.application_uid)} name='proceed' className={`custom-btn border border-sky-500 text-sky-500 hover:text-sky-700 ${addCardStatus.loading && 'opacity-20 pointer-events-none'}`}>Add Card</button>
+            }
         </div>
         </div>
     </ModalWrapper>