import { useSession } from "next-auth/react"; import { useRouter } from "next/router"; import { APP_NAME } from "@calcom/lib/constants"; import { useLocale } from "@calcom/lib/hooks/useLocale"; import { trpc } from "@calcom/trpc/react"; import { Meta, showToast, SkeletonContainer } from "@calcom/ui"; import { getLayout } from "../../settings/layouts/SettingsLayout"; import type { WebhookFormSubmitData } from "../components/WebhookForm"; import WebhookForm from "../components/WebhookForm"; import { subscriberUrlReserved } from "../lib/subscriberUrlReserved"; const NewWebhookView = () => { const { t } = useLocale(); const utils = trpc.useContext(); const router = useRouter(); const session = useSession(); const teamId = router.query.teamId ? +router.query.teamId : undefined; const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery( { variant: "other", onlyInstalled: true }, { suspense: true, enabled: router.isReady, } ); const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, { suspense: true, enabled: router.isReady, }); const createWebhookMutation = trpc.viewer.webhook.create.useMutation({ async onSuccess() { showToast(t("webhook_created_successfully"), "success"); await utils.viewer.webhook.list.invalidate(); router.back(); }, onError(error) { showToast(`${error.message}`, "error"); }, }); const onCreateWebhook = async (values: WebhookFormSubmitData) => { if ( subscriberUrlReserved({ subscriberUrl: values.subscriberUrl, id: values.id, webhooks, teamId, userId: session.data?.user.id, }) ) { showToast(t("webhook_subscriber_url_reserved"), "error"); return; } if (!values.payloadTemplate) { values.payloadTemplate = null; } createWebhookMutation.mutate({ subscriberUrl: values.subscriberUrl, eventTriggers: values.eventTriggers, active: values.active, payloadTemplate: values.payloadTemplate, secret: values.secret, teamId, }); }; if (isLoading) return ; return ( <> app.slug)} noRoutingFormTriggers={!!teamId} /> ); }; NewWebhookView.getLayout = getLayout; export default NewWebhookView;