From 13caf6f2cdb8283fa41a1d1aa7661cfaf8770cdb Mon Sep 17 00:00:00 2001 From: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com> Date: Mon, 25 Sep 2023 18:38:41 +0530 Subject: [PATCH] fix: add a default timezone (#11475) Co-authored-by: Alex van Andel --- .../components/getting-started/steps-views/UserSettings.tsx | 5 +++-- apps/web/lib/clock.ts | 3 ++- apps/web/pages/booking/[uid].tsx | 4 +++- packages/features/bookings/Booker/components/EventMeta.tsx | 2 +- packages/features/bookings/lib/timePreferences.ts | 2 +- packages/features/ee/payments/components/PaymentPage.tsx | 3 ++- .../features/ee/teams/components/TeamAvailabilityModal.tsx | 2 +- packages/features/settings/TimezoneChangeDialog.tsx | 2 +- .../timezone-buddy/components/AvailabilitySliderTable.tsx | 2 +- .../ui/components/form/timezone-select/TimezoneSelect.tsx | 2 ++ 10 files changed, 17 insertions(+), 10 deletions(-) diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx index c67df7d461..7ab1d29f7f 100644 --- a/apps/web/components/getting-started/steps-views/UserSettings.tsx +++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx @@ -1,9 +1,10 @@ import { zodResolver } from "@hookform/resolvers/zod"; -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { useForm } from "react-hook-form"; import { z } from "zod"; import dayjs from "@calcom/dayjs"; +import { useTimePreferences } from "@calcom/features/bookings/lib"; import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; @@ -22,7 +23,7 @@ const UserSettings = (props: IUserSettingsProps) => { const { nextStep } = props; const [user] = trpc.viewer.me.useSuspenseQuery(); const { t } = useLocale(); - const [selectedTimeZone, setSelectedTimeZone] = useState(dayjs.tz.guess()); + const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences(); const telemetry = useTelemetry(); const userSettingsSchema = z.object({ name: z diff --git a/apps/web/lib/clock.ts b/apps/web/lib/clock.ts index dde33133d6..3551c53f6a 100644 --- a/apps/web/lib/clock.ts +++ b/apps/web/lib/clock.ts @@ -26,7 +26,8 @@ const initClock = () => { // This only sets browser locale if there's no preference on localStorage. if (getIs24hClockFromLocalStorage() === null) set24hClock(isBrowserLocale24h()); timeOptions.is24hClock = !!getIs24hClockFromLocalStorage(); - timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess(); + timeOptions.inviteeTimeZone = + localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London"; }; const is24h = (is24hClock?: boolean) => { diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx index e173169a30..00342a3c1a 100644 --- a/apps/web/pages/booking/[uid].tsx +++ b/apps/web/pages/booking/[uid].tsx @@ -216,7 +216,9 @@ export default function Success(props: SuccessProps) { confirmed: !needsConfirmation, // TODO: Add payment details }); - setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess())); + setDate( + date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London") + ); setIs24h(props?.userTimeFormat ? props.userTimeFormat === 24 : !!getIs24hClockFromLocalStorage()); // eslint-disable-next-line react-hooks/exhaustive-deps }, [eventType, needsConfirmation]); diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx index 92b117c689..2d2f3f6210 100644 --- a/packages/features/bookings/Booker/components/EventMeta.tsx +++ b/packages/features/bookings/Booker/components/EventMeta.tsx @@ -20,7 +20,7 @@ const TimezoneSelect = dynamic(() => import("@calcom/ui").then((mod) => mod.Time }); export const EventMeta = () => { - const { timezone, setTimezone, timeFormat } = useTimePreferences(); + const { setTimezone, timeFormat, timezone } = useTimePreferences(); const selectedDuration = useBookerStore((state) => state.selectedDuration); const selectedTimeslot = useBookerStore((state) => state.selectedTimeslot); const bookerState = useBookerStore((state) => state.state); diff --git a/packages/features/bookings/lib/timePreferences.ts b/packages/features/bookings/lib/timePreferences.ts index 4e56f1bf16..7619685622 100644 --- a/packages/features/bookings/lib/timePreferences.ts +++ b/packages/features/bookings/lib/timePreferences.ts @@ -24,7 +24,7 @@ export const timePreferencesStore = create((set) => ({ setIs24hClockInLocalStorage(format === TimeFormat.TWENTY_FOUR_HOUR); set({ timeFormat: format }); }, - timezone: localStorage.getItem(timezoneLocalStorageKey) || dayjs.tz.guess(), + timezone: localStorage.getItem(timezoneLocalStorageKey) || dayjs.tz.guess() || "Europe/London", setTimezone: (timezone: string) => { localStorage.setItem(timezoneLocalStorageKey, timezone); set({ timezone }); diff --git a/packages/features/ee/payments/components/PaymentPage.tsx b/packages/features/ee/payments/components/PaymentPage.tsx index 5022485fcd..dc80c5fa40 100644 --- a/packages/features/ee/payments/components/PaymentPage.tsx +++ b/packages/features/ee/payments/components/PaymentPage.tsx @@ -41,7 +41,8 @@ const PaymentPage: FC = (props) => { const paymentAppData = getPaymentAppData(props.eventType); useEffect(() => { let embedIframeWidth = 0; - const _timezone = localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess(); + const _timezone = + localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London"; setTimezone(_timezone); setDate(date.tz(_timezone)); setIs24h(!!getIs24hClockFromLocalStorage()); diff --git a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx index 0d9bb4b2a8..f2edddb91c 100644 --- a/packages/features/ee/teams/components/TeamAvailabilityModal.tsx +++ b/packages/features/ee/teams/components/TeamAvailabilityModal.tsx @@ -20,7 +20,7 @@ export default function TeamAvailabilityModal(props: Props) { const utils = trpc.useContext(); const [selectedDate, setSelectedDate] = useState(dayjs()); const [selectedTimeZone, setSelectedTimeZone] = useState( - localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() + localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London" ); const { t } = useLocale(); diff --git a/packages/features/settings/TimezoneChangeDialog.tsx b/packages/features/settings/TimezoneChangeDialog.tsx index 34865396e5..0b2193799f 100644 --- a/packages/features/settings/TimezoneChangeDialog.tsx +++ b/packages/features/settings/TimezoneChangeDialog.tsx @@ -12,7 +12,7 @@ export default function TimezoneChangeDialog() { const { data: user, isLoading } = trpc.viewer.me.useQuery(); const utils = trpc.useContext(); const userTz = user?.timeZone; - const currentTz = dayjs.tz.guess(); + const currentTz = dayjs.tz.guess() || "Europe/London"; const formattedCurrentTz = currentTz?.replace("_", " "); // update user settings diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx index 57ca159087..22a2574648 100644 --- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx +++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx @@ -61,7 +61,7 @@ export function AvailabilitySliderTable() { const { data, isLoading, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery( { limit: 10, - loggedInUsersTz: dayjs.tz.guess(), + loggedInUsersTz: dayjs.tz.guess() || "Europe/London", startDate: browsingDate.startOf("day").toISOString(), endDate: browsingDate.endOf("day").toISOString(), }, diff --git a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx index c0bcd700f6..1f8eff0398 100644 --- a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx +++ b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx @@ -18,6 +18,7 @@ export function TimezoneSelect({ classNames: timezoneClassNames, components, variant = "default", + value, ...props }: SelectProps & { variant?: "default" | "minimal" }) { const [cities, setCities] = useState([]); @@ -36,6 +37,7 @@ export function TimezoneSelect({ return (