next page screen added
This commit is contained in:
victorAnumudu
+70
-36
@@ -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 InputText from './InputText'
|
||||
import Label from './Label'
|
||||
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'>
|
||||
{isFetching ?
|
||||
<>
|
||||
{step?.page == 1 ?
|
||||
<>
|
||||
<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">
|
||||
<p className='text-red-500 text-center'>{error.message}</p>
|
||||
</div>
|
||||
:
|
||||
<>
|
||||
{products && products.map(product => {
|
||||
let isDisabled = product.active == '0' ? true : false
|
||||
return (
|
||||
<button
|
||||
key={product?.cid}
|
||||
disabled={isDisabled}
|
||||
onClick={()=>console.log('working')}
|
||||
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>
|
||||
)
|
||||
:
|
||||
<>
|
||||
{products && products.map(product => {
|
||||
let isDisabled = product.active == '0' ? true : false
|
||||
return (
|
||||
<button
|
||||
key={product?.cid}
|
||||
disabled={isDisabled}
|
||||
onClick={()=>console.log('working')}
|
||||
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'>
|
||||
<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>
|
||||
</div>
|
||||
{products &&
|
||||
<div className='mt-3 w-full h-full flex flex-col justify-end'>
|
||||
<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>
|
||||
</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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user