From 33f35e77fde1025e1453fe344d57926bc69b60d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Efra=C3=ADn=20Roch=C3=ADn?= <roae.85@gmail.com>
Date: Mon, 6 Mar 2023 16:12:43 -0700
Subject: [PATCH] Fix/incorrect timezone on booking success (#7544)

* set the selected timezone to formatToLocalizedTimezone function

* remove console.logs
---
 apps/web/pages/booking/[uid].tsx | 7 +++----
 packages/lib/date-fns/index.ts   | 3 ++-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/pages/booking/[uid].tsx b/apps/web/pages/booking/[uid].tsx
index a002ce410d..dbc1071cce 100644
--- a/apps/web/pages/booking/[uid].tsx
+++ b/apps/web/pages/booking/[uid].tsx
@@ -796,7 +796,6 @@ export function RecurringBookings({
     t,
     i18n: { language },
   } = useLocale();
-
   const recurringBookingsSorted = recurringBookings
     ? recurringBookings.sort((a: ConfigType, b: ConfigType) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
     : null;
@@ -823,7 +822,7 @@ export function RecurringBookings({
               {formatToLocalizedTime(dayjs(dateStr), language, undefined, !is24h)} -{" "}
               {formatToLocalizedTime(dayjs(dateStr).add(duration, "m"), language, undefined, !is24h)}{" "}
               <span className="text-bookinglight">
-                ({formatToLocalizedTimezone(dayjs(dateStr), language)})
+                ({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())})
               </span>
             </div>
           ))}
@@ -843,7 +842,7 @@ export function RecurringBookings({
                     {formatToLocalizedTime(date, language, undefined, !is24h)} -{" "}
                     {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h)}{" "}
                     <span className="text-bookinglight">
-                      ({formatToLocalizedTimezone(dayjs(dateStr), language)})
+                      ({formatToLocalizedTimezone(dayjs(dateStr), language, timeZone())})
                     </span>
                   </div>
                 ))}
@@ -860,7 +859,7 @@ export function RecurringBookings({
       <br />
       {formatToLocalizedTime(date, language, undefined, !is24h)} -{" "}
       {formatToLocalizedTime(dayjs(date).add(duration, "m"), language, undefined, !is24h)}{" "}
-      <span className="text-bookinglight">({formatToLocalizedTimezone(date, language)})</span>
+      <span className="text-bookinglight">({formatToLocalizedTimezone(date, language, timeZone())})</span>
     </div>
   );
 }
diff --git a/packages/lib/date-fns/index.ts b/packages/lib/date-fns/index.ts
index 9d1b1744f6..5f474a6f9e 100644
--- a/packages/lib/date-fns/index.ts
+++ b/packages/lib/date-fns/index.ts
@@ -75,12 +75,13 @@ export const formatToLocalizedTime = (
 export const formatToLocalizedTimezone = (
   date: Date | Dayjs,
   locale: string | undefined = undefined,
+  timeZone: Intl.DateTimeFormatOptions["timeZone"],
   timeZoneName: Intl.DateTimeFormatOptions["timeZoneName"] = "long"
 ) => {
   // Intl.DateTimeFormat doesn't format into a timezone only, so we must
   //  formatToParts() and return the piece we want
   const theDate = date instanceof dayjs ? (date as Dayjs).toDate() : (date as Date);
-  return Intl.DateTimeFormat(locale, { timeZoneName })
+  return Intl.DateTimeFormat(locale, { timeZoneName, timeZone })
     .formatToParts(theDate)
     .find((d) => d.type == "timeZoneName")?.value;
 };