import { Trans } from "next-i18next"; import Link from "next/link"; import { useRouter } from "next/router"; import { Fragment } from "react"; import DisconnectIntegration from "@calcom/features/apps/components/DisconnectIntegration"; import DestinationCalendarSelector from "@calcom/features/calendars/DestinationCalendarSelector"; import { getLayout } from "@calcom/features/settings/layouts/SettingsLayout"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Alert, Badge, Button, EmptyScreen, List, ListItem, ListItemText, ListItemTitle, Meta, SkeletonButton, SkeletonContainer, SkeletonText, showToast, } from "@calcom/ui"; import { FiPlus, FiCalendar } from "@calcom/ui/components/icon"; import { QueryCell } from "@lib/QueryCell"; import { CalendarSwitch } from "@components/settings/CalendarSwitch"; const SkeletonLoader = () => { return (
); }; const AddCalendarButton = () => { const { t } = useLocale(); return ( <> ); }; const CalendarsView = () => { const { t } = useLocale(); const router = useRouter(); const utils = trpc.useContext(); const query = trpc.viewer.connectedCalendars.useQuery(); const mutation = trpc.viewer.setDestinationCalendar.useMutation({ async onSettled() { await utils.viewer.connectedCalendars.invalidate(); }, onSuccess: async () => { showToast(t("calendar_updated_successfully"), "success"); }, onError: () => { showToast(t("unexpected_error_try_again"), "error"); }, }); return ( <> } /> } success={({ 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.error && item.error.message && ( {/* @TODO: add a reconnect button, that calls add api and delete old credential */} query.refetch()} buttonProps={{ className: "border border-gray-300 py-[2px]", color: "secondary", }} /> } /> )} {item?.error === undefined && 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) => ( ))}
)}
))}
) : ( router.push("/apps/categories/calendar")} /> ); }} error={() => { return ( An error ocurred while fetching your Calendars. query.refetch()}> try again . } severity="error" /> ); }} /> ); }; CalendarsView.getLayout = getLayout; export default CalendarsView;