86 lines
2.8 KiB
TypeScript
86 lines
2.8 KiB
TypeScript
import { usePathname } from "next/navigation";
|
|
|
|
import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomains";
|
|
import { CAL_URL, WEBAPP_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"];
|
|
entity: PublicEvent["entity"];
|
|
}
|
|
|
|
type Avatar = {
|
|
title: string;
|
|
image: string | undefined;
|
|
alt: string | undefined;
|
|
href: string | undefined;
|
|
};
|
|
|
|
type AvatarWithRequiredImage = Avatar & { image: string };
|
|
|
|
export const EventMembers = ({ schedulingType, users, profile, entity }: EventMembersProps) => {
|
|
const pathname = usePathname();
|
|
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 || user.username}`,
|
|
image: "image" in user ? `${user.image}` : `/${user.username}/avatar.png`,
|
|
alt: user.name || undefined,
|
|
href: `/${user.username}`,
|
|
}));
|
|
|
|
// Add organization avatar
|
|
if (entity.orgSlug) {
|
|
avatars.unshift({
|
|
title: `${entity.name}`,
|
|
image: `${WEBAPP_URL}/team/${entity.orgSlug}/avatar.png`,
|
|
alt: entity.name || undefined,
|
|
href: getOrgFullDomain(entity.orgSlug),
|
|
});
|
|
}
|
|
|
|
// 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 || profile.username}`,
|
|
image: "logo" in profile && profile.logo ? `${profile.logo}` : undefined,
|
|
alt: profile.name || undefined,
|
|
href: profile.username
|
|
? `${CAL_URL}${pathname?.indexOf("/team/") !== -1 ? "/team" : ""}/${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={uniqueAvatars} />
|
|
<p className="text-subtle text-sm font-semibold">
|
|
{showOnlyProfileName
|
|
? profile.name
|
|
: shownUsers
|
|
.map((user) => user.name)
|
|
.filter((name) => name)
|
|
.join(", ")}
|
|
</p>
|
|
</>
|
|
);
|
|
};
|