From f360056f037ff6b21e535f3f1c063c48bcbf1df8 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 25 Feb 2025 14:16:30 +0100
Subject: [PATCH] loan details screen added

---
 src/components/GetLoanScreens.jsx            |  8 ++++++-
 src/components/loan_screen/LoanDetails.jsx   | 23 ++++++++++++++++++++
 src/components/loan_screen/Offers.jsx        | 13 ++++++-----
 src/components/loan_screen/SelectedOffer.jsx | 14 +++++++-----
 4 files changed, 47 insertions(+), 11 deletions(-)
 create mode 100644 src/components/loan_screen/LoanDetails.jsx

diff --git a/src/components/GetLoanScreens.jsx b/src/components/GetLoanScreens.jsx
index 421f527..497839e 100644
--- a/src/components/GetLoanScreens.jsx
+++ b/src/components/GetLoanScreens.jsx
@@ -13,6 +13,7 @@ import LoanPin from './loan_screen/LoanPin';
 import SelectedOffer from './loan_screen/SelectedOffer';
 import GetLoan from './loan_screen/GetLoan';
 import TermsAndConditions from './loan_screen/TermsAndConditions';
+import LoanDetails from './loan_screen/LoanDetails';
 
 export default function GetLoanScreens() {
 
@@ -21,6 +22,7 @@ export default function GetLoanScreens() {
     terms_conditions: 'terms_conditions',
     getLoan: 'get-loan',
     pin: 'pin-screen',
+    loan_details: 'loan_details',
     offers: 'offers-screen',
     selected_offer: 'selected-offer-screen',
     loan_pin: 'loan-pin-screen'
@@ -138,7 +140,11 @@ export default function GetLoanScreens() {
               <>
                 <SelectedOffer step={step} handleStep={handleStep} screens={screens} />
               </>
-              : step?.screen[step.screen.length -1 ] == screens.loan_pin ?
+              :  step?.screen[step.screen.length -1 ] == screens.loan_details?
+              <>
+                <LoanDetails step={step} handleStep={handleStep} screens={screens} />
+              </>
+              :step?.screen[step.screen.length -1 ] == screens.loan_pin ?
               <>
                 <LoanPin step={step} handleStep={handleStep} screens={screens} />
               </>
diff --git a/src/components/loan_screen/LoanDetails.jsx b/src/components/loan_screen/LoanDetails.jsx
new file mode 100644
index 0000000..2aac7f0
--- /dev/null
+++ b/src/components/loan_screen/LoanDetails.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+
+export default function LoanDetails({step, handleStep, screens}) {
+
+    const handleGetLoan = () => {
+        handleStep({...step.details}, screens.loan_pin)
+    }
+
+  return (
+    <div className='mt-3 h-full flex flex-col gap-3'>
+        <p className='font-semibold text-base md:text-xl'>Loan Details</p>
+        <div className='text-input w-full flex flex-col gap-2 justify-center items-center'>
+            <p className='w-full text-base md:text-xl'>Loan Amount: ₦{step.details.selectedAmount}</p>
+            <p className='w-full text-base md:text-xl'>Interest 3%: ₦{step.details.selectedAmount*0.03}</p>
+            <p className='w-full text-base md:text-xl'>Mgt Fee 1%: ₦{step.details.selectedAmount*0.01}</p>
+            <p className='w-full text-base md:text-xl'>Insurance 1%: ₦{step.details.selectedAmount*0.01}</p>
+        </div>
+         <div className='mt-3 flex justify-center'>
+            <button onClick={handleGetLoan} className='p-3 bg-purple-800 text-lg sm:text-2xl text-white font-bold rounded'>Accept</button>
+         </div>
+    </div>
+  )
+}
diff --git a/src/components/loan_screen/Offers.jsx b/src/components/loan_screen/Offers.jsx
index 4b8014f..8ec0ab9 100644
--- a/src/components/loan_screen/Offers.jsx
+++ b/src/components/loan_screen/Offers.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useQuery } from "@tanstack/react-query";
 import { useMutation } from '@tanstack/react-query'
 import { IoIosArrowForward } from "react-icons/io";
@@ -8,6 +8,8 @@ import queryKeys from '../../services/queryKeys'
 
 export default function Offers({step, handleStep, screens}) {
 
+    const [selectedAmount, setSelectedAmount] = useState('')
+
     const {data, isFetching, isError, error} = useQuery({
         queryKey: queryKeys.offers,
         queryFn: () => getOffers()
@@ -16,11 +18,12 @@ export default function Offers({step, handleStep, screens}) {
     const offers = data?.data?.product_data?.offers // OFFERS LIST
 
     const selectedLoan = useMutation({
-        mutationFn: (loan) => {
-            let fields = {bvn:step.activeUser.bvn, loan}
+        mutationFn: (details) => {
+            let fields = {bvn:step.activeUser.bvn, loan: details.loan}
             // if(!fields.bvn){
             //     throw new Error('*')
             // }
+            setSelectedAmount(details.amount)
             return loanSelect(fields)
         },
         onError: (error) => {
@@ -28,7 +31,7 @@ export default function Offers({step, handleStep, screens}) {
         },
         onSuccess: (res) => {
             const selectedOffer = res.data.loan
-            handleStep({selectedOffer, ...res.data}, screens.selected_offer)
+            handleStep({selectedAmount, selectedOffer, ...res.data}, screens.selected_offer)
         }
         })
 
@@ -54,7 +57,7 @@ export default function Offers({step, handleStep, screens}) {
                             key={item?.cid} 
                             disabled={isDisabled || selectedLoan.isPending}
                             // value={item.loan} 
-                            onClick={()=>selectedLoan.mutate(item.loan)}
+                            onClick={()=>selectedLoan.mutate(item)}
                             className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 ${selectedLoan.isPending && 'bg-purple-800/50'} text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
                             >
                             {item?.description}
diff --git a/src/components/loan_screen/SelectedOffer.jsx b/src/components/loan_screen/SelectedOffer.jsx
index 93688c3..bcfe342 100644
--- a/src/components/loan_screen/SelectedOffer.jsx
+++ b/src/components/loan_screen/SelectedOffer.jsx
@@ -23,6 +23,10 @@ export default function SelectedOffer({step, handleStep, screens}) {
                 // throw new Error('*')
                 throw ({message:'Please enter amount'})
             }
+            if(fields.amount > Number(step.details.selectedAmount)){
+                // throw new Error('*')
+                throw ({message:`Please enter amount not more than ${step.details.selectedAmount}`})
+            }
             if(isNaN(amount)){
                 throw ({message:'Amount must be a valid figure'})
             }
@@ -34,20 +38,20 @@ export default function SelectedOffer({step, handleStep, screens}) {
         },
             onSuccess: (res) => {
             // const selectedOffer = res.data.loan[0].loan
-            handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_pin)
+            handleStep({loan_application_id:res.data.loan_application_id[0], ...step.details}, screens.loan_details)
         }
     })
 
     return (
         <div className='mt-3 flex flex-col gap-4'>
             <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
-                <p className='text-center text-base'>Tenor: 30 Days</p>
-                <Label name='Enter Loan Amount' htmlfor='amount' />
+                <p className='text-center text-base'>Your eligible loan amount is ₦{step.details.selectedAmount}</p>
+                <Label name='Please enter your desired loan amount' htmlfor='amount' />
                 <InputText id='amount' name='amount' type='text' value={amount} handleChange={handleAmountChange} />
-                <div className='flex flex-col gap-4'>
+                {/* <div className='flex flex-col gap-4'>
                     <p className='text-center text-base'>Upfront Interest 200 Naira</p>
                     <p className='text-center text-base'>Due Date: Next Salary or 30 Days</p>
-                </div>
+                </div> */}
                 <button onClick={()=>{apply.mutate()}} disabled={apply.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{apply.isPending ? 'loading...' : 'Continue'}</button>
             </div>