import { useEffect, useState } from "react"; import { GetServerSideProps } from "next"; import Head from "next/head"; import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import { Dayjs } from "dayjs"; import prisma, { whereAndSelect } from "@lib/prisma"; 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 Theme from "@components/Theme"; export default function Type(props): Type { // Get router variables const router = useRouter(); const { rescheduleUid } = router.query; const { isReady } = Theme(props.user.theme); const [selectedDate, setSelectedDate] = useState(); const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); const [timeFormat, setTimeFormat] = useState("h:mma"); const telemetry = useTelemetry(); useEffect(() => { handleToggle24hClock(localStorage.getItem("timeOption.is24hClock") === "true"); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())); }, [telemetry]); const changeDate = (date: Dayjs) => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters())); setSelectedDate(date); }; const handleSelectTimeZone = (selectedTimeZone: string): void => { if (selectedDate) { setSelectedDate(selectedDate.tz(selectedTimeZone)); } setIsTimeOptionsOpen(false); }; const handleToggle24hClock = (is24hClock: boolean) => { setTimeFormat(is24hClock ? "HH:mm" : "h:mma"); }; return ( isReady && (
{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 && ( )}
{!props.user.hideBranding && }
) ); } export const getServerSideProps: GetServerSideProps = async (context) => { const user = await whereAndSelect( prisma.user.findFirst, { username: context.query.user.toLowerCase(), }, [ "id", "username", "name", "email", "bio", "avatar", "eventTypes", "startTime", "endTime", "timeZone", "weekStart", "availability", "hideBranding", "theme", ] ); if (!user) { return { notFound: true, }; } const eventType = await whereAndSelect( prisma.eventType.findFirst, { userId: user.id, slug: context.query.type, }, ["id", "title", "description", "length", "availability", "timeZone"] ); if (!eventType) { return { notFound: true, }; } const getWorkingHours = (providesAvailability) => providesAvailability.availability && providesAvailability.availability.length ? providesAvailability.availability : null; const workingHours: [] = getWorkingHours(eventType) || getWorkingHours(user) || [ { days: [0, 1, 2, 3, 4, 5, 6], startTime: user.startTime, endTime: user.endTime, }, ].filter((availability): boolean => typeof availability["days"] !== "undefined"); workingHours.sort((a, b) => a.startTime - b.startTime); return { props: { user, eventType, workingHours, }, }; };