first commit

2024-08-09 00:39:27 +02:00
commit 79688abe2e
5698 changed files with 497838 additions and 0 deletions
--- a/calcom/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/calcom/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -0,0 +1,116 @@
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/navigation";
+
+import { APP_NAME } from "@calcom/lib/constants";
+import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
+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 = useCompatSearchParams();
+  const { t } = useLocale();
+  const utils = trpc.useUtils();
+  const router = useRouter();
+  const session = useSession();
+
+  const teamId = searchParams?.get("teamId") ? Number(searchParams.get("teamId")) : undefined;
+  const platform = searchParams?.get("platform") ? Boolean(searchParams.get("platform")) : false;
+
+  const { data: installedApps, isPending } = 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,
+        platform,
+      })
+    ) {
+      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,
+      platform,
+    });
+  };
+
+  if (isPending)
+    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;