fix Former time in wrong time zone (Rescheduling) (#9039)

* fix Former time in wrong time zone (Rescheduling)

* eslint fixed

* yarn.lock push

* little bit of code formatting

* [eslint: fix] missing semi-colon

* linting errors fixed

* Update packages/lib/parse-dates.ts

* returning yarn lock to main

* Refactor constant and functions

* Consider time format in new function

* Fix 24 time format with am/pm

---------

Co-authored-by: alannnc <alannnc@gmail.com>

apps/web/components/booking/pages/BookingPage.tsx

@@ -22,6 +22,7 @@ import {
   useIsEmbed,
 } from "@calcom/embed-core/embed-iframe";
 import { createBooking, createRecurringBooking } from "@calcom/features/bookings/lib";
+import { useTimePreferences } from "@calcom/features/bookings/lib";
 import {
   getBookingFieldsWithSystemFields,
   SystemField,
@@ -39,7 +40,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import useTheme from "@calcom/lib/hooks/useTheme";
 import { useTypedQuery } from "@calcom/lib/hooks/useTypedQuery";
 import { HttpError } from "@calcom/lib/http-error";
-import { parseDate, parseRecurringDates } from "@calcom/lib/parse-dates";
+import { parseDate, parseDateTimeWithTimeZone, parseRecurringDates } from "@calcom/lib/parse-dates";
 import { getEveryFreqFor } from "@calcom/lib/recurringStrings";
 import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry";
 import { TimeFormat } from "@calcom/lib/timeFormat";
@@ -231,6 +232,8 @@ const BookingPage = ({
     {}
   );
 
+  const { timezone } = useTimePreferences();
+
   const reserveSlot = () => {
     if (queryDuration) {
       reserveSlotMutation.mutate({
@@ -602,7 +605,7 @@ const BookingPage = ({
                         <Calendar className="ml-[2px] -mt-1 inline-block h-4 w-4 ltr:mr-[10px] rtl:ml-[10px]" />
                         {isClientTimezoneAvailable &&
                           typeof booking.startTime === "string" &&
-                          parseDate(dayjs(booking.startTime), i18n.language, {
+                          parseDateTimeWithTimeZone(booking.startTime, i18n.language, timezone, {
                             selectedTimeFormat: timeFormat,
                           })}
                       </p>

packages/lib/parse-dates.ts

@@ -25,6 +25,45 @@ export const parseDate = (date: string | null | Dayjs, language: string, options
   return processDate(date, language, options);
 };
 
+const timeOptions: Intl.DateTimeFormatOptions = {
+  hour12: true,
+  hourCycle: "h12",
+  hour: "numeric",
+  minute: "numeric",
+};
+
+const dateOptions: Intl.DateTimeFormatOptions = {
+  weekday: "long",
+  year: "numeric",
+  month: "long",
+  day: "numeric",
+};
+
+export const parseDateTimeWithTimeZone = (
+  date: Date,
+  language: string,
+  timezone: string,
+  options?: ExtraOptions
+): string => {
+  timeOptions.timeZone = timezone;
+  dateOptions.timeZone = timezone;
+
+  if (options?.withDefaultTimeFormat) {
+    timeOptions.hourCycle = "h12";
+  } else if (options?.selectedTimeFormat) {
+    timeOptions.hourCycle = options.selectedTimeFormat === TimeFormat.TWELVE_HOUR ? "h12" : "h24";
+    if (timeOptions.hourCycle === "h24") {
+      delete timeOptions.hour12;
+    }
+  }
+  const formattedDate = new Date(date).toLocaleDateString(language, dateOptions);
+  const formattedTime = new Date(date)
+    .toLocaleTimeString(language, timeOptions)
+    .replace(" ", "")
+    .toLowerCase();
+  return `${formattedTime}, ${formattedDate}`;
+};
+
 export const parseRecurringDates = (
   {
     startDate,