From 112efbbda222d9095dc3108bbd5e01b81580b5fd Mon Sep 17 00:00:00 2001
From: Jeroen Reumkens <hello@jeroenreumkens.nl>
Date: Wed, 16 Nov 2022 21:03:19 +0100
Subject: [PATCH] CAL-300 Ensure we show the default calendar name based in the
 advanced tab for event types. (#5551)

---
 apps/web/components/eventtype/EventAdvancedTab.tsx        | 1 +
 .../features/calendars/DestinationCalendarSelector.tsx    | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/web/components/eventtype/EventAdvancedTab.tsx b/apps/web/components/eventtype/EventAdvancedTab.tsx
index 1be8e2a435..364426ddae 100644
--- a/apps/web/components/eventtype/EventAdvancedTab.tsx
+++ b/apps/web/components/eventtype/EventAdvancedTab.tsx
@@ -74,6 +74,7 @@ export const EventAdvancedTab = ({ eventType, team }: Pick<EventTypeSetupInfered
               defaultValue={eventType.destinationCalendar || undefined}
               render={({ field: { onChange, value } }) => (
                 <DestinationCalendarSelector
+                  destinationCalendar={eventType.destinationCalendar}
                   value={value ? value.externalId : undefined}
                   onChange={onChange}
                   hidePlaceholder
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index bb3cf0ba32..f169ef2d11 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -115,6 +115,11 @@ const DestinationCalendarSelector = ({
           value: `${cal.integration}:${cal.externalId}`,
         })),
     })) ?? [];
+
+  // Get primary calendar, which is shown in the placeholder since this is the calendar that will
+  // be used when no destination calendar is selected.
+  const primaryCalendar = query.data.connectedCalendars.filter((cal) => Boolean(cal.primary))[0];
+
   return (
     <div className="relative" title={`${t("select_destination_calendar")}: ${selectedOption?.label || ""}`}>
       <Select
@@ -124,7 +129,8 @@ const DestinationCalendarSelector = ({
             `${t("select_destination_calendar")}`
           ) : (
             <span>
-              {t("default_calendar_selected")} ({destinationCalendar?.externalId})
+              {t("default_calendar_selected")}{" "}
+              {primaryCalendar?.primary?.externalId && `(${primaryCalendar?.primary?.externalId})`}
             </span>
           )
         }