fix: avatars not loading for org events (#10062)

apps/web/components/team/screens/Team.tsx

@@ -1,7 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
@@ -12,7 +11,7 @@ type TeamType = NonNullable<TeamWithMembers>;
 type MembersType = TeamType["members"];
 type MemberType = MembersType[number] & { safeBio: string | null };
 
-type TeamTypeWithSafeHtml = Omit<TeamType, "members"> & { members: MemberType[] };
+type TeamTypeWithSafeHtml = Omit<TeamType, "members" | "inviteToken"> & { members: MemberType[] };
 
 const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
   const { t } = useLocale();
@@ -25,11 +24,7 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
   return (
     <Link key={member.id} href={{ pathname: `/${member.username}`, query: queryParamsToForward }}>
       <div className="sm:min-w-80 sm:max-w-80 bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 hover:cursor-pointer">
-        <Avatar
-          size="md"
-          alt={member.name || ""}
-          imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
-        />
+        <Avatar size="md" alt={member.name || ""} imageSrc={"/" + member.username + "/avatar.png"} />
         <section className="mt-2 line-clamp-4 w-full space-y-1">
           <p className="text-default font-medium">{member.name}</p>
           <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">

apps/web/pages/[user].tsx

@@ -13,7 +13,6 @@ import {
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import { EventTypeDescriptionLazy as EventTypeDescription } from "@calcom/features/eventtypes/components";
 import EmptyPage from "@calcom/features/eventtypes/components/EmptyPage";
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import defaultEvents, {
   getDynamicEventDescription,
   getGroupName,
@@ -291,7 +290,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const users = usersWithoutAvatar.map((user) => ({
     ...user,
-    avatar: `${WEBAPP_URL}/${user.username}/avatar.png`,
+    avatar: `/${user.username}/avatar.png`,
   }));
 
   if (!users.length || (!isValidOrgDomain && !users.some((user) => user.organizationId === null))) {

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

@@ -103,11 +103,11 @@ const querySchema = z.object({
 
 const MobileTeamsTab: FC<MobileTeamsTabProps> = (props) => {
   const { eventTypeGroups } = props;
-
+  const orgBranding = useOrgBrandingValues();
   const tabs = eventTypeGroups.map((item) => ({
     name: item.profile.name ?? "",
     href: item.teamId ? `/event-types?teamId=${item.teamId}` : "/event-types",
-    avatar: item.profile.image ?? `${WEBAPP_URL}/${item.profile.slug}/avatar.png`,
+    avatar: item.profile.image ?? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${item.profile.slug}/avatar.png`,
   }));
   const { data } = useTypedQuery(querySchema);
   const events = eventTypeGroups.filter((item) => item.teamId === data.teamId);
@@ -404,7 +404,9 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                           items={type.users.map(
                             (organizer: { name: string | null; username: string | null }) => ({
                               alt: organizer.name || "",
-                              image: `${WEBAPP_URL}/${organizer.username}/avatar.png`,
+                              image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${
+                                organizer.username
+                              }/avatar.png`,
                               title: organizer.name || "",
                             })
                           )}
@@ -419,7 +421,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
                             .flatMap((ch) => ch.users)
                             .map((user: Pick<User, "name" | "username">) => ({
                               alt: user.name || "",
-                              image: `${WEBAPP_URL}/${user.username}/avatar.png`,
+                              image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
                               title: user.name || "",
                             }))}
                         />
@@ -714,7 +716,10 @@ const EventTypeListHeading = ({
       <Avatar
         alt={profile?.name || ""}
         href={teamId ? `/settings/teams/${teamId}/profile` : "/settings/my-account/profile"}
-        imageSrc={`${WEBAPP_URL}/${profile.slug}/avatar.png` || undefined}
+        imageSrc={
+          `${orgBranding?.fullDomain ?? WEBAPP_URL}/${teamId ? "team/" : ""}${profile.slug}/avatar.png` ||
+          undefined
+        }
         size="md"
         className="mt-1 inline-flex justify-center"
       />

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

@@ -7,7 +7,6 @@ import { useEffect } from "react";
 import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
 import { orgDomainConfig } from "@calcom/features/ee/organizations/lib/orgDomains";
 import EventTypeDescription from "@calcom/features/eventtypes/components/EventTypeDescription";
-import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { getPlaceholderAvatar } from "@calcom/lib/defaultAvatarImage";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
@@ -103,7 +102,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
                   items={type.users.map((user) => ({
                     alt: user.name || "",
                     title: user.name || "",
-                    image: CAL_URL + "/" + user.username + "/avatar.png" || "",
+                    image: "/" + user.username + "/avatar.png" || "",
                   }))}
                 />
               </div>
@@ -140,7 +139,7 @@ function TeamPage({ team, isUnpublished, markdownStrippedBio, isValidOrgDomain }
                 truncateAfter={4}
                 items={ch.members.map(({ user: member }) => ({
                   alt: member.name || "",
-                  image: `${WEBAPP_URL}/${member.username}/avatar.png`,
+                  image: `/${member.username}/avatar.png`,
                   title: member.name || "",
                 }))}
               />
@@ -284,7 +283,7 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
     ...type,
     users: type.users.map((user) => ({
       ...user,
-      avatar: CAL_URL + "/" + user.username + "/avatar.png",
+      avatar: "/" + user.username + "/avatar.png",
     })),
     descriptionAsSafeHTML: markdownToSafeHTML(type.description),
   }));
@@ -297,10 +296,12 @@ export const getServerSideProps = async (context: GetServerSidePropsContext) =>
 
   const markdownStrippedBio = stripMarkdown(team?.bio || "");
 
+  const { inviteToken: _inviteToken, ...serializableTeam } = team;
+
   return {
     props: {
-      team: { ...team, safeBio, members },
-      themeBasis: team.slug,
+      team: { ...serializableTeam, safeBio, members },
+      themeBasis: serializableTeam.slug,
       trpcState: ssr.dehydrate(),
       markdownStrippedBio,
       isValidOrgDomain,

packages/features/bookings/components/FiltersContainer.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import { shallow } from "zustand/shallow";
 
 import { useFilterQuery } from "@calcom/features/bookings/lib/useFilterQuery";
+import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks";
 import {
   TeamsFilter,
   FilterCheckboxFieldsContainer,
@@ -28,6 +29,8 @@ import { EventTypeFilter } from "./EventTypeFilter";
 
 const PeopleFilter = () => {
   const { t } = useLocale();
+  const orgBranding = useOrgBrandingValues();
+
   const { data: query, pushItemToKey, removeItemByKeyAndValue, removeByKey } = useFilterQuery();
   const [searchText, setSearchText] = useState("");
 
@@ -70,7 +73,11 @@ const PeopleFilter = () => {
             icon={
               <Avatar
                 alt={`${member?.id} avatar`}
-                imageSrc={member.username ? `${WEBAPP_URL}/${member.username}/avatar.png` : undefined}
+                imageSrc={
+                  member.username
+                    ? `${orgBranding?.fullDomain ?? WEBAPP_URL}/${member.username}/avatar.png`
+                    : undefined
+                }
                 size="xs"
               />
             }

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

@@ -35,7 +35,7 @@ export const EventMembers = ({ schedulingType, users, profile }: EventMembersPro
 
   const avatars: Avatar[] = shownUsers.map((user) => ({
     title: `${user.name}`,
-    image: "image" in user ? `${user.image}` : `${CAL_URL}/${user.username}/avatar.png`,
+    image: "image" in user ? `${user.image}` : `/${user.username}/avatar.png`,
     alt: user.name || undefined,
     href: user.username ? `${CAL_URL}/${user.username}` : undefined,
   }));

packages/features/ee/organizations/pages/settings/profile.tsx

@@ -1,6 +1,6 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prisma } from "@prisma/client";
-import { LinkIcon, Trash2 } from "lucide-react";
+import { LinkIcon } from "lucide-react";
 import { useRouter } from "next/router";
 import { useState, useLayoutEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -19,9 +19,6 @@ import { trpc } from "@calcom/trpc/react";
 import {
   Avatar,
   Button,
-  ConfirmationDialogContent,
-  Dialog,
-  DialogTrigger,
   Form,
   ImageUploader,
   Label,
@@ -225,9 +222,9 @@ const OrgProfileView = () => {
               </div>
             </div>
           )}
-          <hr className="border-subtle my-8 border" />
-
-          <div className="text-default mb-3 text-base font-semibold">{t("danger_zone")}</div>
+          {/* Disable Org disbanding */}
+          {/* <hr className="border-subtle my-8 border" /> 
+           <div className="text-default mb-3 text-base font-semibold">{t("danger_zone")}</div>
           {currentOrganisation?.user.role === "OWNER" ? (
             <Dialog>
               <DialogTrigger asChild>
@@ -243,7 +240,7 @@ const OrgProfileView = () => {
                 {t("disband_org_confirmation_message")}
               </ConfirmationDialogContent>
             </Dialog>
-          ) : null}
+          ) : null} */}
           {/* LEAVE ORG should go above here ^ */}
         </>
       )}

packages/features/eventtypes/lib/getPublicEvent.ts

@@ -6,7 +6,6 @@ import { privacyFilteredLocations } from "@calcom/app-store/locations";
 import { getAppFromSlug } from "@calcom/app-store/utils";
 import { getBookingFieldsWithSystemFields } from "@calcom/features/bookings/lib/getBookingFields";
 import { isRecurringEvent, parseRecurringEvent } from "@calcom/lib";
-import { WEBAPP_URL } from "@calcom/lib/constants";
 import { getDefaultEvent, getUsernameList } from "@calcom/lib/defaultEvents";
 import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import type { PrismaClient } from "@calcom/prisma/client";
@@ -137,7 +136,7 @@ export const getPublicEvent = async (
         username: users[0].username,
         name: users[0].name,
         weekStart: users[0].weekStart,
-        image: `${WEBAPP_URL}/${users[0].username}/avatar.png`,
+        image: `/${users[0].username}/avatar.png`,
         brandColor: users[0].brandColor,
         darkBrandColor: users[0].darkBrandColor,
         theme: null,
@@ -231,7 +230,7 @@ function getProfileFromEvent(event: Event) {
     username,
     name: profile.name,
     weekStart,
-    image: team ? undefined : `${WEBAPP_URL}${basePath}/avatar.png`,
+    image: team ? undefined : `${basePath}/avatar.png`,
     logo: !team ? undefined : team.logo,
     brandColor: profile.brandColor,
     darkBrandColor: profile.darkBrandColor,