adjusted offer screen
This commit is contained in:
victorAnumudu
@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'
|
||||
import { CiPhone } from "react-icons/ci"
|
||||
import { CiBank } from "react-icons/ci";
|
||||
import { MdOutlineEmail } from "react-icons/md"
|
||||
import { FaMapPin } from "react-icons/fa";
|
||||
|
||||
import { demoUsersList } from "../services/siteServices"
|
||||
import queryKeys from "../services/queryKeys"
|
||||
import myLinks from "../myLinks";
|
||||
@@ -28,7 +30,7 @@ export default function HomeCom() {
|
||||
return (
|
||||
<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="w-full h-screen flex flex-col gap-2 overflow-y-auto text-black p-5 sm:p-[40px]">
|
||||
<div className="py-4 text-3xl text-black font-bold">Users</div>
|
||||
<div className="py-3 text-3xl text-black font-bold">Users</div>
|
||||
{isFetching ?
|
||||
<>
|
||||
<div className="w-full py-4">
|
||||
@@ -44,31 +46,37 @@ export default function HomeCom() {
|
||||
{({ data }) => (
|
||||
<div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
{data.map((user, index) => {
|
||||
let color = user.place == 'Friends' ? 'text-emerald-500 bg-emerald-100/90' : user.place == 'Office' ? 'text-blue-500 bg-blue-100/90' : 'text-orange-500 bg-orange-100/90'
|
||||
return (
|
||||
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className="w-full rounded p-3 sm:p-5 bg-white shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer">
|
||||
let hasSalaryAcct = user.salary_account === 0 ? false : true
|
||||
return (
|
||||
<div onClick={()=>getLoanPage(user)} key={user?.uid || index} className={`${hasSalaryAcct ? 'bg-white' : 'bg-red-50'} w-full rounded p-3 sm:p-5 shadow flex flex-col gap-5 hover:scale-105 hover:cursor-pointer`}>
|
||||
<div className="mb-5 card-title w-[70%] mx-auto">
|
||||
<h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
|
||||
{/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
|
||||
</div>
|
||||
<div className="card-body flex flex-col gap-2">
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<div className="contact text-slate-700 flex gap-2 items-center">
|
||||
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<CiBank />
|
||||
</span>
|
||||
<span>{user.bvn}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<CiPhone />
|
||||
</span>
|
||||
<span>{user.mobile}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="w-[40px] h-[40px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<MdOutlineEmail />
|
||||
</span>
|
||||
<span>{user.email}</span>
|
||||
<span className="break-words">{user.email}</span>
|
||||
</div>
|
||||
<div className="contact text-slate-700 flex gap-3 items-center">
|
||||
<span className="min-w-[30px] min-h-[30px] max-w-[30px] max-h-[30px] rounded-full flex flex-col justify-center items-center bg-slate-100/90 text-slate-700">
|
||||
<FaMapPin />
|
||||
</span>
|
||||
<span>{user.pin}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user