import Head from "next/head"; import Link from "next/link"; import prisma from "../../lib/prisma"; import Shell from "../../components/Shell"; import { useEffect, useState } from "react"; import { getSession, useSession } from "next-auth/client"; import { CalendarIcon, CheckCircleIcon, ChevronRightIcon, PlusIcon, XCircleIcon, } from "@heroicons/react/solid"; import { InformationCircleIcon } from "@heroicons/react/outline"; import { Switch } from "@headlessui/react"; import Loader from '@components/Loader'; export default function Home({ integrations }) { const [session, loading] = useSession(); const [showAddModal, setShowAddModal] = useState(false); const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false); const [selectableCalendars, setSelectableCalendars] = useState([]); function toggleAddModal() { setShowAddModal(!showAddModal); } function toggleShowCalendarModal() { setShowSelectCalendarModal(!showSelectCalendarModal); } function loadCalendars() { fetch("api/availability/calendar") .then((response) => response.json()) .then((data) => { setSelectableCalendars(data); }); } function integrationHandler(type) { fetch("/api/integrations/" + type.replace("_", "") + "/add") .then((response) => response.json()) .then((data) => (window.location.href = data.url)); } function calendarSelectionHandler(calendar) { return (selected) => { const cals = [...selectableCalendars]; const i = cals.findIndex((c) => c.externalId === calendar.externalId); cals[i].selected = selected; setSelectableCalendars(cals); if (selected) { fetch("api/availability/calendar", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(cals[i]), }).then((response) => response.json()); } else { fetch("api/availability/calendar", { method: "DELETE", headers: { "Content-Type": "application/json", }, body: JSON.stringify(cals[i]), }).then((response) => response.json()); } }; } function getCalendarIntegrationImage(integrationType: string) { switch (integrationType) { case "google_calendar": return "integrations/google-calendar.svg"; case "office365_calendar": return "integrations/outlook.svg"; default: return ""; } } function classNames(...classes) { return classes.filter(Boolean).join(" "); } useEffect(loadCalendars, [integrations]); if (loading) { return ( ); } return (
Integrations | Calendso Add new integration }>
{integrations.filter((ig) => ig.credential).length !== 0 ? ( ) : (

You don't have any integrations added.

You currently do not have any integrations set up. Add your first integration to get started.

)}
{showAddModal && (
{/* */} {/* */}

Link a new integration to your account.

    {integrations .filter((integration) => integration.installed) .map((integration) => (
  • {integration.title}

    {integration.title}

    {integration.description}

    • ))}
)}

Select calendars

Select which calendars are checked for availability to prevent double bookings.

{showSelectCalendarModal && (
{/* */} {/* */}

If no entry is selected, all calendars will be checked

    {selectableCalendars.map((calendar) => (
  • {calendar.integration}

    {calendar.name}

    Select calendar
    • ))}
)}
); } const validJson = (jsonString: string) => { try { const o = JSON.parse(jsonString); if (o && typeof o === "object") { return o; } } catch (e) { console.error(e); } return false; }; export async function getServerSideProps(context) { const session = await getSession(context); if (!session) { return { redirect: { permanent: false, destination: "/auth/login" } }; } const user = await prisma.user.findFirst({ where: { email: session.user.email, }, select: { id: true, }, }); const credentials = await prisma.credential.findMany({ where: { userId: user.id, }, select: { id: true, type: true, key: true, }, }); const integrations = [ { installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)), credential: credentials.find((integration) => integration.type === "google_calendar") || null, type: "google_calendar", title: "Google Calendar", imageSrc: "integrations/google-calendar.svg", description: "For personal and business calendars", }, { installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET), type: "office365_calendar", credential: credentials.find((integration) => integration.type === "office365_calendar") || null, title: "Office 365 / Outlook.com Calendar", imageSrc: "integrations/outlook.svg", description: "For personal and business calendars", }, { installed: !!(process.env.ZOOM_CLIENT_ID && process.env.ZOOM_CLIENT_SECRET), type: "zoom_video", credential: credentials.find((integration) => integration.type === "zoom_video") || null, title: "Zoom", imageSrc: "integrations/zoom.svg", description: "Video Conferencing", }, ]; return { props: { integrations }, }; }