import Head from 'next/head'; import Link from 'next/link'; import {useRouter} from 'next/router'; import {CalendarIcon, ClockIcon, 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 utc from 'dayjs/plugin/utc'; import timezone from 'dayjs/plugin/timezone'; import 'react-phone-number-input/style.css'; import PhoneInput from 'react-phone-number-input'; import {LocationType} from '../../lib/location'; import Avatar from '../../components/Avatar'; import Button from '../../components/ui/Button'; dayjs.extend(utc); dayjs.extend(timezone); export default function Book(props) { const router = useRouter(); const { date, user, rescheduleUid } = router.query; const [ is24h, setIs24h ] = useState(false); const [ preferredTimeZone, setPreferredTimeZone ] = useState(''); const locations = props.eventType.locations || []; const [ selectedLocation, setSelectedLocation ] = useState(locations.length === 1 ? locations[0].type : ''); const telemetry = useTelemetry(); useEffect(() => { setPreferredTimeZone(localStorage.getItem('timeOption.preferredTimeZone') || dayjs.tz.guess()); setIs24h(!!localStorage.getItem('timeOption.is24hClock')); telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters())); }); const locationInfo = (type: LocationType) => 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(); let payload = { 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, timeZone: preferredTimeZone, eventName: props.eventType.title, rescheduleUid: rescheduleUid }; if (selectedLocation) { payload['location'] = 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(payload), headers: { 'Content-Type': 'application/json' }, method: 'POST' } ); let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}`; if (payload['location']) { successUrl += "&location=" + encodeURIComponent(payload['location']); } router.push(successUrl); } return (
{rescheduleUid ? 'Reschedule' : 'Confirm'} your {props.eventType.title} with {props.user.name || props.user.username} | Calendso

{props.user.name}

{props.eventType.title}

{props.eventType.length} minutes

{selectedLocation === LocationType.InPerson &&

{locationInfo(selectedLocation).address}

}

{preferredTimeZone && dayjs(date).tz(preferredTimeZone).format( (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}

{props.eventType.description}

{locations.length > 1 && (
Location {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, email: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, } }); let booking = null; if(context.query.rescheduleUid) { booking = await prisma.booking.findFirst({ where: { uid: context.query.rescheduleUid }, select: { description: true, attendees: { select: { email: true, name: true } } } }); } return { props: { user, eventType, booking }, } }