From 8052d27d0b1ed9c67f87ac9d34ed6e4e314e84b5 Mon Sep 17 00:00:00 2001
From: Amit Sharma <74371312+Amit91848@users.noreply.github.com>
Date: Sat, 30 Nov 2024 22:53:05 +0530
Subject: [PATCH] feat: show attributes in profile (#17920)

---
 .../settings/my-account/profile-view.tsx      | 28 +++++++++++++++++++
 .../UserTable/EditSheet/DisplayInfo.tsx       | 20 +++++++++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index 454358e19c..e4d5e619e7 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -11,6 +11,7 @@ import { z } from "zod";
 
 import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
 import SectionBottomActions from "@calcom/features/settings/SectionBottomActions";
+import { DisplayInfo } from "@calcom/features/users/components/UserTable/EditSheet/DisplayInfo";
 import { APP_NAME, FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { emailSchema } from "@calcom/lib/emailSchema";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
@@ -598,6 +599,11 @@ const ProfileForm = ({
     handleAccountDisconnect(getUpdatedFormValues(formMethods.getValues()));
   };
 
+  const { data: usersAttributes, isPending: usersAttributesPending } =
+    trpc.viewer.attributes.getByUserId.useQuery({
+      userId: user.id,
+    });
+
   const {
     formState: { isSubmitting, isDirty },
   } = formMethods;
@@ -696,6 +702,28 @@ const ProfileForm = ({
             height="80px"
           />
         </div>
+        {usersAttributes && usersAttributes?.length > 0 && (
+          <div className="mt-6 flex flex-col">
+            <Label>{t("attributes")}</Label>
+            <div className="flex flex-col space-y-4">
+              {usersAttributes.map((attribute, index) => (
+                <>
+                  <DisplayInfo
+                    key={index}
+                    label={attribute.name}
+                    labelClassname="font-normal text-sm text-subtle"
+                    valueClassname="text-emphasis inline-flex items-center gap-1 font-normal text-sm leading-5"
+                    value={
+                      ["TEXT", "NUMBER", "SINGLE_SELECT"].includes(attribute.type)
+                        ? attribute.options[0].value
+                        : attribute.options.map((option) => option.value)
+                    }
+                  />
+                </>
+              ))}
+            </div>
+          </div>
+        )}
         {/* // For Non-Cal indentities, we merge the values from DB and the user logging in,
         so essentially there is no point in allowing them to disconnect, since when they log in they will get logged into the same account */}
         {!isCALIdentityProvider && user.email !== user.identityProviderEmail && (
diff --git a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
index 4f52ba690b..9aa63237cb 100644
--- a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
@@ -1,4 +1,3 @@
-import { classNames } from "@calcom/lib";
 import type { IconName } from "@calcom/ui";
 import { Badge, Icon } from "@calcom/ui";
 
@@ -7,18 +6,29 @@ type DisplayInfoType = {
   icon?: IconName;
   value: string | string[];
   coloredBadges?: boolean;
+  labelClassname?: string;
+  valueClassname?: string;
 };
 
 const badgeColors = ["warning", "success", "green", "gray", "blue", "red", "error"] as const;
 
-export function DisplayInfo({ label, icon, value, coloredBadges }: DisplayInfoType) {
+const valueDefaultClassname = "text-emphasis inline-flex items-center gap-1 font-medium leading-5";
+
+export function DisplayInfo({
+  label,
+  icon,
+  value,
+  coloredBadges,
+  labelClassname,
+  valueClassname = valueDefaultClassname,
+}: DisplayInfoType) {
   const displayAsBadges = Array.isArray(value);
 
   return (
     <div className="flex items-center gap-6">
       <div className="flex w-[110px] items-center gap-2">
         {icon ? <Icon className="text-subtle h-4 w-4" name={icon} /> : null}
-        <label className="text-subtle text-sm font-medium">{label}</label>
+        <label className={labelClassname ? labelClassname : "text-subtle text-sm font-medium"}>{label}</label>
       </div>
       <div className="flex flex-1">
         {displayAsBadges ? (
@@ -34,9 +44,7 @@ export function DisplayInfo({ label, icon, value, coloredBadges }: DisplayInfoTy
             })}
           </div>
         ) : (
-          <span className={classNames("text-emphasis inline-flex items-center gap-1 font-medium leading-5")}>
-            {value}
-          </span>
+          <span className={valueClassname}>{value}</span>
         )}
       </div>
     </div>