loan select API added

src/components/GetLoan.jsx

@@ -31,8 +31,8 @@ export default function GetLoan() {
     activeUser: state.user
   })
 
-  const handleStep = (details, screen) => {
-    setStep(prev => ({...prev, details, screen: [...prev.screen, screen]}))
+  const handleStep = (detailsToAdd, screen) => {
+    setStep(prev => ({...prev, details: {...prev.details, ...detailsToAdd}, screen: [...prev.screen, screen]}))
   }
 
   const {data, isFetching, isError, error} = useQuery({

src/components/loan_screen/Offers.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { useQuery } from "@tanstack/react-query";
+import { useMutation } from '@tanstack/react-query'
 import { IoIosArrowForward } from "react-icons/io";
 
-import { getOffers } from '../../services/siteServices'
+import { getOffers, loanSelect } from '../../services/siteServices'
 import queryKeys from '../../services/queryKeys'
-import Label from '../Label';
 
 export default function Offers({step, handleStep, screens}) {
 
@@ -15,9 +15,22 @@ export default function Offers({step, handleStep, screens}) {
   
     const offers = data?.data?.product_data?.offers // OFFERS LIST
 
-    const handleContinue = ({target:{value}}) => {
-        handleStep({selectedOffer:value, ...step.details}, screens.selected_offer)
-    }
+    const selectedLoan = useMutation({
+        mutationFn: (loan) => {
+            let fields = {bvn:step.activeUser.bvn, loan}
+            // if(!fields.bvn){
+            //     throw new Error('*')
+            // }
+            return loanSelect(fields)
+        },
+        onError: (error) => {
+            // setError('*')
+        },
+        onSuccess: (res) => {
+            const selectedOffer = res.data.loan[0].loan
+            handleStep({selectedOffer, ...res.data.loan[0]}, screens.selected_offer)
+        }
+        })
 
     return (
         <div className='mt-3 flex flex-col gap-4'>
@@ -33,32 +46,18 @@ export default function Offers({step, handleStep, screens}) {
                       <p className='text-red-500 text-center'>{error.message}</p>
                     </div>
                     :
-                    // <div className='relative w-full h-12'>
-                    //     <TiArrowSortedDown className='text-sm absolute right-1 top-1/2 -translate-y-1/2' />
-                    //     <select className='px-2 w-full h-full appearance-none rounded' value={selectedOffer} onChange={handleChange}>
-                    //         <option value={''}>Select offer</option>
-                    //         {offers.map(item => {
-                    //             if(item.active){
-                    //                     return (
-                    //                         <option key={item.cid} value={item.description}>{item.description}</option>
-                    //                     )
-                    //                 }
-                    //             }
-                    //         )}
-                    //     </select>
-                    // </div>
                     <>
                     {offers.map(item => {
                         let isDisabled = item.active == '0' ? true : false
                         return (
                             <button 
                             key={item?.cid} 
-                            disabled={isDisabled}
-                            value={item.description} 
-                            onClick={handleContinue}
-                            className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
+                            disabled={isDisabled || selectedLoan.isPending}
+                            // value={item.loan} 
+                            onClick={()=>selectedLoan.mutate(item.loan)}
+                            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'}`} 
                             >
-                            <span>{item?.description}</span>
+                            {item?.description}
                             <IoIosArrowForward />
                             </button>
                         )
@@ -67,13 +66,23 @@ export default function Offers({step, handleStep, screens}) {
                 }
                 <>
                 </>
+
+                {selectedLoan.isPending &&
+                    <div className="w-full text-center p-2">
+                        <p className='text-sm'>loading...</p>
+                    </div>
+                }
+
+                {selectedLoan.error &&
+                <>
+                <div className="w-full text-center p-2">
+                    <p className='text-red-500 text-sm'>{selectedLoan.error.message}</p>
+                </div>
+                </>
+                }
+
                 {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
             </div>
         </div>
     )
-}
-
-
-const dummyData = [
-    '100,000 Naira for 30 Days', '200,000 Naira for 30 Days', '100,000 Naira for 60 Days', '200,000 Naira for 60 Days'
-]
+}

src/components/loan_screen/SelectedOffer.jsx

@@ -6,7 +6,7 @@ export default function SelectedOffer({step, handleStep, screens}) {
 
     const [pin, setPin] = useState('')
 
-    console.log(step.details)
+    console.log(step)
     const handleContinue = () => {
         handleStep(step.details, screens.loan_pin)
     }

src/services/siteServices.js

@@ -58,6 +58,14 @@ export const verifyPin = (reqData) => {
     return postAuxEnd('/salary/verifypin', postData, false)
 }
 
+// FUNCTION TO RUN WHEN USER SELECTS A LOAN
+export const loanSelect = (reqData) => {
+    let postData = {
+        ...reqData
+    }
+    return postAuxEnd('/salary/loanselect', postData, false)
+}
+
 // FUNCTION TO GET DEMO USERS
 export const demoUsersList = (reqData) => {
     const postData = { ...reqData }