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/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,13 +99,37 @@ function AddFundDollars(props) {
         return;
       }
       setLoader(true);
-      const stateData = {
-        amount: Number(props.input),
-        currency: props.currency,
-        card: prevCardDetails["payment-card"],
-        cardType: "prev",
+      let stateData = {
+        amount: Number(props.input) * 100,
+        currency: props.walletItem?.code,
       };
 
+      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);
@@ -142,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

@@ -6,10 +6,17 @@ 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 apiCall = new usersService();
-
+  let countryWallet = walletItem?.country;
   const { payment, currency } = _payment;
 
   const [inputError, setInputError] = useState("");
@@ -38,8 +45,8 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
     }
 
     let stateData = {
-      amount: Number(input),
-      currency: currency.toUpperCase(),
+      amount: Number(input) * 100,
+      currency: walletItem?.code,
     };
 
     try {
@@ -92,10 +99,11 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             </form>
 
-            {currency === "US Dollars" && (
+            {countryWallet === "US" && (
               <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}
@@ -105,9 +113,9 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
               </div>
             )}
 
-            {currency !== "US Dollars" && <div className="h-[18rem]"></div>}
+            {countryWallet == "NG" && <div className="h-[18rem]"></div>}
 
-            {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-4 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"

src/components/MyWallet/ConfirmAddFund.jsx

@@ -9,12 +9,13 @@ 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: "",
@@ -46,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);
@@ -90,11 +91,25 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     onClose: () => {},
   };
 
-  const handlePrevCard = () => {
-    console.log("Test me")
-  }
+  const handlePrevCard = async () => {
+    setConfirmLoading(true);
+    let reqData = {
+      amount: __confirmData.amount * 100,
+      card_uid: __confirmCardDetails.card_uid,
+      credit_reference: __confirmData.credit_reference,
+      currency: __confirmData.currency,
+    };
 
- 
+    try {
+      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">
@@ -109,7 +124,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
     </div>
   );
 
-  // console.log(confirmCredit);
+  console.log(confirmCredit);
 
   return (
     <div className="content-wrapper w-full h-[32rem]">
@@ -119,7 +134,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             <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({__confirmData?.currency})
                     </h1>
@@ -129,13 +148,13 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                       }`}
                     </span>
                   </div>
-                  {__confirmData?.currency == "US Dollars" && (
+                  {__confirmCountry == "US" && (
                     <div className="flex items-center gap-8">
                       <label
                         htmlFor="payment"
                         className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
                       >
-                        {__confirmData?.currency && "Payment Method"}
+                        {__confirmCountry == "US" && "Payment Method"}
                       </label>
                       <span className="text-[#181c32] dark:text-white ">
                         {__confirmCardDetails ? (
@@ -147,17 +166,14 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
 
                   <div
                     className={`${
-                      __confirmData?.currency == "US Dollars"
-                        ? "gap-14"
-                        : "gap-6"
+                      __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">
-                      {__confirmCardDetails?.card_uid ||
-                        __confirmData?.credit_reference}
+                      {__confirmData?.credit_reference}
                     </span>
                   </div>
                 </div>
@@ -165,7 +181,11 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             </div>
           </div>
           {/* <hr /> */}
-          <div className={__confirmData?.currency == "US Dollars" ? "min-h-[163px]":"min-h-[200px]"}></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"
@@ -173,7 +193,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
             >
               Cancel
             </button>
-            {__confirmData?.currency == "US Dollars" && (
+            {__confirmCountry == "US" && (
               <button
                 className="px-4 h-11 flex justify-center items-center btn-gradient text-white text-base rounded-full"
                 onClick={
@@ -185,7 +205,7 @@ function ConfirmAddFund({ confirmCredit, onClose, walletItem }) {
                 Proceed
               </button>
             )}
-            {__confirmData?.currency == "Naira" && (
+            {__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

@@ -81,6 +81,7 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
           ) : (
             <AddFundPop
               _payment={details}
+              walletItem={walletItem}
               input={input}
               setInput={setInput}
               onClose={onClose}

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 xxl: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
-              type="button"
-              className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
-            >
-              <span className="font-thin text-18 tracking-wide antialiased text-white">
-                Change Password
-              </span>
-            </button>
+            {requestStatus.loading ?
+              <LoadingSpinner size='8' color='sky-blue' />
+              :
+              <button
+                type="button"
+                className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+                disabled={requestStatus.loading}
+                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">
-            <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>
+          <CardList />
           <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"),
@@ -222,11 +222,22 @@ class usersService {
       member_id: localStorage.getItem("member_id"),
       sessionid: localStorage.getItem("session_token"),
       action: 11053,
-      ...value
+      ...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"),
@@ -910,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)