feat: Change 'add override' to 'save override' (#17434)

* feat: Change 'add override' to 'save override' * fix: type check * fix: type check * autosave in availability edit sheet * remove unused translation key * added requested changes * added requested changes --------- Co-authored-by: Prashant Varma <prashantvarma5083@gmail.com> Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
2024-12-11 21:20:42 +00:00
1 parent 1de007ad21
commit 5e8d994ac1
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "غير متاح طوال اليوم",
  "date_overrides_mark_all_day_unavailable_one": "وصغ علامة غير متاح (طوال اليوم)",
  "date_overrides_mark_all_day_unavailable_other": "وضع علامة غير متاح على التواريخ المحددة",
-  "date_overrides_add_btn": "إضافة تجاوز",
  "date_overrides_update_btn": "تحديث التجاوز",
  "date_successfully_added": "تم إضافة تخطّي التاريخ بنجاح",
  "event_type_duplicate_copy_text": "{{slug}}-نسخ",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Bütün gün mövcud deyil",
  "date_overrides_mark_all_day_unavailable_one": "Bütün gün üçün əlçatan deyil olaraq işarələ",
  "date_overrides_mark_all_day_unavailable_other": "Seçilmiş tarixlərdə əlçatan deyil olaraq işarələ",
-  "date_overrides_add_btn": "Dəyişiklik əlavə et",
  "date_overrides_update_btn": "Dəyişikliyi yenilə",
  "date_successfully_added": "Tarix dəyişikliyi uğurla əlavə edildi",
  "event_type_duplicate_copy_text": "{{slug}}-nüsxə",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Nedostupnost celý den",
  "date_overrides_mark_all_day_unavailable_one": "Zadat nedostupnost (celý den)",
  "date_overrides_mark_all_day_unavailable_other": "Zadat nedostupnost ve vybraných datech",
-  "date_overrides_add_btn": "Přidat změnu",
  "date_overrides_update_btn": "Aktualizovat změnu",
  "date_successfully_added": "Přidána změna dnů",
  "event_type_duplicate_copy_text": "{{slug}} – kopie",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Utilgængelig hele dagen",
  "date_overrides_mark_all_day_unavailable_one": "Markér utilgængelig (hele dagen)",
  "date_overrides_mark_all_day_unavailable_other": "Markér utilgængelig på valgte datoer",
-  "date_overrides_add_btn": "Tilføj Tilsidesæt",
  "date_overrides_update_btn": "Opdatér Tilsidesæt",
  "date_successfully_added": "Datooverstyring tilføjet med succes",
  "event_type_duplicate_copy_text": "{{slug}}-kopi",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Ganztägig nicht verfügbar",
  "date_overrides_mark_all_day_unavailable_one": "Als nicht verfügbar markieren (Ganztägig)",
  "date_overrides_mark_all_day_unavailable_other": "An ausgewählten Daten als „nicht verfügbar“ markieren",
-  "date_overrides_add_btn": "Überschreibung hinzufügen",
  "date_overrides_update_btn": "Überschreiben aktualisieren",
  "date_successfully_added": "Datumsüberbrückung erfolgreich hinzugefügt",
  "event_type_duplicate_copy_text": "{{slug}}-Kopie",
@@ -1822,9 +1822,9 @@
  "date_overrides_unavailable": "Unavailable all day",
  "date_overrides_mark_all_day_unavailable_one": "Mark unavailable (All day)",
  "date_overrides_mark_all_day_unavailable_other": "Mark unavailable on selected dates",
-  "date_overrides_add_btn": "Add Override",
  "date_overrides_update_btn": "Update Override",
  "date_successfully_added": "Date override added successfully",
+  "date_overrides_save_btn": "Save Override",
  "event_type_duplicate_copy_text": "{{slug}}-copy",
  "set_as_default": "Set as default",
  "hide_eventtype_details": "Hide event type details",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "No disponible todo el día",
  "date_overrides_mark_all_day_unavailable_one": "Marcar como no disponible (Todo el día)",
  "date_overrides_mark_all_day_unavailable_other": "Marcar como no disponible en las fechas seleccionadas",
-  "date_overrides_add_btn": "Agregar excepción",
  "date_overrides_update_btn": "Actualizar excepción",
  "date_successfully_added": "Excepción de fecha agregada con éxito",
  "event_type_duplicate_copy_text": "{{slug}}-copia",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "No disponible todo el día",
  "date_overrides_mark_all_day_unavailable_one": "Marcar como no disponible (Todo el día)",
  "date_overrides_mark_all_day_unavailable_other": "Marcar como no disponible en las fechas seleccionadas",
-  "date_overrides_add_btn": "Agregar anulación",
  "date_overrides_update_btn": "Actualizar anulación",
  "date_successfully_added": "Sustitución de fechas añadida correctamente",
  "event_type_duplicate_copy_text": "{{slug}}-copia",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Pole saadaval terve päeva",
  "date_overrides_mark_all_day_unavailable_one": "Märgi kättesaamatuks (kogu päev)",
  "date_overrides_mark_all_day_unavailable_other": "Märgi valitud kuupäevadel kättesaamatuks",
-  "date_overrides_add_btn": "Lisa alistamine",
  "date_overrides_update_btn": "Uuenduste tühistamine",
  "date_successfully_added": "Kuupäeva alistamine edukalt lisatud",
  "event_type_duplicate_copy_text": "{{slug}}-copy",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Indisponible toute la journée",
  "date_overrides_mark_all_day_unavailable_one": "Marquer comme indisponible (toute la journée)",
  "date_overrides_mark_all_day_unavailable_other": "Marquer comme indisponible aux dates sélectionnées",
-  "date_overrides_add_btn": "Ajouter la superposition",
  "date_overrides_update_btn": "Mettre à jour la superposition",
  "date_successfully_added": "Ajout du remplacement de date réussi",
  "event_type_duplicate_copy_text": "{{slug}}-copie",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "לא זמין/ה במשך כל היום",
  "date_overrides_mark_all_day_unavailable_one": "סימון אי-זמינות (של יום שלם)",
  "date_overrides_mark_all_day_unavailable_other": "סימון אי-זמינות בתאריכים מסוימים",
-  "date_overrides_add_btn": "הוספת מעקף",
  "date_overrides_update_btn": "עדכון מעקף",
  "date_successfully_added": "עקיפת תאריך נוספה בהצלחה",
  "event_type_duplicate_copy_text": "{{slug}}-עותק",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Egész nap nem elérhető",
  "date_overrides_mark_all_day_unavailable_one": "Megjelölés elérhetetlennek (egész nap)",
  "date_overrides_mark_all_day_unavailable_other": "Jelölje meg nem elérhetőnek a kiválasztott dátumokon",
-  "date_overrides_add_btn": "Felülbírálás hozzáadása",
  "date_overrides_update_btn": "Felülbírálás frissítése",
  "date_successfully_added": "A dátum felülbírálása sikeresen hozzáadva",
  "event_type_duplicate_copy_text": "{{slug}}-másolat",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Non disponibile, per tutto il giorno",
  "date_overrides_mark_all_day_unavailable_one": "Segna come non disponibile (tutto il giorno)",
  "date_overrides_mark_all_day_unavailable_other": "Segna come non disponibile nelle date selezionate",
-  "date_overrides_add_btn": "Aggiungi configurazione data specifica",
  "date_overrides_update_btn": "Aggiorna configurazione data specifica",
  "date_successfully_added": "Configurazione delle date aggiunta correttamente",
  "event_type_duplicate_copy_text": "{{slug}}-copia",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "終日参加不可",
  "date_overrides_mark_all_day_unavailable_one": "(終日) 参加不可としてマーク",
  "date_overrides_mark_all_day_unavailable_other": "選択した日付を参加不可としてマーク",
-  "date_overrides_add_btn": "上書きを追加",
  "date_overrides_update_btn": "上書きを更新",
  "date_successfully_added": "日付の上書きが正常に追加されました",
  "event_type_duplicate_copy_text": "{{slug}}-copy",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "មិនអាចប្រើបានពេញមួយថ្ងៃ",
  "date_overrides_mark_all_day_unavailable_one": "សម្គាល់មិនអាចប្រើបាន (ពេញមួយថ្ងៃ)",
  "date_overrides_mark_all_day_unavailable_other": "សម្គាល់មិនអាចប្រើបាននៅកាលបរិច្ឆេទដែលបានជ្រើស",
-  "date_overrides_add_btn": "បន្ថែមបដិសេធ",
  "date_overrides_update_btn": "ធ្វើបច្ចុប្បន្នភាពបដិសេធ",
  "date_successfully_added": "បដិសេធកាលបរិច្ឆេទត្រូវបានបន្ថែមដោយជោគជ័យ",
  "event_type_duplicate_copy_text": "{{slug}}-ចម្លង",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "하루 종일 이용 불가",
  "date_overrides_mark_all_day_unavailable_one": "이용 불가로 표시(하루 종일)",
  "date_overrides_mark_all_day_unavailable_other": "선택 날짜에 이용 불가로 표시",
-  "date_overrides_add_btn": "재정의 추가",
  "date_overrides_update_btn": "재정의 업데이트",
  "date_successfully_added": "날짜 재정의가 추가되었습니다",
  "event_type_duplicate_copy_text": "{{slug}}-카피",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Hele dag niet beschikbaar",
  "date_overrides_mark_all_day_unavailable_one": "Markeren als niet beschikbaar (hele dag)",
  "date_overrides_mark_all_day_unavailable_other": "Markeren als niet beschikbaar op geselecteerde datums",
-  "date_overrides_add_btn": "Overschrijving toevoegen",
  "date_overrides_update_btn": "Overschrijving bijwerken",
  "date_successfully_added": "Datumoverschrijing toegevoegd",
  "event_type_duplicate_copy_text": "{{slug}}-kopie",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Utilgjengelig hele dagen",
  "date_overrides_mark_all_day_unavailable_one": "Merk som utilgjengelig (hele dagen)",
  "date_overrides_mark_all_day_unavailable_other": "Merk som utilgjengelig på valgte datoer",
-  "date_overrides_add_btn": "Legg til Overstyring",
  "date_overrides_update_btn": "Oppdater Overstyring",
  "date_successfully_added": "Dato overstyring lagt til",
  "event_type_duplicate_copy_text": "{{slug}}-kopi",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Niedostępność przez cały dzień",
  "date_overrides_mark_all_day_unavailable_one": "Zaznacz niedostępność (cały dzień)",
  "date_overrides_mark_all_day_unavailable_other": "Zaznacz niedostępność w wybrane dni",
-  "date_overrides_add_btn": "Dodaj zastąpienie",
  "date_overrides_update_btn": "Zaktualizuj zastąpienie",
  "date_successfully_added": "Pomyślnie dodano nadpisanie daty",
  "event_type_duplicate_copy_text": "{{slug}}-kopia",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Indisponível o dia todo",
  "date_overrides_mark_all_day_unavailable_one": "Marcar indisponível (o dia todo)",
  "date_overrides_mark_all_day_unavailable_other": "Marcar indisponível nas datas selecionadas",
-  "date_overrides_add_btn": "Adicionar substituição",
  "date_overrides_update_btn": "Atualizar substituição",
  "date_successfully_added": "Substituição de data adicionada com sucesso",
  "event_type_duplicate_copy_text": "Cópia de {{slug}}",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Indisponível o dia todo",
  "date_overrides_mark_all_day_unavailable_one": "Marcar como não disponível (o dia todo)",
  "date_overrides_mark_all_day_unavailable_other": "Marcar como não disponível em datas específicas",
-  "date_overrides_add_btn": "Adicionar sobreposição",
  "date_overrides_update_btn": "Atualizar sobreposição",
  "date_successfully_added": "Sobreposição de data adicionada com sucesso",
  "event_type_duplicate_copy_text": "cópia de {{slug}}",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Indisponibil/ă toată ziua",
  "date_overrides_mark_all_day_unavailable_one": "Marchează ca indisponibilă (Toată ziua)",
  "date_overrides_mark_all_day_unavailable_other": "Marchează datele selectate ca indisponibile",
-  "date_overrides_add_btn": "Adaugă suprascriere",
  "date_overrides_update_btn": "Actualizează suprascrierea",
  "date_successfully_added": "Suprascriere dată adăugată cu succes",
  "event_type_duplicate_copy_text": "{{slug}}-copie",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Занят(а) весь день",
  "date_overrides_mark_all_day_unavailable_one": "Отметить, что я занят(а) (весь день)",
  "date_overrides_mark_all_day_unavailable_other": "Отметить, что я занят(а) в выбранные даты",
-  "date_overrides_add_btn": "Добавить переопределение",
  "date_overrides_update_btn": "Обновить переопределение",
  "date_successfully_added": "Переопределения даты успешно добавлено",
  "event_type_duplicate_copy_text": "{{slug}}-копия",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Nedostupno celog dana",
  "date_overrides_mark_all_day_unavailable_one": "Označi kao nedostupno (Ceo dan)",
  "date_overrides_mark_all_day_unavailable_other": "Označi kao nedostupno za sledeće datume",
-  "date_overrides_add_btn": "Dodaj zamenu",
  "date_overrides_update_btn": "Ažuriraj zamenu",
  "date_successfully_added": "Datum zamene je uspešno dodat",
  "event_type_duplicate_copy_text": "{{slug}}-kopija",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Otillgänglig hela dagen",
  "date_overrides_mark_all_day_unavailable_one": "Markera som otillgänglig (hela dagen)",
  "date_overrides_mark_all_day_unavailable_other": "Markera som otillgänglig på valda datum",
-  "date_overrides_add_btn": "Lägg till åsidosättning",
  "date_overrides_update_btn": "Uppdatera åsidosättning",
  "date_successfully_added": "Åsidosättande av datum har lagts till",
  "event_type_duplicate_copy_text": "{{slug}}-kopia",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Tüm gün müsait değil",
  "date_overrides_mark_all_day_unavailable_one": "Müsait değil olarak işaretle (Tüm gün)",
  "date_overrides_mark_all_day_unavailable_other": "Seçili tarihlerde müsait değil olarak işaretle",
-  "date_overrides_add_btn": "Üzerine Yazma Ekle",
  "date_overrides_update_btn": "Üzerine Yazmayı Güncelle",
  "date_successfully_added": "Veri üzerine yazma başarıyla eklendi",
  "event_type_duplicate_copy_text": "{{slug}}-kopya",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Недоступний(-а) увесь день",
  "date_overrides_mark_all_day_unavailable_one": "Позначити недоступним(-ою) (увесь день)",
  "date_overrides_mark_all_day_unavailable_other": "Позначити недоступним(-ою) у вибрані дати",
-  "date_overrides_add_btn": "Додати перевизначення",
  "date_overrides_update_btn": "Оновити перевизначення",
  "date_successfully_added": "Перевизначену дату додано",
  "event_type_duplicate_copy_text": "{{slug}} (копія)",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "Bận cả ngày",
  "date_overrides_mark_all_day_unavailable_one": "Đánh dấu bận (Cả ngày)",
  "date_overrides_mark_all_day_unavailable_other": "Đánh dấu bận trong một số ngày đã chọn",
-  "date_overrides_add_btn": "Thêm ngày ghi đè",
  "date_overrides_update_btn": "Cập nhận ngày ghi đè",
  "date_successfully_added": "Đã thêm thành công phần ghi đè ngày",
  "event_type_duplicate_copy_text": "{{slug}}-bansao",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "全天不可预约",
  "date_overrides_mark_all_day_unavailable_one": "标记不可预约的时间 (全天)",
  "date_overrides_mark_all_day_unavailable_other": "在选定日期标记不可预约的时间",
-  "date_overrides_add_btn": "添加替代",
  "date_overrides_update_btn": "更新替代",
  "date_successfully_added": "日期替代已成功添加",
  "event_type_duplicate_copy_text": "{{slug}}-复制",
@@ -1821,7 +1821,6 @@
  "date_overrides_unavailable": "全天不開放",
  "date_overrides_mark_all_day_unavailable_one": "標示不開放 (全天)",
  "date_overrides_mark_all_day_unavailable_other": "將所選日期標示不開放",
-  "date_overrides_add_btn": "新增覆寫",
  "date_overrides_update_btn": "更新覆寫",
  "date_successfully_added": "日期覆寫已成功新增",
  "event_type_duplicate_copy_text": "{{slug}}-複製",
@@ -186,7 +186,7 @@ const DateOverrideForm = ({
                }}
                disabled={selectedDates.length === 0}
                data-testid="add-override-submit-btn">
-                {value ? t("date_overrides_update_btn") : t("date_overrides_add_btn")}
+                {value ? t("date_overrides_update_btn") : t("date_overrides_save_btn")}
              </Button>
              <DialogClose />
            </div>
@@ -1,3 +1,5 @@
+import { noop } from "@tanstack/react-table";
+
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -20,6 +22,7 @@ const DateOverrideList = ({
  replace,
  fields,
  weekStart = 0,
+  handleAvailabilityUpdate = noop,
 }: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  replace: any;
@@ -30,6 +33,7 @@ const DateOverrideList = ({
  hour12: boolean;
  travelSchedules?: RouterOutputs["viewer"]["getTravelSchedules"];
  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  handleAvailabilityUpdate?: VoidFunction;
 }) => {
  const { t, i18n } = useLocale();

@@ -94,6 +98,7 @@ const DateOverrideList = ({
                // update has very weird side-effects with sorting.
                replace([...fields.filter((currentItem) => currentItem.id !== item.id), { ranges }]);
                delete unsortedFieldArrayMap[item.id];
+                handleAvailabilityUpdate();
              }}
              Trigger={
                <DialogTrigger asChild>
@@ -124,6 +129,7 @@ const DateOverrideList = ({
                StartIcon="trash-2"
                onClick={() => {
                  replace([...fields.filter((currentItem) => currentItem.id !== item.id)]);
+                  handleAvailabilityUpdate();
                }}
              />
            </Tooltip>
@@ -1,4 +1,4 @@
-import { useFieldArray, useForm } from "react-hook-form";
+import { useFieldArray, useForm, useFormContext } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
@@ -48,14 +48,28 @@ const useSettings = () => {
  };
 };

-const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]; disabled?: boolean }) => {
+const DateOverride = ({
+  workingHours,
+  disabled,
+  handleSubmit,
+}: {
+  workingHours: WorkingHours[];
+  disabled?: boolean;
+  handleSubmit: (data: AvailabilityFormValues) => void;
+}) => {
  const { userTimeFormat } = useSettings();

  const { append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
    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 (
    <div className="">
      <Label>{t("date_overrides")}</Label>
@@ -67,12 +81,16 @@ const DateOverride = ({ workingHours, disabled }: { workingHours: WorkingHours[]
          hour12={Boolean(userTimeFormat === 12)}
          workingHours={workingHours}
          userTimeFormat={userTimeFormat}
+          handleAvailabilityUpdate={handleAvailabilityUpdate}
        />
        <DateOverrideInputDialog
          userTimeFormat={userTimeFormat}
          workingHours={workingHours}
          excludedDates={excludedDates}
-          onChange={(ranges) => ranges.forEach((range) => append({ ranges: [range] }))}
+          onChange={(ranges) => {
+            ranges.forEach((range) => append({ ranges: [range] }));
+            handleAvailabilityUpdate();
+          }}
          Trigger={
            <Button color="secondary" StartIcon="plus" data-testid="add-override" disabled={disabled}>
              {t("add_an_override")}
@@ -120,7 +138,6 @@ export function AvailabilityEditSheetForm(props: Props & { data: Data; isPending
    onSuccess: async () => {
      await utils.viewer.availability.listTeam.invalidate();
      showToast(t("success"), "success");
-      props.onOpenChange(false);
    },
    onError: (err) => {
      if (err instanceof HttpError) {
@@ -140,19 +157,23 @@ export function AvailabilityEditSheetForm(props: Props & { data: Data; isPending

  const watchTimezone = form.watch("timeZone");

+  const handleSubmit = ({ dateOverrides, ...values }: AvailabilityFormValues) => {
+    updateMutation.mutate({
+      scheduleId: data.id,
+      dateOverrides: dateOverrides.flatMap((override) => override.ranges),
+      ...values,
+    });
+  };
+
  return (
    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
      <Form
        form={form}
        id="availability-form"
-        handleSubmit={async ({ dateOverrides, ...values }) => {
+        handleSubmit={async (data) => {
          // Just blocking on a UI side -> Backend will also do the validation
          if (!hasEditPermission) return;
-          updateMutation.mutate({
-            scheduleId: data.id,
-            dateOverrides: dateOverrides.flatMap((override) => override.ranges),
-            ...values,
-          });
+          handleSubmit(data);
        }}>
        <SheetContent>
          <SheetHeader>
@@ -205,6 +226,7 @@ export function AvailabilityEditSheetForm(props: Props & { data: Data; isPending
                <DateOverride
                  workingHours={data.workingHours}
                  disabled={!hasEditPermission || !data.hasDefaultSchedule}
+                  handleSubmit={handleSubmit}
                />
              )}
            </div>
@@ -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<void>;
 }) => {
  const { append, replace, fields } = useFieldArray<AvailabilityFormValues, "dateOverrides">({
    name: "dateOverrides",
  });
+  const { getValues } = useFormContext();
  const excludedDates = useExcludedDates();
  const { t } = useLocale();
+
+  const handleAvailabilityUpdate = () => {
+    const updatedValues = getValues() as AvailabilityFormValues;
+    handleSubmit(updatedValues);
+  };
+
  return (
    <div className="p-6">
      <h3 className="text-emphasis font-medium leading-6">
@@ -211,12 +220,16 @@ const DateOverride = ({
          userTimeFormat={userTimeFormat}
          hour12={Boolean(userTimeFormat === 12)}
          travelSchedules={travelSchedules}
+          handleAvailabilityUpdate={handleAvailabilityUpdate}
        />
        <DateOverrideInputDialog
          className={overridesModalClassNames}
          workingHours={workingHours}
          excludedDates={excludedDates}
-          onChange={(ranges) => 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({
              <DateOverride
                workingHours={schedule.workingHours}
                userTimeFormat={timeFormat}
+                handleSubmit={handleSubmit}
                travelSchedules={travelSchedules}
                weekStart={
                  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
@@ -1,5 +1,7 @@
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { render, renderHook, screen } from "@testing-library/react";
+// eslint-disable-next-line no-restricted-imports
+import { noop } from "lodash";
 import { useFieldArray, useForm, FormProvider } from "react-hook-form";

 import dayjs from "@calcom/dayjs";
@@ -41,6 +43,7 @@ describe("DateOverrideList", () => {
            fields={fieldArrayResult.current.fields}
            replace={fieldArrayResult.current.replace}
            workingHours={[]}
+            handleAvailabilityUpdate={noop}
          />
        </FormProvider>
      </TooltipProvider>
@@ -87,6 +90,7 @@ describe("DateOverrideList", () => {
            fields={fieldArrayResult.current.fields}
            replace={fieldArrayResult.current.replace}
            workingHours={[]}
+            handleAvailabilityUpdate={noop}
          />
        </FormProvider>
      </TooltipProvider>