refactor: bulk update modal logic shifted to web wrapper (#16315)

packages/platform/atoms/availability/AvailabilitySettings.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import type { SetStateAction, Dispatch } from "react";
 import { useMemo, useState, useEffect } from "react";
 import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 
@@ -14,7 +15,6 @@ 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 {
@@ -32,7 +32,6 @@ import {
   TimezoneSelect as WebTimezoneSelect,
   Tooltip,
   VerticalDivider,
-  showToast,
 } from "@calcom/ui";
 import { Icon } from "@calcom/ui";
 
@@ -97,6 +96,12 @@ type AvailabilitySettingsProps = {
   customClassNames?: CustomClassNames;
   disableEditableHeading?: boolean;
   enableOverrides?: boolean;
+  bulkUpdateModalProps?: {
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    save: ({ eventTypeIds }: { eventTypeIds: number[] }) => void;
+    isSaving: boolean;
+  };
 };
 
 const DeleteDialogButton = ({
@@ -246,21 +251,11 @@ export function AvailabilitySettings({
   customClassNames,
   disableEditableHeading = false,
   enableOverrides = false,
+  bulkUpdateModalProps,
 }: 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,
@@ -353,7 +348,7 @@ export function AvailabilitySettings({
                       checked={value}
                       onCheckedChange={(checked) => {
                         onChange(checked);
-                        setBulkUpdateModal(checked);
+                        bulkUpdateModalProps?.setIsOpen(checked);
                       }}
                     />
                   )}
@@ -362,12 +357,12 @@ export function AvailabilitySettings({
             ) : null}
           </div>
 
-          {bulkUpdateModal && (
+          {bulkUpdateModalProps && bulkUpdateModalProps?.isOpen && (
             <BulkEditDefaultForEventsModal
-              isPending={bulkUpdateDefaultAvailabilityMutation.isPending}
-              open={bulkUpdateModal}
-              setOpen={setBulkUpdateModal}
-              bulkUpdateFunction={bulkUpdateDefaultAvailabilityMutation.mutate}
+              isPending={bulkUpdateModalProps?.isSaving}
+              open={bulkUpdateModalProps?.isOpen}
+              setOpen={bulkUpdateModalProps.setIsOpen}
+              bulkUpdateFunction={bulkUpdateModalProps?.save}
             />
           )}
 

packages/platform/atoms/availability/wrappers/AvailabilitySettingsWebWrapper.tsx

@@ -1,4 +1,5 @@
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 
 import { withErrorFromUnknown } from "@calcom/lib/getClientErrorFromUnknown";
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
@@ -29,6 +30,16 @@ export const AvailabilitySettingsWebWrapper = () => {
   const { data: travelSchedules, isPending: isPendingTravelSchedules } =
     trpc.viewer.getTravelSchedules.useQuery();
 
+  const [isBulkUpdateModalOpen, setIsBulkUpdateModalOpen] = useState(false);
+  const bulkUpdateDefaultAvailabilityMutation =
+    trpc.viewer.availability.schedule.bulkUpdateToDefaultAvailability.useMutation({
+      onSuccess: () => {
+        utils.viewer.availability.list.invalidate();
+        setIsBulkUpdateModalOpen(false);
+        showToast(t("success"), "success");
+      },
+    });
+
   const isDefaultSchedule = me.data?.defaultScheduleId === scheduleId;
 
   const updateMutation = trpc.viewer.availability.schedule.update.useMutation({
@@ -101,6 +112,12 @@ export const AvailabilitySettingsWebWrapper = () => {
             ...values,
           });
       }}
+      bulkUpdateModalProps={{
+        isOpen: isBulkUpdateModalOpen,
+        setIsOpen: setIsBulkUpdateModalOpen,
+        save: bulkUpdateDefaultAvailabilityMutation.mutate,
+        isSaving: bulkUpdateDefaultAvailabilityMutation.isPending,
+      }}
     />
   );
 };