-
- Logged out - Calendso
-
-
-
-
-
+
{eventType.title}
{eventType.hidden && (
@@ -341,7 +341,7 @@ export default function Availability(props) {
Hide this event type
-
+ return (
+
-
-
-
-
-
- - You've been logged out -
-
-
- - We hope to see you again soon! -
-
-
-
- Go back to the login page
-
-
-
-
+
+ Logged out - Calendso
+
+
+
+ );
+}
diff --git a/pages/availability/index.tsx b/pages/availability/index.tsx
index 11b4e670..3358b6e4 100644
--- a/pages/availability/index.tsx
+++ b/pages/availability/index.tsx
@@ -155,7 +155,7 @@ export default function Availability(props) {
{props.types.map((eventType) => (
-
+
+
+
+
- );
-}
\ No newline at end of file
+
+
+
+
+
+
+ + You've been logged out +
+
+
+ We hope to see you again soon!
+
+
+
+ Go back to the login page
+
+
+
- Hide the event type from your page, so it can only be booked through its URL. + Hide the event type from your page, so it can only be booked through it's URL.
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx index 7ddb3c41..544dc65e 100644 --- a/pages/integrations/index.tsx +++ b/pages/integrations/index.tsx @@ -1,387 +1,457 @@ -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 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"; export default function Home({ integrations }) { - const [session, loading] = useSession(); - const [showAddModal, setShowAddModal] = useState(false); - const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false); - const [selectableCalendars, setSelectableCalendars] = useState([]); + const [, loading] = useSession(); + const [showAddModal, setShowAddModal] = useState(false); + const [showSelectCalendarModal, setShowSelectCalendarModal] = useState(false); + const [selectableCalendars, setSelectableCalendars] = useState([]); - function toggleAddModal() { - setShowAddModal(!showAddModal); + 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.png"; + case "office365_calendar": + return "integrations/office-365.png"; + default: + return ""; } + } - function toggleShowCalendarModal() { - setShowSelectCalendarModal(!showSelectCalendarModal); - } + function classNames(...classes) { + return classes.filter(Boolean).join(" "); + } - function loadCalendars() { - fetch('api/availability/calendar') - .then((response) => response.json()) - .then(data => { - setSelectableCalendars(data) - }); - } + useEffect(loadCalendars, [integrations]); - function integrationHandler(type) { - fetch('/api/integrations/' + type.replace('_', '') + '/add') - .then((response) => response.json()) - .then((data) => window.location.href = data.url); - } + if (loading) { + return ; + } - function calendarSelectionHandler(calendar) { - return (selected) => { - let cals = [...selectableCalendars]; - let 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()); - } - } - } + return ( +
+
+ Integrations | Calendso
+
+
- function getCalendarIntegrationImage(integrationType: string){
- switch (integrationType) {
- case "google_calendar": return "integrations/google-calendar.png";
- case "office365_calendar": return "integrations/office-365.png";
- default: return "";
- }
- }
-
- function classNames(...classes) {
- return classes.filter(Boolean).join(' ')
- }
-
- useEffect(loadCalendars, [integrations]);
-
- if (loading) {
- return ;
- }
-
- return (
-
-
- Integrations | Calendso
-
-
-
-
-
+
+
+
+ );
}
const validJson = (jsonString: string) => {
- try {
- const o = JSON.parse(jsonString);
- if (o && typeof o === "object") {
- return o;
- }
+ try {
+ const o = JSON.parse(jsonString);
+ if (o && typeof o === "object") {
+ return o;
}
- catch (e) {}
- return false;
-}
+ } 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 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 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.png",
- 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/office-365.png",
- 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.png",
- description: "Video Conferencing",
- } ];
+ 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.png",
+ 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/office-365.png",
+ 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.png",
+ description: "Video Conferencing",
+ },
+ ];
- return {
- props: {integrations},
- }
+ return {
+ props: { integrations },
+ };
}
-
-
-
- {integrations.filter( (ig) => ig.credential ).length !== 0 ?
- {showAddModal &&
- -
- {integrations.filter(ig => ig.credential).map( (ig) => (
-
-
-
- -- - -----
-
----{ig.title}
-- {ig.type.endsWith('_calendar') && Calendar Integration} - {ig.type.endsWith('_video') && Video Conferencing} -
-- {ig.credential.key &&--
} - {!ig.credential.key &&- Connected - -
} -- Not connected - --- ))}
-
-
- }
-
-
-
-
-
-
- - You don't have any integrations added. -
-
-
- - You currently do not have any integrations set up. Add your first integration to get started. -
-
-
-
-
-
- }
-
- {/* */}
-
-
- {/* */}
-
-
-
-
-
-
-
-
-
- - Add a new integration -
-
-
- - Link a new integration to your account. -
-
-
- -
- {integrations.filter( (integration) => integration.installed ).map( (integration) => (
-
- --
-
--{ integration.title }
-{ integration.description }
-- -- ))}
-
-
-
-
-
- {showSelectCalendarModal &&
-
-
- - Select calendars -
-
-
- - Select which calendars are checked for availability to prevent double bookings. -
-
-
-
-
-
- }
-
- {/* */}
-
-
- {/* */}
-
-
-
-
-
-
-
-
-
- - Select calendars -
-
-
- - If no entry is selected, all calendars will be checked -
-
-
- -
- {selectableCalendars.map( (calendar) => (
-
- --
-
--{ calendar.name }
---- Select calendar - - - ))}
-
-
-
-
+
- );
+
+ {integrations.filter((ig) => ig.credential).length !== 0 ? (
+
+ {showAddModal && (
+ -
+ {integrations
+ .filter((ig) => ig.credential)
+ .map((ig) => (
+
-
+
+
+ ++ + +++++++++
{ig.title}
++ {ig.type.endsWith("_calendar") && ( + Calendar Integration + )} + {ig.type.endsWith("_video") && ( + Video Conferencing + )} +
++ {ig.credential.key && ( +++
+ )} + {!ig.credential.key && ( ++ Connected + +
+ )} ++ Not connected + +++
+ ))}
+
+
+ )}
+
+
+
+
+
+
+ + You don't have any integrations added. +
+
+
+ + You currently do not have any integrations set up. Add your first integration to get + started. +
+
+
+
+
+
+ )}
+
+ {/* */}
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+ + Add a new integration +
+
+
+ Link a new integration to your account.
+
+
+ -
+ {integrations
+ .filter((integration) => integration.installed)
+ .map((integration) => (
+
-
+ ++++
{integration.title}
+{integration.description}
++ ++
+ ))}
+
+
+
+
+
+ {showSelectCalendarModal && (
+
+
+ Select calendars
+
+
+ Select which calendars are checked for availability to prevent double bookings.
+
+
+
+
+
+ )}
+
+ {/* */}
+
+
+ {/* */}
+
+
+
+
+
+
+
+
+
+ + Select calendars +
+
+
+ + If no entry is selected, all calendars will be checked +
+
+
+ -
+ {selectableCalendars.map((calendar) => (
+
-
+ ++++
{calendar.name}
++++ Select calendar + + +
+ ))}
+
+
+
+