import { useMutation } from "@tanstack/react-query"; import { Fragment } from "react"; import { InstallAppButton } from "@calcom/app-store/components"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { Alert } from "@calcom/ui/Alert"; import Button from "@calcom/ui/Button"; import { List } from "@calcom/ui/List"; import { ShellSubHeading } from "@calcom/ui/Shell"; import Switch from "@calcom/ui/Switch"; import SkeletonLoader from "@calcom/ui/apps/SkeletonLoader"; import showToast from "@calcom/ui/v2/core/notifications"; import { QueryCell } from "@lib/QueryCell"; import AdditionalCalendarSelector from "@components/AdditionalCalendarSelector"; import DestinationCalendarSelector from "@components/DestinationCalendarSelector"; import DisconnectIntegration from "./DisconnectIntegration"; import IntegrationListItem from "./IntegrationListItem"; import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections"; type Props = { onChanged: () => unknown | Promise; fromOnboarding?: boolean; }; function CalendarSwitch(props: { type: string; externalId: string; title: string; defaultSelected: boolean; }) { const utils = trpc.useContext(); const mutation = useMutation< unknown, unknown, { isOn: boolean; } >( async ({ isOn }) => { const body = { integration: props.type, externalId: props.externalId, }; if (isOn) { const res = await fetch("/api/availability/calendar", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(body), }); if (!res.ok) { throw new Error("Something went wrong"); } } else { const res = await fetch("/api/availability/calendar", { method: "DELETE", headers: { "Content-Type": "application/json", }, body: JSON.stringify(body), }); if (!res.ok) { throw new Error("Something went wrong"); } } }, { async onSettled() { await utils.invalidateQueries(["viewer.integrations"]); }, onError() { showToast(`Something went wrong when toggling "${props.title}""`, "error"); }, } ); return (
{ mutation.mutate({ isOn }); }} />
); } function CalendarList(props: Props) { const { t } = useLocale(); const query = trpc.useQuery(["viewer.integrations", { variant: "calendar", onlyInstalled: false }]); return ( ( {data.items.map((item) => ( ( )} onChanged={() => props.onChanged()} /> } /> ))} )} /> ); } function ConnectedCalendarsList(props: Props) { const { t } = useLocale(); const query = trpc.useQuery(["viewer.connectedCalendars"], { suspense: true }); const { fromOnboarding } = props; return ( null} success={({ data }) => { if (!data.connectedCalendars.length) { return null; } return ( {data.connectedCalendars.map((item) => ( {item.calendars ? ( ( )} onOpenChange={props.onChanged} /> }> {!fromOnboarding && ( <>

{t("toggle_calendars_conflict")}

    {item.calendars.map((cal) => ( ))}
)}
) : ( ( )} onOpenChange={() => props.onChanged()} /> } /> )}
))}
); }} /> ); } export function CalendarListContainer(props: { heading?: boolean; items?: inferQueryOutput<"viewer.integrations">["items"]; fromOnboarding?: boolean; }) { const { t } = useLocale(); const { heading = true, fromOnboarding } = props; const utils = trpc.useContext(); const onChanged = () => Promise.allSettled([ utils.invalidateQueries(["viewer.integrations", { variant: "calendar", onlyInstalled: true }], { exact: true, }), utils.invalidateQueries(["viewer.connectedCalendars"]), ]); const query = trpc.useQuery(["viewer.connectedCalendars"]); const installedCalendars = trpc.useQuery([ "viewer.integrations", { variant: "calendar", onlyInstalled: true }, ]); const mutation = trpc.useMutation("viewer.setDestinationCalendar"); return ( } success={({ data }) => { return ( <> {(!!data.connectedCalendars.length || !!installedCalendars.data?.items.length) && ( <> {heading && ( } subtitle={t("configure_how_your_event_types_interact")} actions={
{!!data.connectedCalendars.length && (
)}
} /> )} )} {fromOnboarding && ( <> {!!query.data?.connectedCalendars.length && ( } /> )} )} ); }} /> ); }