@calcom/atoms 2.8.0 → 2.8.2

package/src/event-types/hooks/use-event-type-form.test.ts

@@ -1,192 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { Host } from "../../contracts";
-import { MembershipRole } from "../../contracts";
-import type { ChildrenEventType } from "../../vendor/children-event-type";
-import { stripChildrenForPayload } from "../../vendor/children-event-type";
-import { stripHostsForPayload } from "./use-event-type-form";
-
-describe("useEventTypeForm - children payload stripping", () => {
-  it("should strip avatar, profile, username, and membership from children payload", () => {
-    const children: ChildrenEventType[] = [
-      {
-        value: "1",
-        label: "Alice",
-        created: true,
-        slug: "test-event",
-        hidden: false,
-        owner: {
-          id: 1,
-          name: "Alice",
-          email: "alice@example.com",
-          username: "alice",
-          avatar: "data:image/png;base64," + "A".repeat(50000), // Large base64 avatar
-          membership: MembershipRole.MEMBER,
-          eventTypeSlugs: ["meeting", "consultation"],
-          profile: {
-            id: 1,
-            username: "alice",
-            upId: "usr_1",
-            organizationId: null,
-            organization: null,
-          },
-        },
-      },
-      {
-        value: "2",
-        label: "Bob",
-        created: false,
-        slug: "test-event",
-        hidden: true,
-        owner: {
-          id: 2,
-          name: "Bob",
-          email: "bob@example.com",
-          username: "bob",
-          avatar: "https://example.com/avatars/bob.png",
-          membership: MembershipRole.OWNER,
-          eventTypeSlugs: [],
-          profile: {
-            id: 2,
-            username: "bob",
-            upId: "usr_2",
-            organizationId: 10,
-            organization: {
-              id: 10,
-              slug: "org",
-              name: "Org",
-              calVideoLogo: null,
-              bannerUrl: "",
-              isPlatform: false,
-            },
-          },
-        },
-      },
-    ];
-
-    const stripped = stripChildrenForPayload(children);
-
-    // Should only contain server-needed fields
-    expect(stripped).toEqual([
-      {
-        hidden: false,
-        owner: {
-          id: 1,
-          name: "Alice",
-          email: "alice@example.com",
-          eventTypeSlugs: ["meeting", "consultation"],
-        },
-      },
-      {
-        hidden: true,
-        owner: {
-          id: 2,
-          name: "Bob",
-          email: "bob@example.com",
-          eventTypeSlugs: [],
-        },
-      },
-    ]);
-
-    // Verify avatar is not present
-    for (const child of stripped) {
-      expect(child.owner).not.toHaveProperty("avatar");
-      expect(child.owner).not.toHaveProperty("profile");
-      expect(child.owner).not.toHaveProperty("username");
-      expect(child.owner).not.toHaveProperty("membership");
-    }
-  });
-
-  it("should significantly reduce payload size for large teams", () => {
-    // Simulate 85 users with base64 avatars (~10KB each)
-    const largeBase64Avatar = "data:image/png;base64," + "A".repeat(10000);
-
-    const children: ChildrenEventType[] = Array.from({ length: 85 }, (_, i) => ({
-      value: String(i + 1),
-      label: `User ${i + 1}`,
-      created: true,
-      slug: "managed-event",
-      hidden: false,
-      owner: {
-        id: i + 1,
-        name: `User ${i + 1}`,
-        email: `user${i + 1}@example.com`,
-        username: `user${i + 1}`,
-        avatar: largeBase64Avatar,
-        membership: MembershipRole.MEMBER,
-        eventTypeSlugs: ["event-a", "event-b"],
-        profile: {
-          id: i + 1,
-          username: `user${i + 1}`,
-          upId: `usr_${i + 1}`,
-          organizationId: 1,
-          organization: {
-            id: 1,
-            slug: "org",
-            name: "Large Org",
-            calVideoLogo: null,
-            bannerUrl: "",
-            isPlatform: false,
-          },
-        },
-      },
-    }));
-
-    const fullPayloadSize = JSON.stringify(children).length;
-    const strippedPayloadSize = JSON.stringify(stripChildrenForPayload(children)).length;
-
-    // The stripped payload should be dramatically smaller
-    expect(strippedPayloadSize).toBeLessThan(fullPayloadSize * 0.1);
-
-    // Full payload with 85 users and 10KB avatars should be around 850KB+
-    expect(fullPayloadSize).toBeGreaterThan(800000);
-
-    // Stripped payload should be well under 1MB
-    expect(strippedPayloadSize).toBeLessThan(100000);
-  });
-
-  it("should handle undefined children gracefully", () => {
-    const children: ChildrenEventType[] = [];
-    const stripped = stripChildrenForPayload(children);
-    expect(stripped).toEqual([]);
-  });
-
-  it("should strip display-only host fields from the payload", () => {
-    const hosts: Host[] = [
-      {
-        isFixed: false,
-        userId: 1,
-        profileId: 22,
-        priority: 2,
-        weight: 100,
-        scheduleId: 10,
-        groupId: "group-1",
-        location: {
-          id: "loc-1",
-          userId: 1,
-          eventTypeId: 10,
-          type: "integrations:google:meet",
-        },
-        name: "Alice",
-        avatar: "https://example.com/alice.png",
-      },
-    ];
-
-    expect(stripHostsForPayload(hosts)).toEqual([
-      {
-        isFixed: false,
-        userId: 1,
-        profileId: 22,
-        priority: 2,
-        weight: 100,
-        scheduleId: 10,
-        groupId: "group-1",
-        location: {
-          id: "loc-1",
-          userId: 1,
-          eventTypeId: 10,
-          type: "integrations:google:meet",
-        },
-      },
-    ]);
-  });
-});

package/src/event-types/hooks/use-event-type-form.ts

@@ -1,501 +0,0 @@
-// @ts-nocheck — the hook reshapes a very rich event-type payload (80+
-// fields, nested aiPhoneCallConfig, children, bookingFields, ...) for
-// react-hook-form. atoms' loose EventTypeSetup contract means most of
-// the reshape is implicit-any; mirroring the Prisma model here would
-// defeat the purpose of the lean SDK contract.
-
-import { zodResolver } from "@hookform/resolvers/zod";
-import { useEffect, useMemo, useState } from "react";
-import { useForm } from "react-hook-form";
-import { z } from "zod";
-import type { EventTypeSetupProps, EventTypeUpdateInput, FormValues, Host, HostInput } from "../../contracts";
-import {
-  DisableCancelRescheduleScope,
-  eventTypeBookingFields as eventTypeBookingFieldsSchema,
-} from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import type { TemplateType } from "../../vendor/cal-ai-phone";
-import { DEFAULT_BEGIN_MESSAGE, DEFAULT_PROMPT_VALUE } from "../../vendor/cal-ai-phone";
-import { stripChildrenForPayload } from "../../vendor/children-event-type";
-import { validateCustomEventName } from "../../vendor/event-naming";
-import { sortHosts } from "../../vendor/host-group-utils";
-import { validateIntervalLimitOrder } from "../../vendor/interval-limit";
-import { locationsResolver } from "../../vendor/locations-resolver";
-import { checkForMultiplePaymentApps } from "../../vendor/payments";
-import { validateBookerLayouts } from "../../vendor/validate-booker-layouts";
-
-type Fields = z.infer<typeof eventTypeBookingFieldsSchema>;
-
-export const stripHostsForPayload = (hosts: Host[] | undefined): HostInput[] | undefined => {
-  return hosts?.map(({ name: _name, avatar: _avatar, ...host }) => host);
-};
-
-export const useEventTypeForm = ({
-  eventType,
-  onSubmit,
-  onFormStateChange,
-}: {
-  eventType: EventTypeSetupProps["eventType"];
-  onSubmit: (data: EventTypeUpdateInput) => void;
-  onFormStateChange?: (formState: {
-    isDirty: boolean;
-    dirtyFields: Partial<FormValues>;
-    values: FormValues;
-  }) => void;
-}) => {
-  const { t } = useLocale();
-  const [periodDates] = useState<{ startDate: Date; endDate: Date }>({
-    startDate: new Date(eventType.periodStartDate || Date.now()),
-    endDate: new Date(eventType.periodEndDate || Date.now()),
-  });
-  // this is a nightmare to type, will do in follow up PR
-  const defaultValues: any = useMemo(() => {
-    return {
-      title: eventType.title,
-      id: eventType.id,
-      slug: eventType.slug,
-      afterEventBuffer: eventType.afterEventBuffer,
-      beforeEventBuffer: eventType.beforeEventBuffer,
-      eventName: eventType.eventName || "",
-      scheduleName: eventType.scheduleName,
-      periodDays: eventType.periodDays,
-      requiresBookerEmailVerification: eventType.requiresBookerEmailVerification,
-      seatsPerTimeSlot: eventType.seatsPerTimeSlot,
-      seatsShowAttendees: eventType.seatsShowAttendees,
-      seatsShowAvailabilityCount: eventType.seatsShowAvailabilityCount,
-      lockTimeZoneToggleOnBookingPage: eventType.lockTimeZoneToggleOnBookingPage,
-      lockedTimeZone: eventType.lockedTimeZone || null,
-      locations: eventType.locations || [],
-      destinationCalendar: eventType.destinationCalendar,
-      recurringEvent: eventType.recurringEvent || null,
-      isInstantEvent: eventType.isInstantEvent,
-      instantMeetingParameters: eventType.instantMeetingParameters || [],
-      instantMeetingExpiryTimeOffsetInSeconds: eventType.instantMeetingExpiryTimeOffsetInSeconds,
-      description: eventType.description ?? undefined,
-      schedule: eventType.schedule || undefined,
-      instantMeetingSchedule: eventType.instantMeetingSchedule || undefined,
-      bookingLimits: eventType.bookingLimits || undefined,
-      onlyShowFirstAvailableSlot: eventType.onlyShowFirstAvailableSlot || undefined,
-      durationLimits: eventType.durationLimits || undefined,
-      length: eventType.length,
-      hidden: eventType.hidden,
-      multiplePrivateLinks: eventType.hashedLink.map((link) => ({
-        link: link.link,
-        expiresAt: link.expiresAt,
-        maxUsageCount: link.maxUsageCount,
-      })),
-      eventTypeColor: eventType.eventTypeColor || null,
-      periodDates: {
-        startDate: periodDates.startDate,
-        endDate: periodDates.endDate,
-      },
-      hideCalendarNotes: eventType.hideCalendarNotes,
-      hideCalendarEventDetails: eventType.hideCalendarEventDetails,
-      offsetStart: eventType.offsetStart,
-      bookingFields: eventType.bookingFields,
-      periodType: eventType.periodType,
-      periodCountCalendarDays: !!eventType.periodCountCalendarDays,
-      schedulingType: eventType.schedulingType,
-      requiresConfirmation: eventType.requiresConfirmation,
-      canSendCalVideoTranscriptionEmails: eventType.canSendCalVideoTranscriptionEmails,
-      requiresConfirmationWillBlockSlot: eventType.requiresConfirmationWillBlockSlot,
-      requiresConfirmationForFreeEmail: eventType.requiresConfirmationForFreeEmail,
-      slotInterval: eventType.slotInterval,
-      minimumBookingNotice: eventType.minimumBookingNotice,
-      minimumRescheduleNotice: eventType.minimumRescheduleNotice ?? null,
-      disabledCancelling: eventType.disableCancelling ?? false,
-      disableCancellingScope:
-        eventType.disableCancellingScope ?? DisableCancelRescheduleScope.HOST_AND_ATTENDEE,
-      disabledRescheduling: eventType.disableRescheduling ?? false,
-      disableReschedulingScope:
-        eventType.disableReschedulingScope ?? DisableCancelRescheduleScope.HOST_AND_ATTENDEE,
-      requiresCancellationReason: eventType.requiresCancellationReason ?? null,
-      allowReschedulingPastBookings: eventType.allowReschedulingPastBookings,
-      hideOrganizerEmail: eventType.hideOrganizerEmail,
-      metadata: eventType.metadata,
-      hosts: eventType.hosts.sort((a, b) => sortHosts(a, b, eventType.isRRWeightsEnabled)),
-      // Delta-based host changes for performance - only track changes, not all 700+ hosts
-      pendingHostChanges: {
-        hostsToAdd: [],
-        hostsToUpdate: [],
-        hostsToRemove: [],
-      },
-      pendingFixedHostChanges: {
-        hostsToAdd: [],
-        hostsToUpdate: [],
-        hostsToRemove: [],
-      },
-      hostGroups: eventType.hostGroups || [],
-      successRedirectUrl: eventType.successRedirectUrl || "",
-      redirectUrlOnNoRoutingFormResponse: eventType.redirectUrlOnNoRoutingFormResponse || "",
-      forwardParamsSuccessRedirect: eventType.forwardParamsSuccessRedirect,
-      users: eventType.users,
-      useEventTypeDestinationCalendarEmail: eventType.useEventTypeDestinationCalendarEmail,
-      secondaryEmailId: eventType?.secondaryEmailId || -1,
-      children: eventType.children.map((ch) => ({
-        ...ch,
-        created: true,
-        owner: {
-          ...ch.owner,
-          eventTypeSlugs:
-            eventType.team?.members
-              .find((mem) => mem.user.id === ch.owner.id)
-              ?.user.eventTypes.map((evTy) => evTy.slug)
-              .filter((slug) => slug !== eventType.slug) ?? [],
-        },
-      })),
-      seatsPerTimeSlotEnabled: eventType.seatsPerTimeSlot,
-      autoTranslateDescriptionEnabled: eventType.autoTranslateDescriptionEnabled,
-      autoTranslateInstantMeetingTitleEnabled: eventType.autoTranslateInstantMeetingTitleEnabled ?? true,
-      rescheduleWithSameRoundRobinHost: eventType.rescheduleWithSameRoundRobinHost,
-      disableReassignment: eventType.disableReassignment ?? false,
-      assignAllTeamMembers: eventType.assignAllTeamMembers,
-      assignRRMembersUsingSegment: eventType.assignRRMembersUsingSegment,
-      rrSegmentQueryValue: eventType.rrSegmentQueryValue,
-      aiPhoneCallConfig: {
-        generalPrompt: eventType.aiPhoneCallConfig?.generalPrompt ?? DEFAULT_PROMPT_VALUE,
-        enabled: eventType.aiPhoneCallConfig?.enabled,
-        beginMessage: eventType.aiPhoneCallConfig?.beginMessage ?? DEFAULT_BEGIN_MESSAGE,
-        guestName: eventType.aiPhoneCallConfig?.guestName,
-        guestEmail: eventType.aiPhoneCallConfig?.guestEmail,
-        guestCompany: eventType.aiPhoneCallConfig?.guestCompany,
-        yourPhoneNumber: eventType.aiPhoneCallConfig?.yourPhoneNumber,
-        numberToCall: eventType.aiPhoneCallConfig?.numberToCall,
-        templateType: eventType.aiPhoneCallConfig?.templateType ?? "CUSTOM_TEMPLATE",
-        schedulerName: eventType.aiPhoneCallConfig?.schedulerName,
-      },
-      isRRWeightsEnabled: eventType.isRRWeightsEnabled,
-      maxLeadThreshold: eventType.maxLeadThreshold,
-      includeNoShowInRRCalculation: eventType.includeNoShowInRRCalculation,
-      useEventLevelSelectedCalendars: eventType.useEventLevelSelectedCalendars,
-      customReplyToEmail: eventType.customReplyToEmail || null,
-      calVideoSettings: eventType.calVideoSettings,
-      maxActiveBookingsPerBooker: eventType.maxActiveBookingsPerBooker || null,
-      maxActiveBookingPerBookerOfferReschedule: eventType.maxActiveBookingPerBookerOfferReschedule,
-      showOptimizedSlots: eventType.showOptimizedSlots ?? false,
-      enablePerHostLocations: eventType.enablePerHostLocations ?? false,
-      shouldMergePhoneSystemFields: eventType.shouldMergePhoneSystemFields,
-    };
-  }, [eventType, periodDates]);
-
-  const form = useForm<FormValues>({
-    defaultValues,
-    resolver: zodResolver(
-      z
-        .object({
-          // Length if string, is converted to a number or it can be a number
-          // Make it optional because it's not submitted from all tabs of the page
-          eventName: z
-            .string()
-            .superRefine((val, ctx) => {
-              const bookingFields: Record<string, Fields[number]["name"]> = {};
-              const _bookingFields = form.getValues("bookingFields");
-              _bookingFields.forEach(({ name }: { name: string }) => {
-                bookingFields[name] = name;
-              });
-
-              const validationResult = validateCustomEventName(val, bookingFields);
-              if (validationResult !== true) {
-                ctx.addIssue({
-                  code: z.ZodIssueCode.custom,
-                  message: t("invalid_event_name_variables", { item: validationResult }),
-                });
-              }
-            })
-            .optional(),
-          length: z.union([z.string().transform((val) => +val), z.number()]).optional(),
-          offsetStart: z.union([z.string().transform((val) => +val), z.number()]).optional(),
-          bookingFields: eventTypeBookingFieldsSchema,
-          locations: locationsResolver(t),
-          calVideoSettings: z
-            .object({
-              redirectUrlOnExit: z.string().url().nullish(),
-              disableRecordingForOrganizer: z.boolean().nullable(),
-              disableRecordingForGuests: z.boolean().nullable(),
-              enableAutomaticTranscription: z.boolean().nullable(),
-              enableAutomaticRecordingForOrganizer: z.boolean().nullable(),
-              disableTranscriptionForGuests: z.boolean().nullable(),
-              disableTranscriptionForOrganizer: z.boolean().nullable(),
-              requireEmailForGuests: z.boolean().nullable(),
-            })
-            .optional()
-            .nullable(),
-        })
-        // TODO: Add schema for other fields later.
-        .passthrough()
-    ),
-  });
-
-  const {
-    formState: { isDirty: isFormDirty, dirtyFields },
-  } = form;
-
-  // Watch all form values to trigger onFormStateChange on any change
-  const watchedValues = form.watch();
-
-  const isObject = <T>(value: T): boolean => {
-    return value !== null && typeof value === "object" && !Array.isArray(value);
-  };
-
-  const isArray = <T>(value: T): boolean => {
-    return Array.isArray(value);
-  };
-
-  const getNestedField = (obj: typeof dirtyFields, path: string) => {
-    const keys = path.split(".");
-    let current = obj;
-
-    for (let i = 0; i < keys.length; i++) {
-      // @ts-expect-error /—— currentKey could be any deeply nested fields thanks to recursion
-      const currentKey = current[keys[i]];
-      if (currentKey === undefined) return undefined;
-      current = currentKey;
-    }
-
-    return current;
-  };
-
-  const getDirtyFields = (values: FormValues): Partial<FormValues> => {
-    if (!isFormDirty) {
-      return {};
-    }
-
-    const isFieldDirty = (fieldName: keyof FormValues) => {
-      // If the field itself is directly marked as dirty
-      if (dirtyFields[fieldName] === true) {
-        return true;
-      }
-
-      // Check if the field is an object or an array
-      const fieldValue: any = getNestedField(dirtyFields, fieldName);
-      if (isObject(fieldValue)) {
-        for (const key in fieldValue) {
-          if (fieldValue[key] === true) {
-            return true;
-          }
-
-          if (isObject(fieldValue[key]) || isArray(fieldValue[key])) {
-            const nestedFieldName = `${fieldName}.${key}` as keyof FormValues;
-            // Recursive call for nested objects or arrays
-            if (isFieldDirty(nestedFieldName)) {
-              return true;
-            }
-          }
-        }
-      }
-      if (isArray(fieldValue)) {
-        for (const element of fieldValue) {
-          // If element is an object, check each property of the object
-          if (isObject(element)) {
-            for (const key in element) {
-              if (element[key] === true) {
-                return true;
-              }
-
-              if (isObject(element[key]) || isArray(element[key])) {
-                const nestedFieldName = `${fieldName}.${key}` as keyof FormValues;
-                // Recursive call for nested objects or arrays within each element
-                if (isFieldDirty(nestedFieldName)) {
-                  return true;
-                }
-              }
-            }
-          } else if (element === true) {
-            return true;
-          }
-        }
-      }
-
-      return false;
-    };
-
-    const updatedFields: Partial<FormValues> = {};
-    Object.keys(dirtyFields).forEach((key) => {
-      const typedKey = key as keyof typeof dirtyFields;
-      updatedFields[typedKey] = undefined;
-      const isDirty = isFieldDirty(typedKey);
-      if (isDirty) {
-        // @ts-expect-error
-        updatedFields[typedKey] = values[typedKey];
-      }
-    });
-    return updatedFields;
-  };
-
-  const handleSubmit = async (values: FormValues) => {
-    const { children } = values;
-    const dirtyValues = getDirtyFields(values);
-    const dirtyFieldExists = Object.keys(dirtyValues).length !== 0;
-    const {
-      periodDates,
-      periodCountCalendarDays,
-      beforeEventBuffer,
-      afterEventBuffer,
-      seatsPerTimeSlot,
-      seatsShowAttendees,
-      seatsShowAvailabilityCount,
-      bookingLimits,
-      onlyShowFirstAvailableSlot,
-      durationLimits,
-      recurringEvent,
-      eventTypeColor,
-      customReplyToEmail,
-      locations,
-      metadata,
-      customInputs,
-      assignAllTeamMembers,
-      // We don't need to send send these values to the backend
-      seatsPerTimeSlotEnabled,
-      minimumBookingNoticeInDurationType,
-      bookerLayouts,
-      multipleDurationEnabled,
-      length,
-      ...input
-    } = dirtyValues;
-    if (length && !Number(length)) throw new Error(t("event_setup_length_error"));
-
-    const finalSeatsPerTimeSlot =
-      seatsPerTimeSlot === undefined ? eventType.seatsPerTimeSlot : seatsPerTimeSlot;
-    const finalRecurringEvent = recurringEvent === undefined ? eventType.recurringEvent : recurringEvent;
-
-    if (finalSeatsPerTimeSlot && finalRecurringEvent) {
-      throw new Error(t("recurring_event_seats_error"));
-    }
-
-    if (bookingLimits) {
-      const isValid = validateIntervalLimitOrder(bookingLimits);
-      if (!isValid) throw new Error(t("event_setup_booking_limits_error"));
-    }
-
-    if (durationLimits) {
-      const isValid = validateIntervalLimitOrder(durationLimits);
-      if (!isValid) throw new Error(t("event_setup_duration_limits_error"));
-    }
-
-    const layoutError = validateBookerLayouts(metadata?.bookerLayouts || null);
-    if (layoutError) throw new Error(t(layoutError));
-
-    if (metadata?.multipleDuration !== undefined) {
-      if (metadata?.multipleDuration.length < 1) {
-        throw new Error(t("event_setup_multiple_duration_error"));
-      } else {
-        // if length is unchanged, we skip this check
-        if (length !== undefined) {
-          if (!length && !metadata?.multipleDuration?.includes(length)) {
-            //This would work but it leaves the potential of this check being useless. Need to check against length and not eventType.length, but length can be undefined
-            throw new Error(t("event_setup_multiple_duration_default_error"));
-          }
-        }
-      }
-    }
-
-    // Prevent two payment apps to be enabled
-    // Ok to cast type here because this metadata will be updated as the event type metadata
-    if (checkForMultiplePaymentApps(metadata)) throw new Error(t("event_setup_multiple_payment_apps_error"));
-
-    if (metadata?.apps?.stripe?.paymentOption === "HOLD" && seatsPerTimeSlot) {
-      throw new Error(t("seats_and_no_show_fee_error"));
-    }
-
-    const {
-      availability,
-      users,
-      hosts,
-      scheduleName,
-      disabledCancelling,
-      disableCancellingScope,
-      disabledRescheduling,
-      disableReschedulingScope,
-      requiresCancellationReason,
-      pendingHostChanges: _phc,
-      pendingFixedHostChanges: _pfhc,
-      ...rest
-    } = input;
-    // Strip children down to only the fields the server schema expects.
-    // The full children objects contain avatar, profile, and other display-only
-    // data that bloats the request payload. With many assigned users (~85+),
-    // this can push the request body over the 1MB server limit.
-    const strippedChildren = children ? stripChildrenForPayload(children) : undefined;
-    const strippedHosts = stripHostsForPayload(hosts);
-
-    // Send delta directly to backend instead of computing full hosts array
-    const pendingHostChanges = values.pendingHostChanges;
-    const hasHostChanges =
-      pendingHostChanges &&
-      (pendingHostChanges.hostsToAdd.length > 0 ||
-        pendingHostChanges.hostsToUpdate.length > 0 ||
-        pendingHostChanges.hostsToRemove.length > 0 ||
-        pendingHostChanges.clearAllHosts ||
-        pendingHostChanges.clearAllHostLocations);
-
-    const pendingFixedHostChanges = values.pendingFixedHostChanges;
-    const hasFixedHostChanges =
-      pendingFixedHostChanges &&
-      (pendingFixedHostChanges.hostsToAdd.length > 0 ||
-        pendingFixedHostChanges.hostsToUpdate.length > 0 ||
-        pendingFixedHostChanges.hostsToRemove.length > 0 ||
-        pendingFixedHostChanges.clearAllHosts ||
-        pendingFixedHostChanges.clearAllHostLocations);
-
-    const payload = {
-      ...rest,
-      hosts: strippedHosts,
-      length,
-      locations,
-      recurringEvent,
-      periodStartDate: periodDates?.startDate,
-      periodEndDate: periodDates?.endDate,
-      periodCountCalendarDays,
-      id: eventType.id,
-      beforeEventBuffer,
-      afterEventBuffer,
-      bookingLimits,
-      onlyShowFirstAvailableSlot,
-      durationLimits,
-      eventTypeColor,
-      customReplyToEmail,
-      seatsPerTimeSlot,
-      seatsShowAttendees,
-      seatsShowAvailabilityCount,
-      metadata,
-      customInputs,
-      children: strippedChildren,
-      assignAllTeamMembers,
-      pendingHostChanges: hasHostChanges ? pendingHostChanges : undefined,
-      pendingFixedHostChanges: hasFixedHostChanges ? pendingFixedHostChanges : undefined,
-      multiplePrivateLinks: values.multiplePrivateLinks,
-      disableCancelling: disabledCancelling,
-      disableCancellingScope,
-      disableRescheduling: disabledRescheduling,
-      disableReschedulingScope,
-      requiresCancellationReason,
-      aiPhoneCallConfig: rest.aiPhoneCallConfig
-        ? { ...rest.aiPhoneCallConfig, templateType: rest.aiPhoneCallConfig.templateType as TemplateType }
-        : undefined,
-    } satisfies EventTypeUpdateInput;
-    // Filter out undefined values
-    const filteredPayload = Object.entries(payload).reduce((acc, [key, value]) => {
-      if (value !== undefined) {
-        // @ts-expect-error Element implicitly has any type
-        acc[key] = value;
-      }
-      return acc;
-    }, {}) as EventTypeUpdateInput;
-
-    if (dirtyFieldExists) {
-      onSubmit({ ...filteredPayload, id: eventType.id });
-    }
-  };
-
-  useEffect(() => {
-    if (onFormStateChange) {
-      onFormStateChange({
-        isDirty: isFormDirty,
-        dirtyFields: dirtyFields as Partial<FormValues>,
-        values: watchedValues,
-      });
-    }
-  }, [isFormDirty, dirtyFields, watchedValues, onFormStateChange]);
-
-  return { form, handleSubmit };
-};