chore(availabilty-page): Bulk update modal (#16267)

* chore(Availability): Bulk update modal

* fix type error

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Co-authored-by: Amit Sharma <74371312+Amit91848@users.noreply.github.com>

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState, useEffect } from "react";
 import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
+import { BulkEditDefaultForEventsModal } from "@calcom/features/eventtypes/components/BulkEditDefaultForEventsModal";
 import { DateOverrideInputDialog, DateOverrideList } from "@calcom/features/schedules";
 import WebSchedule, {
   ScheduleComponent as PlatformSchedule,
@@ -13,6 +14,7 @@ import { availabilityAsString } from "@calcom/lib/availability";
 import classNames from "@calcom/lib/classNames";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { sortAvailabilityStrings } from "@calcom/lib/weekstart";
+import { trpc } from "@calcom/trpc";
 import type { RouterOutputs } from "@calcom/trpc/react";
 import type { TimeRange, WorkingHours } from "@calcom/types/schedule";
 import {
@@ -30,6 +32,7 @@ import {
   TimezoneSelect as WebTimezoneSelect,
   Tooltip,
   VerticalDivider,
+  showToast,
 } from "@calcom/ui";
 import { Icon } from "@calcom/ui";
 
@@ -245,8 +248,19 @@ export function AvailabilitySettings({
   enableOverrides = false,
 }: AvailabilitySettingsProps) {
   const [openSidebar, setOpenSidebar] = useState(false);
+  const [bulkUpdateModal, setBulkUpdateModal] = useState(false);
   const { t, i18n } = useLocale();
 
+  const utils = trpc.useUtils();
+  const bulkUpdateDefaultAvailabilityMutation =
+    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation({
+      onSuccess: () => {
+        utils.viewer.availability.list.invalidate();
+        setBulkUpdateModal(false);
+        showToast(t("success"), "success");
+      },
+    });
+
   const form = useForm<AvailabilityFormValues>({
     defaultValues: {
       ...schedule,
@@ -337,7 +351,10 @@ export function AvailabilitySettings({
                       id="hiddenSwitch"
                       disabled={isSaving || schedule.isDefault}
                       checked={value}
-                      onCheckedChange={onChange}
+                      onCheckedChange={(checked) => {
+                        onChange(checked);
+                        setBulkUpdateModal(checked);
+                      }}
                     />
                   )}
                 />
@@ -345,6 +362,15 @@ export function AvailabilitySettings({
             ) : null}
           </div>
 
+          {bulkUpdateModal && (
+            <BulkEditDefaultForEventsModal
+              isPending={bulkUpdateDefaultAvailabilityMutation.isPending}
+              open={bulkUpdateModal}
+              setOpen={setBulkUpdateModal}
+              bulkUpdateFunction={bulkUpdateDefaultAvailabilityMutation.mutate}
+            />
+          )}
+
           <VerticalDivider className="hidden sm:inline" />
           <DeleteDialogButton
             buttonClassName="hidden sm:inline"