From babd514c64d0a4b8e05a46619808f201d3e8b0a5 Mon Sep 17 00:00:00 2001 From: Rajiv Sahal Date: Wed, 30 Jul 2025 13:28:37 +0200 Subject: [PATCH] fix: date overrides for availability settings atom (#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 --- .changeset/twenty-comics-join.md | 5 +++ package.json | 1 + .../schedules/components/DateOverrideList.tsx | 40 +++++++++++++------ .../atoms/hooks/schedules/useAtomSchedule.ts | 3 ++ yarn.lock | 2 +- 5 files changed, 37 insertions(+), 14 deletions(-) create mode 100644 .changeset/twenty-comics-join.md diff --git a/.changeset/twenty-comics-join.md b/.changeset/twenty-comics-join.md new file mode 100644 index 0000000000..6c84da25c6 --- /dev/null +++ b/.changeset/twenty-comics-join.md @@ -0,0 +1,5 @@ +--- +"@calcom/atoms": patch +--- + +This change fixes date overrides breaking for availability settings atom diff --git a/package.json b/package.json index c1b7805fab..5da699585d 100644 --- a/package.json +++ b/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" diff --git a/packages/features/schedules/components/DateOverrideList.tsx b/packages/features/schedules/components/DateOverrideList.tsx index cb46593b3a..9f0c8b2fbc 100644 --- a/packages/features/schedules/components/DateOverrideList.tsx +++ b/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 = ({

  • - {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")}

    {item.ranges[0].start.valueOf() - item.ranges[0].end.valueOf() === 0 ? (

    {t("unavailable")}

    @@ -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" diff --git a/packages/platform/atoms/hooks/schedules/useAtomSchedule.ts b/packages/platform/atoms/hooks/schedules/useAtomSchedule.ts index 22349ace17..eb5ae2f074 100644 --- a/packages/platform/atoms/hooks/schedules/useAtomSchedule.ts +++ b/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 }; diff --git a/yarn.lock b/yarn.lock index 05f52624ec..6a3bea1de4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -48173,4 +48173,4 @@ __metadata: resolution: "zwitch@npm:2.0.4" checksum: f22ec5fc2d5f02c423c93d35cdfa83573a3a3bd98c66b927c368ea4d0e7252a500df2a90a6b45522be536a96a73404393c958e945fdba95e6832c200791702b6 languageName: node - linkType: hard + linkType: hard \ No newline at end of file