mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Merge pull request #296 from Malte-D/feature/refresh-tokens-and-error-handling

Browse source 
Feature/refresh tokens and error handling
This commit is contained in:
Bailey Pumfleet 2021-06-24 17:32:38 +01:00 committed by GitHub
commit 24f10e4f29
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 582 additions and 452 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

101
components/booking/AvailableTimes.tsx
View file

@ -1,36 +1,37 @@
import dayjs, {Dayjs} from "dayjs"; import dayjs from "dayjs";
import isBetween from 'dayjs/plugin/isBetween'; import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween); dayjs.extend(isBetween);
import {useEffect, useMemo, useState} from "react"; import { useEffect, useState } from "react";
import getSlots from "../../lib/slots"; import getSlots from "../../lib/slots";
import Link from "next/link"; import Link from "next/link";
import {timeZone} from "../../lib/clock"; import { timeZone } from "../../lib/clock";
import {useRouter} from "next/router"; import { useRouter } from "next/router";
import { ExclamationIcon } from "@heroicons/react/solid";
const AvailableTimes = (props) => { const AvailableTimes = (props) => {
const router = useRouter(); const router = useRouter();
const { user, rescheduleUid } = router.query; const { user, rescheduleUid } = router.query;
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(false);
const times = getSlots({ const times = getSlots({
calendarTimeZone: props.user.timeZone, calendarTimeZone: props.user.timeZone,
selectedTimeZone: timeZone(), selectedTimeZone: timeZone(),
eventLength: props.eventType.length, eventLength: props.eventType.length,
selectedDate: props.date, selectedDate: props.date,
dayStartTime: props.user.startTime, dayStartTime: props.user.startTime,
dayEndTime: props.user.endTime, dayEndTime: props.user.endTime,
}); });
const handleAvailableSlots = (busyTimes: []) => { const handleAvailableSlots = (busyTimes: []) => {
// Check for conflicts // Check for conflicts
for (let i = times.length - 1; i >= 0; i -= 1) { for (let i = times.length - 1; i >= 0; i -= 1) {
busyTimes.forEach(busyTime => { busyTimes.forEach((busyTime) => {
let startTime = dayjs(busyTime.start); const startTime = dayjs(busyTime.start);
let endTime = dayjs(busyTime.end); const endTime = dayjs(busyTime.end);
// Check if start times are the same // Check if start times are the same
if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) { if (dayjs(times[i]).format("HH:mm") == startTime.format("HH:mm")) {
times.splice(i, 1); times.splice(i, 1);
} }
@ -40,12 +41,12 @@ const AvailableTimes = (props) => {
} }
// Check if slot end time is between start and end time // Check if slot end time is between start and end time
if (dayjs(times[i]).add(props.eventType.length, 'minutes').isBetween(startTime, endTime)) { if (dayjs(times[i]).add(props.eventType.length, "minutes").isBetween(startTime, endTime)) {
times.splice(i, 1); times.splice(i, 1);
} }
// Check if startTime is between slot // Check if startTime is between slot
if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, 'minutes'))) { if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, "minutes"))) {
times.splice(i, 1); times.splice(i, 1);
} }
}); });
@ -57,31 +58,65 @@ const AvailableTimes = (props) => {
// Re-render only when invitee changes date // Re-render only when invitee changes date
useEffect(() => { useEffect(() => {
setLoaded(false); setLoaded(false);
fetch(`/api/availability/${user}?dateFrom=${props.date.startOf('day').utc().format()}&dateTo=${props.date.endOf('day').utc().format()}`) setError(false);
.then( res => res.json()) fetch(
.then(handleAvailableSlots); `/api/availability/${user}?dateFrom=${props.date.startOf("day").utc().format()}&dateTo=${props.date
.endOf("day")
.utc()
.format()}`
)
.then((res) => res.json())
.then(handleAvailableSlots)
.catch((e) => {
console.error(e);
setError(true);
});
}, [props.date]); }, [props.date]);
return ( return (
<div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-97 overflow-y-auto"> <div className="sm:pl-4 mt-8 sm:mt-0 text-center sm:w-1/3 md:max-h-97 overflow-y-auto">
<div className="text-gray-600 font-light text-xl mb-4 text-left"> <div className="text-gray-600 font-light text-xl mb-4 text-left">
<span className="w-1/2"> <span className="w-1/2">{props.date.format("dddd DD MMMM YYYY")}</span>
{props.date.format("dddd DD MMMM YYYY")}
</span>
</div> </div>
{ {!error &&
loaded ? times.map((time) => loaded &&
times.map((time) => (
<div key={dayjs(time).utc().format()}> <div key={dayjs(time).utc().format()}>
<Link <Link
href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")}> href={
<a key={dayjs(time).format("hh:mma")} `/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` +
className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">{dayjs(time).tz(timeZone()).format(props.timeFormat)}</a> (rescheduleUid ? "&rescheduleUid=" + rescheduleUid : "")
}>
<a
key={dayjs(time).format("hh:mma")}
className="block font-medium mb-4 text-blue-600 border border-blue-600 rounded hover:text-white hover:bg-blue-600 py-4">
{dayjs(time).tz(timeZone()).format(props.timeFormat)}
</a>
</Link> </Link>
</div> </div>
) : <div className="loader"></div> ))}
} {!error && !loaded && <div className="loader" />}
{error && (
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="text-sm text-yellow-700">
Could not load the available time slots.{" "}
<a
href={"mailto:" + props.user.email}
className="font-medium underline text-yellow-700 hover:text-yellow-600">
Contact {props.user.name} via e-mail
</a>
</p>
</div>
</div>
</div>
)}
</div> </div>
); );
} };
export default AvailableTimes; export default AvailableTimes;

7
components/ui/Button.tsx
View file

@ -1,11 +1,10 @@
import { useState } from 'react'; import { useState } from 'react';
export default function Button(props) { export default function Button(props) {
const [loading, setLoading] = useState(false);
return( return(
<button type="submit" className="btn btn-primary" onClick={setLoading}> <button type="submit" className="btn btn-primary">
{!loading && props.children} {!props.loading && props.children}
{loading && {props.loading &&
<svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>

498
lib/calendarClient.ts
View file

@ -7,18 +7,51 @@ import EventAttendeeRescheduledMail from "./emails/EventAttendeeRescheduledMail"
const translator = short(); const translator = short();
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { google } = require("googleapis"); const { google } = require("googleapis");
import prisma from "./prisma";
const googleAuth = () => { const googleAuth = (credential) => {
const { client_secret, client_id, redirect_uris } = JSON.parse( const { client_secret, client_id, redirect_uris } = JSON.parse(process.env.GOOGLE_API_CREDENTIALS).web;
process.env.GOOGLE_API_CREDENTIALS const myGoogleAuth = new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
).web; myGoogleAuth.setCredentials(credential.key);
return new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
const isExpired = () => myGoogleAuth.isTokenExpiring();
const refreshAccessToken = () =>
myGoogleAuth
.refreshToken(credential.key.refresh_token)
.then((res) => {
const token = res.res.data;
credential.key.access_token = token.access_token;
credential.key.expiry_date = token.expiry_date;
return prisma.credential
.update({
where: {
id: credential.id,
},
data: {
key: credential.key,
},
})
.then(() => {
myGoogleAuth.setCredentials(credential.key);
return myGoogleAuth;
});
})
.catch((err) => {
console.error("Error refreshing google token", err);
return myGoogleAuth;
});
return {
getToken: () => (!isExpired() ? Promise.resolve(myGoogleAuth) : refreshAccessToken()),
};
}; };
function handleErrorsJson(response) { function handleErrorsJson(response) {
if (!response.ok) { if (!response.ok) {
response.json().then(console.log); response.json().then((e) => console.error("O365 Error", e));
throw Error(response.statusText); throw Error(response.statusText);
} }
return response.json(); return response.json();
@ -26,17 +59,17 @@ function handleErrorsJson(response) {
function handleErrorsRaw(response) { function handleErrorsRaw(response) {
if (!response.ok) { if (!response.ok) {
response.text().then(console.log); response.text().then((e) => console.error("O365 Error", e));
throw Error(response.statusText); throw Error(response.statusText);
} }
return response.text(); return response.text();
} }
const o365Auth = (credential) => { const o365Auth = (credential) => {
const isExpired = (expiryDate) => expiryDate < +new Date(); const isExpired = (expiryDate) => expiryDate < Math.round(+new Date() / 1000);
const refreshAccessToken = (refreshToken) => const refreshAccessToken = (refreshToken) => {
fetch("https://login.microsoftonline.com/common/oauth2/v2.0/token", { return fetch("https://login.microsoftonline.com/common/oauth2/v2.0/token", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" }, headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ body: new URLSearchParams({
@ -50,11 +83,19 @@ const o365Auth = (credential) => {
.then(handleErrorsJson) .then(handleErrorsJson)
.then((responseBody) => { .then((responseBody) => {
credential.key.access_token = responseBody.access_token; credential.key.access_token = responseBody.access_token;
credential.key.expiry_date = Math.round( credential.key.expiry_date = Math.round(+new Date() / 1000 + responseBody.expires_in);
+new Date() / 1000 + responseBody.expires_in return prisma.credential
); .update({
return credential.key.access_token; where: {
id: credential.id,
},
data: {
key: credential.key,
},
})
.then(() => credential.key.access_token);
}); });
};
return { return {
getToken: () => getToken: () =>
@ -96,15 +137,11 @@ interface IntegrationCalendar {
interface CalendarApiAdapter { interface CalendarApiAdapter {
createEvent(event: CalendarEvent): Promise<any>; createEvent(event: CalendarEvent): Promise<any>;
updateEvent(uid: String, event: CalendarEvent); updateEvent(uid: string, event: CalendarEvent);
deleteEvent(uid: String); deleteEvent(uid: string);
getAvailability( getAvailability(dateFrom, dateTo, selectedCalendars: IntegrationCalendar[]): Promise<any>;
dateFrom,
dateTo,
selectedCalendars: IntegrationCalendar[]
): Promise<any>;
listCalendars(): Promise<IntegrationCalendar[]>; listCalendars(): Promise<IntegrationCalendar[]>;
} }
@ -113,7 +150,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
const auth = o365Auth(credential); const auth = o365Auth(credential);
const translateEvent = (event: CalendarEvent) => { const translateEvent = (event: CalendarEvent) => {
let optional = {}; const optional = {};
if (event.location) { if (event.location) {
optional.location = { displayName: event.location }; optional.location = { displayName: event.location };
} }
@ -171,12 +208,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
return { return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => { getAvailability: (dateFrom, dateTo, selectedCalendars) => {
const filter = const filter = "?$filter=start/dateTime ge '" + dateFrom + "' and end/dateTime le '" + dateTo + "'";
"?$filter=start/dateTime ge '" +
dateFrom +
"' and end/dateTime le '" +
dateTo +
"'";
return auth return auth
.getToken() .getToken()
.then((accessToken) => { .then((accessToken) => {
@ -195,10 +227,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
).then((ids: string[]) => { ).then((ids: string[]) => {
const urls = ids.map( const urls = ids.map(
(calendarId) => (calendarId) =>
"https://graph.microsoft.com/v1.0/me/calendars/" + "https://graph.microsoft.com/v1.0/me/calendars/" + calendarId + "/events" + filter
calendarId +
"/events" +
filter
); );
return Promise.all( return Promise.all(
urls.map((url) => urls.map((url) =>
@ -217,9 +246,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
})) }))
) )
) )
).then((results) => ).then((results) => results.reduce((acc, events) => acc.concat(events), []));
results.reduce((acc, events) => acc.concat(events), [])
);
}); });
}) })
.catch((err) => { .catch((err) => {
@ -242,7 +269,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
disableConfirmationEmail: true, disableConfirmationEmail: true,
})) }))
), ),
deleteEvent: (uid: String) => deleteEvent: (uid: string) =>
auth.getToken().then((accessToken) => auth.getToken().then((accessToken) =>
fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, { fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
method: "DELETE", method: "DELETE",
@ -251,7 +278,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
}, },
}).then(handleErrorsRaw) }).then(handleErrorsRaw)
), ),
updateEvent: (uid: String, event: CalendarEvent) => updateEvent: (uid: string, event: CalendarEvent) =>
auth.getToken().then((accessToken) => auth.getToken().then((accessToken) =>
fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, { fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
method: "PATCH", method: "PATCH",
@ -267,187 +294,188 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
}; };
const GoogleCalendar = (credential): CalendarApiAdapter => { const GoogleCalendar = (credential): CalendarApiAdapter => {
const myGoogleAuth = googleAuth(); const auth = googleAuth(credential);
myGoogleAuth.setCredentials(credential.key);
const integrationType = "google_calendar"; const integrationType = "google_calendar";
return { return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => getAvailability: (dateFrom, dateTo, selectedCalendars) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); auth.getToken().then((myGoogleAuth) => {
calendar.calendarList const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
.list() const selectedCalendarIds = selectedCalendars
.then((cals) => { .filter((e) => e.integration === integrationType)
const filteredItems = cals.data.items.filter( .map((e) => e.externalId);
(i) => if (selectedCalendarIds.length == 0 && selectedCalendars.length > 0) {
selectedCalendars.findIndex((e) => e.externalId === i.id) > -1 // Only calendars of other integrations selected
); resolve([]);
if (filteredItems.length == 0 && selectedCalendars.length > 0) { return;
// Only calendars of other integrations selected }
resolve([]);
} (selectedCalendarIds.length == 0
calendar.freebusy.query( ? calendar.calendarList.list().then((cals) => cals.data.items.map((cal) => cal.id))
{ : Promise.resolve(selectedCalendarIds)
requestBody: { )
timeMin: dateFrom, .then((calsIds) => {
timeMax: dateTo, calendar.freebusy.query(
items: {
filteredItems.length > 0 ? filteredItems : cals.data.items, requestBody: {
timeMin: dateFrom,
timeMax: dateTo,
items: calsIds.map((id) => ({ id: id })),
},
}, },
}, (err, apires) => {
(err, apires) => { if (err) {
if (err) { reject(err);
reject(err); }
resolve(Object.values(apires.data.calendars).flatMap((item) => item["busy"]));
} }
);
resolve( })
Object.values(apires.data.calendars).flatMap( .catch((err) => {
(item) => item["busy"] console.error("There was an error contacting google calendar service: ", err);
) reject(err);
); });
} })
); ),
})
.catch((err) => {
reject(err);
});
}),
createEvent: (event: CalendarEvent) => createEvent: (event: CalendarEvent) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
const payload = { auth.getToken().then((myGoogleAuth) => {
summary: event.title, const payload = {
description: event.description, summary: event.title,
start: { description: event.description,
dateTime: event.startTime, start: {
timeZone: event.organizer.timeZone, dateTime: event.startTime,
}, timeZone: event.organizer.timeZone,
end: { },
dateTime: event.endTime, end: {
timeZone: event.organizer.timeZone, dateTime: event.endTime,
}, timeZone: event.organizer.timeZone,
attendees: event.attendees, },
reminders: { attendees: event.attendees,
useDefault: false, reminders: {
overrides: [{ method: "email", minutes: 60 }], useDefault: false,
}, overrides: [{ method: "email", minutes: 60 }],
}; },
};
if (event.location) { if (event.location) {
payload["location"] = event.location; payload["location"] = event.location;
}
if (event.conferenceData) {
payload["conferenceData"] = event.conferenceData;
}
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.events.insert(
{
auth: myGoogleAuth,
calendarId: "primary",
resource: payload,
conferenceDataVersion: 1,
},
function (err, event) {
if (err) {
console.log(
"There was an error contacting the Calendar service: " + err
);
return reject(err);
}
return resolve(event.data);
} }
);
}),
updateEvent: (uid: String, event: CalendarEvent) =>
new Promise((resolve, reject) => {
const payload = {
summary: event.title,
description: event.description,
start: {
dateTime: event.startTime,
timeZone: event.organizer.timeZone,
},
end: {
dateTime: event.endTime,
timeZone: event.organizer.timeZone,
},
attendees: event.attendees,
reminders: {
useDefault: false,
overrides: [{ method: "email", minutes: 60 }],
},
};
if (event.location) { if (event.conferenceData) {
payload["location"] = event.location; payload["conferenceData"] = event.conferenceData;
} }
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.events.update( calendar.events.insert(
{ {
auth: myGoogleAuth, auth: myGoogleAuth,
calendarId: "primary", calendarId: "primary",
eventId: uid, resource: payload,
sendNotifications: true, },
sendUpdates: "all", function (err, event) {
resource: payload, if (err) {
}, console.error("There was an error contacting google calendar service: ", err);
function (err, event) { return reject(err);
if (err) { }
console.log( return resolve(event.data);
"There was an error contacting the Calendar service: " + err
);
return reject(err);
} }
return resolve(event.data); );
})
),
updateEvent: (uid: string, event: CalendarEvent) =>
new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const payload = {
summary: event.title,
description: event.description,
start: {
dateTime: event.startTime,
timeZone: event.organizer.timeZone,
},
end: {
dateTime: event.endTime,
timeZone: event.organizer.timeZone,
},
attendees: event.attendees,
reminders: {
useDefault: false,
overrides: [{ method: "email", minutes: 60 }],
},
};
if (event.location) {
payload["location"] = event.location;
} }
);
}), const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
deleteEvent: (uid: String) => calendar.events.update(
new Promise((resolve, reject) => { {
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); auth: myGoogleAuth,
calendar.events.delete( calendarId: "primary",
{ eventId: uid,
auth: myGoogleAuth, sendNotifications: true,
calendarId: "primary", sendUpdates: "all",
eventId: uid, resource: payload,
sendNotifications: true, },
sendUpdates: "all", function (err, event) {
}, if (err) {
function (err, event) { console.error("There was an error contacting google calendar service: ", err);
if (err) { return reject(err);
console.log( }
"There was an error contacting the Calendar service: " + err return resolve(event.data);
);
return reject(err);
} }
return resolve(event.data); );
} })
); ),
}), deleteEvent: (uid: string) =>
new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.events.delete(
{
auth: myGoogleAuth,
calendarId: "primary",
eventId: uid,
sendNotifications: true,
sendUpdates: "all",
},
function (err, event) {
if (err) {
console.error("There was an error contacting google calendar service: ", err);
return reject(err);
}
return resolve(event.data);
}
);
})
),
listCalendars: () => listCalendars: () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); auth.getToken().then((myGoogleAuth) => {
calendar.calendarList const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
.list() calendar.calendarList
.then((cals) => { .list()
resolve( .then((cals) => {
cals.data.items.map((cal) => { resolve(
const calendar: IntegrationCalendar = { cals.data.items.map((cal) => {
externalId: cal.id, const calendar: IntegrationCalendar = {
integration: integrationType, externalId: cal.id,
name: cal.summary, integration: integrationType,
primary: cal.primary, name: cal.summary,
}; primary: cal.primary,
return calendar; };
}) return calendar;
); })
}) );
.catch((err) => { })
reject(err); .catch((err) => {
}); console.error("There was an error contacting google calendar service: ", err);
}), reject(err);
});
})
),
}; };
}; };
@ -466,43 +494,37 @@ const calendars = (withCredentials): CalendarApiAdapter[] =>
}) })
.filter(Boolean); .filter(Boolean);
const getBusyCalendarTimes = ( const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalendars) =>
withCredentials,
dateFrom,
dateTo,
selectedCalendars
) =>
Promise.all( Promise.all(
calendars(withCredentials).map((c) => calendars(withCredentials).map((c) => c.getAvailability(dateFrom, dateTo, selectedCalendars))
c.getAvailability(dateFrom, dateTo, selectedCalendars)
)
).then((results) => { ).then((results) => {
return results.reduce((acc, availability) => acc.concat(availability), []); return results.reduce((acc, availability) => acc.concat(availability), []);
}); });
const listCalendars = (withCredentials) => const listCalendars = (withCredentials) =>
Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then( Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then((results) =>
(results) => results.reduce((acc, calendars) => acc.concat(calendars), []) results.reduce((acc, calendars) => acc.concat(calendars), [])
); );
const createEvent = async ( const createEvent = async (credential, calEvent: CalendarEvent): Promise<any> => {
credential, const uid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL));
calEvent: CalendarEvent
): Promise<any> => {
const uid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const creationResult = credential const creationResult = credential ? await calendars([credential])[0].createEvent(calEvent) : null;
? await calendars([credential])[0].createEvent(calEvent)
: null;
const organizerMail = new EventOrganizerMail(calEvent, uid); const organizerMail = new EventOrganizerMail(calEvent, uid);
const attendeeMail = new EventAttendeeMail(calEvent, uid); const attendeeMail = new EventAttendeeMail(calEvent, uid);
await organizerMail.sendEmail(); try {
await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e);
}
if (!creationResult || !creationResult.disableConfirmationEmail) { if (!creationResult || !creationResult.disableConfirmationEmail) {
await attendeeMail.sendEmail(); try {
await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e);
}
} }
return { return {
@ -511,14 +533,8 @@ const createEvent = async (
}; };
}; };
const updateEvent = async ( const updateEvent = async (credential, uidToUpdate: string, calEvent: CalendarEvent): Promise<any> => {
credential, const newUid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL));
uidToUpdate: String,
calEvent: CalendarEvent
): Promise<any> => {
const newUid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const updateResult = credential const updateResult = credential
? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent) ? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent)
@ -526,10 +542,18 @@ const updateEvent = async (
const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid); const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid);
const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid); const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid);
await organizerMail.sendEmail(); try {
await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e);
}
if (!updateResult || !updateResult.disableConfirmationEmail) { if (!updateResult || !updateResult.disableConfirmationEmail) {
await attendeeMail.sendEmail(); try {
await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e);
}
} }
return { return {
@ -538,7 +562,7 @@ const updateEvent = async (
}; };
}; };
const deleteEvent = (credential, uid: String): Promise<any> => { const deleteEvent = (credential, uid: string): Promise<any> => {
if (credential) { if (credential) {
return calendars([credential])[0].deleteEvent(uid); return calendars([credential])[0].deleteEvent(uid);
} }

24
lib/videoClient.ts
View file

@ -193,10 +193,18 @@ const createMeeting = async (credential, calEvent: CalendarEvent): Promise<any>
const organizerMail = new VideoEventOrganizerMail(calEvent, uid, videoCallData); const organizerMail = new VideoEventOrganizerMail(calEvent, uid, videoCallData);
const attendeeMail = new VideoEventAttendeeMail(calEvent, uid, videoCallData); const attendeeMail = new VideoEventAttendeeMail(calEvent, uid, videoCallData);
await organizerMail.sendEmail(); try {
await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e)
}
if (!creationResult || !creationResult.disableConfirmationEmail) { if (!creationResult || !creationResult.disableConfirmationEmail) {
await attendeeMail.sendEmail(); try {
await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e)
}
} }
return { return {
@ -216,10 +224,18 @@ const updateMeeting = async (credential, uidToUpdate: String, calEvent: Calendar
const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid); const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid);
const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid); const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid);
await organizerMail.sendEmail(); try {
await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e)
}
if (!updateResult || !updateResult.disableConfirmationEmail) { if (!updateResult || !updateResult.disableConfirmationEmail) {
await attendeeMail.sendEmail(); try {
await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e)
}
} }
return { return {

129
pages/[user]/book.tsx
View file

@ -1,7 +1,7 @@
import Head from 'next/head'; import Head from 'next/head';
import Link from 'next/link'; import Link from 'next/link';
import {useRouter} from 'next/router'; import {useRouter} from 'next/router';
import {CalendarIcon, ClockIcon, LocationMarkerIcon} from '@heroicons/react/solid'; import {CalendarIcon, ClockIcon, ExclamationIcon, LocationMarkerIcon} from '@heroicons/react/solid';
import prisma from '../../lib/prisma'; import prisma from '../../lib/prisma';
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry"; import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
@ -24,6 +24,8 @@ export default function Book(props) {
const [ is24h, setIs24h ] = useState(false); const [ is24h, setIs24h ] = useState(false);
const [ preferredTimeZone, setPreferredTimeZone ] = useState(''); const [ preferredTimeZone, setPreferredTimeZone ] = useState('');
const [ loading, setLoading ] = useState(false);
const [ error, setError ] = useState(false);
const locations = props.eventType.locations || []; const locations = props.eventType.locations || [];
@ -48,38 +50,39 @@ export default function Book(props) {
[LocationType.GoogleMeet]: 'Google Meet', [LocationType.GoogleMeet]: 'Google Meet',
}; };
const bookingHandler = (event) => { const bookingHandler = event => {
event.preventDefault(); const book = async () => {
setLoading(true);
let notes = ""; setError(false);
if (props.eventType.customInputs) { let notes = "";
notes = props.eventType.customInputs.map(input => { if (props.eventType.customInputs) {
const data = event.target["custom_" + input.id]; notes = props.eventType.customInputs.map(input => {
if (!!data) { const data = event.target["custom_" + input.id];
if (input.type === EventTypeCustomInputType.Bool) { if (!!data) {
return input.label + "\n" + (data.value ? "Yes" : "No") if (input.type === EventTypeCustomInputType.Bool) {
} else { return input.label + "\n" + (data.value ? "Yes" : "No")
return input.label + "\n" + data.value } else {
return input.label + "\n" + data.value
}
} }
} }).join("\n\n")
}).join("\n\n") }
} if (!!notes && !!event.target.notes.value) {
if (!!notes && !!event.target.notes.value) { notes += "\n\nAdditional notes:\n" + event.target.notes.value;
notes += "\n\nAdditional notes:\n" + event.target.notes.value; } else {
} else { notes += event.target.notes.value;
notes += event.target.notes.value; }
}
let payload = { let payload = {
start: dayjs(date).format(), start: dayjs(date).format(),
end: dayjs(date).add(props.eventType.length, 'minute').format(), end: dayjs(date).add(props.eventType.length, 'minute').format(),
name: event.target.name.value, name: event.target.name.value,
email: event.target.email.value, email: event.target.email.value,
notes: notes, notes: notes,
timeZone: preferredTimeZone, timeZone: preferredTimeZone,
eventTypeId: props.eventType.id, eventTypeId: props.eventType.id,
rescheduleUid: rescheduleUid rescheduleUid: rescheduleUid
}; };
if (selectedLocation) { if (selectedLocation) {
switch (selectedLocation) { switch (selectedLocation) {
@ -97,29 +100,38 @@ export default function Book(props) {
} }
} }
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())); telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters()));
const res = fetch( const res = await fetch(
'/api/book/' + user, '/api/book/' + user,
{ {
body: JSON.stringify(payload), body: JSON.stringify(payload),
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
method: 'POST' method: 'POST'
} }
); );
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}&name=${payload.name}`; if (res.ok) {
if (payload['location']) { let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}&name=${payload.name}`;
if (payload['location'].includes('integration')) { if (payload['location']) {
successUrl += "&location=" + encodeURIComponent("Web conferencing details to follow."); if (payload['location'].includes('integration')) {
} successUrl += "&location=" + encodeURIComponent("Web conferencing details to follow.");
else { }
successUrl += "&location=" + encodeURIComponent(payload['location']); else {
successUrl += "&location=" + encodeURIComponent(payload['location']);
}
}
await router.push(successUrl);
} else {
setLoading(false);
setError(true);
} }
} }
router.push(successUrl); event.preventDefault();
book();
} }
return ( return (
@ -215,12 +227,27 @@ export default function Book(props) {
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking ? props.booking.description : ''}/> <textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking ? props.booking.description : ''}/>
</div> </div>
<div className="flex items-start"> <div className="flex items-start">
<Button type="submit" className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button> <Button type="submit" loading={loading} className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button>
<Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}> <Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}>
<a className="ml-2 btn btn-white">Cancel</a> <a className="ml-2 btn btn-white">Cancel</a>
</Link> </Link>
</div> </div>
</form> </form>
{error && <div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-2">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="text-sm text-yellow-700">
Could not {rescheduleUid ? 'reschedule' : 'book'} the meeting. Please try again or{' '}
<a href={"mailto:" + props.user.email} className="font-medium underline text-yellow-700 hover:text-yellow-600">
Contact {props.user.name} via e-mail
</a>
</p>
</div>
</div>
</div>}
</div> </div>
</div> </div>
</div> </div>

263
pages/api/book/[user].ts
View file

@ -1,38 +1,38 @@
import type {NextApiRequest, NextApiResponse} from 'next'; import type { NextApiRequest, NextApiResponse } from "next";
import prisma from '../../../lib/prisma'; import prisma from "../../../lib/prisma";
import {CalendarEvent, createEvent, updateEvent} from '../../../lib/calendarClient'; import { CalendarEvent, createEvent, updateEvent } from "../../../lib/calendarClient";
import async from 'async'; import async from "async";
import {v5 as uuidv5} from 'uuid'; import { v5 as uuidv5 } from "uuid";
import short from 'short-uuid'; import short from "short-uuid";
import {createMeeting, updateMeeting} from "../../../lib/videoClient"; import { createMeeting, updateMeeting } from "../../../lib/videoClient";
import EventAttendeeMail from "../../../lib/emails/EventAttendeeMail"; import EventAttendeeMail from "../../../lib/emails/EventAttendeeMail";
import {getEventName} from "../../../lib/event"; import { getEventName } from "../../../lib/event";
import { LocationType } from '../../../lib/location'; import { LocationType } from "../../../lib/location";
import merge from "lodash.merge" import merge from "lodash.merge";
const translator = short(); const translator = short();
interface p { interface p {
location: string location: string;
} }
const getLocationRequestFromIntegration = ({location}: p) => { const getLocationRequestFromIntegration = ({ location }: p) => {
if (location === LocationType.GoogleMeet.valueOf()) { if (location === LocationType.GoogleMeet.valueOf()) {
const requestId = uuidv5(location, uuidv5.URL) const requestId = uuidv5(location, uuidv5.URL);
return { return {
conferenceData: { conferenceData: {
createRequest: { createRequest: {
requestId: requestId requestId: requestId,
} },
} },
} };
} }
return null return null;
} };
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const {user} = req.query; const { user } = req.query;
const currentUser = await prisma.user.findFirst({ const currentUser = await prisma.user.findFirst({
where: { where: {
@ -44,27 +44,27 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
timeZone: true, timeZone: true,
email: true, email: true,
name: true, name: true,
} },
}); });
// Split credentials up into calendar credentials and video credentials // Split credentials up into calendar credentials and video credentials
const calendarCredentials = currentUser.credentials.filter(cred => cred.type.endsWith('_calendar')); const calendarCredentials = currentUser.credentials.filter((cred) => cred.type.endsWith("_calendar"));
const videoCredentials = currentUser.credentials.filter(cred => cred.type.endsWith('_video')); const videoCredentials = currentUser.credentials.filter((cred) => cred.type.endsWith("_video"));
const rescheduleUid = req.body.rescheduleUid; const rescheduleUid = req.body.rescheduleUid;
const selectedEventType = await prisma.eventType.findFirst({ const selectedEventType = await prisma.eventType.findFirst({
where: { where: {
userId: currentUser.id, userId: currentUser.id,
id: req.body.eventTypeId id: req.body.eventTypeId,
}, },
select: { select: {
eventName: true, eventName: true,
title: true title: true,
} },
}); });
let rawLocation = req.body.location const rawLocation = req.body.location;
let evt: CalendarEvent = { let evt: CalendarEvent = {
type: selectedEventType.title, type: selectedEventType.title,
@ -72,38 +72,35 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
description: req.body.notes, description: req.body.notes,
startTime: req.body.start, startTime: req.body.start,
endTime: req.body.end, endTime: req.body.end,
organizer: {email: currentUser.email, name: currentUser.name, timeZone: currentUser.timeZone}, organizer: { email: currentUser.email, name: currentUser.name, timeZone: currentUser.timeZone },
attendees: [ attendees: [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }],
{email: req.body.email, name: req.body.name, timeZone: req.body.timeZone}
]
}; };
// If phone or inPerson use raw location // If phone or inPerson use raw location
// set evt.location to req.body.location // set evt.location to req.body.location
if (!rawLocation.includes('integration')) { if (!rawLocation?.includes("integration")) {
evt.location = rawLocation evt.location = rawLocation;
} }
// If location is set to an integration location // If location is set to an integration location
// Build proper transforms for evt object // Build proper transforms for evt object
// Extend evt object with those transformations // Extend evt object with those transformations
if (rawLocation.includes('integration')) { if (rawLocation?.includes("integration")) {
let maybeLocationRequestObject = getLocationRequestFromIntegration({ const maybeLocationRequestObject = getLocationRequestFromIntegration({
location: rawLocation location: rawLocation,
}) });
evt = merge(evt, maybeLocationRequestObject) evt = merge(evt, maybeLocationRequestObject);
} }
const eventType = await prisma.eventType.findFirst({ const eventType = await prisma.eventType.findFirst({
where: { where: {
userId: currentUser.id, userId: currentUser.id,
title: evt.type title: evt.type,
}, },
select: { select: {
id: true id: true,
} },
}); });
let results = []; let results = [];
@ -113,7 +110,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
// Reschedule event // Reschedule event
const booking = await prisma.booking.findFirst({ const booking = await prisma.booking.findFirst({
where: { where: {
uid: rescheduleUid uid: rescheduleUid,
}, },
select: { select: {
id: true, id: true,
@ -121,112 +118,144 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
select: { select: {
id: true, id: true,
type: true, type: true,
uid: true uid: true,
} },
} },
} },
}); });
// Use all integrations // Use all integrations
results = results.concat(await async.mapLimit(calendarCredentials, 5, async (credential) => { results = results.concat(
const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid; await async.mapLimit(calendarCredentials, 5, async (credential) => {
const response = await updateEvent(credential, bookingRefUid, evt); const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid;
return updateEvent(credential, bookingRefUid, evt)
.then((response) => ({ type: credential.type, success: true, response }))
.catch((e) => {
console.error("updateEvent failed", e);
return { type: credential.type, success: false };
});
})
);
return { results = results.concat(
type: credential.type, await async.mapLimit(videoCredentials, 5, async (credential) => {
response const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid;
}; return updateMeeting(credential, bookingRefUid, evt)
})); .then((response) => ({ type: credential.type, success: true, response }))
.catch((e) => {
console.error("updateMeeting failed", e);
return { type: credential.type, success: false };
});
})
);
results = results.concat(await async.mapLimit(videoCredentials, 5, async (credential) => { if (results.length > 0 && results.every((res) => !res.success)) {
const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid; res.status(500).json({ message: "Rescheduling failed" });
const response = await updateMeeting(credential, bookingRefUid, evt); return;
return { }
type: credential.type,
response
};
}));
// Clone elements // Clone elements
referencesToCreate = [...booking.references]; referencesToCreate = [...booking.references];
// Now we can delete the old booking and its references. // Now we can delete the old booking and its references.
let bookingReferenceDeletes = prisma.bookingReference.deleteMany({ const bookingReferenceDeletes = prisma.bookingReference.deleteMany({
where: { where: {
bookingId: booking.id bookingId: booking.id,
} },
}); });
let attendeeDeletes = prisma.attendee.deleteMany({ const attendeeDeletes = prisma.attendee.deleteMany({
where: { where: {
bookingId: booking.id bookingId: booking.id,
} },
}); });
let bookingDeletes = prisma.booking.delete({ const bookingDeletes = prisma.booking.delete({
where: { where: {
uid: rescheduleUid uid: rescheduleUid,
} },
}); });
await Promise.all([ await Promise.all([bookingReferenceDeletes, attendeeDeletes, bookingDeletes]);
bookingReferenceDeletes,
attendeeDeletes,
bookingDeletes
]);
} else { } else {
// Schedule event // Schedule event
results = results.concat(await async.mapLimit(calendarCredentials, 5, async (credential) => { results = results.concat(
const response = await createEvent(credential, evt); await async.mapLimit(calendarCredentials, 5, async (credential) => {
return { return createEvent(credential, evt)
type: credential.type, .then((response) => ({ type: credential.type, success: true, response }))
response .catch((e) => {
}; console.error("createEvent failed", e);
})); return { type: credential.type, success: false };
});
})
);
results = results.concat(await async.mapLimit(videoCredentials, 5, async (credential) => { results = results.concat(
const response = await createMeeting(credential, evt); await async.mapLimit(videoCredentials, 5, async (credential) => {
return { return createMeeting(credential, evt)
type: credential.type, .then((response) => ({ type: credential.type, success: true, response }))
response .catch((e) => {
}; console.error("createMeeting failed", e);
})); return { type: credential.type, success: false };
});
})
);
referencesToCreate = results.map((result => { if (results.length > 0 && results.every((res) => !res.success)) {
res.status(500).json({ message: "Booking failed" });
return;
}
referencesToCreate = results.map((result) => {
return { return {
type: result.type, type: result.type,
uid: result.response.createdEvent.id.toString() uid: result.response.createdEvent.id.toString(),
}; };
})); });
} }
const hashUID =
results.length > 0
? results[0].response.uid
: translator.fromUUID(uuidv5(JSON.stringify(evt), uuidv5.URL));
// TODO Should just be set to the true case as soon as we have a "bare email" integration class. // TODO Should just be set to the true case as soon as we have a "bare email" integration class.
// UID generation should happen in the integration itself, not here. // UID generation should happen in the integration itself, not here.
const hashUID = results.length > 0 ? results[0].response.uid : translator.fromUUID(uuidv5(JSON.stringify(evt), uuidv5.URL)); if (results.length === 0) {
if(results.length === 0) {
// Legacy as well, as soon as we have a separate email integration class. Just used // Legacy as well, as soon as we have a separate email integration class. Just used
// to send an email even if there is no integration at all. // to send an email even if there is no integration at all.
const mail = new EventAttendeeMail(evt, hashUID); try {
await mail.sendEmail(); const mail = new EventAttendeeMail(evt, hashUID);
await mail.sendEmail();
} catch (e) {
console.error("Sending legacy event mail failed", e);
res.status(500).json({ message: "Booking failed" });
return;
}
} }
await prisma.booking.create({ try {
data: { await prisma.booking.create({
uid: hashUID, data: {
userId: currentUser.id, uid: hashUID,
references: { userId: currentUser.id,
create: referencesToCreate references: {
create: referencesToCreate,
},
eventTypeId: eventType.id,
title: evt.title,
description: evt.description,
startTime: evt.startTime,
endTime: evt.endTime,
attendees: {
create: evt.attendees,
},
}, },
eventTypeId: eventType.id, });
} catch (e) {
console.error("Error when saving booking to db", e);
res.status(500).json({ message: "Booking already exists" });
return;
}
title: evt.title, res.status(204).json({});
description: evt.description,
startTime: evt.startTime,
endTime: evt.endTime,
attendees: {
create: evt.attendees
}
}
});
res.status(200).json(results);
} }