DigiFi/digifi-SalaryLoan
1
0
Fork 0
Code Issues Pull Requests Releases Activity

adjusted offer screen

Browse Source
This commit is contained in:
victorAnumudu
2025-02-10 16:03:54 +01:00
parent 5533797d24
commit b248cce3a5
2 changed files with 53 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/loan_screen/Offers.jsx
+36 -35
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react'
import React from 'react'
import { useQuery } from "@tanstack/react-query";
import { TiArrowSortedDown } from "react-icons/ti";
import { IoIosArrowForward } from "react-icons/io";
import { getOffers } from '../../services/siteServices'
import queryKeys from '../../services/queryKeys'
@@ -8,10 +8,6 @@ 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()
@@ -19,25 +15,13 @@ export default function Offers({step, handleStep, screens}) {
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)
const handleContinue = ({target:{value}}) => {
handleStep({selectedOffer:value, ...step.details}, screens.selected_offer)
}
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='Select offer type' htmlfor='pin' error={isEmpty} />
{isFetching ?
<>
<div className="w-full py-4">
@@ -49,24 +33,41 @@ 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>
// <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'}`}
>
<span>{item?.description}</span>
<IoIosArrowForward />
</button>
)
})}
</>
}
<>
</>
<button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
{/* <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button> */}
</div>
</div>
)