import { ChevronDownIcon, PlusIcon } from "@heroicons/react/solid"; import { zodResolver } from "@hookform/resolvers/zod/dist/zod"; import { SchedulingType } from "@prisma/client"; import { useRouter } from "next/router"; import { createEventTypeInput } from "prisma/zod/eventtypeCustom"; import React, { useEffect } from "react"; import { useForm } from "react-hook-form"; import type { z } from "zod"; import { HttpError } from "@lib/core/http/error"; import { useLocale } from "@lib/hooks/useLocale"; import { useToggleQuery } from "@lib/hooks/useToggleQuery"; import showToast from "@lib/notification"; import { trpc } from "@lib/trpc"; import { Dialog, DialogClose, DialogContent } from "@components/Dialog"; import { Form, InputLeading, TextAreaField, TextField } from "@components/form/fields"; 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"; // this describes the uniform data needed to create a new event type on Profile or Team interface EventTypeParent { teamId: number | null | undefined; // if undefined, then it's a profile name?: string | null; slug?: string | null; image?: string | null; } interface Props { // set true for use on the team settings page canAddEvents: boolean; // set true when in use on the team settings page isIndividualTeam?: boolean; // EventTypeParent can be a profile (as first option) or a team for the rest. options: EventTypeParent[]; } export default function CreateEventTypeButton(props: Props) { const { t } = useLocale(); const router = useRouter(); const modalOpen = useToggleQuery("new"); // URL encoded params const teamId: number | undefined = typeof router.query.teamId === "string" && router.query.teamId ? parseInt(router.query.teamId) : undefined; const pageSlug = router.query.eventPage || props.options[0].slug; const hasTeams = !!props.options.find((option) => option.teamId); const form = useForm>({ resolver: zodResolver(createEventTypeInput), defaultValues: { length: 15 }, }); const { setValue, watch, register } = form; useEffect(() => { const subscription = watch((value, { name, type }) => { if (name === "title" && type === "change") { if (value.title) setValue("slug", value.title.replace(/\s+/g, "-").toLowerCase()); else setValue("slug", ""); } }); return () => subscription.unsubscribe(); }, [watch, setValue]); const createMutation = trpc.useMutation("viewer.eventTypes.create", { onSuccess: async ({ eventType }) => { await router.push("/event-types/" + eventType.id); showToast(t("event_type_created_successfully", { eventTypeTitle: eventType.title }), "success"); }, onError: (err) => { if (err instanceof HttpError) { const message = `${err.statusCode}: ${err.message}`; showToast(message, "error"); } }, }); // inject selection data into url for correct router history const openModal = (option: EventTypeParent) => { // setTimeout fixes a bug where the url query params are removed immediately after opening the modal setTimeout(() => { router.push( { pathname: router.pathname, query: { ...router.query, new: "1", eventPage: option.slug, teamId: option.teamId || undefined, }, }, undefined, { shallow: true } ); }); }; // remove url params after close modal to reset state const closeModal = () => { router.replace({ pathname: router.pathname, query: { id: router.query.id || undefined }, }); }; return ( { if (!isOpen) closeModal(); }}> {!hasTeams || props.isIndividualTeam ? ( ) : ( {t("new_event_subtitle")} {props.options.map((option) => ( openModal(option)}> {option.name ? option.name : option.slug} ))} )}

{t("new_event_type_to_book_description")}

{ createMutation.mutate(values); }}>
{teamId && ( )} {process.env.NEXT_PUBLIC_APP_URL}/{pageSlug}/ } {...register("slug")} />
{t("minutes")}
{teamId && (
{form.formState.errors.schedulingType && ( )} form.setValue("schedulingType", val as SchedulingType)} className="relative flex mt-1 space-x-6 rounded-sm shadow-sm"> {t("collective")}

{t("collective_description")}

{t("round_robin")}

{t("round_robin_description")}

)}
); }