Fixes for team event creation (#1604)

components/eventtype/CreateEventType.tsx

@@ -15,6 +15,7 @@ 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, {
@@ -49,13 +50,14 @@ export default function CreateEventTypeButton(props: Props) {
   const modalOpen = useToggleQuery("new");
 
   // URL encoded params
-  const teamId: number | undefined = Number(router.query.teamId) || undefined;
+  const teamId: number | undefined =
+    typeof router.query.teamId === "string" ? 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<z.infer<typeof createEventTypeInput>>({
     resolver: zodResolver(createEventTypeInput),
-    defaultValues: { length: 15, teamId },
+    defaultValues: { length: 15 },
   });
   const { setValue, watch, register } = form;
 
@@ -166,7 +168,14 @@ export default function CreateEventTypeButton(props: Props) {
             createMutation.mutate(values);
           }}>
           <div className="mt-3 space-y-4">
-            {teamId && <input type="hidden" {...register("teamId", { valueAsNumber: true })} />}
+            {teamId && (
+              <TextField
+                type="hidden"
+                labelProps={{ style: { display: "none" } }}
+                {...register("teamId", { valueAsNumber: true })}
+                value={teamId}
+              />
+            )}
             <TextField label={t("title")} placeholder={t("quick_chat")} {...register("title")} />
 
             <TextField
@@ -206,6 +215,13 @@ export default function CreateEventTypeButton(props: Props) {
                 <label htmlFor="schedulingType" className="block text-sm font-bold text-gray-700">
                   {t("scheduling_type")}
                 </label>
+                {form.formState.errors.schedulingType && (
+                  <Alert
+                    className="mt-1"
+                    severity="error"
+                    message={form.formState.errors.schedulingType.message}
+                  />
+                )}
                 <RadioArea.Group
                   {...register("schedulingType")}
                   onChange={(val) => form.setValue("schedulingType", val as SchedulingType)}