fix: Add onFormStateChange callback on EventTypeSettings atom [CAL-5856] (calcom#21615)

* Adds onFormStateChange callback on EventTypeSettings atom

* updated docs for event-type

* added watch all form values

---------

Co-authored-by: Morgan <33722304+ThyMinimalDev@users.noreply.github.com>

Author: weknowyourgame

docs/platform/atoms/event-type.mdx

@@ -131,6 +131,10 @@ export function EventTypeTabs(eventTypeId: number) {
         onSuccess={(eventType) => {
           console.log("EventType settings updated successfully", eventType);
         }}
+        onFormStateChange={(formState) => {
+          console.log("Form state changed:", formState);
+          // Access form data: formState.isDirty, formState.dirtyFields, formState.values
+        }}
         customClassNames={{ atomsWrapper: "!w-[70vw] !m-auto" }}
       />
     </>
@@ -175,6 +179,7 @@ Below is a list of props that can be passed to the event type settings atom.
 | tabs | No       | The tabs you want the event type settings to display                                                  |  
 | onSuccess | No       | Callback function that triggers when the event type is successfully updated                                              |
 | onError   | No       | Callback function to handles errors at the time of event type update |
+| onFormStateChange | No       | Callback function that triggers when the form state changes, providing access to isDirty, dirtyFields, and current form values |
 | onDeleteSuccess | No       | Callback function that triggers when the event type is successfully deleted                                                     |
 | onDeleteError | No       | Callback function that handles errors at the time of event type deletion |                                                   |
 | allowDelete | No       | Boolean value that determines whether the delete button is displayed or not                                                     |

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

@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -27,9 +27,15 @@ type Fields = z.infer<typeof eventTypeBookingFieldsSchema>;
 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 }>({
@@ -181,6 +187,19 @@ export const useEventTypeForm = ({
     formState: { isDirty: isFormDirty, dirtyFields },
   } = form;
 
+  // Watch all form values to trigger onFormStateChange on any change
+  const watchedValues = form.watch();
+
+  useEffect(() => {
+    if (onFormStateChange) {
+      onFormStateChange({
+        isDirty: isFormDirty,
+        dirtyFields: dirtyFields as Partial<FormValues>,
+        values: watchedValues,
+      });
+    }
+  }, [isFormDirty, watchedValues, onFormStateChange]);
+
   const isObject = <T>(value: T): boolean => {
     return value !== null && typeof value === "object" && !Array.isArray(value);
   };

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

@@ -57,6 +57,11 @@ export type EventTypePlatformWrapperProps = {
   customClassNames?: EventTypeCustomClassNames;
   disableToasts?: boolean;
   isDryRun?: boolean;
+  onFormStateChange?: (formState: {
+    isDirty: boolean;
+    dirtyFields: Partial<FormValues>;
+    values: FormValues;
+  }) => void;
 };
 
 const EventType = ({
@@ -70,6 +75,7 @@ const EventType = ({
   customClassNames,
   disableToasts = false,
   isDryRun = false,
+  onFormStateChange,
   ...props
 }: EventTypeSetupProps & EventTypePlatformWrapperProps) => {
   const { t } = useLocale();
@@ -150,6 +156,7 @@ const EventType = ({
         toast({ description: t("event_type_updated_successfully", { eventTypeTitle: eventType.title }) });
       }
     },
+    onFormStateChange: onFormStateChange,
   });
   const slug = form.watch("slug") ?? eventType.slug;
 
@@ -320,6 +327,7 @@ export const EventTypePlatformWrapper = ({
   allowDelete = true,
   customClassNames,
   isDryRun,
+  onFormStateChange,
 }: EventTypePlatformWrapperProps) => {
   const { data: eventTypeQueryData } = useAtomsEventTypeById(id);
   const queryClient = useQueryClient();
@@ -352,6 +360,7 @@ export const EventTypePlatformWrapper = ({
       allowDelete={allowDelete}
       customClassNames={customClassNames}
       isDryRun={isDryRun}
+      onFormStateChange={onFormStateChange}
     />
   );
 };