import { ArrowRightIcon } from "@heroicons/react/solid"; import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { List } from "@calcom/ui/List"; import { SkeletonAvatar, SkeletonText, SkeletonButton } from "@calcom/ui/v2"; import { CalendarItem } from "../components/CalendarItem"; import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem"; import { CreateEventsOnCalendarSelect } from "../components/CreateEventsOnCalendarSelect"; interface IConnectCalendarsProps { nextStep: () => void; } const ConnectedCalendars = (props: IConnectCalendarsProps) => { const { nextStep } = props; const queryConnectedCalendars = trpc.useQuery(["viewer.connectedCalendars"]); const { t } = useLocale(); const queryIntegrations = trpc.useQuery([ "viewer.integrations", { variant: "calendar", onlyInstalled: false }, ]); const firstCalendar = queryConnectedCalendars.data?.connectedCalendars.find( (item) => item.calendars && item.calendars?.length > 0 ); const disabledNextButton = firstCalendar === undefined; const destinationCalendar = queryConnectedCalendars.data?.destinationCalendar; return ( <> {/* Already connected calendars */} {firstCalendar && firstCalendar.integration && firstCalendar.integration.title && firstCalendar.integration.imageSrc && ( <> 0 ? firstCalendar.calendars[0].externalId : "" } calendars={firstCalendar.calendars} integrationType={firstCalendar.integration.type} /> {/* Create event on selected calendar */}

{t("connect_calendars_from_app_store")}

)} {/* Connect calendars list */} {firstCalendar === undefined && queryIntegrations.data && queryIntegrations.data.items.length > 0 && ( {queryIntegrations.data && queryIntegrations.data.items.map((item) => (
  • {item.title && item.imageSrc && ( )}
  • ))}
    )} {queryConnectedCalendars.isLoading && ( )} ); }; export { ConnectedCalendars };