page page updated

2024-09-04 20:59:50 +01:00
parent 45d5bd870f
commit 5a7adf4537
11 changed files with 182 additions and 76 deletions
@@ -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>
@@ -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>
  );
 }
@@ -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;
@@ -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>
+  )
+}