diff --git a/docs/platform/atoms/event-type.mdx b/docs/platform/atoms/event-type.mdx index 04a8017f33..850599da07 100644 --- a/docs/platform/atoms/event-type.mdx +++ b/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 | diff --git a/packages/platform/atoms/event-types/hooks/useEventTypeForm.ts b/packages/platform/atoms/event-types/hooks/useEventTypeForm.ts index 42fb485d5c..8dcdd5c3f5 100644 --- a/packages/platform/atoms/event-types/hooks/useEventTypeForm.ts +++ b/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; export const useEventTypeForm = ({ eventType, onSubmit, + onFormStateChange, }: { eventType: EventTypeSetupProps["eventType"]; onSubmit: (data: EventTypeUpdateInput) => void; + onFormStateChange?: (formState: { + isDirty: boolean; + dirtyFields: Partial; + 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, + values: watchedValues, + }); + } + }, [isFormDirty, watchedValues, onFormStateChange]); + const isObject = (value: T): boolean => { return value !== null && typeof value === "object" && !Array.isArray(value); }; diff --git a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx b/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx index f27cb4bc94..162b82f1e6 100644 --- a/packages/platform/atoms/event-types/wrappers/EventTypePlatformWrapper.tsx +++ b/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; + 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} /> ); };