import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { WebhookTriggerEvents } from "@calcom/prisma/enums"; import { trpc } from "@calcom/trpc/react"; import { Badge, Button, Dropdown, DropdownItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, showToast, Switch, Tooltip, } from "@calcom/ui"; import { AlertCircle, Edit, MoreHorizontal, Trash } from "@calcom/ui/components/icon"; type WebhookProps = { id: string; subscriberUrl: string; payloadTemplate: string | null; active: boolean; eventTriggers: WebhookTriggerEvents[]; secret: string | null; eventTypeId: number | null; teamId: number | null; }; export default function WebhookListItem(props: { webhook: WebhookProps; canEditWebhook?: boolean; onEditWebhook: () => void; lastItem: boolean; readOnly?: boolean; }) { const { t } = useLocale(); const utils = trpc.useContext(); const { webhook } = props; const canEditWebhook = props.canEditWebhook ?? true; const deleteWebhook = trpc.viewer.webhook.delete.useMutation({ async onSuccess() { await utils.viewer.webhook.getByViewer.invalidate(); await utils.viewer.webhook.list.invalidate(); showToast(t("webhook_removed_successfully"), "success"); }, }); const toggleWebhook = trpc.viewer.webhook.edit.useMutation({ async onSuccess(data) { await utils.viewer.webhook.getByViewer.invalidate(); await utils.viewer.webhook.list.invalidate(); // TODO: Better success message showToast(t(data?.active ? "enabled" : "disabled"), "success"); }, }); const onDeleteWebhook = () => { // TODO: Confimation dialog before deleting deleteWebhook.mutate({ id: webhook.id, eventTypeId: webhook.eventTypeId || undefined, teamId: webhook.teamId || undefined, }); }; return (

{webhook.subscriberUrl}

{!!props.readOnly && ( {t("readonly")} )}
{webhook.eventTriggers.map((trigger) => ( {t(`${trigger.toLowerCase()}`)} ))}
{!props.readOnly && (
toggleWebhook.mutate({ id: webhook.id, active: !webhook.active, payloadTemplate: webhook.payloadTemplate, eventTypeId: webhook.eventTypeId || undefined, }) } />
)}
); }