CAL-300 Ensure we show the default calendar name based in the advanced tab for event types. (#5551)

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

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>
           )
         }