import classNames from "@calcom/lib/classNames"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { inferQueryOutput, trpc } from "@calcom/trpc/react"; import { Icon } from "@calcom/ui/Icon"; import Badge from "@calcom/ui/v2/core/Badge"; import Button from "@calcom/ui/v2/core/Button"; import Switch from "@calcom/ui/v2/core/Switch"; import { Tooltip } from "@calcom/ui/v2/core/Tooltip"; import showToast from "@calcom/ui/v2/core/notifications"; export type TWebhook = inferQueryOutput<"viewer.webhook.list">[number]; export default function WebhookListItem(props: { webhook: TWebhook; onEditWebhook: () => void; lastItem: boolean; }) { const { t } = useLocale(); const utils = trpc.useContext(); const { webhook } = props; const deleteWebhook = trpc.useMutation("viewer.webhook.delete", { async onSuccess() { await utils.invalidateQueries(["viewer.webhook.list"]); showToast(t("webhook_removed_successfully"), "success"); }, }); const toggleWebhook = trpc.useMutation("viewer.webhook.edit", { async onSuccess(data) { console.log("data", data); await utils.invalidateQueries(["viewer.webhook.list"]); // TODO: Better success message showToast(t(data?.active ? "enabled" : "disabled"), "success"); }, }); return (

{webhook.subscriberUrl}

{webhook.eventTriggers.map((trigger) => ( {t(`${trigger.toLowerCase()}`)} ))}
toggleWebhook.mutate({ id: webhook.id, active: !webhook.active, payloadTemplate: webhook.payloadTemplate, }) } />
); }