From 5a7adf45379f0aee81f6a220e58a5ef610bb65ac Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Wed, 4 Sep 2024 20:59:50 +0100 Subject: [PATCH] page page updated --- .../Dashboard/DashboardHomeIntro.tsx | 2 +- src/components/Dashboard/DashboardProfile.tsx | 159 +++++++++++------- .../Dashboard/PendingLoanPopout.tsx | 1 - src/components/Payment/Payment.tsx | 67 +++++++- src/core/apiRequest.ts | 9 + src/layouts/DashboardLayout/Aside.tsx | 2 +- ...ntsPage.tsx => DashboardReferencePage.tsx} | 2 +- src/pages/PaymentPage.tsx | 4 +- src/pages/index.ts | 4 +- src/router/Router.tsx | 6 +- src/router/routes.tsx | 2 +- 11 files changed, 182 insertions(+), 76 deletions(-) rename src/pages/{DashboardPaymentsPage.tsx => DashboardReferencePage.tsx} (74%) diff --git a/src/components/Dashboard/DashboardHomeIntro.tsx b/src/components/Dashboard/DashboardHomeIntro.tsx index c682f99..9087823 100644 --- a/src/components/Dashboard/DashboardHomeIntro.tsx +++ b/src/components/Dashboard/DashboardHomeIntro.tsx @@ -210,7 +210,7 @@ const DashboardHomeIntro: FC = ({ - diff --git a/src/components/Dashboard/DashboardProfile.tsx b/src/components/Dashboard/DashboardProfile.tsx index 33e187f..3c6bb60 100644 --- a/src/components/Dashboard/DashboardProfile.tsx +++ b/src/components/Dashboard/DashboardProfile.tsx @@ -1,72 +1,111 @@ -import { InputCompOne } from ".."; - import { useNavigate } from "react-router-dom"; +import { useSelector } from "react-redux"; +import {Formik, Form} from 'formik' +import * as Yup from "yup"; + import { RouteHandler } from "../../router/routes"; +import { Button, InputCompOne } from ".."; + +// To get the validation schema +const validationSchema = Yup.object().shape({ + firstname: Yup.string() + .required("Required"), + lastname: Yup.string() + .required("Required"), + internal_email : Yup.string().required("Required").email("Invalid"), +}); + export default function DashboardProfile() { let navigate = useNavigate(); - const navigateToProfile = () => navigate(RouteHandler.dashboardHome); + const navigateToHome = () => navigate(RouteHandler.dashboardHome); + + + const { userDetails } = useSelector((state:any) => state?.userDetails); // GETS USER DETAILS + + const initialValues = { + firstname: userDetails.firstname, + lastname: userDetails.lastname, + internal_email: userDetails.internal_email + }; + + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = (values:any) => { + console.log('good', values) + }; + return (
+
- -
-
- - - - - - +
+ + + {(props)=>( +
+
+
+ + +
+ +
+ +
+
+ +
+
+
+
+
+ )} +
); } diff --git a/src/components/Dashboard/PendingLoanPopout.tsx b/src/components/Dashboard/PendingLoanPopout.tsx index e3c9679..68544cc 100644 --- a/src/components/Dashboard/PendingLoanPopout.tsx +++ b/src/components/Dashboard/PendingLoanPopout.tsx @@ -12,7 +12,6 @@ interface Props { } export default function PendingLoanPopout({data, action}:Props) { - console.log('MUMU', data) const [addCardStatus, setAddCardStatus] = useState<{ loading: boolean; diff --git a/src/components/Payment/Payment.tsx b/src/components/Payment/Payment.tsx index 92feb3a..276fae9 100644 --- a/src/components/Payment/Payment.tsx +++ b/src/components/Payment/Payment.tsx @@ -1,5 +1,64 @@ -export default function Payment() { - return ( -
Payment Page
- ) +import {useEffect, useState} from 'react' +import { getPaymentDetails } from '../../core/apiRequest' + +type Props = { + reference: string | null } + +// type PaymentPayloads = { +// uid?: string +// event?: string +// customer_code?: string +// plan_name?: string +// plan_code?: string +// subscription_code?: string | null, +// amount?: string +// authorization_code?: string +// gateway_response?: string +// gateway_status?: string +// reference?: string +// added?: string +// } + +export default function Payment({reference}:Props) { + + const [paymentDetails, setPaymentDetails] = useState({ + loading: true, + data: {} + }) + + useEffect(()=>{ + getPaymentDetails({reference}).then(res => { + setPaymentDetails({loading:false, data:res?.data?.payment}) + console.log(res?.data?.payment) + }).catch(err => { + setPaymentDetails({loading:false, data:{}}) + console.log(err) + }) + },[]) + + return ( +
+
+

Confirmation

+
+ {paymentDetails.loading ? +

Loading...

+ : + (paymentDetails?.data && Object.keys(paymentDetails?.data).length > 0) ? + <> + {Object.keys(paymentDetails?.data).map((item) => ( +
+

{item}

+

{paymentDetails?.data[item]}

+
+ ))} + + : +

No Payment Found!

+ } +
+
+
+ ) +} \ No newline at end of file diff --git a/src/core/apiRequest.ts b/src/core/apiRequest.ts index 0b8f713..2005624 100644 --- a/src/core/apiRequest.ts +++ b/src/core/apiRequest.ts @@ -67,6 +67,15 @@ export const getLoanDetail = (postData:any) => { return getAuxEnd(`/loan/loandetail?uid=${reqData?.uid}&application_uid=${reqData?.application_uid}`, null) } +// FUNCTION TO GET PAYMENT DETAILS +export const getPaymentDetails = (postData:any) => { + let reqData = { + uid: localStorage.getItem('uid'), + ...postData + } + return getAuxEnd(`/payment/status?uid=${reqData?.uid}&reference=${reqData?.reference}`, null) +} + // FUNCTION TO ADD CARD export const addCard = (postData:any) => { let reqData = { diff --git a/src/layouts/DashboardLayout/Aside.tsx b/src/layouts/DashboardLayout/Aside.tsx index 2b964a9..a974c2c 100644 --- a/src/layouts/DashboardLayout/Aside.tsx +++ b/src/layouts/DashboardLayout/Aside.tsx @@ -207,7 +207,7 @@ const asideLinks: AsideLinksType = [ }, { name: 'Reference Details', - link: '/dashboard/payments', + link: "/dashboard/reference", icon: 'dash-icon', nestedLink: [], }, diff --git a/src/pages/DashboardPaymentsPage.tsx b/src/pages/DashboardReferencePage.tsx similarity index 74% rename from src/pages/DashboardPaymentsPage.tsx rename to src/pages/DashboardReferencePage.tsx index 3199927..1d025e7 100644 --- a/src/pages/DashboardPaymentsPage.tsx +++ b/src/pages/DashboardReferencePage.tsx @@ -1,6 +1,6 @@ import ReferenceDetails from "../components/Dashboard/referenceDetails/ReferenceDetails"; -export default function DashboardpaymentsPage() { +export default function DashboardReferencePage() { return ( <> diff --git a/src/pages/PaymentPage.tsx b/src/pages/PaymentPage.tsx index 63b1b86..f5a826d 100644 --- a/src/pages/PaymentPage.tsx +++ b/src/pages/PaymentPage.tsx @@ -9,7 +9,7 @@ export default function PaymentPage() { const queryParams = new URLSearchParams(location?.search); const trxRef = queryParams.get("trxref"); const reference = queryParams.get("reference"); - console.log('LOC', trxRef, reference) + // console.log('TEST', trxRef, reference) useEffect(()=>{ if(!trxRef || !reference){ @@ -18,7 +18,7 @@ export default function PaymentPage() { },[]) return ( <> - + ) } diff --git a/src/pages/index.ts b/src/pages/index.ts index 1171677..63072f2 100644 --- a/src/pages/index.ts +++ b/src/pages/index.ts @@ -5,7 +5,7 @@ import DashboardHomePage from "./DashboardHomePage"; import DashboardLegalsPage from "./DashboardLegalsPage"; import DashboardProfilePage from "./DashboardProfilePage"; import DashboardVerificationPage from "./DashboardVerificationPage"; -import DashboardpaymentsPage from "./DashboardPaymentsPage"; +import DashboardReferencePage from "./DashboardReferencePage"; import TermsAndConditionPage from "./TermsAndConditionPage"; import PersonalBankingPage from "./PersonalBankingPage"; import BusinessBankingPage from "./BusinessBankingPage"; @@ -21,7 +21,7 @@ export { DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, - DashboardpaymentsPage, + DashboardReferencePage, TermsAndConditionPage, PersonalBankingPage, BusinessBankingPage, diff --git a/src/router/Router.tsx b/src/router/Router.tsx index b5672bd..beb8e6f 100644 --- a/src/router/Router.tsx +++ b/src/router/Router.tsx @@ -8,7 +8,7 @@ import { DashboardLegalsPage, DashboardProfilePage, DashboardVerificationPage, - DashboardpaymentsPage, + DashboardReferencePage, TermsAndConditionPage, BusinessBankingPage, CooperateBankingPage, @@ -60,8 +60,8 @@ const Routers = () => { element={} /> } + path={RouteHandler.dashboardReference} + element={} />