update view for EventType

packages/atoms/EventTypeList/EventType.tsx

@@ -1,7 +1,9 @@
 import { memo } from "react";
 
+import { useOrgBranding } from "@calcom/ee/organizations/context/provider";
+import { WEBAPP_URL } from "@calcom/lib/constants";
 import { SchedulingType } from "@calcom/prisma/enums";
-import { ArrowButton } from "@calcom/ui";
+import { ArrowButton, AvatarGroup } from "@calcom/ui";
 
 const Item = ({ type, group, readOnly }: { type: any; group: any; readonly: boolean }) => {
   const content = () => (
@@ -68,6 +70,9 @@ export function EventType({
   lastItem: { id: string };
   moveEventType: (index: number, increment: 1 | -1) => void;
 }) {
+  const isManagedEventType = type.schedulingType === SchedulingType.MANAGED;
+  const orgBranding = useOrgBranding();
+
   return (
     <li>
       <div className="hover:bg-muted flex w-full items-center justify-between">
@@ -79,6 +84,43 @@ export function EventType({
             <ArrowButton arrowDirection="down" onClick={() => moveEventType(index, 1)} />
           )}
           <MemoizedItem />
+          <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
+                  className="relative right-3 top-1"
+                  size="sm"
+                  truncateAfter={4}
+                  items={
+                    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 && (
+                <AvatarGroup
+                  className="relative right-3 top-1"
+                  size="sm"
+                  truncateAfter={4}
+                  items={type?.children
+                    .flatMap((ch) => ch.users)
+                    .map((user: Pick<User, "name" | "username">) => ({
+                      alt: user.name || "",
+                      image: `${orgBranding?.fullDomain ?? WEBAPP_URL}/${user.username}/avatar.png`,
+                      title: user.name || "",
+                    }))}
+                />
+              )}
+              <div className="flex items-center justify-between space-x-2 rtl:space-x-reverse">
+                {isManagedEventType && <>{type.hidden && <>Return badge here </>}</>}
+              </div>
+            </div>
+          </div>
         </div>
         <div className="min-w-9 mx-5 flex sm:hidden" />
       </div>