From e90e060739c20f8abb6ad9c746286ef4e0ee86b5 Mon Sep 17 00:00:00 2001
From: Somay Chauhan <somaychauhan98@gmail.com>
Date: Wed, 16 Oct 2024 15:54:13 +0530
Subject: [PATCH] feat: Event availability platform wrapper (#17091)

* moved listSchedules to schedule repository

* Create EventAvailabilityTabPlatformWrapper.tsx

* Revert "moved listSchedules to schedule repository"

This reverts commit b5feacfabbadbf9d75eb205dfad8f70b7773a5cb.

* fix: active state of tabs items

* added event availability platform wrapper

* Update event-types.tsx

* better types

only pick the types we need and omit the rest

* fix: type-check failing

---------

Co-authored-by: Morgan Vernay <morgan@cal.com>
Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>
---
 .../routing-forms/__tests__/config.test.ts    |  1 -
 .../config/BasicConfig.ts                     | 10 +--
 .../availability/EventAvailabilityTab.tsx     | 66 ++++++++++---------
 .../transformApiScheduleForAtom.ts            |  1 +
 .../atoms/event-types/hooks/useSchedule.ts    | 36 ++++++++++
 .../atoms/event-types/hooks/useSchedules.ts   | 35 ++++++++++
 .../EventAvailabilityTabPlatformWrapper.tsx   | 66 +++++++++++++++++++
 .../EventAvailabilityTabWebWrapper.tsx        | 12 ++--
 .../wrappers/EventTypePlatformWrapper.tsx     | 11 +++-
 .../wrappers/EventTypeWebWrapper.tsx          |  6 +-
 .../examples/base/src/pages/event-types.tsx   |  2 +-
 11 files changed, 193 insertions(+), 53 deletions(-)
 create mode 100644 packages/platform/atoms/event-types/hooks/useSchedule.ts
 create mode 100644 packages/platform/atoms/event-types/hooks/useSchedules.ts
 create mode 100644 packages/platform/atoms/event-types/wrappers/EventAvailabilityTabPlatformWrapper.tsx

diff --git a/packages/app-store/routing-forms/__tests__/config.test.ts b/packages/app-store/routing-forms/__tests__/config.test.ts
index db9c427c3e..d1112f3911 100644
--- a/packages/app-store/routing-forms/__tests__/config.test.ts
+++ b/packages/app-store/routing-forms/__tests__/config.test.ts
@@ -42,7 +42,6 @@ const assertSelectOperators = (config: any) => {
   expect(config.types.select.widgets.multiselect.operators).not.toContain("select_equals");
   expect(config.types.select.widgets.multiselect.operators).not.toContain("select_not_equals");
 
-
   expect(config.types.select.widgets.select.operators).toContain("select_equals");
   expect(config.types.select.widgets.select.operators).toContain("select_not_equals");
 
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/config/BasicConfig.ts b/packages/app-store/routing-forms/components/react-awesome-query-builder/config/BasicConfig.ts
index 6cfabbea3c..c3876cb9ce 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/config/BasicConfig.ts
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/config/BasicConfig.ts
@@ -340,10 +340,7 @@ const types: Types = {
     defaultOperator: "select_equals",
     widgets: {
       select: {
-        operators: [
-          "select_equals",
-          "select_not_equals",
-        ],
+        operators: ["select_equals", "select_not_equals"],
         widgetProps: {
           customProps: {
             showSearch: true,
@@ -351,10 +348,7 @@ const types: Types = {
         },
       },
       multiselect: {
-        operators: [
-          "select_any_in",
-          "select_not_any_in",
-        ],
+        operators: ["select_any_in", "select_not_any_in"],
       },
     },
   },
diff --git a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
index 10cc891fe8..0f4e34b4e3 100644
--- a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
+++ b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
@@ -4,10 +4,7 @@ import { Controller, useFormContext } from "react-hook-form";
 import type { OptionProps, SingleValueProps } from "react-select";
 import { components } from "react-select";
 
-import type {
-  EventAvailabilityTabWebWrapperProps,
-  GetAllSchedulesByUserIdQueryType,
-} from "@calcom/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper";
+import type { GetAllSchedulesByUserIdQueryType } from "@calcom/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper";
 import dayjs from "@calcom/dayjs";
 import { SelectSkeletonLoader } from "@calcom/features/availability/components/SkeletonLoader";
 import useLockedFieldsManager from "@calcom/features/ee/managed-event-types/hooks/useLockedFieldsManager";
@@ -27,10 +24,14 @@ import type { RouterOutputs } from "@calcom/trpc/react";
 import { Avatar, Badge, Button, Icon, Label, Select, SettingsToggle, SkeletonText } from "@calcom/ui";
 import { Spinner } from "@calcom/ui/components/icon/Spinner";
 
+type ScheduleQueryData = RouterOutputs["viewer"]["availability"]["schedule"]["get"];
+
 type EventTypeScheduleDetailsProps = {
-  scheduleQueryData?: RouterOutputs["viewer"]["availability"]["schedule"]["get"];
+  scheduleQueryData?: Pick<ScheduleQueryData, "timeZone" | "id" | "isManaged" | "readOnly"> & {
+    schedule: Array<Pick<ScheduleQueryData["schedule"][number], "days" | "startTime" | "endTime">>;
+  };
   isSchedulePending?: boolean;
-  loggedInUser?: RouterOutputs["viewer"]["me"];
+  user?: Pick<RouterOutputs["viewer"]["me"], "timeFormat" | "weekStart">;
   editAvailabilityRedirectUrl?: string;
 };
 
@@ -40,13 +41,20 @@ type EventTypeTeamScheduleProps = {
 };
 
 type EventTypeScheduleProps = {
-  availabilityQueryData?: RouterOutputs["viewer"]["availability"]["list"];
-  isAvailabilityPending?: boolean;
+  schedulesQueryData?: Array<
+    Omit<RouterOutputs["viewer"]["availability"]["list"]["schedules"][number], "availability">
+  >;
+  isSchedulesPending?: boolean;
   eventType: EventTypeSetup;
+  teamMembers: TeamMembers;
 } & EventTypeScheduleDetailsProps &
   EventTypeTeamScheduleProps;
 
-type EventAvailabilityTabProps = EventAvailabilityTabWebWrapperProps & EventTypeScheduleProps;
+export type EventAvailabilityTabBaserProps = {
+  isTeamEvent: boolean;
+};
+
+type EventAvailabilityTabProps = EventAvailabilityTabBaserProps & EventTypeScheduleProps;
 
 const Option = ({ ...props }: OptionProps<AvailabilityOption>) => {
   const { label, isDefault, isManaged = false } = props.data;
@@ -99,16 +107,16 @@ const EventTypeScheduleDetails = memo(
   ({
     scheduleQueryData,
     isSchedulePending,
-    loggedInUser,
+    user,
     editAvailabilityRedirectUrl,
   }: EventTypeScheduleDetailsProps) => {
-    const timeFormat = loggedInUser?.timeFormat;
+    const timeFormat = user?.timeFormat;
     const { t, i18n } = useLocale();
 
-    const weekStart = weekStartNum(loggedInUser?.weekStart);
+    const weekStart = weekStartNum(user?.weekStart);
 
     const filterDays = (dayNum: number) =>
-      scheduleQueryData?.schedule.filter((item) => item.days.includes((dayNum + weekStart) % 7)) || [];
+      scheduleQueryData?.schedule?.filter((item) => item.days.includes((dayNum + weekStart) % 7)) || [];
 
     return (
       <div>
@@ -157,7 +165,6 @@ const EventTypeScheduleDetails = memo(
             !scheduleQueryData.readOnly &&
             !!editAvailabilityRedirectUrl && (
               <Button
-                // href={`/availability/${scheduleQueryData.id}`}
                 href={editAvailabilityRedirectUrl}
                 disabled={isSchedulePending}
                 color="minimal"
@@ -177,8 +184,8 @@ EventTypeScheduleDetails.displayName = "EventTypeScheduleDetails";
 
 const EventTypeSchedule = ({
   eventType,
-  availabilityQueryData,
-  isAvailabilityPending,
+  schedulesQueryData,
+  isSchedulesPending,
   ...rest
 }: EventTypeScheduleProps) => {
   const { t } = useLocale();
@@ -191,25 +198,21 @@ const EventTypeSchedule = ({
 
   useEffect(() => {
     // after data is loaded.
-    if (availabilityQueryData && scheduleId !== 0 && !scheduleId) {
-      const newValue = isManagedEventType
-        ? 0
-        : availabilityQueryData.schedules.find((schedule) => schedule.isDefault)?.id;
+    if (schedulesQueryData && scheduleId !== 0 && !scheduleId) {
+      const newValue = isManagedEventType ? 0 : schedulesQueryData.find((schedule) => schedule.isDefault)?.id;
       if (!newValue && newValue !== 0) return;
       setValue("schedule", newValue, {
         shouldDirty: true,
       });
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [scheduleId, availabilityQueryData]);
+  }, [scheduleId, schedulesQueryData]);
 
-  if (isAvailabilityPending || !availabilityQueryData) {
+  if (isSchedulesPending || !schedulesQueryData) {
     return <SelectSkeletonLoader />;
   }
 
-  const schedules = availabilityQueryData.schedules;
-
-  const options = schedules.map((schedule) => ({
+  const options = schedulesQueryData.map((schedule) => ({
     value: schedule.id,
     label: schedule.name,
     isDefault: schedule.isDefault,
@@ -227,7 +230,11 @@ const EventTypeSchedule = ({
   }
   // We are showing a managed event for a member and team owner selected their own schedule, so adding
   // the managed schedule option
-  if (isChildrenManagedEventType && scheduleId && !schedules.find((schedule) => schedule.id === scheduleId)) {
+  if (
+    isChildrenManagedEventType &&
+    scheduleId &&
+    !schedulesQueryData.find((schedule) => schedule.id === scheduleId)
+  ) {
     options.push({
       value: scheduleId,
       label: eventType.scheduleName ?? t("default_schedule_name"),
@@ -236,7 +243,7 @@ const EventTypeSchedule = ({
     });
   }
   // We push the selected schedule from the event type if it's not part of the list response. This happens if the user is an admin but not the schedule owner.
-  else if (eventType.schedule && !schedules.find((schedule) => schedule.id === eventType.schedule)) {
+  else if (eventType.schedule && !schedulesQueryData.find((schedule) => schedule.id === eventType.schedule)) {
     options.push({
       value: eventType.schedule,
       label: eventType.scheduleName ?? t("default_schedule_name"),
@@ -411,10 +418,7 @@ const TeamAvailability = ({
   );
 };
 
-const UseCommonScheduleSettingsToggle = ({
-  eventType,
-  ...rest
-}: Omit<EventAvailabilityTabProps, "isTeamEvent">) => {
+const UseCommonScheduleSettingsToggle = ({ eventType, ...rest }: EventTypeScheduleProps) => {
   const { t } = useLocale();
   const { setValue, resetField, getFieldState, getValues, watch } = useFormContext<FormValues>();
 
diff --git a/packages/platform/atoms/availability/atom-api-transformers/transformApiScheduleForAtom.ts b/packages/platform/atoms/availability/atom-api-transformers/transformApiScheduleForAtom.ts
index 3ae579bcb8..a227fc5c7e 100644
--- a/packages/platform/atoms/availability/atom-api-transformers/transformApiScheduleForAtom.ts
+++ b/packages/platform/atoms/availability/atom-api-transformers/transformApiScheduleForAtom.ts
@@ -31,6 +31,7 @@ export function transformApiScheduleForAtom(
       scheduleId: schedule.id,
       days: "days" in entry ? entry.days : [],
       date: "date" in entry ? entry.date : null,
+      id: schedule.id,
     };
   });
 
diff --git a/packages/platform/atoms/event-types/hooks/useSchedule.ts b/packages/platform/atoms/event-types/hooks/useSchedule.ts
new file mode 100644
index 0000000000..32aa492ddb
--- /dev/null
+++ b/packages/platform/atoms/event-types/hooks/useSchedule.ts
@@ -0,0 +1,36 @@
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  V2_ENDPOINTS,
+  SUCCESS_STATUS,
+  VERSION_2024_06_11,
+  CAL_API_VERSION_HEADER,
+} from "@calcom/platform-constants";
+import type { GetScheduleOutput_2024_06_11 } from "@calcom/platform-types";
+
+import http from "../../lib/http";
+
+export const QUERY_KEY = "event-type-user-schedule";
+
+export const useSchedule = (id?: number) => {
+  const pathname = id ? `/${V2_ENDPOINTS.availability}/${id}` : `/${V2_ENDPOINTS.availability}/default`;
+
+  const { isLoading, error, data } = useQuery({
+    queryKey: [QUERY_KEY, id],
+    queryFn: () => {
+      return http
+        .get<GetScheduleOutput_2024_06_11>(pathname, {
+          headers: { [CAL_API_VERSION_HEADER]: VERSION_2024_06_11 },
+        })
+        .then((res) => {
+          if (res.data.status === SUCCESS_STATUS) {
+            return res.data.data;
+          }
+          throw new Error(res.data.error?.message);
+        });
+    },
+    enabled: !!id,
+  });
+
+  return { isLoading, error, data };
+};
diff --git a/packages/platform/atoms/event-types/hooks/useSchedules.ts b/packages/platform/atoms/event-types/hooks/useSchedules.ts
new file mode 100644
index 0000000000..665179fec3
--- /dev/null
+++ b/packages/platform/atoms/event-types/hooks/useSchedules.ts
@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/react-query";
+
+import {
+  V2_ENDPOINTS,
+  SUCCESS_STATUS,
+  VERSION_2024_06_11,
+  CAL_API_VERSION_HEADER,
+} from "@calcom/platform-constants";
+import type { GetSchedulesOutput_2024_06_11 } from "@calcom/platform-types";
+
+import http from "../../lib/http";
+
+export const QUERY_KEY = "event-type-user-schedules";
+
+export const useSchedules = () => {
+  const pathname = `/${V2_ENDPOINTS.availability}`;
+
+  const { isLoading, error, data } = useQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: () => {
+      return http
+        .get<GetSchedulesOutput_2024_06_11>(pathname, {
+          headers: { [CAL_API_VERSION_HEADER]: VERSION_2024_06_11 },
+        })
+        .then((res) => {
+          if (res.data.status === SUCCESS_STATUS) {
+            return res.data.data;
+          }
+          throw new Error(res.data.error?.message);
+        });
+    },
+  });
+
+  return { isLoading, error, data };
+};
diff --git a/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabPlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabPlatformWrapper.tsx
new file mode 100644
index 0000000000..d516912d38
--- /dev/null
+++ b/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabPlatformWrapper.tsx
@@ -0,0 +1,66 @@
+import { useFormContext } from "react-hook-form";
+
+import { EventAvailabilityTab } from "@calcom/features/eventtypes/components/tabs/availability/EventAvailabilityTab";
+import type { EventTypeSetup, FormValues } from "@calcom/features/eventtypes/lib/types";
+import type { User } from "@calcom/prisma/client";
+
+import type { Availability } from "../../availability/AvailabilitySettings";
+import { transformApiScheduleForAtom } from "../../availability/atom-api-transformers/transformApiScheduleForAtom";
+import { useSchedule } from "../hooks/useSchedule";
+import { useSchedules } from "../hooks/useSchedules";
+
+type EventAvailabilityTabPlatformWrapperProps = {
+  user?: Pick<User, "id" | "defaultScheduleId" | "timeZone" | "timeFormat" | "weekStart">;
+  eventType: EventTypeSetup;
+  isTeamEvent: boolean;
+};
+
+const EventAvailabilityTabPlatformWrapper = ({
+  user,
+  ...props
+}: EventAvailabilityTabPlatformWrapperProps) => {
+  const formMethods = useFormContext<FormValues>();
+  const scheduleId = formMethods.watch("schedule");
+
+  const { isLoading: isSchedulePending, data: scheduleQueryData } = useSchedule(
+    scheduleId || user?.defaultScheduleId || undefined
+  );
+
+  const { data: schedulesQueryData, isLoading: isSchedulesPending } = useSchedules();
+
+  const atomSchedule = transformApiScheduleForAtom(user, scheduleQueryData, schedulesQueryData?.length || 0);
+
+  if (!atomSchedule) {
+    return <></>;
+  }
+
+  return (
+    <EventAvailabilityTab
+      {...props}
+      user={user}
+      schedulesQueryData={schedulesQueryData}
+      isSchedulesPending={isSchedulesPending}
+      isSchedulePending={isSchedulePending}
+      scheduleQueryData={{
+        isManaged: atomSchedule.isManaged,
+        readOnly: atomSchedule.readOnly,
+        id: atomSchedule.id,
+        timeZone: atomSchedule.timeZone,
+        schedule:
+          atomSchedule.schedule.reduce(
+            (acc: Availability[], avail: Availability) => [
+              ...acc,
+              {
+                startTime: new Date(avail.startTime),
+                endTime: new Date(avail.endTime),
+                days: avail.days,
+              },
+            ],
+            []
+          ) || [],
+      }}
+    />
+  );
+};
+
+export default EventAvailabilityTabPlatformWrapper;
diff --git a/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper.tsx
index eb7948a696..c63fff2ccd 100644
--- a/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper.tsx
+++ b/packages/platform/atoms/event-types/wrappers/EventAvailabilityTabWebWrapper.tsx
@@ -11,7 +11,7 @@ import { trpc } from "@calcom/trpc/react";
 export type EventAvailabilityTabWebWrapperProps = {
   eventType: EventTypeSetup;
   isTeamEvent: boolean;
-  loggedInUser?: RouterOutputs["viewer"]["me"];
+  user?: RouterOutputs["viewer"]["me"];
   teamMembers: TeamMembers;
 };
 
@@ -32,13 +32,13 @@ const EventAvailabilityTabWebWrapper = (props: EventAvailabilityTabWebWrapperPro
   const { isPending: isSchedulePending, data: scheduleQueryData } =
     trpc.viewer.availability.schedule.get.useQuery(
       {
-        scheduleId: scheduleId || props.loggedInUser?.defaultScheduleId || undefined,
+        scheduleId: scheduleId || props.user?.defaultScheduleId || undefined,
         isManagedEventType: isManagedEventType || isChildrenManagedEventType,
       },
-      { enabled: !!scheduleId || !!props.loggedInUser?.defaultScheduleId }
+      { enabled: !!scheduleId || !!props.user?.defaultScheduleId }
     );
 
-  const { data: availabilityQueryData, isPending: isAvailabilityPending } =
+  const { data: schedulesQueryData, isPending: isSchedulesPending } =
     trpc.viewer.availability.list.useQuery(undefined);
 
   const hostSchedulesQuery = trpc.viewer.availability.schedule.getAllSchedulesByUserId.useQuery;
@@ -46,8 +46,8 @@ const EventAvailabilityTabWebWrapper = (props: EventAvailabilityTabWebWrapperPro
   return (
     <EventAvailabilityTab
       {...props}
-      availabilityQueryData={availabilityQueryData}
-      isAvailabilityPending={isAvailabilityPending}
+      schedulesQueryData={schedulesQueryData?.schedules}
+      isSchedulesPending={isSchedulesPending}
       isSchedulePending={isSchedulePending}
       scheduleQueryData={scheduleQueryData}
       editAvailabilityRedirectUrl={`/availability/${scheduleQueryData?.id}`}
diff --git a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
index de1e300f77..4dd45280cb 100644
--- a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
+++ b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx
@@ -20,6 +20,7 @@ import { useEventTypeForm } from "../hooks/useEventTypeForm";
 import { useHandleRouteChange } from "../hooks/useHandleRouteChange";
 import { usePlatformTabsNavigations } from "../hooks/usePlatformTabsNavigations";
 import EventAdvancedPlatformWrapper from "./EventAdvancedPlatformWrapper";
+import EventAvailabilityTabPlatformWrapper from "./EventAvailabilityTabPlatformWrapper";
 import EventLimitsTabPlatformWrapper from "./EventLimitsTabPlatformWrapper";
 import EventRecurringTabPlatformWrapper from "./EventRecurringTabPlatformWrapper";
 import SetupTab from "./EventSetupTabPlatformWrapper";
@@ -83,7 +84,7 @@ const EventType = ({
       // Reset the form with these values as new default values to ensure the correct comparison for dirtyFields eval
       form.reset(currentValues);
       toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) });
-      onSuccess?.(currentValues);
+      props.onSuccess?.(currentValues);
     },
     async onSettled() {
       return;
@@ -92,7 +93,7 @@ const EventType = ({
       const currentValues = form.getValues();
       const message = err?.message;
       toast({ description: message ? t(message) : t(err.message) });
-      onError?.(currentValues, err);
+      props.onError?.(currentValues, err);
     },
   });
 
@@ -115,7 +116,11 @@ const EventType = ({
     ) : (
       <></>
     ),
-    availability: <></>,
+    availability: tabs.includes("availability") ? (
+      <EventAvailabilityTabPlatformWrapper eventType={eventType} isTeamEvent={!!team} user={user?.data} />
+    ) : (
+      <></>
+    ),
     team: <></>,
     advanced: tabs.includes("advanced") ? (
       <EventAdvancedPlatformWrapper
diff --git a/packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx
index 316b47ca3e..87c646d409 100644
--- a/packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx
+++ b/packages/platform/atoms/event-types/wrappers/EventTypeWebWrapper.tsx
@@ -160,7 +160,7 @@ const EventTypeWeb = ({
   const { t } = useLocale();
   const utils = trpc.useUtils();
 
-  const { data: loggedInUser, isPending: isLoggedInUserPending } = useMeQuery();
+  const { data: user, isPending: isLoggedInUserPending } = useMeQuery();
   const isTeamEventTypeDeleted = useRef(false);
   const leaveWithoutAssigningHosts = useRef(false);
   const telemetry = useTelemetry();
@@ -245,7 +245,7 @@ const EventTypeWeb = ({
       <EventAvailabilityTab
         eventType={eventType}
         isTeamEvent={!!team}
-        loggedInUser={loggedInUser}
+        user={user}
         teamMembers={teamMembers}
       />
     ),
@@ -255,7 +255,7 @@ const EventTypeWeb = ({
       <EventAdvancedTab
         eventType={eventType}
         team={team}
-        user={loggedInUser}
+        user={user}
         isUserLoading={isLoggedInUserPending}
         showToast={showToast}
       />
diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx
index 18d03b6b9f..643822cf86 100644
--- a/packages/platform/examples/base/src/pages/event-types.tsx
+++ b/packages/platform/examples/base/src/pages/event-types.tsx
@@ -91,7 +91,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
             <EventTypeSettings
               allowDelete={true}
               id={eventTypeId}
-              tabs={["setup", "limits", "recurring", "advanced"]}
+              tabs={["setup", "limits", "recurring", "advanced", "availability"]}
               onSuccess={(eventType) => {
                 console.log(eventType);
                 setEventTypeId(null);