Add: On click event on the ProfilePicturePreview image and render conditionally the delete button

Author: 7Digit-main

src/components/cards/ProfilePicturePreview/ProfilePicturePreview.jsx

@@ -20,15 +20,25 @@ export const ProfilePicturePreview = ({
   imageFile,
 }) => {
   const imageSrc = imageFile ? imageFile : AMAZON_S3_BUCKET + "/" + image;
+  const hasImage =
+    !!imageFile ||
+    (image && image !== "default" && image !== "default-sponsor");
+  const showDeleteButton = hasImage && typeof handleDeleteClick === "function";
   return (
     <div className="profile-picture-preview-wrapper">
       <div className="profile-picture-preview">
-        <Icon
-          onClick={handleDeleteClick}
-          name="circle-action-close-purple"
-          size="md"
+        {showDeleteButton && (
+          <Icon
+            onClick={handleDeleteClick}
+            name="circle-action-close-purple"
+            size="md"
+          />
+        )}
+        <img
+          src={imageSrc}
+          alt="profile-picture"
+          onClick={handleChangeClick}
         />
-        <img src={imageSrc} alt="profile-picture" />
         <p onClick={handleChangeClick} className="small-text">
           {changePhotoText}
         </p>

src/components/cards/ProfilePicturePreview/profile-picture-preview.scss

@@ -18,6 +18,7 @@
     height: 8rem;
     border-radius: 50%;
     object-fit: cover;
+    cursor: pointer;
   }
 
   & p {