({
name: "dateOverrides",
});
+ const { getValues } = useFormContext();
const excludedDates = fields.map((field) => dayjs(field.ranges[0].start).utc().format("YYYY-MM-DD"));
const { t } = useLocale();
+
+ const handleAvailabilityUpdate = async () => {
+ const updatedValues = getValues() as AvailabilityFormValues;
+ handleSubmit(updatedValues);
+ };
return (
@@ -67,12 +81,16 @@ const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]
hour12={Boolean(userTimeFormat === 12)}
workingHours={workingHours}
userTimeFormat={userTimeFormat}
+ handleAvailabilityUpdate={handleAvailabilityUpdate}
/>
ranges.forEach((range) => append({ ranges: [range] }))}
+ onChange={(ranges) => {
+ ranges.forEach((range) => append({ ranges: [range] }));
+ handleAvailabilityUpdate();
+ }}
Trigger={
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index c8549b5122..5de532edcb 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -2,7 +2,7 @@
import type { SetStateAction, Dispatch } from "react";
import { useMemo, useState } from "react";
-import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
+import { Controller, useFieldArray, useForm, useFormContext, useWatch } from "react-hook-form";
import dayjs from "@calcom/dayjs";
import type {
@@ -178,18 +178,27 @@ const DateOverride = ({
travelSchedules,
weekStart,
overridesModalClassNames,
+ handleSubmit,
}: {
workingHours: WorkingHours[];
userTimeFormat: number | null;
travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
weekStart: 0 | 1 | 2 | 3 | 4 | 5 | 6;
overridesModalClassNames?: string;
+ handleSubmit: (data: AvailabilityFormValues) => Promise;
}) => {
const { append, replace, fields } = useFieldArray({
name: "dateOverrides",
});
+ const { getValues } = useFormContext();
const excludedDates = useExcludedDates();
const { t } = useLocale();
+
+ const handleAvailabilityUpdate = () => {
+ const updatedValues = getValues() as AvailabilityFormValues;
+ handleSubmit(updatedValues);
+ };
+
return (
@@ -211,12 +220,16 @@ const DateOverride = ({
userTimeFormat={userTimeFormat}
hour12={Boolean(userTimeFormat === 12)}
travelSchedules={travelSchedules}
+ handleAvailabilityUpdate={handleAvailabilityUpdate}
/>
ranges.forEach((range) => append({ ranges: [range] }))}
+ onChange={(ranges) => {
+ ranges.forEach((range) => append({ ranges: [range] }));
+ handleAvailabilityUpdate();
+ }}
userTimeFormat={userTimeFormat}
weekStart={weekStart}
Trigger={
@@ -569,6 +582,7 @@ export function AvailabilitySettings({
{
fields={fieldArrayResult.current.fields}
replace={fieldArrayResult.current.replace}
workingHours={[]}
+ handleAvailabilityUpdate={noop}
/>
@@ -87,6 +90,7 @@ describe("DateOverrideList", () => {
fields={fieldArrayResult.current.fields}
replace={fieldArrayResult.current.replace}
workingHours={[]}
+ handleAvailabilityUpdate={noop}
/>