[pull] main from calcom:main

apps/web/lib/team/[slug]/getServerSideProps.tsx

@@ -2,6 +2,7 @@ import type { GetServerSidePropsContext } from "next";
 
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { getFeatureFlag } from "@calcom/features/flags/server/utils";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
 import logger from "@calcom/lib/logger";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
@@ -127,7 +128,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
       users: !isTeamOrParentOrgPrivate
         ? type.users.map((user) => ({
             ...user,
-            avatar: `/${user.username}/avatar.png`,
+            avatar: getUserAvatarUrl(user),
           }))
         : [],
       descriptionAsSafeHTML: markdownToSafeHTML(type.description),

apps/web/pages/team/[slug].tsx

@@ -13,7 +13,7 @@ import { useEffect } from "react";
 
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription";
-import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { getOrgOrTeamAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -162,7 +162,7 @@ function TeamPage({
       </div>
     );
 
-  const profileImageSrc = getPlaceholderAvatar(team.logoUrl || team.parent?.logoUrl, team.name);
+  const profileImageSrc = getOrgOrTeamAvatar(team);
 
   return (
     <>

packages/features/bookings/Booker/components/EventMeta.tsx

@@ -84,7 +84,7 @@ export const EventMeta = ({
     : "text-bookinghighlight";
 
   return (
-    <div className={`${classNames?.eventMetaContainer} relative z-10 p-6`} data-testid="event-meta">
+    <div className={`${classNames?.eventMetaContainer || ""} relative z-10 p-6`} data-testid="event-meta">
       {isPending && (
         <m.div {...fadeInUp} initial="visible" layout>
           <EventMetaSkeleton />

packages/features/bookings/components/event-meta/Members.tsx

@@ -1,6 +1,9 @@
 import { useIsPlatform } from "@calcom/atoms/monorepo";
+import { useIsEmbed } from "@calcom/embed-core/embed-iframe";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
+import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
 import { SchedulingType } from "@calcom/prisma/enums";
-import { UserAvatarGroup, UserAvatarGroupWithOrg } from "@calcom/ui";
+import { AvatarGroup } from "@calcom/ui";
 
 import type { PublicEvent } from "../../types";
 
@@ -17,7 +20,8 @@ export interface EventMembersProps {
 
 export const EventMembers = ({ schedulingType, users, profile, entity }: EventMembersProps) => {
   const isPlatform = useIsPlatform();
-  const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN;
+  const isEmbed = useIsEmbed();
+  const showMembers = !!schedulingType && schedulingType !== SchedulingType.ROUND_ROBIN;
   const shownUsers = showMembers && !isPlatform ? users : [];
 
   // In some cases we don't show the user's names, but only show the profile name.
@@ -28,19 +32,27 @@ export const EventMembers = ({ schedulingType, users, profile, entity }: EventMe
 
   return (
     <>
-      {entity.orgSlug ? (
-        <UserAvatarGroupWithOrg
-          size="sm"
-          className="border-muted"
-          organization={{
-            slug: entity.orgSlug,
-            name: entity.name || "",
-          }}
-          users={shownUsers}
-        />
-      ) : (
-        <UserAvatarGroup size="sm" className="border-muted" users={shownUsers} />
-      )}
+      <AvatarGroup
+        size="sm"
+        className="border-muted"
+        items={[
+          {
+            // We don't want booker to be able to see the list of other users or teams inside the embed
+            href: isEmbed ? null : getBookerBaseUrlSync(entity.orgSlug),
+            image: profile.image || "",
+            alt: profile.name || "",
+            title: profile.name || "",
+          },
+          ...shownUsers.map((user) => ({
+            href: `${getBookerBaseUrlSync(user.profile?.organization?.slug ?? null)}/${
+              user.profile?.username
+            }?redirect=false`,
+            alt: user.name || "",
+            title: user.name || "",
+            image: getUserAvatarUrl(user),
+          })),
+        ]}
+      />
 
       <p className="text-subtle mt-2 text-sm font-semibold">
         {showOnlyProfileName

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -7,7 +7,7 @@ import { getAppFromSlug } from "@calcom/app-store/utils";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { isRecurringEvent, parseRecurringEvent } from "@calcom/lib";
-import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { getOrgOrTeamAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getDefaultEvent, getUsernameList } from "@calcom/lib/defaultEvents";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
@@ -86,6 +86,7 @@ const publicEventSelect = Prisma.validator<Prisma.EventTypeSelect>()({
           slug: true,
           name: true,
           bannerUrl: true,
+          logoUrl: true,
         },
       },
     },
@@ -335,11 +336,10 @@ function getProfileFromEvent(event: Event) {
     name: profile.name,
     weekStart,
     image: team
-      ? undefined
+      ? getOrgOrTeamAvatar(team)
       : getUserAvatarUrl({
           avatarUrl: nonTeamprofile?.avatarUrl,
         }),
-    logo: !team ? undefined : getPlaceholderAvatar(team.logoUrl, team.name),
     brandColor: profile.brandColor,
     darkBrandColor: profile.darkBrandColor,
     theme: profile.theme,

packages/features/filters/components/TeamsFilter.tsx

@@ -3,7 +3,7 @@ import type { InputHTMLAttributes, ReactNode } from "react";
 import { forwardRef } from "react";
 
 import { classNames } from "@calcom/lib";
-import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
+import { getOrgOrTeamAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -111,13 +111,7 @@ export const TeamsFilter = ({
                     removeItemByKeyAndValue("teamIds", team.id);
                   }
                 }}
-                icon={
-                  <Avatar
-                    alt={team?.name}
-                    imageSrc={getPlaceholderAvatar(team.logoUrl, team?.name as string)}
-                    size="xs"
-                  />
-                }
+                icon={<Avatar alt={team?.name} imageSrc={getOrgOrTeamAvatar(team)} size="xs" />}
               />
             ))}
         </FilterCheckboxFieldsContainer>

packages/lib/defaultAvatarImage.ts

@@ -1,3 +1,5 @@
+import type { Team } from "@calcom/prisma/client";
+
 /**
  * Given an avatar URL and a name, return the appropriate avatar URL. In the
  * event that no avatar URL is provided, return a placeholder avatar URL from
@@ -14,3 +16,9 @@ export function getPlaceholderAvatar(avatar: string | null | undefined, name: st
         name || ""
       )}`;
 }
+
+export function getOrgOrTeamAvatar(
+  team: Pick<Team, "logoUrl" | "name"> & { parent?: Pick<Team, "logoUrl"> | null }
+) {
+  return getPlaceholderAvatar(team.logoUrl || team.parent?.logoUrl, team.name);
+}