import { useRouter } from "next/navigation"; import { useState } from "react"; import { useFieldArray, useForm } from "react-hook-form"; import { z } from "zod"; import { classNames } from "@calcom/lib"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { useRouterQuery } from "@calcom/lib/hooks/useRouterQuery"; import { trpc } from "@calcom/trpc/react"; import { Button, showToast, TextField } from "@calcom/ui"; import { ArrowRight, Plus, X } from "@calcom/ui/components/icon"; const querySchema = z.object({ id: z.string().transform((val) => parseInt(val)), }); const schema = z.object({ teams: z .array( z.object({ name: z.string().min(2, "org_team_name_min_2_chars").trim(), }) ) .min(1, "At least one team is required"), }); export const AddNewTeamsForm = () => { const { t } = useLocale(); const router = useRouter(); const routerQuery = useRouterQuery(); const { id: orgId } = querySchema.parse(routerQuery); const [counter, setCounter] = useState(1); const { register, control, handleSubmit, formState, trigger, setValue, getValues } = useForm({ defaultValues: { teams: [{ name: "" }] }, // Set initial values resolver: async (data) => { try { const validatedData = await schema.parseAsync(data); return { values: validatedData, errors: {} }; } catch (error) { if (error instanceof z.ZodError) { return { values: { teams: [], }, errors: error.formErrors.fieldErrors, }; } return { values: {}, errors: { teams: { message: "Error validating input" } } }; } }, }); const { fields, append, remove } = useFieldArray({ control, name: "teams", }); const handleCounterIncrease = () => { if (counter >= 0 && counter < 5) { setCounter((prevCounter) => prevCounter + 1); append({ name: "" }); } }; const handleRemoveInput = (index: number) => { remove(index); setCounter((prevCounter) => prevCounter - 1); }; const createTeamsMutation = trpc.viewer.organizations.createTeams.useMutation({ async onSuccess(data) { if (data.duplicatedSlugs.length) { showToast(t("duplicated_slugs_warning", { slugs: data.duplicatedSlugs.join(", ") }), "warning"); // Server will return array of duplicated slugs, so we need to wait for user to read the warning // before pushing to next page setTimeout(() => { router.push(`/event-types`); }, 3000); } else { router.push(`/event-types`); } }, onError: (error) => { showToast(t(error.message), "error"); }, }); const handleInputChange = (index: number, event: any) => { const { name, value } = event.target; setValue(`teams.${index}.name`, value); trigger(`teams.${index}.name`); }; const handleFormSubmit = () => { if (formState.isValid) { const fields = getValues("teams"); createTeamsMutation.mutate({ orgId, teamNames: fields.map((field) => field.name) }); } }; return ( <>
{fields.map((field, index) => (
0 ? "mb-2" : "")} key={field.id}> handleInputChange(index, e)} addOnClassname="bg-transparent p-0 border-l-0" className={index > 0 ? "mb-2" : ""} placeholder={t(`org_team_names_example_${index + 1}`) || t("org_team_names_example")} addOnSuffix={ index > 0 && ( ) } minLength={2} maxLength={63} />
))} {counter === 5 &&

{t("org_max_team_warnings")}

} {counter < 5 && ( )}
); };