import { useRouter } from "next/router"; import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { z } from "zod"; import { extractDomainFromWebsiteUrl } from "@calcom/ee/organizations/lib/utils"; import { useOrgBrandingValues } from "@calcom/features/ee/organizations/hooks"; 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, Alert, Label } from "@calcom/ui"; import { ArrowRight, Plus } from "@calcom/ui/components/icon"; import type { NewTeamFormValues } from "../lib/types"; const querySchema = z.object({ returnTo: z.string().optional(), slug: z.string().optional(), }); export const CreateANewTeamForm = () => { const { t } = useLocale(); const router = useRouter(); const telemetry = useTelemetry(); const parsedQuery = querySchema.safeParse(router.query); const [serverErrorMessage, setServerErrorMessage] = useState(null); const orgBranding = useOrgBrandingValues(); const returnToParam = (parsedQuery.success ? getSafeRedirectUrl(parsedQuery.data.returnTo) : "/settings/teams") || "/settings/teams"; const newTeamFormMethods = useForm({ defaultValues: { slug: parsedQuery.success ? parsedQuery.data.slug : "", }, }); const createTeamMutation = trpc.viewer.teams.create.useMutation({ onSuccess: (data) => { telemetry.event(telemetryEventTypes.team_created); router.push(`/settings/teams/${data.id}/onboard-members`); }, onError: (err) => { if (err.message === "team_url_taken") { newTeamFormMethods.setError("slug", { type: "custom", message: t("url_taken") }); } else { setServerErrorMessage(err.message); } }, }); return ( <>
{ if (!createTeamMutation.isLoading) { setServerErrorMessage(null); createTeamMutation.mutate(v); } }}>
{serverErrorMessage && (
)} ( <> { newTeamFormMethods.setValue("name", e?.target.value); if (newTeamFormMethods.formState.touchedFields["slug"] === undefined) { newTeamFormMethods.setValue("slug", slugify(e?.target.value)); } }} autoComplete="off" /> )} />
( { newTeamFormMethods.setValue("slug", slugify(e?.target.value), { shouldTouch: true, }); newTeamFormMethods.clearErrors("slug"); }} /> )} />
( <>
} size="lg" />
{ newTeamFormMethods.setValue("logo", newAvatar); createTeamMutation.reset(); }} imageSrc={value} />
)} />
); };