fix: avatar on booking page (#15190)

* fix: avatar on booking page * chore * fix: type err
calcom · May 24, 2024 · a52f253 · a52f253
1 parent 5d32549
commit a52f253
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 11 deletions.
diff --git a/apps/web/modules/users/views/users-public-view.getServerSideProps.tsx b/apps/web/modules/users/views/users-public-view.getServerSideProps.tsx
@@ -50,6 +50,7 @@ export type UserPageProps = {
     considerUnpublished: boolean;
     orgSlug?: string | null;
     name?: string | null;
+    teamSlug?: string | null;
   };
   eventTypes: ({
     descriptionAsSafeHTML: string;

diff --git a/packages/features/bookings/Booker/types.ts b/packages/features/bookings/Booker/types.ts
@@ -32,6 +32,7 @@ export interface BookerProps {
     orgSlug?: string | null;
     teamSlug?: string | null;
     name?: string | null;
+    logoUrl?: string | null;
   };
 
   /**

diff --git a/packages/features/bookings/components/event-meta/Members.tsx b/packages/features/bookings/components/event-meta/Members.tsx
@@ -31,30 +31,29 @@ export const EventMembers = ({ schedulingType, users, profile, entity }: EventMe
     !users.length ||
     (profile.name !== users[0].name && schedulingType === SchedulingType.COLLECTIVE);
 
-  const orgAvatarItem =
-    entity.orgSlug && !(isDynamic && !profile.image)
-      ? [
+  const orgOrTeamAvatarItem =
+    isDynamic || (!profile.image && !entity.logoUrl)
+      ? []
+      : [
           {
             // We don't want booker to be able to see the list of other users or teams inside the embed
             href: isEmbed
               ? null
               : entity.teamSlug
               ? getTeamUrlSync({ orgSlug: entity.orgSlug, teamSlug: entity.teamSlug })
               : getBookerBaseUrlSync(entity.orgSlug),
-            image: profile.image || "",
-            alt: profile.name || "",
-            title: profile.name || "",
+            image: entity.logoUrl ?? profile.image ?? "",
+            alt: entity.name ?? profile.name ?? "",
+            title: entity.name ?? profile.name ?? "",
           },
-        ]
-      : [];
-
+        ];
   return (
     <>
       <AvatarGroup
         size="sm"
         className="border-muted"
         items={[
-          ...orgAvatarItem,
+          ...orgOrTeamAvatarItem,
           ...shownUsers.map((user) => ({
             href: `${getBookerBaseUrlSync(user.profile?.organization?.slug ?? null)}/${
               user.profile?.username

diff --git a/packages/features/eventtypes/lib/getPublicEvent.ts b/packages/features/eventtypes/lib/getPublicEvent.ts
@@ -8,6 +8,7 @@ import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/
 import { getSlugOrRequestedSlug } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { isRecurringEvent, parseRecurringEvent } from "@calcom/lib";
 import { getOrgOrTeamAvatar } from "@calcom/lib/defaultAvatarImage";
+import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { getDefaultEvent, getUsernameList } from "@calcom/lib/defaultEvents";
 import { getUserAvatarUrl } from "@calcom/lib/getAvatarUrl";
 import { getBookerBaseUrlSync } from "@calcom/lib/getBookerUrl/client";
@@ -199,7 +200,7 @@ export const getPublicEvent = async (
         ),
         ...(orgDetails
           ? {
-              image: orgDetails?.logoUrl,
+              image: getPlaceholderAvatar(orgDetails?.logoUrl, orgDetails?.name),
               name: orgDetails?.name,
               username: org,
             }
@@ -210,6 +211,8 @@ export const getPublicEvent = async (
         fromRedirectOfNonOrgLink,
         orgSlug: org,
         name: unPublishedOrgUser?.profile?.organization?.name ?? null,
+        teamSlug: null,
+        logoUrl: null,
       },
       isInstantEvent: false,
     };
@@ -295,6 +298,19 @@ export const getPublicEvent = async (
     });
     eventWithUserProfiles.schedule = eventOwnerDefaultSchedule;
   }
+
+  let orgDetails: Pick<Team, "logoUrl" | "name"> | undefined;
+  if (org) {
+    orgDetails = await prisma.team.findFirstOrThrow({
+      where: {
+        slug: org,
+      },
+      select: {
+        logoUrl: true,
+        name: true,
+      },
+    });
+  }
   return {
     ...eventWithUserProfiles,
     bookerLayouts: bookerLayoutsSchema.parse(eventMetaData?.bookerLayouts || null),
@@ -323,7 +339,14 @@ export const getPublicEvent = async (
           eventWithUserProfiles.team?.parent?.name ||
           eventWithUserProfiles.team?.name) ??
         null,
+      ...(orgDetails
+        ? {
+            logoUrl: getPlaceholderAvatar(orgDetails?.logoUrl, orgDetails?.name),
+            name: orgDetails?.name,
+          }
+        : {}),
     },
+
     isDynamic: false,
     isInstantEvent: eventWithUserProfiles.isInstantEvent,
     aiPhoneCallConfig: eventWithUserProfiles.aiPhoneCallConfig,