chore: Add webhook version documentation link to webapp (#26121)

* init

* further improvement

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",

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: {
               </Badge>
             </div>
           </Tooltip>
+          <Tooltip content={t("webhook_version_docs", { version: getWebhookVersionLabel(webhook.version) })}>
+            <Link
+              href={getWebhookVersionDocsUrl(webhook.version)}
+              target="_blank"
+              className="text-subtle hover:text-emphasis ml-1 flex items-center">
+              <Icon name="external-link" className="h-4 w-4" />
+            </Link>
+          </Tooltip>
         </div>
         <Tooltip content={t("triggers_when")}>
           <div className="flex w-4/5 flex-wrap">

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, string> = {
+  [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,

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={
-            <Tooltip content={t("webhook_version")}>
-              <div>
-                <Select
-                  className="min-w-36"
-                  options={WEBHOOK_VERSION_OPTIONS}
-                  value={{
-                    value: formMethods.watch("version"),
-                    label: getWebhookVersionLabel(formMethods.watch("version")),
-                  }}
-                  onChange={(option) => {
-                    if (option) {
-                      formMethods.setValue("version", option.value, { shouldDirty: true });
-                    }
-                  }}
-                />
-              </div>
-            </Tooltip>
+            <div className="flex items-center gap-2">
+              <Tooltip content={t("webhook_version")}>
+                <div>
+                  <Select
+                    className="min-w-36"
+                    options={WEBHOOK_VERSION_OPTIONS}
+                    value={{
+                      value: formMethods.watch("version"),
+                      label: getWebhookVersionLabel(formMethods.watch("version")),
+                    }}
+                    onChange={(option) => {
+                      if (option) {
+                        formMethods.setValue("version", option.value, { shouldDirty: true });
+                      }
+                    }}
+                  />
+                </div>
+              </Tooltip>
+              <Tooltip
+                content={t("webhook_version_docs", {
+                  version: getWebhookVersionLabel(formMethods.watch("version")),
+                })}>
+                <Link
+                  href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
+                  target="_blank"
+                  className="text-subtle hover:text-emphasis flex items-center">
+                  <Icon name="external-link" className="h-4 w-4" />
+                </Link>
+              </Tooltip>
+            </div>
           }>
           {children}
         </SettingsHeaderWithBackButton>

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={
-            <Tooltip content={t("webhook_version")}>
-              <div>
-                <Select
-                  className="min-w-36"
-                  options={WEBHOOK_VERSION_OPTIONS}
-                  value={{
-                    value: formMethods.watch("version"),
-                    label: getWebhookVersionLabel(formMethods.watch("version")),
-                  }}
-                  onChange={(option) => {
-                    if (option) {
-                      formMethods.setValue("version", option.value, { shouldDirty: true });
-                    }
-                  }}
-                />
-              </div>
-            </Tooltip>
+            <div className="flex items-center gap-2">
+              <Tooltip content={t("webhook_version")}>
+                <div>
+                  <Select
+                    className="min-w-36"
+                    options={WEBHOOK_VERSION_OPTIONS}
+                    value={{
+                      value: formMethods.watch("version"),
+                      label: getWebhookVersionLabel(formMethods.watch("version")),
+                    }}
+                    onChange={(option) => {
+                      if (option) {
+                        formMethods.setValue("version", option.value, { shouldDirty: true });
+                      }
+                    }}
+                  />
+                </div>
+              </Tooltip>
+              <Tooltip
+                content={t("webhook_version_docs", {
+                  version: getWebhookVersionLabel(formMethods.watch("version")),
+                })}>
+                <Link
+                  href={getWebhookVersionDocsUrl(formMethods.watch("version"))}
+                  target="_blank"
+                  className="text-subtle hover:text-emphasis flex items-center">
+                  <Icon name="external-link" className="h-4 w-4" />
+                </Link>
+              </Tooltip>
+            </div>
           }>
           {children}
         </SettingsHeaderWithBackButton>