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, };