favicon added

public/index.html

@@ -7,7 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="digiFi global back office systems"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--

src/components/GetLoan.jsx

@@ -128,7 +128,7 @@ export default function GetLoan() {
             }
 
             <div className='absolute left-0 bottom-1 w-full flex justify-center items-center'>
-              <Link to={myLinks.home} className='text-center border-b border-transparent hover:border-purple-400'>Back to <span className='text-purple-400 '>Home</span></Link>
+              <Link to={myLinks.home} className='font-semibold text-center border-b border-transparent hover:border-purple-400'>Back to <span className='text-purple-400 '>Home</span></Link>
             </div>
 
 

src/components/loan_screen/LoanPin.jsx

@@ -29,7 +29,7 @@ export default function LoanPin({step, handleStep, screens}) {
         <>
         {!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'>
+                <div className='text-input font-semibold w-full 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>
@@ -37,7 +37,7 @@ export default function LoanPin({step, handleStep, screens}) {
             </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'>
+                <div className='text-input font-semibold w-full 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>

src/components/loan_screen/Offers.jsx

@@ -21,7 +21,7 @@ export default function Offers({step, handleStep, screens}) {
 
     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'>
+            <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
                 {isFetching ? 
                     <>
                         <div className="w-full py-4">

src/components/loan_screen/Pin.jsx

@@ -7,12 +7,12 @@ import { verifyPin } from '../../services/siteServices'
 
 export default function Pin({step, handleStep, screens}) {
 
-    const [error, SetError] = useState('')
+    const [error, setError] = useState('')
 
     const [pin, setPin] = useState('')
 
     const handlePinChange = ({target:{value}}) => {
-        SetError('')
+        setError('')
         setPin(value)
     }
 
@@ -20,12 +20,12 @@ export default function Pin({step, handleStep, screens}) {
         mutationFn: () => {
             let fields = {pin, bvn:step.activeUser.bvn}
             if(!fields.pin){
-                throw new Error('Please enter pin *')
+                throw new Error('*')
             }
             return verifyPin(fields)
         },
         onError: (error) => {
-            console.log(error)
+            setError('*')
         },
           onSuccess: (res) => {
             handleStep(step.details, screens.offers)
@@ -44,17 +44,19 @@ export default function Pin({step, handleStep, screens}) {
 
     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'>
+            {(!proceed.error || proceed?.error?.message == '*') &&
-                <Label name='Enter your pin' htmlfor='pin' error={error} />
+                <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
-                <InputText id='pin' name='pin' type='text' value={pin} handleChange={handlePinChange} />
+                    <Label name='Enter your pin' htmlfor='pin' error={error} />
-                <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>
+                    <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> */}
+                    <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>
-            </div>
+                    {/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
+                </div>
+            }
 
-            {proceed.error &&
+            {(proceed.error && proceed.error.message != '*') &&
             <>
                 <div className="w-full text-center p-2">
-                <p className='text-red-500 text-sm'>{proceed.error.message}</p>
+                <p className='text-red-500 font-semibold text-base sm:text-3xl'>{proceed.error.message}</p>
             </div>
             </>
             }

src/components/loan_screen/SelectedOffer.jsx

@@ -13,7 +13,7 @@ export default function SelectedOffer({step, handleStep, screens}) {
 
     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'>
+            <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='pin' />
                 <InputText id='pin' name='pin' type='text' value={pin} handleChange={(e)=>setPin(e.target.value)} />