From 19803854e2378f570de18776baad330082672f93 Mon Sep 17 00:00:00 2001
From: Malachi Willey <malwilley@gmail.com>
Date: Thu, 27 Feb 2025 13:32:23 -0800
Subject: [PATCH] feat(nav): Open zendesk when clicking 'contact support'

---
 static/app/components/nav/primary/help.tsx | 44 +++++++++++++++++++---
 static/app/utils/zendesk.tsx               | 14 +++++++
 static/gsApp/components/zendeskLink.tsx    |  5 ++-
 3 files changed, 56 insertions(+), 7 deletions(-)
 create mode 100644 static/app/utils/zendesk.tsx

diff --git a/static/app/components/nav/primary/help.tsx b/static/app/components/nav/primary/help.tsx
index 0086abf2862b77..c867a01d005908 100644
--- a/static/app/components/nav/primary/help.tsx
+++ b/static/app/components/nav/primary/help.tsx
@@ -1,15 +1,53 @@
 import {openHelpSearchModal} from 'sentry/actionCreators/modal';
+import type {MenuItemProps} from 'sentry/components/dropdownMenu';
 import {SidebarMenu} from 'sentry/components/nav/primary/components';
 import {IconQuestion} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import ConfigStore from 'sentry/stores/configStore';
+import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import useMutateUserOptions from 'sentry/utils/useMutateUserOptions';
 import useOrganization from 'sentry/utils/useOrganization';
+import {activateZendesk, zendeskIsLoaded} from 'sentry/utils/zendesk';
+
+import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
+
+function getContactSupportItem({
+  organization,
+}: {
+  organization: Organization;
+}): MenuItemProps | null {
+  const supportEmail = ConfigStore.get('supportEmail');
+
+  if (!supportEmail) {
+    return null;
+  }
+
+  if (zendeskIsLoaded()) {
+    return {
+      key: 'support',
+      label: t('Contact Support'),
+      onAction() {
+        activateZendesk();
+        trackGetsentryAnalytics('zendesk_link.clicked', {
+          organization,
+          source: 'sidebar',
+        });
+      },
+    };
+  }
+
+  return {
+    key: 'support',
+    label: t('Contact Support'),
+    externalHref: `mailto:${supportEmail}`,
+  };
+}
 
 export function PrimaryNavigationHelp() {
   const organization = useOrganization();
   const {mutate: mutateUserOptions} = useMutateUserOptions();
+  const contactSupportItem = getContactSupportItem({organization});
 
   return (
     <SidebarMenu
@@ -41,11 +79,7 @@ export function PrimaryNavigationHelp() {
           key: 'help',
           label: t('Get Help'),
           children: [
-            {
-              key: 'support',
-              label: t('Contact Support'),
-              externalHref: `mailto:${ConfigStore.get('supportEmail')}`,
-            },
+            ...(contactSupportItem ? [contactSupportItem] : []),
             {
               key: 'github',
               label: t('Sentry on GitHub'),
diff --git a/static/app/utils/zendesk.tsx b/static/app/utils/zendesk.tsx
new file mode 100644
index 00000000000000..77d1e20b332b93
--- /dev/null
+++ b/static/app/utils/zendesk.tsx
@@ -0,0 +1,14 @@
+/**
+ * Activates the Zendesk widget.
+ *
+ * Zendesk script is only loaded in SaaS. This will operate as a noop otherwise.
+ */
+export function activateZendesk() {
+  if (zendeskIsLoaded()) {
+    window.zE.activate({hideOnClose: true});
+  }
+}
+
+export function zendeskIsLoaded() {
+  return window.zE && typeof window.zE.activate === 'function';
+}
diff --git a/static/gsApp/components/zendeskLink.tsx b/static/gsApp/components/zendeskLink.tsx
index a29417ab7a545e..46846fb23e1f78 100644
--- a/static/gsApp/components/zendeskLink.tsx
+++ b/static/gsApp/components/zendeskLink.tsx
@@ -2,6 +2,7 @@ import {Component} from 'react';
 
 import type {Organization} from 'sentry/types/organization';
 import withOrganization from 'sentry/utils/withOrganization';
+import {activateZendesk, zendeskIsLoaded} from 'sentry/utils/zendesk';
 
 import trackGetsentryAnalytics from 'getsentry/utils/trackGetsentryAnalytics';
 
@@ -30,9 +31,9 @@ class ZendeskLink extends Component<Props> {
   activateSupportWidget = (e: React.MouseEvent) => {
     const {organization, source} = this.props;
 
-    if (window.zE && typeof window.zE.activate === 'function') {
+    if (zendeskIsLoaded()) {
       e.preventDefault();
-      window.zE.activate({hideOnClose: true});
+      activateZendesk();
     }
 
     trackGetsentryAnalytics('zendesk_link.clicked', {organization, source});