From 2462e8e597cb62e8240c992f626314b8c50b33cd Mon Sep 17 00:00:00 2001
From: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
Date: Wed, 8 Feb 2023 16:13:10 -0500
Subject: [PATCH] Small UI fixes for seats & destination calendars (#6859)

* Do not add former time for events on seats

* Default display destination calendar

* Add seats badge to event type item

* Add string

* Actively watch seats enabled option for requires confirmation

* Only show former time when there is a rescheduleUid
---
 .../components/booking/pages/BookingPage.tsx  |  2 +-
 .../components/eventtype/EventAdvancedTab.tsx |  2 +-
 apps/web/public/static/locales/en/common.json |  3 ++-
 .../calendars/DestinationCalendarSelector.tsx |  8 +++++--
 .../components/EventTypeDescription.tsx       | 18 ++++++++++++++-
 packages/features/tips/Tips.tsx               |  2 +-
 packages/trpc/server/routers/viewer.tsx       | 23 +++++++++++++++++--
 .../trpc/server/routers/viewer/bookings.tsx   |  2 +-
 .../trpc/server/routers/viewer/eventTypes.tsx |  1 +
 9 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/apps/web/components/booking/pages/BookingPage.tsx b/apps/web/components/booking/pages/BookingPage.tsx
index eaf35347d5..88039a5eb1 100644
--- a/apps/web/components/booking/pages/BookingPage.tsx
+++ b/apps/web/components/booking/pages/BookingPage.tsx
@@ -167,7 +167,7 @@ const BookingPage = ({
           isSuccessBookingPage: true,
           email: bookingForm.getValues("email"),
           eventTypeSlug: eventType.slug,
-          formerTime: booking?.startTime.toString(),
+          ...(rescheduleUid && booking?.startTime && { formerTime: booking.startTime.toString() }),
         },
       });
     },
diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 4088a0f922..07b1488fdd 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -74,7 +74,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupProps,
   const [selectedCustomInputModalOpen, setSelectedCustomInputModalOpen] = useState(false);
   const [requiresConfirmation, setRequiresConfirmation] = useState(eventType.requiresConfirmation);
   const placeholderHashedLink = `${CAL_URL}/d/${hashedUrl}/${eventType.slug}`;
-  const seatsEnabled = formMethods.getValues("seatsPerTimeSlotEnabled");
+  const seatsEnabled = formMethods.watch("seatsPerTimeSlotEnabled");
 
   const removeCustom = (index: number) => {
     formMethods.getValues("customInputs").splice(index, 1);
diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json
index aa2134801e..82cdda6505 100644
--- a/apps/web/public/static/locales/en/common.json
+++ b/apps/web/public/static/locales/en/common.json
@@ -1588,5 +1588,6 @@
   "meetings_are_better_with_the_right": "Meetings are better with the right team members there. Invite them now.",
   "create_a_one_one_template": "Create a one-one one template for an event type and distribute it to multiple members.",
   "collective_or_roundrobin": "Collective or round-robin",
-  "book_your_team_members": "Book your team members together with collective events or cycle through to get the right person with round-robin."
+  "book_your_team_members": "Book your team members together with collective events or cycle through to get the right person with round-robin.",
+  "event_type_seats": "{{numberOfSeats}} seats" 
 }
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index d2fb3570fd..7b05f36bc1 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -121,6 +121,8 @@ const DestinationCalendarSelector = ({
   // be used when no destination calendar is selected.
   const primaryCalendar = query.data.destinationCalendarEmail;
 
+  const queryDestinationCalendar = query.data.destinationCalendar;
+
   return (
     <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
       <Select
@@ -129,8 +131,10 @@ const DestinationCalendarSelector = ({
           !hidePlaceholder ? (
             `${t("select_destination_calendar")}`
           ) : (
-            <span>
-              {t("default_calendar_selected")} {primaryCalendar && `(${primaryCalendar})`}
+            <span className="min-w-0 overflow-hidden truncate whitespace-nowrap">
+              {t("default_calendar_selected")}{" "}
+              {queryDestinationCalendar.name &&
+                `(${queryDestinationCalendar?.integration} - ${queryDestinationCalendar.name})`}
             </span>
           )
         }
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index af569353c1..97876f9496 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -9,7 +9,15 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { baseEventTypeSelect } from "@calcom/prisma";
 import { EventTypeModel } from "@calcom/prisma/zod";
 import { Badge } from "@calcom/ui";
-import { FiClock, FiUsers, FiRefreshCw, FiCreditCard, FiClipboard, FiPlus } from "@calcom/ui/components/icon";
+import {
+  FiClock,
+  FiUsers,
+  FiRefreshCw,
+  FiCreditCard,
+  FiClipboard,
+  FiPlus,
+  FiUser,
+} from "@calcom/ui/components/icon";
 
 export type EventTypeDescriptionProps = {
   eventType: Pick<
@@ -17,6 +25,7 @@ export type EventTypeDescriptionProps = {
     Exclude<keyof typeof baseEventTypeSelect, "recurringEvent"> | "metadata"
   > & {
     recurringEvent: Prisma.JsonValue;
+    seatsPerTimeSlot?: number;
   };
   className?: string;
 };
@@ -105,6 +114,13 @@ export const EventTypeDescription = ({ eventType, className }: EventTypeDescript
           ) : (
             <></>
           )}
+          {eventType.seatsPerTimeSlot && (
+            <li>
+              <Badge variant="gray" size="lg" StartIcon={FiUser}>
+                <p>{t("event_type_seats", { numberOfSeats: eventType.seatsPerTimeSlot })} </p>
+              </Badge>
+            </li>
+          )}
         </ul>
       </div>
     </>
diff --git a/packages/features/tips/Tips.tsx b/packages/features/tips/Tips.tsx
index 87285166bc..f4dd234d59 100644
--- a/packages/features/tips/Tips.tsx
+++ b/packages/features/tips/Tips.tsx
@@ -69,7 +69,7 @@ export const tips = [
     title: "Automate Workflows",
     description: "Make time work for you and automate tasks",
     href: "https://go.cal.com/workflows",
-  },  
+  },
 ];
 
 export default function Tips() {
diff --git a/packages/trpc/server/routers/viewer.tsx b/packages/trpc/server/routers/viewer.tsx
index 6826c46a69..8a1bd58ee7 100644
--- a/packages/trpc/server/routers/viewer.tsx
+++ b/packages/trpc/server/routers/viewer.tsx
@@ -1,4 +1,4 @@
-import { AppCategories, BookingStatus, IdentityProvider, Prisma } from "@prisma/client";
+import { AppCategories, BookingStatus, DestinationCalendar, IdentityProvider, Prisma } from "@prisma/client";
 import _ from "lodash";
 import { authenticator } from "otplib";
 import z from "zod";
@@ -374,9 +374,28 @@ const loggedInViewerRouter = router({
       destinationCalendarEmail = destinationCal?.email ?? user.destinationCalendar?.externalId;
     }
 
+    let destinationCalendarName = user.destinationCalendar?.externalId || "";
+    let destinationCalendarIntegration = "";
+
+    for (const integration of connectedCalendars) {
+      if (integration.calendars) {
+        for (const calendar of integration.calendars) {
+          if (calendar.externalId === user.destinationCalendar?.externalId) {
+            destinationCalendarName = calendar.name || calendar.externalId;
+            destinationCalendarIntegration = integration.integration.title || "";
+            break;
+          }
+        }
+      }
+    }
+
     return {
       connectedCalendars,
-      destinationCalendar: user.destinationCalendar,
+      destinationCalendar: {
+        ...(user.destinationCalendar as DestinationCalendar),
+        name: destinationCalendarName,
+        integration: destinationCalendarIntegration,
+      },
       destinationCalendarEmail,
     };
   }),
diff --git a/packages/trpc/server/routers/viewer/bookings.tsx b/packages/trpc/server/routers/viewer/bookings.tsx
index abeadd5297..7d81b6c967 100644
--- a/packages/trpc/server/routers/viewer/bookings.tsx
+++ b/packages/trpc/server/routers/viewer/bookings.tsx
@@ -320,7 +320,7 @@ export const bookingsRouter = router({
 
       const recurringInfo = recurringInfoBasic.map(
         (
-          info: (typeof recurringInfoBasic)[number]
+          info: typeof recurringInfoBasic[number]
         ): {
           recurringEventId: string | null;
           count: number;
diff --git a/packages/trpc/server/routers/viewer/eventTypes.tsx b/packages/trpc/server/routers/viewer/eventTypes.tsx
index efae2f88fe..87f859b07b 100644
--- a/packages/trpc/server/routers/viewer/eventTypes.tsx
+++ b/packages/trpc/server/routers/viewer/eventTypes.tsx
@@ -202,6 +202,7 @@ export const eventTypesRouter = router({
           },
         },
       },
+      seatsPerTimeSlot: true,
       ...baseEventTypeSelect,
     });