Avatar fixes at more places

apps/web/pages/event-types/index.tsx

@@ -72,6 +72,7 @@ import useMeQuery from "@lib/hooks/useMeQuery";
 
 import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/eventtype/SkeletonLoader";
+import { UserAvatarGroup } from "@components/ui/avatar/UserAvatarGroup";
 
 type EventTypeGroups = RouterOutputs["viewer"]["eventTypes"]["getByViewer"]["eventTypeGroups"];
 type EventTypeGroupProfile = EventTypeGroups[number]["profile"];
@@ -398,23 +399,11 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                   <div className="mt-4 hidden sm:mt-0 sm:flex">
                     <div className="flex justify-between space-x-2 rtl:space-x-reverse">
                       {type.team && !isManagedEventType && (
-                        <AvatarGroup
+                        <UserAvatarGroup
                           className="relative right-3 top-1"
                           size="sm"
                           truncateAfter={4}
-                          items={
+                          users={type?.users ?? []}
-                            type?.users
-                              ? type.users.map(
-                                  (organizer: { name: string | null; username: string | null }) => ({
-                                    alt: organizer.name || "",
-                                    image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${
-                                      organizer.username
-                                    }/avatar.png`,
-                                    title: organizer.name || "",
-                                  })
-                                )
-                              : []
-                          }
                         />
                       )}
                       {isManagedEventType && type?.children && type.children?.length > 0 && (

packages/lib/getEventTypeById.ts

@@ -4,10 +4,9 @@ import { getLocationGroupedOptions } from "@calcom/app-store/server";
 import type { StripeData } from "@calcom/app-store/stripepayment/lib/server";
 import { getEventTypeAppData } from "@calcom/app-store/utils";
 import type { LocationObject } from "@calcom/core/location";
-import { getOrgFullOrigin } from "@calcom/ee/organizations/lib/orgDomains";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { parseBookingLimit, parseDurationLimit, parseRecurringEvent } from "@calcom/lib";
-import { CAL_URL } from "@calcom/lib/constants";
+import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { getTranslation } from "@calcom/lib/server/i18n";
 import type { PrismaClient } from "@calcom/prisma";
 import type { Credential } from "@calcom/prisma/client";
@@ -36,6 +35,7 @@ export default async function getEventTypeById({
     username: true,
     id: true,
     email: true,
+    organizationId: true,
     locale: true,
     defaultScheduleId: true,
   });
@@ -298,9 +298,7 @@ export default async function getEventTypeById({
   const eventTypeUsers: ((typeof eventType.users)[number] & { avatar: string })[] = eventType.users.map(
     (user) => ({
       ...user,
-      avatar: `${eventType.team?.parent?.slug ? getOrgFullOrigin(eventType.team?.parent?.slug) : CAL_URL}/${
+      avatar: getUserAvatarUrl(user),
-        user.username
-      }/avatar.png`,
     })
   );
 
@@ -346,11 +344,7 @@ export default async function getEventTypeById({
         .map((member) => {
           const user: typeof member.user & { avatar: string } = {
             ...member.user,
-            avatar: `${
+            avatar: getUserAvatarUrl(member.user),
-              eventTypeObject.team?.parent?.slug
-                ? getOrgFullOrigin(eventTypeObject.team?.parent?.slug)
-                : CAL_URL
-            }/${member.user.username}/avatar.png`,
           };
           return {
             ...user,

packages/trpc/server/routers/viewer/eventTypes/getByViewer.handler.ts

@@ -30,6 +30,7 @@ const userSelect = Prisma.validator<Prisma.UserSelect>()({
   id: true,
   username: true,
   name: true,
+  organizationId: true,
 });
 
 const userEventTypeSelect = Prisma.validator<Prisma.EventTypeSelect>()({