diff --git a/src/components/GetLoan.jsx b/src/components/GetLoan.jsx index 7eed421..9e9b379 100644 --- a/src/components/GetLoan.jsx +++ b/src/components/GetLoan.jsx @@ -5,25 +5,33 @@ 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 queryKeys from '../services/queryKeys'; import { getProducts } from '../services/siteServices'; +import Pin from './loan_screen/Pin'; +import Offers from './loan_screen/Offers'; +import LoanPin from './loan_screen/LoanPin'; +import SelectedOffer from './loan_screen/SelectedOffer'; -export default function LoginCom() { +export default function GetLoan() { + + let screens = { + products: 'products-screen', + pin: 'pin-screen', + offers: 'offers-screen', + selected_offer: 'selected-offer-screen', + loan_pin: 'loan-pin-screen' + } const {state} = useLocation() const navigate = useNavigate() - const [pin, setPin] = useState('') - const [step, setStep] = useState({ details: {}, - page: 1 + screen: [] }) - const handleStep = (details, page) => { - setStep({details, page}) + const handleStep = (details, screen) => { + setStep(prev => ({...prev, details, screen: [...prev.screen, screen]})) } const {data, isFetching, isError, error} = useQuery({ @@ -34,11 +42,11 @@ export default function LoginCom() { const products = data?.data?.product_data?.products // PRODUCTS LIST const handleBackBtn = () => { - if(step?.page == 1){ - navigate(myLinks.home, {state:{proceed:'true'}}) - }else{ - setStep(prev => ({...prev, page: prev.page-1})) + if(step?.screen?.length <= 0 || step?.screen[step.screen.length -1 ] == screens.loan_pin){ + setStep({details: {}, screen: []}) + return navigate(myLinks.home, {state:{proceed:'true'}}) } + setStep(prev => ({...prev, screen: prev.screen.slice(0, -1)})) } useEffect(()=>{ @@ -52,7 +60,7 @@ export default function LoginCom() {
- +

{state?.user.name}

@@ -60,7 +68,7 @@ export default function LoginCom() {
- {step?.page == 1 ? + {!step?.screen?.length || step?.screen[step.screen.length -1 ] == screens.products ? <>
{isFetching ? @@ -81,7 +89,7 @@ export default function LoginCom() {
} - : step?.page == 2 ? + : step?.screen[step.screen.length -1 ] == screens.pin ? <> -
-
-
-
+ + + : step?.screen[step.screen.length -1 ] == screens.offers ? + <> + + + : step?.screen[step.screen.length -1 ] == screens.selected_offer ? + <> + + + : step?.screen[step.screen.length -1 ] == screens.loan_pin ? + <> + : null } diff --git a/src/components/Label.jsx b/src/components/Label.jsx index d4d899a..e4b2137 100644 --- a/src/components/Label.jsx +++ b/src/components/Label.jsx @@ -1,7 +1,7 @@ import React from 'react' -export default function Label({name, htmlfor}) { +export default function Label({name, htmlfor, error}) { return ( - + ) } diff --git a/src/components/auth/LoginCom.jsx b/src/components/auth/LoginCom.jsx index eaff995..571cb91 100644 --- a/src/components/auth/LoginCom.jsx +++ b/src/components/auth/LoginCom.jsx @@ -80,7 +80,7 @@ export default function LoginCom() { }
- +
diff --git a/src/components/loan_screen/LoanPin.jsx b/src/components/loan_screen/LoanPin.jsx new file mode 100644 index 0000000..c908623 --- /dev/null +++ b/src/components/loan_screen/LoanPin.jsx @@ -0,0 +1,49 @@ +import React, { useState } from 'react' +import Label from '../Label' +import InputText from '../InputText' + +export default function LoanPin({step, handleStep, screens}) { + + const [error, SetError] = useState('') + + const [pin, setPin] = useState('') + + const handlePinChange = ({target:{value}}) => { + SetError('') + setPin(value) + } + + const [isSuccess, setIsSuccess] = useState(false) + + const handleContinue = () => { + if(!pin){ + SetError('enter pin') + return setTimeout(()=>{ + SetError('') + }, 5000) + } + setIsSuccess(prev => !prev) + } + + return ( + <> + {!isSuccess ? +
+
+
+
+ : +
+
+

Loan request has been accepted

+

You will get an sms with result shortly

+
+
+ } + + + ) +} diff --git a/src/components/loan_screen/Offers.jsx b/src/components/loan_screen/Offers.jsx new file mode 100644 index 0000000..df0eede --- /dev/null +++ b/src/components/loan_screen/Offers.jsx @@ -0,0 +1,78 @@ +import React, { useState } from 'react' +import { useQuery } from "@tanstack/react-query"; +import { TiArrowSortedDown } from "react-icons/ti"; + +import { getOffers } from '../../services/siteServices' +import queryKeys from '../../services/queryKeys' +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() + }) + + 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) + } + + return ( +
+
+
+
+ ) +} + + +const dummyData = [ + '100,000 Naira for 30 Days', '200,000 Naira for 30 Days', '100,000 Naira for 60 Days', '200,000 Naira for 60 Days' +] \ No newline at end of file diff --git a/src/components/loan_screen/Pin.jsx b/src/components/loan_screen/Pin.jsx new file mode 100644 index 0000000..cd669f2 --- /dev/null +++ b/src/components/loan_screen/Pin.jsx @@ -0,0 +1,62 @@ +import React, { useState } from 'react' +import { useMutation } from '@tanstack/react-query' + +import Label from '../Label' +import InputText from '../InputText' + +export default function Pin({step, handleStep, screens}) { + + const [error, SetError] = useState('') + + const [pin, setPin] = useState('') + + const handlePinChange = ({target:{value}}) => { + SetError('') + setPin(value) + } + + const proceed = useMutation({ + mutationFn: () => { + let fields = {pin, ...step.details} + if(!fields.pin){ + throw new Error('Please enter pin *') + } + // return loginUser(fields) + }, + onError: (error) => { + console.log(error) + }, + onSuccess: (res) => { + handleStep(step.details, screens.offers) + } + }) + + const handleContinue = () => { + if(!pin){ + SetError('enter pin') + return setTimeout(()=>{ + SetError('') + }, 5000) + } + handleStep(step.details, screens.offers) + } + + return ( +
+
+
+ + {proceed.error && + <> +
+

{proceed.error.message}

+
+ + } +
+ ) +} diff --git a/src/components/loan_screen/SelectedOffer.jsx b/src/components/loan_screen/SelectedOffer.jsx new file mode 100644 index 0000000..77f3a0c --- /dev/null +++ b/src/components/loan_screen/SelectedOffer.jsx @@ -0,0 +1,28 @@ +import React, { useState } from 'react' +import Label from '../Label' +import InputText from '../InputText' + +export default function SelectedOffer({step, handleStep, screens}) { + + const [pin, setPin] = useState('') + + console.log(step.details) + const handleContinue = () => { + handleStep(step.details, screens.loan_pin) + } + + return ( +
+
+

Tenor: 30 Days

+
+
+ ) +} diff --git a/src/services/queryKeys.js b/src/services/queryKeys.js index 8e0720d..6cd4851 100644 --- a/src/services/queryKeys.js +++ b/src/services/queryKeys.js @@ -1,6 +1,7 @@ const queryKeys = { demoUsers: ['demo-users'], - products: ['products'] + products: ['products'], + offers: ['offers'], } export default queryKeys \ No newline at end of file diff --git a/src/services/siteServices.js b/src/services/siteServices.js index c88ae0e..5e3d6c9 100644 --- a/src/services/siteServices.js +++ b/src/services/siteServices.js @@ -60,4 +60,10 @@ export const demoUsersList = (reqData) => { export const getProducts = (reqData) => { const postData = { ...reqData } return getAuxEnd(`/salary/products`, postData) +} + +// FUNCTION TO GET MY OFFERS DATA +export const getOffers = (reqData) => { + const postData = { ...reqData } + return getAuxEnd(`/salary/loanoffers`, postData) } \ No newline at end of file