DigiFi/digifi-www
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Merge branch 'payment-page-update' of DigiFi/digifi-www into master

Browse Source
This commit is contained in:
Olusesan Ameye
2024-09-04 20:22:49 +00:00
committed by Gogs
parent 45d5bd870f 5a7adf4537
commit ceb1658cdc
11 changed files with 182 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Dashboard/DashboardHomeIntro.tsx
+1 -1
View File
@@ -210,7 +210,7 @@ const DashboardHomeIntro: FC<DashboardHomeIntroProps> = ({
</button>
</td>
<td className="flex justify-end px-1 py-2 text-right">
<button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black" onClick={()=>navigate(RouteHandler.dashboardPayments, {state:{application_uid: item?.application_uid}})}>
<button className="flex flex-nowrap items-center px-2 py-1 border-2 border-black" onClick={()=>navigate(RouteHandler.dashboardReference, {state:{application_uid: item?.application_uid}})}>
View
<Icons name="arrow-right" />
</button>
src/components/Dashboard/DashboardProfile.tsx
+99 -60
View File
@@ -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 (
<div className="w-full">
<div className='my-[2rem] flex items-center'>
<button onClick={navigateToProfile} className='w-6 h-6 text-lg flex justify-center items-center rounded-full bg-gray-500'>&lt;</button>
</div>
<div className="max-w-[25.875rem] w-full p-4 rounded-xl flex flex-col gap-1 bg-[#FBB700]/30">
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Full name"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="John James"
/>
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Phone number"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="07000000000"
/>
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Residential address"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="Somewhere in lagos"
/>
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Select your state"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="Lagos"
/>
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Email address"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="johndoe@gmail.com"
/>
<InputCompOne
parentClass="max-w-[25.875rem] w-full flex flex-col gap-4"
name="applyIshInput"
label="Date of birth"
labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="12/10/1994"
/>
<button onClick={navigateToHome} className='py-2 px-4 text-lg text-white flex justify-center items-center bg-[#5C2684]'>&lt; Back</button>
</div>
<Formik
initialValues={initialValues}
validationSchema={validationSchema}
onSubmit={handleSubmit}
>
{(props)=>(
<Form>
<div className="flex flex-col lg:flex-row items-start gap-[2rem]">
<div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
<InputCompOne
parentClass="w-full"
name="firstname"
floatLabel="Firstname"
// labelClass="font-bold text-[1.125rem]"
input
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="Mr. Mark John"
value={props.values.firstname}
onChange={props.handleChange}
// error={(props.errors.firstname && props.touched.firstname) ? props.errors.firstname : ''}
/>
<InputCompOne
parentClass="w-full"
name="internal_email"
floatLabel="Email"
// labelClass="font-bold text-[1.125rem]"
input
// disabled={true}
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="Mr. Mark John"
value={props.values.internal_email}
onChange={props.handleChange}
// error={(props.errors.internal_email && props.touched.internal_email) ? props.errors.internal_email : ''}
/>
</div>
<div className='w-full lg:max-w-[30rem] flex flex-col gap-[2rem]'>
<InputCompOne
parentClass="w-full"
name="lastname"
floatLabel="Lastname"
// labelClass="font-bold text-[1.125rem]"
input
// disabled={true}
inputClass="w-full h-[3.625rem] bg-[#EFEFEF] px-4 rounded-[.375rem]"
placeholder="Mr. Mark John"
value={props.values.lastname}
onChange={props.handleChange}
// error={(props.errors.lastname && props.touched.lastname) ? props.errors.lastname : ''}
/>
</div>
</div>
<div className='hidden w-full lg:max-w-[416px] flex flex-col gap-[2rem]'>
<div className="w-full">
<Button
className="my-4 btn-Y text-black w-full h-11"
text="Update"
type="submit"
/>
</div>
</div>
</Form>
)}
</Formik>
</div>
);
}
src/components/Dashboard/PendingLoanPopout.tsx
-1
View File
@@ -12,7 +12,6 @@ interface Props<T> {
}
export default function PendingLoanPopout({data, action}:Props<PendingTableList>) {
console.log('MUMU', data)
const [addCardStatus, setAddCardStatus] = useState<{
loading: boolean;
src/components/Payment/Payment.tsx
+63 -4
View File
@@ -1,5 +1,64 @@
export default function Payment() {
return (
<div>Payment Page</div>
)
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<any>({
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 (
<div className='w-full'>
<div className='p-4'>
<h1 className='p-2 mb-3 text-2xl'>Confirmation</h1>
<div className='p-8 w-full max-w-2xl bg-white shadow-md rounded-md'>
{paymentDetails.loading ?
<p>Loading...</p>
:
(paymentDetails?.data && Object.keys(paymentDetails?.data).length > 0) ?
<>
{Object.keys(paymentDetails?.data).map((item) => (
<div key={item} className='p-2 flex gap-1'>
<p className='w-64 font-semibold'>{item}</p>
<p className=''>{paymentDetails?.data[item]}</p>
</div>
))}
</>
:
<p className='p-2'>No Payment Found!</p>
}
</div>
</div>
</div>
)
}
src/core/apiRequest.ts
+9
View File
@@ -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 = {
src/layouts/DashboardLayout/Aside.tsx
+1 -1
View File
@@ -207,7 +207,7 @@ const asideLinks: AsideLinksType = [
},
{
name: 'Reference Details',
link: '/dashboard/payments',
link: "/dashboard/reference",
icon: 'dash-icon',
nestedLink: [],
},
src/pages/DashboardPaymentsPage.tsx → src/pages/DashboardReferencePage.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import ReferenceDetails from "../components/Dashboard/referenceDetails/ReferenceDetails";
export default function DashboardpaymentsPage() {
export default function DashboardReferencePage() {
return (
<>
<ReferenceDetails />
src/pages/PaymentPage.tsx
+2 -2
View File
@@ -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 (
<>
<Payment />
<Payment reference={reference} />
</>
)
}
src/pages/index.ts
+2 -2
View File
@@ -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,
src/router/Router.tsx
+3 -3
View File
@@ -8,7 +8,7 @@ import {
DashboardLegalsPage,
DashboardProfilePage,
DashboardVerificationPage,
DashboardpaymentsPage,
DashboardReferencePage,
TermsAndConditionPage,
BusinessBankingPage,
CooperateBankingPage,
@@ -60,8 +60,8 @@ const Routers = () => {
element={<DashboardVerificationPage />}
/>
<Route
path={RouteHandler.dashboardPayments}
element={<DashboardpaymentsPage />}
path={RouteHandler.dashboardReference}
element={<DashboardReferencePage />}
/>
<Route
path={RouteHandler.dashboardLegals}
src/router/routes.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ export class RouteHandler {
static dashboardHome = "/dashboard/home";
static dashboardProfile = "/dashboard/profile";
static dashboardVerification = "/dashboard/verification";
static dashboardPayments = "/dashboard/payments";
static dashboardReference = "/dashboard/reference";
static dashboardLegals = "/dashboard/legals";
static termsAndConditions = "/terms-and-conditions";
static paymentpage = "/payment";