// TODO: replace headlessui with radix-ui import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid"; import { Prisma, SchedulingType } from "@prisma/client"; import { GetServerSidePropsContext } from "next"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; import Head from "next/head"; import { useRouter } from "next/router"; import React, { Fragment, useRef } from "react"; import { useMutation } from "react-query"; import { asStringOrNull } from "@lib/asStringOrNull"; import { getSession } from "@lib/auth"; import { HttpError } from "@lib/core/http/error"; import { getOrSetUserLocaleFromHeaders } from "@lib/core/i18n/i18n.utils"; import { ONBOARDING_NEXT_REDIRECT, shouldShowOnboarding } from "@lib/getting-started"; import { useLocale } from "@lib/hooks/useLocale"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import createEventType from "@lib/mutations/event-types/create-event-type"; import showToast from "@lib/notification"; import prisma from "@lib/prisma"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { Dialog, DialogClose, DialogContent } from "@components/Dialog"; import Shell from "@components/Shell"; import EventTypeList from "@components/eventtype/EventTypeList"; import EventTypeListHeading from "@components/eventtype/EventTypeListHeading"; import { Alert } from "@components/ui/Alert"; import Avatar from "@components/ui/Avatar"; import { Button } from "@components/ui/Button"; import Dropdown, { DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@components/ui/Dropdown"; import * as RadioArea from "@components/ui/form/radio-area"; import UserCalendarIllustration from "@components/ui/svg/UserCalendarIllustration"; type PageProps = inferSSRProps; type Profile = PageProps["profiles"][number]; const EventTypesPage = (props: PageProps) => { const { t } = useLocale(); const CreateFirstEventTypeView = () => (

{t("new_event_type_heading")}

{t("new_event_type_description")}

); return (
{t("event_types_page_title")}| Cal.com ) }> {props.user.plan === "FREE" && !props.canAddEvents && ( {t("plan_upgrade")}} message={ <> {t("to_upgrade_go_to")}{" "} {"https://cal.com/upgrade"} } className="my-4" /> )} {props.eventTypes && props.eventTypes.map((input) => ( {/* hide list heading when there is only one (current user) */} {(props.eventTypes.length !== 1 || input.teamId) && ( )} ))} {props.eventTypes.length === 0 && }
); }; const CreateNewEventDialog = ({ profiles, canAddEvents }: { profiles: Profile[]; canAddEvents: boolean }) => { const router = useRouter(); const teamId: number | null = Number(router.query.teamId) || null; const modalOpen = useToggleQuery("new"); const { t } = useLocale(); const createMutation = useMutation(createEventType, { onSuccess: async ({ eventType }) => { await router.push("/event-types/" + eventType.id); showToast(`${eventType.title} event type created successfully`, "success"); }, onError: (err: HttpError) => { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); }, }); const slugRef = useRef(null); return ( { router.push(isOpen ? modalOpen.hrefOn : modalOpen.hrefOff); }}> {!profiles.filter((profile) => profile.teamId).length && ( )} {profiles.filter((profile) => profile.teamId).length > 0 && ( {t("new_event_subtitle")} {profiles.map((profile) => ( router.push({ pathname: router.pathname, query: { ...router.query, new: "1", eventPage: profile.slug, ...(profile.teamId ? { teamId: profile.teamId, } : {}), }, }) }> {profile.name ? profile.name : profile.slug} ))} )}

{t("new_event_type_to_book_description")}

{ e.preventDefault(); const target = e.target as unknown as Record< "title" | "slug" | "description" | "length" | "schedulingType", { value: string } >; const payload = { title: target.title.value, slug: target.slug.value, description: target.description.value, length: parseInt(target.length.value), }; if (router.query.teamId) { payload.teamId = parseInt(asStringOrNull(router.query.teamId), 10); payload.schedulingType = target.schedulingType.value; } createMutation.mutate(payload); }}>
{ if (!slugRef.current) { return; } slugRef.current.value = e.target.value.replace(/\s+/g, "-").toLowerCase(); }} type="text" name="title" id="title" required className="block w-full border-gray-300 rounded-sm shadow-sm focus:ring-neutral-900 focus:border-neutral-900 sm:text-sm" placeholder={t("quick_chat")} />
{process.env.NEXT_PUBLIC_APP_URL}/{router.query.eventPage || profiles[0].slug}/