import Head from 'next/head'; import Link from 'next/link'; import { useRouter } from 'next/router'; import { ClockIcon, CalendarIcon, LocationMarkerIcon } from '@heroicons/react/solid'; import prisma from '../../lib/prisma'; import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry"; import { useEffect, useState } from "react"; import dayjs from 'dayjs'; import 'react-phone-number-input/style.css'; import PhoneInput from 'react-phone-number-input'; import { LocationType } from '../../lib/location'; export default function Book(props) { const router = useRouter(); const { date, user } = router.query; const [ selectedLocation, setSelectedLocation ] = useState(props.eventType.locations.length === 1 ? props.eventType.locations[0].type : ''); const telemetry = useTelemetry(); useEffect(() => { telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters())); }); const locationInfo = (type: LocationType) => props.eventType.locations.find( (location) => location.type === type ); // TODO: Move to translations const locationLabels = { [LocationType.InPerson]: 'In-person meeting', [LocationType.Phone]: 'Phone call', }; const bookingHandler = event => { event.preventDefault(); const locationText = selectedLocation === LocationType.Phone ? event.target.phone.value : locationInfo(selectedLocation).address; telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())); const res = fetch( '/api/book/' + user, { 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, location: locationText, 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}&location=${encodeURIComponent(locationText)}`); } return (
Confirm your {props.eventType.title} with {props.user.name || props.user.username} | Calendso
{props.user.avatar && Avatar}

{props.user.name}

{props.eventType.title}

{props.eventType.length} minutes

{selectedLocation === LocationType.InPerson &&

{locationInfo(selectedLocation).address}

}

{dayjs(date).format("hh:mma, dddd DD MMMM YYYY")}

{props.eventType.description}

{props.eventType.locations.length > 1 && (
Location {props.eventType.locations.map( (location) => ( ))}
)} {selectedLocation === LocationType.Phone && (
{}} />
)}
Cancel
) } 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, slug: true, description: true, length: true, locations: true, } }); return { props: { user, eventType }, } }