get loan more screens added

2025-02-10 00:45:03 +01:00
parent ec210390b3
commit ab7657d07f
9 changed files with 265 additions and 27 deletions
@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import Label from '../Label'
+import InputText from '../InputText'
+
+export default function LoanPin({step, handleStep, screens}) {
+
+    const [error, SetError] = useState('')
+
+    const [pin, setPin] = useState('')
+
+    const handlePinChange = ({target:{value}}) => {
+        SetError('')
+        setPin(value)
+    }
+
+    const [isSuccess, setIsSuccess] = useState(false)
+
+    const handleContinue = () => {
+        if(!pin){
+            SetError('enter pin')
+            return setTimeout(()=>{
+                SetError('')
+            }, 5000)
+        }
+        setIsSuccess(prev => !prev)
+    }
+
+    return (
+        <>
+        {!isSuccess ?
+            <div className='mt-3 flex flex-col gap-4'>
+                <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
+                    <Label name='Enter your pin' htmlfor='pin' error={error} />
+                    <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
+                    <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                </div>
+            </div>
+        :
+            <div className='mt-3 flex flex-col gap-4'>
+                <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
+                    <p className='text-center text-base md:text-xl'>Loan request has been accepted</p>
+                    <p className='text-center text-base md:text-xl'>You will get an sms with result shortly</p>
+                </div>
+            </div>
+        }
+
+        </>
+    )
+}
@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+import { useQuery } from "@tanstack/react-query";
+import { TiArrowSortedDown } from "react-icons/ti";
+
+import { getOffers } from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys'
+import Label from '../Label';
+
+export default function Offers({step, handleStep, screens}) {
+
+    const [isEmpty, setIsEmpty] = useState('')
+
+    const [selectedOffer, setSelectedOffer] = useState('')
+
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: queryKeys.offers,
+        queryFn: () => getOffers()
+    })
+  
+    const offers = data?.data?.product_data?.offers // OFFERS LIST
+
+    const handleContinue = () => {
+        if(!selectedOffer){
+            setIsEmpty('*')
+            return setTimeout(()=>{
+                setIsEmpty('')
+            }, 5000)
+        }
+        handleStep({selectedOffer, ...step.details}, screens.selected_offer)
+    }
+
+    const handleChange = ({target:{value}}) => {
+        setIsEmpty('')
+        setSelectedOffer(value)
+    }
+
+    return (
+        <div className='mt-3 flex flex-col gap-4'>
+            <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
+                <Label name='Enter Loan Amount' htmlfor='pin' error={isEmpty} />
+                {isFetching ? 
+                    <>
+                        <div className="w-full py-4">
+                          <p className='text-slate-800 text-center'>Loading...</p>
+                        </div>
+                    </>
+                    : isError ?
+                    <div className="w-full py-4">
+                      <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>
+                }
+                <>
+                </>
+                <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'
+]
@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { useMutation } from '@tanstack/react-query'
+
+import Label from '../Label'
+import InputText from '../InputText'
+
+export default function Pin({step, handleStep, screens}) {
+
+    const [error, SetError] = useState('')
+
+    const [pin, setPin] = useState('')
+
+    const handlePinChange = ({target:{value}}) => {
+        SetError('')
+        setPin(value)
+    }
+
+    const proceed = useMutation({
+        mutationFn: () => {
+            let fields = {pin, ...step.details}
+            if(!fields.pin){
+                throw new Error('Please enter pin *')
+            }
+            // return loginUser(fields)
+        },
+        onError: (error) => {
+            console.log(error)
+        },
+          onSuccess: (res) => {
+            handleStep(step.details, screens.offers)
+        }
+      })
+
+      const handleContinue = () => {
+        if(!pin){
+            SetError('enter pin')
+            return setTimeout(()=>{
+                SetError('')
+            }, 5000)
+        }
+        handleStep(step.details, screens.offers)
+    }
+
+    return (
+        <div className='mt-3 flex flex-col gap-4'>
+            <div className='text-input font-semibold w-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
+                <Label name='Enter your pin' htmlfor='pin' error={error} />
+                <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
+                {/* <button onClick={()=>{proceed.mutate()}} disabled={proceed.isPending} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>{proceed.isPending ? 'loading...' : 'Continue'}</button> */}
+                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+            </div>
+
+            {proceed.error &&
+            <>
+                <div className="w-full text-center p-2">
+                <p className='text-red-500 text-sm'>{proceed.error.message}</p>
+            </div>
+            </>
+            }
+        </div>
+    )
+}
@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import Label from '../Label'
+import InputText from '../InputText'
+
+export default function SelectedOffer({step, handleStep, screens}) {
+
+    const [pin, setPin] = useState('')
+
+    console.log(step.details)
+    const handleContinue = () => {
+        handleStep(step.details, screens.loan_pin)
+    }
+
+    return (
+        <div className='mt-3 flex flex-col gap-4'>
+            <div className='text-input font-semibold w-[70%] mx-auto 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='pin' />
+                <InputText id='pin' name='pin' type='text' value={pin} handleChange={(e)=>setPin(e.target.value)} />
+                <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>
+                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+            </div>
+        </div>
+    )
+}