From fb436996c0f835d6406792af68befd0a1cfe0b34 Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Wed, 11 May 2022 03:59:49 -0400
Subject: [PATCH] Change date format for RecurringBookings (#2707)

* Change date format for RecurringBookings

* Missing bookingId query param

Co-authored-by: Leo Giovanetti <hello@leog.me>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../components/booking/pages/BookingPage.tsx  |  3 ++-
 apps/web/pages/success.tsx                    | 22 ++++++-------------
 2 files changed, 9 insertions(+), 16 deletions(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index 1443f8318d..789576f23e 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -153,7 +153,7 @@ const BookingPage = ({
 
   const recurringMutation = useMutation(createRecurringBooking, {
     onSuccess: async (responseData = []) => {
-      const { attendees = [], recurringEventId } = responseData[0] || {};
+      const { attendees = [], id, recurringEventId } = responseData[0] || {};
       const location = (function humanReadableLocation(location) {
         if (!location) {
           return;
@@ -177,6 +177,7 @@ const BookingPage = ({
           email: attendees[0].email,
           location,
           eventName: profile.eventName || "",
+          bookingId: id,
         },
       });
     },
diff --git a/apps/web/pages/success.tsx b/apps/web/pages/success.tsx
index 21246f120b..52b0e715e5 100644
--- a/apps/web/pages/success.tsx
+++ b/apps/web/pages/success.tsx
@@ -310,14 +310,6 @@ export default function Success(props: SuccessProps) {
                           <div className="col-span-2 mb-6">{eventName}</div>
                           <div className="font-medium">{t("when")}</div>
                           <div className="col-span-2 mb-6">
-                            {date.format("MMMM DD, YYYY")}
-                            <br />
-                            {date.format("LT")} - {date.add(props.eventType.length, "m").format("LT")}{" "}
-                            <span className="text-bookinglight">
-                              ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
-                            </span>
-                          </div>
-                          <div className="col-span-2">
                             <RecurringBookings
                               isReschedule={reschedule === "true"}
                               eventType={props.eventType}
@@ -327,7 +319,7 @@ export default function Success(props: SuccessProps) {
                             />
                           </div>
                           <div className="font-medium">{t("who")}</div>
-                          <div className="col-span-2">
+                          <div className="col-span-2 mb-6">
                             {bookingInfo?.user && (
                               <div className="mb-3">
                                 <p>{bookingInfo.user.name}</p>
@@ -556,9 +548,9 @@ function RecurringBookings({
       {eventType.recurringEvent?.count &&
         recurringBookings.slice(0, 4).map((dateStr, idx) => (
           <div key={idx} className="mb-2">
-            {dayjs(dateStr).format("dddd, DD MMMM YYYY")}
+            {dayjs(dateStr).format("MMMM DD, YYYY")}
             <br />
-            {dayjs(dateStr).format(is24h ? "H:mm" : "h:mma")} - {eventType.length} mins{" "}
+            {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
             <span className="text-bookinglight">
               ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
             </span>
@@ -575,9 +567,9 @@ function RecurringBookings({
             {eventType.recurringEvent?.count &&
               recurringBookings.slice(4).map((dateStr, idx) => (
                 <div key={idx} className="mb-2">
-                  {dayjs(dateStr).format("dddd, DD MMMM YYYY")}
+                  {dayjs(dateStr).format("MMMM DD, YYYY")}
                   <br />
-                  {dayjs(dateStr).format(is24h ? "H:mm" : "h:mma")} - {eventType.length} mins{" "}
+                  {dayjs(dateStr).format("LT")} - {dayjs(dateStr).add(eventType.length, "m").format("LT")}{" "}
                   <span className="text-bookinglight">
                     ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
                   </span>
@@ -589,9 +581,9 @@ function RecurringBookings({
     </>
   ) : !eventType.recurringEvent.freq ? (
     <>
-      {date.format("dddd, DD MMMM YYYY")}
+      {date.format("MMMM DD, YYYY")}
       <br />
-      {date.format(is24h ? "H:mm" : "h:mma")} - {eventType.length} mins{" "}
+      {date.format("LT")} - {date.add(eventType.length, "m").format("LT")}{" "}
       <span className="text-bookinglight">
         ({localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess()})
       </span>