From 0b7f51410a708b671e0baaa00823425e76a05d3c Mon Sep 17 00:00:00 2001 From: Syed Ali Shahbaz <52925846+alishaz-polymath@users.noreply.github.com> Date: Mon, 22 Dec 2025 14:22:41 +0400 Subject: [PATCH] chore: Add webhook version documentation link to webapp (#26121) * init * further improvement --- apps/web/public/static/locales/en/common.json | 1 + .../webhooks/components/WebhookListItem.tsx | 13 ++++- packages/features/webhooks/lib/constants.ts | 15 ++++++ .../webhooks/pages/webhook-edit-view.tsx | 51 ++++++++++++------- .../webhooks/pages/webhook-new-view.tsx | 51 ++++++++++++------- 5 files changed, 94 insertions(+), 37 deletions(-) diff --git a/apps/web/public/static/locales/en/common.json b/apps/web/public/static/locales/en/common.json index db5d653ab2..d3a9eb8238 100644 --- a/apps/web/public/static/locales/en/common.json +++ b/apps/web/public/static/locales/en/common.json @@ -3838,6 +3838,7 @@ "webhook_attendee_timezone": "Timezone of the first attendee", "webhook_attendee_locale": "Locale of the first attendee", "webhook_version": "Webhook Version", + "webhook_version_docs": "View payload documentation for version {{version}}", "webhook_team_name": "Name of the team booked", "webhook_team_members": "Members of the team booked", "webhook_video_call_url": "Video call URL for the meeting", diff --git a/packages/features/webhooks/components/WebhookListItem.tsx b/packages/features/webhooks/components/WebhookListItem.tsx index 87fa89fe57..554e514445 100644 --- a/packages/features/webhooks/components/WebhookListItem.tsx +++ b/packages/features/webhooks/components/WebhookListItem.tsx @@ -1,9 +1,11 @@ "use client"; +import Link from "next/link"; + import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { Webhook } from "../lib/dto/types"; -import { getWebhookVersionLabel } from "../lib/constants"; +import { getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants"; import { trpc } from "@calcom/trpc/react"; import classNames from "@calcom/ui/classNames"; import { Badge } from "@calcom/ui/components/badge"; @@ -17,6 +19,7 @@ import { DropdownMenuTrigger, } from "@calcom/ui/components/dropdown"; import { Switch } from "@calcom/ui/components/form"; +import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; @@ -93,6 +96,14 @@ export default function WebhookListItem(props: { + + + + +
diff --git a/packages/features/webhooks/lib/constants.ts b/packages/features/webhooks/lib/constants.ts index ec3339c80c..3b003aab66 100644 --- a/packages/features/webhooks/lib/constants.ts +++ b/packages/features/webhooks/lib/constants.ts @@ -28,6 +28,21 @@ export const WEBHOOK_VERSION_OPTIONS = Object.values(WebhookVersion).map((versio export const getWebhookVersionLabel = (version: WebhookVersion): string => WEBHOOK_VERSION_LABELS[version] ?? version; +/** + * Documentation URLs for each webhook version. + * Links to the specific version's payload documentation. + */ +export const WEBHOOK_VERSION_DOCS: Record = { + [WebhookVersion.V_2021_10_20]: "https://cal.com/docs/developing/guides/automation/webhooks#2021-10-20", + // Add new versions here: [WebhookVersion.V_YYYY_MM_DD]: "https://cal.com/docs/webhooks/v-yyyy-mm-dd", +}; + +/** + * Get documentation URL for a specific webhook version + */ +export const getWebhookVersionDocsUrl = (version: WebhookVersion): string => + WEBHOOK_VERSION_DOCS[version] ?? "https://cal.com/docs/developing/guides/automation/webhooks"; + export const WEBHOOK_TRIGGER_EVENTS_GROUPED_BY_APP = { core: [ WebhookTriggerEvents.BOOKING_CANCELLED, diff --git a/packages/features/webhooks/pages/webhook-edit-view.tsx b/packages/features/webhooks/pages/webhook-edit-view.tsx index 0b54c48756..e73b118a0d 100644 --- a/packages/features/webhooks/pages/webhook-edit-view.tsx +++ b/packages/features/webhooks/pages/webhook-edit-view.tsx @@ -1,5 +1,6 @@ "use client"; +import Link from "next/link"; import { useRouter } from "next/navigation"; import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton"; @@ -8,9 +9,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale"; import type { WebhookTriggerEvents } from "@calcom/prisma/enums"; import type { WebhookVersion } from "../lib/interface/IWebhookRepository"; -import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel } from "../lib/constants"; +import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants"; import { trpc } from "@calcom/trpc/react"; import { Select } from "@calcom/ui/components/form"; +import { Icon } from "@calcom/ui/components/icon"; import { SkeletonContainer } from "@calcom/ui/components/skeleton"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; @@ -74,23 +76,36 @@ export function EditWebhookView({ webhook }: { webhook?: WebhookProps }) { description={t("add_webhook_description", { appName: APP_NAME })} borderInShellHeader={true} CTA={ - -
- { + if (option) { + formMethods.setValue("version", option.value, { shouldDirty: true }); + } + }} + /> +
+ + + + + + +
}> {children} diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx index 663d35d872..9141d311fa 100644 --- a/packages/features/webhooks/pages/webhook-new-view.tsx +++ b/packages/features/webhooks/pages/webhook-new-view.tsx @@ -1,16 +1,18 @@ "use client"; import { useSession } from "next-auth/react"; +import Link from "next/link"; import { useRouter } from "next/navigation"; import SettingsHeaderWithBackButton from "@calcom/features/settings/appDir/SettingsHeaderWithBackButton"; import { APP_NAME } from "@calcom/lib/constants"; import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams"; import { useLocale } from "@calcom/lib/hooks/useLocale"; -import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel } from "../lib/constants"; +import { WEBHOOK_VERSION_OPTIONS, getWebhookVersionLabel, getWebhookVersionDocsUrl } from "../lib/constants"; import { trpc } from "@calcom/trpc/react"; import type { RouterOutputs } from "@calcom/trpc/react"; import { Select } from "@calcom/ui/components/form"; +import { Icon } from "@calcom/ui/components/icon"; import { showToast } from "@calcom/ui/components/toast"; import { Tooltip } from "@calcom/ui/components/tooltip"; 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) => { description={t("add_webhook_description", { appName: APP_NAME })} borderInShellHeader={true} CTA={ - -
- { + if (option) { + formMethods.setValue("version", option.value, { shouldDirty: true }); + } + }} + /> +
+ + + + + + + }> {children}