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

Merge branch 'main' into feature/refresh-tokens-and-error-handling

Browse source
This commit is contained in:
Malte Delfs 2021-06-24 17:49:15 +02:00
commit 917b2c4821
28 changed files with 2710 additions and 4982 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
.eslintrc.json Normal file
View file

@ -0,0 +1,34 @@
{
"root": true,
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"modules": true
},
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:react/recommended",
"plugin:react-hooks/recommended"
],
"plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"],
"rules": {
"prettier/prettier": ["error"],
"@typescript-eslint/no-unused-vars": "error",
"react/react-in-jsx-scope": "off",
"react/prop-types": "off"
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
}
}
}

1
.husky/.gitignore vendored Normal file
View file

@ -0,0 +1 @@
_

4
.husky/pre-commit Executable file
View file

@ -0,0 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
yarn lint-staged

6
.prettierignore Normal file
View file

@ -0,0 +1,6 @@
node_modules
.next
public
**/**/node_modules
**/**/.next
**/**/public

10
.prettierrc.js Normal file
View file

@ -0,0 +1,10 @@
module.exports = {
bracketSpacing: true,
jsxBracketSameLine: true,
singleQuote: false,
jsxSingleQuote: false,
trailingComma: "es5",
semi: true,
printWidth: 110,
arrowParens: "always",
};

403
components/Shell.tsx
View file

@ -1,152 +1,273 @@
import Link from 'next/link'; import Link from "next/link";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import {useRouter} from "next/router"; import { useRouter } from "next/router";
import {signOut, useSession} from 'next-auth/client'; import { signOut, useSession } from "next-auth/client";
import {MenuIcon, XIcon} from '@heroicons/react/outline'; import { MenuIcon, XIcon } from "@heroicons/react/outline";
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../lib/telemetry"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry";
export default function Shell(props) { export default function Shell(props) {
const router = useRouter(); const router = useRouter();
const [ session, loading ] = useSession(); const [session, loading] = useSession();
const [ profileDropdownExpanded, setProfileDropdownExpanded ] = useState(false); const [profileDropdownExpanded, setProfileDropdownExpanded] = useState(false);
const [ mobileMenuExpanded, setMobileMenuExpanded ] = useState(false); const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false);
let telemetry = useTelemetry(); const telemetry = useTelemetry();
useEffect(() => { useEffect(() => {
telemetry.withJitsu((jitsu) => { telemetry.withJitsu((jitsu) => {
return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname)) return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname));
}); });
}, [telemetry]) }, [telemetry]);
const toggleProfileDropdown = () => { const toggleProfileDropdown = () => {
setProfileDropdownExpanded(!profileDropdownExpanded); setProfileDropdownExpanded(!profileDropdownExpanded);
} };
const toggleMobileMenu = () => { const toggleMobileMenu = () => {
setMobileMenuExpanded(!mobileMenuExpanded); setMobileMenuExpanded(!mobileMenuExpanded);
} };
const logoutHandler = () => { const logoutHandler = () => {
signOut({ redirect: false }).then( () => router.push('/auth/logout') ); signOut({ redirect: false }).then(() => router.push("/auth/logout"));
} };
if ( ! loading && ! session ) { if (!loading && !session) {
router.replace('/auth/login'); router.replace("/auth/login");
} }
return session && ( return session ? (
<div> <div>
<div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32"> <div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32">
<nav className="bg-blue-600"> <nav className="bg-blue-600">
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div className="border-b border-blue-500"> <div className="border-b border-blue-500">
<div className="flex items-center justify-between h-16 px-4 sm:px-0"> <div className="flex items-center justify-between h-16 px-4 sm:px-0">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<img className="h-6" src="/calendso-white.svg" alt="Calendso" /> <img className="h-6" src="/calendso-white.svg" alt="Calendso" />
</div> </div>
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
<Link href="/"> <Link href="/">
<a className={router.pathname == "/" ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Dashboard</a> <a
</Link> className={
{/* <Link href="/"> router.pathname == "/"
<a className={router.pathname.startsWith("/bookings") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Bookings</a> ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
</Link> */} : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
<Link href="/availability"> }>
<a className={router.pathname.startsWith("/availability") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Availability</a> Dashboard
</Link> </a>
<Link href="/integrations"> </Link>
<a className={router.pathname.startsWith("/integrations") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Integrations</a> <Link href="/bookings">
</Link> <a
<Link href="/settings/profile"> className={
<a className={router.pathname.startsWith("/settings") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Settings</a> router.pathname.startsWith("/bookings")
</Link> ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
</div> : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
</div> }>
</div> Bookings
<div className="hidden md:block"> </a>
<div className="ml-4 flex items-center md:ml-6"> </Link>
<div className="ml-3 relative"> <Link href="/availability">
<div> <a
<button onClick={toggleProfileDropdown} type="button" className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true"> className={
<span className="sr-only">Open user menu</span> router.pathname.startsWith("/availability")
<img className="h-8 w-8 rounded-full" src={session.user.image ? session.user.image : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" + encodeURIComponent(session.user.name || "")} alt="" /> ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
</button> : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
</div> }>
{ Availability
profileDropdownExpanded && ( </a>
<div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> </Link>
<Link href={"/" + session.user.username}><a target="_blank" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Public Page</a></Link> <Link href="/integrations">
<Link href="/settings/profile"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a></Link> <a
<Link href="/settings/password"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Login &amp; Security</a></Link> className={
<button onClick={logoutHandler} className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</button> router.pathname.startsWith("/integrations")
</div> ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
) : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
} }>
</div> Integrations
</div> </a>
</div> </Link>
<div className="-mr-2 flex md:hidden"> <Link href="/settings/profile">
<button onClick={toggleMobileMenu} type="button" className=" inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> <a
<span className="sr-only">Open main menu</span> className={
{ !mobileMenuExpanded && <MenuIcon className="block h-6 w-6" /> } router.pathname.startsWith("/settings")
{ mobileMenuExpanded && <XIcon className="block h-6 w-6" /> } ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
</button> : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
</div> }>
</div> Settings
</div> </a>
</Link>
</div> </div>
</div>
{ mobileMenuExpanded && <div className="border-b border-blue-500 md:hidden bg-blue-600" id="mobile-menu">
<div className="px-2 py-3 space-y-1 sm:px-3">
<Link href="/">
<a className={router.pathname == "/" ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Dashboard</a>
</Link>
<Link href="/availability">
<a className={router.pathname.startsWith("/availability") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Availability</a>
</Link>
<Link href="/integrations">
<a className={router.pathname.startsWith("/integrations") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Integrations</a>
</Link>
</div>
<div className="pt-4 pb-3 border-t border-blue-500">
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" + encodeURIComponent(session.user.name || session.user.username)} alt="" />
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-white">{session.user.name || session.user.username}</div>
<div className="text-sm font-medium leading-none text-gray-200">{session.user.email}</div>
</div>
</div>
<div className="mt-3 px-2 space-y-1">
<Link href="/settings/profile">
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Your Profile</a>
</Link>
<Link href="/settings">
<a className={router.pathname.startsWith("/settings") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Settings</a>
</Link>
<button onClick={logoutHandler} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Sign out</button>
</div>
</div>
</div>
}
</nav>
<header className={props.noPaddingBottom ? "pt-10" : "py-10"}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-white">
{props.heading}
</h1>
</div>
</header>
</div>
<main className="-mt-32">
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
{props.children}
</div> </div>
</main> <div className="hidden md:block">
</div> <div className="ml-4 flex items-center md:ml-6">
); <div className="ml-3 relative">
<div>
<button
onClick={toggleProfileDropdown}
type="button"
className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu"
aria-expanded="false"
aria-haspopup="true">
<span className="sr-only">Open user menu</span>
<img
className="h-8 w-8 rounded-full"
src={
session.user.image
? session.user.image
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
encodeURIComponent(session.user.name || "")
}
alt=""
/>
</button>
</div>
{profileDropdownExpanded && (
<div
className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
role="menu"
aria-orientation="vertical"
aria-labelledby="user-menu">
<Link href={"/" + session.user.username}>
<a
target="_blank"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Your Public Page
</a>
</Link>
<Link href="/settings/profile">
<a
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Your Profile
</a>
</Link>
<Link href="/settings/password">
<a
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Login &amp; Security
</a>
</Link>
<button
onClick={logoutHandler}
className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Sign out
</button>
</div>
)}
</div>
</div>
</div>
<div className="-mr-2 flex md:hidden">
<button
onClick={toggleMobileMenu}
type="button"
className=" inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none"
aria-controls="mobile-menu"
aria-expanded="false">
<span className="sr-only">Open main menu</span>
{!mobileMenuExpanded && <MenuIcon className="block h-6 w-6" />}
{mobileMenuExpanded && <XIcon className="block h-6 w-6" />}
</button>
</div>
</div>
</div>
</div>
{mobileMenuExpanded && (
<div className="border-b border-blue-500 md:hidden bg-blue-600" id="mobile-menu">
<div className="px-2 py-3 space-y-1 sm:px-3">
<Link href="/">
<a
className={
router.pathname == "/"
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Dashboard
</a>
</Link>
<Link href="/availability">
<a
className={
router.pathname.startsWith("/availability")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Availability
</a>
</Link>
<Link href="/integrations">
<a
className={
router.pathname.startsWith("/integrations")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Integrations
</a>
</Link>
</div>
<div className="pt-4 pb-3 border-t border-blue-500">
<div className="flex items-center px-5">
<div className="flex-shrink-0">
<img
className="h-10 w-10 rounded-full"
src={
"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" +
encodeURIComponent(session.user.name || session.user.username)
}
alt=""
/>
</div>
<div className="ml-3">
<div className="text-base font-medium leading-none text-white">
{session.user.name || session.user.username}
</div>
<div className="text-sm font-medium leading-none text-gray-200">{session.user.email}</div>
</div>
</div>
<div className="mt-3 px-2 space-y-1">
<Link href="/settings/profile">
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">
Your Profile
</a>
</Link>
<Link href="/settings">
<a
className={
router.pathname.startsWith("/settings")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Settings
</a>
</Link>
<button
onClick={logoutHandler}
className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">
Sign out
</button>
</div>
</div>
</div>
)}
</nav>
<header className={props.noPaddingBottom ? "pt-10" : "py-10"}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-white">{props.heading}</h1>
</div>
</header>
</div>
<main className="-mt-32">
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">{props.children}</div>
</main>
</div>
) : null;
} }

108
components/booking/AvailableTimes.tsx Normal file
View file

@ -0,0 +1,108 @@
import dayjs, {Dayjs} from "dayjs";
import isBetween from 'dayjs/plugin/isBetween';
dayjs.extend(isBetween);
import {useEffect, useMemo, useState} from "react";
import getSlots from "../../lib/slots";
import Link from "next/link";
import {timeZone} from "../../lib/clock";
import {useRouter} from "next/router";
import {ExclamationIcon} from "@heroicons/react/solid";
const AvailableTimes = (props) => {
const router = useRouter();
const { user, rescheduleUid } = router.query;
const [loaded, setLoaded] = useState(false);
const [error, setError] = useState(false);
const times = getSlots({
calendarTimeZone: props.user.timeZone,
selectedTimeZone: timeZone(),
eventLength: props.eventType.length,
selectedDate: props.date,
dayStartTime: props.user.startTime,
dayEndTime: props.user.endTime,
});
const handleAvailableSlots = (busyTimes: []) => {
// Check for conflicts
for (let i = times.length - 1; i >= 0; i -= 1) {
busyTimes.forEach(busyTime => {
let startTime = dayjs(busyTime.start);
let endTime = dayjs(busyTime.end);
// Check if start times are the same
if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) {
times.splice(i, 1);
}
// Check if time is between start and end times
if (dayjs(times[i]).isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if slot end time is between start and end time
if (dayjs(times[i]).add(props.eventType.length, 'minutes').isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if startTime is between slot
if (startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, 'minutes'))) {
times.splice(i, 1);
}
});
}
// Display available times
setLoaded(true);
};
// Re-render only when invitee changes date
useEffect(() => {
setLoaded(false);
setError(false);
fetch(`/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 => setError(true))
}, [props.date]);
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="text-gray-600 font-light text-xl mb-4 text-left">
<span className="w-1/2">
{props.date.format("dddd DD MMMM YYYY")}
</span>
</div>
{
!error && loaded && times.map((time) =>
<div key={dayjs(time).utc().format()}>
<Link
href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (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>
</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>
);
}
export default AvailableTimes;

73
components/booking/TimeOptions.tsx Normal file
View file

@ -0,0 +1,73 @@
import {Switch} from "@headlessui/react";
import TimezoneSelect from "react-timezone-select";
import {useEffect, useState} from "react";
import {timeZone, is24h} from '../../lib/clock';
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
const TimeOptions = (props) => {
const [selectedTimeZone, setSelectedTimeZone] = useState('');
const [is24hClock, setIs24hClock] = useState(false);
useEffect( () => {
setIs24hClock(is24h());
setSelectedTimeZone(timeZone());
}, []);
useEffect( () => {
props.onSelectTimeZone(timeZone(selectedTimeZone));
}, [selectedTimeZone]);
useEffect( () => {
props.onToggle24hClock(is24h(is24hClock));
}, [is24hClock]);
return selectedTimeZone !== "" && (
<div className="w-full rounded shadow border bg-white px-4 py-2">
<div className="flex mb-4">
<div className="w-1/2 font-medium">Time Options</div>
<div className="w-1/2">
<Switch.Group
as="div"
className="flex items-center justify-end"
>
<Switch.Label as="span" className="mr-3">
<span className="text-sm text-gray-500">am/pm</span>
</Switch.Label>
<Switch
checked={is24hClock}
onChange={setIs24hClock}
className={classNames(
is24hClock ? "bg-blue-600" : "bg-gray-200",
"relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={classNames(
is24hClock ? "translate-x-3" : "translate-x-0",
"pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
)}
/>
</Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm text-gray-500">24h</span>
</Switch.Label>
</Switch.Group>
</div>
</div>
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
onChange={(tz) => setSelectedTimeZone(tz.value)}
className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
);
}
export default TimeOptions;

18
components/ui/UsernameInput.tsx
View file

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
export const UsernameInput = React.forwardRef( (props, ref) => ( const UsernameInput = React.forwardRef((props, ref) => (
// todo, check if username is already taken here? // todo, check if username is already taken here?
<div> <div>
<label htmlFor="username" className="block text-sm font-medium text-gray-700"> <label htmlFor="username" className="block text-sm font-medium text-gray-700">
@ -10,8 +10,20 @@ export const UsernameInput = React.forwardRef( (props, ref) => (
<span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm"> <span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm">
{typeof window !== "undefined" && window.location.hostname}/ {typeof window !== "undefined" && window.location.hostname}/
</span> </span>
<input ref={ref} type="text" name="username" id="username" autoComplete="username" required {...props} <input
className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"/> ref={ref}
type="text"
name="username"
id="username"
autoComplete="username"
required
{...props}
className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 lowercase"
/>
</div> </div>
</div> </div>
)); ));
UsernameInput.displayName = "UsernameInput";
export { UsernameInput };

362
lib/calendarClient.ts
View file

@ -1,16 +1,15 @@
import EventOrganizerMail from "./emails/EventOrganizerMail"; import EventOrganizerMail from "./emails/EventOrganizerMail";
import EventAttendeeMail from "./emails/EventAttendeeMail"; import EventAttendeeMail from "./emails/EventAttendeeMail";
import {v5 as uuidv5} from 'uuid'; import { v5 as uuidv5 } from "uuid";
import short from 'short-uuid'; import short from "short-uuid";
import EventOrganizerRescheduledMail from "./emails/EventOrganizerRescheduledMail"; import EventOrganizerRescheduledMail from "./emails/EventOrganizerRescheduledMail";
import EventAttendeeRescheduledMail from "./emails/EventAttendeeRescheduledMail"; import EventAttendeeRescheduledMail from "./emails/EventAttendeeRescheduledMail";
const translator = short(); const translator = short();
const { google } = require("googleapis");
import prisma from "./prisma"; import prisma from "./prisma";
const {google} = require('googleapis');
const googleAuth = (credential) => { const googleAuth = (credential) => {
const {client_secret, client_id, redirect_uris} = JSON.parse(process.env.GOOGLE_API_CREDENTIALS).web; const {client_secret, client_id, redirect_uris} = JSON.parse(process.env.GOOGLE_API_CREDENTIALS).web;
const myGoogleAuth = new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]); const myGoogleAuth = new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
@ -60,7 +59,6 @@ function handleErrorsRaw(response) {
} }
const o365Auth = (credential) => { const o365Auth = (credential) => {
const isExpired = (expiryDate) => expiryDate < Math.round((+(new Date()) / 1000)); const isExpired = (expiryDate) => expiryDate < Math.round((+(new Date()) / 1000));
const refreshAccessToken = (refreshToken) => { const refreshAccessToken = (refreshToken) => {
@ -91,14 +89,17 @@ const o365Auth = (credential) => {
} }
return { return {
getToken: () => !isExpired(credential.key.expiry_date) ? Promise.resolve(credential.key.access_token) : refreshAccessToken(credential.key.refresh_token) getToken: () =>
!isExpired(credential.key.expiry_date)
? Promise.resolve(credential.key.access_token)
: refreshAccessToken(credential.key.refresh_token),
}; };
}; };
interface Person { interface Person {
name?: string, name?: string;
email: string, email: string;
timeZone: string timeZone: string;
} }
interface CalendarEvent { interface CalendarEvent {
@ -110,13 +111,18 @@ interface CalendarEvent {
location?: string; location?: string;
organizer: Person; organizer: Person;
attendees: Person[]; attendees: Person[];
}; conferenceData?: ConferenceData;
}
interface ConferenceData {
createRequest: any;
}
interface IntegrationCalendar { interface IntegrationCalendar {
integration: string; integration: string;
primary: boolean; primary: boolean;
externalId: string; externalId: string;
name: string; name: string;
} }
interface CalendarApiAdapter { interface CalendarApiAdapter {
@ -126,26 +132,28 @@ interface CalendarApiAdapter {
deleteEvent(uid: String); deleteEvent(uid: String);
getAvailability(dateFrom, dateTo, selectedCalendars: IntegrationCalendar[]): Promise<any>; getAvailability(
dateFrom,
dateTo,
selectedCalendars: IntegrationCalendar[]
): Promise<any>;
listCalendars(): Promise<IntegrationCalendar[]>; listCalendars(): Promise<IntegrationCalendar[]>;
} }
const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => { const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
const auth = o365Auth(credential); const auth = o365Auth(credential);
const translateEvent = (event: CalendarEvent) => { const translateEvent = (event: CalendarEvent) => {
let optional = {}; let optional = {};
if (event.location) { if (event.location) {
optional.location = {displayName: event.location}; optional.location = { displayName: event.location };
} }
return { return {
subject: event.title, subject: event.title,
body: { body: {
contentType: 'HTML', contentType: "HTML",
content: event.description, content: event.description,
}, },
start: { start: {
@ -156,99 +164,138 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
dateTime: event.endTime, dateTime: event.endTime,
timeZone: event.organizer.timeZone, timeZone: event.organizer.timeZone,
}, },
attendees: event.attendees.map(attendee => ({ attendees: event.attendees.map((attendee) => ({
emailAddress: { emailAddress: {
address: attendee.email, address: attendee.email,
name: attendee.name name: attendee.name,
}, },
type: "required" type: "required",
})), })),
...optional ...optional,
} };
}; };
const integrationType = "office365_calendar"; const integrationType = "office365_calendar";
function listCalendars(): Promise<IntegrationCalendar[]> { function listCalendars(): Promise<IntegrationCalendar[]> {
return auth.getToken().then(accessToken => fetch('https://graph.microsoft.com/v1.0/me/calendars', { return auth.getToken().then((accessToken) =>
method: 'get', fetch("https://graph.microsoft.com/v1.0/me/calendars", {
headers: { method: "get",
'Authorization': 'Bearer ' + accessToken, headers: {
'Content-Type': 'application/json' Authorization: "Bearer " + accessToken,
}, "Content-Type": "application/json",
}).then(handleErrorsJson)
.then(responseBody => {
return responseBody.value.map(cal => {
const calendar: IntegrationCalendar = {
externalId: cal.id, integration: integrationType, name: cal.name, primary: cal.isDefaultCalendar
}
return calendar;
});
})
)
}
return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => {
const filter = "?$filter=start/dateTime ge '" + dateFrom + "' and end/dateTime le '" + dateTo + "'"
return auth.getToken().then(
(accessToken) => {
const selectedCalendarIds = selectedCalendars.filter(e => e.integration === integrationType).map(e => e.externalId);
if (selectedCalendarIds.length == 0 && selectedCalendars.length > 0){
// Only calendars of other integrations selected
return Promise.resolve([]);
}
return (selectedCalendarIds.length == 0
? listCalendars().then(cals => cals.map(e => e.externalId))
: Promise.resolve(selectedCalendarIds).then(x => x)).then((ids: string[]) => {
const urls = ids.map(calendarId => 'https://graph.microsoft.com/v1.0/me/calendars/' + calendarId + '/events' + filter)
return Promise.all(urls.map(url => fetch(url, {
method: 'get',
headers: {
'Authorization': 'Bearer ' + accessToken,
'Prefer': 'outlook.timezone="Etc/GMT"'
}
})
.then(handleErrorsJson)
.then(responseBody => responseBody.value.map((evt) => ({
start: evt.start.dateTime + 'Z',
end: evt.end.dateTime + 'Z'
}))
))).then(results => results.reduce((acc, events) => acc.concat(events), []))
})
}
).catch((err) => {
console.error(err);
});
}, },
createEvent: (event: CalendarEvent) => auth.getToken().then(accessToken => fetch('https://graph.microsoft.com/v1.0/me/calendar/events', { })
method: 'POST', .then(handleErrorsJson)
headers: { .then((responseBody) => {
'Authorization': 'Bearer ' + accessToken, return responseBody.value.map((cal) => {
'Content-Type': 'application/json', const calendar: IntegrationCalendar = {
}, externalId: cal.id,
body: JSON.stringify(translateEvent(event)) integration: integrationType,
}).then(handleErrorsJson).then((responseBody) => ({ name: cal.name,
primary: cal.isDefaultCalendar,
};
return calendar;
});
})
);
}
return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => {
const filter =
"?$filter=start/dateTime ge '" +
dateFrom +
"' and end/dateTime le '" +
dateTo +
"'";
return auth
.getToken()
.then((accessToken) => {
const selectedCalendarIds = selectedCalendars
.filter((e) => e.integration === integrationType)
.map((e) => e.externalId);
if (selectedCalendarIds.length == 0 && selectedCalendars.length > 0) {
// Only calendars of other integrations selected
return Promise.resolve([]);
}
return (
selectedCalendarIds.length == 0
? listCalendars().then((cals) => cals.map((e) => e.externalId))
: Promise.resolve(selectedCalendarIds).then((x) => x)
).then((ids: string[]) => {
const urls = ids.map(
(calendarId) =>
"https://graph.microsoft.com/v1.0/me/calendars/" +
calendarId +
"/events" +
filter
);
return Promise.all(
urls.map((url) =>
fetch(url, {
method: "get",
headers: {
Authorization: "Bearer " + accessToken,
Prefer: 'outlook.timezone="Etc/GMT"',
},
})
.then(handleErrorsJson)
.then((responseBody) =>
responseBody.value.map((evt) => ({
start: evt.start.dateTime + "Z",
end: evt.end.dateTime + "Z",
}))
)
)
).then((results) =>
results.reduce((acc, events) => acc.concat(events), [])
);
});
})
.catch((err) => {
console.log(err);
});
},
createEvent: (event: CalendarEvent) =>
auth.getToken().then((accessToken) =>
fetch("https://graph.microsoft.com/v1.0/me/calendar/events", {
method: "POST",
headers: {
Authorization: "Bearer " + accessToken,
"Content-Type": "application/json",
},
body: JSON.stringify(translateEvent(event)),
})
.then(handleErrorsJson)
.then((responseBody) => ({
...responseBody, ...responseBody,
disableConfirmationEmail: true, disableConfirmationEmail: true,
}))), }))
deleteEvent: (uid: String) => auth.getToken().then(accessToken => fetch('https://graph.microsoft.com/v1.0/me/calendar/events/' + uid, { ),
method: 'DELETE', deleteEvent: (uid: String) =>
headers: { auth.getToken().then((accessToken) =>
'Authorization': 'Bearer ' + accessToken fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
} method: "DELETE",
}).then(handleErrorsRaw)), headers: {
updateEvent: (uid: String, event: CalendarEvent) => auth.getToken().then(accessToken => fetch('https://graph.microsoft.com/v1.0/me/calendar/events/' + uid, { Authorization: "Bearer " + accessToken,
method: 'PATCH', },
headers: { }).then(handleErrorsRaw)
'Authorization': 'Bearer ' + accessToken, ),
'Content-Type': 'application/json' updateEvent: (uid: String, event: CalendarEvent) =>
}, auth.getToken().then((accessToken) =>
body: JSON.stringify(translateEvent(event)) fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
}).then(handleErrorsRaw)), method: "PATCH",
listCalendars headers: {
} Authorization: "Bearer " + accessToken,
"Content-Type": "application/json",
},
body: JSON.stringify(translateEvent(event)),
}).then(handleErrorsRaw)
),
listCalendars,
};
}; };
const GoogleCalendar = (credential): CalendarApiAdapter => { const GoogleCalendar = (credential): CalendarApiAdapter => {
@ -312,9 +359,13 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
}, },
}; };
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}); const calendar = google.calendar({version: 'v3', auth: myGoogleAuth});
calendar.events.insert({ calendar.events.insert({
@ -350,9 +401,9 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
}, },
}; };
if (event.location) { if (event.location) {
payload['location'] = event.location; payload["location"] = event.location;
} }
const calendar = google.calendar({version: 'v3', auth: myGoogleAuth}); const calendar = google.calendar({version: 'v3', auth: myGoogleAuth});
calendar.events.update({ calendar.events.update({
@ -407,35 +458,50 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
}; };
// factory // factory
const calendars = (withCredentials): CalendarApiAdapter[] => withCredentials.map((cred) => { const calendars = (withCredentials): CalendarApiAdapter[] =>
switch (cred.type) { withCredentials
case 'google_calendar': .map((cred) => {
return GoogleCalendar(cred); switch (cred.type) {
case 'office365_calendar': case "google_calendar":
return MicrosoftOffice365Calendar(cred); return GoogleCalendar(cred);
default: case "office365_calendar":
return; // unknown credential, could be legacy? In any case, ignore return MicrosoftOffice365Calendar(cred);
} default:
}).filter(Boolean); return; // unknown credential, could be legacy? In any case, ignore
}
})
.filter(Boolean);
const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalendars) => Promise.all( const getBusyCalendarTimes = (
calendars(withCredentials).map(c => c.getAvailability(dateFrom, dateTo, selectedCalendars)) withCredentials,
).then( dateFrom,
(results) => { dateTo,
return results.reduce((acc, availability) => acc.concat(availability), []) selectedCalendars
} ) =>
); Promise.all(
calendars(withCredentials).map((c) =>
c.getAvailability(dateFrom, dateTo, selectedCalendars)
)
).then((results) => {
return results.reduce((acc, availability) => acc.concat(availability), []);
});
const listCalendars = (withCredentials) => Promise.all( const listCalendars = (withCredentials) =>
calendars(withCredentials).map(c => c.listCalendars()) Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then(
).then( (results) => results.reduce((acc, calendars) => acc.concat(calendars), [])
(results) => results.reduce((acc, calendars) => acc.concat(calendars), []) );
);
const createEvent = async (credential, calEvent: CalendarEvent): Promise<any> => { const createEvent = async (
const uid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL)); credential,
calEvent: CalendarEvent
): Promise<any> => {
const uid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const creationResult = credential ? await calendars([credential])[0].createEvent(calEvent) : null; const creationResult = credential
? 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);
@ -455,14 +521,22 @@ const createEvent = async (credential, calEvent: CalendarEvent): Promise<any> =>
return { return {
uid, uid,
createdEvent: creationResult createdEvent: creationResult,
}; };
}; };
const updateEvent = async (credential, uidToUpdate: String, calEvent: CalendarEvent): Promise<any> => { const updateEvent = async (
const newUid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL)); credential,
uidToUpdate: String,
calEvent: CalendarEvent
): Promise<any> => {
const newUid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const updateResult = credential ? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent) : null; const updateResult = credential
? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent)
: null;
const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid); const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid);
const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid); const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid);
@ -482,7 +556,7 @@ const updateEvent = async (credential, uidToUpdate: String, calEvent: CalendarEv
return { return {
uid: newUid, uid: newUid,
updatedEvent: updateResult updatedEvent: updateResult,
}; };
}; };
@ -494,4 +568,12 @@ const deleteEvent = (credential, uid: String): Promise<any> => {
return Promise.resolve({}); return Promise.resolve({});
}; };
export {getBusyCalendarTimes, createEvent, updateEvent, deleteEvent, CalendarEvent, listCalendars, IntegrationCalendar}; export {
getBusyCalendarTimes,
createEvent,
updateEvent,
deleteEvent,
CalendarEvent,
listCalendars,
IntegrationCalendar,
};

48
lib/clock.ts Normal file
View file

@ -0,0 +1,48 @@
// handles logic related to user clock display using 24h display / timeZone options.
import dayjs, {Dayjs} from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc)
dayjs.extend(timezone)
interface TimeOptions { is24hClock: boolean, inviteeTimeZone: string };
const timeOptions: TimeOptions = {
is24hClock: false,
inviteeTimeZone: '',
}
const isInitialized: boolean = false;
const initClock = () => {
if (typeof localStorage === "undefined" || isInitialized) {
return;
}
timeOptions.is24hClock = localStorage.getItem('timeOption.is24hClock') === "true";
timeOptions.inviteeTimeZone = localStorage.getItem('timeOption.preferredTimeZone') || dayjs.tz.guess();
}
const is24h = (is24hClock?: boolean) => {
initClock();
if(typeof is24hClock !== "undefined") set24hClock(is24hClock);
return timeOptions.is24hClock;
}
const set24hClock = (is24hClock: boolean) => {
localStorage.setItem('timeOption.is24hClock', is24hClock.toString());
timeOptions.is24hClock = is24hClock;
}
function setTimeZone(selectedTimeZone: string) {
localStorage.setItem('timeOption.preferredTimeZone', selectedTimeZone);
timeOptions.inviteeTimeZone = selectedTimeZone;
}
const timeZone = (selectedTimeZone?: string) => {
initClock();
if (selectedTimeZone) setTimeZone(selectedTimeZone)
return timeOptions.inviteeTimeZone;
}
export {is24h, timeZone};

7
lib/emails/EventAttendeeMail.ts
View file

@ -1,6 +1,13 @@
import dayjs, {Dayjs} from "dayjs"; import dayjs, {Dayjs} from "dayjs";
import EventMail from "./EventMail"; import EventMail from "./EventMail";
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(localizedFormat);
export default class EventAttendeeMail extends EventMail { export default class EventAttendeeMail extends EventMail {
/** /**
* Returns the email text as HTML representation. * Returns the email text as HTML representation.

3
lib/emails/EventMail.ts
View file

@ -127,7 +127,8 @@ export default abstract class EventMail {
protected getAdditionalFooter(): string { protected getAdditionalFooter(): string {
return ` return `
<br/> <br/>
Need to change this event?<br /> <br/>
<strong>Need to change this event?</strong><br />
Cancel: <a href="${this.getCancelLink()}">${this.getCancelLink()}</a><br /> Cancel: <a href="${this.getCancelLink()}">${this.getCancelLink()}</a><br />
Reschedule: <a href="${this.getRescheduleLink()}">${this.getRescheduleLink()}</a> Reschedule: <a href="${this.getRescheduleLink()}">${this.getRescheduleLink()}</a>
`; `;

9
lib/emails/EventOrganizerMail.ts
View file

@ -2,6 +2,15 @@ import {createEvent} from "ics";
import dayjs, {Dayjs} from "dayjs"; import dayjs, {Dayjs} from "dayjs";
import EventMail from "./EventMail"; import EventMail from "./EventMail";
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import toArray from 'dayjs/plugin/toArray';
import localizedFormat from 'dayjs/plugin/localizedFormat';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(toArray);
dayjs.extend(localizedFormat);
export default class EventOrganizerMail extends EventMail { export default class EventOrganizerMail extends EventMail {
/** /**
* Returns the instance's event as an iCal event in string representation. * Returns the instance's event as an iCal event in string representation.

1
lib/location.ts
View file

@ -2,5 +2,6 @@
export enum LocationType { export enum LocationType {
InPerson = 'inPerson', InPerson = 'inPerson',
Phone = 'phone', Phone = 'phone',
GoogleMeet = 'integrations:google:meet'
} }

3966
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

26
package.json
View file

@ -6,7 +6,10 @@
"dev": "next dev", "dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"postinstall": "prisma generate" "postinstall": "prisma generate",
"pre-commit": "lint-staged",
"lint": "eslint . --ext .ts,.js,.tsx,.jsx",
"prepare": "husky install"
}, },
"dependencies": { "dependencies": {
"@headlessui/react": "^1.0.0", "@headlessui/react": "^1.0.0",
@ -19,6 +22,7 @@
"dayjs": "^1.10.4", "dayjs": "^1.10.4",
"googleapis": "^67.1.1", "googleapis": "^67.1.1",
"ics": "^2.27.0", "ics": "^2.27.0",
"lodash.merge": "^4.6.2",
"next": "^10.2.0", "next": "^10.2.0",
"next-auth": "^3.13.2", "next-auth": "^3.13.2",
"next-transpile-modules": "^7.0.0", "next-transpile-modules": "^7.0.0",
@ -34,10 +38,26 @@
"devDependencies": { "devDependencies": {
"@types/node": "^14.14.33", "@types/node": "^14.14.33",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"autoprefixer": "^10.2.6", "@typescript-eslint/eslint-plugin": "^4.27.0",
"postcss": "^8.3.5", "@typescript-eslint/parser": "^4.27.0",
"autoprefixer": "^10.2.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^6.0.0",
"lint-staged": "^11.0.0",
"postcss": "^8.2.8",
"prettier": "^2.3.1",
"prisma": "^2.23.0", "prisma": "^2.23.0",
"tailwindcss": "^2.2.2", "tailwindcss": "^2.2.2",
"typescript": "^4.2.3" "typescript": "^4.2.3"
},
"lint-staged": {
"./{*,{pages,components,lib}/**/*}.{js,ts,jsx,tsx}": [
"prettier --write",
"eslint"
]
} }
} }

166
pages/[user].tsx
View file

@ -1,92 +1,94 @@
import Head from 'next/head'; import { GetServerSideProps } from "next";
import Link from 'next/link'; import Head from "next/head";
import prisma from '../lib/prisma'; import Link from "next/link";
import Avatar from '../components/Avatar'; import prisma from "../lib/prisma";
import Avatar from "../components/Avatar";
export default function User(props) { export default function User(props): User {
const eventTypes = props.eventTypes.map(type => const eventTypes = props.eventTypes.map((type) => (
<li key={type.id}> <li key={type.id}>
<Link href={'/' + props.user.username + '/' + type.slug}> <Link href={`/${props.user.username}/${type.slug}`}>
<a className="block px-6 py-4"> <a className="block px-6 py-4">
<div className="inline-block w-3 h-3 rounded-full mr-2" style={{backgroundColor:getRandomColorCode()}}></div> <div
<h2 className="inline-block font-medium">{type.title}</h2> className="inline-block w-3 h-3 rounded-full mr-2"
<p className="inline-block text-gray-400 ml-2">{type.description}</p> style={{ backgroundColor: getRandomColorCode() }}></div>
</a> <h2 className="inline-block font-medium">{type.title}</h2>
</Link> <p className="inline-block text-gray-400 ml-2">{type.description}</p>
</li> </a>
); </Link>
return ( </li>
<div> ));
<Head> return (
<title>{props.user.name || props.user.username} | Calendso</title> <div>
<link rel="icon" href="/favicon.ico" /> <Head>
</Head> <title>{props.user.name || props.user.username} | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="max-w-2xl mx-auto my-24"> <main className="max-w-2xl mx-auto my-24">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" /> <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name || props.user.username}</h1> <h1 className="text-3xl font-semibold text-gray-800 mb-1">
<p className="text-gray-600">{props.user.bio}</p> {props.user.name || props.user.username}
</div> </h1>
<div className="bg-white shadow overflow-hidden rounded-md"> <p className="text-gray-600">{props.user.bio}</p>
<ul className="divide-y divide-gray-200">
{eventTypes}
</ul>
{eventTypes.length == 0 &&
<div className="p-8 text-center text-gray-400">
<h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn't set up any event types yet.</p>
</div>
}
</div>
</main>
</div> </div>
) <div className="bg-white shadow overflow-hidden rounded-md">
<ul className="divide-y divide-gray-200">{eventTypes}</ul>
{eventTypes.length == 0 && (
<div className="p-8 text-center text-gray-400">
<h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
</div>
)}
</div>
</main>
</div>
);
} }
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
username: context.query.user, username: context.query.user.toLowerCase(),
}, },
select: { select: {
id: true, id: true,
username: true, username: true,
email:true, email: true,
name: true, name: true,
bio: true, bio: true,
avatar: true, avatar: true,
eventTypes: true eventTypes: true,
} },
}); });
if (!user) {
return {
notFound: true,
}
}
const eventTypes = await prisma.eventType.findMany({
where: {
userId: user.id,
hidden: false
}
});
if (!user) {
return { return {
props: { notFound: true,
user, };
eventTypes }
},
} const eventTypes = await prisma.eventType.findMany({
} where: {
userId: user.id,
hidden: false,
},
});
return {
props: {
user,
eventTypes,
},
};
};
// Auxiliary methods // Auxiliary methods
export function getRandomColorCode(): string {
export function getRandomColorCode() { let color = "#";
let color = '#'; for (let idx = 0; idx < 6; idx++) {
for (let idx = 0; idx < 6; idx++) { color += Math.floor(Math.random() * 10);
color += Math.floor(Math.random() * 10); }
} return color;
return color;
} }

615
pages/[user]/[type].tsx
View file

@ -1,410 +1,237 @@
import {useEffect, useMemo, useState} from 'react'; import { useEffect, useState } from "react";
import Head from 'next/head'; import { GetServerSideProps } from "next";
import Link from 'next/link'; import Head from "next/head";
import prisma from '../../lib/prisma'; import Link from "next/link";
import {useRouter} from 'next/router'; import prisma from "../../lib/prisma";
import dayjs, {Dayjs} from 'dayjs'; import { useRouter } from "next/router";
import {Switch} from '@headlessui/react'; import dayjs, { Dayjs } from "dayjs";
import TimezoneSelect from 'react-timezone-select';
import { import {
ClockIcon, ClockIcon,
GlobeIcon, GlobeIcon,
ChevronDownIcon, ChevronDownIcon,
ChevronLeftIcon, ChevronLeftIcon,
ChevronRightIcon, ChevronRightIcon,
XCircleIcon, ExclamationIcon } from "@heroicons/react/solid";
} from '@heroicons/react/solid'; import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'; import utc from "dayjs/plugin/utc";
import isBetween from 'dayjs/plugin/isBetween'; import timezone from "dayjs/plugin/timezone";
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
import Avatar from '../../components/Avatar';
import getSlots from '../../lib/slots';
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry";
dayjs.extend(isSameOrBefore); dayjs.extend(isSameOrBefore);
dayjs.extend(isBetween);
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
function classNames(...classes) { import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
return classes.filter(Boolean).join(' ') import AvailableTimes from "../../components/booking/AvailableTimes";
} import TimeOptions from "../../components/booking/TimeOptions";
import Avatar from "../../components/Avatar";
import { timeZone } from "../../lib/clock";
export default function Type(props) { export default function Type(props): Type {
// Initialise state // Get router variables
const [selectedDate, setSelectedDate] = useState<Dayjs>(); const router = useRouter();
const [selectedMonth, setSelectedMonth] = useState(dayjs().month()); const { rescheduleUid } = router.query;
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
const [is24h, setIs24h] = useState(false);
const [busy, setBusy] = useState([]);
const telemetry = useTelemetry();
const [selectedTimeZone, setSelectedTimeZone] = useState(''); // Initialise state
const [selectedDate, setSelectedDate] = useState<Dayjs>();
const [selectedMonth, setSelectedMonth] = useState(dayjs().month());
const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false);
const [timeFormat, setTimeFormat] = useState("h:mma");
const telemetry = useTelemetry();
function toggleTimeOptions() { useEffect((): void => {
setIsTimeOptionsOpen(!isTimeOptionsOpen); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters()));
} }, [telemetry]);
function toggleClockSticky() { // Handle month changes
localStorage.setItem('timeOption.is24hClock', (!is24h).toString()); const incrementMonth = () => {
setIs24h(!is24h); setSelectedMonth(selectedMonth + 1);
} };
function setPreferredTimeZoneSticky({ value }: string) { const decrementMonth = () => {
localStorage.setItem('timeOption.preferredTimeZone', value); setSelectedMonth(selectedMonth - 1);
setSelectedTimeZone(value); };
}
function initializeTimeOptions() { // Set up calendar
setSelectedTimeZone(localStorage.getItem('timeOption.preferredTimeZone') || dayjs.tz.guess()); const daysInMonth = dayjs().month(selectedMonth).daysInMonth();
setIs24h(!!localStorage.getItem('timeOption.is24hClock')); const days = [];
} for (let i = 1; i <= daysInMonth; i++) {
days.push(i);
}
useEffect(() => { // Create placeholder elements for empty days in first week
telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())) let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
}, []); if (props.user.weekStart === "Monday") {
weekdayOfFirst -= 1;
// Handle date change and timezone change if (weekdayOfFirst < 0) weekdayOfFirst = 6;
useEffect(() => { }
const emptyDays = Array(weekdayOfFirst)
if ( ! selectedTimeZone ) { .fill(null)
initializeTimeOptions(); .map((day, i) => (
} <div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
{null}
const changeDate = async () => {
if (!selectedDate) {
return
}
setLoading(true);
setError(false);
const res = await fetch(`/api/availability/${user}?dateFrom=${lowerBound.utc().format()}&dateTo=${upperBound.utc().format()}`);
if (res.ok) {
const busyTimes = await res.json();
if (busyTimes.length > 0) setBusy(busyTimes);
} else {
setError(true);
}
setLoading(false);
}
changeDate();
}, [selectedDate, selectedTimeZone]);
// Get router variables
const router = useRouter();
const { user, rescheduleUid } = router.query;
// Handle month changes
const incrementMonth = () => {
setSelectedMonth(selectedMonth + 1);
}
const decrementMonth = () => {
setSelectedMonth(selectedMonth - 1);
}
// Need to define the bounds of the 24-hour window
const lowerBound = useMemo(() => {
if(!selectedDate) {
return
}
return selectedDate.startOf('day')
}, [selectedDate])
const upperBound = useMemo(() => {
if(!selectedDate) return
return selectedDate.endOf('day')
}, [selectedDate])
// Set up calendar
var daysInMonth = dayjs().month(selectedMonth).daysInMonth();
var days = [];
for (let i = 1; i <= daysInMonth; i++) {
days.push(i);
}
// Create placeholder elements for empty days in first week
let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day();
if (props.user.weekStart === 'Monday') {
weekdayOfFirst -= 1;
if (weekdayOfFirst < 0)
weekdayOfFirst = 6;
}
const emptyDays = Array(weekdayOfFirst).fill(null).map((day, i) =>
<div key={`e-${i}`} className={"text-center w-10 h-10 rounded-full mx-auto"}>
{null}
</div>
);
// Combine placeholder days with actual days
const calendar = [...emptyDays, ...days.map((day) =>
<button key={day} onClick={(e) => {
telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()))
setSelectedDate(dayjs().tz(selectedTimeZone).month(selectedMonth).date(day))
}} disabled={selectedMonth < parseInt(dayjs().format('MM')) && dayjs().month(selectedMonth).format("D") > day} className={"text-center w-10 h-10 rounded-full mx-auto " + (dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth)) ? 'bg-blue-50 text-blue-600 font-medium' : 'text-gray-400 font-light') + (dayjs(selectedDate).month(selectedMonth).format("D") == day ? ' bg-blue-600 text-white-important' : '')}>
{day}
</button>
)];
const times = useMemo(() =>
getSlots({
calendarTimeZone: props.user.timeZone,
selectedTimeZone: selectedTimeZone,
eventLength: props.eventType.length,
selectedDate: selectedDate,
dayStartTime: props.user.startTime,
dayEndTime: props.user.endTime,
})
, [selectedDate, selectedTimeZone])
// Check for conflicts
for(let i = times.length - 1; i >= 0; i -= 1) {
busy.forEach(busyTime => {
let startTime = dayjs(busyTime.start);
let endTime = dayjs(busyTime.end);
// Check if start times are the same
if (dayjs(times[i]).format('HH:mm') == startTime.format('HH:mm')) {
times.splice(i, 1);
}
// Check if time is between start and end times
if (dayjs(times[i]).isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if slot end time is between start and end time
if (dayjs(times[i]).add(props.eventType.length, 'minutes').isBetween(startTime, endTime)) {
times.splice(i, 1);
}
// Check if startTime is between slot
if(startTime.isBetween(dayjs(times[i]), dayjs(times[i]).add(props.eventType.length, 'minutes'))) {
times.splice(i, 1);
}
});
}
// Display available times
const availableTimes = times.map((time) =>
<div key={dayjs(time).utc().format()}>
<Link href={`/${props.user.username}/book?date=${dayjs(time).utc().format()}&type=${props.eventType.id}` + (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(selectedTimeZone).format(is24h ? "HH:mm" : "hh:mma")}</a>
</Link>
</div>
);
return (
<div>
<Head>
<title>
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
Calendso
</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main
className={
"mx-auto my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-6xl" : "max-w-3xl")
}
>
<div className="bg-white shadow rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-4">
<div
className={
"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")
}
>
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
<h1 className="text-3xl font-semibold text-gray-800 mb-4">
{props.eventType.title}
</h1>
<p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes
</p>
<button
onClick={toggleTimeOptions}
className="text-gray-500 mb-1 px-2 py-1 -ml-2"
>
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{selectedTimeZone}
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
</button>
{isTimeOptionsOpen && (
<div className="w-full rounded shadow border bg-white px-4 py-2">
<div className="flex mb-4">
<div className="w-1/2 font-medium">Time Options</div>
<div className="w-1/2">
<Switch.Group
as="div"
className="flex items-center justify-end"
>
<Switch.Label as="span" className="mr-3">
<span className="text-sm text-gray-500">am/pm</span>
</Switch.Label>
<Switch
checked={is24h}
onChange={toggleClockSticky}
className={classNames(
is24h ? "bg-blue-600" : "bg-gray-200",
"relative inline-flex flex-shrink-0 h-5 w-8 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
)}
>
<span className="sr-only">Use setting</span>
<span
aria-hidden="true"
className={classNames(
is24h ? "translate-x-3" : "translate-x-0",
"pointer-events-none inline-block h-4 w-4 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
)}
/>
</Switch>
<Switch.Label as="span" className="ml-3">
<span className="text-sm text-gray-500">24h</span>
</Switch.Label>
</Switch.Group>
</div>
</div>
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
onChange={setPreferredTimeZoneSticky}
className="mb-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
)}
<p className="text-gray-600 mt-3 mb-8">
{props.eventType.description}
</p>
</div>
<div
className={
"mt-8 sm:mt-0 " +
(selectedDate
? "sm:w-1/3 border-r sm:px-4"
: "sm:w-1/2 sm:pl-4")
}
>
<div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
<span className="w-1/2">
{dayjs().month(selectedMonth).format("MMMM YYYY")}
</span>
<div className="w-1/2 text-right">
<button
onClick={decrementMonth}
className={
"mr-4 " +
(selectedMonth < parseInt(dayjs().format("MM")) &&
"text-gray-400")
}
disabled={selectedMonth < parseInt(dayjs().format("MM"))}
>
<ChevronLeftIcon className="w-5 h-5" />
</button>
<button onClick={incrementMonth}>
<ChevronRightIcon className="w-5 h-5" />
</button>
</div>
</div>
<div className="grid grid-cols-7 gap-y-4 text-center">
{props.user.weekStart !== 'Monday' ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sun
</div>
) : null}
<div className="uppercase text-gray-400 text-xs tracking-widest">
Mon
</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">
Tue
</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">
Wed
</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">
Thu
</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">
Fri
</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sat
</div>
{props.user.weekStart === 'Monday' ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">
Sun
</div>
) : null}
{calendar}
</div>
</div>
{selectedDate && (
<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">
<span className="w-1/2">
{dayjs(selectedDate).format("dddd DD MMMM YYYY")}
</span>
</div>
{!loading && !error && availableTimes}
{loading && <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>
</div>
{/* note(peer):
you can remove calendso branding here, but we'd also appreciate it, if you don't <3
*/}
<div className="text-xs text-right pt-1">
<Link href="https://calendso.com">
<a
style={{ color: "#104D86" }}
className="opacity-50 hover:opacity-100"
>
powered by{" "}
<img
style={{ top: -2 }}
className="w-auto inline h-3 relative"
src="/calendso-logo-word.svg"
alt="Calendso Logo"
/>
</a>
</Link>
</div>
</main>
</div> </div>
); ));
const changeDate = (day): void => {
telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()));
setSelectedDate(dayjs().month(selectedMonth).date(day));
};
// Combine placeholder days with actual days
const calendar = [
...emptyDays,
...days.map((day) => (
<button
key={day}
onClick={() => changeDate(day)}
disabled={
selectedMonth < parseInt(dayjs().format("MM")) && dayjs().month(selectedMonth).format("D") > day
}
className={
"text-center w-10 h-10 rounded-full mx-auto " +
(dayjs().isSameOrBefore(dayjs().date(day).month(selectedMonth))
? "bg-blue-50 text-blue-600 font-medium"
: "text-gray-400 font-light") +
(dayjs(selectedDate).month(selectedMonth).format("D") == day
? " bg-blue-600 text-white-important"
: "")
}>
{day}
</button>
)),
];
const handleSelectTimeZone = (selectedTimeZone: string): void => {
if (selectedDate) {
setSelectedDate(selectedDate.tz(selectedTimeZone));
}
};
const handleToggle24hClock = (is24hClock: boolean): void => {
if (selectedDate) {
setTimeFormat(is24hClock ? "HH:mm" : "h:mma");
}
};
return (
<div>
<Head>
<title>
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
Calendso
</title>
<meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta name="description" content={props.eventType.description} />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://calendso/" />
<meta property="og:title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}/>
<meta property="og:description" content={props.eventType.description}/>
<meta property="og:image" content={"https://og-image-one-pi.vercel.app/" + encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar)} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://calendso/" />
<meta property="twitter:title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta property="twitter:description" content={props.eventType.description} />
<meta property="twitter:image" content={"https://og-image-one-pi.vercel.app/" + encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar)} />
</Head>
<main
className={
"mx-auto my-24 transition-max-width ease-in-out duration-500 " +
(selectedDate ? "max-w-6xl" : "max-w-3xl")
}>
<div className="bg-white shadow rounded-lg">
<div className="sm:flex px-4 py-5 sm:p-4">
<div className={"pr-8 sm:border-r " + (selectedDate ? "sm:w-1/3" : "sm:w-1/2")}>
<Avatar user={props.user} className="w-16 h-16 rounded-full mb-4" />
<h2 className="font-medium text-gray-500">{props.user.name}</h2>
<h1 className="text-3xl font-semibold text-gray-800 mb-4">{props.eventType.title}</h1>
<p className="text-gray-500 mb-1 px-2 py-1 -ml-2">
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes
</p>
<button
onClick={() => setIsTimeOptionsOpen(!isTimeOptionsOpen)}
className="text-gray-500 mb-1 px-2 py-1 -ml-2">
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{timeZone()}
<ChevronDownIcon className="inline-block w-4 h-4 ml-1 -mt-1" />
</button>
{isTimeOptionsOpen && (
<TimeOptions
onSelectTimeZone={handleSelectTimeZone}
onToggle24hClock={handleToggle24hClock}
/>
)}
<p className="text-gray-600 mt-3 mb-8">{props.eventType.description}</p>
</div>
<div
className={"mt-8 sm:mt-0 " + (selectedDate ? "sm:w-1/3 border-r sm:px-4" : "sm:w-1/2 sm:pl-4")}>
<div className="flex text-gray-600 font-light text-xl mb-4 ml-2">
<span className="w-1/2">{dayjs().month(selectedMonth).format("MMMM YYYY")}</span>
<div className="w-1/2 text-right">
<button
onClick={decrementMonth}
className={"mr-4 " + (selectedMonth < parseInt(dayjs().format("MM")) && "text-gray-400")}
disabled={selectedMonth < parseInt(dayjs().format("MM"))}>
<ChevronLeftIcon className="w-5 h-5" />
</button>
<button onClick={incrementMonth}>
<ChevronRightIcon className="w-5 h-5" />
</button>
</div>
</div>
<div className="grid grid-cols-7 gap-y-4 text-center">
{props.user.weekStart !== "Monday" ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">Sun</div>
) : null}
<div className="uppercase text-gray-400 text-xs tracking-widest">Mon</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">Tue</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">Wed</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">Thu</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">Fri</div>
<div className="uppercase text-gray-400 text-xs tracking-widest">Sat</div>
{props.user.weekStart === "Monday" ? (
<div className="uppercase text-gray-400 text-xs tracking-widest">Sun</div>
) : null}
{calendar}
</div>
</div>
{selectedDate && (
<AvailableTimes
timeFormat={timeFormat}
user={props.user}
eventType={props.eventType}
date={selectedDate}
/>
)}
</div>
</div>
{/* note(peer):
you can remove calendso branding here, but we'd also appreciate it, if you don't <3
*/}
<div className="text-xs text-right pt-1">
<Link href="https://calendso.com">
<a style={{ color: "#104D86" }} className="opacity-50 hover:opacity-100">
powered by{" "}
<img
style={{ top: -2 }}
className="w-auto inline h-3 relative"
src="/calendso-logo-word.svg"
alt="Calendso Logo"
/>
</a>
</Link>
</div>
</main>
</div>
);
} }
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
username: context.query.user, username: context.query.user.toLowerCase(),
}, },
select: { select: {
id: true, id: true,
@ -418,13 +245,13 @@ export async function getServerSideProps(context) {
timeZone: true, timeZone: true,
endTime: true, endTime: true,
weekStart: true, weekStart: true,
} },
}); });
if (!user ) { if (!user) {
return { return {
notFound: true, notFound: true,
} };
} }
const eventType = await prisma.eventType.findFirst({ const eventType = await prisma.eventType.findFirst({
@ -438,14 +265,14 @@ export async function getServerSideProps(context) {
id: true, id: true,
title: true, title: true,
description: true, description: true,
length: true length: true,
} },
}); });
if (!eventType) { if (!eventType) {
return { return {
notFound: true notFound: true,
} };
} }
return { return {
@ -453,5 +280,5 @@ export async function getServerSideProps(context) {
user, user,
eventType, eventType,
}, },
} };
} };

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

@ -47,6 +47,7 @@ export default function Book(props) {
const locationLabels = { const locationLabels = {
[LocationType.InPerson]: 'In-person meeting', [LocationType.InPerson]: 'In-person meeting',
[LocationType.Phone]: 'Phone call', [LocationType.Phone]: 'Phone call',
[LocationType.GoogleMeet]: 'Google Meet',
}; };
const bookingHandler = event => { const bookingHandler = event => {
@ -83,9 +84,21 @@ export default function Book(props) {
rescheduleUid: rescheduleUid rescheduleUid: rescheduleUid
}; };
if (selectedLocation) { if (selectedLocation) {
payload['location'] = selectedLocation === LocationType.Phone ? event.target.phone.value : locationInfo(selectedLocation).address; switch (selectedLocation) {
case LocationType.Phone:
payload['location'] = event.target.phone.value
break
case LocationType.InPerson:
payload['location'] = locationInfo(selectedLocation).address
break
case LocationType.GoogleMeet:
payload['location'] = LocationType.GoogleMeet
break
} }
}
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())); telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters()));
const res = await fetch( const res = await fetch(
@ -102,7 +115,12 @@ export default function Book(props) {
if (res.ok) { if (res.ok) {
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}&name=${payload.name}`; let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}&name=${payload.name}`;
if (payload['location']) { if (payload['location']) {
successUrl += "&location=" + encodeURIComponent(payload['location']); if (payload['location'].includes('integration')) {
successUrl += "&location=" + encodeURIComponent("Web conferencing details to follow.");
}
else {
successUrl += "&location=" + encodeURIComponent(payload['location']);
}
} }
await router.push(successUrl); await router.push(successUrl);

6
pages/api/availability/eventtype.ts
View file

@ -22,6 +22,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
customInputs: !req.body.customInputs customInputs: !req.body.customInputs
? undefined ? undefined
: { : {
deleteMany: {
eventTypeId: req.body.id,
NOT: {
id: {in: req.body.customInputs.filter(input => !!input.id).map(e => e.id)}
}
},
createMany: { createMany: {
data: req.body.customInputs.filter(input => !input.id).map(input => ({ data: req.body.customInputs.filter(input => !input.id).map(input => ({
type: input.type, type: input.type,

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

@ -7,9 +7,30 @@ 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 merge from "lodash.merge"
const translator = short(); const translator = short();
interface p {
location: string
}
const getLocationRequestFromIntegration = ({location}: p) => {
if (location === LocationType.GoogleMeet.valueOf()) {
const requestId = uuidv5(location, uuidv5.URL)
return {
conferenceData: {
createRequest: {
requestId: requestId
}
}
}
}
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;
@ -43,19 +64,38 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
} }
}); });
const evt: CalendarEvent = { let rawLocation = req.body.location
let evt: CalendarEvent = {
type: selectedEventType.title, type: selectedEventType.title,
title: getEventName(req.body.name, selectedEventType.title, selectedEventType.eventName), title: getEventName(req.body.name, selectedEventType.title, selectedEventType.eventName),
description: req.body.notes, description: req.body.notes,
startTime: req.body.start, startTime: req.body.start,
endTime: req.body.end, endTime: req.body.end,
location: req.body.location,
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
// set evt.location to req.body.location
if (!rawLocation?.includes('integration')) {
evt.location = rawLocation
}
// If location is set to an integration location
// Build proper transforms for evt object
// Extend evt object with those transformations
if (rawLocation?.includes('integration')) {
let maybeLocationRequestObject = getLocationRequestFromIntegration({
location: rawLocation
})
evt = merge(evt, maybeLocationRequestObject)
}
const eventType = await prisma.eventType.findFirst({ const eventType = await prisma.eventType.findFirst({
where: { where: {
userId: currentUser.id, userId: currentUser.id,

132
pages/availability/event/[type].tsx
View file

@ -1,8 +1,8 @@
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 {useRef, useState} from 'react'; import { useRef, useState, useEffect } from 'react';
import Select, {OptionBase} from 'react-select'; import Select, { OptionBase } from 'react-select';
import prisma from '../../../lib/prisma'; import prisma from '../../../lib/prisma';
import {LocationType} from '../../../lib/location'; import {LocationType} from '../../../lib/location';
import Shell from '../../../components/Shell'; import Shell from '../../../components/Shell';
@ -31,8 +31,10 @@ export default function EventType(props) {
const [ showAddCustomModal, setShowAddCustomModal ] = useState(false); const [ showAddCustomModal, setShowAddCustomModal ] = useState(false);
const [ selectedLocation, setSelectedLocation ] = useState<OptionBase | undefined>(undefined); const [ selectedLocation, setSelectedLocation ] = useState<OptionBase | undefined>(undefined);
const [ selectedInputOption, setSelectedInputOption ] = useState<OptionBase>(inputOptions[0]); const [ selectedInputOption, setSelectedInputOption ] = useState<OptionBase>(inputOptions[0]);
const [ selectedCustomInput, setSelectedCustomInput ] = useState<EventTypeCustomInput | undefined>(undefined);
const [ locations, setLocations ] = useState(props.eventType.locations || []); const [ locations, setLocations ] = useState(props.eventType.locations || []);
const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []); const [ customInputs, setCustomInputs ] = useState<EventTypeCustomInput[]>(props.eventType.customInputs.sort((a, b) => a.id - b.id) || []);
const locationOptions = props.locationOptions
const titleRef = useRef<HTMLInputElement>(); const titleRef = useRef<HTMLInputElement>();
const slugRef = useRef<HTMLInputElement>(); const slugRef = useRef<HTMLInputElement>();
@ -81,12 +83,6 @@ export default function EventType(props) {
router.push('/availability'); router.push('/availability');
} }
// TODO: Tie into translations instead of abstracting to locations.ts
const locationOptions: OptionBase[] = [
{ value: LocationType.InPerson, label: 'In-person meeting' },
{ value: LocationType.Phone, label: 'Phone call', },
];
const openLocationModal = (type: LocationType) => { const openLocationModal = (type: LocationType) => {
setSelectedLocation(locationOptions.find( (option) => option.value === type)); setSelectedLocation(locationOptions.find( (option) => option.value === type));
setShowLocationModal(true); setShowLocationModal(true);
@ -100,8 +96,15 @@ export default function EventType(props) {
const closeAddCustomModal = () => { const closeAddCustomModal = () => {
setSelectedInputOption(inputOptions[0]); setSelectedInputOption(inputOptions[0]);
setShowAddCustomModal(false); setShowAddCustomModal(false);
setSelectedCustomInput(undefined);
}; };
const openEditCustomModel = (customInput: EventTypeCustomInput) => {
setSelectedCustomInput(customInput);
setSelectedInputOption(inputOptions.find(e => e.value === customInput.type));
setShowAddCustomModal(true);
}
const LocationOptions = () => { const LocationOptions = () => {
if (!selectedLocation) { if (!selectedLocation) {
return null; return null;
@ -124,6 +127,10 @@ export default function EventType(props) {
return ( return (
<p className="text-sm">Calendso will ask your invitee to enter a phone number before scheduling.</p> <p className="text-sm">Calendso will ask your invitee to enter a phone number before scheduling.</p>
) )
case LocationType.GoogleMeet:
return (
<p className="text-sm">Calendso will provide a Google Meet location.</p>
)
} }
return null; return null;
}; };
@ -161,12 +168,30 @@ export default function EventType(props) {
type: e.target.type.value type: e.target.type.value
}; };
setCustomInputs(customInputs.concat(customInput)); if (!!e.target.id?.value) {
const index = customInputs.findIndex(inp => inp.id === +e.target.id?.value);
console.log(customInput) if (index >= 0) {
setShowAddCustomModal(false); const input = customInputs[index];
input.label = customInput.label;
input.required = customInput.required;
input.type = customInput.type;
setCustomInputs(customInputs);
}
} else{
setCustomInputs(customInputs.concat(customInput));
}
closeAddCustomModal();
}; };
const removeCustom = (customInput, e) => {
e.preventDefault();
const index = customInputs.findIndex(inp => inp.id === customInput.id);
if (index >= 0){
customInputs.splice(index, 1);
setCustomInputs([...customInputs]);
}
}
return ( return (
<div> <div>
<Head> <Head>
@ -234,6 +259,12 @@ export default function EventType(props) {
<span className="ml-2 text-sm">Phone call</span> <span className="ml-2 text-sm">Phone call</span>
</div> </div>
)} )}
{location.type === LocationType.GoogleMeet && (
<div className="flex-grow flex">
<svg className="h-6 w-6" stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title></title><path d="M12 0C6.28 0 1.636 4.641 1.636 10.364c0 5.421 4.945 9.817 10.364 9.817V24c6.295-3.194 10.364-8.333 10.364-13.636C22.364 4.64 17.72 0 12 0zM7.5 6.272h6.817a1.363 1.363 0 0 1 1.365 1.365v1.704l2.728-2.727v7.501l-2.726-2.726v1.703a1.362 1.362 0 0 1-1.365 1.365H7.5c-.35 0-.698-.133-.965-.4a1.358 1.358 0 0 1-.4-.965V7.637A1.362 1.362 0 0 1 7.5 6.272Z"></path></svg>
<span className="ml-2 text-sm">Google Meet</span>
</div>
)}
<div className="flex"> <div className="flex">
<button type="button" onClick={() => openLocationModal(location.type)} className="mr-2 text-sm text-blue-600">Edit</button> <button type="button" onClick={() => openLocationModal(location.type)} className="mr-2 text-sm text-blue-600">Edit</button>
<button onClick={() => removeLocation(location)}> <button onClick={() => removeLocation(location)}>
@ -276,7 +307,7 @@ export default function EventType(props) {
<label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">Additional Inputs</label> <label htmlFor="additionalFields" className="block text-sm font-medium text-gray-700">Additional Inputs</label>
<ul className="w-96 mt-1"> <ul className="w-96 mt-1">
{customInputs.map( (customInput) => ( {customInputs.map( (customInput) => (
<li key={customInput.type} className="bg-blue-50 mb-2 p-2 border"> <li key={customInput.label} className="bg-blue-50 mb-2 p-2 border">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<div> <div>
@ -291,11 +322,9 @@ export default function EventType(props) {
</div> </div>
</div> </div>
<div className="flex"> <div className="flex">
<button type="button" onClick={() => { <button type="button" onClick={() => openEditCustomModel(customInput)} className="mr-2 text-sm text-blue-600">Edit
}} className="mr-2 text-sm text-blue-600">Edit
</button> </button>
<button onClick={() => { <button onClick={(e) => removeCustom(customInput, e)}>
}}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 "/> <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 "/>
</button> </button>
</div> </div>
@ -432,16 +461,20 @@ export default function EventType(props) {
<div className="mb-2"> <div className="mb-2">
<label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label> <label htmlFor="label" className="block text-sm font-medium text-gray-700">Label</label>
<div className="mt-1"> <div className="mt-1">
<input type="text" name="label" id="label" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" /> <input type="text" name="label" id="label" required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
defaultValue={selectedCustomInput?.label}/>
</div> </div>
</div> </div>
<div className="flex items-center h-5"> <div className="flex items-center h-5">
<input id="required" name="required" type="checkbox" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" defaultChecked={true}/> <input id="required" name="required" type="checkbox" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" defaultChecked={selectedCustomInput?.required ?? true}/>
<label htmlFor="required" className="block text-sm font-medium text-gray-700"> <label htmlFor="required" className="block text-sm font-medium text-gray-700">
Is required Is required
</label> </label>
</div> </div>
<input type="hidden" name="id" id="id" value={selectedCustomInput?.id}/>
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Save Save
@ -460,6 +493,17 @@ export default function EventType(props) {
); );
} }
const validJson = (jsonString: string) => {
try {
const o = JSON.parse(jsonString);
if (o && typeof o === "object") {
return o;
}
}
catch (e) {}
return false;
}
export async function getServerSideProps(context) { export async function getServerSideProps(context) {
const session = await getSession(context); const session = await getSession(context);
if (!session) { if (!session) {
@ -474,6 +518,49 @@ export async function getServerSideProps(context) {
} }
}); });
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)),
enabled: credentials.find( (integration) => integration.type === "google_calendar" ) != null,
type: "google_calendar",
title: "Google Calendar",
imageSrc: "integrations/google-calendar.png",
description: "For personal and business accounts",
}, {
installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET),
type: "office365_calendar",
enabled: credentials.find( (integration) => integration.type === "office365_calendar" ) != null,
title: "Office 365 / Outlook.com Calendar",
imageSrc: "integrations/office-365.png",
description: "For personal and business accounts",
} ];
let locationOptions: OptionBase[] = [
{ value: LocationType.InPerson, label: 'In-person meeting' },
{ value: LocationType.Phone, label: 'Phone call', },
];
const hasGoogleCalendarIntegration = integrations.find((i) => i.type === "google_calendar" && i.installed === true && i.enabled)
if (hasGoogleCalendarIntegration) {
locationOptions.push( { value: LocationType.GoogleMeet, label: 'Google Meet' })
}
const hasOfficeIntegration = integrations.find((i) => i.type === "office365_calendar" && i.installed === true && i.enabled)
if (hasOfficeIntegration) {
// TODO: Add default meeting option of the office integration.
// Assuming it's Microsoft Teams.
}
const eventType = await prisma.eventType.findUnique({ const eventType = await prisma.eventType.findUnique({
where: { where: {
id: parseInt(context.query.type), id: parseInt(context.query.type),
@ -494,7 +581,8 @@ export async function getServerSideProps(context) {
return { return {
props: { props: {
user, user,
eventType eventType,
locationOptions
}, },
} }
} }

121
pages/bookings/index.tsx Normal file
View file

@ -0,0 +1,121 @@
import Head from "next/head";
import prisma from "../../lib/prisma";
import { getSession, useSession } from "next-auth/client";
import Shell from "../../components/Shell";
export default function Bookings({ bookings }) {
const [session, loading] = useSession();
if (loading) {
return <p className="text-gray-400">Loading...</p>;
}
return (
<div>
<Head>
<title>Bookings | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Shell heading="Bookings">
<div className="flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Title
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Description
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{bookings.map((booking) => (
<tr key={booking.uid}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{booking.title}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.description}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.attendees[0].name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.attendees[0].email}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a
href={window.location.href + "/../reschedule/" + booking.uid}
className="text-blue-600 hover:text-blue-900">
Reschedule
</a>
<a
href={window.location.href + "/../cancel/" + booking.uid}
className="ml-4 text-blue-600 hover:text-blue-900">
Cancel
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</Shell>
</div>
);
}
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 bookings = await prisma.booking.findMany({
where: {
userId: user.id,
},
select: {
uid: true,
title: true,
description: true,
attendees: true,
},
});
return { props: { bookings } };
}

46
pages/cancel/[uid].tsx
View file

@ -134,38 +134,6 @@ export default function Type(props) {
} }
export async function getServerSideProps(context) { export async function getServerSideProps(context) {
const user = await prisma.user.findFirst({
where: {
username: context.query.user,
},
select: {
id: true,
username: true,
name: true,
}
});
if (!user) {
return {
notFound: true,
}
}
const eventType = await prisma.eventType.findFirst({
where: {
userId: user.id,
slug: {
equals: context.query.type,
},
},
select: {
id: true,
title: true,
description: true,
length: true
}
});
const booking = await prisma.booking.findFirst({ const booking = await prisma.booking.findFirst({
where: { where: {
uid: context.query.uid, uid: context.query.uid,
@ -176,7 +144,15 @@ export async function getServerSideProps(context) {
description: true, description: true,
startTime: true, startTime: true,
endTime: true, endTime: true,
attendees: true attendees: true,
eventType: true,
user: {
select: {
id: true,
username: true,
name: true,
}
}
} }
}); });
@ -188,8 +164,8 @@ export async function getServerSideProps(context) {
return { return {
props: { props: {
user, user: booking.user,
eventType, eventType: booking.eventType,
booking: bookingObj booking: bookingObj
}, },
} }

10
pages/index.tsx
View file

@ -124,6 +124,11 @@ export default function Home(props) {
</div> </div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 &&
<div className="text-center text-gray-400 py-12">
<p>You haven't created any event types.</p>
</div>
}
</ul> </ul>
</div> </div>
<div className="mt-8 bg-white shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0"> <div className="mt-8 bg-white shadow overflow-hidden rounded-md p-6 mb-8 md:mb-0">
@ -254,6 +259,11 @@ export default function Home(props) {
</div> </div>
</li> </li>
))} ))}
{props.eventTypes.length == 0 &&
<div className="text-center text-gray-400 py-2">
<p>You haven't created any event types.</p>
</div>
}
</ul> </ul>
</div> </div>
</div> </div>

398
pages/settings/profile.tsx
View file

@ -1,140 +1,173 @@
import Head from 'next/head'; import { GetServerSideProps } from "next";
import Link from 'next/link'; import Head from "next/head";
import { useRef, useState } from 'react'; import { useRef, useState } from "react";
import { useRouter } from 'next/router'; import prisma from "../../lib/prisma";
import prisma from '../../lib/prisma'; import Modal from "../../components/Modal";
import Modal from '../../components/Modal'; import Shell from "../../components/Shell";
import Shell from '../../components/Shell'; import SettingsShell from "../../components/Settings";
import SettingsShell from '../../components/Settings'; import Avatar from "../../components/Avatar";
import Avatar from '../../components/Avatar'; import { getSession } from "next-auth/client";
import { signIn, useSession, getSession } from 'next-auth/client'; import TimezoneSelect from "react-timezone-select";
import TimezoneSelect from 'react-timezone-select'; import { UsernameInput } from "../../components/ui/UsernameInput";
import {UsernameInput} from "../../components/ui/UsernameInput";
import ErrorAlert from "../../components/ui/alerts/Error"; import ErrorAlert from "../../components/ui/alerts/Error";
export default function Settings(props) { export default function Settings(props) {
const [ session, loading ] = useSession(); const [successModalOpen, setSuccessModalOpen] = useState(false);
const router = useRouter(); const usernameRef = useRef<HTMLInputElement>();
const [successModalOpen, setSuccessModalOpen] = useState(false); const nameRef = useRef<HTMLInputElement>();
const usernameRef = useRef<HTMLInputElement>(); const descriptionRef = useRef<HTMLTextAreaElement>();
const nameRef = useRef<HTMLInputElement>(); const avatarRef = useRef<HTMLInputElement>();
const descriptionRef = useRef<HTMLTextAreaElement>(); const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
const avatarRef = useRef<HTMLInputElement>(); const [selectedWeekStartDay, setSelectedWeekStartDay] = useState(props.user.weekStart || "Sunday");
const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone }); const [hasErrors, setHasErrors] = useState(false);
const [ selectedWeekStartDay, setSelectedWeekStartDay ] = useState(props.user.weekStart || 'Sunday'); const [errorMessage, setErrorMessage] = useState("");
const [ hasErrors, setHasErrors ] = useState(false); const closeSuccessModal = () => {
const [ errorMessage, setErrorMessage ] = useState(''); setSuccessModalOpen(false);
};
if (loading) { const handleError = async (resp) => {
return <p className="text-gray-400">Loading...</p>; if (!resp.ok) {
const error = await resp.json();
throw new Error(error.message);
} }
};
const closeSuccessModal = () => { setSuccessModalOpen(false); } async function updateProfileHandler(event) {
event.preventDefault();
const handleError = async (resp) => { const enteredUsername = usernameRef.current.value.toLowerCase();
if (!resp.ok) { const enteredName = nameRef.current.value;
const error = await resp.json(); const enteredDescription = descriptionRef.current.value;
throw new Error(error.message); const enteredAvatar = avatarRef.current.value;
} const enteredTimeZone = selectedTimeZone.value;
} const enteredWeekStartDay = selectedWeekStartDay;
async function updateProfileHandler(event) { // TODO: Add validation
event.preventDefault();
const enteredUsername = usernameRef.current.value; await fetch("/api/user/profile", {
const enteredName = nameRef.current.value; method: "PATCH",
const enteredDescription = descriptionRef.current.value; body: JSON.stringify({
const enteredAvatar = avatarRef.current.value; username: enteredUsername,
const enteredTimeZone = selectedTimeZone.value; name: enteredName,
const enteredWeekStartDay = selectedWeekStartDay; description: enteredDescription,
avatar: enteredAvatar,
timeZone: enteredTimeZone,
weekStart: enteredWeekStartDay,
}),
headers: {
"Content-Type": "application/json",
},
})
.then(handleError)
.then(() => {
setSuccessModalOpen(true);
setHasErrors(false); // dismiss any open errors
})
.catch((err) => {
setHasErrors(true);
setErrorMessage(err.message);
});
}
// TODO: Add validation return (
<Shell heading="Profile">
<Head>
<title>Profile | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<SettingsShell>
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateProfileHandler}>
{hasErrors && <ErrorAlert message={errorMessage} />}
<div className="py-6 px-4 sm:p-6 lg:pb-8">
<div>
<h2 className="text-lg leading-6 font-medium text-gray-900">Profile</h2>
<p className="mt-1 text-sm text-gray-500">Review and change your public page details.</p>
</div>
const response = await fetch('/api/user/profile', { <div className="mt-6 flex flex-col lg:flex-row">
method: 'PATCH', <div className="flex-grow space-y-6">
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone, weekStart: enteredWeekStartDay}), <div className="flex">
headers: { <div className="w-1/2 mr-2">
'Content-Type': 'application/json' <UsernameInput ref={usernameRef} defaultValue={props.user.username} />
} </div>
}).then(handleError).then( () => { <div className="w-1/2 ml-2">
setSuccessModalOpen(true); <label htmlFor="name" className="block text-sm font-medium text-gray-700">
setHasErrors(false); // dismiss any open errors Full name
}).catch( (err) => { </label>
setHasErrors(true); <input
setErrorMessage(err.message); ref={nameRef}
}); type="text"
} name="name"
id="name"
autoComplete="given-name"
placeholder="Your name"
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
defaultValue={props.user.name}
/>
</div>
</div>
return( <div>
<Shell heading="Profile"> <label htmlFor="about" className="block text-sm font-medium text-gray-700">
<Head> About
<title>Profile | Calendso</title> </label>
<link rel="icon" href="/favicon.ico" /> <div className="mt-1">
</Head> <textarea
<SettingsShell> ref={descriptionRef}
<form className="divide-y divide-gray-200 lg:col-span-9" onSubmit={updateProfileHandler}> id="about"
{hasErrors && <ErrorAlert message={errorMessage} />} name="about"
<div className="py-6 px-4 sm:p-6 lg:pb-8"> placeholder="A little something about yourself."
<div> rows={3}
<h2 className="text-lg leading-6 font-medium text-gray-900">Profile</h2> className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
<p className="mt-1 text-sm text-gray-500"> {props.user.bio}
Review and change your public page details. </textarea>
</p> </div>
</div> </div>
<div>
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
Timezone
</label>
<div className="mt-1">
<TimezoneSelect
id="timeZone"
value={selectedTimeZone}
onChange={setSelectedTimeZone}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
<div>
<label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
First Day of Week
</label>
<div className="mt-1">
<select
id="weekStart"
value={selectedWeekStartDay}
onChange={(e) => setSelectedWeekStartDay(e.target.value)}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
</select>
</div>
</div>
</div>
<div className="mt-6 flex flex-col lg:flex-row"> <div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0">
<div className="flex-grow space-y-6"> <p className="mb-2 text-sm font-medium text-gray-700" aria-hidden="true">
<div className="flex"> Photo
<div className="w-1/2 mr-2"> </p>
<UsernameInput ref={usernameRef} defaultValue={props.user.username} /> <div className="mt-1 lg:hidden">
</div> <div className="flex items-center">
<div className="w-1/2 ml-2"> <div
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Full name</label> className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
<input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} /> aria-hidden="true">
</div> <Avatar user={props.user} className="rounded-full h-full w-full" />
</div> </div>
{/* <div className="ml-5 rounded-md shadow-sm">
<div>
<label htmlFor="about" className="block text-sm font-medium text-gray-700">
About
</label>
<div className="mt-1">
<textarea ref={descriptionRef} id="about" name="about" placeholder="A little something about yourself." rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">{props.user.bio}</textarea>
</div>
</div>
<div>
<label htmlFor="timeZone" className="block text-sm font-medium text-gray-700">
Timezone
</label>
<div className="mt-1">
<TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={setSelectedTimeZone} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" />
</div>
</div>
<div>
<label htmlFor="weekStart" className="block text-sm font-medium text-gray-700">
First Day of Week
</label>
<div className="mt-1">
<select id="weekStart" value={selectedWeekStartDay} onChange={e => setSelectedWeekStartDay(e.target.value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
<option value="Sunday">Sunday</option>
<option value="Monday">Monday</option>
</select>
</div>
</div>
</div>
<div className="mt-6 flex-grow lg:mt-0 lg:ml-6 lg:flex-grow-0 lg:flex-shrink-0">
<p className="mb-2 text-sm font-medium text-gray-700" aria-hidden="true">
Photo
</p>
<div className="mt-1 lg:hidden">
<div className="flex items-center">
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true">
<Avatar user={props.user} className="rounded-full h-full w-full" />
</div>
{/* <div className="ml-5 rounded-md shadow-sm">
<div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500"> <div className="group relative border border-gray-300 rounded-md py-2 px-3 flex items-center justify-center hover:bg-gray-50 focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-blue-500">
<label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none"> <label htmlFor="user_photo" className="relative text-sm leading-4 font-medium text-gray-700 pointer-events-none">
<span>Change</span> <span>Change</span>
@ -143,64 +176,81 @@ export default function Settings(props) {
<input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" /> <input id="user_photo" name="user_photo" type="file" className="absolute w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
</div> </div>
</div> */} </div> */}
</div> </div>
</div> </div>
<div className="hidden relative rounded-full overflow-hidden lg:block"> <div className="hidden relative rounded-full overflow-hidden lg:block">
<Avatar <Avatar
user={props.user} user={props.user}
className="relative rounded-full w-40 h-40" className="relative rounded-full w-40 h-40"
fallback={<div className="relative bg-blue-600 rounded-full w-40 h-40"></div>} fallback={<div className="relative bg-blue-600 rounded-full w-40 h-40"></div>}
/> />
{/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100"> {/* <label htmlFor="user-photo" className="absolute inset-0 w-full h-full bg-black bg-opacity-75 flex items-center justify-center text-sm font-medium text-white opacity-0 hover:opacity-100 focus-within:opacity-100">
<span>Change</span> <span>Change</span>
<span className="sr-only"> user photo</span> <span className="sr-only"> user photo</span>
<input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" /> <input type="file" id="user-photo" name="user-photo" className="absolute inset-0 w-full h-full opacity-0 cursor-pointer border-gray-300 rounded-md" />
</label> */} </label> */}
</div> </div>
<div className="mt-4"> <div className="mt-4">
<label htmlFor="avatar" className="block text-sm font-medium text-gray-700">Avatar URL</label> <label htmlFor="avatar" className="block text-sm font-medium text-gray-700">
<input ref={avatarRef} type="text" name="avatar" id="avatar" placeholder="URL" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.avatar} /> Avatar URL
</div> </label>
</div> <input
</div> ref={avatarRef}
<hr className="mt-8" /> type="text"
<div className="py-4 flex justify-end"> name="avatar"
<button type="submit" className="ml-2 bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> id="avatar"
Save placeholder="URL"
</button> className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
</div> defaultValue={props.user.avatar}
</div> />
</form> </div>
<Modal heading="Profile updated successfully" description="Your user profile has been updated successfully." open={successModalOpen} handleClose={closeSuccessModal} /> </div>
</SettingsShell> </div>
</Shell> <hr className="mt-8" />
); <div className="py-4 flex justify-end">
<button
type="submit"
className="ml-2 bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Save
</button>
</div>
</div>
</form>
<Modal
heading="Profile updated successfully"
description="Your user profile has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</SettingsShell>
</Shell>
);
} }
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const session = await getSession(context); const session = await getSession(context);
if (!session) { if (!session) {
return { redirect: { permanent: false, destination: '/auth/login' } }; return { redirect: { permanent: false, destination: "/auth/login" } };
} }
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
email: session.user.email, email: session.user.email,
}, },
select: { select: {
id: true, id: true,
username: true, username: true,
name: true, name: true,
email: true, email: true,
bio: true, bio: true,
avatar: true, avatar: true,
timeZone: true, timeZone: true,
weekStart: true, weekStart: true,
} },
}); });
return { return {
props: {user}, // will be passed to the page component as props props: { user }, // will be passed to the page component as props
} };
} };

1043
yarn.lock
View file

File diff suppressed because it is too large Load diff