fix: add a default timezone (#11475)

Co-authored-by: Alex van Andel <me@alexvanandel.com>

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

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) => {

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]);

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);

packages/features/bookings/lib/timePreferences.ts

@@ -24,7 +24,7 @@ export const timePreferencesStore = create<TimePreferencesStore>((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 });

packages/features/ee/payments/components/PaymentPage.tsx

@@ -41,7 +41,8 @@ const PaymentPage: FC<PaymentPageProps> = (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());

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<ITimezone>(
-    localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()
+    localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London"
   );
 
   const { t } = useLocale();

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

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(),
     },

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<ICity[]>([]);
@@ -36,6 +37,7 @@ export function TimezoneSelect({
 
   return (
     <BaseSelect
+      value={value}
       className={className}
       isLoading={isLoading}
       isDisabled={isLoading}