import {useEffect, useMemo, useState} from 'react'; 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) { // 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('hh:mm'); const telemetry = useTelemetry(); useEffect(() => { telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.pageView, collectPageParameters())) }, []); // Handle month changes const incrementMonth = () => { setSelectedMonth(selectedMonth + 1); } const decrementMonth = () => { setSelectedMonth(selectedMonth - 1); } // Set up calendar var daysInMonth = dayjs().month(selectedMonth).daysInMonth(); var 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) => { 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) => { if (selectedDate) { setSelectedDate(selectedDate.tz(selectedTimeZone)) } }; const handleToggle24hClock = (is24hClock: boolean) => { 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.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 async function getServerSideProps(context) { const user = await prisma.user.findFirst({ where: { username: context.query.user, }, 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, }, } }