import { useEffect, useState, useMemo } from "react"; import { GetServerSideProps } from "next"; import Head from "next/head"; import { ClockIcon, GlobeIcon, ChevronDownIcon } from "@heroicons/react/solid"; import prisma from "../../lib/prisma"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry"; import AvailableTimes from "../../components/booking/AvailableTimes"; import TimeOptions from "../../components/booking/TimeOptions"; import Avatar from "../../components/Avatar"; import { timeZone } from "../../lib/clock"; import DatePicker from "../../components/booking/DatePicker"; import PoweredByCalendso from "../../components/ui/PoweredByCalendso"; import getSlots from "@lib/slots"; export default function Type(props): Type { // Get router variables const router = useRouter(); const { rescheduleUid } = router.query; const [selectedDate, setSelectedDate] = useState(); const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); const [timeFormat, setTimeFormat] = useState("h:mma"); const telemetry = useTelemetry(); const today: string = dayjs().utc().format("YYYY-MM-DDTHH:mm"); const noSlotsToday = useMemo( () => getSlots({ frequency: props.eventType.length, inviteeDate: dayjs.utc(today) as Dayjs, workingHours: props.workingHours, organizerTimeZone: props.eventType.timeZone, minimumBookingNotice: 0, }).length === 0, [today, props.eventType.length, props.workingHours] ); useEffect(() => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())); }, [telemetry]); const changeDate = (date: Dayjs) => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters())); setSelectedDate(date.tz(timeZone())); }; const handleSelectTimeZone = (selectedTimeZone: string): void => { if (selectedDate) { setSelectedDate(selectedDate.tz(selectedTimeZone)); } }; const handleToggle24hClock = (is24hClock: boolean) => { setTimeFormat(is24hClock ? "HH:mm" : "h:mma"); }; return (
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} | Calendso " + props.eventType.description ).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar) } /> " + props.eventType.description ).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar) } />

{props.user.name}

{props.eventType.title}

{props.eventType.length} minutes

{isTimeOptionsOpen && ( )}

{props.eventType.description}

{selectedDate && ( )}
{/* note(peer): you can remove calendso branding here, but we'd also appreciate it, if you don't <3 */}
); } interface WorkingHours { days: number[]; startTime: number; length: number; } type Availability = WorkingHours; export const getServerSideProps: GetServerSideProps = async (context) => { const user = await prisma.user.findFirst({ where: { username: context.query.user.toLowerCase(), }, select: { id: true, username: true, name: true, email: true, bio: true, avatar: true, eventTypes: true, startTime: true, timeZone: true, endTime: true, weekStart: true, availability: 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, availability: true, timeZone: true, }, }); if (!eventType) { return { notFound: true, }; } const getWorkingHours = (providesAvailability) => providesAvailability.availability && providesAvailability.availability.length ? providesAvailability.availability : null; const workingHours: WorkingHours[] = getWorkingHours(eventType) || getWorkingHours(user) || [ { days: [0, 1, 2, 3, 4, 5, 6], startTime: user.startTime, length: user.endTime, }, ].filter((availability: Availability): boolean => typeof availability["days"] !== "undefined"); return { props: { user, eventType, workingHours, }, }; };