fix: date overrides for availability settings atom (calcom#22701)

* only make api call once access token is verified

* add date fns tz

* use date-fns to format ranges for platform

* update yarn.lock

* fix merge conflicts

* fix updating overrides for atoms

* add changesets

Author: Ryukemeister

.changeset/twenty-comics-join.md

@@ -0,0 +1,5 @@
+---
+"@calcom/atoms": patch
+---
+
+This change fixes date overrides breaking for availability settings atom

package.json

@@ -120,6 +120,7 @@
     "@next/third-parties": "^14.2.5",
     "@vercel/functions": "^1.4.0",
     "city-timezones": "^1.2.1",
+    "date-fns-tz": "^3.2.0",
     "eslint": "^8.34.0",
     "p-limit": "^6.2.0",
     "turbo": "^1.10.1"

packages/features/schedules/components/DateOverrideList.tsx

@@ -1,5 +1,7 @@
 import { noop } from "@tanstack/react-table";
+import { formatInTimeZone } from "date-fns-tz";
 
+import { useIsPlatform } from "@calcom/atoms/hooks/useIsPlatform";
 import dayjs from "@calcom/dayjs";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc/react";
@@ -38,6 +40,7 @@ const DateOverrideList = ({
   handleAvailabilityUpdate?: VoidFunction;
 }) => {
   const { t, i18n } = useLocale();
+  const isPlatform = useIsPlatform();
 
   const unsortedFieldArrayMap = fields.reduce(
     (map: { [id: string]: number }, { id }, index) => ({ ...map, [id]: index }),
@@ -49,6 +52,10 @@ const DateOverrideList = ({
   }
 
   const timeSpan = ({ start, end }: TimeRange) => {
+    if (isPlatform) {
+      return `${formatInTimeZone(start, "UTC", "h a")} - ${formatInTimeZone(end, "UTC", "h a")}`;
+    }
+
     return `${new Intl.DateTimeFormat(i18n.language, { hour: "numeric", minute: "numeric", hour12 }).format(
       new Date(start.toISOString().slice(0, -1))
     )} - ${new Intl.DateTimeFormat(i18n.language, { hour: "numeric", minute: "numeric", hour12 }).format(
@@ -62,12 +69,14 @@ const DateOverrideList = ({
         <li key={item.id} className="border-subtle flex justify-between border-b px-5 py-4 last:border-b-0">
           <div>
             <h3 className="text-emphasis text-sm">
-              {new Intl.DateTimeFormat(i18n.language, {
-                weekday: "long",
-                month: "long",
-                day: "numeric",
-                timeZone: "UTC",
-              }).format(item.ranges[0].start)}
+              {!isPlatform &&
+                new Intl.DateTimeFormat(i18n.language, {
+                  weekday: "long",
+                  month: "long",
+                  day: "numeric",
+                  timeZone: "UTC",
+                }).format(item.ranges[0].start)}
+              {isPlatform && formatInTimeZone(new Date(item.ranges[0].start), "UTC", "EEE MMM dd")}
             </h3>
             {item.ranges[0].start.valueOf() - item.ranges[0].end.valueOf() === 0 ? (
               <p className="text-subtle text-xs">{t("unavailable")}</p>
@@ -94,7 +103,10 @@ const DateOverrideList = ({
               userTimeFormat={userTimeFormat}
               excludedDates={excludedDates}
               workingHours={workingHours}
-              value={item.ranges}
+              value={item.ranges.map((range) => ({
+                start: new Date(range.start),
+                end: new Date(range.end),
+              }))}
               weekStart={weekStart}
               onChange={(ranges) => {
                 // update has very weird side-effects with sorting.
@@ -119,12 +131,14 @@ const DateOverrideList = ({
                 className="text-default h-5"
                 data-testid="delete-button"
                 title={t("date_overrides_delete_on_date", {
-                  date: new Intl.DateTimeFormat(i18n.language, {
-                    weekday: "long",
-                    month: "long",
-                    day: "numeric",
-                    timeZone: "UTC",
-                  }).format(item.ranges[0].start),
+                  date: isPlatform
+                    ? formatInTimeZone(new Date(item.ranges[0].start), "UTC", "h a")
+                    : new Intl.DateTimeFormat(i18n.language, {
+                        weekday: "long",
+                        month: "long",
+                        day: "numeric",
+                        timeZone: "UTC",
+                      }).format(item.ranges[0].start),
                 })}
                 color="destructive"
                 variant="icon"

packages/platform/atoms/hooks/schedules/useAtomSchedule.ts

@@ -5,11 +5,13 @@ import { SUCCESS_STATUS } from "@calcom/platform-constants";
 import type { ApiResponse } from "@calcom/platform-types";
 
 import http from "../../lib/http";
+import { useAtomsContext } from "../useAtomsContext";
 
 export const QUERY_KEY = "use-atom-schedule";
 
 export const useAtomSchedule = (scheduleId?: string, isManagedEventType?: boolean) => {
   const pathname = "atoms/schedules";
+  const { isInit, accessToken } = useAtomsContext();
 
   const { isLoading, error, data } = useQuery({
     queryKey: [QUERY_KEY, scheduleId, isManagedEventType],
@@ -25,6 +27,7 @@ export const useAtomSchedule = (scheduleId?: string, isManagedEventType?: boolea
           throw new Error(res.data.error?.message);
         });
     },
+    enabled: isInit && !!accessToken,
   });
 
   return { isLoading, error, data };

yarn.lock

@@ -48173,4 +48173,4 @@ __metadata:
   resolution: "zwitch@npm:2.0.4"
   checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6
   languageName: node
-  linkType: hard
+  linkType: hard