import { useEffect, useState } from "react"; import { GetServerSideProps } from "next"; import Head from "next/head"; import Link from "next/link"; import prisma from "../../lib/prisma"; import { useRouter } from "next/router"; import dayjs, { Dayjs } from "dayjs"; import { ClockIcon, GlobeIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from "@heroicons/react/solid"; import isSameOrBefore from "dayjs/plugin/isSameOrBefore"; import utc from "dayjs/plugin/utc"; import timezone from "dayjs/plugin/timezone"; dayjs.extend(isSameOrBefore); dayjs.extend(utc); dayjs.extend(timezone); 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"; export default function Type(props): Type { // Get router variables const router = useRouter(); const { rescheduleUid } = router.query; // Initialise state const [selectedDate, setSelectedDate] = useState(); const [selectedMonth, setSelectedMonth] = useState(dayjs().month()); const [isTimeOptionsOpen, setIsTimeOptionsOpen] = useState(false); const [timeFormat, setTimeFormat] = useState("h:mma"); const telemetry = useTelemetry(); useEffect((): void => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())); }, [telemetry]); // Handle month changes const incrementMonth = () => { setSelectedMonth(selectedMonth + 1); }; const decrementMonth = () => { setSelectedMonth(selectedMonth - 1); }; // Set up calendar const daysInMonth = dayjs().month(selectedMonth).daysInMonth(); const days = []; for (let i = 1; i <= daysInMonth; i++) { days.push(i); } // Create placeholder elements for empty days in first week let weekdayOfFirst = dayjs().month(selectedMonth).date(1).day(); if (props.user.weekStart === "Monday") { weekdayOfFirst -= 1; if (weekdayOfFirst < 0) weekdayOfFirst = 6; } const emptyDays = Array(weekdayOfFirst) .fill(null) .map((day, i) => (

{null}

)); const changeDate = (day): void => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters())); setSelectedDate(dayjs().month(selectedMonth).date(day)); }; // Combine placeholder days with actual days const calendar = [ ...emptyDays, ...days.map((day) => ( )), ]; const handleSelectTimeZone = (selectedTimeZone: string): void => { if (selectedDate) { setSelectedDate(selectedDate.tz(selectedTimeZone)); } }; const handleToggle24hClock = (is24hClock: boolean): void => { if (selectedDate) { 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}

{dayjs().month(selectedMonth).format("MMMM YYYY")}

{props.user.weekStart !== "Monday" ? (

Sun

) : null}

Mon

Tue

Wed

Thu

Fri

Sat

{props.user.weekStart === "Monday" ? (

Sun

) : null} {calendar}

{selectedDate && ( )}

{/* note(peer): you can remove calendso branding here, but we'd also appreciate it, if you don't <3 */}

); } 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, }, }); 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, }, }); if (!eventType) { return { notFound: true, }; } return { props: { user, eventType, }, }; };