import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { getSafeRedirectUrl } from "@calcom/lib/getSafeRedirectUrl"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import slugify from "@calcom/lib/slugify"; import { telemetryEventTypes, useTelemetry } from "@calcom/lib/telemetry"; import { trpc } from "@calcom/trpc/react"; import { Avatar, Button, Form, ImageUploader, TextField } from "@calcom/ui"; import { FiArrowRight } from "@calcom/ui/components/icon"; import type { NewTeamFormValues } from "../lib/types"; const querySchema = z.object({ returnTo: z.string(), }); export const CreateANewTeamForm = () => { const { t } = useLocale(); const router = useRouter(); const telemetry = useTelemetry(); const returnToParsed = querySchema.safeParse(router.query); const returnToParam = (returnToParsed.success ? getSafeRedirectUrl(returnToParsed.data.returnTo) : "/settings/teams") || "/settings/teams"; const newTeamFormMethods = useForm(); const createTeamMutation = trpc.viewer.teams.create.useMutation({ onSuccess: (data) => { telemetry.event(telemetryEventTypes.team_created); 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}

)}
); };