Skip to content

Commit 0b7f514

Browse files
alishaz-polymathalishaz-polymath
authored
chore: Add webhook version documentation link to webapp (calcom#26121)
* init * further improvement
1 parent 31da9ea commit 0b7f514

5 files changed

Lines changed: 94 additions & 37 deletions

File tree

‎apps/web/public/static/locales/en/common.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3838,6 +3838,7 @@
38383838
"webhook_attendee_timezone": "Timezone of the first attendee",
38393839
"webhook_attendee_locale": "Locale of the first attendee",
38403840
"webhook_version": "Webhook Version",
3841+
"webhook_version_docs": "View payload documentation for version {{version}}",
38413842
"webhook_team_name": "Name of the team booked",
38423843
"webhook_team_members": "Members of the team booked",
38433844
"webhook_video_call_url": "Video call URL for the meeting",

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

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
"use client";
22

3+
import Link from "next/link";
4+
35
import { useLocale } from "@calcom/lib/hooks/useLocale";
46

57
import type { Webhook } from "../lib/dto/types";
6-
import { getWebhookVersionLabel } from "../lib/constants";
8+
import { getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants";
79
import { trpc } from "@calcom/trpc/react";
810
import classNames from "@calcom/ui/classNames";
911
import { Badge } from "@calcom/ui/components/badge";
@@ -17,6 +19,7 @@ import {
1719
DropdownMenuTrigger,
1820
} from "@calcom/ui/components/dropdown";
1921
import { Switch } from "@calcom/ui/components/form";
22+
import { Icon } from "@calcom/ui/components/icon";
2023
import { showToast } from "@calcom/ui/components/toast";
2124
import { Tooltip } from "@calcom/ui/components/tooltip";
2225

@@ -93,6 +96,14 @@ export default function WebhookListItem(props: {
9396
</Badge>
9497
</div>
9598
</Tooltip>
99+
<Tooltip content={t("webhook_version_docs", { version: getWebhookVersionLabel(webhook.version) })}>
100+
<Link
101+
href={getWebhookVersionDocsUrl(webhook.version)}
102+
target="_blank"
103+
className="text-subtle hover:text-emphasis ml-1 flex items-center">
104+
<Icon name="external-link" className="h-4 w-4" />
105+
</Link>
106+
</Tooltip>
96107
</div>
97108
<Tooltip content={t("triggers_when")}>
98109
<div className="flex w-4/5 flex-wrap">

‎packages/features/webhooks/lib/constants.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,21 @@ export const WEBHOOK_VERSION_OPTIONS = Object.values(WebhookVersion).map((versio
2828
export const getWebhookVersionLabel = (version: WebhookVersion): string =>
2929
WEBHOOK_VERSION_LABELS[version] ?? version;
3030

31+
/**
32+
* Documentation URLs for each webhook version.
33+
* Links to the specific version's payload documentation.
34+
*/
35+
export const WEBHOOK_VERSION_DOCS: Record<WebhookVersion, string> = {
36+
[WebhookVersion.V_2021_10_20]: "https://cal.com/docs/developing/guides/automation/webhooks#2021-10-20",
37+
// Add new versions here: [WebhookVersion.V_YYYY_MM_DD]: "https://cal.com/docs/webhooks/v-yyyy-mm-dd",
38+
};
39+
40+
/**
41+
* Get documentation URL for a specific webhook version
42+
*/
43+
export const getWebhookVersionDocsUrl = (version: WebhookVersion): string =>
44+
WEBHOOK_VERSION_DOCS[version] ?? "https://cal.com/docs/developing/guides/automation/webhooks";
45+
3146
export const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP = {
3247
core: [
3348
WebhookTriggerEvents.BOOKING_CANCELLED,

‎packages/features/webhooks/pages/webhook-edit-view.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import Link from "next/link";
34
import { useRouter } from "next/navigation";
45

56
import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
@@ -8,9 +9,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
89
import type { WebhookTriggerEvents } from "@calcom/prisma/enums";
910

1011
import type { WebhookVersion } from "../lib/interface/IWebhookRepository";
11-
import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel } from "../lib/constants";
12+
import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants";
1213
import { trpc } from "@calcom/trpc/react";
1314
import { Select } from "@calcom/ui/components/form";
15+
import { Icon } from "@calcom/ui/components/icon";
1416
import { SkeletonContainer } from "@calcom/ui/components/skeleton";
1517
import { showToast } from "@calcom/ui/components/toast";
1618
import { Tooltip } from "@calcom/ui/components/tooltip";
@@ -74,23 +76,36 @@ export function EditWebhookView({ webhook }: { webhook?: WebhookProps }) {
7476
description={t("add_webhook_description", { appName: APP_NAME })}
7577
borderInShellHeader={true}
7678
CTA={
77-
<Tooltip content={t("webhook_version")}>
78-
<div>
79-
<Select
80-
className="min-w-36"
81-
options={WEBHOOK_VERSION_OPTIONS}
82-
value={{
83-
value: formMethods.watch("version"),
84-
label: getWebhookVersionLabel(formMethods.watch("version")),
85-
}}
86-
onChange={(option) => {
87-
if (option) {
88-
formMethods.setValue("version", option.value, { shouldDirty: true });
89-
}
90-
}}
91-
/>
92-
</div>
93-
</Tooltip>
79+
<div className="flex items-center gap-2">
80+
<Tooltip content={t("webhook_version")}>
81+
<div>
82+
<Select
83+
className="min-w-36"
84+
options={WEBHOOK_VERSION_OPTIONS}
85+
value={{
86+
value: formMethods.watch("version"),
87+
label: getWebhookVersionLabel(formMethods.watch("version")),
88+
}}
89+
onChange={(option) => {
90+
if (option) {
91+
formMethods.setValue("version", option.value, { shouldDirty: true });
92+
}
93+
}}
94+
/>
95+
</div>
96+
</Tooltip>
97+
<Tooltip
98+
content={t("webhook_version_docs", {
99+
version: getWebhookVersionLabel(formMethods.watch("version")),
100+
})}>
101+
<Link
102+
href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
103+
target="_blank"
104+
className="text-subtle hover:text-emphasis flex items-center">
105+
<Icon name="external-link" className="h-4 w-4" />
106+
</Link>
107+
</Tooltip>
108+
</div>
94109
}>
95110
{children}
96111
</SettingsHeaderWithBackButton>

‎packages/features/webhooks/pages/webhook-new-view.tsx‎

Lines changed: 33 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
11
"use client";
22

33
import { useSession } from "next-auth/react";
4+
import Link from "next/link";
45
import { useRouter } from "next/navigation";
56

67
import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton";
78
import { APP_NAME } from "@calcom/lib/constants";
89
import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
910
import { useLocale } from "@calcom/lib/hooks/useLocale";
10-
import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel } from "../lib/constants";
11+
import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants";
1112
import { trpc } from "@calcom/trpc/react";
1213
import type { RouterOutputs } from "@calcom/trpc/react";
1314
import { Select } from "@calcom/ui/components/form";
15+
import { Icon } from "@calcom/ui/components/icon";
1416
import { showToast } from "@calcom/ui/components/toast";
1517
import { Tooltip } from "@calcom/ui/components/tooltip";
1618
import { revalidateWebhooksList } from "@calcom/web/app/(use-page-wrapper)/settings/(settings-layout)/developer/webhooks/(with-loader)/actions";
@@ -90,23 +92,36 @@ export const NewWebhookView = ({ webhooks, installedApps }: Props) => {
9092
description={t("add_webhook_description", { appName: APP_NAME })}
9193
borderInShellHeader={true}
9294
CTA={
93-
<Tooltip content={t("webhook_version")}>
94-
<div>
95-
<Select
96-
className="min-w-36"
97-
options={WEBHOOK_VERSION_OPTIONS}
98-
value={{
99-
value: formMethods.watch("version"),
100-
label: getWebhookVersionLabel(formMethods.watch("version")),
101-
}}
102-
onChange={(option) => {
103-
if (option) {
104-
formMethods.setValue("version", option.value, { shouldDirty: true });
105-
}
106-
}}
107-
/>
108-
</div>
109-
</Tooltip>
95+
<div className="flex items-center gap-2">
96+
<Tooltip content={t("webhook_version")}>
97+
<div>
98+
<Select
99+
className="min-w-36"
100+
options={WEBHOOK_VERSION_OPTIONS}
101+
value={{
102+
value: formMethods.watch("version"),
103+
label: getWebhookVersionLabel(formMethods.watch("version")),
104+
}}
105+
onChange={(option) => {
106+
if (option) {
107+
formMethods.setValue("version", option.value, { shouldDirty: true });
108+
}
109+
}}
110+
/>
111+
</div>
112+
</Tooltip>
113+
<Tooltip
114+
content={t("webhook_version_docs", {
115+
version: getWebhookVersionLabel(formMethods.watch("version")),
116+
})}>
117+
<Link
118+
href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
119+
target="_blank"
120+
className="text-subtle hover:text-emphasis flex items-center">
121+
<Icon name="external-link" className="h-4 w-4" />
122+
</Link>
123+
</Tooltip>
124+
</div>
110125
}>
111126
{children}
112127
</SettingsHeaderWithBackButton>

0 commit comments

Comments
 (0)