diff --git a/src/components/CustomSpinner.tsx b/src/components/CustomSpinner.tsx new file mode 100644 index 0000000..0149eee --- /dev/null +++ b/src/components/CustomSpinner.tsx @@ -0,0 +1,17 @@ +type Props = { + width?: string + height?: string +} + +export default function CustomSpinner({width='w-6', height='h-6'}:Props) { + + return ( +
+ + {/* Loading... */} +
+ ) +} diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index 055fa66..a53221b 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -108,8 +108,6 @@ const DashboardHomeIntro: FC = ({ } 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 = ({ setUserLoanList({ loading: false, data: res?.data?.loans }); }) .catch((err) => { - console.log(err); setUserLoanList({ loading: false, data: [] }); }); }, []); diff --git a/src/components/Dashboard/PendingLoanPopout.tsx b/src/components/Dashboard/PendingLoanPopout.tsx index f382fd2..bb62a32 100644 --- a/src/components/Dashboard/PendingLoanPopout.tsx +++ b/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 { - action?: ()=>void + action: ()=>void data?: T } export default function PendingLoanPopout({data, action}:Props) { - 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 ( @@ -67,7 +97,11 @@ export default function PendingLoanPopout({data, action}:Props
- + {addCardStatus.loading ? + + : + + }
diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx new file mode 100644 index 0000000..a2c9117 --- /dev/null +++ b/src/components/Payment/Payment.tsx @@ -0,0 +1,7 @@ +import React from 'react' + +export default function Payment() { + return ( +
Payment Page
+ ) +} diff --git a/src/core/apiRequest.ts b/src/core/apiRequest.ts index ce5555b..f05eb95 100644 --- a/src/core/apiRequest.ts +++ b/src/core/apiRequest.ts @@ -48,4 +48,13 @@ export const getEmployersList = () => { // customer_uid: localStorage.getItem('uid'), } return getAuxEnd(`/employers`, reqData) +} + +// FUNCTION TO ADD CARD +export const addCard = (postData:any) => { + let reqData = { + uid: localStorage.getItem('uid'), + ...postData + } + return postAuxEnd('/addcard', reqData) } \ No newline at end of file diff --git a/src/pages/PaymentPage.tsx b/src/pages/PaymentPage.tsx new file mode 100644 index 0000000..c7f721a --- /dev/null +++ b/src/pages/PaymentPage.tsx @@ -0,0 +1,24 @@ +import React, {useEffect} from 'react' +import {useLocation, useNavigate} from 'react-router-dom' +import Payment from '../components/Payment/Payment' +import { RouteHandler } from '../router/routes' + +export default function PaymentPage() { + const location = useLocation() + const navigate = useNavigate() + const queryParams = new URLSearchParams(location?.search); + const trxRef = queryParams.get("trxref"); + const reference = queryParams.get("reference"); + console.log('LOC', trxRef, reference) + + useEffect(()=>{ + if(!trxRef || !reference){ + navigate(RouteHandler.dashboardHome, {replace:true}) + } + },[]) + return ( + <> + + + ) +} diff --git a/src/pages/index.ts b/src/pages/index.ts index 2655483..1171677 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -11,6 +11,7 @@ import PersonalBankingPage from "./PersonalBankingPage"; import BusinessBankingPage from "./BusinessBankingPage"; import CooperateBankingPage from "./CooperateBankingPage"; import LetsGetStatedPage from "./LetsGetStatedPage"; +import PaymentPage from "./PaymentPage"; export { HomePage, @@ -25,5 +26,6 @@ export { PersonalBankingPage, BusinessBankingPage, CooperateBankingPage, - LetsGetStatedPage + LetsGetStatedPage, + PaymentPage }; diff --git a/src/router/Router.tsx b/src/router/Router.tsx index b4241e1..b5672bd 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -14,6 +14,7 @@ import { CooperateBankingPage, PersonalBankingPage, LetsGetStatedPage, + PaymentPage } from "../pages"; import { DashboardAuth } from "../layouts"; @@ -66,6 +67,10 @@ const Routers = () => { path={RouteHandler.dashboardLegals} element={} /> + } + /> Error Page} /> diff --git a/src/router/routes.tsx b/src/router/routes.tsx index 75431f5..44f5eba 100644 --- a/src/router/routes.tsx +++ b/src/router/routes.tsx @@ -12,4 +12,5 @@ export class RouteHandler { static dashboardPayments = "/dashboard/payments"; static dashboardLegals = "/dashboard/legals"; static termsAndConditions = "/terms-and-conditions"; + static paymentpage = "/payment"; }