113 lines
3.3 KiB
TypeScript
113 lines
3.3 KiB
TypeScript
import { useSession } from "next-auth/react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
|
|
import { APP_NAME } from "@calcom/lib/constants";
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
|
import { trpc } from "@calcom/trpc/react";
|
|
import { Meta, showToast, SkeletonContainer, SkeletonText } 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 SkeletonLoader = ({ title, description }: { title: string; description: string }) => {
|
|
return (
|
|
<SkeletonContainer>
|
|
<Meta title={title} description={description} borderInShellHeader={true} />
|
|
<div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
|
|
<SkeletonText className="h-8 w-full" />
|
|
<SkeletonText className="h-8 w-full" />
|
|
</div>
|
|
</SkeletonContainer>
|
|
);
|
|
};
|
|
const NewWebhookView = () => {
|
|
const searchParams = useSearchParams();
|
|
const { t } = useLocale();
|
|
const utils = trpc.useContext();
|
|
const router = useRouter();
|
|
const session = useSession();
|
|
|
|
const teamId = searchParams?.get("teamId") ? Number(searchParams.get("teamId")) : undefined;
|
|
|
|
const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
|
|
{ variant: "other", onlyInstalled: true },
|
|
{
|
|
suspense: true,
|
|
enabled: session.status === "authenticated",
|
|
}
|
|
);
|
|
const { data: webhooks } = trpc.viewer.webhook.list.useQuery(undefined, {
|
|
suspense: true,
|
|
enabled: session.status === "authenticated",
|
|
});
|
|
|
|
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 (
|
|
<SkeletonLoader
|
|
title={t("add_webhook")}
|
|
description={t("add_webhook_description", { appName: APP_NAME })}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<Meta
|
|
title={t("add_webhook")}
|
|
description={t("add_webhook_description", { appName: APP_NAME })}
|
|
backButton
|
|
borderInShellHeader={true}
|
|
/>
|
|
<WebhookForm
|
|
noRoutingFormTriggers={false}
|
|
onSubmit={onCreateWebhook}
|
|
apps={installedApps?.items.map((app) => app.slug)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
NewWebhookView.getLayout = getLayout;
|
|
|
|
export default NewWebhookView;
|