reset profile password implemented

src/assets/images/payment-cards/visa-card.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" id="Visacard"><g fill="#767fad" class="color303c42 svgShape"><path d="M28 4H2C.897 4 0 4.897 0 6v18c0 1.103.897 2 2 2h26c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm1 20c0 .551-.449 1-1 1H2c-.551 0-1-.449-1-1V6c0-.551.449-1 1-1h26c.551 0 1 .449 1 1v18z" fill="#5218ed" class="color000000 svgShape"></path><path d="M7.677 14.266a.2.2 0 0 0 .228.053.17.17 0 0 0 .106-.194l-.314-1.368a.121.121 0 0 0-.002-.009c-.113-.39-.47-.449-.729-.459H6.96l-1.768-.002c-.091 0-.17.06-.185.143a.172.172 0 0 0 .121.193c1.078.358 1.96.926 2.55 1.643zM23.535 12.303h-1.15c-.46 0-.724.141-.883.473l-2.383 4.981a.162.162 0 0 0 .014.165c.035.05.094.079.158.079h1.35a.189.189 0 0 0 .176-.112c.165-.404.272-.661.307-.744h.974l1.183.002c.039.151.134.552.173.717.019.08.095.137.184.137h1.177c.057 0 .11-.024.146-.065s.05-.095.038-.146l-1.28-5.351a.185.185 0 0 0-.184-.136zm-1.926 3.675.895-2.138.114.492.39 1.646h-1.4z" fill="#5218ed" class="color000000 svgShape"></path><path d="M11.816 12.38a.193.193 0 0 0-.157-.078h-1.37a.188.188 0 0 0-.175.11L8.511 16.19l-.172-.575a.142.142 0 0 0-.009-.023c-.253-.542-.933-1.39-1.881-2.062-.065-.046-.154-.048-.221-.006s-.097.12-.074.192L7.47 17.87a.187.187 0 0 0 .18.124l1.518-.002a.19.19 0 0 0 .173-.104l2.49-5.344a.162.162 0 0 0-.016-.164zM14.088 12.297h-1.303a.184.184 0 0 0-.186.144l-.989 5.355a.165.165 0 0 0 .042.141c.036.04.088.062.144.062h1.302c.092 0 .17-.061.186-.145l.99-5.354a.164.164 0 0 0-.042-.141.195.195 0 0 0-.144-.062zM17.696 13.452h.05c.51 0 .87.107 1.097.187a.202.202 0 0 0 .16-.011.175.175 0 0 0 .093-.122l.152-.826c.016-.085-.039-.168-.128-.194a4.634 4.634 0 0 0-1.3-.182c-1.607 0-2.735.746-2.744 1.814-.01.79.807 1.231 1.422 1.494.632.269.844.441.841.682-.004.369-.506.536-.97.536a3.676 3.676 0 0 1-1.522-.285.202.202 0 0 0-.163.008.175.175 0 0 0-.095.123l-.161.87a.173.173 0 0 0 .123.193c.444.144 1.064.233 1.66.24h.001c1.705-.001 2.815-.739 2.827-1.88.006-.627-.427-1.1-1.36-1.49-.57-.256-.92-.426-.917-.686 0-.234.32-.47.934-.47z" fill="#5218ed" class="color000000 svgShape"></path></g></svg>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -1,11 +1,18 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
-import ModalCom from "../../Helpers/ModalCom";
 import { toast } from "react-toastify";
 import usersService from "../../../services/UsersService";
-import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import ModalCom from "../../Helpers/ModalCom";
 import { PriceFormatter } from "../../Helpers/PriceFormatter";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
 
 const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
+  const [textValue, setTextValue] = useState("");
+  const apiCall = useMemo(() => new usersService(), []);
+
+  const handleInputChange = ({ target: { value } }) => {
+    setTextValue(value);
+  };
+
   const MarketCalls = (details) => {
     const [marketMsg, setMarketMsg] = useState({
       loading: false,
@@ -24,8 +31,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
 
     const MarketDetail = async () => {
       try {
-        setMarketMsg({ loading: true });
         if (!textValue) return;
+        setMarketMsg({ loading: true });
 
         reqData.yourmessage = textValue;
 
@@ -87,22 +94,11 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
       }
     };
 
-    // useEffect(() => {
-    //   ManageInterest();
-    // }, []);
-
     return { MarketDetail, ManageInterest, manageInt, marketMsg };
   };
 
-  const [textValue, setTextValue] = useState("");
+  let { manageInt, ManageInterest, MarketDetail, marketMsg } =
-
+    MarketCalls(details);
-  const handleInputChange = ({ target: { value } }) => {
-    setTextValue(value);
-  };
-
-  const apiCall = useMemo(() => new usersService(), []);
-
-  let { manageInt, ManageInterest, MarketDetail, marketMsg } = MarketCalls(details);
 
   let thePrice = PriceFormatter(
     details?.price * 0.01,
@@ -270,9 +266,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                   Interest: <b className="ml-1">{details.interest_count}</b>
                 </p>
                 <hr />
-                <p className="my-1">
+                <p className="my-1">Expire: {details.expire}</p>
-                  Expire: {details.expire}
-                </p>
               </div>
             </div>
             <button

src/components/MyWallet/AddFund.jsx

@@ -1,48 +1,52 @@
-import React, {useState} from 'react'
+import React, { useState } from "react";
-import RecentActivityTable from './WalletComponent/RecentActivityTable'
+import { useLocation, useNavigate } from "react-router-dom";
-import LoadingSpinner from '../Spinners/LoadingSpinner'
+import InputCom from "../Helpers/Inputs/InputCom";
-import { useNavigate, useLocation } from 'react-router-dom'
+import LoadingSpinner from "../Spinners/LoadingSpinner";
-import InputCom from '../Helpers/Inputs/InputCom'
+import RecentActivityTable from "./WalletComponent/RecentActivityTable";
 
-import AddFundDollars from './AddFundDollars'
+import AddFundDollars from "./AddFundDollars";
 
-function AddFund({payment}) {
+function AddFund({ payment }) {
-   
+  const navigate = useNavigate();
-    const navigate = useNavigate()
+  const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
-    const {currency} = useLocation()?.state //GETS THE USER CURRENCY FOR ADD FUND
 
-    //STATE FOR CONTROLLED INPUT
+  //STATE FOR CONTROLLED INPUT
-    let [input, setInput] = useState('')
+  let [input, setInput] = useState("");
 
-    let [inputError, setInputError] = useState('')
+  let [inputError, setInputError] = useState("");
 
-    // FUNCTION TO HANDLE INPUT CHANGE
+  // FUNCTION TO HANDLE INPUT CHANGE
-    const handleChange = ({target:{name, value}}) => {
+  const handleChange = ({ target: { name, value } }) => {
-        setInput(value)
+    setInput(value);
+  };
+
+  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = () => {
+    setInputError("");
+    if (!input || input == "0") {
+      setInputError("Please Enter Amount");
+      return setTimeout(() => {
+        setInputError("");
+      }, 5000);
     }
 
-    //FUNCTION TO HANDLE SUBMIT
+    if (isNaN(input)) {
-    const handleSubmit = () => {
+      setInputError("Amount must be a Number");
-        setInputError('')
+      return setTimeout(() => {
-        if(!input || input == '0'){
+        setInputError("");
-            setInputError('Please Enter Amount')
+      }, 5000);
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        if(isNaN(input)){
-            setInputError('Amount must be a Number')
-            return setTimeout(()=>{setInputError('')}, 5000)
-        }
-
-        const stateData = {amount: Number(input), currency: 'naira'}
-        navigate('confirm-add-fund', {state: stateData})
-     
-        setInput('')
     }
-    return (
+
-        <div>
+    const stateData = { amount: Number(input), currency: "naira" };
-            {/* heading */}
+    navigate("confirm-add-fund", { state: stateData });
-            {/* <div className="sm:flex justify-between items-center mb-6">
+
+    setInput("");
+  };
+  
+  return (
+    <div>
+      {/* heading */}
+      {/* <div className="sm:flex justify-between items-center mb-6">
                 <div className="w-full flex justify-start space-x-3 items-center">
                     <button
                     type="button"
@@ -73,68 +77,78 @@ function AddFund({payment}) {
                 </div>
             </div> */}
 
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+      <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+        <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
+          <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl shadow">
-                        {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
+            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-                        {/*<hr />*/}
+            {/*<hr />*/}
-                        <form className='md:p-8 p-4 add-fund-info'>
+            <form className="md:p-8 p-4 add-fund-info">
-                            <div className="field w-full mb-6">
+              <div className="field w-full mb-6">
-                                <InputCom
+                <InputCom
-                                    fieldClass="px-6"
+                  fieldClass="px-6"
-                                    label={currency == 'US Dollars' ? "Amount (USD)" : "Amount (Naira)"}
+                  label={
-                                    type="text"
+                    currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"
-                                    name="amount"
+                  }
-                                    placeholder="0"
+                  type="text"
-                                    value={input}
+                  name="amount"
-                                    inputHandler={handleChange}
+                  placeholder="0"
-                                />
+                  value={input}
-                                {inputError && <p className='text-base text-red-500'>{inputError}</p>}
+                  inputHandler={handleChange}
-                            </div>
+                />
-                        </form>
+                {inputError && (
-                        <hr />
+                  <p className="text-base text-red-500">{inputError}</p>
+                )}
+              </div>
+            </form>
+            <hr />
 
-                        {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
-                        {currency == 'US Dollars' &&
+            {currency == "US Dollars" && (
-                        <div className='w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow'>
+              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl shadow">
-                            <AddFundDollars setInputError={setInputError} input={input} setInput={setInput} />
+                <AddFundDollars
-                        </div>
+                  setInputError={setInputError}
-                        }
+                  input={input}
+                  setInput={setInput}
+                />
+              </div>
+            )}
 
-                        {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
-                        {currency != 'US Dollars' &&
+            {currency != "US Dollars" && (
-                        <div className='md:p-8 p-4 add-fund-btn flex justify-end items-center py-4'>
+              <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4">
-                            <button
+                <button
-                                onClick={handleSubmit}
+                  onClick={handleSubmit}
-                                type="button"
+                  type="button"
-                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-                            >
+                >
-                                <span className="text-white">Continue</span>
+                  <span className="text-white">Continue</span>
-                            </button>
+                </button>
-                        </div>
+              </div>
-                        }
+            )}
-                    </div>
+          </div>
-                </div>
-            </div>
-
-            {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-            {currency != 'US Dollars' &&
-            <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-                <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-                    <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-                        <h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
-                        {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-                        {payment.loading ?
-                            <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RecentActivityTable  payment={payment}/>
-                        }
-                    </div>
-                </div>
-            </div>
-            }          
         </div>
-      )
+      </div>
+
+      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
+      {currency != "US Dollars" && (
+        <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+          <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
+            <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
+              <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
+                Recent Activity
+              </h2>
+              {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
+              {payment.loading ? (
+                <LoadingSpinner size="16" color="sky-blue" />
+              ) : (
+                <RecentActivityTable payment={payment} />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
 }
 
-export default AddFund
+export default AddFund;

src/components/MyWallet/AddFundDollars.jsx

@@ -58,7 +58,7 @@ const initialValues = {
 function AddFundDollars(props) {
   const navigate = useNavigate();
   const apiCall = new usersService();
-
+  let countryWallet = props.walletItem.country;
   const [tab, setTab] = useState("previous");
   const [loader, setLoader] = useState(false);
   const { userDetails } = useSelector((state) => state?.userDetails);
@@ -82,7 +82,7 @@ function AddFundDollars(props) {
     indexOfLastItem
   );
 
-  const handleSubmit = (values, helpers) => {
+  const handleSubmit = async (values, helpers) => {
     props.setInputError("");
     if (!props.input || props.input === "0") {
       props.setInputError("Please Enter Amount");
@@ -99,12 +99,37 @@ function AddFundDollars(props) {
         return;
       }
       setLoader(true);
-      const stateData = {
+      let stateData = {
-        amount: Number(props.input),
+        amount: Number(props.input) * 100,
-        currency: props.currency,
+        currency: props.walletItem?.code,
-        card: prevCardDetails["payment-card"],
       };
 
+      try {
+        const res = await apiCall.getStartCredit(stateData);
+        if (res.data.internal_return < 0) {
+          setLoader(false);
+          props.setInputError("An Error Occurred");
+          setTimeout(() => props.setInputError(""), 5000);
+          return;
+        }
+
+        const _response = res.data;
+        stateData.amount = Number(props.input);
+        stateData.card = prevCardDetails["payment-card"];
+        stateData.cardType = "prev";
+        stateData = { ...stateData, ..._response };
+
+        setTimeout(() => {
+          setLoader(false);
+          props.setConfirmCredit({
+            show: true,
+            data: stateData,
+          });
+        }, 1500);
+      } catch (error) {
+        console.log(error);
+      }
+
       return setTimeout(() => {
         props.setConfirmCredit({ show: true, data: stateData });
         setLoader(false);
@@ -132,9 +157,7 @@ function AddFundDollars(props) {
       });
   }, []);
 
-  console.log(props)
+  const handleClose = props.onClose;
-
-  const handleClose = props.onClose
 
   return (
     <>
@@ -143,7 +166,7 @@ function AddFundDollars(props) {
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3">
             <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-              {props.currency == "US Dollars" && "Payment Method"}
+              {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label

src/components/MyWallet/AddFundPop.jsx

@@ -1,54 +1,78 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import usersService from "../../services/UsersService";
+import Icons from "../Helpers/Icons";
 import InputCom from "../Helpers/Inputs/InputCom";
-
+import LoadingSpinner from "../Spinners/LoadingSpinner";
 import AddFundDollars from "./AddFundDollars";
 
-function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
+function AddFundPop({
+  _payment,
+  input,
+  setInput,
+  onClose,
+  setConfirmCredit,
+  walletItem,
+}) {
   const navigate = useNavigate();
-  //   const { currency } = useLocation()?.state; //GETS THE USER CURRENCY FOR ADD FUND
+  const apiCall = new usersService();
+  let countryWallet = walletItem?.country;
+  const { payment, currency } = _payment;
 
-  let { payment, currency } = _payment;
+  const [inputError, setInputError] = useState("");
+  const [loader, setLoader] = useState(false);
 
-  //STATE FOR CONTROLLED INPUT
-  let [inputError, setInputError] = useState("");
-
-  // FUNCTION TO HANDLE INPUT CHANGE
   const handleChange = ({ target: { name, value } }) => {
     setInput(value);
   };
 
-  //FUNCTION TO HANDLE SUBMIT
+  const handleSubmit = async () => {
-  const handleSubmit = (e) => {
-    e.preventDefault();
     setInputError("");
-    if (!input || input == "0") {
+    setLoader(true);
+
+    if (!input || input === "0") {
+      setLoader(false);
       setInputError("Please Enter Amount");
-      return setTimeout(() => {
+      setTimeout(() => setInputError(""), 5000);
-        setInputError("");
+      return;
-      }, 5000);
     }
 
     if (isNaN(input)) {
+      setLoader(false);
       setInputError("Amount must be a Number");
-      return setTimeout(() => {
+      setTimeout(() => setInputError(""), 5000);
-        setInputError("");
+      return;
-      }, 5000);
     }
 
-    const stateData = {
+    let stateData = {
-      amount: Number(input),
+      amount: Number(input) * 100,
-      currency: currency,
+      currency: walletItem?.code,
     };
 
-    return setTimeout(
+    try {
-      () =>
+      const res = await apiCall.getStartCredit(stateData);
+      if (res.data.internal_return < 0) {
+        setLoader(false);
+        setInputError("An Error Occurred");
+        setTimeout(() => setInputError(""), 5000);
+        return;
+      }
+
+      const _response = res.data;
+      stateData.amount = Number(input);
+      stateData.currency = currency;
+      stateData = { ...stateData, ..._response };
+
+      setTimeout(() => {
+        setLoader(false);
         setConfirmCredit({
           show: true,
           data: stateData,
-        }),
+        });
-      1500
+      }, 1500);
-    );
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
@@ -56,8 +80,6 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-            {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
-            {/*<hr />*/}
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
               <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                 Amount({currency})
@@ -77,11 +99,11 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             </form>
 
-            {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
+            {countryWallet === "US" && (
-            {currency == "US Dollars" && (
               <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
                 <AddFundDollars
                   setInputError={setInputError}
+                  walletItem={walletItem}
                   input={input}
                   setInput={setInput}
                   currency={currency}
@@ -91,12 +113,12 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
-            {currency != "US Dollars" && <div className="h-[18rem]"></div>}
+            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
-            {/* HIDES THIS BUTTON IF CURENCY IS NAIRA */}
+
-            {currency != "US Dollars" && (
+            {countryWallet == "NG" && (
               <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
                 <button
-                  className="px-2 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
                   onClick={onClose}
                 >
                   Cancel
@@ -104,33 +126,22 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
                 <button
                   onClick={handleSubmit}
                   type="button"
-                  className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                  className="px-4 py-1 h-11 flex justify-center space-x-1 items-center btn-gradient text-base rounded-full text-white max-w-[100px] w-full"
                 >
-                  <span className="text-white">Continue</span>
+                  {loader ? (
+                    <LoadingSpinner size="6" color="sky-blue" />
+                  ) : (
+                    <>
+                      <span className="text-white">Continue</span>{" "}
+                      <Icons name="chevron-right" />
+                    </>
+                  )}
                 </button>
               </div>
             )}
           </div>
         </div>
       </div>
-      {/* HIDES THIS SECTION IF CURENCY IS NAIRA */}
-      {currency != "US Dollars" &&
-        // <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
-        //   <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
-        //     <div className="wallet w-full md:p-8 p-4 h-full min-h-[590px] bg-white dark:bg-dark-white rounded-2xl shadow">
-        //       <h2 className="text-gray-900 dark:text-white text-xl lg:text-2xl font-medium">
-        //         Recent Activity
-        //       </h2>
-        //       {/* <p className='text-base text-gray-600 dark:text-white'>Activity Report</p> */}
-        //       {payment?.loading ? (
-        //         <LoadingSpinner size="16" color="sky-blue" />
-        //       ) : (
-        //         <RecentActivityTable payment={payment} />
-        //       )}
-        //     </div>
-        //   </div>
-        // </div>
-        null}
     </div>
   );
 }

src/components/MyWallet/ConfirmAddFund.jsx

@@ -2,16 +2,20 @@ import React, { useState } from "react";
 import { useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import InputCom from "../Helpers/Inputs/InputCom";
 
 import usersService from "../../services/UsersService";
 
 import { FlutterWaveButton, closePaymentModal } from "flutterwave-react-v3";
 
 function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
+  const __confirmData = confirmCredit?.data;
+  const __confirmCountry = walletItem?.country;
+  const __confirmCardDetails = __confirmData.card
+    ? JSON.parse(__confirmData.card)
+    : "";
   let { userDetails } = useSelector((state) => state.userDetails); // TO GET LOGGEDIN USER DETAILS
 
-  let [pageLoading, setPageLoading] = useState(true);
+  let [confirmLoading, setConfirmLoading] = useState(false);
 
   let [requestStatus, setRequestStatus] = useState({
     message: "",
@@ -43,7 +47,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
           loading: false,
           status: true,
         });
-        toast.success("Account Topup was sucessful");
+        toast.success("Account Topup was successful");
         setTimeout(() => {
           navigate("/my-wallet", { replace: true });
         }, 1000);
@@ -87,18 +91,25 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
-  // useEffect(() => {
+  const handlePrevCard = async () => {
-  //   // what happens if not data redirect user
+    setConfirmLoading(true);
-  //   if (!data) {
+    let reqData = {
-  //     navigate("/my-wallet/add-fund", { replace: true });
+      amount: __confirmData.amount * 100,
-  //   } else {
+      card_uid: __confirmCardDetails.card_uid,
-  //     setPageLoading(false);
+      credit_reference: __confirmData.credit_reference,
-  //   }
+      currency: __confirmData.currency,
-  // }, []);
+    };
 
-  const __confirmCard = confirmCredit?.data.card
+    try {
-    ? JSON.parse(confirmCredit?.data.card)
+      const res = await apiURL.getPaidPrevCard(reqData);
-    : "";
+      setConfirmLoading(false);
+      console.log(res.data);
+    } catch (error) {
+      setConfirmLoading(false);
+      console.log(error);
+    }
+    console.log("Test me");
+  };
 
   const ThePaymentText = ({ value }) => (
     <div className="my-2 flex items-center gap-5">
@@ -113,61 +124,68 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
+  console.log(confirmCredit);
+
   return (
     <div className="content-wrapper w-full h-[32rem]">
       <div className="w-full mb-10">
         <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
-          {/* <h2 className="md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium">
-              Confirm Add Fund To Account
-            </h2>
-            <hr /> */}
           <div className="px-4 md:p-8 py-4 add-fund-info">
             <div className="field w-full mb-3 min-h-[45px]">
               {confirmCredit?.show ? (
                 <div className="flex flex-col gap-4">
-                  <div className="flex items-center gap-4">
+                  <div
+                    className={`flex items-center ${
+                      __confirmCountry == "US" ? "gap-14" : "gap-4"
+                    }`}
+                  >
                     <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Amount({confirmCredit?.data?.currency})
+                      Amount({__confirmData?.currency})
                     </h1>
                     <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
                       {`${walletItem?.symbol} ${
-                        Number(confirmCredit?.data?.amount).toLocaleString() ||
+                        Number(__confirmData?.amount).toLocaleString() || ""
-                        ""
                       }`}
                     </span>
                   </div>
-                  <div className="flex items-center gap-4">
+                  {__confirmCountry == "US" && (
-                    {/* <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"> */}
+                    <div className="flex items-center gap-8">
-                    <label
+                      <label
-                      htmlFor="payment"
+                        htmlFor="payment"
-                      className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                        className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
-                    >
+                      >
-                      {confirmCredit?.data?.currency && "Payment Method:"}
+                        {__confirmCountry == "US" && "Payment Method"}
-                    </label>
+                      </label>
-                    <span className="text-[#181c32] dark:text-white ">
+                      <span className="text-[#181c32] dark:text-white ">
-                      {__confirmCard ? (
+                        {__confirmCardDetails ? (
-                        <ThePaymentText value={__confirmCard} />
+                          <ThePaymentText value={__confirmCardDetails} />
-                      ) : null}
+                        ) : null}
+                      </span>
+                    </div>
+                  )}
+
+                  <div
+                    className={`${
+                      __confirmCountry == "US" ? "gap-[3.7rem]" : "gap-8"
+                    } flex items-center`}
+                  >
+                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      Reference No
+                    </h1>
+                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      {__confirmData?.credit_reference}
                     </span>
                   </div>
                 </div>
-              ) : (
+              ) : null}
-                <InputCom
-                  fieldClass="px-6"
-                  label={` Amount${confirmCredit?.data?.currency}`}
-                  type="text"
-                  name="amount"
-                  value={confirmCredit?.data?.amount || ""}
-                  disable={true}
-                />
-              )}
             </div>
           </div>
-          {/* <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
-            {confirmCredit?.data?.currency && "Payment Method"}
-          </h1> */}
           {/* <hr /> */}
-          <div className="min-h-[220px]"></div>
+          <div
+            className={
+              __confirmCountry == "US" ? "min-h-[163px]" : "min-h-[200px]"
+            }
+          ></div>
           <div className="md:p-8 p-4 add-fund-btn flex justify-end items-center py-4 gap-4">
             <button
               className="px-4 h-11 flex justify-center items-center border-gradient text-base rounded-full"
@@ -175,8 +193,19 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-
+            {__confirmCountry == "US" && (
-            {confirmCredit?.data?.currency == "Naira" && (
+              <button
+                className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
+                onClick={
+                  __confirmData?.cardType === "prev"
+                    ? handlePrevCard
+                    : () => console.log("Test me")
+                }
+              >
+                Proceed
+              </button>
+            )}
+            {__confirmCountry == "NG" && (
               <FlutterWaveButton
                 {...fwConfig}
                 className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -19,19 +19,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     data: {},
   });
 
-  // const openConfirmCredit = (value) => {
-  //   setConfirmCredit({ show: true, data: { ...value } });
-  // };
-
-  // const closeConfirmCredit = () => {
-  //   setConfirmCredit({ show: false, data: {} });
-  // };
-  // const handleConfirmCredit = useMemo((input) => {
-  //   if (input) {
-  //     setConfirmCredit(true);
-  //   } else setConfirmCredit(false);
-  // }, []);
-
   const switchNextStep = ({ target: value }) => {
     setSuggestedNextStep(value);
   };
@@ -94,6 +81,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
           ) : (
             <AddFundPop
               _payment={details}
+              walletItem={walletItem}
               input={input}
               setInput={setInput}
               onClose={onClose}

src/components/MyWallet/WalletAction.jsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 function WalletAction({walletItem, payment, openPopUp}) {
   return (
-    <div className="counters flex justify-between gap-2">
+    <div className="counters w-full flex justify-between gap-2">
         <div className='w-1/2 flex justify-center items-center'>
         <Link
             to="transfer-fund"

src/components/MyWallet/WalletBox.jsx

@@ -1,7 +1,3 @@
-import CurrencyStaticsSection from "./CurrencyStaticsSection";
-import CurrentBalanceWidget from "./CurrentBalanceWidget";
-import InvestmentSection from "./InvestmentSection";
-import RecentTransactionWidget from "./RecentTransactionWidget";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
 import WalletItemCard from "./WalletItemCard";
 
@@ -10,14 +6,14 @@ export default function WalletBox({ wallet, coupon, payment }) {
     <>
       <div className="my-wallet-wrapper w-full mb-10">
         <div className="main-wrapper w-full">
-          <div className="balance-inquery w-full flex flex-wrap justify-center gap-2">
+          <div className="balance-inquery w-full lg:grid grid-cols-[repeat(auto-fill,_minmax(325px,_1fr))] gap-5 mb-11 h-[22rem]">
             {wallet.loading ? (
               <div className="w-full h-full flex items-center justify-center">
                 <LoadingSpinner size="16" color="sky-blue" />
               </div>
             ) : wallet.data.length ? (
               wallet.data.map((item, index) => (
-                <div className="w-[350px] h-full flex justify-center">
+                <div className="lg:w-full h-full mb-10 lg:mb-0">
                   <WalletItemCard walletItem={item} payment={payment} />
                 </div>
               ))

src/components/MyWallet/WalletItemCard.jsx

@@ -1,10 +1,9 @@
 import React, { useState } from "react";
-import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
-import { PriceFormatter } from "../Helpers/PriceFormatter";
-import { Link } from "react-router-dom";
 import { useSelector } from "react-redux";
-import CreditPopup from "./Popup/CreditPopup";
+import background from "../../assets/images/bg-sky-blue.jpg"; //shape/balance-bg.svg";
 import localImgLoad from "../../lib/localImgLoad";
+import { PriceFormatter } from "../Helpers/PriceFormatter";
+import CreditPopup from "./Popup/CreditPopup";
 import WalletAction from "./WalletAction";
 
 export default function WalletItemCard({ walletItem, payment }) {
@@ -29,83 +28,61 @@ export default function WalletItemCard({ walletItem, payment }) {
     setCreditPopup({ show: false, data: {} });
   };
 
-  console.log("walletItem >>", walletItem, payment);
+  let image = walletItem.code
-
+    ? `${walletItem.code.toLocaleLowerCase()}.svg`
-  let image = walletItem.code ? `${walletItem.code.toLocaleLowerCase()}.svg` : 'default.png' // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
+    : "default.png"; // HOLDS THE VALUE NAME PROPERTY FOR IMAGE ICON
 
   return (
     <>
       <div
-        className={`current-balance-widget w-[350px] h-full rounded-2xl overflow-hidden flex flex-col gap-2 px-8 pt-9 pb-20`}
+        className={`current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 px-8 pt-9 pb-20`}
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
       >
-        <div className="wallet xxs:flex justify-between items-start gap-3">
+        {/* <div className="w-[350px]"> */}
-          <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+          <div className="wallet w-full flex justify-between items-start gap-3">
-            <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            <div className="min-w-[100px] min-h-[100px] max-w-[100px] max-h-[100px] rounded-full bg-[#e3e3e3] flex justify-center items-center">
+              <img src={localImgLoad(`images/currency/${image}`)} className="w-full h-full" alt="curreny-icon" />
+            </div>
+            <div className="balance w-full mt-2 flex justify-center">
+              <div className="">
+                <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+                  Current Balance
+                </p>
+                <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
+                  {PriceFormatter(
+                    walletItem.amount * 0.01,
+                    walletItem.code,
+                    undefined,
+                    "text-[2rem]"
+                  )}
+                </p>
+              </div>
+            </div>
           </div>
-          <div className="balance mt-2">
+
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
+          <p className="my-5 text-lg text-white tracking-wide flex justify-center items-center gap-2">
-              Current Balance
+            HOLDINGS :{" "}
-            </p>
+            <span className="mt-1">
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
               {PriceFormatter(
-                walletItem.amount * 0.01,
+                walletItem.escrow * 0.01,
                 walletItem.code,
                 undefined,
                 "text-[2rem]"
               )}
-            </p>
+            </span>
-            <p className="xxs:-ml-5 mt-10 mb-5 text-lg text-white tracking-wide flex justify-start items-center gap-2">
+          </p>
-              HOLDINGS :{" "}
+          {/* for white underline */}
-              <span className="mt-1">
+          <div className="my-2 w-full h-[1px] bg-white"></div> 
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div>
-        {/* <div className="flex justify-center items-center">
-          <div className="balance">
-            <p className="text-lg text-white opacity-[70%] tracking-wide mb-6">
-              Current Balance
-            </p>
-            <p className="text-[44px] font-bold text-white tracking-wide leading-10 mb-2">
-              {PriceFormatter(
-                walletItem.amount * 0.01,
-                walletItem.code,
-                undefined,
-                "text-[2rem]"
-              )}
-            </p>
-            <p className="text-lg text-white tracking-wide">
-              HOLDINGS :{" "}
-              <span className="mt-1">
-                {PriceFormatter(
-                  walletItem.escrow * 0.01,
-                  walletItem.code,
-                  undefined,
-                  "text-[2rem]"
-                )}
-              </span>
-            </p>
-          </div>
-        </div> */}
 
-        {/* for white underline */}
+          {!accountType ? (
-        <div className="my-2 w-full h-[1px] bg-white"></div> 
+            <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
-
+          )
-        {!accountType ? (
+          :
-          <WalletAction walletItem={walletItem} payment={payment} openPopUp={openPopUp} />
+          null
-        )
+          }
-        :
+        {/* </div> */}
-        null
-      }
       </div>
       {creditPopup.show && (
         <CreditPopup

src/components/Settings/Tabs/CardList.jsx

@@ -0,0 +1,91 @@
+import React, {useEffect, useState} from 'react'
+import method1 from "../../../assets/images/payment-method-1.png";
+import LoadingSpinner from '../../Spinners/LoadingSpinner';
+import usersService from "../../../services/UsersService";
+import { handlePagingFunc } from '../../Pagination';
+import PaginatedList from '../../Pagination/PaginatedList';
+
+function CardList() {
+    const api = new usersService();
+  const [cardList, setCardList] = useState({loading: true, data: []})
+
+  const [currentPage, setCurrentPage] = useState(0);
+  const indexOfFirstItem = Number(currentPage);
+  const indexOfLastItem =
+    Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
+  const currentCardList = cardList?.data?.slice(indexOfFirstItem, indexOfLastItem);
+
+  const handlePagination = (e) => {
+    handlePagingFunc(e, setCurrentPage);
+  };
+
+  useEffect(()=>{
+    api.payListCard().then(res=>{
+      setCardList({loading: false, data:res.data?.result_list})
+    }).catch(err => {
+      setCardList({loading: false, data:[]})
+      console.log('ERROR', err)
+    })
+  },[])
+  return (
+    <div className='w-full'>
+        <ul className="payment-items w-full min-h-[400px]">
+            {cardList.loading ?
+            <div className='w-full h-[300px] flex justify-center items-center'>
+                <LoadingSpinner size='8' color='sky-blue' />
+            </div>
+            :
+            cardList.data.length ?
+            currentCardList.map(item =>(
+            <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
+                <div className="flex space-x-5 mb-2 sm:mb-0">
+                    <div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                    <img className='rounded-full w-full h-full' src={method1} alt="payment" />
+                    </div>
+                    <div>
+                    <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                        Added: {item.added}
+                    </p>
+                    <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                        {item.description} **********{item.digits}
+                    </p>
+                    {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
+                        Verified
+                    </p> */}
+                    </div>
+                </div>
+                <div>
+                    <button
+                    type="button"
+                    className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
+                    >
+                    Delete
+                    </button>
+                </div>
+            </li>
+            ))
+            :
+            <h1 className='font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap'>No Cards Found</h1>
+            }
+        </ul>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList
+            onClick={handlePagination}
+            prev={currentPage == 0 ? true : false}
+            next={
+            currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+            cardList?.data?.length
+                ? true
+                : false
+            }
+            data={cardList?.data}
+            start={indexOfFirstItem}
+            stop={indexOfLastItem}
+        />
+      {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default CardList

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -3,11 +3,39 @@
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
 import PasswordSvg from "../PasswordSvg";
+import LoadingSpinner from "../../Spinners/LoadingSpinner";
+import usersService from "../../../services/UsersService";
+import { useNavigate } from "react-router-dom";
 
 export default function ChangePasswordTab() {
+  const apiUrl = new usersService()
+  const navigate = useNavigate()
+
   const [oldPass, setOldPass] = useState("hide-password");
   const [newPass, setNewPass] = useState("hide-password");
   const [confirmPass, setConfirmPass] = useState("hide-password");
+
+  const [requestStatus, setRequestStatus] = useState({loading: false, status: false, message: ''})
+  
+  const [inputEmpty, setInputEmpty] = useState(false)
+  let [inputs, setInputs] = useState({
+    old_pwd: '',
+    new_pwd: '',
+    confirm_new_pwd: ''
+  })
+
+  const handleInputChange = ({target:{name, value}}) => { // FUNCTION TO HANDLE WHEN AN INPUT CHANGES
+    setInputs(prev => ({...prev, [name]:value}))
+  }
+
+  const handleCancel = () => { // FUNCTION TO CLEAR ALL TYPED INPUTS
+    setInputs({
+      old_pwd: '',
+      new_pwd: '',
+      confirm_new_pwd: ''
+    })
+  }
+
   const showPassword = (value) => {
     const password = document.getElementById(`${value}`);
     if (value && value === "old_password") {
@@ -38,16 +66,61 @@ export default function ChangePasswordTab() {
       }
     }
   };
+
+  const handlePwdUpdate = () => {
+    setInputEmpty(false) // SETS THE STATE OF ANY INPUT IS EMPTY TO FALSE
+    if(!inputs.old_pwd || !inputs.new_pwd || !inputs.confirm_new_pwd){ // CHECKS IF ANY INPUT FIELD IS EMPTY AND SETS INPUT EMPTY TO TRUE
+      setInputEmpty(true)
+      return setTimeout(()=>{setInputEmpty(false)},3000)
+    }
+
+    if(inputs.new_pwd != inputs.confirm_new_pwd){ // CHECKS IF PASSWORD MATCHES CONFIRM PASSWORD
+      setRequestStatus({loading: false, status: false, message: 'new password must match confirm password'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(/^[a-zA-Z0-9]*$/.test(inputs.new_pwd) == false){ // CHECKS IF PASSWORD IS ALPHANUMERIC
+      setRequestStatus({loading: false, status: false, message: 'password must be alphanumeric'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    if(inputs.new_pwd.length < 6){ // CHECKS IF PASSWORD IS UPTO SIX CHARACTERS
+      setRequestStatus({loading: false, status: false, message: 'password must be upto six characters'})
+      return setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},3000)
+    }
+
+    
+    let reqData = { // REQUEST PAYLOAD
+      current_pass: inputs.old_pwd,
+      new_pass: inputs.new_pwd
+    }
+
+    
+    setRequestStatus({loading: true, status: false, message: ''})
+
+    apiUrl.profilePassChange(reqData).then(res => {
+      if(res.status != 200 || res.data.internal_return < 0){
+        setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+        return
+      }
+      setRequestStatus({loading: false, status: true, message: 'password update was successful'})
+      setTimeout(()=>{navigate('/settings', {replace: true})}, 5000)
+    }).catch(err => {
+      setRequestStatus({loading: false, status: false, message: 'unable to complete request'})
+    }).finally(()=>{
+      setTimeout(()=>{setRequestStatus({loading: false, status: false, message: ''})},4000)
+    })
+  }
   return (
     <div className="changePasswordTab w-full">
-      <div className="w-full flex xl:flex-row flex-col-reverse space-x-5 xl:items-center">
+      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
         <div className="flex-1 mb-10">
           <div className="input-field mb-6">
             <label
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="old_password"
             >
-              Old Password
+              Old Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -58,6 +131,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="old_password"
+                value={inputs.old_pwd}
+                name='old_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -72,7 +149,7 @@ export default function ChangePasswordTab() {
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="new_password"
             >
-              New Password
+              New Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -83,6 +160,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="new_password"
+                value={inputs.new_pwd}
+                name='new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -97,7 +178,7 @@ export default function ChangePasswordTab() {
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
               htmlFor="confirm_password"
             >
-              Confirm Password
+              Confirm Password <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
             </label>
             <div className="input-wrapper border border-light-purple dark:border-[#5356fb29]  w-full rounded-[50px] h-[58px] overflow-hidden relative ">
               <div className="absolute left-6 bottom-[17px] z-10">
@@ -108,6 +189,10 @@ export default function ChangePasswordTab() {
                 className="input-field placeholder:text-base text-bese px-12 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
                 type="password"
                 id="confirm_password"
+                value={inputs.confirm_new_pwd}
+                name='confirm_new_pwd'
+                onChange={handleInputChange}
+                autoComplete='false'
               />
               <div
                 className="absolute right-6 bottom-[17px] z-10 cursor-pointer"
@@ -120,19 +205,46 @@ export default function ChangePasswordTab() {
           <div className="flex justify-center space-x-4 items-center">
             <button
               type="button"
-              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red "
+              className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red"
+              disabled={requestStatus.loading}
+              onClick={handleCancel}
             >
               Cancel
             </button>
-            <button
+            {requestStatus.loading ?
-              type="button"
+              <LoadingSpinner size='8' color='sky-blue' />
-              className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+              :
-            >
+              <button
-              <span className="font-thin text-18 tracking-wide antialiased text-white">
+                type="button"
-                Change Password
+                className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
-              </span>
+                disabled={requestStatus.loading}
-            </button>
+                onClick={handlePwdUpdate}
+              >
+                <span className="font-thin text-18 tracking-wide antialiased text-white">
+                  Change Password
+                </span>
+              </button>
+            }
           </div>
+
+          {/* error or success display */}
+          {requestStatus.message != "" &&
+            (!requestStatus.status ? (
+              <div
+                className={`relative p-4 my-4 text-[#912741] bg-[#fcd9e2] border-[#fbc6d3] mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+              >
+                {requestStatus.message}
+              </div>
+            ) : (
+              requestStatus.status && (
+                <div
+                  className={`relative p-4 my-4 text-green-700 bg-slate-200 border-slate-800 mb-4 rounded-[0.475rem] text-md font-light leading-[19.5px] text-[13px]`}
+                >
+                  {requestStatus.message}
+                </div>
+              )
+            ))}
+          {/* End of error or success display */}
         </div>
         <div className="w-[440px] sm:flex hidden justify-end">
           <PasswordSvg />

src/components/Settings/Tabs/PaymentMathodsTab.jsx

@@ -1,120 +1,17 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import method1 from "../../../assets/images/payment-method-1.png";
 import method2 from "../../../assets/images/payment-method-2.png";
 import method3 from "../../../assets/images/payment-method-3.png";
 import method4 from "../../../assets/images/payment-method-4.png";
+import CardList from "./CardList";
+
 
 export default function PaymentMathodsTab() {
   return (
     <>
       <div className="payment-method-tab w-full">
         <div className="payment-item-wrapper w-full">
-          <ul className="payment-items">
+          <CardList />
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method1} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Datch Bangla Bank Ltd
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method2} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Master Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method3} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Paypal Account
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                    Verified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-            <li className="sm:flex justify-between items-center w-full py-[30px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
-              <div className="flex space-x-5 mb-3 sm:mb-0">
-                <div className="sm:w-[120px] sm:h-[120px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
-                  <img src={method4} alt="payment" />
-                </div>
-                <div>
-                  <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
-                    Visa Card
-                  </p>
-                  <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
-                    Bank **********5535
-                  </p>
-                  <p className="text-18 tracking-wide text-light-red">
-                    Unverified
-                  </p>
-                </div>
-              </div>
-              <div>
-                <button
-                  type="button"
-                  className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                >
-                  Manage
-                </button>
-              </div>
-            </li>
-          </ul>
           <div className="py-7 flex space-x-4">
             <button
               type="button"

src/services/UsersService.js

@@ -39,12 +39,12 @@ class usersService {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authstart", reqData);
   }
-  
+
   authLogin(reqData) {
     localStorage.setItem("session_token", ``);
     return this.postAuxEnd("/authlogin", reqData);
   }
-  
+
   marketJobData(reqData) {
     var postData = {
       uuid: localStorage.getItem("uuid"),
@@ -216,6 +216,28 @@ class usersService {
     return this.postAuxEnd("/sendmoneyfee", postData);
   }
 
+  getStartCredit(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11053,
+      ...value,
+    };
+    return this.postAuxEnd("/startcredit", postData);
+  }
+
+  getPaidPrevCard(value) {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      action: 11056,
+      ...value,
+    };
+    return this.postAuxEnd("/payprevcard", postData);
+  }
+
   getFamilySampleTasks() {
     var postData = {
       uid: localStorage.getItem("uid"),
@@ -899,6 +921,18 @@ class usersService {
     return this.postAuxEnd("/familysuggestlist", postData);
   }
 
+    // FUNCTION TO CHANGE PROFILE PASSWORD
+    profilePassChange(reqData) {
+      var postData = {
+        uid: localStorage.getItem("uid"),
+        member_id: localStorage.getItem("member_id"),
+        sessionid: localStorage.getItem("session_token"),
+        action: 11005,
+        ...reqData,
+      };
+      return this.postAuxEnd("/profilepasschange", postData);
+    }
+
   /*
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(username)
     - 20:27:30.118 FLOG_MAX [757411]: 	REQ_STRING(password)

tailwind.config.js

@@ -21,7 +21,8 @@ module.exports = {
         'alice-blue': '#f0f8ff'
       },
       screens:{
-        xxs: '400px'
+        xxs: '400px',
+        xxl:'1900px'
       }
     },
   },