diff --git a/docs/platform/atoms/availability-settings.mdx b/docs/platform/atoms/availability-settings.mdx index 76230eb750..d792b09a8c 100644 --- a/docs/platform/atoms/availability-settings.mdx +++ b/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 | diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx index abacc00626..bb979bc73a 100644 --- a/packages/platform/atoms/availability/AvailabilitySettings.tsx +++ b/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>; @@ -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] diff --git a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx b/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx index 121944280b..2ea3443816 100644 --- a/packages/platform/atoms/availability/wrappers/AvailabilitySettingsPlatformWrapper.tsx +++ b/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; + 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} /> );