import { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { useLocale } from "@lib/hooks/useLocale"; import showToast from "@lib/notification"; import { trpc } from "@lib/trpc"; import { WEBHOOK_TRIGGER_EVENTS } from "@lib/webhooks/constants"; import customTemplate, { hasTemplateIntegration } from "@lib/webhooks/integrationTemplate"; import { DialogFooter } from "@components/Dialog"; import { FieldsetLegend, Form, InputGroupBox, TextArea, TextField } from "@components/form/fields"; import Button from "@components/ui/Button"; import Switch from "@components/ui/Switch"; import { TWebhook } from "@components/webhook/WebhookListItem"; import WebhookTestDisclosure from "@components/webhook/WebhookTestDisclosure"; export default function WebhookDialogForm(props: { eventTypeId?: number; defaultValues?: TWebhook; handleClose: () => void; }) { const { t } = useLocale(); const utils = trpc.useContext(); const handleSubscriberUrlChange = (e) => { form.setValue("subscriberUrl", e.target.value); if (hasTemplateIntegration({ url: e.target.value })) { setUseCustomPayloadTemplate(true); form.setValue("payloadTemplate", customTemplate({ url: e.target.value })); } }; const { defaultValues = { id: "", eventTriggers: WEBHOOK_TRIGGER_EVENTS, subscriberUrl: "", active: true, payloadTemplate: null, } as Omit, } = props; const [useCustomPayloadTemplate, setUseCustomPayloadTemplate] = useState(!!defaultValues.payloadTemplate); const form = useForm({ defaultValues, }); return (
{ const e = { ...event, eventTypeId: props.eventTypeId }; if (!useCustomPayloadTemplate && event.payloadTemplate) { event.payloadTemplate = null; } if (event.id) { await utils.client.mutation("viewer.webhook.edit", e); await utils.invalidateQueries(["viewer.webhook.list"]); showToast(t("webhook_updated_successfully"), "success"); } else { await utils.client.mutation("viewer.webhook.create", e); await utils.invalidateQueries(["viewer.webhook.list"]); showToast(t("webhook_created_successfully"), "success"); } props.handleClose(); }} className="space-y-4">
( { form.setValue("active", isChecked); }} /> )} />
{t("event_triggers")} {WEBHOOK_TRIGGER_EVENTS.map((key) => ( ( { const value = field.value; const newValue = isChecked ? [...value, key] : value.filter((v) => v !== key); form.setValue("eventTriggers", newValue, { shouldDirty: true, }); }} /> )} /> ))}
{t("payload_template")}
{useCustomPayloadTemplate && (