fix(web): stop repeating email on destination calendar select

packages/web/src/booking/BookingSettingsSection.test.tsx

@@ -827,6 +827,47 @@ describe("BookingSettingsSection", () => {
     expect(writeText).not.toHaveBeenCalled();
   });
 
+  it("labels a Google primary destination calendar with the calendar name only", async () => {
+    const primary = createMockCalendar({
+      name: "host@example.com",
+      accountEmail: "host@example.com",
+      isPrimary: true,
+    });
+
+    userMetadataActions.set(healthyGoogleMetadata);
+
+    server.use(
+      rest.get(bookingPageUrl, (_req, res, ctx) =>
+        res(
+          ctx.json({
+            ...unconfiguredPage(),
+            destinationCalendarId: primary.id,
+            blockingCalendarIds: [primary.id],
+          }),
+        ),
+      ),
+    );
+
+    const { wrapper, queryClient } = createStoreWrapper();
+    queryClient.setQueryData(calendarQueryKeys.all, [primary]);
+
+    render(
+      <HotkeysProvider>
+        <BookingSettingsSection showShortcuts={false} />
+      </HotkeysProvider>,
+      { wrapper },
+    );
+
+    const combobox = await screen.findByRole("combobox", {
+      name: "Destination calendar",
+    });
+    const option = within(combobox).getByRole("option");
+    expect(option.textContent).toBe("host@example.com");
+    expect(
+      within(combobox).getByRole("group", { name: "host@example.com" }),
+    ).toBeInTheDocument();
+  });
+
   it("blocks enable without a destination calendar", async () => {
     const user = userEvent.setup({ delay: null });
 

packages/web/src/booking/BookingSettingsSection.tsx

@@ -257,6 +257,8 @@ export function BookingSettingsSection({
     availabilityCalendars,
     connections,
   );
+  const { groups: writableGroups, ungrouped: writableUngrouped } =
+    groupCalendarsByAccount(writableCalendars, connections);
   const updateForm = (patch: Partial<AdminPutBookingPageInput>) => {
     setForm((current) => ({ ...current, ...patch }));
     setEnableError(null);
@@ -439,12 +441,24 @@ export function BookingSettingsSection({
               No writable calendars
             </option>
           ) : (
-            writableCalendars.map((calendar) => (
-              <option key={calendar.id} value={calendar.id}>
-                {calendar.name}
-                {calendar.accountEmail ? ` (${calendar.accountEmail})` : ""}
-              </option>
-            ))
+            <>
+              {writableGroups
+                .filter((group) => group.calendars.length > 0)
+                .map((group) => (
+                  <optgroup key={group.accountEmail} label={group.accountEmail}>
+                    {group.calendars.map((calendar) => (
+                      <option key={calendar.id} value={calendar.id}>
+                        {calendar.name}
+                      </option>
+                    ))}
+                  </optgroup>
+                ))}
+              {writableUngrouped.map((calendar) => (
+                <option key={calendar.id} value={calendar.id}>
+                  {calendar.name}
+                </option>
+              ))}
+            </>
           )}
         </select>
       </div>