feat(billing): Use Intercom for ask Support links

static/gsApp/components/gsBanner.tsx

@@ -1,4 +1,4 @@
-import React, {Component, Fragment} from 'react';
+import React, {Component, Fragment, useEffect} from 'react';
 import {ThemeProvider, useTheme} from '@emotion/react';
 import * as Sentry from '@sentry/react';
 import Cookies from 'js-cookie';
@@ -25,6 +25,7 @@ import {ConfigStore} from 'sentry/stores/configStore';
 import {GuideStore} from 'sentry/stores/guideStore';
 import {DataCategory} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
+import {showIntercom} from 'sentry/utils/intercom';
 import {isActiveSuperuser} from 'sentry/utils/isActiveSuperuser';
 import {promptIsDismissed} from 'sentry/utils/promptIsDismissed';
 import {useInvertedTheme} from 'sentry/utils/theme/useInvertedTheme';
@@ -96,10 +97,43 @@ function objectFromBilledCategories(callback: (c: BilledDataCategoryInfo) => any
 const ALERTS_OFF = objectFromBilledCategories(() => false);
 
 type SuspensionModalProps = ModalRenderProps & {
+  organization: Organization;
   subscription: Subscription;
 };
 
-function SuspensionModal({Header, Body, Footer, subscription}: SuspensionModalProps) {
+function SuspensionModal({
+  Header,
+  Body,
+  Footer,
+  organization,
+  subscription,
+}: SuspensionModalProps) {
+  const hasIntercom = organization.features.includes('intercom-support');
+
+  useEffect(() => {
+    if (hasIntercom) {
+      trackGetsentryAnalytics('intercom_link.viewed', {
+        organization,
+        source: 'account-suspension',
+      });
+    }
+  }, [hasIntercom, organization]);
+
+  async function handleIntercomClick() {
+    trackGetsentryAnalytics('intercom_link.clicked', {
+      organization,
+      source: 'account-suspension',
+    });
+    try {
+      await showIntercom(organization.slug);
+    } catch {
+      const supportEmail = ConfigStore.get('supportEmail');
+      if (supportEmail) {
+        window.location.href = `mailto:${supportEmail}?subject=${window.encodeURIComponent('Account Suspension')}`;
+      }
+    }
+  }
+
   return (
     <Fragment>
       <Header>{'Action Required'}</Header>
@@ -120,13 +154,17 @@ function SuspensionModal({Header, Body, Footer, subscription}: SuspensionModalPr
         </p>
       </Body>
       <Footer>
-        <ZendeskLink
-          subject="Account Suspension"
-          Component={props => <LinkButton {...props} href={props.href ?? ''} />}
-          source="account-suspension"
-        >
-          {t('Contact Support')}
-        </ZendeskLink>
+        {hasIntercom ? (
+          <Button onClick={handleIntercomClick}>{t('Contact Support')}</Button>
+        ) : (
+          <ZendeskLink
+            subject="Account Suspension"
+            Component={props => <LinkButton {...props} href={props.href ?? ''} />}
+            source="account-suspension"
+          >
+            {t('Contact Support')}
+          </ZendeskLink>
+        )}
       </Footer>
     </Fragment>
   );
@@ -482,13 +520,19 @@ class GSBanner extends Component<Props, State> {
   }
 
   tryTriggerSuspendedModal() {
-    const {subscription} = this.props;
+    const {organization, subscription} = this.props;
 
     if (!subscription.isSuspended) {
       return;
     }
 
-    openModal(props => <SuspensionModal {...props} subscription={subscription} />);
+    openModal(props => (
+      <SuspensionModal
+        {...props}
+        organization={organization}
+        subscription={subscription}
+      />
+    ));
   }
 
   tryTriggerNoticeModal() {

static/gsApp/views/amCheckout/index.tsx

@@ -777,7 +777,7 @@ function AMCheckout(props: Props) {
                           // Fall back to mailto
                           const supportEmail = ConfigStore.get('supportEmail');
                           if (supportEmail) {
-                            window.location.href = `mailto:${supportEmail}`;
+                            window.location.href = `mailto:${supportEmail}?subject=${window.encodeURIComponent('Billing Question')}`;
                           }
                         }
                       }}

static/gsApp/views/subscriptionPage/planMigrationActive/index.tsx

@@ -1,15 +1,21 @@
+import {useEffect} from 'react';
 import styled from '@emotion/styled';
 import moment from 'moment-timezone';
 
+import {Button} from '@sentry/scraps/button';
 import {ExternalLink} from '@sentry/scraps/link';
 
 import {Panel} from 'sentry/components/panels/panel';
 import {IconBusiness} from 'sentry/icons';
 import {t, tct} from 'sentry/locale';
+import {ConfigStore} from 'sentry/stores/configStore';
+import {showIntercom} from 'sentry/utils/intercom';
+import {useOrganization} from 'sentry/utils/useOrganization';
 
 import ZendeskLink from 'getsentry/components/zendeskLink';
 import {ANNUAL} from 'getsentry/constants';
 import {CohortId, type PlanMigration, type Subscription} from 'getsentry/types';
+import {trackGetsentryAnalytics} from 'getsentry/utils/trackGetsentryAnalytics';
 import {PanelBodyWithTable} from 'getsentry/views/subscriptionPage/styles';
 
 import {PlanMigrationTable} from './planMigrationTable';
@@ -39,10 +45,46 @@ function getMigrationDate(migration: PlanMigration, subscription: Subscription)
 }
 
 export function PlanMigrationActive({subscription, migration}: Props) {
+  const organization = useOrganization();
+  const hasIntercom = organization.features.includes('intercom-support');
+  const shouldRender = Boolean(migration?.cohort?.nextPlan);
+
+  useEffect(() => {
+    if (shouldRender && hasIntercom) {
+      trackGetsentryAnalytics('intercom_link.viewed', {
+        organization,
+        source: 'billing',
+      });
+    }
+  }, [shouldRender, hasIntercom, organization]);
+
   if (!migration?.cohort?.nextPlan) {
     return null;
   }
 
+  async function handleIntercomClick() {
+    trackGetsentryAnalytics('intercom_link.clicked', {
+      organization,
+      source: 'billing',
+    });
+    try {
+      await showIntercom(organization.slug);
+    } catch {
+      const supportEmail = ConfigStore.get('supportEmail');
+      if (supportEmail) {
+        window.location.href = `mailto:${supportEmail}?subject=${window.encodeURIComponent('Legacy Plan Migration Question')}`;
+      }
+    }
+  }
+
+  const supportLink = hasIntercom ? (
+    <Button size="zero" variant="link" onClick={handleIntercomClick}>
+      {null}
+    </Button>
+  ) : (
+    <ZendeskLink subject="Legacy Plan Migration Question" source="billing" />
+  );
+
   const isAM3Migration = migration.cohort.cohortId >= CohortId.EIGHTH;
 
   return (
@@ -90,17 +132,12 @@ export function PlanMigrationActive({subscription, migration}: Props) {
 
           <MoreInfo>
             {tct(
-              'For more details please see our [faqLink:FAQ] or contact [zendeskLink:Support].',
+              'For more details please see our [faqLink:FAQ] or contact [supportLink:Support].',
               {
                 faqLink: (
                   <ExternalLink href="https://www.sentry.help/en/articles/13964853-how-is-my-legacy-plan-changing-september-12-2024" />
                 ),
-                zendeskLink: (
-                  <ZendeskLink
-                    subject="Legacy Plan Migration Question"
-                    source="billing"
-                  />
-                ),
+                supportLink,
               }
             )}
           </MoreInfo>

static/gsApp/views/subscriptionPage/trial/trialEnded.tsx

@@ -1,23 +1,67 @@
+import {useEffect} from 'react';
+
 import {Alert} from '@sentry/scraps/alert';
+import {Button} from '@sentry/scraps/button';
 
 import {tct} from 'sentry/locale';
+import {ConfigStore} from 'sentry/stores/configStore';
+import {showIntercom} from 'sentry/utils/intercom';
+import {useOrganization} from 'sentry/utils/useOrganization';
 
 import ZendeskLink from 'getsentry/components/zendeskLink';
 import type {Subscription} from 'getsentry/types';
+import {trackGetsentryAnalytics} from 'getsentry/utils/trackGetsentryAnalytics';
 
 type Props = {
   subscription: Subscription;
 };
 
 export function TrialEnded({subscription}: Props) {
+  const organization = useOrganization();
+  const hasIntercom = organization.features.includes('intercom-support');
   const canRequestTrial =
     subscription.canSelfServe && subscription.planDetails?.trialPlan;
+  const shouldRender = !(
+    subscription.isTrial ||
+    subscription.canTrial ||
+    !canRequestTrial
+  );
+
+  useEffect(() => {
+    if (shouldRender && hasIntercom) {
+      trackGetsentryAnalytics('intercom_link.viewed', {
+        organization,
+        source: 'trial',
+      });
+    }
+  }, [shouldRender, hasIntercom, organization]);
 
-  if (subscription.isTrial || subscription.canTrial || !canRequestTrial) {
+  if (!shouldRender) {
     return null;
   }
 
-  const supportLink = <ZendeskLink subject="Request Another Trial" source="trial" />;
+  async function handleIntercomClick() {
+    trackGetsentryAnalytics('intercom_link.clicked', {
+      organization,
+      source: 'trial',
+    });
+    try {
+      await showIntercom(organization.slug);
+    } catch {
+      const supportEmail = ConfigStore.get('supportEmail');
+      if (supportEmail) {
+        window.location.href = `mailto:${supportEmail}?subject=${window.encodeURIComponent('Request Another Trial')}`;
+      }
+    }
+  }
+
+  const supportLink = hasIntercom ? (
+    <Button size="zero" variant="link" onClick={handleIntercomClick}>
+      {null}
+    </Button>
+  ) : (
+    <ZendeskLink subject="Request Another Trial" source="trial" />
+  );
 
   return (
     <Alert variant="info" showIcon={false}>