fix: add org avatar to org booking pages [CAL-2333] (#10847)

* Add org avatar to org booking pages

* Using web app url for org avatars + missing i18n string

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

apps/web/public/static/locales/en/common.json

@@ -2010,6 +2010,7 @@
   "member_removed": "Member removed",
   "my_availability": "My Availability",
   "team_availability": "Team Availability",
+  "your_organization_updated_sucessfully": "Your organization updated successfully",
   "seat_options_doesnt_multiple_durations": "Seat option doesn't support multiple durations", 
   "ADD_NEW_STRINGS_ABOVE_THIS_LINE_TO_PREVENT_MERGE_CONFLICTS": "↑↑↑↑↑↑↑↑↑↑↑↑↑ Add your new strings above here ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑"
 }

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

@@ -63,7 +63,12 @@ export const EventMeta = () => {
       )}
       {!isLoading && !!event && (
         <m.div {...fadeInUp} layout transition={{ ...fadeInUp.transition, delay: 0.3 }}>
-          <EventMembers schedulingType={event.schedulingType} users={event.users} profile={event.profile} />
+          <EventMembers
+            schedulingType={event.schedulingType}
+            users={event.users}
+            profile={event.profile}
+            entity={event.entity}
+          />
           <EventTitle className="my-2">{event?.title}</EventTitle>
           {event.description && (
             <EventMetaBlock contentClassName="mb-8 break-words max-w-full max-h-[180px] scroll-bar pr-4">

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

@@ -1,4 +1,5 @@
-import { CAL_URL } from "@calcom/lib/constants";
+import { getOrgFullDomain } from "@calcom/features/ee/organizations/lib/orgDomains";
+import { CAL_URL, WEBAPP_URL } from "@calcom/lib/constants";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { AvatarGroup } from "@calcom/ui";
 
@@ -12,6 +13,7 @@ export interface EventMembersProps {
   schedulingType: PublicEvent["schedulingType"];
   users: PublicEvent["users"];
   profile: PublicEvent["profile"];
+  entity: PublicEvent["entity"];
 }
 
 type Avatar = {
@@ -23,7 +25,7 @@ type Avatar = {
 
 type AvatarWithRequiredImage = Avatar & { image: string };
 
-export const EventMembers = ({ schedulingType, users, profile }: EventMembersProps) => {
+export const EventMembers = ({ schedulingType, users, profile, entity }: EventMembersProps) => {
   const showMembers = schedulingType !== SchedulingType.ROUND_ROBIN;
   const shownUsers = showMembers ? users : [];
 
@@ -37,9 +39,19 @@ export const EventMembers = ({ schedulingType, users, profile }: EventMembersPro
     title: `${user.name}`,
     image: "image" in user ? `${user.image}` : `/${user.username}/avatar.png`,
     alt: user.name || undefined,
-    href: user.username ? `${CAL_URL}/${user.username}` : undefined,
+    href: `/${user.username}`,
   }));
 
+  // Add organization avatar
+  if (entity.orgSlug) {
+    avatars.unshift({
+      title: `${entity.name}`,
+      image: `${WEBAPP_URL}/team/${entity.orgSlug}/avatar.png`,
+      alt: entity.name || undefined,
+      href: getOrgFullDomain(entity.orgSlug),
+    });
+  }
+
   // Add profile later since we don't want to force creating an avatar for this if it doesn't exist.
   avatars.unshift({
     title: `${profile.name}`,

packages/features/ee/organizations/lib/orgDomains.ts

@@ -48,7 +48,7 @@ export function subdomainSuffix() {
 }
 
 export function getOrgFullDomain(slug: string, options: { protocol: boolean } = { protocol: true }) {
-  return `${options.protocol ? `${new URL(WEBAPP_URL).protocol}//` : ""}${slug}.${subdomainSuffix()}/`;
+  return `${options.protocol ? `${new URL(WEBAPP_URL).protocol}//` : ""}${slug}.${subdomainSuffix()}`;
 }
 
 export function getSlugOrRequestedSlug(slug: string) {

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

@@ -57,7 +57,7 @@ const OrgProfileView = () => {
     },
     async onSuccess() {
       await utils.viewer.teams.get.invalidate();
-      showToast(t("your_organisation_updated_sucessfully"), "success");
+      showToast(t("your_organization_updated_sucessfully"), "success");
     },
   });