import { CAL_URL } from "@calcom/lib/constants"; import { SchedulingType } from "@calcom/prisma/enums"; import { AvatarGroup } from "@calcom/ui"; import type { PublicEvent } from "../../types"; export interface EventMembersProps { /** * Used to determine whether all members should be shown or not. * In case of Round Robin type, members aren't shown. */ schedulingType: PublicEvent["schedulingType"]; users: PublicEvent["users"]; 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 : []; // 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}` : `/${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 ( <>

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

); };