fix: Invalid time zone specified: Etc/Unknown (#18121)

* fix: Invalid time zone specified: Etc/Unknown

* update

* Update PaymentPage.tsx

* update

* update one more file

* address review

* update test

---------

Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
This commit is contained in:
Anik Dhabal Babu
2024-12-13 15:29:02 +00:00
committed by GitHub
co-authored by Udit Takkar
parent a84513eda5
commit 645985c783
10 changed files with 30 additions and 23 deletions
+2 -3
View File
@@ -1,5 +1,5 @@
// handles logic related to user clock display using 24h display / timeZone options.
import dayjs from "@calcom/dayjs";
import { CURRENT_TIMEZONE } from "@calcom/lib/constants";
import {
getIs24hClockFromLocalStorage,
isBrowserLocale24h,
@@ -26,8 +26,7 @@ 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() || "Europe/London";
timeOptions.inviteeTimeZone = localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE;
};
const is24h = (is24hClock?: boolean) => {
@@ -103,6 +103,13 @@ describe("Success Component", () => {
vi.mocked(useRouterQuery).mockReturnValue({
uid: "uid",
});
vi.mock("@calcom/lib/constants", async (importOriginal) => {
const actual = await importOriginal<any>();
return {
...actual,
CURRENT_TIMEZONE: "Europe/London",
};
});
vi.mocked(useSession).mockReturnValue({
update: vi.fn(),
status: "authenticated",
@@ -31,7 +31,7 @@ import {
SystemField,
TITLE_FIELD,
} from "@calcom/features/bookings/lib/SystemField";
import { APP_NAME } from "@calcom/lib/constants";
import { APP_NAME, CURRENT_TIMEZONE } from "@calcom/lib/constants";
import {
formatToLocalizedDate,
formatToLocalizedTime,
@@ -258,9 +258,7 @@ export default function Success(props: PageProps) {
}, [telemetry]); */
useEffect(() => {
setDate(
date.tz(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London")
);
setDate(date.tz(localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE));
setIs24h(props?.userTimeFormat ? props.userTimeFormat === 24 : !!getIs24hClockFromLocalStorage());
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [eventType, needsConfirmation]);
@@ -1,6 +1,6 @@
import { create } from "zustand";
import dayjs from "@calcom/dayjs";
import { CURRENT_TIMEZONE } from "@calcom/lib/constants";
import { TimeFormat, detectBrowserTimeFormat, setIs24hClockInLocalStorage } from "@calcom/lib/timeFormat";
import { localStorage } from "@calcom/lib/webstorage";
@@ -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() || "Europe/London",
timezone: localStorage.getItem(timezoneLocalStorageKey) || CURRENT_TIMEZONE,
setTimezone: (timezone: string) => {
localStorage.setItem(timezoneLocalStorageKey, timezone);
set({ timezone });
@@ -11,7 +11,7 @@ import dayjs from "@calcom/dayjs";
import { sdkActionManager, useIsEmbed } from "@calcom/embed-core/embed-iframe";
import { PayIcon } from "@calcom/features/bookings/components/event-meta/PayIcon";
import { Price } from "@calcom/features/bookings/components/event-meta/Price";
import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
import { APP_NAME, WEBSITE_URL, CURRENT_TIMEZONE } from "@calcom/lib/constants";
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import useTheme from "@calcom/lib/hooks/useTheme";
@@ -51,8 +51,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
const paymentAppData = getPaymentAppData(props.eventType);
useEffect(() => {
let embedIframeWidth = 0;
const _timezone =
localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London";
const _timezone = localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE;
setTimezone(_timezone);
setDate(date.tz(_timezone));
setIs24h(!!getIs24hClockFromLocalStorage());
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
import dayjs from "@calcom/dayjs";
import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { WEBAPP_URL, CURRENT_TIMEZONE } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import type { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
@@ -20,7 +20,7 @@ export default function TeamAvailabilityModal(props: Props) {
const utils = trpc.useUtils();
const [selectedDate, setSelectedDate] = useState(dayjs());
const [selectedTimeZone, setSelectedTimeZone] = useState<ITimezone>(
localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London"
localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE
);
const { t } = useLocale();
@@ -5,6 +5,7 @@ import { useSession } from "next-auth/react";
import { useEffect, useState } from "react";
import dayjs from "@calcom/dayjs";
import { CURRENT_TIMEZONE } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { trpc } from "@calcom/trpc/react";
import { showToast, Dialog, DialogClose, DialogContent, DialogFooter, DialogHeader } from "@calcom/ui";
@@ -22,8 +23,7 @@ const TimezoneChangeDialogContent = () => {
const utils = trpc.useUtils();
const browserTimezone = dayjs.tz.guess() || "Europe/London";
const formattedCurrentTz = browserTimezone.replace("_", " ");
const formattedCurrentTz = CURRENT_TIMEZONE.replace("_", " ");
const onMutationSuccess = async () => {
showToast(t("updated_timezone_to", { formattedCurrentTz }), "success");
@@ -42,7 +42,7 @@ const TimezoneChangeDialogContent = () => {
const updateTimezone = () => {
mutation.mutate({
timeZone: browserTimezone,
timeZone: CURRENT_TIMEZONE,
});
};
@@ -77,8 +77,10 @@ export function useOpenTimezoneDialog() {
if (!user?.timeZone || status !== "authenticated" || userSession?.user?.impersonatedBy) {
return;
}
const browserTimezone = dayjs.tz.guess() || "Europe/London";
if (dayjs.tz(undefined, browserTimezone).utcOffset() !== dayjs.tz(undefined, user.timeZone).utcOffset()) {
if (
dayjs.tz(undefined, CURRENT_TIMEZONE).utcOffset() !== dayjs.tz(undefined, user.timeZone).utcOffset()
) {
setShowDialog(true);
}
}, [user?.timeZone, status, userSession?.user?.impersonatedBy]);
@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import dayjs from "@calcom/dayjs";
import { DataTable, DataTableToolbar } from "@calcom/features/data-table";
import { APP_NAME, WEBAPP_URL } from "@calcom/lib/constants";
import { CURRENT_TIMEZONE } from "@calcom/lib/constants";
import type { DateRange } from "@calcom/lib/date-ranges";
import { useDebounce } from "@calcom/lib/hooks/useDebounce";
import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -78,7 +79,7 @@ export function AvailabilitySliderTable(props: { userTimeFormat: number | null;
const { data, isPending, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery(
{
limit: 10,
loggedInUsersTz: dayjs.tz.guess() || "Europe/London",
loggedInUsersTz: CURRENT_TIMEZONE,
startDate: browsingDate.startOf("day").toISOString(),
endDate: browsingDate.endOf("day").toISOString(),
searchString: debouncedSearchString,
+2
View File
@@ -65,6 +65,8 @@ export const HOSTED_CAL_FEATURES = process.env.NEXT_PUBLIC_HOSTED_CAL_FEATURES |
export const IS_EUROPE = dayjs.tz.guess()?.indexOf("Europe") !== -1;
export const CURRENT_TIMEZONE = dayjs.tz.guess() !== "Etc/Unknown" ? dayjs.tz.guess() : "Europe/London";
/** @deprecated use `WEBAPP_URL` */
export const NEXT_PUBLIC_BASE_URL = process.env.NEXT_PUBLIC_WEBAPP_URL || `https://${process.env.VERCEL_URL}`;
export const LOGO = "/calcom-logo-white-word.svg";
@@ -5,7 +5,7 @@ import dayjs from "@calcom/dayjs";
import { PayIcon } from "@calcom/features/bookings/components/event-meta/PayIcon";
import { Price } from "@calcom/features/bookings/components/event-meta/Price";
import type { PaymentPageProps } from "@calcom/features/ee/payments/pages/payment";
import { APP_NAME, WEBSITE_URL } from "@calcom/lib/constants";
import { APP_NAME, WEBSITE_URL, CURRENT_TIMEZONE } from "@calcom/lib/constants";
import getPaymentAppData from "@calcom/lib/getPaymentAppData";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { isBrowserLocale24h } from "@calcom/lib/timeFormat";
@@ -40,8 +40,7 @@ export const PaymentForm = ({
const eventName = paymentInfo?.booking.title;
const is24h = isBrowserLocale24h();
const timezone =
localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess() || "Europe/London";
const timezone = localStorage.getItem("timeOption.preferredTimeZone") || CURRENT_TIMEZONE;
const date = dayjs.utc(paymentInfo?.booking.startTime).tz(timezone);
if (isLoading) return <h1 className="p-4 pt-4 text-xl">Loading...</h1>;