ayobami/Ergo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ISSUE 6: add confirmation modal before profile pic removal and preview modal on upload

Browse Source
This commit is contained in:
Ayobami
2025-07-01 16:59:55 +01:00
parent 5046be7584
commit 201d9decb3
4 changed files with 314 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Customer/Profile/CustomerProfilePage.jsx
+105 -42
View File
@@ -8,7 +8,11 @@ import MkdSDK from "@/utils/MkdSDK";
import { callCustomAPI } from "@/utils/callCustomAPI";
import Skeleton from "react-loading-skeleton";
import { formatDate } from "@/utils/date-time-utils";
import { IMAGE_STATUS, NOTIFICATION_STATUS, NOTIFICATION_TYPE } from "@/utils/constants";
import {
IMAGE_STATUS,
NOTIFICATION_STATUS,
NOTIFICATION_TYPE,
} from "@/utils/constants";
import SwitchBulkMode from "@/components/SwitchBulkMode";
import TwoFaDialog from "@/components/Profile/TwoFaDialog";
import EditProfileModal from "@/components/Profile/EditProfileModal";
@@ -18,6 +22,7 @@ import EditAboutModal from "@/components/Profile/EditAboutModal";
import { parseJsonSafely } from "@/utils/utils";
import EnableEmailDialog from "@/components/Profile/EnableEmailDialog";
import DeleteAccountModal from "@/components/Profile/DeleteAccountModal";
import ProfileImageConfirmModal from "@/components/Profile/ProfileImageConfirmModal";
function getProfilePhotoMessage(image_status) {
switch (image_status) {
@@ -33,7 +38,8 @@ function getProfilePhotoMessage(image_status) {
}
export default function CustomerProfilePage() {
const { dispatch: globalDispatch, state: globalState } = useContext(GlobalContext);
const { dispatch: globalDispatch, state: globalState } =
useContext(GlobalContext);
const [loading, setLoading] = useState(false);
const [twoFa, setTwoFa] = useState(false);
const [twoFaDialog, setTwoFaDialog] = useState(false);
@@ -49,20 +55,29 @@ export default function CustomerProfilePage() {
const [deleteAccountModal, setDeleteAccountModal] = useState(false);
const [showImagePreview, setShowImagePreview] = useState(false);
const [selectedImage, setSelectedImage] = useState(null);
let sdk = new MkdSDK();
const changeProfilePic = async (e) => {
globalDispatch({ type: "START_LOADING" });
const file = e.target.files;
const formData = new FormData();
for (let i = 0; i < file.length; i++) {
formData.append("file", file[i]);
const changeProfilePic = (e) => {
const file = e.target.files && e.target.files[0];
if (file) {
setSelectedImage(file);
setShowImagePreview(true);
}
};
const handleConfirmUpload = async () => {
setShowImagePreview(false);
if (!selectedImage) return;
globalDispatch({ type: "START_LOADING" });
const formData = new FormData();
formData.append("file", selectedImage);
try {
const upload = await sdk.uploadImage(formData);
console.log("upload", upload);
sdk.setTable("user");
const result = await callCustomAPI(
await callCustomAPI(
"edit-self",
"post",
{
@@ -71,9 +86,16 @@ export default function CustomerProfilePage() {
is_photo_approved: IMAGE_STATUS.IN_REVIEW,
},
},
"",
""
);
globalDispatch({ type: "SET_USER_DATA", payload: { ...globalState.user, photo: upload.url, is_photo_approved: IMAGE_STATUS.IN_REVIEW } });
globalDispatch({
type: "SET_USER_DATA",
payload: {
...globalState.user,
photo: upload.url,
is_photo_approved: IMAGE_STATUS.IN_REVIEW,
},
});
// create notification
sdk.setTable("notification");
await sdk.callRestAPI(
@@ -86,7 +108,7 @@ export default function CustomerProfilePage() {
type: NOTIFICATION_TYPE.EDIT_USER_PICTURE,
status: NOTIFICATION_STATUS.NOT_ADDRESSED,
},
"POST",
"POST"
);
} catch (err) {
globalDispatch({
@@ -98,9 +120,15 @@ export default function CustomerProfilePage() {
});
}
globalDispatch({ type: "STOP_LOADING" });
setSelectedImage(null);
};
const removeProfilePic = async (e) => {
const handleCancelUpload = () => {
setShowImagePreview(false);
setSelectedImage(null);
};
const removeProfilePic = async () => {
try {
sdk.setTable("user");
await callCustomAPI(
@@ -112,9 +140,12 @@ export default function CustomerProfilePage() {
is_photo_approved: null,
},
},
"",
""
);
globalDispatch({ type: "SET_USER_DATA", payload: { ...globalState.user, photo: null, is_photo_approved: null } });
globalDispatch({
type: "SET_USER_DATA",
payload: { ...globalState.user, photo: null, is_photo_approved: null },
});
} catch (err) {
globalDispatch({
type: "SHOW_ERROR",
@@ -137,14 +168,16 @@ export default function CustomerProfilePage() {
two_factor_authentication: twoFa != 1 ? 1 : 0,
},
},
"",
""
);
setTwoFaDialog(false);
globalDispatch({
type: "SHOW_CONFIRMATION",
payload: {
heading: "Success",
message: `Two factor Authentication ${twoFa == 1 ? "disabled" : "enabled"}`,
message: `Two factor Authentication ${
twoFa == 1 ? "disabled" : "enabled"
}`,
btn: "Ok got it",
},
});
@@ -163,50 +196,66 @@ export default function CustomerProfilePage() {
}
return (
<div className="pt-[44px] pb-16 normal-case text-[#475467]">
<div className="flex flex-wrap-reverse justify-between ">
<div className="flex max-w-3xl flex-grow flex-col justify-between md:flex-row md:items-center">
<div className="mb-[16px] flex flex-col">
<h3 className="text-xl font-semibold">Your photo</h3>
<small className="text-xs md:text-sm">{getProfilePhotoMessage(globalState.user.is_photo_approved)}</small>
<div className='pb-16 pt-[44px] normal-case text-[#475467]'>
<div className='flex flex-wrap-reverse justify-between '>
<div className='flex max-w-3xl flex-grow flex-col justify-between md:flex-row md:items-center'>
<div className='mb-[16px] flex flex-col'>
<h3 className='text-xl font-semibold'>Your photo</h3>
<small className='text-xs md:text-sm'>
{getProfilePhotoMessage(globalState.user.is_photo_approved)}
</small>
</div>
<div
data-tour="photo-step"
className="flex items-center justify-between">
data-tour='photo-step'
className='flex items-center justify-between'
>
<img
src={globalState.user.photo ?? "/default.png"}
alt=""
className="photo-step h-[56px] w-[56px] rounded-full object-cover md:mr-[65px] md:h-[64px] md:w-[64px]"
alt=''
className='photo-step h-[56px] w-[56px] rounded-full object-cover md:mr-[65px] md:h-[64px] md:w-[64px]'
/>
<div>
<label
className="third-step mr-3 cursor-pointer font-semibold underline"
htmlFor="profilePic"
className='third-step mr-3 cursor-pointer font-semibold underline'
htmlFor='profilePic'
>
Update{" "}
<input
type="file"
className="hidden"
id="profilePic"
type='file'
className='hidden'
id='profilePic'
onChange={changeProfilePic}
/>
</label>
<button
className="underline"
onClick={removeProfilePic}
className='underline'
onClick={() => {
globalDispatch({
type: "SHOW_CONFIRMATION",
payload: {
heading: "Remove Profile Picture?",
message:
"Are you sure you want to remove your profile picture?",
btn: "Yes, Remove",
onClose: () => {
removeProfilePic();
},
},
});
}}
>
Remove
</button>
</div>
</div>
</div>
<div className="mb-12 flex w-full justify-between md:mb-0 md:w-[unset] md:flex-col md:justify-start">
<p className="mb-2 self-end">Profile status</p>
<div data-tour="fourth-step" className="flex fourth-step">
<div className='mb-12 flex w-full justify-between md:mb-0 md:w-[unset] md:flex-col md:justify-start'>
<p className='mb-2 self-end'>Profile status</p>
<div data-tour='fourth-step' className='fourth-step flex'>
{![0, 1].includes(globalState.user.verificationStatus) && (
<Link
to="/account/verification"
className="mr-3 font-semibold text-[#1570EF]"
to='/account/verification'
className='mr-3 font-semibold text-[#1570EF]'
>
Get verified
</Link>
@@ -214,7 +263,11 @@ export default function CustomerProfilePage() {
<button
className={
`${globalState.user.verificationStatus == 1 ? "login-btn-gradient" : "bg-[#667085]"}` +
`${
globalState.user.verificationStatus == 1
? "login-btn-gradient"
: "bg-[#667085]"
}` +
" flex min-w-[103px] items-center gap-1 rounded-md p-1 px-2 text-xs uppercase tracking-wider text-white"
}
>
@@ -255,7 +308,7 @@ export default function CustomerProfilePage() {
</div>
</div>
<hr className="my-[37px]" />
<hr className='my-[37px]' />
<EditProfileModal
closeModal={() => setUpdateName(false)}
modalOpen={updateName}
@@ -284,6 +337,16 @@ export default function CustomerProfilePage() {
isOpen={enableEmailDialog}
closeModal={() => setEnableEmailDialog(false)}
/>
<ProfileImageConfirmModal
modalOpen={showImagePreview}
modalImage={
selectedImage instanceof File
? URL.createObjectURL(selectedImage)
: selectedImage
}
onConfirm={handleConfirmUpload}
onCancel={handleCancelUpload}
/>
</div>
);
}