feat: show attributes in profile (#17920)

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 && (

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>