refactor: Break useCreateEventType hook into web-specific and platform-specific ones (#27522)

* migrate useCreateEventType hook to web

* fix

* fix

* fix import

apps/web/modules/event-types/components/CreateEventTypeDialog.tsx

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { Dialog } from "@calcom/features/components/controlled-dialog";
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
 import CreateEventTypeForm from "@calcom/features/eventtypes/components/CreateEventTypeForm";
-import { useCreateEventType } from "@calcom/features/eventtypes/hooks/useCreateEventType";
+import { useCreateEventType } from "~/event-types/hooks/useCreateEventType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import type { EventType } from "@calcom/prisma/client";

apps/web/modules/event-types/hooks/useCreateEventType.ts

@@ -1,6 +1,4 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useState } from "react";
 import type { z } from "zod";
 
 import { createEventTypeInput } from "@calcom/features/eventtypes/lib/types";
@@ -8,33 +6,8 @@ import { useDebounce } from "@calcom/lib/hooks/useDebounce";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { HttpError } from "@calcom/lib/http-error";
 import type { EventType } from "@calcom/prisma/client";
-import { SchedulingType } from "@calcom/prisma/enums";
-import { unlockedManagedEventTypeProps } from "@calcom/prisma/zod-utils";
 import { trpc } from "@calcom/trpc/react";
-
-export type CreateEventTypeFormValues = z.infer<typeof createEventTypeInput>;
-
-export const useCreateEventTypeForm = () => {
-  const form = useForm<CreateEventTypeFormValues>({
-    defaultValues: {
-      length: 15,
-    },
-    resolver: zodResolver(createEventTypeInput),
-  });
-
-  const schedulingTypeWatch = form.watch("schedulingType");
-  const isManagedEventType = schedulingTypeWatch === SchedulingType.MANAGED;
-
-  useEffect(() => {
-    if (isManagedEventType) {
-      form.setValue("metadata.managedEventConfig.unlockedFields", unlockedManagedEventTypeProps);
-    } else {
-      form.setValue("metadata", null);
-    }
-  }, [schedulingTypeWatch]);
-
-  return { form, isManagedEventType };
-};
+import { useCreateEventTypeForm } from "@calcom/atoms/hooks/event-types/private/useCreateEventTypeForm";
 
 export const useCreateEventType = (
   onSuccessMutation: (eventType: EventType) => void,

apps/web/modules/settings/teams/[id]/event-types-view.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 
 import { useOrgBranding } from "@calcom/features/ee/organizations/context/provider";
-import { useCreateEventType } from "@calcom/features/eventtypes/hooks/useCreateEventType";
+import { useCreateEventType } from "~/event-types/hooks/useCreateEventType";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";

packages/features/ee/teams/components/TeamEventTypeForm.tsx

@@ -2,7 +2,6 @@ import type { ReactNode } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
-import type { CreateEventTypeFormValues } from "@calcom/features/eventtypes/hooks/useCreateEventType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
 import { SchedulingType } from "@calcom/prisma/enums";
@@ -12,6 +11,10 @@ import { Form } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { RadioAreaGroup as RadioArea } from "@calcom/ui/components/radio";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import type { z } from "zod";
+import { createEventTypeInput } from "@calcom/features/eventtypes/lib/types";
+
+type CreateEventTypeFormValues = z.infer<typeof createEventTypeInput>;
 
 type props = {
   permissions: {

packages/features/eventtypes/components/CreateEventTypeForm.tsx

@@ -3,7 +3,6 @@ import { useState } from "react";
 import type { UseFormReturn } from "react-hook-form";
 
 import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
-import type { CreateEventTypeFormValues } from "@calcom/features/eventtypes/hooks/useCreateEventType";
 import { MAX_EVENT_DURATION_MINUTES, MIN_EVENT_DURATION_MINUTES } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { md } from "@calcom/lib/markdownIt";
@@ -14,6 +13,10 @@ import { Form } from "@calcom/ui/components/form";
 import { TextAreaField } from "@calcom/ui/components/form";
 import { TextField } from "@calcom/ui/components/form";
 import { Tooltip } from "@calcom/ui/components/tooltip";
+import type { z } from "zod";
+import { createEventTypeInput } from "@calcom/features/eventtypes/lib/types";
+
+type CreateEventTypeFormValues = z.infer<typeof createEventTypeInput>;
 
 export default function CreateEventTypeForm({
   form,

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

@@ -1,12 +1,12 @@
 import { AtomsWrapper } from "@/components/atoms-wrapper";
 
 import CreateEventTypeForm from "@calcom/features/eventtypes/components/CreateEventTypeForm";
-import { useCreateEventTypeForm } from "@calcom/features/eventtypes/hooks/useCreateEventType";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { EventType } from "@calcom/prisma/client";
 import { Button } from "@calcom/ui/components/button";
 import { TeamEventTypeForm } from "@calcom/features/ee/teams/components/TeamEventTypeForm";
 
+import { useCreateEventTypeForm } from "../../hooks/event-types/private/useCreateEventTypeForm";
 import { useCreateEventType } from "../../hooks/event-types/private/useCreateEventType";
 import { useCreateTeamEventType } from "../../hooks/event-types/private/useCreateTeamEventType";
 import { useTeams } from "../../hooks/teams/useTeams";

packages/platform/atoms/hooks/event-types/private/useCreateEventTypeForm.ts

@@ -0,0 +1,32 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+
+import { createEventTypeInput } from "@calcom/features/eventtypes/lib/types";
+import { SchedulingType } from "@calcom/prisma/enums";
+import { unlockedManagedEventTypeProps } from "@calcom/prisma/zod-utils";
+
+export type CreateEventTypeFormValues = z.infer<typeof createEventTypeInput>;
+
+export const useCreateEventTypeForm = () => {
+  const form = useForm<CreateEventTypeFormValues>({
+    defaultValues: {
+      length: 15,
+    },
+    resolver: zodResolver(createEventTypeInput),
+  });
+
+  const schedulingTypeWatch = form.watch("schedulingType");
+  const isManagedEventType = schedulingTypeWatch === SchedulingType.MANAGED;
+
+  useEffect(() => {
+    if (isManagedEventType) {
+      form.setValue("metadata.managedEventConfig.unlockedFields", unlockedManagedEventTypeProps);
+    } else {
+      form.setValue("metadata", null);
+    }
+  }, [schedulingTypeWatch]);
+
+  return { form, isManagedEventType };
+};

packages/platform/atoms/package.json

@@ -69,6 +69,7 @@
     "./hooks/useIsPlatform": "./hooks/useIsPlatform.ts",
     "./hooks/useIsPlatformBookerEmbed": "./hooks/useIsPlatformBookerEmbed.ts",
     "./hooks/event-types/private/useEventTypeById": "./hooks/event-types/private/useEventTypeById.ts",
+    "./hooks/event-types/private/useCreateEventTypeForm": "./hooks/event-types/private/useCreateEventTypeForm.ts",
     "./event-types/hooks/useEventTypeForm": "./event-types/hooks/useEventTypeForm.ts",
     "./event-types/hooks/useHandleRouteChange": "./event-types/hooks/useHandleRouteChange.ts",
     "./event-types/hooks/useTabsNavigations": "./event-types/hooks/useTabsNavigations.tsx",