2022-09-22 17:23:43 +00:00
|
|
|
import { useEffect, useState } from "react";
|
2022-09-12 19:07:52 +00:00
|
|
|
import { Controller, useForm } from "react-hook-form";
|
|
|
|
|
|
|
|
import { WEBAPP_URL } from "@calcom/lib/constants";
|
|
|
|
import { useLocale } from "@calcom/lib/hooks/useLocale";
|
2023-05-02 11:44:05 +00:00
|
|
|
import { WebhookTriggerEvents } from "@calcom/prisma/enums";
|
2023-04-05 18:14:46 +00:00
|
|
|
import type { RouterOutputs } from "@calcom/trpc/react";
|
2022-11-23 02:55:25 +00:00
|
|
|
import { Button, Form, Label, Select, Switch, TextArea, TextField, ToggleGroup } from "@calcom/ui";
|
2022-09-12 19:07:52 +00:00
|
|
|
|
2022-10-12 13:04:51 +00:00
|
|
|
import customTemplate, { hasTemplateIntegration } from "../lib/integrationTemplate";
|
2022-09-12 19:07:52 +00:00
|
|
|
import WebhookTestDisclosure from "./WebhookTestDisclosure";
|
|
|
|
|
2022-11-10 23:40:01 +00:00
|
|
|
export type TWebhook = RouterOutputs["viewer"]["webhook"]["list"][number];
|
2022-09-12 19:07:52 +00:00
|
|
|
|
|
|
|
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;
|
|
|
|
};
|
|
|
|
|
2022-09-22 17:23:43 +00:00
|
|
|
type WebhookTriggerEventOptions = readonly { value: WebhookTriggerEvents; label: string }[];
|
2022-09-12 19:07:52 +00:00
|
|
|
|
|
|
|
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_RESCHEDULED, label: "booking_rescheduled" },
|
|
|
|
{ value: WebhookTriggerEvents.MEETING_ENDED, label: "meeting_ended" },
|
|
|
|
],
|
2022-09-22 17:23:43 +00:00
|
|
|
"routing-forms": [{ value: WebhookTriggerEvents.FORM_SUBMITTED, label: "form_submitted" }],
|
|
|
|
} as const;
|
2022-09-12 19:07:52 +00:00
|
|
|
|
|
|
|
const WebhookForm = (props: {
|
|
|
|
webhook?: WebhookFormData;
|
|
|
|
apps?: (keyof typeof WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2)[];
|
|
|
|
onSubmit: (event: WebhookFormSubmitData) => void;
|
2022-12-20 22:34:37 +00:00
|
|
|
onCancel?: () => void;
|
2022-09-12 19:07:52 +00:00
|
|
|
}) => {
|
2022-09-19 00:58:36 +00:00
|
|
|
const { apps = [] } = props;
|
2022-09-12 19:07:52 +00:00
|
|
|
const { t } = useLocale();
|
|
|
|
|
2022-09-22 17:23:43 +00:00
|
|
|
const triggerOptions = [...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2["core"]];
|
|
|
|
if (apps) {
|
|
|
|
for (const app of apps) {
|
2022-10-03 19:03:47 +00:00
|
|
|
if (WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2[app]) {
|
|
|
|
triggerOptions.push(...WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP_V2[app]);
|
|
|
|
}
|
2022-09-22 17:23:43 +00:00
|
|
|
}
|
|
|
|
}
|
2022-09-12 19:07:52 +00:00
|
|
|
const translatedTriggerOptions = triggerOptions.map((option) => ({ ...option, label: t(option.label) }));
|
|
|
|
|
|
|
|
const formMethods = useForm({
|
|
|
|
defaultValues: {
|
2022-09-22 17:23:43 +00:00
|
|
|
subscriberUrl: props.webhook?.subscriberUrl || "",
|
|
|
|
active: props.webhook ? props.webhook.active : true,
|
|
|
|
eventTriggers: !props.webhook
|
|
|
|
? translatedTriggerOptions.map((option) => option.value)
|
|
|
|
: props.webhook.eventTriggers,
|
2022-09-12 19:07:52 +00:00
|
|
|
secret: props?.webhook?.secret || "",
|
|
|
|
payloadTemplate: props?.webhook?.payloadTemplate || undefined,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
const [useCustomTemplate, setUseCustomTemplate] = useState(false);
|
|
|
|
const [newSecret, setNewSecret] = useState("");
|
|
|
|
const [changeSecret, setChangeSecret] = useState(false);
|
|
|
|
const hasSecretKey = !!props?.webhook?.secret;
|
|
|
|
// const currentSecret = props?.webhook?.secret;
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (changeSecret) {
|
|
|
|
formMethods.unregister("secret", { keepDefaultValue: false });
|
|
|
|
}
|
|
|
|
}, [changeSecret]);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Form
|
|
|
|
form={formMethods}
|
|
|
|
handleSubmit={(values) => props.onSubmit({ ...values, changeSecret, newSecret })}>
|
|
|
|
<Controller
|
|
|
|
name="subscriberUrl"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<>
|
|
|
|
<TextField
|
|
|
|
name="subscriberUrl"
|
|
|
|
label={t("subscriber_url")}
|
2023-04-05 18:14:46 +00:00
|
|
|
labelClassName="font-medium text-emphasis font-sm"
|
2022-09-12 19:07:52 +00:00
|
|
|
value={value}
|
2023-01-18 16:02:20 +00:00
|
|
|
required
|
|
|
|
type="url"
|
2022-09-12 19:07:52 +00:00
|
|
|
onChange={(e) => {
|
|
|
|
formMethods.setValue("subscriberUrl", e?.target.value);
|
|
|
|
if (hasTemplateIntegration({ url: e.target.value })) {
|
|
|
|
setUseCustomTemplate(true);
|
|
|
|
formMethods.setValue("payloadTemplate", customTemplate({ url: e.target.value }));
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Controller
|
|
|
|
name="active"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="font-sm text-emphasis mt-8 font-medium">
|
2022-09-12 19:07:52 +00:00
|
|
|
<Switch
|
|
|
|
label={t("enable_webhook")}
|
|
|
|
checked={value}
|
|
|
|
// defaultChecked={props?.webhook?.active ? props?.webhook?.active : true}
|
|
|
|
onCheckedChange={(value) => {
|
|
|
|
formMethods.setValue("active", value);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
<Controller
|
|
|
|
name="eventTriggers"
|
|
|
|
control={formMethods.control}
|
2022-09-22 17:23:43 +00:00
|
|
|
render={({ field: { onChange, value } }) => {
|
|
|
|
const selectValue = translatedTriggerOptions.filter((option) => value.includes(option.value));
|
|
|
|
return (
|
|
|
|
<div className="mt-8">
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="font-sm text-emphasis mt-8 font-medium">
|
2022-09-22 17:23:43 +00:00
|
|
|
<>{t("event_triggers")}</>
|
|
|
|
</Label>
|
|
|
|
<Select
|
|
|
|
options={translatedTriggerOptions}
|
|
|
|
isMulti
|
|
|
|
value={selectValue}
|
|
|
|
onChange={(event) => {
|
|
|
|
onChange(event.map((selection) => selection.value));
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}}
|
2022-09-12 19:07:52 +00:00
|
|
|
/>
|
|
|
|
<Controller
|
|
|
|
name="secret"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<div className="mt-8 ">
|
|
|
|
{!!hasSecretKey && !changeSecret && (
|
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<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">
|
2022-09-12 19:07:52 +00:00
|
|
|
{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")}
|
2023-04-05 18:14:46 +00:00
|
|
|
labelClassName="font-medium text-emphasis font-sm"
|
2022-09-12 19:07:52 +00:00
|
|
|
{...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")}
|
2023-04-05 18:14:46 +00:00
|
|
|
labelClassName="font-medium text-emphasis font-sm"
|
2022-09-12 19:07:52 +00:00
|
|
|
value={value}
|
|
|
|
onChange={(e) => {
|
|
|
|
formMethods.setValue("secret", e?.target.value);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
/>
|
|
|
|
|
|
|
|
<Controller
|
|
|
|
name="payloadTemplate"
|
|
|
|
control={formMethods.control}
|
|
|
|
render={({ field: { value } }) => (
|
|
|
|
<>
|
2023-04-05 18:14:46 +00:00
|
|
|
<Label className="font-sm text-emphasis mt-8">
|
2022-11-10 11:38:40 +00:00
|
|
|
<>{t("payload_template")}</>
|
2022-09-12 19:07:52 +00:00
|
|
|
</Label>
|
2022-11-10 11:38:40 +00:00
|
|
|
<div className="mb-2">
|
|
|
|
<ToggleGroup
|
|
|
|
onValueChange={(val) => {
|
|
|
|
if (val === "default") {
|
|
|
|
setUseCustomTemplate(false);
|
|
|
|
formMethods.setValue("payloadTemplate", undefined);
|
|
|
|
} else {
|
|
|
|
setUseCustomTemplate(true);
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
defaultValue={value ? "custom" : "default"}
|
|
|
|
options={[
|
|
|
|
{ value: "default", label: t("default") },
|
|
|
|
{ value: "custom", label: t("custom") },
|
|
|
|
]}
|
2023-02-01 14:51:42 +00:00
|
|
|
isFullWidth={true}
|
2022-11-10 11:38:40 +00:00
|
|
|
/>
|
2022-09-12 19:07:52 +00:00
|
|
|
</div>
|
|
|
|
{useCustomTemplate && (
|
|
|
|
<TextArea
|
|
|
|
name="customPayloadTemplate"
|
|
|
|
rows={3}
|
|
|
|
value={value}
|
|
|
|
onChange={(e) => {
|
|
|
|
formMethods.setValue("payloadTemplate", e?.target.value);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
/>
|
2023-04-05 18:14:46 +00:00
|
|
|
<div className="bg-subtle mt-8 rounded-md p-6">
|
2022-09-12 19:07:52 +00:00
|
|
|
<WebhookTestDisclosure />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="mt-12 flex place-content-end space-x-4">
|
2022-12-20 22:34:37 +00:00
|
|
|
<Button
|
|
|
|
type="button"
|
|
|
|
color="minimal"
|
|
|
|
onClick={props.onCancel}
|
|
|
|
{...(!props.onCancel ? { href: `${WEBAPP_URL}/settings/developer/webhooks` } : {})}>
|
2022-09-12 19:07:52 +00:00
|
|
|
{t("cancel")}
|
|
|
|
</Button>
|
|
|
|
<Button type="submit" loading={formMethods.formState.isSubmitting}>
|
2023-02-01 14:51:42 +00:00
|
|
|
{props?.webhook?.id ? t("save") : t("create_webhook")}
|
2022-09-12 19:07:52 +00:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</Form>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default WebhookForm;
|