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 <zomars@me.com>

Author: 3 people

apps/web/components/booking/TimeOptions.tsx

@@ -1,21 +1,21 @@
 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";
 
 type Props = {
   onSelectTimeZone: (selectedTimeZone: string) => void;
   onToggle24hClock: (is24hClock: boolean) => void;
+  timeFormat: string;
 };
 
-const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone }) => {
+const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
-  const [is24hClock, setIs24hClock] = useState(false);
+  const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
   const { t } = useLocale();
 
   useEffect(() => {

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({
         </p>
       </Collapsible.Trigger>
       <Collapsible.Content>
-        <TimeOptions onSelectTimeZone={handleSelectTimeZone} onToggle24hClock={handleToggle24hClock} />
+        <TimeOptions
+          onSelectTimeZone={handleSelectTimeZone}
+          onToggle24hClock={handleToggle24hClock}
+          timeFormat={timeFormat}
+        />
       </Collapsible.Content>
     </Collapsible.Root>
   );
@@ -363,6 +370,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const timezoneDropdown = useMemo(
     () => (
       <TimezoneDropdown
+        timeFormat={timeFormat}
         onChangeTimeFormat={setTimeFormat}
         timeZone={timeZone}
         onChangeTimeZone={setTimeZone}

apps/web/lib/timeFormat.ts

@@ -4,9 +4,27 @@
  * based on the user's preferred language
  * defaults to 'en-US' (12h) if no navigator language is found
  */
+import { localStorage } from "@calcom/lib/webstorage";
+
 export const isBrowserLocale24h = () => {
+  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";

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,

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<typeof getServerSideProp
         );
       }
     }
+    // Write default timeformat to localStorage
+    const browserTimeFormat = isBrowserLocale24h() ? 24 : 12;
+
     await updateUser({
       completedOnboarding: true,
+      timeFormat: browserTimeFormat,
     });
 
     setSubmitting(false);

apps/web/pages/settings/profile.tsx

@@ -178,6 +178,9 @@ function SettingsView(props: ComponentProps<typeof Settings> & { 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({

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