import { zodResolver } from "@hookform/resolvers/zod"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { Toaster } from "react-hot-toast"; import z from "zod"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { Button, Form, showToast, TextField } from "@calcom/ui"; import { FiCheck, FiX } from "@calcom/ui/components/icon"; const formSchema = z.object({ api_key: z.string(), }); export default function SendgridSetup() { const { t } = useLocale(); const router = useRouter(); const [testPassed, setTestPassed] = useState(undefined); const [testLoading, setTestLoading] = useState(false); const form = useForm<{ api_key: string; }>({ resolver: zodResolver(formSchema), }); useEffect(() => { const timer = setTimeout(() => { if (testPassed === false) { setTestPassed(undefined); } }, 3000); return () => clearTimeout(timer); }, [testPassed]); return (
Sendgrid

{t("provide_api_key")}

{t("generate_api_key_description", { appName: "Sendgrid" })}{" "} Sendgrid . {t("it_stored_encrypted")}
{ const res = await fetch("/api/integrations/sendgrid/add", { method: "POST", body: JSON.stringify(values), headers: { "Content-Type": "application/json", }, }); const json = await res.json(); if (res.ok) { router.push(json.url); } else { showToast(json.message, "error"); } }}>
( { onChange(e.target.value); form.setValue("api_key", e.target.value); await form.trigger("api_key"); }} /> )} />
); }