import { useEffect, useState } from "react"; import { GetServerSideProps, GetServerSidePropsContext } from "next"; import Head from "next/head"; import { ChevronDownIcon, ClockIcon, GlobeIcon } from "@heroicons/react/solid"; import { useRouter } from "next/router"; import dayjs, { 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(() => { return props.date && dayjs(props.date).isValid() ? dayjs(props.date) : null; }); 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); }; useEffect(() => { if (!selectedDate) { return; } const formattedDate = selectedDate.utc().format("YYYY-MM-DD"); router.replace( { query: { date: formattedDate, }, }, undefined, { shallow: true, } ); }, [selectedDate]); 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: GetServerSidePropsContext) => { const dateQuery = context.query?.date ?? null; const date = Array.isArray(dateQuery) && dateQuery.length > 0 ? dateQuery.pop() : dateQuery; const user = await whereAndSelect( prisma.user.findFirst, { username: context.query.user.toLowerCase(), }, [ "id", "username", "name", "email", "bio", "avatar", "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", "periodType", "periodDays", "periodStartDate", "periodEndDate", "periodCountCalendarDays", ] ); 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); const eventTypeObject = Object.assign({}, eventType, { periodStartDate: eventType.periodStartDate?.toString() ?? null, periodEndDate: eventType.periodEndDate?.toString() ?? null, }); return { props: { user, date, eventType: eventTypeObject, workingHours, }, }; };