diff --git a/src/components/AuthPages/Login/index.jsx b/src/components/AuthPages/Login/index.jsx index 2cb79da..7c40723 100644 --- a/src/components/AuthPages/Login/index.jsx +++ b/src/components/AuthPages/Login/index.jsx @@ -1,5 +1,5 @@ import React, { useEffect, useLayoutEffect, useState } from "react"; -import { Link, useNavigate, useLocation } from "react-router-dom"; +import { Link, useLocation, useNavigate } from "react-router-dom"; import linkedInLogo from "../../../assets/images/Linkedin.png"; import appleLogo from "../../../assets/images/apple-black.svg"; import facebookLogo from "../../../assets/images/facebook-4.svg"; @@ -9,18 +9,17 @@ import usersService from "../../../services/UsersService"; import InputCom from "../../Helpers/Inputs/InputCom"; import AuthLayout from "../AuthLayout"; // import { GoogleOAuthProvider } from '@react-oauth/google'; -import { googleLogout, useGoogleLogin } from "@react-oauth/google"; +import { useGoogleLogin } from "@react-oauth/google"; import { useDispatch } from "react-redux"; import { updateUserDetails } from "../../../store/UserDetails"; export default function Login() { const dispatch = useDispatch(); - const {state} = useLocation() + const { state } = useLocation(); - let [loginType, setLoginType] = useState(''); + let [loginType, setLoginType] = useState(""); - const [checked, setValue] = useState(false); const [loginLoading, setLoginLoading] = useState(false); const [showPassword, setShowPassword] = useState(false); @@ -30,12 +29,8 @@ export default function Login() { // for the catch error const [msgError, setMsgError] = useState(""); - const rememberMe = () => { - setValue(!checked); - }; - - // To Show and Hide Password - const togglePasswordVisibility = () => { + // To Show and Hide Password + const togglePasswordVisibility = () => { setShowPassword(!showPassword); }; @@ -43,7 +38,7 @@ export default function Login() { const handleLoginType = ({ target: { name } }) => { setLoginType(name); let currentDate = new Date(); - let expirationDate = new Date(currentDate.getTime() + (24 * 60 * 60 * 1000)); + let expirationDate = new Date(currentDate.getTime() + 24 * 60 * 60 * 1000); // Convert the expiration date to the appropriate format let expirationDateString = expirationDate.toUTCString(); document.cookie = `loginType=${name}; expires=${expirationDateString}; path=/;`; @@ -83,7 +78,9 @@ export default function Login() { if (regEx.test(email) == false) { setLoginLoading(false); setMsgError("Invalid Email"); - return setTimeout(()=>{setMsgError("");},3000) + return setTimeout(() => { + setMsgError(""); + }, 3000); } // Post Data Info for normal Login postData = { @@ -113,7 +110,13 @@ export default function Login() { userApi .logInUser(postData) .then((res) => { - if (res.status != 200 || res.data.internal_return < 0 || !res.data.member_id || !res.data.uid || !res.data.session) { + if ( + res.status != 200 || + res.data.internal_return < 0 || + !res.data.member_id || + !res.data.uid || + !res.data.session + ) { // setMsgError("Wrong, email/password"); setLoginError(true); setLoginLoading(false); @@ -123,7 +126,7 @@ export default function Login() { localStorage.setItem("uid", `${res.data.uid}`); localStorage.setItem("session_token", `${res.data.session}`); // localStorage.setItem("session", `${res.data.session}`); - dispatch(updateUserDetails({...res.data})); + dispatch(updateUserDetails({ ...res.data })); setTimeout(() => { navigate("/", { replace: true }); setLoginLoading(false); @@ -154,11 +157,12 @@ export default function Login() { // In order to update the selected login type whenever the component renders // useEffect(() => { - // Clear the loginType cookie if the user switches to loginfull - // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; + // Clear the loginType cookie if the user switches to loginfull + // document.cookie ="loginType=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"; // }, []); - useLayoutEffect(()=>{ // checks the cookie in order to set the login type before components mounts + useLayoutEffect(() => { + // checks the cookie in order to set the login type before components mounts // if(document.cookie.includes("loginType=family")){ // setLoginType('family') // }else if(document.cookie.includes("loginType=full")){ @@ -166,33 +170,34 @@ export default function Login() { // }else{ // setLoginType('full') // } - function readCookie(cname) { // checks the cookie in order to set the login type before components mounts + function readCookie(cname) { + // checks the cookie in order to set the login type before components mounts let name = cname + "="; let decoded_cookie = decodeURIComponent(document.cookie); - let carr = decoded_cookie.split(';'); - for(let i=0; i{ + setTimeout(() => { setMsgError(""); - navigate('/login', {replace: true}) - },4000) + navigate("/login", { replace: true }); + }, 4000); } - },[]) - + }, []); useEffect(() => { setMail(""); @@ -234,7 +239,9 @@ export default function Login() {
- - + +
- - + +
@@ -435,7 +444,7 @@ export default function Login() { ); } -const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => { +const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor = false }) => { // const doGoogle = async () => { // alert("start google"); // }; @@ -456,33 +465,28 @@ const BrandBtn = ({ link, imgSrc, brand, onClick, isAnchor=false }) => { // }; return (
- {isAnchor ? - ( + {isAnchor ? ( - logo-icon(s) - - Continue with {brand} - - - ) - : - ( + href={link} + className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer" + > + logo-icon(s) + + Continue with {brand} + + + ) : ( - ) - } + onClick={onClick} + // href="#dd" + className="w-full border border-light-purple dark:border-[#5356fb29] rounded-[0.475rem] h-[48px] flex justify-center bg-[#FAFAFA] hover:bg-[#eff2f5] hover:text-[#7e8299] transition duration-300 dark:bg-[#11131F] items-center font-medium cursor-pointer" + > + logo-icon(s) + + Continue with {brand} + + + )}
- ) + ); }; - diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index 112ce2b..7f34890 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -1,5 +1,6 @@ import { Form, Formik } from "formik"; import React, { useEffect, useState } from "react"; +import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; import * as Yup from "yup"; import usersService from "../../../services/UsersService"; @@ -9,64 +10,55 @@ import LoadingSpinner from "../../Spinners/LoadingSpinner"; const validationSchema = Yup.object().shape({ amount: Yup.number() - .typeError("you must specify a number") + .typeError("You must specify a number") .min(1, "Amount must be greater than 0") .required("Amount is required"), comment: Yup.string().max(50, "Maximum 50 characters"), - choice: Yup.string().required("Please select an option"), - recipientID: Yup.string().when("choice", { - is: "previous", - then: Yup.string().required("Recipient is required"), + choice: Yup.string(), + previousAccount: Yup.object().shape({ + recipientID: Yup.string().when("choice", { + is: "previous", + then: Yup.string().required("Recipient is required"), + }), }), - country: Yup.string().when("choice", { - is: "new", - then: Yup.string().required("Country is required"), - }), - bank: Yup.string().when("choice", { - is: "new", - then: Yup.string().required("Bank name is required"), - }), - accountNumber: Yup.string().when("choice", { - is: "new", - then: Yup.string() - .matches(/\d/, "must be a number") - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("Account Number is required"), - }), - accountType: Yup.string().when("choice", { - is: "new", - then: Yup.string().required("Please select an account type"), - }), - city: Yup.string().when("choice", { - is: "new", - then: Yup.string() - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("City is required"), - }), - state: Yup.string().when("choice", { - is: "new", - then: Yup.string() - .min(3, "Minimum 3 characters") - .max(25, "Maximum 25 characters") - .required("State is required"), + newAccount: Yup.object().shape({ + country: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Country is required"), + }), + bank: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Bank name is required"), + }), + accountNumber: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .matches(/\d/, "Must be a number") + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("Account Number is required"), + }), + accountType: Yup.string().when("choice", { + is: "new", + then: Yup.string().required("Please select an account type"), + }), + city: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("City is required"), + }), + state: Yup.string().when("choice", { + is: "new", + then: Yup.string() + .min(3, "Minimum 3 characters") + .max(25, "Maximum 25 characters") + .required("State is required"), + }), }), }); -const initialValues = { - amount: "", - comment: "", - choice: "", - recipientID: "", - country: "", - bank: "", - accountNumber: "", - accountType: "", - state: "", - city: "", -}; - function NairaWithdraw({ wallet, action, @@ -77,7 +69,25 @@ function NairaWithdraw({ const navigate = useNavigate(); const [tab, setTab] = useState("previous"); let [requestStatus, setRequestStatus] = useState(false); - const [bankNameHandler, setBankNameHandler] = useState({}); + + + const initialValues = { + amount: "", + comment: "", + choice: tab === "previous" ? "previous" : "new" , + previousAccount: { + recipientID: "", + }, + newAccount: { + country: "", + bank: "", + accountNumber: "", + accountType: "", + state: "", + city: "", + }, + }; + let [sendMoneyFee, setSendMoneyFee] = useState({ loading: false, fee: 0, @@ -98,7 +108,7 @@ function NairaWithdraw({ }); let [bankName, setBankName] = useState({ // STATE TO HOLD LIST OF BANK NAME - loading: true, + loading: false, data: [], }); let [accType, setAccType] = useState({ @@ -108,13 +118,21 @@ function NairaWithdraw({ }); // Handling card change - const handleInputChange = (event) => { + const handleBankOptions = (event) => { const { name, value } = event.target; - - if (tab === "new") setBankNameHandler((prevState) => ({ - ...prevState, - [name]: value, - })); + setBankName((prev) => ({ loading: true, data: [] })); + apiCall + .getCountryBank({ country: value }) + .then((res) => { + if (res.data.internal_return < 0) { + setBankName((prev) => ({ loading: false, data: [] })); + return; + } + setBankName((prev) => ({ loading: false, data: res.data.result_list })); + }) + .catch((error) => { + setBankName((prev) => ({ loading: false, data: [] })); + }); }; //FUNCTION TO GET RECIPIENT LIST @@ -157,22 +175,6 @@ function NairaWithdraw({ }); }; - // FUNCTION TO GET COUNTRY BANK - const getCountryBank = () => { - apiCall - .getCountryBank(bankNameHandler) - .then((res) => { - if (res.data.internal_return < 0) { - setBankName((prev) => ({ loading: false, data: [] })); - return; - } - setBankName((prev) => ({ loading: false, data: res.data.result_list })); - }) - .catch((error) => { - setBankName((prev) => ({ loading: false, data: [] })); - }); - }; - // FUNCTION TO GET ACCOUNT TYPES const getAccountTypes = () => { apiCall @@ -191,7 +193,6 @@ function NairaWithdraw({ useEffect(() => { getCountry(); // TO LOAD LIST COUNTRY - getCountryBank(); // TO LOAD LIST COUNTRY BANK getAccountTypes(); // TO LOAD LIST ACCOUNT TYPES }, []); @@ -216,32 +217,66 @@ function NairaWithdraw({ setSendMoneyFee({ loading: false, fee: 0, total: 0 }); }); }; - console.log("TESTING", sendMoneyFee); - //FUNCTION TO HANDLE SUBMIT - const handleSubmit = (values, helpers) => { - if (!values?.amount && !values.recipientID) return; - setRequestStatus(true); - let recipientDetails = recipients.data?.filter( - (item) => item.recipient_id == values.recipientID - ); - let stateData = { - ...values, - ...sendMoneyFee, - details: { ...recipientDetails[0] }, - }; - setTimeout(() => { - setRequestStatus(false); - // navigate("confirm-withdraw-naira", { state: stateData }); - action(); - setShowConfirmNairaWithdraw({ show: true, state: stateData }); - }, 1000); + //FUNCTION TO HANDLE SUBMIT + const handleSubmit = async (values, helpers) => { + try { + // Validate the form using Yup validation schema + await validationSchema.validate(values, { abortEarly: false }); + // If validation passes, proceed with form submission + // throw new Response("Form data is valid!", values); + + + // ... Your form submission logic here ... + if (values?.choice === "previous") { + if (!values?.amount && !values?.previousAccount?.recipientID) return; + + setRequestStatus(true); + + // Ensure recipientDetails is an array and not undefined + const recipientDetails = recipients.data?.filter( + (item) => item.recipient_id === values.previousAccount?.recipientID + ); + + // Ensure recipientDetails is not empty + if (!recipientDetails || recipientDetails.length === 0) { + // Handle the case when recipientDetails is empty or undefined + setRequestStatus(false); + return; + } + + const stateData = { + amount: values.amount, + comment: values.comment, + ...values.previousAccount, + ...sendMoneyFee, + details: { ...recipientDetails[0] }, + }; + + setTimeout(() => { + setRequestStatus(false); + // navigate("confirm-withdraw-naira", { state: stateData }); + action(); + setShowConfirmNairaWithdraw({ show: true, state: stateData }); + }, 1000); + } + + if(values?.choice === "new"){ + + } + } catch (errors) { + // If validation fails, handle the validation errors + console.log("Validation errors:", errors); + // + } }; useEffect(() => { getRecipients(); }, []); + console.log(tab) + return (
@@ -249,17 +284,44 @@ function NairaWithdraw({
{(props) => { return (
-

- {`Withdraw from ${wallet.description} Wallet : ${ - wallet.symbol - }${(wallet.amount * 0.01).toFixed(2)}`} -

+
+

+ {`Withdraw from ${wallet.description} Wallet : ${ + wallet.symbol + }${(wallet.amount * 0.01).toFixed(2)}`} +

+ +
{/* Amount Form */}
@@ -278,8 +340,6 @@ function NairaWithdraw({ blurHandler={(e) => { getSendMoneyFee(e); }} - // props.handleBlur - // onMouseLeave={(e)=>{getSendMoneyFee(e)}} /> {props.errors.amount && props.touched.amount && (

@@ -358,6 +418,7 @@ function NairaWithdraw({ type="radio" id="previous" name="choice" + value="previous" checked={tab === "previous"} className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ tab == "previous" ? "" : "" @@ -374,6 +435,7 @@ function NairaWithdraw({ id="new" type="radio" name="choice" + value="new" checked={tab === "new"} className={`p-2 text-lg font-bold text-slate-600 dark:text-white border pointer-events-none w-7 h-7 ${ tab == "new" ? "" : "" @@ -394,8 +456,10 @@ function NairaWithdraw({

- {props.errors.recipientID && - props.touched.recipientID && ( + {props.errors.previousAccount + ?.recipientID && + props.touched.previousAccount + ?.recipientID && (

- {props.errors.recipientID} + { + props.errors.previousAccount + ?.recipientID + }

)} {/* {/* country */}
-