import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import slugify from "@calcom/lib/slugify"; import { trpc } from "@calcom/trpc/react"; import { Avatar, Button, Form, Icon, ImageUploader, TextField } from "@calcom/ui"; import { NewTeamFormValues } from "../lib/types"; const querySchema = z.object({ returnTo: z.string(), }); export const CreateANewTeamForm = () => { const { t } = useLocale(); const router = useRouter(); const returnToParsed = querySchema.safeParse(router.query); const returnToParam = returnToParsed.success ? returnToParsed.data.returnTo : "/settings/teams"; const newTeamFormMethods = useForm(); const createTeamMutation = trpc.viewer.teams.create.useMutation({ onSuccess: (data) => { router.push(`/settings/teams/${data.id}/onboard-members`); }, }); const validateTeamSlugQuery = trpc.viewer.teams.validateTeamSlug.useQuery( { slug: newTeamFormMethods.watch("slug") }, { enabled: false, refetchOnWindowFocus: false, } ); const validateTeamSlug = async () => { await validateTeamSlugQuery.refetch(); if (validateTeamSlugQuery.isFetched) return validateTeamSlugQuery.data || t("team_url_taken"); }; return ( <>
{ if (!createTeamMutation.isLoading) createTeamMutation.mutate(v); }}>
( <> { newTeamFormMethods.setValue("name", e?.target.value); if (newTeamFormMethods.formState.touchedFields["slug"] === undefined) { newTeamFormMethods.setValue("slug", slugify(e?.target.value)); } }} autoComplete="off" /> )} />
await validateTeamSlug() }} render={({ field: { value } }) => ( { newTeamFormMethods.setValue("slug", slugify(e?.target.value), { shouldTouch: true, }); }} /> )} />
(
{ newTeamFormMethods.setValue("logo", newAvatar); }} imageSrc={value} />
)} />
{createTeamMutation.isError && (

{createTeamMutation.error.message}

)}
); };