From 0ebce77a7bc383c3b231e704b3bed255b7a37638 Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Thu, 6 Oct 2022 12:25:41 +0200
Subject: [PATCH] #4851: Always take timeformat on booking page from profile if
 user is logged in. Also hides timeformat toggle on booking page for logged in
 users. For non loggedin users we still infer by looking at browser timezone,
 after that we set a localstorage which we will look at, and which will get
 updated when the user updates the toggle in the timezone dropdown. (#4865)

---
 apps/web/components/booking/TimeOptions.tsx   | 27 ++++++++++---------
 .../booking/pages/AvailabilityPage.tsx        | 17 ++++++++++--
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/apps/web/components/booking/TimeOptions.tsx b/apps/web/components/booking/TimeOptions.tsx
index 8cda05f822..502a068313 100644
--- a/apps/web/components/booking/TimeOptions.tsx
+++ b/apps/web/components/booking/TimeOptions.tsx
@@ -10,9 +10,10 @@ type Props = {
   onSelectTimeZone: (selectedTimeZone: string) => void;
   onToggle24hClock: (is24hClock: boolean) => void;
   timeFormat: string;
+  hideTimeFormatToggle?: boolean;
 };
 
-const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat }) => {
+const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat, hideTimeFormatToggle }) => {
   const [selectedTimeZone, setSelectedTimeZone] = useState("");
   const [is24hClock, setIs24hClock] = useState(timeFormat === "HH:mm" && true);
   const { t } = useLocale();
@@ -36,17 +37,19 @@ const TimeOptions: FC<Props> = ({ onToggle24hClock, onSelectTimeZone, timeFormat
     <div className="dark:border-darkgray-300 dark:bg-darkgray-200 rounded-sm border border-gray-200 bg-white px-4 pt-4 pb-3 shadow-sm">
       <div className="mb-4 flex">
         <div className="text-sm font-medium text-gray-600 dark:text-white">{t("time_options")}</div>
-        <div className="ml-auto flex items-center">
-          <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
-            {t("am_pm")}
-          </label>
-          <Switch
-            name="24hClock"
-            label={t("24_h")}
-            defaultChecked={is24hClock}
-            onCheckedChange={handle24hClockToggle}
-          />
-        </div>
+        {!hideTimeFormatToggle && (
+          <div className="ml-auto flex items-center">
+            <label className="ltl:mr-3 mr-2 align-text-top text-sm font-medium text-neutral-700 ltr:ml-3 rtl:mr-3 dark:text-white">
+              {t("am_pm")}
+            </label>
+            <Switch
+              name="24hClock"
+              label={t("24_h")}
+              defaultChecked={is24hClock}
+              onCheckedChange={handle24hClockToggle}
+            />
+          </div>
+        )}
       </div>
       <TimezoneSelect
         id="timeZone"
diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index e27ad60dc1..4fdc09a81f 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -215,11 +215,13 @@ function TimezoneDropdown({
   onChangeTimeZone,
   timeZone,
   timeFormat,
+  hideTimeFormatToggle,
 }: {
   onChangeTimeFormat: (newTimeFormat: string) => void;
   onChangeTimeZone: (newTimeZone: string) => void;
   timeZone?: string;
   timeFormat: string;
+  hideTimeFormatToggle?: boolean;
 }) {
   const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
 
@@ -261,6 +263,7 @@ function TimezoneDropdown({
             onSelectTimeZone={handleSelectTimeZone}
             onToggle24hClock={handleToggle24hClock}
             timeFormat={timeFormat}
+            hideTimeFormatToggle={hideTimeFormatToggle}
           />
         </Popover.Content>
       </Popover.Portal>
@@ -293,7 +296,14 @@ const useRouterQuery = <T extends string>(name: T) => {
 
 export type Props = AvailabilityTeamPageProps | AvailabilityPageProps | DynamicAvailabilityPageProps;
 
+const timeFormatTotimeFormatString = (timeFormat?: number | null) => {
+  if (!timeFormat) return null;
+  return timeFormat === 24 ? "HH:mm" : "h:mma";
+};
+
 const AvailabilityPage = ({ profile, eventType }: Props) => {
+  const { data: user } = trpc.useQuery(["viewer.me"]);
+  const timeFormatFromProfile = timeFormatTotimeFormatString(user?.timeFormat);
   const router = useRouter();
   const isEmbed = useIsEmbed();
   const query = dateQuerySchema.parse(router.query);
@@ -306,7 +316,7 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
   const isBackgroundTransparent = useIsBackgroundTransparent();
 
   const [timeZone, setTimeZone] = useState<string>();
-  const [timeFormat, setTimeFormat] = useState(detectBrowserTimeFormat);
+  const [timeFormat, setTimeFormat] = useState(timeFormatFromProfile || detectBrowserTimeFormat);
   const [isAvailableTimesVisible, setIsAvailableTimesVisible] = useState<boolean>();
   const [gateState, gateDispatcher] = useReducer(
     (state: GateState, newState: Partial<GateState>) => ({
@@ -357,9 +367,12 @@ const AvailabilityPage = ({ profile, eventType }: Props) => {
         onChangeTimeFormat={setTimeFormat}
         timeZone={timeZone}
         onChangeTimeZone={setTimeZone}
+        // Currently we don't allow the user to change the timeformat when they're logged in,
+        // the only way to change it is if they go to their profile.
+        hideTimeFormatToggle={!!timeFormatFromProfile}
       />
     ),
-    [timeZone, timeFormat]
+    [timeZone, timeFormat, timeFormatFromProfile]
   );
   const rawSlug = profile.slug ? profile.slug.split("/") : [];
   if (rawSlug.length > 1) rawSlug.pop(); //team events have team name as slug, but user events have [user]/[type] as slug.