card list image added

src/components/Settings/Tabs/CardList.jsx

@@ -1,6 +1,8 @@
 import React, {useEffect, useState} from 'react'
-import method1 from "../../../assets/images/payment-method-1.png";
+import method1 from "../../../assets/images/payment-cards/discover-card.svg";
 import LoadingSpinner from '../../Spinners/LoadingSpinner';
+import localImgLoad from '../../../lib/localImgLoad';
+
 import usersService from "../../../services/UsersService";
 import { handlePagingFunc } from '../../Pagination';
 import PaginatedList from '../../Pagination/PaginatedList';
@@ -21,6 +23,7 @@ function CardList() {
 
   useEffect(()=>{
     api.payListCard().then(res=>{
+        console.log('TESTING', res.data?.result_list)
       setCardList({loading: false, data:res.data?.result_list})
     }).catch(err => {
       setCardList({loading: false, data:[]})
@@ -36,34 +39,37 @@ function CardList() {
             </div>
             :
             cardList.data.length ?
-            currentCardList.map(item =>(
+            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] ">
+            let image = item.description && localImgLoad(`images/payment-cards/${item.description.toLowerCase()}-card.svg`)
-                <div className="flex space-x-5 mb-2 sm:mb-0">
+            return(
-                    <div className="w-[50px] h-[50px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                <li key={item.card_uid} className="sm:flex justify-between items-center w-full py-3 border-b border-light-purple dark:border-[#5356fb29] ">
-                    <img className='rounded-full w-full h-full' src={method1} alt="payment" />
+                    <div className="flex space-x-5 mb-2 sm:mb-0">
+                        <div className="w-[70px] h-[70px] flex items-center justify-center rounded-full sm:bg-light-purple dark:bg-dark-light-purple ">
+                            <img src={image ? image : method1} className='w-[50px] h-[50px]' 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>
-                    <p className="sm:text-xl text-lg tracking-wide   text-dark-gray dark:text-white">
+                        <button
-                        Added: {item.added}
+                        type="button"
-                    </p>
+                        className="w-[95px] sm:h-[46px] h-[40px] rounded-full btn-gradient text-white sm:text-18 text-md tracking-wide"
-                    <p className="text-thin-light-gray sm:text-18 text-sm tracking-wide">
+                        >
-                        {item.description} **********{item.digits}
+                        Delete
-                    </p>
+                        </button>
-                    {/* <p className="sm:text-18 text-sm tracking-wide text-light-green">
-                        Verified
-                    </p> */}
                     </div>
-                </div>
+                </li>
-                <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>
             }

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -3,39 +3,11 @@
 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") {
@@ -66,61 +38,16 @@ 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 xxl:items-start">
+      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xl:items-center">
         <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 <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.old_pwd) && 'required'}</span>
+              Old Password
             </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">
@@ -131,10 +58,6 @@ 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"
@@ -149,7 +72,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 <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.new_pwd) && 'required'}</span>
+              New Password
             </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">
@@ -160,10 +83,6 @@ 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"
@@ -178,7 +97,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 <span className="text-[10px] text-red-500 italic px-2">{(inputEmpty && !inputs.confirm_new_pwd) && 'required'}</span>
+              Confirm Password
             </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">
@@ -189,10 +108,6 @@ 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"
@@ -205,46 +120,19 @@ 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>
-            {requestStatus.loading ?
+            <button
-              <LoadingSpinner size='8' color='sky-blue' />
+              type="button"
-              :
+              className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
-              <button
+            >
-                type="button"
+              <span className="font-thin text-18 tracking-wide antialiased text-white">
-                className="btn-gradient tracking-wide rounded-full w-[173px] h-[46px] flex justify-center items-center"
+                Change Password
-                disabled={requestStatus.loading}
+              </span>
-                onClick={handlePwdUpdate}
+            </button>
-              >
-                <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

@@ -12,20 +12,6 @@ export default function PaymentMathodsTab() {
       <div className="payment-method-tab w-full">
         <div className="payment-item-wrapper w-full">
           <CardList />
-          <div className="py-7 flex space-x-4">
-            <button
-              type="button"
-              className="btn-shine  text-white text-18 bg-pink tracking-wide px-4 py-3 rounded-full"
-            >
-              Add Bank
-            </button>
-            <button
-              type="button"
-              className="text-white text-18 bg-light-green tracking-wide px-4 py-3 rounded-full"
-            >
-              Add Card
-            </button>
-          </div>
         </div>
       </div>
     </>

src/components/Settings/index.jsx

@@ -58,7 +58,7 @@ export default function Settings({ faq }) {
     {
       id: 2,
       name: "payment",
-      title: "Payment Method",
+      title: "Payment Cards",
       iconName: "bank-card",
     },
     {

src/services/UsersService.js

@@ -921,18 +921,6 @@ 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)