diff --git a/src/assets/images/profile.jpg b/src/assets/images/profile.jpg new file mode 100644 index 0000000..3781ed9 Binary files /dev/null and b/src/assets/images/profile.jpg differ diff --git a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx b/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx index 3a4822e..7763e4b 100644 --- a/src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx +++ b/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" > - Cancel + Cancel )} diff --git a/src/components/MyWallet/Popup/NairaWithdraw.jsx b/src/components/MyWallet/Popup/NairaWithdraw.jsx index f2d69b1..91602ff 100644 --- a/src/components/MyWallet/Popup/NairaWithdraw.jsx +++ b/src/components/MyWallet/Popup/NairaWithdraw.jsx @@ -796,7 +796,7 @@ function NairaWithdraw({ diff --git a/src/components/Partials/Header.jsx b/src/components/Partials/Header.jsx index 02c2cc6..1f5cf83 100644 --- a/src/components/Partials/Header.jsx +++ b/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 }) { > - {notifications?.loading - ? "●" - : notifications?.data?.length} + {notifications?.loading ? "●" : notifications?.data?.length}
+ + + ); + } + })}
@@ -351,9 +348,9 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { {/* profile-image */}
profile
@@ -375,7 +372,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) { profile
diff --git a/src/components/Settings/Tabs/PersonalInfoTab.jsx b/src/components/Settings/Tabs/PersonalInfoTab.jsx index 3b19373..096f277 100644 --- a/src/components/Settings/Tabs/PersonalInfoTab.jsx +++ b/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({
- @@ -392,7 +397,7 @@ export default function PersonalInfoTab({ {" "} Cancel - + */} {requestStatus.loading ? ( diff --git a/src/components/Settings/index.jsx b/src/components/Settings/index.jsx index 012ee71..bffcdf5 100644 --- a/src/components/Settings/index.jsx +++ b/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();