feat: event team Assignment tab atom (#17145)

* feat: event team Assignment tab atom

* Update event-types-atom.service.ts

* Update event-types-atom.service.ts

packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx

@@ -21,6 +21,8 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { SchedulingType } from "@calcom/prisma/enums";
 import { Label, Select, SettingsToggle } from "@calcom/ui";
 
+export type EventTeamAssignmentTabBaseProps = Pick<EventTypeSetupProps, "teamMembers" | "team" | "eventType">;
+
 export const mapMemberToChildrenOption = (
   member: EventTypeSetupProps["teamMembers"][number],
   slug: string,
@@ -427,11 +429,7 @@ const Hosts = ({
   );
 };
 
-export const EventTeamAssignmentTab = ({
-  team,
-  teamMembers,
-  eventType,
-}: Pick<EventTypeSetupProps, "teamMembers" | "team" | "eventType">) => {
+export const EventTeamAssignmentTab = ({ team, teamMembers, eventType }: EventTeamAssignmentTabBaseProps) => {
   const { t } = useLocale();
 
   const schedulingTypeOptions: {

packages/platform/atoms/event-types/hooks/useAtomUpdateEventType.ts

@@ -5,6 +5,7 @@ import { V2_ENDPOINTS, SUCCESS_STATUS } from "@calcom/platform-constants";
 import type { ApiResponse, ApiSuccessResponse } from "@calcom/platform-types";
 import type { EventType } from "@calcom/prisma/client";
 
+import { useAtomsContext } from "../../hooks/useAtomsContext";
 import http from "../../lib/http";
 
 export const QUERY_KEY = "use-event-by-id";
@@ -12,6 +13,7 @@ export type UseAtomUpdateEventTypeProps = {
   onSuccess?: () => void;
   onError?: (err: Error) => void;
   onSettled?: () => void;
+  teamId?: number;
 };
 export const useAtomUpdateEventType = ({
   onSuccess = () => {
@@ -23,14 +25,20 @@ export const useAtomUpdateEventType = ({
   onSettled = () => {
     return;
   },
+  teamId,
 }: UseAtomUpdateEventTypeProps) => {
+  const { organizationId } = useAtomsContext();
   return useMutation({
     onSuccess,
     onError,
     onSettled,
     mutationFn: (data: EventTypeUpdateInput) => {
       if (!data.id) throw new Error("Event type id is required");
-      const pathname = `/atoms/${V2_ENDPOINTS.eventTypes}/${data.id}`;
+      let pathname = `/atoms/${V2_ENDPOINTS.eventTypes}/${data.id}`;
+
+      if (teamId) {
+        pathname = `/atoms/organizations/${organizationId}/teams/${teamId}/${V2_ENDPOINTS.eventTypes}/${data.id}`;
+      }
       return http?.patch<ApiResponse<EventType>>(pathname, data).then((res) => {
         if (res.data.status === SUCCESS_STATUS) {
           return (res.data as ApiSuccessResponse<EventType>).data;

packages/platform/atoms/event-types/wrappers/EventTeamAssignmentTabPlatformWrapper.tsx

@@ -0,0 +1,10 @@
+import {
+  EventTeamAssignmentTab,
+  type EventTeamAssignmentTabBaseProps,
+} from "@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab";
+
+const EventTeamAssignmentTabPlatformWrapper = (props: EventTeamAssignmentTabBaseProps) => {
+  return <EventTeamAssignmentTab {...props} />;
+};
+
+export default EventTeamAssignmentTabPlatformWrapper;

packages/platform/atoms/event-types/wrappers/EventTeamAssignmentTabWebWrapper.tsx

@@ -0,0 +1,10 @@
+import {
+  EventTeamAssignmentTab,
+  type EventTeamAssignmentTabBaseProps,
+} from "@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab";
+
+const EventTeamAssignmentTabWebWrapper = (props: EventTeamAssignmentTabBaseProps) => {
+  return <EventTeamAssignmentTab {...props} />;
+};
+
+export default EventTeamAssignmentTabWebWrapper;

packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx

@@ -24,6 +24,7 @@ import EventAvailabilityTabPlatformWrapper from "./EventAvailabilityTabPlatformW
 import EventLimitsTabPlatformWrapper from "./EventLimitsTabPlatformWrapper";
 import EventRecurringTabPlatformWrapper from "./EventRecurringTabPlatformWrapper";
 import SetupTab from "./EventSetupTabPlatformWrapper";
+import EventTeamAssignmentTabPlatformWrapper from "./EventTeamAssignmentTabPlatformWrapper";
 
 export type PlatformTabs = keyof Omit<TabMap, "workflows" | "webhooks" | "instant" | "ai" | "apps">;
 
@@ -99,9 +100,13 @@ const EventType = ({
       toast({ description: message ? t(message) : t(err.message) });
       onError?.(currentValues, err);
     },
+    teamId: team?.id,
   });
 
-  const { form, handleSubmit } = useEventTypeForm({ eventType, onSubmit: updateMutation.mutate });
+  const { form, handleSubmit } = useEventTypeForm({
+    eventType,
+    onSubmit: (data) => updateMutation.mutate(data),
+  });
   const slug = form.watch("slug") ?? eventType.slug;
 
   const showToast = (message: string, variant: "success" | "warning" | "error") => {
@@ -125,7 +130,11 @@ const EventType = ({
     ) : (
       <></>
     ),
-    team: <></>,
+    team: tabs.includes("team") ? (
+      <EventTeamAssignmentTabPlatformWrapper team={team} eventType={eventType} teamMembers={teamMembers} />
+    ) : (
+      <></>
+    ),
     advanced: tabs.includes("advanced") ? (
       <EventAdvancedPlatformWrapper
         eventType={eventType}

packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx

@@ -45,11 +45,7 @@ const EventAvailabilityTab = dynamic(() =>
   import("./EventAvailabilityTabWebWrapper").then((mod) => mod)
 );
 
-const EventTeamAssignmentTab = dynamic(() =>
-  import("@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab").then(
-    (mod) => mod.EventTeamAssignmentTab
-  )
-);
+const EventTeamAssignmentTab = dynamic(() => import("./EventTeamAssignmentTabWebWrapper").then((mod) => mod));
 
 const EventLimitsTab = dynamic(() =>
   // import web wrapper when it's ready

packages/platform/examples/base/src/pages/event-types.tsx

@@ -98,9 +98,8 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               customClassNames={{ atomsWrapper: "!w-[50vw] !m-auto" }}
               allowDelete={true}
               id={eventTypeId}
-              tabs={["setup", "limits", "recurring", "advanced", "availability"]}
+              tabs={["setup", "limits", "recurring", "advanced", "availability", "team"]}
               onSuccess={(eventType) => {
-                console.log(eventType);
                 setEventTypeId(null);
                 refetch();
               }}