From 51bb8fc421803c92185b73c59587aed73ebf9de7 Mon Sep 17 00:00:00 2001
From: Ebube <ebube.ojinta@chiefsoft.com>
Date: Thu, 13 Jul 2023 03:21:52 +0100
Subject: [PATCH] Corrections on AddFundPop

---
 .../Helpers/Inputs/InputCom/index.jsx         |   2 +-
 src/components/MyWallet/AddFundDollars.jsx    | 257 +++++++-----------
 src/components/MyWallet/AddFundPop.jsx        |  26 +-
 src/components/MyWallet/ConfirmAddFund.jsx    |   2 +-
 4 files changed, 105 insertions(+), 182 deletions(-)

diff --git a/src/components/Helpers/Inputs/InputCom/index.jsx b/src/components/Helpers/Inputs/InputCom/index.jsx
index fad4237..83061e6 100644
--- a/src/components/Helpers/Inputs/InputCom/index.jsx
+++ b/src/components/Helpers/Inputs/InputCom/index.jsx
@@ -63,7 +63,7 @@ export default function InputCom({
               </span>
             )}
             {/* displays error is any */}
-            {error && <span className="text-[12px] text-red-500">{error}</span>} 
+            {error && <span className="text-[12px] text-red-500 italic">{error}</span>} 
           </label>
         )}
         {forgotPassword && (
diff --git a/src/components/MyWallet/AddFundDollars.jsx b/src/components/MyWallet/AddFundDollars.jsx
index 4ad935b..a3a4d4c 100644
--- a/src/components/MyWallet/AddFundDollars.jsx
+++ b/src/components/MyWallet/AddFundDollars.jsx
@@ -11,37 +11,37 @@ import Icons from "../Helpers/Icons";
 
 const validationSchema = Yup.object().shape({
   name: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Name is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   cardNum: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Card Number is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   code: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("Postal Code is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   state: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(25, "Maximum 25 characters")
-    .required("State is required"),
+    .min(3, "3 chars min.")
+    .max(25, "25 chars max.")
+    .required("required"),
   address: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(50, "Maximum 50 characters")
-    .required("Address is required"),
+    .min(3, "3 chars min.")
+    .max(50, "50 chars max.")
+    .required("required"),
   expirationYear: Yup.string()
-    .min(4, "Minimum 4 characters")
-    .max(4, "Maximum 4 characters")
-    .required("Expiration Year is required"),
+    .min(4, "4 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
   expirationMonth: Yup.string()
-    .min(1, "Minimum 1 characters")
-    .max(2, "Maximum 2 characters")
-    .required("Expiration Month is required"),
+    .min(1, "1 chars min.")
+    .max(2, "2 chars max.")
+    .required("required"),
   cvv: Yup.string()
-    .min(3, "Minimum 3 characters")
-    .max(4, "Maximum 4 characters")
-    .required("CVV Year is required"),
+    .min(3, "3 chars min.")
+    .max(4, "4 chars max.")
+    .required("required"),
 });
 
 const initialValues = {
@@ -57,15 +57,14 @@ const initialValues = {
 
 function AddFundDollars(props) {
   const navigate = useNavigate();
-  let apiCall = new usersService();
+  const apiCall = new usersService();
 
-  let [tab, setTab] = useState("previous"); //STATE FOR SWITCHING BETWEEN TABS
+  const [tab, setTab] = useState("previous");
   const [loader, setLoader] = useState(false);
   const { userDetails } = useSelector((state) => state?.userDetails);
-  let { firstname, lastname } = userDetails;
-  let [prevCardDetails, setPrevCardDetails] = useState({}); // STATE TO HOLD PREVIOUS CARD SELECTED
-  let [payListCards, setPayListCards] = useState({ loading: true, data: [] }); //USER PREVIOUS CARDS
-  // const [payListCard, setPayListCard] = useState({ data: "" }); //USER PAYLIST
+  const { firstname, lastname } = userDetails;
+  const [prevCardDetails, setPrevCardDetails] = useState({});
+  const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
 
   const handleInputChange = (event) => {
     const { name, value } = event.target;
@@ -83,27 +82,20 @@ function AddFundDollars(props) {
     indexOfLastItem
   );
 
-  // FUNCTION TO SUBMIT
   const handleSubmit = (values, helpers) => {
     props.setInputError("");
-    if (!props.input || props.input == "0") {
+    if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
 
     if (isNaN(props.input)) {
       props.setInputError("Amount must be a Number");
-      return setTimeout(() => {
-        props.setInputError("");
-      }, 5000);
+      return;
     }
-    if (tab == "previous") {
+
+    if (tab === "previous") {
       if (!prevCardDetails) {
-        // return setTimeout(() => {
-        //   props.setInputError("");
-        // }, 5000);
         return;
       }
       setLoader(true);
@@ -113,19 +105,18 @@ function AddFundDollars(props) {
         card: prevCardDetails["payment-card"],
       };
 
-      setTimeout(() => {
+      return setTimeout(() => {
         props.setConfirmCredit({ show: true, data: stateData });
         setLoader(false);
       }, 1500);
-      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
-    if (tab == "new") {
+
+    if (tab === "new") {
       const stateData = {
         amount: Number(props.input),
         currency: props.currency,
-        values,
+        ...values,
       };
-      // navigate("confirm-add-fund", { state: stateData }); // State will change later dummy for now
     }
   };
 
@@ -141,6 +132,10 @@ function AddFundDollars(props) {
       });
   }, []);
 
+  console.log(props)
+
+  const handleClose = props.onClose
+
   return (
     <>
       <div className="w-full">
@@ -190,13 +185,13 @@ function AddFundDollars(props) {
         {/* END OF switch button */}
 
         {/* previous tab */}
-        {tab == "previous" ? (
+        {tab === "previous" ? (
           <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
               <select
-                className="my-3 w-full rounded-full p-4 outline-none border-none text-base text-black dark:text-gray-100 bg-[#dce2e6] dark:bg-[#5e6278] border"
+                className="my-3 w-full rounded-full p-4 outline-none text-base text-black dark:text-gray-100 bg-[#FAFAFA] dark:bg-[#11131F] border"
                 value={prevCardDetails["payment-card"]?.card_uid}
                 id="payment-card"
                 name="payment-card"
@@ -206,16 +201,10 @@ function AddFundDollars(props) {
                 {currentPreviousCards.map((item, index) => (
                   <option
                     key={index}
-                    className={index != 0 && "border-t-2"}
+                    className={index !== 0 && "border-t-2"}
                     value={JSON.stringify(item)}
                   >
                     <div className="my-2 flex items-center gap-5">
-                      {/* <input
-                          type="radio"
-                          className="w-8 h-8"
-                          name="card"
-                          value="value"
-                        /> */}
                       <div className="card-details">
                         <h1 className="text-lg font-bold text-dark-gray dark:text-white tracking-wide">
                           {item.description} Card
@@ -253,11 +242,11 @@ function AddFundDollars(props) {
               >
                 {(props) => {
                   return (
-                    <Form>
+                    <Form className="md:pl-8">
                       <div className="flex flex-col-reverse sm:flex-row">
                         <div className="flex-1 sm:mr-10">
                           <div className="fields w-full">
-                            {/* inputs starts here */}
+                            {/* Inputs */}
                             {/* Name */}
                             <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
                               <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
@@ -266,27 +255,8 @@ function AddFundDollars(props) {
                               <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
                             </div>
 
-                            {/* <div className="field w-full my-2 flex-[0.4]">
-                              <InputCom
-                                fieldClass="px-6"
-                                spanTag="*"
-                                label="Name on Card"
-                                type="text"
-                                name="name"
-                                placeholder="DUMMY NAME"
-                                value={props.values.name}
-                                inputHandler={props.handleChange}
-                                blurHandler={props.handleBlur}
-                              />
-                              {props.errors.name && props.touched.name && (
-                                <p className="text-sm text-red-500">
-                                  {props.errors.name}
-                                </p>
-                              )}
-                            </div> */}
-
-                            <div className="flex items-center flex-1 gap-3 my-3">
-                              {/* CARD NUMBER */}
+                            <div className="flex items-center flex-1 gap-3 my-[10px]">
+                              {/* Card Number */}
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
                                   fieldClass="px-6"
@@ -299,15 +269,10 @@ function AddFundDollars(props) {
                                   value={props.values.cardNum}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.cardNum}
                                 />
-                                {props.errors.cardNum &&
-                                  props.touched.cardNum && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.cardNum}
-                                    </p>
-                                  )}
                               </div>
-                              {/* EXPIRE YEAR, YEAR */}
+                              {/* Expire Year, Year */}
                               <div className="sm:grid gap-5 grid-cols-2 flex-[0.4]">
                                 <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                   <div className="select-option">
@@ -315,13 +280,16 @@ function AddFundDollars(props) {
                                       className={`flex items-center justify-between mb-2.5`}
                                     >
                                       <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                         htmlFor="expiration"
                                       >
                                         Exp Month{" "}
-                                        <span className="text-red-700 text-sm tracking-wide">
+                                        <span className="text-red-700 text-sm italic">
                                           *
                                         </span>
+                                        <span className="text-[12px] text-red-500 ml-1">
+                                          {props.errors.expirationMonth && "**"}
+                                        </span>
                                       </label>
                                     </div>
                                     <div
@@ -352,12 +320,6 @@ function AddFundDollars(props) {
                                       </select>
                                     </div>
                                   </div>
-                                  {props.errors.expirationMonth &&
-                                    props.touched.expirationMonth && (
-                                      <p className="text-sm text-red-500">
-                                        {props.errors.expirationMonth}
-                                      </p>
-                                    )}
                                 </div>
                                 <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                   <div className="select-option">
@@ -365,13 +327,16 @@ function AddFundDollars(props) {
                                       className={`flex items-center justify-between mb-2.5`}
                                     >
                                       <label
-                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center line-clamp-3"
                                         htmlFor="expiration"
                                       >
                                         Exp Year{" "}
                                         <span className="text-red-700 text-sm tracking-wide">
                                           *
                                         </span>
+                                        <span className="text-[12px] text-red-500 italic">
+                                          {props.errors.expirationYear && "**"}
+                                        </span>
                                       </label>
                                     </div>
                                     <div
@@ -384,7 +349,12 @@ function AddFundDollars(props) {
                                         onBlur={props.handleBlur}
                                         name="expirationYear"
                                       >
-                                        <option value="" className="text-dark-gray">Year</option>
+                                        <option
+                                          value=""
+                                          className="text-dark-gray"
+                                        >
+                                          Year
+                                        </option>
                                         {expireYear?.length &&
                                           expireYear.map((item, index) => (
                                             <option key={index} value={item}>
@@ -394,18 +364,12 @@ function AddFundDollars(props) {
                                       </select>
                                     </div>
                                   </div>
-                                  {props.errors.expirationYear &&
-                                    props.touched.expirationYear && (
-                                      <p className="text-sm text-red-500">
-                                        {props.errors.expirationYear}
-                                      </p>
-                                    )}
                                 </div>
                               </div>
                             </div>
 
-                            <div className="flex items-center flex-1 gap-3 my-3">
-                              {/* Address AND CVV */}
+                            <div className="flex items-center flex-1 gap-3 my-[10px]">
+                              {/* Address and CVV */}
                               <div className="field w-full col-span-1 flex-[0.4]">
                                 <InputCom
                                   fieldClass="px-6"
@@ -418,12 +382,8 @@ function AddFundDollars(props) {
                                   value={props.values.cvv}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.cvv}
                                 />
-                                {props.errors.cvv && props.touched.cvv && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.cvv}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full flex-[0.6]">
                                 <InputCom
@@ -436,17 +396,13 @@ function AddFundDollars(props) {
                                   value={props.values.Address}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.address}
                                 />
-                                {props.errors.address &&
-                                  props.touched.address && (
-                                    <p className="text-sm text-red-500">
-                                      {props.errors.address}
-                                    </p>
-                                  )}
                               </div>
                             </div>
-                            {/* postal code and state */}
-                            <div className="sm:grid gap-5 grid-cols-3 my-3">
+
+                            {/* Postal Code and State */}
+                            <div className="sm:grid gap-5 grid-cols-3 my-[10px]">
                               <div className="field w-full mb-6 xl:mb-0 col-span-1">
                                 <InputCom
                                   fieldClass="px-6"
@@ -458,12 +414,8 @@ function AddFundDollars(props) {
                                   value={props.values.code}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.code}
                                 />
-                                {props.errors.code && props.touched.code && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.code}
-                                  </p>
-                                )}
                               </div>
                               <div className="field w-full col-span-1">
                                 <InputCom
@@ -476,60 +428,33 @@ function AddFundDollars(props) {
                                   value={props.values.state}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
+                                  error={props.errors.state}
                                 />
-                                {props.errors.state && props.touched.state && (
-                                  <p className="text-sm text-red-500">
-                                    {props.errors.state}
-                                  </p>
-                                )}
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
 
-                      {/* <div className="w-full">
-                                {requestStatus.message != "" && (
-                                <p
-                                    className={`text-center text-base ${
-                                    requestStatus.status ? "text-green-800" : "text-red-600"
-                                    }`}
-                                >
-                                    {requestStatus.message}
-                                </p>
-                                )}
-                                <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
-                                <div className="flex items-center space-x-4 mr-9">
-                                    <Link
-                                    to="/"
-                                    className="text-18 text-light-red tracking-wide "
-                                    >
-                                    <span className="border-b dark:border-[#5356fb29]  border-light-red">
-                                        {" "}
-                                        Cancel
-                                    </span>
-                                    </Link>
-
-                                    {requestStatus.loading ? (
-                                    <LoadingSpinner size="8" color="sky-blue" />
-                                    ) : (
-                                    <button
-                                        type="submit"
-                                        className="w-[152px] h-[46px] flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                                    >
-                                        Update Profile
-                                    </button>
-                                    )}
-                                </div>
-                                </div>
-                            </div> */}
-                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center">
+                      <div className="md:px-8 md:pt-4 px-4 pt-2 add-fund-btn flex justify-end items-center gap-3">
+                        <button
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center border-gradient text-base rounded-full"
+                          onClick={handleClose}
+                        >
+                          Cancel
+                        </button>
                         <button
                           type="submit"
-                          className="py-1 px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white gap-1"
+                          className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center btn-gradient text-base rounded-full text-white"
                         >
-                          <span className="text-white">Continue</span>{" "}
-                          <Icons name="chevron-right" />
+                          {loader ? (
+                            <LoadingSpinner size="6" color="sky-blue" />
+                          ) : (
+                            <>
+                              <span className="text-white">Continue</span>{" "}
+                              <Icons name="chevron-right" />
+                            </>
+                          )}
                         </button>
                       </div>
                     </Form>
diff --git a/src/components/MyWallet/AddFundPop.jsx b/src/components/MyWallet/AddFundPop.jsx
index aa1cc83..2d38efa 100644
--- a/src/components/MyWallet/AddFundPop.jsx
+++ b/src/components/MyWallet/AddFundPop.jsx
@@ -36,20 +36,18 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       }, 5000);
     }
 
-    if (input) return;
-    // setTimeout(
-    //   () =>
-    //     setConfirmCredit({
-    //       show: true,
-    //       data: { amount: Number(input), currency: "naira" },
-    //     }),
-    //   1500
-    // );
-
-    // const stateData = { amount: Number(input), currency: "naira" };
-    // navigate("confirm-add-fund", { state: stateData });
-
-    // setInput("");
+    const stateData = {
+      amount: Number(input),
+      currency: currency,
+    };
+    return setTimeout(
+      () =>
+        setConfirmCredit({
+          show: true,
+          data: stateData,
+        }),
+      1500
+    );
   };
 
   return (
diff --git a/src/components/MyWallet/ConfirmAddFund.jsx b/src/components/MyWallet/ConfirmAddFund.jsx
index a8b90ee..f3a8771 100644
--- a/src/components/MyWallet/ConfirmAddFund.jsx
+++ b/src/components/MyWallet/ConfirmAddFund.jsx
@@ -96,7 +96,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
   //   }
   // }, []);
 
-  let __confirmCard = JSON.parse(confirmCredit?.data.card);
+  let __confirmCard = JSON.parse(confirmCredit?.data.card) || "";
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-- 
2.34.1