import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { List } from "@calcom/ui"; import { ArrowRight } from "@calcom/ui/components/icon"; import { AppConnectionItem } from "../components/AppConnectionItem"; import { ConnectedCalendarItem } from "../components/ConnectedCalendarItem"; import { CreateEventsOnCalendarSelect } from "../components/CreateEventsOnCalendarSelect"; import { StepConnectionLoader } from "../components/StepConnectionLoader"; interface IConnectCalendarsProps { nextStep: () => void; } const ConnectedCalendars = (props: IConnectCalendarsProps) => { const { nextStep } = props; const queryConnectedCalendars = trpc.viewer.connectedCalendars.useQuery({ onboarding: true }); const { t } = useLocale(); const queryIntegrations = trpc.viewer.integrations.useQuery({ 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 */} {!queryConnectedCalendars.isLoading && firstCalendar && firstCalendar.integration && firstCalendar.integration.title && firstCalendar.integration.logo && ( <> 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.logo && ( )}
  • ))}
    )} {queryIntegrations.isLoading && } ); }; export { ConnectedCalendars };