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" /> + {usersAttributes && usersAttributes?.length > 0 && ( +
+ +
+ {usersAttributes.map((attribute, index) => ( + <> + option.value) + } + /> + + ))} +
+
+ )} {/* // 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 (
{icon ? : null} - +
{displayAsBadges ? ( @@ -34,9 +44,7 @@ export function DisplayInfo({ label, icon, value, coloredBadges }: DisplayInfoTy })}
) : ( - - {value} - + {value} )}