import { Trans } from "next-i18next"; import Link from "next/link"; import { Fragment } from "react"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui"; import Badge from "@calcom/ui/v2/core/Badge"; import EmptyScreen from "@calcom/ui/v2/core/EmptyScreen"; import Meta from "@calcom/ui/v2/core/Meta"; import { getLayout } from "@calcom/ui/v2/core/layouts/AdminLayout"; import { List, ListItem, ListItemText, ListItemTitle } from "@calcom/ui/v2/modules/List"; import DestinationCalendarSelector from "@calcom/ui/v2/modules/event-types/DestinationCalendarSelector"; import DisconnectIntegration from "@calcom/ui/v2/modules/integrations/DisconnectIntegration"; import { QueryCell } from "@lib/QueryCell"; import { CalendarSwitch } from "@components/v2/settings/CalendarSwitch"; const CalendarsView = () => { const { t } = useLocale(); const utils = trpc.useContext(); const query = trpc.useQuery(["viewer.connectedCalendars"]); const mutation = trpc.useMutation("viewer.setDestinationCalendar", { async onSettled() { await utils.invalidateQueries(["viewer.connectedCalendars"]); }, }); return ( <> { console.log("🚀 ~ file: calendars.tsx ~ line 28 ~ CalendarsView ~ data", data); return data.connectedCalendars.length ? (

{t("add_to_calendar")}

Where to add events when you re booked. You can override this on a per-event basis in advanced settings in the event type.

{t("check_for_conflicts")}

{t("select_calendars")}

{data.connectedCalendars.map((item) => ( {item.calendars && (
{ // eslint-disable-next-line @next/next/no-img-element item.integration.logo && ( {item.integration.title} ) }
{item.integration.name || item.integration.title} {data?.destinationCalendar?.credentialId === item.credentialId && ( Default )} {item.integration.description}

{t("toggle_calendars_conflict")}

    {item.calendars.map((cal) => ( ))}
)}
))}
) : ( console.log("Button Clicked")} /> ); }} /> ); }; CalendarsView.getLayout = getLayout; export default CalendarsView;