fix: Avatars not showing when using bookings filter (#15271)

packages/features/bookings/components/PeopleFilter.tsx

@@ -6,7 +6,6 @@ import {
   FilterCheckboxField,
   FilterCheckboxFieldsContainer,
 } from "@calcom/features/filters/components/TeamsFilter";
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { AnimatedPopover, Avatar, Divider, FilterSearchField, Icon } from "@calcom/ui";
@@ -70,17 +69,7 @@ export const PeopleFilter = () => {
                 removeItemByKeyAndValue("userIds", member.id);
               }
             }}
-            icon={
-              <Avatar
-                alt={`${member?.id} avatar`}
-                imageSrc={
-                  member.username
-                    ? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${member.username}/avatar.png`
-                    : undefined
-                }
-                size="xs"
-              />
-            }
+            icon={<Avatar alt={`${member?.id} avatar`} imageSrc={member.avatarUrl} size="xs" />}
           />
         ))}
         {filteredMembers?.length === 0 && (

packages/features/ee/organizations/components/TeamInviteFromOrg.tsx

@@ -2,7 +2,6 @@ import type { PropsWithChildren } from "react";
 import { useState } from "react";
 
 import classNames from "@calcom/lib/classNames";
-import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import type { RouterOutputs } from "@calcom/trpc";
 import { Avatar, TextField } from "@calcom/ui";
 
@@ -65,7 +64,6 @@ function UserToInviteItem({
   isSelected: boolean;
   onChange: () => void;
 }) {
-  const bookerUrl = useBookerUrl();
   return (
     <div
       key={member.userId}
@@ -75,12 +73,7 @@ function UserToInviteItem({
         isSelected ? "bg-emphasis" : "hover:bg-subtle "
       )}>
       <div className="flex items-center space-x-2 rtl:space-x-reverse">
-        <Avatar
-          size="sm"
-          alt="Users avatar"
-          asChild
-          imageSrc={`${bookerUrl}/${member.user.username}/avatar.png`}
-        />
+        <Avatar size="sm" alt="Users avatar" asChild imageSrc={member.user.avatarUrl} />
         <label
           htmlFor={`${member.user.id}`}
           className="text-emphasis cursor-pointer text-sm font-medium leading-none">

packages/features/ee/teams/components/TeamInviteList.tsx

@@ -15,6 +15,7 @@ interface Props {
     bio?: string | null;
     hideBranding?: boolean | undefined;
     role: MembershipRole;
+    logoUrl?: string | null;
     accepted: boolean;
   }[];
 }

packages/features/ee/teams/components/TeamInviteListItem.tsx

@@ -1,5 +1,5 @@
 import classNames from "@calcom/lib/classNames";
-import { WEBAPP_URL } from "@calcom/lib/constants";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc/react";
@@ -20,6 +20,7 @@ interface Props {
     name?: string | null;
     slug?: string | null;
     bio?: string | null;
+    logoUrl?: string | null;
     hideBranding?: boolean | undefined;
     role: MembershipRole;
     accepted: boolean;
@@ -64,7 +65,7 @@ export default function TeamInviteListItem(props: Props) {
     <div className="flex">
       <Avatar
         size="mdLg"
-        imageSrc={`${WEBAPP_URL}/team/${team.slug}/avatar.png`}
+        imageSrc={getPlaceholderAvatar(team.logoUrl, team.name)}
         alt="Team Logo"
         className=""
       />

packages/features/insights/filters/UsersListInTeam.tsx

@@ -2,7 +2,6 @@ import {
   FilterCheckboxField,
   FilterCheckboxFieldsContainer,
 } from "@calcom/features/filters/components/TeamsFilter";
-import { useBookerUrl } from "@calcom/lib/hooks/useBookerUrl";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc";
 import { trpc } from "@calcom/trpc";
@@ -11,17 +10,17 @@ import { AnimatedPopover, Avatar } from "@calcom/ui";
 import { useFilterContext } from "../context/provider";
 
 type User = RouterOutputs["viewer"]["insights"]["userList"][number];
-type Option = { value: number; label: string; username: string | null };
+type Option = { value: number; label: string; username: string | null; avatarUrl: string | null };
 
 const mapUserToOption = (user: User): Option => ({
   value: user.id,
   label: user.name ?? user.email, // every user should have at least email
   username: user.username,
+  avatarUrl: user.avatarUrl,
 });
 
 export const UserListInTeam = () => {
   const { t } = useLocale();
-  const bookerUrl = useBookerUrl();
   const { filter, setConfigFilters } = useFilterContext();
   const { selectedFilter, selectedTeamId, selectedMemberUserId, isAll } = filter;
   const { data, isSuccess } = trpc.viewer.insights.userList.useQuery({
@@ -65,13 +64,7 @@ export const UserListInTeam = () => {
                 });
               }
             }}
-            icon={
-              <Avatar
-                alt={`${member?.value} avatar`}
-                imageSrc={member.username ? `${bookerUrl}/${member.username}/avatar.png` : undefined}
-                size="xs"
-              />
-            }
+            icon={<Avatar alt={`${member?.value} avatar`} imageSrc={member.avatarUrl} size="xs" />}
           />
         ))}
         {userListOptions?.length === 0 && (

packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx

@@ -45,7 +45,7 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
                     asChild
                     className="h-[36px] w-[36px]"
                     alt={`${loadedUser?.name} avatar`}
-                    imageSrc={avatarURL}
+                    imageSrc={loadedUser.avatarUrl}
                   />
                   <div className="space-between flex flex-col leading-none">
                     <Skeleton loading={isPending} as="p" waitForTranslation={false}>
@@ -100,7 +100,7 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
               <div className="mb-4 flex-grow">
                 <EditForm
                   selectedUser={loadedUser}
-                  avatarUrl={avatarURL}
+                  avatarUrl={loadedUser.avatarUrl ?? avatarURL}
                   domainUrl={orgBranding?.fullDomain ?? WEBAPP_URL}
                   dispatch={dispatch}
                 />

packages/trpc/server/routers/viewer/organizations/getMembers.handler.ts

@@ -43,6 +43,7 @@ export const getMembersHandler = async ({ input, ctx }: CreateOptions) => {
             select: {
               id: true,
               username: true,
+              avatarUrl: true,
               email: true,
               completedOnboarding: true,
               name: true,

packages/trpc/server/routers/viewer/organizations/getUser.handler.ts

@@ -31,6 +31,7 @@ export async function getUserHandler({ input, ctx }: AdminVerifyOptions) {
         email: true,
         username: true,
         name: true,
+        avatarUrl: true,
         bio: true,
         timeZone: true,
         schedules: {

packages/trpc/server/routers/viewer/teams/listMembers.handler.ts

@@ -43,6 +43,7 @@ export const listMembersHandler = async ({ ctx, input }: ListMembersOptions) =>
               id: true,
               name: true,
               username: true,
+              avatarUrl: true,
             },
           },
           accepted: true,