From 35259b75f6f7cb8a5010436e762df81532ba49da Mon Sep 17 00:00:00 2001 From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com> Date: Tue, 26 Jul 2022 14:02:44 -0400 Subject: [PATCH] Display correct time format on availability page (#3441) * Pass time format * Write 24hr time format * Remove console.log * Change regex * Add console.log * Remove console.log * Remove console.log * Update TimeOptions.tsx * Write time format to localstorage on user create / edit * Grab and set from local storage * On user create grab timeformat from browser * Update timeFormat in DB * Fix typo Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars --- apps/web/components/booking/TimeOptions.tsx | 8 +++---- .../booking/pages/AvailabilityPage.tsx | 10 ++++++++- apps/web/lib/timeFormat.ts | 22 +++++++++++++++++-- apps/web/pages/api/user/[id].ts | 2 ++ apps/web/pages/getting-started.tsx | 5 +++++ apps/web/pages/settings/profile.tsx | 3 +++ .../app-store/office365video/api/callback.ts | 1 - 7 files changed, 43 insertions(+), 8 deletions(-) diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx index 1adae453de..be2ac00f1c 100644 --- a/apps/web/components/booking/TimeOptions.tsx +++ b/apps/web/components/booking/TimeOptions.tsx @@ -1,9 +1,8 @@ import { FC, useEffect, useState } from "react"; +import { useLocale } from "@calcom/lib/hooks/useLocale"; import Switch from "@calcom/ui/Switch"; -import { useLocale } from "@lib/hooks/useLocale"; - import TimezoneSelect, { ITimezoneOption } from "@components/ui/form/TimezoneSelect"; import { is24h, timeZone } from "../../lib/clock"; @@ -11,11 +10,12 @@ import { is24h, timeZone } from "../../lib/clock"; type Props = { onSelectTimeZone: (selectedTimeZone: string) => void; onToggle24hClock: (is24hClock: boolean) => void; + timeFormat: string; }; -const TimeOptions: FC = ({ onToggle24hClock, onSelectTimeZone }) => { +const TimeOptions: FC = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => { const [selectedTimeZone, setSelectedTimeZone] = useState(""); - const [is24hClock, setIs24hClock] = useState(false); + const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true); const { t } = useLocale(); useEffect(() => { diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx index e3815fc3f5..74c4c9a8cf 100644 --- a/apps/web/components/booking/pages/AvailabilityPage.tsx +++ b/apps/web/components/booking/pages/AvailabilityPage.tsx @@ -241,15 +241,18 @@ function TimezoneDropdown({ onChangeTimeFormat, onChangeTimeZone, timeZone, + timeFormat, }: { onChangeTimeFormat: (newTimeFormat: string) => void; onChangeTimeZone: (newTimeZone: string) => void; timeZone?: string; + timeFormat: string; }) { const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); useEffect(() => { handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true"); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -277,7 +280,11 @@ function TimezoneDropdown({

- + ); @@ -363,6 +370,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => { const timezoneDropdown = useMemo( () => ( { + const localStorageTimeFormat = localStorage.getItem("timeOption.is24hClock"); + // If time format is already stored in the browser then retrieve and return early + if (localStorageTimeFormat === "true") { + return true; + } else if (localStorageTimeFormat === "false") { + return false; + } + let locale = "en-US"; - if (typeof window !== "undefined" && navigator) locale = navigator?.language; - return !new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/AM/); + if (typeof window !== "undefined" && navigator) locale = window.navigator?.language; + + if (!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/)) { + localStorage.setItem("timeOption.is24hClock", "false"); + return false; + } else { + localStorage.setItem("timeOption.is24hClock", "true"); + return true; + } }; + export const detectBrowserTimeFormat = isBrowserLocale24h() ? "H:mm" : "h:mma"; diff --git a/apps/web/pages/api/user/[id].ts b/apps/web/pages/api/user/[id].ts index 1b3b03afd8..80e8f58628 100644 --- a/apps/web/pages/api/user/[id].ts +++ b/apps/web/pages/api/user/[id].ts @@ -52,6 +52,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) "name", "avatar", "timeZone", + "timeFormat", "weekStart", "hideBranding", "theme", @@ -68,6 +69,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) bio: true, avatar: true, timeZone: true, + timeFormat: true, weekStart: true, startTime: true, endTime: true, diff --git a/apps/web/pages/getting-started.tsx b/apps/web/pages/getting-started.tsx index 06947fb8e9..13e0e88af9 100644 --- a/apps/web/pages/getting-started.tsx +++ b/apps/web/pages/getting-started.tsx @@ -27,6 +27,7 @@ import { DEFAULT_SCHEDULE } from "@lib/availability"; import { useLocale } from "@lib/hooks/useLocale"; import prisma from "@lib/prisma"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "@lib/telemetry"; +import { isBrowserLocale24h } from "@lib/timeFormat"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { Schedule as ScheduleType } from "@lib/types/schedule"; @@ -214,8 +215,12 @@ export default function Onboarding(props: inferSSRProps & { localeProp: str const enteredLanguage = selectedLanguage.value; const enteredTimeFormat = selectedTimeFormat.value; + // Write time format to localStorage if available + window.localStorage.setItem("timeOption.is24hClock", selectedTimeFormat.value === 12 ? "false" : "true"); + // TODO: Add validation mutation.mutate({ diff --git a/packages/app-store/office365video/api/callback.ts b/packages/app-store/office365video/api/callback.ts index 52cc927611..81992e4ddd 100644 --- a/packages/app-store/office365video/api/callback.ts +++ b/packages/app-store/office365video/api/callback.ts @@ -14,7 +14,6 @@ let client_secret = ""; export default async function handler(req: NextApiRequest, res: NextApiResponse) { const { code } = req.query; - console.log("🚀 ~ file: callback.ts ~ line 14 ~ handler ~ code", req.query); if (typeof code !== "string") { res.status(400).json({ message: "No code returned" });