feat: OnformChange on Availability Settings Atom (#21560)

* feat: OnformChange on Availability Settings Atom

* docs: update availability-settings

* Update docs/platform/atoms/availability-settings.mdx

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

---------

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

docs/platform/atoms/availability-settings.mdx

@@ -25,6 +25,10 @@ export default function Availability() {
           onDeleteSuccess={() => {
             console.log("Deleted schedule successfully");
           }}
+          onFormStateChange={(formState) => {
+            console.log("Form state updated");
+            // Access form data: formState.name, formState.schedule, formState.timeZone, etc.
+          }}
        />
     </>
   )
@@ -63,6 +67,10 @@ export default function Availability() {
           onDeleteSuccess={() => {
             console.log("Deleted schedule successfully");
           }}
+          onFormStateChange={(formState) => {
+            console.log("Form state changed:", formState);
+            // Access form data including dateOverrides: formState.dateOverrides
+          }}
        />
     </>
   )
@@ -99,6 +107,7 @@ Below is a list of props that can be passed to the availability settings atom.
 | onUpdateError      | No       | A callback function that gets triggered when the user availability fails to update                        |
 | onDeleteSuccess    | No       | A callback function that gets triggered when the user availability is deleted successfully                |
 | onDeleteError      | No       | A callback function that gets triggered when the user availability fails to delete                        |
+| onFormStateChange  | No       | A callback function that gets triggered whenever the form state changes, providing real-time access to form data |
 | enableOverrides    | No       | Allows user to enable or disable date overrides display in the atom; defaults to disabled                 |
 | disableEditableHeading    | No       | Prevents users from editing the heading               |
 | allowDelete      | No       | When set to false, this prop hides the delete button                        |

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { SetStateAction, Dispatch } from "react";
-import { useMemo, useState } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { Controller, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
@@ -103,6 +103,7 @@ type AvailabilitySettingsProps = {
   customClassNames?: CustomClassNames;
   disableEditableHeading?: boolean;
   enableOverrides?: boolean;
+  onFormStateChange?: (formState: AvailabilityFormValues) => void;
   bulkUpdateModalProps?: {
     isOpen: boolean;
     setIsOpen: Dispatch<SetStateAction<boolean>>;
@@ -275,6 +276,7 @@ export function AvailabilitySettings({
   customClassNames,
   disableEditableHeading = false,
   enableOverrides = false,
+  onFormStateChange,
   bulkUpdateModalProps,
   allowSetToDefault = true,
   allowDelete = true,
@@ -289,6 +291,17 @@ export function AvailabilitySettings({
     },
   });
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
+  // Trigger callback whenever the form state changes
+  useEffect(() => {
+    if (onFormStateChange && watchedValues) {
+      onFormStateChange(watchedValues as AvailabilityFormValues);
+    }
+  }, [watchedValues, onFormStateChange]);
+
   const [Shell, Schedule, TimezoneSelect] = useMemo(() => {
     return isPlatform
       ? [PlatformShell, PlatformSchedule, PlatformTimzoneSelect]

packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx

@@ -35,6 +35,7 @@ type AvailabilitySettingsPlatformWrapperProps = {
   disableEditableHeading?: boolean;
   enableOverrides?: boolean;
   onBeforeUpdate?: (updateBody: UpdateScheduleInput_2024_06_11) => boolean | Promise<boolean>;
+  onFormStateChange?: (formState: AvailabilityFormValues) => void;
   allowDelete?: boolean;
   allowSetToDefault?: boolean;
   disableToasts?: boolean;
@@ -52,6 +53,7 @@ export const AvailabilitySettingsPlatformWrapper = ({
   disableEditableHeading = false,
   enableOverrides = false,
   onBeforeUpdate,
+  onFormStateChange,
   allowDelete,
   allowSetToDefault,
   disableToasts,
@@ -186,6 +188,7 @@ export const AvailabilitySettingsPlatformWrapper = ({
         customClassNames={customClassNames}
         allowDelete={allowDelete}
         allowSetToDefault={allowSetToDefault}
+        onFormStateChange={onFormStateChange}
       />
     </AtomsWrapper>
   );