From c4f3dec85455632036010a1ade614d7967cdec67 Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Fri, 14 Oct 2022 15:15:03 -0400
Subject: [PATCH] Fix time format on booking page (#5006)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 apps/web/components/booking/TimeOptions.tsx           |  1 +
 .../web/components/booking/pages/AvailabilityPage.tsx | 11 ++++-------
 packages/lib/timeFormat.ts                            |  8 +++++---
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 9fe3dea4bd..92d9e33902 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -28,6 +28,7 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
       onSelectTimeZone(timeZone(selectedTimeZone));
     }
   }, [selectedTimeZone, onSelectTimeZone]);
+
   const handle24hClockToggle = (is24hClock: boolean) => {
     setIs24hClock(is24hClock);
     onToggle24hClock(is24h(is24hClock));
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 0260a2db2e..9b6247b0a6 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -1,7 +1,6 @@
 // Get router variables
 import autoAnimate from "@formkit/auto-animate";
 import { EventType } from "@prisma/client";
-import { SchedulingType } from "@prisma/client";
 import * as Popover from "@radix-ui/react-popover";
 import { TFunction } from "next-i18next";
 import { useRouter } from "next/router";
@@ -42,15 +41,12 @@ import Gates, { Gate, GateState } from "@components/Gates";
 import AvailableTimes from "@components/booking/AvailableTimes";
 import BookingDescription from "@components/booking/BookingDescription";
 import TimeOptions from "@components/booking/TimeOptions";
-import { UserAvatars } from "@components/booking/UserAvatars";
-import EventTypeDescriptionSafeHTML from "@components/eventtype/EventTypeDescriptionSafeHTML";
 import { HeadSeo } from "@components/seo/head-seo";
 import PoweredByCal from "@components/ui/PoweredByCal";
 
 import type { AvailabilityPageProps } from "../../../pages/[user]/[type]";
 import type { DynamicAvailabilityPageProps } from "../../../pages/d/[link]/[slug]";
 import type { AvailabilityTeamPageProps } from "../../../pages/team/[slug]/[type]";
-import { AvailableEventLocations } from "../AvailableEventLocations";
 
 const GoBackToPreviousPage = ({ t }: { t: TFunction }) => {
   const router = useRouter();
@@ -235,7 +231,6 @@ function TimezoneDropdown({
 
   useEffect(() => {
     handleToggle24hClock(!!getIs24hClockFromLocalStorage());
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -324,7 +319,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
   const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState(timeFormatFromProfile || detectBrowserTimeFormat);
+  const [timeFormat, setTimeFormat] = useState<string>("HH:mm");
+
   const [gateState, gateDispatcher] = useReducer(
     (state: GateState, newState: Partial<GateState>) => ({
       ...state,
@@ -335,7 +331,8 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
 
   useEffect(() => {
     setTimeZone(localStorageTimeZone() || dayjs.tz.guess());
-  }, []);
+    setTimeFormat(timeFormatFromProfile || detectBrowserTimeFormat);
+  }, [timeFormatFromProfile]);
 
   // TODO: Improve this;
   useExposePlanGlobally(eventType.users.length === 1 ? eventType.users[0].plan : "PRO");
diff --git a/packages/lib/timeFormat.ts b/packages/lib/timeFormat.ts
index 9b1533c820..4e89e97a15 100644
--- a/packages/lib/timeFormat.ts
+++ b/packages/lib/timeFormat.ts
@@ -28,9 +28,11 @@ export const isBrowserLocale24h = () => {
   }
 
   let locale = "en-US";
-  if (typeof window !== "undefined" && navigator) locale = window.navigator?.language;
+  if (typeof window !== "undefined" && navigator) {
+    locale = window.navigator?.language;
+  }
 
-  if (!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/)) {
+  if (!!new Intl.DateTimeFormat(locale, { hour: "numeric" }).format(0).match(/M/i)) {
     setIs24hClockInLocalStorage(false);
     return false;
   } else {
@@ -39,4 +41,4 @@ export const isBrowserLocale24h = () => {
   }
 };
 
-export const detectBrowserTimeFormat = isBrowserLocale24h() ? "H:mm" : "h:mma";
+export const detectBrowserTimeFormat = isBrowserLocale24h() ? "HH:mm" : "h:mma";