Added profile img

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -395,7 +395,7 @@ function ConfirmNairaWithdraw({
                       onClick={action}
                       className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center items-center bg-[#f5a430] text-black text-base rounded-full"
                     >
-                      <span className="text-gradient">Cancel</span>
+                      Cancel
                     </button>
                   )}
 

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -796,7 +796,7 @@ function NairaWithdraw({
                       <button
                         type="button"
                         onClick={action}
-                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center border-gradient text-base rounded-full"
+                        className="px-4 py-1 h-11 max-w-[100px] w-full flex justify-center bg-[#f5a430] text-black items-center text-base rounded-full"
                       >
                         <span className="text-gradient">Cancel</span>
                       </button>

src/components/Partials/Header.jsx

@@ -4,7 +4,7 @@ import bank1 from "../../assets/images/bank-1.png";
 import bank2 from "../../assets/images/bank-2.png";
 import bank3 from "../../assets/images/bank-3.png";
 import bank4 from "../../assets/images/bank-4.png";
-import profileImg from "../../assets/images/profile-pic.jpg";
+import profileImg from "../../assets/images/profile.jpg";
 import useToggle from "../../hooks/useToggle";
 import usersService from "../../services/UsersService";
 import DarkModeContext from "../Contexts/DarkModeContext";
@@ -15,10 +15,10 @@ import WalletHeader from "../MyWallet/WalletHeader";
 import { useDispatch, useSelector } from "react-redux";
 import Flag from "../../assets/images/united-states.svg";
 import siteLogo from "../../assets/images/wrenchboard-logo-text.png";
-import formattedDate from "../../lib/fomattedDate";
-import { updateNotifications } from "../../store/notifications";
 import TimeDifference from "../Helpers/TimeDifference";
 
+const DEFAULT_PROFILE_IMAGE = require("../../assets/images/profile.jpg");
+
 export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [balanceDropdown, setbalanceValue] = useToggle(false);
   const [notificationDropdown, setNotificationValue] = useToggle(false);
@@ -30,7 +30,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   const [myWalletList, setMyWalletList] = useState([]);
   const api = useMemo(() => new usersService(), []);
   const dispatch = useDispatch();
-  const navigate = useNavigate()
+  const navigate = useNavigate();
 
   const { notifications } = useSelector((state) => state?.notifications); // NOTIFICATION STORE
 
@@ -100,10 +100,10 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
   };
 
   // User Profile
-  let { firstname, lastname, email, profile_pic } = userDetails;
+  let { firstname, lastname, email, profile_pic_url } = userDetails;
   let userEmail = email?.split("@")[0];
+  const userProfileImage = profile_pic_url || DEFAULT_PROFILE_IMAGE;
 
-  // console.log("Notify: ", notifications?.data?.raw);
 
   return (
     <>
@@ -255,9 +255,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
               >
                 <Icons name="notification" />
                 <span className="absolute right-2 top-2 z-10 text-xs lg:w-5 lg:h-5 w-4 h-4 flex justify-center items-center rounded-full primary-gradient text-white cursor-default">
-                  {notifications?.loading
+                  {notifications?.loading ? "●" : notifications?.data?.length}
-                    ? "●"
-                    : notifications?.data?.length}
                 </span>
               </div>
               <div
@@ -273,46 +271,45 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
 
                 <div className="content px-7 pb-7">
                   <ul>
-                    {notifications?.data?.length && notifications?.data?.map((item, idx) => 
+                    {notifications?.data?.length &&
-                    {
+                      notifications?.data?.map((item, idx) => {
-                      if(idx < 5){
+                        if (idx < 5) {
-                      return (
+                          return (
-                        <li
+                            <li
-                          className={`content-item ${
+                              className={`content-item ${
-                            idx == 4
+                                idx == 4
-                              ? "py-5 "
+                                  ? "py-5 "
-                              : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
+                                  : "py-4 border-b dark:border-[#5356fb29]  border-light-purple hover:border-purple dark:hover:border-purple"
-                          }`}
+                              }`}
-                          key={idx}
+                              key={idx}
-                        >
+                            >
-                          <div className="notifications flex space-x-4 items-center">
+                              <div className="notifications flex space-x-4 items-center">
-                            <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
+                                <div className="icon max-w-[52px] max-h-[52px] w-full h-full rounded-full object-cover">
-                              <img
+                                  <img
-                                src={require(`../../assets/images/notifications/${item?.icon}`)}
+                                    src={require(`../../assets/images/notifications/${item?.icon}`)}
-                                alt="icon"
+                                    alt="icon"
-                                className="w-full h-full"
+                                    className="w-full h-full"
-                              />
+                                  />
-                            </div>
+                                </div>
-                            <div className="name">
+                                <div className="name">
-                              <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
+                                  <p className="text-base text-dark-gray dark:text-white font-medium mb-2">
-                                {item?.title}
+                                    {item?.title}
-                                {/* <span className="ml-1 font-bold">
+                                    {/* <span className="ml-1 font-bold">
                                 successfully done
                               </span> */}
-                              </p>
+                                  </p>
-                              <p className="text-sm text-thin-light-gray font-medium">
+                                  <p className="text-sm text-thin-light-gray font-medium">
-                                <TimeDifference
+                                    <TimeDifference
-                                  time={item?.date}
+                                      time={item?.date}
-                                  key={item?.uid}
+                                      key={item?.uid}
-                                />
+                                    />
-                              </p>
+                                  </p>
-                            </div>
+                                </div>
-                          </div>
+                              </div>
-                        </li>
+                            </li>
-                      )
+                          );
-                      }
+                        }
-                    })
+                      })}
-                    }
                   </ul>
 
                   <div className="add-money-btn flex justify-center items-center">
@@ -351,9 +348,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                 {/* profile-image */}
                 <div className="lg:w-[62px] lg:h-[62px] w-[50px] h-[50px] rounded-full overflow-hidden">
                   <img
-                    src={profile_pic != "" ? profile_pic : profileImg}
+                    src={userProfileImage}
                     alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover"
                   />
                 </div>
                 <div className="lg:block hidden">
@@ -375,7 +372,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                   <img
                     src={profileImg}
                     alt="profile"
-                    className="w-full h-full"
+                    className="w-full h-full object-cover object-center"
                   />
                 </div>
               </div>

src/components/Settings/Tabs/PersonalInfoTab.jsx

@@ -68,6 +68,7 @@ export default function PersonalInfoTab({
     state: userDetails?.state,
     city: userDetails?.city,
     email: userDetails?.email,
+    profile: userDetails?.profile_pic,
   };
 
   let [profile, setProfile] = useState({
@@ -86,6 +87,9 @@ export default function PersonalInfoTab({
   const handleUpdateUser = (values, helpers) => {
     setRequestState({ message: "", loading: true, status: false });
 
+    // there is no profile accommodation on the payload
+    delete values?.profile;
+
     apiCall
       .updateProfile(values)
       .then((res) => {
@@ -336,8 +340,8 @@ export default function PersonalInfoTab({
                       <div className="w-full relative">
                         <img
                           src={profileImg}
-                          alt=""
+                          alt="profile"
-                          className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+                          className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-contain object-center"
                         />
                         <input
                           ref={profileImgInput}
@@ -384,7 +388,8 @@ export default function PersonalInfoTab({
                 )}
                 <div className="w-full h-[120px] border-t border-light-purple dark:border-[#5356fb29]  flex justify-end items-center">
                   <div className="flex items-center space-x-4 mr-9">
-                    <Link
+                    
+                    {/* <Link
                       to="/"
                       className="text-18 text-light-red tracking-wide "
                     >
@@ -392,7 +397,7 @@ export default function PersonalInfoTab({
                         {" "}
                         Cancel
                       </span>
-                    </Link>
+                    </Link> */}
 
                     {requestStatus.loading ? (
                       <LoadingSpinner size="8" color="sky-blue" />

src/components/Settings/index.jsx

@@ -5,8 +5,9 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { useSelector } from "react-redux";
 import cover from "../../assets/images/profile-info-cover.png";
-import profile from "../../assets/images/profile-info-profile.png";
+import profile from "../../assets/images/profile.jpg";
 import usersService from "../../services/UsersService";
 import Icons from "../Helpers/Icons";
 import Layout from "../Partials/Layout";
@@ -23,15 +24,19 @@ import {
 import RecipientAccountTab from "./Tabs/RecipientAccountTab";
 
 export default function Settings({ faq }) {
-  const [profileImg, setProfileImg] = useState(profile);
+  const { userDetails } = useSelector((state) => state?.userDetails);
+  const [profileImg, setProfileImg] = useState(
+    userDetails?.profile_pic_url ? userDetails.profile_pic_url : profile
+  );
   const [coverImg, setCoverImg] = useState(cover);
-    const [reloadCardList, setReloadCardList] = useState(false) // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
+  const [reloadCardList, setReloadCardList] = useState(false); // STATE TO DETERMINE WHEN CARD LIST RELOADS. EG: WHEN USER DELETES A CARD
-    
+
   // profile img
   const profileImgInput = useRef(null);
   const browseProfileImg = () => {
     profileImgInput.current.click();
   };
+
   const profileImgChangHandler = (e) => {
     if (e.target.value !== "") {
       const imgReader = new FileReader();