From a6409a037f97a049609c2ecf7813ae0ac3de9f2e Mon Sep 17 00:00:00 2001 From: Ebube Date: Sat, 22 Jul 2023 20:52:39 +0100 Subject: [PATCH] ConfirmNairaWithdraw layout, payload adjustment and other style fixes --- .../MyWallet/Popup/ConfirmNairaWithdraw.jsx | 54 +++- .../MyWallet/Popup/NairaWithdraw.jsx | 236 ++++++++---------- src/services/UsersService.js | 2 +- 3 files changed, 140 insertions(+), 152 deletions(-) diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx index 242e86e..8f713b0 100644 --- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import { toast } from "react-toastify"; import InputCom from "../../Helpers/Inputs/InputCom"; @@ -25,7 +25,8 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { let reqData = { amount: Number(state.amount * 100), Fee: Number(state.fee), - recipientid: Number(state.recipientID), + recipient_uid: Number(state.details?.recipient_uid), + wallet_uid: wallet.wallet_uid, }; apiURL .sendMoney(reqData) @@ -58,22 +59,49 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) { }); }; + console.log(state) + 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)}`} -

-
-

- Confirm Withdraw to Account + {/* Confirm Withdraw to Account */}

{/* AMOUNT */}
diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index 7f34890..49cc3f8 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -1,63 +1,26 @@ 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"; import InputCom from "../../Helpers/Inputs/InputCom"; import ModalCom from "../../Helpers/ModalCom"; import LoadingSpinner from "../../Spinners/LoadingSpinner"; -const validationSchema = Yup.object().shape({ - amount: Yup.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(), - previousAccount: Yup.object().shape({ - recipientID: Yup.string().when("choice", { - is: "previous", - then: Yup.string().required("Recipient 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: "", + previousAccount: { + recipientID: "", + }, + newAccount: { + country: "", + bank: "", + accountNumber: "", + accountType: "", + state: "", + city: "", + }, +}; function NairaWithdraw({ wallet, @@ -69,24 +32,7 @@ function NairaWithdraw({ const navigate = useNavigate(); const [tab, setTab] = useState("previous"); let [requestStatus, setRequestStatus] = useState(false); - - - const initialValues = { - amount: "", - comment: "", - choice: tab === "previous" ? "previous" : "new" , - previousAccount: { - recipientID: "", - }, - newAccount: { - country: "", - bank: "", - accountNumber: "", - accountType: "", - state: "", - city: "", - }, - }; + const [errorMsgs, setErrorMsgs] = useState(initialValues); let [sendMoneyFee, setSendMoneyFee] = useState({ loading: false, @@ -221,21 +167,37 @@ function NairaWithdraw({ //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); - + // Validate the form using Yup validation schema + // await validationSchema.validate(values, { abortEarly: false }); + // If validation passes, proceed with form submission + console.log("Form data is valid!", values); + if (!values?.amount) { + setErrorMsgs({ amount: "Please enter an amount" }); + setTimeout(() => setErrorMsgs({ amount: "" }), 1000); + return; + } + if (values?.comment?.length >= 50) { + setErrorMsgs({ comment: "50 chars max" }); + setTimeout(() => setErrorMsgs({ comment: "" }), 1000); + } - // ... Your form submission logic here ... - if (values?.choice === "previous") { - if (!values?.amount && !values?.previousAccount?.recipientID) return; + // form submission logic here + if (tab === "previous") { + if (!values?.previousAccount?.recipientID) { + setErrorMsgs({ + previousAccount: { recipientID: "Please select an option" }, + }); + setTimeout( + () => setErrorMsgs({ previousAccount: { recipientID: "" } }), + 1000 + ); + } setRequestStatus(true); // Ensure recipientDetails is an array and not undefined const recipientDetails = recipients.data?.filter( - (item) => item.recipient_id === values.previousAccount?.recipientID + (item) => item.recipient_uid === values.previousAccount?.recipientID ); // Ensure recipientDetails is not empty @@ -248,7 +210,7 @@ function NairaWithdraw({ const stateData = { amount: values.amount, comment: values.comment, - ...values.previousAccount, + wallet_uid: wallet.wallet_uid, ...sendMoneyFee, details: { ...recipientDetails[0] }, }; @@ -261,12 +223,13 @@ function NairaWithdraw({ }, 1000); } - if(values?.choice === "new"){ - + if (tab === "new") { + const { accountNumber, accountType, bank, city, country, state } = + values?.newAccount; } } catch (errors) { // If validation fails, handle the validation errors - console.log("Validation errors:", errors); + throw new Error("Validation errors:", errors); // } }; @@ -275,13 +238,43 @@ function NairaWithdraw({ getRecipients(); }, []); - console.log(tab) - return ( -
-
-
+
+
+
+

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

+ +
+
{ return (
-
-

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

- -
{/* Amount Form */}
@@ -341,9 +302,9 @@ function NairaWithdraw({ getSendMoneyFee(e); }} /> - {props.errors.amount && props.touched.amount && ( + {errorMsgs?.amount && (

- {props.errors.amount} + {errorMsgs.amount}

)}
@@ -457,7 +418,7 @@ function NairaWithdraw({
- {props.errors.previousAccount - ?.recipientID && - props.touched.previousAccount + {errorMsgs.previousAccount?.recipientID && + errorMsgs.previousAccount ?.recipientID && (

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

)} - {/* - Add New - */}
@@ -565,7 +523,9 @@ function NairaWithdraw({ className="text-slate-500 text-lg" value="" > - Select... + {errorMsgs.newAccount?.country + ? errorMsgs.newAccount.country + : "Select..."} {allCountries.data.map((item, index) => (