next page screen added

src/components/GetLoan.jsx

@@ -5,8 +5,8 @@ import { useQuery } from "@tanstack/react-query";
 import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 
 import myLinks from '../myLinks'
-// import Label from './Label'
+import Label from './Label'
-// import InputText from './InputText'
+import InputText from './InputText'
 import queryKeys from '../services/queryKeys';
 import { getProducts } from '../services/siteServices';
 
@@ -15,13 +15,31 @@ export default function LoginCom() {
   const {state} = useLocation()
   const navigate = useNavigate()
 
+  const [pin, setPin] = useState('')
+
+  const [step, setStep] = useState({
+    details: {},
+    page: 1
+  })
+
+  const handleStep = (details, page) => {
+    setStep({details, page})
+  }
+
   const {data, isFetching, isError, error} = useQuery({
       queryKey: queryKeys.products,
       queryFn: () => getProducts()
   })
 
   const products = data?.data?.product_data?.products // PRODUCTS LIST
-  console.log('products', products)
+
+  const handleBackBtn = () => {
+    if(step?.page == 1){
+      navigate(myLinks.home, {state:{proceed:'true'}})
+    }else{
+      setStep(prev => ({...prev, page: prev.page-1}))
+    }
+  }
 
   useEffect(()=>{
     if(!state?.user){
@@ -33,7 +51,7 @@ export default function LoginCom() {
     <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
         <div className='flex flex-col gap-4 w-[80%] sm:w-[400px] min-h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
             <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
-              <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={()=>navigate(myLinks.home, {state:{proceed:'true'}})}>
+              <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={handleBackBtn}>
                 <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-orange-500' />
               </div>
               <div className='w-full text-center'>
@@ -42,42 +60,58 @@ export default function LoginCom() {
               </div>
             </div>
 
-            <div className='mt-3 flex flex-col gap-3'>
+            {step?.page == 1 ?
-              {isFetching ? 
+              <>
-                <>
+                <div className='mt-3 flex flex-col gap-3'>
+                  {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-slate-800 text-center'>Loading...</p>
+                      <p className='text-red-500 text-center'>{error.message}</p>
                     </div>
-                </>
+                    :
-                : isError ?
+                    <>
-                <div className="w-full py-4">
+                      {products && products.map(product => {
-                  <p className='text-red-500 text-center'>{error.message}</p>
+                        let isDisabled = product.active == '0' ? true : false
-                </div>
+                        return (
-                :
+                          <button 
-                <>
+                            key={product?.cid} 
-                  {products && products.map(product => {
+                            disabled={isDisabled} 
-                    let isDisabled = product.active == '0' ? true : false
+                            onClick={()=>console.log('working')} 
-                    return (
+                            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'}`} 
-                      <button 
+                          >
-                        key={product?.cid} 
+                            <span>{product?.description}</span>
-                        disabled={isDisabled} 
+                            <IoIosArrowForward />
-                        onClick={()=>console.log('working')} 
+                          </button>
-                        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'}`} 
+                        )
-                      >
+                      }
-                        <span>{product?.description}</span>
+                      )}
-                        <IoIosArrowForward />
+                    </>
-                      </button>
-                    )
                   }
-                  )}
+                </div>
-                </>
+                {products &&
-              }
+                <div className='mt-3 w-full h-full flex flex-col justify-end'>
-            </div>
+                  <button onClick={()=>handleStep({}, 2)} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
-            {products &&
+                </div>
-            <div className='mt-3 w-full h-full flex flex-col justify-end'>
+                }
-              <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
+              </>
-            </div>
+              : step?.page == 2 ?
+              <>
+              <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' />
+                  <InputText id='pin' name='pin' type='text' value={pin} handleChange={(e)=>setPin(e.target.value)} />
+                  <button onClick={()=>console.log('working')} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
+                </div>
+              </div>
+              </>
+              : null
             }
+
         </div>
     </div>
   )