diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx index df4773e927..3076270f6d 100644 --- a/packages/features/bookings/components/event-meta/Members.tsx +++ b/packages/features/bookings/components/event-meta/Members.tsx @@ -1,4 +1,4 @@ -import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants"; +import { CAL_URL } from "@calcom/lib/constants"; import { SchedulingType } from "@calcom/prisma/enums"; import { AvatarGroup } from "@calcom/ui"; @@ -14,28 +14,54 @@ export interface EventMembersProps { profile: PublicEvent["profile"]; } +type Avatar = { + title: string; + image: string | undefined; + alt: string | undefined; + href: string | undefined; +}; + +type AvatarWithRequiredImage = Avatar & { image: string }; + export const EventMembers = ({ schedulingType, users, profile }: EventMembersProps) => { const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN; - const shownUsers = showMembers ? [...users, profile] : [profile]; + const shownUsers = showMembers ? users : []; - const avatars = shownUsers - .map((user) => ({ - title: `${user.name}`, - image: "image" in user ? `${user.image}` : `${WEBAPP_URL}/${user.username}/avatar.png`, - alt: user.name || undefined, - href: user.username ? `${CAL_URL}/${user.username}` : undefined, - })) - .filter((item) => !!item.image) + // In some cases we don't show the user's names, but only show the profile name. + const showOnlyProfileName = + (profile.name && schedulingType === SchedulingType.ROUND_ROBIN) || + !users.length || + (profile.name !== users[0].name && schedulingType === SchedulingType.COLLECTIVE); + + const avatars: Avatar[] = shownUsers.map((user) => ({ + title: `${user.name}`, + image: "image" in user ? `${user.image}` : `${CAL_URL}/${user.username}/avatar.png`, + alt: user.name || undefined, + href: user.username ? `${CAL_URL}/${user.username}` : undefined, + })); + + // Add profile later since we don't want to force creating an avatar for this if it doesn't exist. + avatars.unshift({ + title: `${profile.name}`, + image: "logo" in profile && profile.logo ? `${profile.logo}` : undefined, + alt: profile.name || undefined, + href: profile.username ? `${CAL_URL}/${profile.username}` : undefined, + }); + + const uniqueAvatars = avatars + .filter((item): item is AvatarWithRequiredImage => !!item.image) .filter((item, index, self) => self.findIndex((t) => t.image === item.image) === index); return ( <> - +

- {users - .map((user) => user.name) - .filter((name) => name) - .join(", ")} + {showOnlyProfileName + ? profile.name + : shownUsers + .map((user) => user.name) + .filter((name) => name) + .join(", ")}

); diff --git a/packages/features/eventtypes/lib/getPublicEvent.ts b/packages/features/eventtypes/lib/getPublicEvent.ts index a29b4e41b1..e232aa8c0a 100644 --- a/packages/features/eventtypes/lib/getPublicEvent.ts +++ b/packages/features/eventtypes/lib/getPublicEvent.ts @@ -174,7 +174,8 @@ function getProfileFromEvent(event: Event) { username, name: profile.name, weekStart, - image: `${WEBAPP_URL}${basePath}/avatar.png`, + image: team ? undefined : `${WEBAPP_URL}${basePath}/avatar.png`, + logo: !team ? undefined : team.logo, brandColor: profile.brandColor, darkBrandColor: profile.darkBrandColor, };