From b39497519904f4e9190b707245d3e4bdbf193c36 Mon Sep 17 00:00:00 2001
From: Ryukemeister <sahalrajiv-extc@atharvacoe.ac.in>
Date: Thu, 19 Oct 2023 02:48:50 +0530
Subject: [PATCH] update view for EventType

---
 packages/atoms/EventTypeList/EventType.tsx | 44 +++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/packages/atoms/EventTypeList/EventType.tsx b/packages/atoms/EventTypeList/EventType.tsx
index 6a5b011201..c70618841d 100644
--- a/packages/atoms/EventTypeList/EventType.tsx
+++ b/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>