From 8b61d9bad7b7fa60b09cc112ce64dce70e09bf62 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Wed, 1 May 2024 22:03:40 +0000
Subject: [PATCH 1/4] feat: availability after making changes

---
 .../atoms/availability/AvailabilitySettings.tsx        | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 142a36257f2dc9..e3ba26a8fffb57 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { Controller, useFieldArray, useForm, useWatch } from "react-hook-form";
 
 import dayjs from "@calcom/dayjs";
@@ -237,6 +237,14 @@ export function AvailabilitySettings({
     },
   });
 
+  useEffect(() => {
+    const subscription = form.watch((value) => handleSubmit(value as AvailabilityFormValues), {
+      ...schedule,
+      schedule: schedule.availability || [],
+    });
+    return () => subscription.unsubscribe();
+  }, [form.watch]);
+
   const [Shell, Schedule, TimezoneSelect] = useMemo(() => {
     return isPlatform
       ? [PlatformShell, PlatformSchedule, PlatformTimzoneSelect]

From f03641c06a053bcbeaceb216d384d741f0d6c95f Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Thu, 23 May 2024 22:04:38 +0000
Subject: [PATCH 2/4] update

---
 .../schedules/components/Schedule.tsx         | 46 +++++++++++++++++--
 .../availability/AvailabilitySettings.tsx     | 14 ++++--
 2 files changed, 52 insertions(+), 8 deletions(-)

diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index ffb304a3bac9bc..4eaaaeb2a3d1ec 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -12,6 +12,7 @@ import type {
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import type { GroupBase, Props } from "react-select";
 
+import type { AvailabilityFormValues } from "@calcom/atoms/availability";
 import type { ConfigType } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability";
@@ -47,6 +48,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
   name,
   weekday,
   control,
+  handleSubmit,
   CopyButton,
   disabled,
   labels,
@@ -56,6 +58,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
   name: ArrayPath<TFieldValues>;
   weekday: string;
   control: Control<TFieldValues>;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
   CopyButton: JSX.Element;
   disabled?: boolean;
   labels?: ScheduleLabelsType;
@@ -68,7 +71,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
     scheduleContainer?: string;
   };
 }) => {
-  const { watch, setValue } = useFormContext();
+  const { watch, setValue, getValues } = useFormContext();
   const watchDayRange = watch(name);
 
   return (
@@ -94,6 +97,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
                 data-testid={`${weekday}-switch`}
                 onCheckedChange={(isChecked) => {
                   setValue(name, (isChecked ? [DEFAULT_DAY_RANGE] : []) as TFieldValues[typeof name]);
+                  handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
                 }}
               />
             </div>
@@ -110,6 +114,7 @@ export const ScheduleDay = <TFieldValues extends FieldValues>({
               control={control}
               name={name}
               disabled={disabled}
+              handleSubmit={handleSubmit}
               className={{
                 dayRanges: className?.dayRanges,
                 timeRangeField: className?.timeRangeField,
@@ -129,10 +134,12 @@ const CopyButton = ({
   getValuesFromDayRange,
   weekStart,
   labels,
+  handleSubmit,
 }: {
   getValuesFromDayRange: string;
   weekStart: number;
   labels?: ScheduleLabelsType;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
 }) => {
   const { t } = useLocale();
   const [open, setOpen] = useState(false);
@@ -161,6 +168,7 @@ const CopyButton = ({
           onClick={(selected) => {
             selected.forEach((day) => setValue(`${fieldArrayName}.${day}`, getValues(getValuesFromDayRange)));
             setOpen(false);
+            handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
           }}
           onCancel={() => setOpen(false)}
         />
@@ -177,6 +185,7 @@ const Schedule = <
   control: Control<TFieldValues>;
   weekStart?: number;
   disabled?: boolean;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
   labels?: ScheduleLabelsType;
   userTimeFormat?: number | null;
 }) => {
@@ -192,6 +201,7 @@ export const ScheduleComponent = <
 >({
   name,
   control,
+  handleSubmit,
   disabled,
   weekStart = 0,
   labels,
@@ -200,6 +210,7 @@ export const ScheduleComponent = <
 }: {
   name: TPath;
   control: Control<TFieldValues>;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
   weekStart?: number;
   disabled?: boolean;
   labels?: ScheduleLabelsType;
@@ -235,8 +246,14 @@ export const ScheduleComponent = <
             key={weekday}
             weekday={weekday}
             control={control}
+            handleSubmit={handleSubmit}
             CopyButton={
-              <CopyButton weekStart={weekStart} labels={labels} getValuesFromDayRange={dayRangeName} />
+              <CopyButton
+                weekStart={weekStart}
+                labels={labels}
+                getValuesFromDayRange={dayRangeName}
+                handleSubmit={handleSubmit}
+              />
             }
           />
         );
@@ -252,6 +269,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
   labels,
   userTimeFormat,
   className,
+  handleSubmit,
 }: {
   name: ArrayPath<TFieldValues>;
   control?: Control<TFieldValues>;
@@ -262,6 +280,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
     dayRanges?: string;
     timeRangeField?: string;
   };
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
 }) => {
   const { t } = useLocale();
   const { getValues } = useFormContext();
@@ -282,6 +301,7 @@ export const DayRanges = <TFieldValues extends FieldValues>({
                 <TimeRangeField
                   className={className?.timeRangeField}
                   userTimeFormat={userTimeFormat}
+                  handleSubmit={handleSubmit}
                   {...field}
                 />
               )}
@@ -305,16 +325,23 @@ export const DayRanges = <TFieldValues extends FieldValues>({
 
                   if (slotRange?.append) {
                     append(slotRange.append);
+                    handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
                   }
 
                   if (slotRange?.prepend) {
                     prepend(slotRange.prepend);
+                    handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
                   }
                 }}
               />
             )}
             {index !== 0 && (
-              <RemoveTimeButton index={index} remove={remove} className="text-default mx-2 border-none" />
+              <RemoveTimeButton
+                index={index}
+                remove={remove}
+                handleSubmit={handleSubmit}
+                className="text-default mx-2 border-none"
+              />
             )}
           </div>
         </Fragment>
@@ -329,14 +356,17 @@ const RemoveTimeButton = ({
   disabled,
   className,
   labels,
+  handleSubmit,
 }: {
   index: number | number[];
   remove: UseFieldArrayRemove;
   className?: string;
   disabled?: boolean;
   labels?: ScheduleLabelsType;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
 }) => {
   const { t } = useLocale();
+  const { getValues } = useFormContext();
   return (
     <Button
       disabled={disabled}
@@ -344,7 +374,10 @@ const RemoveTimeButton = ({
       variant="icon"
       color="destructive"
       StartIcon="trash"
-      onClick={() => remove(index)}
+      onClick={() => {
+        remove(index);
+        handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
+      }}
       className={className}
       tooltip={labels?.deleteTime ?? t("delete")}
     />
@@ -357,11 +390,14 @@ const TimeRangeField = ({
   onChange,
   disabled,
   userTimeFormat,
+  handleSubmit,
 }: {
   className?: string;
   disabled?: boolean;
   userTimeFormat: number | null;
+  handleSubmit?: (data: AvailabilityFormValues) => Promise<void>;
 } & ControllerRenderProps) => {
+  const { getValues } = useFormContext();
   // this is a controlled component anyway given it uses LazySelect, so keep it RHF agnostic.
   return (
     <div className={classNames("flex flex-row gap-1", className)}>
@@ -374,6 +410,7 @@ const TimeRangeField = ({
         max={value.end}
         onChange={(option) => {
           onChange({ ...value, start: new Date(option?.value as number) });
+          handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
         }}
       />
       <span className="text-default mx-2 w-2 self-center"> - </span>
@@ -386,6 +423,7 @@ const TimeRangeField = ({
         menuPlacement="bottom"
         onChange={(option) => {
           onChange({ ...value, end: new Date(option?.value as number) });
+          handleSubmit && handleSubmit(getValues() as AvailabilityFormValues);
         }}
       />
     </div>
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index e3ba26a8fffb57..00c4c9f1655126 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -238,10 +238,15 @@ export function AvailabilitySettings({
   });
 
   useEffect(() => {
-    const subscription = form.watch((value) => handleSubmit(value as AvailabilityFormValues), {
-      ...schedule,
-      schedule: schedule.availability || [],
-    });
+    const subscription = form.watch(
+      (value, { name }) => {
+        if (!!name && name.split(".")[0] !== "schedule") handleSubmit(value as AvailabilityFormValues);
+      },
+      {
+        ...schedule,
+        schedule: schedule.availability || [],
+      }
+    );
     return () => subscription.unsubscribe();
   }, [form.watch]);
 
@@ -479,6 +484,7 @@ export function AvailabilitySettings({
                     control={form.control}
                     name="schedule"
                     userTimeFormat={timeFormat}
+                    handleSubmit={handleSubmit}
                     weekStart={
                       ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"].indexOf(
                         weekStart

From 5ef72a5b793819d25c5ebfe0a8a6b19a85f3a528 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <adhabal2002@gmail.com>
Date: Thu, 23 May 2024 22:11:27 +0000
Subject: [PATCH 3/4] update

---
 packages/platform/atoms/availability/AvailabilitySettings.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 00c4c9f1655126..9d577f22059812 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -240,7 +240,9 @@ export function AvailabilitySettings({
   useEffect(() => {
     const subscription = form.watch(
       (value, { name }) => {
-        if (!!name && name.split(".")[0] !== "schedule") handleSubmit(value as AvailabilityFormValues);
+        console.log(name);
+        if (!!name && name.split(".")[0] !== "schedule" && name !== "name")
+          handleSubmit(value as AvailabilityFormValues);
       },
       {
         ...schedule,

From 559fd389b9ef3b96647579123d577113d4f2f24e Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Fri, 24 May 2024 09:00:12 +0530
Subject: [PATCH 4/4] Update Schedule.tsx

---
 packages/features/schedules/components/Schedule.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 4eaaaeb2a3d1ec..c40e7b188e1e87 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -12,7 +12,7 @@ import type {
 import { Controller, useFieldArray, useFormContext } from "react-hook-form";
 import type { GroupBase, Props } from "react-select";
 
-import type { AvailabilityFormValues } from "@calcom/atoms/availability";
+import type { AvailabilityFormValues } from "@calcom/atoms/availability/types";
 import type { ConfigType } from "@calcom/dayjs";
 import dayjs from "@calcom/dayjs";
 import { defaultDayRange as DEFAULT_DAY_RANGE } from "@calcom/lib/availability";