first commit

calcom/packages/features/webhooks/components/WebhookForm.tsx

@@ -0,0 +1,302 @@
+import { useEffect, useState } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { WebhookTriggerEvents } from "@calcom/prisma/enums";
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
+
+import SectionBottomActions from "../../settings/SectionBottomActions";
+import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
+import WebhookTestDisclosure from "./WebhookTestDisclosure";
+
+export type TWebhook = RouterOutputs["viewer"]["webhook"]["list"][number];
+
+export type WebhookFormData = {
+  id?: string;
+  subscriberUrl: string;
+  active: boolean;
+  eventTriggers: WebhookTriggerEvents[];
+  secret: string | null;
+  payloadTemplate: string | undefined | null;
+};
+
+export type WebhookFormSubmitData = WebhookFormData & {
+  changeSecret: boolean;
+  newSecret: string;
+};
+
+type WebhookTriggerEventOptions = readonly { value: WebhookTriggerEvents; label: string }[];
+
+const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2: Record<string, WebhookTriggerEventOptions> = {
+  core: [
+    { value: WebhookTriggerEvents.BOOKING_CANCELLED, label: "booking_cancelled" },
+    { value: WebhookTriggerEvents.BOOKING_CREATED, label: "booking_created" },
+    { value: WebhookTriggerEvents.BOOKING_REJECTED, label: "booking_rejected" },
+    { value: WebhookTriggerEvents.BOOKING_REQUESTED, label: "booking_requested" },
+    { value: WebhookTriggerEvents.BOOKING_PAYMENT_INITIATED, label: "booking_payment_initiated" },
+    { value: WebhookTriggerEvents.BOOKING_RESCHEDULED, label: "booking_rescheduled" },
+    { value: WebhookTriggerEvents.BOOKING_PAID, label: "booking_paid" },
+    { value: WebhookTriggerEvents.BOOKING_NO_SHOW_UPDATED, label: "booking_no_show_updated" },
+    { value: WebhookTriggerEvents.MEETING_ENDED, label: "meeting_ended" },
+    { value: WebhookTriggerEvents.MEETING_STARTED, label: "meeting_started" },
+    { value: WebhookTriggerEvents.RECORDING_READY, label: "recording_ready" },
+    { value: WebhookTriggerEvents.INSTANT_MEETING, label: "instant_meeting" },
+    {
+      value: WebhookTriggerEvents.RECORDING_TRANSCRIPTION_GENERATED,
+      label: "recording_transcription_generated",
+    },
+  ],
+  "routing-forms": [{ value: WebhookTriggerEvents.FORM_SUBMITTED, label: "form_submitted" }],
+} as const;
+
+const WebhookForm = (props: {
+  webhook?: WebhookFormData;
+  apps?: (keyof typeof WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2)[];
+  onSubmit: (event: WebhookFormSubmitData) => void;
+  onCancel?: () => void;
+  noRoutingFormTriggers: boolean;
+  selectOnlyInstantMeetingOption?: boolean;
+}) => {
+  const { apps = [], selectOnlyInstantMeetingOption = false } = props;
+  const { t } = useLocale();
+
+  const triggerOptions = [...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2["core"]];
+  if (apps) {
+    for (const app of apps) {
+      if (app === "routing-forms" && props.noRoutingFormTriggers) continue;
+      if (WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2[app]) {
+        triggerOptions.push(...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2[app]);
+      }
+    }
+  }
+  const translatedTriggerOptions = triggerOptions.map((option) => ({ ...option, label: t(option.label) }));
+
+  const getEventTriggers = () => {
+    if (props.webhook) return props.webhook.eventTriggers;
+
+    return (
+      selectOnlyInstantMeetingOption
+        ? translatedTriggerOptions.filter((option) => option.value === WebhookTriggerEvents.INSTANT_MEETING)
+        : translatedTriggerOptions.filter((option) => option.value !== WebhookTriggerEvents.INSTANT_MEETING)
+    ).map((option) => option.value);
+  };
+
+  const formMethods = useForm({
+    defaultValues: {
+      subscriberUrl: props.webhook?.subscriberUrl || "",
+      active: props.webhook ? props.webhook.active : true,
+      eventTriggers: getEventTriggers(),
+      secret: props?.webhook?.secret || "",
+      payloadTemplate: props?.webhook?.payloadTemplate || undefined,
+    },
+  });
+
+  const [useCustomTemplate, setUseCustomTemplate] = useState(false);
+  const [newSecret, setNewSecret] = useState("");
+  const [changeSecret, setChangeSecret] = useState<boolean>(false);
+  const hasSecretKey = !!props?.webhook?.secret;
+  // const currentSecret = props?.webhook?.secret;
+
+  useEffect(() => {
+    if (changeSecret) {
+      formMethods.unregister("secret", { keepDefaultValue: false });
+    }
+  }, [changeSecret, formMethods]);
+
+  return (
+    <Form
+      form={formMethods}
+      handleSubmit={(values) => props.onSubmit({ ...values, changeSecret, newSecret })}>
+      <div className="border-subtle border-x p-6">
+        <Controller
+          name="subscriberUrl"
+          control={formMethods.control}
+          render={({ field: { value } }) => (
+            <>
+              <TextField
+                name="subscriberUrl"
+                label={t("subscriber_url")}
+                labelClassName="font-medium text-emphasis font-sm"
+                value={value}
+                required
+                type="url"
+                onChange={(e) => {
+                  formMethods.setValue("subscriberUrl", e?.target.value, { shouldDirty: true });
+                  if (hasTemplateIntegration({ url: e.target.value })) {
+                    setUseCustomTemplate(true);
+                    formMethods.setValue("payloadTemplate", customTemplate({ url: e.target.value }), {
+                      shouldDirty: true,
+                    });
+                  }
+                }}
+              />
+            </>
+          )}
+        />
+        <Controller
+          name="active"
+          control={formMethods.control}
+          render={({ field: { value } }) => (
+            <div className="font-sm text-emphasis mt-6 font-medium">
+              <Switch
+                label={t("enable_webhook")}
+                checked={value}
+                // defaultChecked={props?.webhook?.active ? props?.webhook?.active : true}
+                onCheckedChange={(value) => {
+                  formMethods.setValue("active", value, { shouldDirty: true });
+                }}
+              />
+            </div>
+          )}
+        />
+        <Controller
+          name="eventTriggers"
+          control={formMethods.control}
+          render={({ field: { onChange, value } }) => {
+            const selectValue = translatedTriggerOptions.filter((option) => value.includes(option.value));
+            return (
+              <div className="mt-6">
+                <Label className="font-sm text-emphasis font-medium">
+                  <>{t("event_triggers")}</>
+                </Label>
+                <Select
+                  options={translatedTriggerOptions}
+                  isMulti
+                  value={selectValue}
+                  onChange={(event) => {
+                    onChange(event.map((selection) => selection.value));
+                  }}
+                />
+              </div>
+            );
+          }}
+        />
+        <Controller
+          name="secret"
+          control={formMethods.control}
+          render={({ field: { value } }) => (
+            <div className="mt-6">
+              {!!hasSecretKey && !changeSecret && (
+                <>
+                  <Label className="font-sm text-emphasis font-medium">Secret</Label>
+                  <div className="bg-default space-y-0 rounded-md border-0 border-neutral-200 sm:mx-0 md:border">
+                    <div className="text-emphasis rounded-sm border-b p-2 text-sm">
+                      {t("forgotten_secret_description")}
+                    </div>
+                    <div className="p-2">
+                      <Button
+                        color="secondary"
+                        type="button"
+                        onClick={() => {
+                          setChangeSecret(true);
+                        }}>
+                        {t("change_secret")}
+                      </Button>
+                    </div>
+                  </div>
+                </>
+              )}
+              {!!hasSecretKey && changeSecret && (
+                <>
+                  <TextField
+                    autoComplete="off"
+                    label={t("secret")}
+                    labelClassName="font-medium text-emphasis font-sm"
+                    {...formMethods.register("secret")}
+                    value={newSecret}
+                    onChange={(event) => setNewSecret(event.currentTarget.value)}
+                    type="text"
+                    placeholder={t("leave_blank_to_remove_secret")}
+                  />
+                  <Button
+                    color="secondary"
+                    type="button"
+                    className="py-1 text-xs"
+                    onClick={() => {
+                      setChangeSecret(false);
+                    }}>
+                    {t("cancel")}
+                  </Button>
+                </>
+              )}
+              {!hasSecretKey && (
+                <TextField
+                  name="secret"
+                  label={t("secret")}
+                  labelClassName="font-medium text-emphasis font-sm"
+                  value={value}
+                  onChange={(e) => {
+                    formMethods.setValue("secret", e?.target.value, { shouldDirty: true });
+                  }}
+                />
+              )}
+            </div>
+          )}
+        />
+
+        <Controller
+          name="payloadTemplate"
+          control={formMethods.control}
+          render={({ field: { value } }) => (
+            <>
+              <Label className="font-sm text-emphasis mt-6">
+                <>{t("payload_template")}</>
+              </Label>
+              <div className="mb-2">
+                <ToggleGroup
+                  onValueChange={(val) => {
+                    if (val === "default") {
+                      setUseCustomTemplate(false);
+                      formMethods.setValue("payloadTemplate", undefined, { shouldDirty: true });
+                    } else {
+                      setUseCustomTemplate(true);
+                    }
+                  }}
+                  defaultValue={value ? "custom" : "default"}
+                  options={[
+                    { value: "default", label: t("default") },
+                    { value: "custom", label: t("custom") },
+                  ]}
+                  isFullWidth={true}
+                />
+              </div>
+              {useCustomTemplate && (
+                <TextArea
+                  name="customPayloadTemplate"
+                  rows={3}
+                  value={value}
+                  onChange={(e) => {
+                    formMethods.setValue("payloadTemplate", e?.target.value, { shouldDirty: true });
+                  }}
+                />
+              )}
+            </>
+          )}
+        />
+      </div>
+      <SectionBottomActions align="end">
+        <Button
+          type="button"
+          color="minimal"
+          onClick={props.onCancel}
+          {...(!props.onCancel ? { href: `${WEBAPP_URL}/settings/developer/webhooks` } : {})}>
+          {t("cancel")}
+        </Button>
+        <Button
+          type="submit"
+          disabled={!formMethods.formState.isDirty && !changeSecret}
+          loading={formMethods.formState.isSubmitting || formMethods.formState.isSubmitted}>
+          {props?.webhook?.id ? t("save") : t("create_webhook")}
+        </Button>
+      </SectionBottomActions>
+
+      <div className="mt-6 rounded-md">
+        <WebhookTestDisclosure />
+      </div>
+    </Form>
+  );
+};
+
+export default WebhookForm;

calcom/packages/features/webhooks/components/WebhookListItem.tsx

@@ -0,0 +1,157 @@
+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,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  showToast,
+  Switch,
+  Tooltip,
+} from "@calcom/ui";
+
+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.useUtils();
+  const { webhook } = props;
+  const canEditWebhook = props.canEditWebhook ?? true;
+
+  const deleteWebhook = trpc.viewer.webhook.delete.useMutation({
+    async onSuccess() {
+      showToast(t("webhook_removed_successfully"), "success");
+      await utils.viewer.webhook.getByViewer.invalidate();
+      await utils.viewer.webhook.list.invalidate();
+      await utils.viewer.eventTypes.get.invalidate();
+    },
+  });
+  const toggleWebhook = trpc.viewer.webhook.edit.useMutation({
+    async onSuccess(data) {
+      // TODO: Better success message
+      showToast(t(data?.active ? "enabled" : "disabled"), "success");
+      await utils.viewer.webhook.getByViewer.invalidate();
+      await utils.viewer.webhook.list.invalidate();
+      await utils.viewer.eventTypes.get.invalidate();
+    },
+  });
+
+  const onDeleteWebhook = () => {
+    // TODO: Confimation dialog before deleting
+    deleteWebhook.mutate({
+      id: webhook.id,
+      eventTypeId: webhook.eventTypeId || undefined,
+      teamId: webhook.teamId || undefined,
+    });
+  };
+
+  return (
+    <div
+      className={classNames(
+        "flex w-full justify-between p-4",
+        props.lastItem ? "" : "border-subtle border-b"
+      )}>
+      <div className="w-full truncate">
+        <div className="flex">
+          <Tooltip content={webhook.subscriberUrl}>
+            <p className="text-emphasis max-w-[600px] truncate text-sm font-medium">
+              {webhook.subscriberUrl}
+            </p>
+          </Tooltip>
+          {!!props.readOnly && (
+            <Badge variant="gray" className="ml-2 ">
+              {t("readonly")}
+            </Badge>
+          )}
+        </div>
+        <Tooltip content={t("triggers_when")}>
+          <div className="flex w-4/5 flex-wrap">
+            {webhook.eventTriggers.map((trigger) => (
+              <Badge
+                key={trigger}
+                className="mt-2.5 basis-1/5 ltr:mr-2 rtl:ml-2"
+                variant="gray"
+                startIcon="zap">
+                {t(`${trigger.toLowerCase()}`)}
+              </Badge>
+            ))}
+          </div>
+        </Tooltip>
+      </div>
+      {!props.readOnly && (
+        <div className="ml-2 flex items-center space-x-4">
+          <Switch
+            defaultChecked={webhook.active}
+            data-testid="webhook-switch"
+            disabled={!canEditWebhook}
+            onCheckedChange={() =>
+              toggleWebhook.mutate({
+                id: webhook.id,
+                active: !webhook.active,
+                payloadTemplate: webhook.payloadTemplate,
+                eventTypeId: webhook.eventTypeId || undefined,
+              })
+            }
+          />
+
+          <Button
+            className="hidden lg:flex"
+            color="secondary"
+            onClick={props.onEditWebhook}
+            data-testid="webhook-edit-button">
+            {t("edit")}
+          </Button>
+
+          <Button
+            className="hidden lg:flex"
+            color="destructive"
+            StartIcon="trash"
+            variant="icon"
+            onClick={onDeleteWebhook}
+          />
+
+          <Dropdown>
+            <DropdownMenuTrigger asChild>
+              <Button className="lg:hidden" StartIcon="ellipsis" variant="icon" color="secondary" />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem>
+                <DropdownItem StartIcon="pencil" color="secondary" onClick={props.onEditWebhook}>
+                  {t("edit")}
+                </DropdownItem>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+
+              <DropdownMenuItem>
+                <DropdownItem StartIcon="trash" color="destructive" onClick={onDeleteWebhook}>
+                  {t("delete")}
+                </DropdownItem>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </Dropdown>
+        </div>
+      )}
+    </div>
+  );
+}

calcom/packages/features/webhooks/components/WebhookListItemSkeleton.tsx

@@ -0,0 +1,19 @@
+import { SkeletonText } from "@calcom/ui";
+
+export default function WebhookListItemSkeleton() {
+  return (
+    <div className="flex w-full justify-between p-4">
+      <div>
+        <p className="text-emphasis text-sm font-medium">
+          <SkeletonText className="h-4 w-56" />
+        </p>
+        <div className="mt-2.5 w-max">
+          <SkeletonText className="h-5 w-28" />
+        </div>
+      </div>
+      <div className="flex items-center space-x-4">
+        <SkeletonText className="h-9 w-9" />
+      </div>
+    </div>
+  );
+}

calcom/packages/features/webhooks/components/WebhookListSkeleton.tsx

@@ -0,0 +1,15 @@
+import { SkeletonContainer } from "@calcom/ui";
+
+import WebhookListItemSkeleton from "./WebhookListItemSkeleton";
+
+export default function WebhookListSkeleton() {
+  return (
+    <SkeletonContainer>
+      <div className="border-subtle divide-subtle mb-8 mt-6 divide-y rounded-md border">
+        <WebhookListItemSkeleton />
+        <WebhookListItemSkeleton />
+        <WebhookListItemSkeleton />
+      </div>
+    </SkeletonContainer>
+  );
+}

calcom/packages/features/webhooks/components/WebhookTestDisclosure.tsx

@@ -0,0 +1,75 @@
+import { useWatch } from "react-hook-form";
+import { ZodError } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { trpc } from "@calcom/trpc/react";
+import { ZTestTriggerInputSchema } from "@calcom/trpc/server/routers/viewer/webhook/testTrigger.schema";
+import { Badge, Button, showToast } from "@calcom/ui";
+
+export default function WebhookTestDisclosure() {
+  const [subscriberUrl, webhookSecret]: [string, string] = useWatch({ name: ["subscriberUrl", "secret"] });
+  const payloadTemplate = useWatch({ name: "payloadTemplate" }) || null;
+  const { t } = useLocale();
+  const mutation = trpc.viewer.webhook.testTrigger.useMutation({
+    onError(err) {
+      showToast(err.message, "error");
+    },
+  });
+
+  return (
+    <>
+      <div className="border-subtle flex justify-between rounded-t-lg border p-6">
+        <div>
+          <p className="text-emphasis text-sm font-semibold leading-5">{t("webhook_test")}</p>
+          <p className="text-default text-sm">{t("test_webhook")}</p>
+        </div>
+        <Button
+          type="button"
+          color="secondary"
+          disabled={mutation.isPending || !subscriberUrl}
+          StartIcon="activity"
+          onClick={() => {
+            try {
+              ZTestTriggerInputSchema.parse({
+                url: subscriberUrl,
+                secret: webhookSecret,
+                type: "PING",
+                payloadTemplate,
+              });
+              mutation.mutate({ url: subscriberUrl, secret: webhookSecret, type: "PING", payloadTemplate });
+            } catch (error) {
+              //this catches invalid subscriberUrl before calling the mutation
+              if (error instanceof ZodError) {
+                const errorMessage = error.errors.map((e) => e.message).join(", ");
+                showToast(errorMessage, "error");
+              } else {
+                showToast(t("unexpected_error_try_again"), "error");
+              }
+            }
+          }}>
+          {t("ping_test")}
+        </Button>
+      </div>
+      <div className="border-subtle space-y-0 rounded-b-lg border border-t-0 px-6 py-8 sm:mx-0">
+        <div className="border-subtle flex justify-between rounded-t-lg border p-4">
+          <div className="flex items-center space-x-1">
+            <h3 className="text-emphasis self-center text-sm font-semibold leading-4">
+              {t("webhook_response")}
+            </h3>
+            {mutation.data && (
+              <Badge variant={mutation.data.ok ? "green" : "red"}>
+                {mutation.data.ok ? t("passed") : t("failed")}
+              </Badge>
+            )}
+          </div>
+        </div>
+        <div className="bg-muted border-subtle rounded-b-lg border border-t-0 p-4 font-mono text-[13px] leading-4">
+          {!mutation.data && <p>{t("no_data_yet")}</p>}
+          {mutation.status === "success" && (
+            <div className="overflow-x-auto">{JSON.stringify(mutation.data, null, 4)}</div>
+          )}
+        </div>
+      </div>
+    </>
+  );
+}

calcom/packages/features/webhooks/components/index.ts

@@ -0,0 +1,5 @@
+export { default as WebhookForm } from "./WebhookForm";
+export { default as WebhookListItem } from "./WebhookListItem";
+export { default as WebhookListItemSkeleton } from "./WebhookListItemSkeleton";
+export { default as WebhookListSkeleton } from "./WebhookListSkeleton";
+export { default as WebhookTestDisclosure } from "./WebhookTestDisclosure";