125 lines
6.0 KiB
TypeScript
125 lines
6.0 KiB
TypeScript
import Head from 'next/head'
|
|
import Link from 'next/link'
|
|
import { useRouter } from 'next/router'
|
|
import prisma from '../../lib/prisma'
|
|
const dayjs = require('dayjs')
|
|
|
|
export default function Book(props) {
|
|
const router = useRouter()
|
|
const { date } = router.query
|
|
|
|
const bookingHandler = event => {
|
|
event.preventDefault()
|
|
const res = fetch(
|
|
'http://localhost:3000/api/book/bailey',
|
|
{
|
|
body: JSON.stringify({
|
|
start: dayjs(date).format(),
|
|
end: dayjs(date).add(props.eventType.length, 'minute').format(),
|
|
name: event.target.name.value,
|
|
email: event.target.email.value,
|
|
notes: event.target.notes.value
|
|
}),
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
method: 'POST'
|
|
}
|
|
)
|
|
router.push("/success?date=" + date + "&type=" + props.eventType.id + "&user=" + props.user.username)
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Head>
|
|
<title>Confirm your {props.eventType.title} with {props.user.name} | Calendso</title>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
|
|
<main className="max-w-3xl mx-auto my-24">
|
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
|
<div className="sm:flex px-4 py-5 sm:p-6">
|
|
<div className="sm:w-1/2 sm:border-r">
|
|
<img src={props.user.avatar} alt="Avatar" 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-2">
|
|
<svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
|
|
</svg>
|
|
{props.eventType.length} minutes
|
|
</p>
|
|
<p className="text-blue-600 mb-4">
|
|
<svg className="inline-block w-4 h-4 mr-1 -mt-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd" />
|
|
</svg>
|
|
{dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}
|
|
</p>
|
|
<p className="text-gray-600">{props.eventType.description}</p>
|
|
</div>
|
|
<div className="sm:w-1/2 pl-8 pr-4">
|
|
<form onSubmit={bookingHandler}>
|
|
<div className="mb-4">
|
|
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label>
|
|
<div className="mt-1">
|
|
<input type="text" name="name" id="name" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email address</label>
|
|
<div className="mt-1">
|
|
<input type="text" name="email" id="email" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" />
|
|
</div>
|
|
</div>
|
|
<div className="mb-4">
|
|
<label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label>
|
|
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting."></textarea>
|
|
</div>
|
|
<div>
|
|
<button type="submit" className="btn btn-primary">Confirm</button>
|
|
<Link href={"/" + props.user.username + "/" + props.eventType.id}>
|
|
<a className="ml-2 btn btn-white">Cancel</a>
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export async function getServerSideProps(context) {
|
|
const user = await prisma.user.findFirst({
|
|
where: {
|
|
username: context.query.user,
|
|
},
|
|
select: {
|
|
username: true,
|
|
name: true,
|
|
bio: true,
|
|
avatar: true,
|
|
eventTypes: true
|
|
}
|
|
});
|
|
|
|
const eventType = await prisma.eventType.findUnique({
|
|
where: {
|
|
id: parseInt(context.query.type),
|
|
},
|
|
select: {
|
|
id: true,
|
|
title: true,
|
|
description: true,
|
|
length: true
|
|
}
|
|
});
|
|
|
|
return {
|
|
props: {
|
|
user,
|
|
eventType
|
|
},
|
|
}
|
|
} |