CAL-1555: Show correct team avatars (#8665)

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 (
     <>
-      <AvatarGroup size="sm" className="border-muted" items={avatars} />
+      <AvatarGroup size="sm" className="border-muted" items={uniqueAvatars} />
       <p className="text-subtle text-sm font-semibold">
-        {users
-          .map((user) => user.name)
-          .filter((name) => name)
-          .join(", ")}
+        {showOnlyProfileName
+          ? profile.name
+          : shownUsers
+              .map((user) => user.name)
+              .filter((name) => name)
+              .join(", ")}
       </p>
     </>
   );

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