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/HomeCom.jsx
+17 -9
View File
@@ -5,6 +5,8 @@ import { useNavigate } from 'react-router-dom'
import { CiPhone } from "react-icons/ci" import { CiPhone } from "react-icons/ci"
import { CiBank } from "react-icons/ci"; import { CiBank } from "react-icons/ci";
import { MdOutlineEmail } from "react-icons/md" import { MdOutlineEmail } from "react-icons/md"
import { FaMapPin } from "react-icons/fa";
import { demoUsersList } from "../services/siteServices" import { demoUsersList } from "../services/siteServices"
import queryKeys from "../services/queryKeys" import queryKeys from "../services/queryKeys"
import myLinks from "../myLinks"; import myLinks from "../myLinks";
@@ -28,7 +30,7 @@ export default function HomeCom() {
return ( 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={`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="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 ? {isFetching ?
<> <>
<div className="w-full py-4"> <div className="w-full py-4">
@@ -44,31 +46,37 @@ export default function HomeCom() {
{({ data }) => ( {({ data }) => (
<div className="grid gap-5 sm:gap-[40px] grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <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) => { {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' let hasSalaryAcct = user.salary_account === 0 ? false : true
return ( 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"> <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"> <div className="mb-5 card-title w-[70%] mx-auto">
<h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1> <h1 className="mb-[1px] text-2xl font-bold">{user.name}</h1>
{/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */} {/* <span className={` ${color} text-sm font-bold p-1 rounded`}>{user.place}</span> */}
</div> </div>
<div className="card-body flex flex-col gap-2"> <div className="card-body flex flex-col gap-2">
<div className="contact text-slate-700 flex gap-3 items-center"> <div className="contact text-slate-700 flex gap-2 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">
<CiBank /> <CiBank />
</span> </span>
<span>{user.bvn}</span> <span>{user.bvn}</span>
</div> </div>
<div className="contact text-slate-700 flex gap-3 items-center"> <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 /> <CiPhone />
</span> </span>
<span>{user.mobile}</span> <span>{user.mobile}</span>
</div> </div>
<div className="contact text-slate-700 flex gap-3 items-center"> <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 /> <MdOutlineEmail />
</span> </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> </div>
</div> </div>
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 { useQuery } from "@tanstack/react-query";
import { TiArrowSortedDown } from "react-icons/ti"; import { IoIosArrowForward } from "react-icons/io";
import { getOffers } from '../../services/siteServices' import { getOffers } from '../../services/siteServices'
import queryKeys from '../../services/queryKeys' import queryKeys from '../../services/queryKeys'
@@ -8,10 +8,6 @@ import Label from '../Label';
export default function Offers({step, handleStep, screens}) { export default function Offers({step, handleStep, screens}) {
const [isEmpty, setIsEmpty] = useState('')
const [selectedOffer, setSelectedOffer] = useState('')
const {data, isFetching, isError, error} = useQuery({ const {data, isFetching, isError, error} = useQuery({
queryKey: queryKeys.offers, queryKey: queryKeys.offers,
queryFn: () => getOffers() queryFn: () => getOffers()
@@ -19,25 +15,13 @@ export default function Offers({step, handleStep, screens}) {
const offers = data?.data?.product_data?.offers // OFFERS LIST const offers = data?.data?.product_data?.offers // OFFERS LIST
const handleContinue = () => { const handleContinue = ({target:{value}}) => {
if(!selectedOffer){ handleStep({selectedOffer:value, ...step.details}, screens.selected_offer)
setIsEmpty('*')
return setTimeout(()=>{
setIsEmpty('')
}, 5000)
}
handleStep({selectedOffer, ...step.details}, screens.selected_offer)
}
const handleChange = ({target:{value}}) => {
setIsEmpty('')
setSelectedOffer(value)
} }
return ( return (
<div className='mt-3 flex flex-col gap-4'> <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-[70%] mx-auto flex flex-col gap-4 justify-center items-center'>
<Label name='Select offer type' htmlfor='pin' error={isEmpty} />
{isFetching ? {isFetching ?
<> <>
<div className="w-full py-4"> <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> <p className='text-red-500 text-center'>{error.message}</p>
</div> </div>
: :
<div className='relative w-full h-12'> // <div className='relative w-full h-12'>
<TiArrowSortedDown className='text-sm absolute right-1 top-1/2 -translate-y-1/2' /> // <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}> // <select className='px-2 w-full h-full appearance-none rounded' value={selectedOffer} onChange={handleChange}>
<option value={''}>Select offer</option> // <option value={''}>Select offer</option>
{offers.map(item => { // {offers.map(item => {
if(item.active){ // if(item.active){
return ( // return (
<option key={item.cid} value={item.description}>{item.description}</option> // <option key={item.cid} value={item.description}>{item.description}</option>
) // )
} // }
} // }
)} // )}
</select> // </select>
</div> // </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>
</div> </div>
) )