Uses utcOffset to display bookings according to current time & timeZone (#5050)

apps/web/components/booking/BookingListItem.tsx

@@ -206,6 +206,9 @@ function BookingListItem(booking: BookingItemProps) {
       },
     });
   };
+
+  const utcOffset = dayjs().tz(user?.timeZone).utcOffset();
+
   return (
     <>
       <RescheduleDialog
@@ -258,12 +261,14 @@ function BookingListItem(booking: BookingItemProps) {
           <div className="cursor-pointer py-4">
             <div className="text-sm leading-6 text-gray-900">{startTime}</div>
             <div className="text-sm text-gray-500">
-              {dayjs(booking.startTime)
-                .tz(user?.timeZone)
+              {dayjs
+                .utc(booking.startTime)
+                .utcOffset(utcOffset)
                 .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}{" "}
               -{" "}
-              {dayjs(booking.endTime)
-                .tz(user?.timeZone)
+              {dayjs
+                .utc(booking.endTime)
+                .utcOffset(utcOffset)
                 .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
             </div>
 
@@ -299,12 +304,14 @@ function BookingListItem(booking: BookingItemProps) {
             <div className="flex w-full items-center justify-between sm:hidden">
               <div className="text-sm leading-6 text-gray-900">{startTime}</div>
               <div className="pr-2 text-sm text-gray-500">
-                {dayjs(booking.startTime)
-                  .tz(user?.timeZone)
+                {dayjs
+                  .utc(booking.startTime)
+                  .utcOffset(utcOffset)
                   .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}{" "}
                 -{" "}
-                {dayjs(booking.endTime)
-                  .tz(user?.timeZone)
+                {dayjs
+                  .utc(booking.endTime)
+                  .utcOffset(utcOffset)
                   .format(user && user.timeFormat === 12 ? "h:mma" : "HH:mm")}
               </div>
             </div>

apps/web/lib/parseDate.ts

@@ -39,10 +39,20 @@ export const parseRecurringDates = (
   const rule = new RRule({
     ...restRecurringEvent,
     count: recurringCount,
-    dtstart: dayjs(startDate).toDate(),
+    dtstart: new Date(
+      Date.UTC(
+        dayjs.utc(startDate).get("year"),
+        dayjs.utc(startDate).get("month"),
+        dayjs.utc(startDate).get("date"),
+        dayjs.utc(startDate).get("hour"),
+        dayjs.utc(startDate).get("minute")
+      )
+    ),
   });
+
+  const utcOffset = dayjs(startDate).tz(timeZone).utcOffset();
   const dateStrings = rule.all().map((r) => {
-    return processDate(dayjs(r).tz(timeZone), i18n);
+    return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);
   });
   return [dateStrings, rule.all()];
 };
@@ -66,8 +76,9 @@ export const extractRecurringDates = (
     count: recurringInfo?._count.recurringEventId,
     dtstart: recurringInfo?._min.startTime,
   }).all();
+  const utcOffset = dayjs(recurringInfo?._min.startTime).tz(timeZone).utcOffset();
   const dateStrings = allDates.map((r) => {
-    return processDate(dayjs(r).tz(timeZone), i18n);
+    return processDate(dayjs.utc(r).utcOffset(utcOffset), i18n);
   });
   return [dateStrings, allDates];
 };

apps/web/pages/success.tsx

@@ -620,52 +620,60 @@ export function RecurringBookings({
     ? recurringBookings.sort((a, b) => (dayjs(a).isAfter(dayjs(b)) ? 1 : -1))
     : null;
 
-  return recurringBookingsSorted && listingStatus === "recurring" ? (
-    <>
-      {eventType.recurringEvent?.count && (
-        <span className="font-medium">
-          {getEveryFreqFor({
-            t,
-            recurringEvent: eventType.recurringEvent,
-            recurringCount: recurringBookings?.length ?? undefined,
-          })}
-        </span>
-      )}
-      {eventType.recurringEvent?.count &&
-        recurringBookingsSorted.slice(0, 4).map((dateStr, idx) => (
-          <div key={idx} className="mb-2">
-            {dayjs(dateStr).format("MMMM DD, YYYY")}
-            <br />
-            {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
-            <span className="text-bookinglight">
-              ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-            </span>
-          </div>
-        ))}
-      {recurringBookingsSorted.length > 4 && (
-        <Collapsible open={moreEventsVisible} onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
-          <CollapsibleTrigger
-            type="button"
-            className={classNames("flex w-full", moreEventsVisible ? "hidden" : "")}>
-            {t("plus_more", { count: recurringBookingsSorted.length - 4 })}
-          </CollapsibleTrigger>
-          <CollapsibleContent>
-            {eventType.recurringEvent?.count &&
-              recurringBookingsSorted.slice(4).map((dateStr, idx) => (
-                <div key={idx} className="mb-2">
-                  {dayjs(dateStr).format("MMMM DD, YYYY")}
-                  <br />
-                  {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
-                  <span className="text-bookinglight">
-                    ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-                  </span>
-                </div>
-              ))}
-          </CollapsibleContent>
-        </Collapsible>
-      )}
-    </>
-  ) : (
+  if (recurringBookingsSorted && listingStatus === "recurring") {
+    // recurring bookings should only be adjusted to the start date.
+    const utcOffset = dayjs(recurringBookingsSorted[0]).utcOffset();
+    return (
+      <>
+        {eventType.recurringEvent?.count && (
+          <span className="font-medium">
+            {getEveryFreqFor({
+              t,
+              recurringEvent: eventType.recurringEvent,
+              recurringCount: recurringBookings?.length ?? undefined,
+            })}
+          </span>
+        )}
+        {eventType.recurringEvent?.count &&
+          recurringBookingsSorted.slice(0, 4).map((dateStr, idx) => (
+            <div key={idx} className="mb-2">
+              {dayjs(dateStr).utcOffset(utcOffset).format("MMMM DD, YYYY")}
+              <br />
+              {dayjs(dateStr).utcOffset(utcOffset).format("LT")} -{" "}
+              {dayjs(dateStr).utcOffset(utcOffset).add(eventType.length, "m").format("LT")}{" "}
+              <span className="text-bookinglight">
+                ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+              </span>
+            </div>
+          ))}
+        {recurringBookingsSorted.length > 4 && (
+          <Collapsible open={moreEventsVisible} onOpenChange={() => setMoreEventsVisible(!moreEventsVisible)}>
+            <CollapsibleTrigger
+              type="button"
+              className={classNames("flex w-full", moreEventsVisible ? "hidden" : "")}>
+              {t("plus_more", { count: recurringBookingsSorted.length - 4 })}
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              {eventType.recurringEvent?.count &&
+                recurringBookingsSorted.slice(4).map((dateStr, idx) => (
+                  <div key={idx} className="mb-2">
+                    {dayjs(dateStr).utcOffset(utcOffset).format("MMMM DD, YYYY")}
+                    <br />
+                    {dayjs(dateStr).utcOffset(utcOffset).format("LT")} -{" "}
+                    {dayjs(dateStr).utcOffset(utcOffset).add(eventType.length, "m").format("LT")}{" "}
+                    <span className="text-bookinglight">
+                      ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
+                    </span>
+                  </div>
+                ))}
+            </CollapsibleContent>
+          </Collapsible>
+        )}
+      </>
+    );
+  }
+
+  return (
     <>
       {date.format("MMMM DD, YYYY")}
       <br />