Merge pull request #2420 from the-canonizer/cd-internal-uiux

Cd internal uiux

src/components/ComponentPages/UserProfile/UI/UserProfileDetails.tsx

@@ -11,21 +11,38 @@ import messages from "src/messages";
 import CustomSkelton from "components/common/customSkelton";
 import CommonCards from "components/shared/Card";
 import { getGravatarImage } from "components/shared/AvaratGroup/avatar";
-import { Avatar } from "antd";
+import { Avatar, Tooltip } from "antd";
 import { useIsMobile } from "src/hooks/useIsMobile";
 
-const ItemCard = ({ icon, label, text }) => {
+const ItemCard = ({ icon, label, text, showTooltip }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
   return (
     <div className="w-full lg:w-5/12">
-      <label className="flex gap-2 text-canLight font-normal text-xs">
+      <label className="flex gap-2 text-canLight font-normal text-xs cursor-pointer">
         <span>{icon}</span>
         <span>{label}</span>
       </label>
-      <h3 className="text-canBlack font-medium text-sm">{text}</h3>
+      <h3
+        className="text-canBlack font-medium text-sm"
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Tooltip
+          title={
+            <span>
+              You are not able to see this because the owner of this information
+              has set this as <b>Private</b>.
+            </span>
+          }
+          visible={showTooltip && isHovered}
+        >
+          {text}
+        </Tooltip>
+      </h3>
     </div>
   );
 };
-
 const UserProfileDetails = ({
   profileData,
   userSupportedCampsList,
@@ -46,6 +63,10 @@ const UserProfileDetails = ({
     fetchGravatarImage();
   }, [profileData?.email]);
 
+  const checkFieldIsPrivate = (field) => {
+    return profileData?.private_flags?.split(",").includes(field);
+  };
+
   const firstNameLength = 15;
   const lastNameLength = 15;
 
@@ -72,18 +93,26 @@ const UserProfileDetails = ({
     ? `https://www.gravatar.com/avatar/${md5(profileData?.email)}.png`
     : null;
 
-  const addressParts = [
-    profileData?.address_1,
-    profileData?.address_2,
-    profileData?.city,
-    profileData?.country,
-    profileData?.postal_code ? `- ${profileData.postal_code}` : "",
-  ];
+  // const addressParts = [
+  //   profileData?.address_1,
+  //   profileData?.address_2,
+  //   profileData?.city,
+  //   profileData?.country,
+  //   profileData?.postal_code ? `- ${profileData.postal_code}` : "",
+  // ];
+
+  const address_data = {
+    address_1: profileData?.address_1,
+    address_2: profileData?.address_2,
+    city: profileData?.city,
+    country: profileData?.country,
+    postal_code: profileData?.postal_code ? `- ${profileData.postal_code}` : "",
+  };
 
-  const address = addressParts
-    .filter(Boolean) // Filters out any falsy values (null, undefined, empty string)
-    .join(", ") // Joins the non-empty parts with a comma and space
-    .trim(); // Ensures no leading or trailing spaces
+  // const address = addressParts
+  //   .filter(Boolean) // Filters out any falsy values (null, undefined, empty string)
+  //   .join(", ") // Joins the non-empty parts with a comma and space
+  //   .trim(); // Ensures no leading or trailing spaces
 
   const getNameInitials = (first_name, last_name) => {
     if (first_name && last_name) {
@@ -97,6 +126,32 @@ const UserProfileDetails = ({
     }
   };
 
+  const renderedAddress = Object?.entries(address_data)
+    ?.filter(([key, value]) => Boolean(value))
+    ?.map(([key, value], index) => (
+      <Tooltip
+        key={key}
+        title={
+          checkFieldIsPrivate(key) ? (
+            <span>
+              You are not able to see this because the owner of this information
+              has set this as <b>Private</b>.
+            </span>
+          ) : undefined
+        }
+      >
+        <span>
+          {value}
+          {index <
+          Object?.entries(address_data).filter(([_, val]) => Boolean(val))
+            ?.length -
+            1
+            ? ", "
+            : ""}
+        </span>
+      </Tooltip>
+    ));
+
   const renderUserImage = () => {
     return (
       <>
@@ -179,27 +234,36 @@ const UserProfileDetails = ({
                   ? profileData.last_name
                   : "")
               }
+              showTooltip={
+                checkFieldIsPrivate("first_name") ||
+                checkFieldIsPrivate("last_name")
+              }
             />
           ) : null}
           {profileData?.email ? (
-            <ItemCard
-              icon={<MailOutlined />}
-              label={messages.labels.emailAddress}
-              text={profileData.email}
-            />
+            <Tooltip title="Consult with the owner of the data to make it public">
+              <ItemCard
+                icon={<MailOutlined />}
+                label={messages.labels.emailAddress}
+                text={profileData.email}
+                showTooltip={checkFieldIsPrivate("email")}
+              />
+            </Tooltip>
           ) : null}
           {profileData?.birthday ? (
             <ItemCard
               icon={<CalendarOutlined />}
               label="Date of Birth"
               text={profileData.birthday}
+              showTooltip={checkFieldIsPrivate("birthday")}
             />
           ) : null}
-          {address ? (
+          {Object?.keys(address_data)?.length ? (
             <ItemCard
               icon={<MailOutlined />}
               label={messages.labels.address}
-              text={address}
+              text={<>{renderedAddress}</>}
+              showTooltip={false} // Tooltips are handled individually
             />
           ) : null}
         </div>