Merge pull request 'In Contact View, empty Description and Notes section should be hidden and its needs to be fixed the UI of this pop-up' (#340) from Kartik_Bug#886 into Issues_Aug_1W

Reviewed-on: #340

src/components/Directory/NotesDirectory.jsx

@@ -114,55 +114,56 @@ const NotesDirectory = ({
     ? contactProfile?.notes || []
     : contactNotes || [];
 
+  const hasNotes = notesToDisplay.length > 0;
+
   return (
     <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
         <div className="row w-100 align-items-center">
-          <div className="col col-2">
-            <p className="fw-semibold m-0 ms-3">Notes :</p>
-          </div>
+          {hasNotes && (
+            <div className="col col-2">
+              <p className="fw-semibold m-0 ms-3">Notes :</p>
+            </div>
+          )}
           <div className="col d-flex justify-content-end gap-2 pe-0">
             {" "}
             <div className="d-flex align-items-center justify-content-between">
-              <label
-                className="switch switch-primary"
-                style={{
-                  visibility:
-                    contactProfile?.notes?.length > 0 || contactNotes?.length > 0
-                      ? "visible"
-                      : "hidden",
-                  fontSize: "15px",        // smaller text
-                }}
-              >
-                <input
-                  type="checkbox"
-                  className="switch-input"
-                  onChange={() => handleSwitch(!IsActive)}
-                  checked={IsActive}
+             
+                <label
+                  className="switch switch-primary"
                   style={{
-                    transform: "scale(0.8)", // smaller toggle
+                    fontSize: "15px",
                   }}
-                />
-                <span
-                  className="switch-toggle-slider"
-                  style={{
+                >
+                  <input
+                    type="checkbox"
+                    className="switch-input"
+                    onChange={() => handleSwitch(!IsActive)}
+                    checked={IsActive}
+                    style={{
+                    transform: "scale(0.8)", // smaller toggle
+                    }}
+                  />
+                  <span
+                    className="switch-toggle-slider"
+                    style={{
                     width: "30px",    // narrower slider
                     height: "15px",   // shorter slider
-                  }}
-                >
-                  <span className="switch-on"></span>
-                  <span className="switch-off"></span>
-                </span>
-                <span
-                  className="switch-label"
-                  style={{
+                    }}
+                  >
+                    <span className="switch-on"></span>
+                    <span className="switch-off"></span>
+                  </span>
+                  <span
+                    className="switch-label"
+                    style={{
                     fontSize: "14px", // smaller label text
                     marginLeft: "-14px"
-                  }}
-                >
-                  Include Deleted Notes
-                </span>
-              </label>
+                    }}
+                  >
+                    Include Deleted Notes
+                  </span>
+                </label>
 
               {!showEditor && (
                 <div className="d-flex justify-content-end">
@@ -224,23 +225,23 @@ const NotesDirectory = ({
         )}
         {!isLoading && notesToDisplay.length > 0
           ? notesToDisplay
-            .slice()
-            .reverse()
-            .map((noteItem) => (
-              <NoteCardDirectory
-                refetchProfile={refetchProfile}
-                refetchNotes={refetch}
-                refetchContact={refetch}
-                noteItem={noteItem}
-                contactId={contactProfile?.id}
-                setProfileContact={setProfileContact}
-                key={noteItem.id}
-              />
-            ))
+              .slice()
+              .reverse()
+              .map((noteItem) => (
+                <NoteCardDirectory
+                  refetchProfile={refetchProfile}
+                  refetchNotes={refetch}
+                  refetchContact={refetch}
+                  noteItem={noteItem}
+                  contactId={contactProfile?.id}
+                  setProfileContact={setProfileContact}
+                  key={noteItem.id}
+                />
+              ))
           : !isLoading &&
           !showEditor && (
-            <div className="text-center mt-5">{noNotesMessage}</div>
-          )}
+              <div className="text-center mt-5">{noNotesMessage}</div>
+            )}
       </div>
     </div>
   );

src/components/Directory/ProfileContactDirectory.jsx

@@ -11,6 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const [profileContactState, setProfileContactState] = useState(null);
   const [expanded, setExpanded] = useState(false);
 
+  // Safely access description, defaulting to an empty string if not present
   const description = profileContactState?.description || "";
   const limit = 500;
 
@@ -40,7 +41,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
         lastName = names[names.length - 1];
         // Reconstruct full name to be precise with spacing
-        fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
+        fullName = `${firstName} ${middleName ? middleName + " " : ""}${lastName}`;
       } else {
         // Fallback if no names or empty string
         firstName = "Contact";
@@ -113,7 +114,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                         </span>
                         <i
                           className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx ? "text-secondary" : "text-primary"
-                            }`}
+                          }`}
                           title={copiedIndex === idx ? "Copied!" : "Copy Email"}
                           style={{ flexShrink: 0 }}
                           onClick={() => handleCopy(email.emailAddress, idx)}
@@ -292,31 +293,35 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           )}
         </div>
 
-        <div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
-          <div className="d-flex" style={{ minWidth: "130px" }}>
-            <span className="d-flex align-items-start">
-              <i className="bx bx-book me-1"></i>
-              <span>Description</span>
-            </span>
-            <span style={{ marginLeft: "10px" }}>:</span>
-          </div>
+        {description && (
+          <div
+            className="d-flex mb-2 align-items-start"
+            style={{ marginLeft: "3rem" }}
+          >
+            <div className="d-flex" style={{ minWidth: "130px" }}>
+              <span className="d-flex align-items-start">
+                <i className="bx bx-book me-1"></i>
+                <span>Description</span>
+              </span>
+              <span style={{ marginLeft: "10px" }}>:</span>
+            </div>
 
-          <div className="text-start">
-            {displayText}
-            {isLong && (
-              <>
-                <br />
-                <span
-                  onClick={toggleReadMore}
-                  className="text-primary mx-1 cursor-pointer"
-                >
-                  {expanded ? "Read less" : "Read more"}
-                </span>
-              </>
-            )}
+            <div className="text-start">
+              {displayText}
+              {isLong && (
+                <>
+                  <br />
+                  <span
+                    onClick={toggleReadMore}
+                    className="text-primary mx-1 cursor-pointer"
+                  >
+                    {expanded ? "Read less" : "Read more"}
+                  </span>
+                </>
+              )}
+            </div>
           </div>
-        </div>
-
+        )}
 
         <hr className="my-1" />
         <NotesDirectory