chore: EventTypeWebWrapper base pr

apps/web/modules/event-types/views/event-types-single-view.tsx

@@ -1,12 +1,9 @@
 "use client";
 
-import { EventType } from "@calcom/features/eventtypes/components/EventType";
-import type { EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types";
+import { EventType } from "@calcom/atoms/monorepo";
 
 /* eslint-disable @typescript-eslint/no-empty-function */
 // eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
-import { trpc } from "@calcom/trpc/react";
-
 import type { AppProps } from "@lib/app-providers";
 
 import { type PageProps } from "~/event-types/views/event-types-single-view.getServerSideProps";
@@ -15,28 +12,7 @@ const EventTypePageWrapper: React.FC<PageProps> & {
  PageWrapper?: AppProps["Component"]["PageWrapper"];
  getLayout?: AppProps["Component"]["getLayout"];
 } = (props) => {
- const { data } = trpc.viewer.eventTypes.get.useQuery({ id: props.type });
-
- if (!data) return null;
-
- const eventType = data.eventType;
-
- const { data: workflows } = trpc.viewer.workflows.getAllActiveWorkflows.useQuery({
- eventType: {
- id: props.type,
- teamId: eventType.teamId,
- userId: eventType.userId,
- parent: eventType.parent,
- metadata: eventType.metadata,
- },
- });
-
- const propsData = {
- ...(data as EventTypeSetupProps),
- allActiveWorkflows: workflows,
- };
-
- return <EventType {...propsData} />;
+ return <EventType id={props.type} />;
 };
 
 export default EventTypePageWrapper;

packages/features/eventtypes/components/EventType.tsx

@@ -19,9 +19,8 @@ import {
 import type { Workflow } from "@calcom/features/ee/workflows/lib/types";
 import type { ChildrenEventType } from "@calcom/features/eventtypes/components/ChildrenEventTypeSelect";
 import { sortHosts } from "@calcom/features/eventtypes/components/HostEditDialogs";
-import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { FormValues, TabMap, EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types";
 import { validateIntervalLimitOrder } from "@calcom/lib";
-import { WEBSITE_URL } from "@calcom/lib/constants";
 import { checkForEmptyAssignment } from "@calcom/lib/event-types/utils/checkForEmptyAssignment";
 import { locationsResolver } from "@calcom/lib/event-types/utils/locationsResolver";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -39,43 +38,6 @@ import { Form, showToast } from "@calcom/ui";
 
 import { EventTypeSingleLayout } from "./EventTypeLayout";
 
-// These can't really be moved into calcom/ui due to the fact they use infered getserverside props typings;
-const EventSetupTab = dynamic(() => import("./tabs/setup/EventSetupTab").then((mod) => mod.EventSetupTab));
-
-const EventAvailabilityTab = dynamic(() =>
- import("./tabs/availability/EventAvailabilityTab").then((mod) => mod.EventAvailabilityTab)
-);
-
-const EventTeamAssignmentTab = dynamic(() =>
- import("./tabs/assignment/EventTeamAssignmentTab").then((mod) => mod.EventTeamAssignmentTab)
-);
-
-const EventLimitsTab = dynamic(() =>
- import("./tabs/limits/EventLimitsTab").then((mod) => mod.EventLimitsTab)
-);
-
-const EventAdvancedTab = dynamic(() =>
- import("./tabs/advanced/EventAdvancedTab").then((mod) => mod.EventAdvancedTab)
-);
-
-const EventInstantTab = dynamic(() =>
- import("./tabs/instant/EventInstantTab").then((mod) => mod.EventInstantTab)
-);
-
-const EventRecurringTab = dynamic(() =>
- import("./tabs/recurring/EventRecurringTab").then((mod) => mod.EventRecurringTab)
-);
-
-const EventAppsTab = dynamic(() => import("./tabs/apps/EventAppsTab").then((mod) => mod.EventAppsTab));
-
-const EventWorkflowsTab = dynamic(() => import("./tabs/workflows/EventWorkfowsTab"));
-
-const EventWebhooksTab = dynamic(() =>
- import("./tabs/webhooks/EventWebhooksTab").then((mod) => mod.EventWebhooksTab)
-);
-
-const EventAITab = dynamic(() => import("./tabs/ai/EventAITab").then((mod) => mod.EventAITab));
-
 const ManagedEventTypeDialog = dynamic(() => import("./dialogs/ManagedEventDialog"));
 
 const AssignmentWarningDialog = dynamic(() => import("./dialogs/AssignmentWarningDialog"));
@@ -109,12 +71,13 @@ const querySchema = z.object({
  .default("setup"),
 });
 
-export type EventTypeSetupProps = RouterOutputs["viewer"]["eventTypes"]["get"];
 export type EventTypeSetup = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"];
 export type EventTypeAssignedUsers = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"]["children"];
 export type EventTypeHosts = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"]["hosts"];
 
-export const EventType = (props: EventTypeSetupProps & { allActiveWorkflows?: Workflow[] }) => {
+export const EventType = (
+ props: EventTypeSetupProps & { allActiveWorkflows?: Workflow[]; tabMap: TabMap }
+) => {
  const { t } = useLocale();
  const utils = trpc.useUtils();
  const telemetry = useTelemetry();
@@ -128,7 +91,7 @@ export const EventType = (props: EventTypeSetupProps & { allActiveWorkflows?: Wo
  onlyInstalled: true,
  });
 
- const { eventType, locationOptions, team, teamMembers, currentUserMembership, destinationCalendar } = props;
+ const { eventType, team, currentUserMembership, tabMap } = props;
  const [isOpenAssignmentWarnDialog, setIsOpenAssignmentWarnDialog] = useState<boolean>(false);
  const [pendingRoute, setPendingRoute] = useState("");
  const leaveWithoutAssigningHosts = useRef(false);
@@ -350,34 +313,6 @@ export const EventType = (props: EventTypeSetupProps & { allActiveWorkflows?: Wo
  ).length;
  }
 
- const permalink = `${WEBSITE_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
- eventType.slug
- }`;
- const tabMap = {
- setup: (
- <EventSetupTab
- eventType={eventType}
- locationOptions={locationOptions}
- team={team}
- teamMembers={teamMembers}
- destinationCalendar={destinationCalendar}
- />
- ),
- availability: <EventAvailabilityTab eventType={eventType} isTeamEvent={!!team} />,
- team: <EventTeamAssignmentTab teamMembers={teamMembers} team={team} eventType={eventType} />,
- limits: <EventLimitsTab eventType={eventType} />,
- advanced: <EventAdvancedTab eventType={eventType} team={team} />,
- instant: <EventInstantTab eventType={eventType} isTeamEvent={!!team} />,
- recurring: <EventRecurringTab eventType={eventType} />,
- apps: <EventAppsTab eventType={{ ...eventType, URL: permalink }} />,
- workflows: props.allActiveWorkflows ? (
- <EventWorkflowsTab eventType={eventType} workflows={props.allActiveWorkflows} />
- ) : (
- <></>
- ),
- webhooks: <EventWebhooksTab eventType={eventType} />,
- ai: <EventAITab eventType={eventType} isTeamEvent={!!team} />,
- } as const;
  const isObject = <T,>(value: T): boolean => {
  return value !== null && typeof value === "object" && !Array.isArray(value);
  };
@@ -584,31 +519,7 @@ export const EventType = (props: EventTypeSetupProps & { allActiveWorkflows?: Wo
  const slug = formMethods.watch("slug") ?? eventType.slug;
 
  // Optional prerender all tabs after 300 ms on mount
- useEffect(() => {
- const timeout = setTimeout(() => {
- const Components = [
- EventSetupTab,
- EventAvailabilityTab,
- EventTeamAssignmentTab,
- EventLimitsTab,
- EventAdvancedTab,
- EventInstantTab,
- EventRecurringTab,
- EventAppsTab,
- EventWorkflowsTab,
- EventWebhooksTab,
- ];
-
- Components.forEach((C) => {
- // @ts-expect-error Property 'render' does not exist on type 'ComponentClass
- C.render.preload();
- });
- }, 300);
 
- return () => {
- clearTimeout(timeout);
- };
- }, []);
  return (
  <>
  <EventTypeSingleLayout

packages/features/eventtypes/lib/types.ts

@@ -137,3 +137,17 @@ export type LocationFormValues = Pick<FormValues, "id" | "locations" | "bookingF
 
 export type EventTypeAssignedUsers = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"]["children"];
 export type EventTypeHosts = RouterOutputs["viewer"]["eventTypes"]["get"]["eventType"]["hosts"];
+
+export type TabMap = {
+ advanced: React.ReactNode;
+ ai?: React.ReactNode;
+ apps?: React.ReactNode;
+ availability: React.ReactNode;
+ instant?: React.ReactNode;
+ limits: React.ReactNode;
+ recurring: React.ReactNode;
+ setup: React.ReactNode;
+ team?: React.ReactNode;
+ webhooks?: React.ReactNode;
+ workflows?: React.ReactNode;
+};

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

@@ -0,0 +1,151 @@
+import dynamic from "next/dynamic";
+import React, { useEffect } from "react";
+
+import { EventType as EventTypeComponent } from "@calcom/features/eventtypes/components/EventType";
+import type { EventTypeSetupProps } from "@calcom/features/eventtypes/lib/types";
+import { WEBSITE_URL } from "@calcom/lib/constants";
+import { trpc } from "@calcom/trpc/react";
+
+const EventSetupTab = dynamic(() =>
+ // import web wrapper when it's ready
+ import("@calcom/features/eventtypes/components/tabs/setup/EventSetupTab").then((mod) => mod.EventSetupTab)
+);
+
+const EventAvailabilityTab = dynamic(() =>
+ // import web wrapper when it's ready
+ import("@calcom/features/eventtypes/components/tabs/availability/EventAvailabilityTab").then(
+ (mod) => mod.EventAvailabilityTab
+ )
+);
+
+const EventTeamAssignmentTab = dynamic(() =>
+ import("@calcom/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab").then(
+ (mod) => mod.EventTeamAssignmentTab
+ )
+);
+
+const EventLimitsTab = dynamic(() =>
+ // import web wrapper when it's ready
+ import("@calcom/features/eventtypes/components/tabs/limits/EventLimitsTab").then(
+ (mod) => mod.EventLimitsTab
+ )
+);
+
+const EventAdvancedTab = dynamic(() =>
+ // import web wrapper when it's ready
+ import("@calcom/features/eventtypes/components/tabs/advanced/EventAdvancedTab").then(
+ (mod) => mod.EventAdvancedTab
+ )
+);
+
+const EventInstantTab = dynamic(() =>
+ import("@calcom/features/eventtypes/components/tabs/instant/EventInstantTab").then(
+ (mod) => mod.EventInstantTab
+ )
+);
+
+const EventRecurringTab = dynamic(() =>
+ // import web wrapper when it's ready
+ import("@calcom/features/eventtypes/components/tabs/recurring/EventRecurringTab").then(
+ (mod) => mod.EventRecurringTab
+ )
+);
+
+const EventAppsTab = dynamic(() =>
+ import("@calcom/features/eventtypes/components/tabs/apps/EventAppsTab").then((mod) => mod.EventAppsTab)
+);
+
+const EventWorkflowsTab = dynamic(
+ () => import("@calcom/features/eventtypes/components/tabs/workflows/EventWorkfowsTab")
+);
+
+const EventWebhooksTab = dynamic(() =>
+ import("@calcom/features/eventtypes/components/tabs/webhooks/EventWebhooksTab").then(
+ (mod) => mod.EventWebhooksTab
+ )
+);
+
+const EventAITab = dynamic(() =>
+ import("@calcom/features/eventtypes/components/tabs/ai/EventAITab").then((mod) => mod.EventAITab)
+);
+
+export type EventTypeWebWrapperProps = {
+ id: number;
+};
+
+const EventType = ({ id, ...rest }: EventTypeSetupProps & { id: number }) => {
+ const { eventType, locationOptions, team, teamMembers, destinationCalendar } = rest;
+ const { data: allActiveWorkflows } = trpc.viewer.workflows.getAllActiveWorkflows.useQuery({
+ eventType: {
+ id,
+ teamId: eventType.teamId,
+ userId: eventType.userId,
+ parent: eventType.parent,
+ metadata: eventType.metadata,
+ },
+ });
+
+ const permalink = `${WEBSITE_URL}/${team ? `team/${team.slug}` : eventType.users[0].username}/${
+ eventType.slug
+ }`;
+ const tabMap = {
+ setup: (
+ <EventSetupTab
+ eventType={eventType}
+ locationOptions={locationOptions}
+ team={team}
+ teamMembers={teamMembers}
+ destinationCalendar={destinationCalendar}
+ />
+ ),
+ availability: <EventAvailabilityTab eventType={eventType} isTeamEvent={!!team} />,
+ team: <EventTeamAssignmentTab teamMembers={teamMembers} team={team} eventType={eventType} />,
+ limits: <EventLimitsTab eventType={eventType} />,
+ advanced: <EventAdvancedTab eventType={eventType} team={team} />,
+ instant: <EventInstantTab eventType={eventType} isTeamEvent={!!team} />,
+ recurring: <EventRecurringTab eventType={eventType} />,
+ apps: <EventAppsTab eventType={{ ...eventType, URL: permalink }} />,
+ workflows: allActiveWorkflows ? (
+ <EventWorkflowsTab eventType={eventType} workflows={allActiveWorkflows} />
+ ) : (
+ <></>
+ ),
+ webhooks: <EventWebhooksTab eventType={eventType} />,
+ ai: <EventAITab eventType={eventType} isTeamEvent={!!team} />,
+ } as const;
+
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ const Components = [
+ EventSetupTab,
+ EventAvailabilityTab,
+ EventTeamAssignmentTab,
+ EventLimitsTab,
+ EventAdvancedTab,
+ EventInstantTab,
+ EventRecurringTab,
+ EventAppsTab,
+ EventWorkflowsTab,
+ EventWebhooksTab,
+ ];
+
+ Components.forEach((C) => {
+ // @ts-expect-error Property 'render' does not exist on type 'ComponentClass
+ C.render.preload();
+ });
+ }, 300);
+
+ return () => {
+ clearTimeout(timeout);
+ };
+ }, []);
+ return <EventTypeComponent {...rest} allActiveWorkflows={allActiveWorkflows} tabMap={tabMap} />;
+};
+
+export const EventTypeWebWrapper = ({ id }: EventTypeWebWrapperProps) => {
+ const { data: eventTypeQueryData } = trpc.viewer.eventTypes.get.useQuery({ id });
+
+ if (!eventTypeQueryData) return null;
+
+ return <EventType {...eventTypeQueryData} id={id} />;
+};

packages/platform/atoms/monorepo.ts

@@ -9,3 +9,4 @@ export { Timezone } from "./timezone";
 export { SelectedCalendarsSettingsWebWrapper } from "./selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper";
 export { DestinationCalendarSettingsWebWrapper } from "./destination-calendar/wrappers/DestinationCalendarSettingsWebWrapper";
 export * from "./availability";
+export { EventTypeWebWrapper as EventType } from "./event-types/wrappers/EventTypeWebWrapper";