From 60c97c9fa9f6b51af7f9f459a0baf2e28283c7a6 Mon Sep 17 00:00:00 2001
From: buschco <colin@busch.dev>
Date: Mon, 16 May 2022 19:57:53 +0200
Subject: [PATCH] respect local set timezone and update url on mismatch (#2506)

* ensure `timeZone()` will make its way to the URL

fixes https://github.com/calcom/cal.com/issues/2482

* keep `timeZone()` and the offset from URL in sync

Co-authored-by: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../booking/pages/AvailabilityPage.tsx        | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/apps/web/components/booking/pages/AvailabilityPage.tsx b/apps/web/components/booking/pages/AvailabilityPage.tsx
index 25fb7b0d..604a9ace 100644
--- a/apps/web/components/booking/pages/AvailabilityPage.tsx
+++ b/apps/web/components/booking/pages/AvailabilityPage.tsx
@@ -16,7 +16,7 @@ import dayjs, { Dayjs } from "dayjs";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import utc from "dayjs/plugin/utc";
 import { useRouter } from "next/router";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { FormattedNumber, IntlProvider } from "react-intl";
 import { Frequency as RRuleFrequency } from "rrule";
 
@@ -119,26 +119,36 @@ const AvailabilityPage = ({ profile, plan, eventType, workingHours, previousPage
     );
   }, [telemetry]);
 
-  const changeDate = (newDate: Dayjs) => {
-    router.replace(
-      {
-        query: {
-          ...router.query,
-          date: newDate.format("YYYY-MM-DDZZ"),
+  const changeDate = useCallback(
+    (newDate: Dayjs) => {
+      router.replace(
+        {
+          query: {
+            ...router.query,
+            date: newDate.tz(timeZone(), true).format("YYYY-MM-DDZZ"),
+          },
         },
-      },
-      undefined,
-      {
-        shallow: true,
-      }
-    );
-  };
+        undefined,
+        { shallow: true }
+      );
+    },
+    [router]
+  );
+
+  useEffect(() => {
+    if (
+      selectedDate != null &&
+      selectedDate?.utcOffset() !== selectedDate.clone().utcOffset(0).tz(timeZone()).utcOffset()
+    ) {
+      changeDate(selectedDate.tz(timeZone(), true));
+    }
+  }, [selectedDate, changeDate]);
 
   const handleSelectTimeZone = (selectedTimeZone: string): void => {
+    timeZone(selectedTimeZone);
     if (selectedDate) {
       changeDate(selectedDate.tz(selectedTimeZone, true));
     }
-    timeZone(selectedTimeZone);
     setIsTimeOptionsOpen(false);
   };