feat: added a support section component with tessen tracking

newrelic · Oct 14, 2021 · 8b0c076 · 8b0c076
1 parent 35ea6dd
commit 8b0c076
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 34 deletions.
diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
@@ -10,7 +10,7 @@ import {
   NR1_GUIDED_INSTALL_NERDLET,
   NR1_PACK_DETAILS_NERDLET,
   UTM_PARAMETERS,
-  NR1_SIGNUP_URL,
+  SIGNUP_LINK,
 } from '../data/constants';
 import { quickstart } from '../types';
 import Cookies from 'js-cookie';
@@ -52,7 +52,7 @@ const createInstallLink = (
     ? getGuidedInstallStackedNr1Url(nerdletId)
     : getPackNr1Url(id, nerdletId);
 
-  const installUrl = new URL(hasUtmParameters ? NR1_SIGNUP_URL : platformUrl);
+  const installUrl = new URL(hasUtmParameters ? SIGNUP_LINK : platformUrl);
   if (parameters) {
     parameters.forEach((value, key) => {
       installUrl.searchParams.set(key, value);

diff --git a/src/components/quickstarts/SupportSection.js b/src/components/quickstarts/SupportSection.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { useTessen, Link } from '@newrelic/gatsby-theme-newrelic';
+import {
+  SUPPORT_LINK,
+  COMMUNITY_LINK,
+  QUICKSTART_SUPPORT_LEVELS,
+} from '../../data/constants';
+
+const SupportSection = ({ supportLevel }) => {
+  const tessen = useTessen();
+  const whatsIncluded = <strong>What's included</strong>;
+  const supportLink = (
+    <Link
+      to={SUPPORT_LINK}
+      key={QUICKSTART_SUPPORT_LEVELS.NEWRELIC}
+      onClick={() =>
+        tessen.track('instantObservability', 'QuickstartDetailsSupportClick')
+      }
+    >
+      Visit our Support Center
+    </Link>
+  );
+
+  const communityLink = (
+    <Link
+      to={COMMUNITY_LINK}
+      key={QUICKSTART_SUPPORT_LEVELS.NEWRELIC}
+      onClick={() =>
+        tessen.track('instantObservability', 'QuickstartDetailsCommunityClick')
+      }
+    >
+      the Explorers Hub
+    </Link>
+  );
+
+  const QUICKSTART_SUPPORT_CONTENT = {
+    [QUICKSTART_SUPPORT_LEVELS.NEWRELIC]: {
+      title: 'Built by New Relic',
+      content: [
+        'Need help? ',
+        supportLink,
+        ' or check out our community forum, ',
+        communityLink,
+        '.',
+      ],
+    },
+    [QUICKSTART_SUPPORT_LEVELS.VERIFIED]: {
+      title: 'Verified by New Relic',
+      content: [
+        "Need help? Find the author's support resources under ",
+        whatsIncluded,
+        '. Or check out our community forum, ',
+        communityLink,
+        '.',
+      ],
+    },
+    [QUICKSTART_SUPPORT_LEVELS.COMMUNITY]: {
+      title: 'Built by the community',
+      content: [
+        'Need help? Visit our community forum, ',
+        communityLink,
+        ' to find an answer or post a question.',
+      ],
+    },
+  };
+
+  return (
+    <>
+      <h5
+        css={css`
+          text-transform: uppercase;
+        `}
+      >
+        {QUICKSTART_SUPPORT_CONTENT[`${supportLevel}`].title}
+      </h5>
+      <p>{QUICKSTART_SUPPORT_CONTENT[`${supportLevel}`].content}</p>
+    </>
+  );
+};
+
+SupportSection.propTypes = {
+  supportLevel: PropTypes.string.isRequired,
+};
+
+export default SupportSection;
diff --git a/src/data/constants.js b/src/data/constants.js
@@ -11,10 +11,6 @@ export const SPLIT_TRACKING_EVENTS = {
 export const SDK_BASE_URL =
   'https://d1zobbh8kytrtv.cloudfront.net/platform/doc-app';
 
-export const NR1_LOGIN_URL = 'https://login.newrelic.com/login';
-
-export const NR1_SIGNUP_URL = 'https://newrelic.com/signup';
-
 export const NR1_PACK_DETAILS_NERDLET =
   'catalog-pack-details.catalog-pack-contents';
 
@@ -29,21 +25,8 @@ export const QUICKSTART_SUPPORT_LEVELS = {
   COMMUNITY: 'COMMUNITY',
 };
 
-export const QUICKSTART_SUPPORT_CONTENT = {
-  [QUICKSTART_SUPPORT_LEVELS.NEWRELIC]: {
-    title: 'Built by New Relic',
-    content: `Need help? [Visit our Support Center](https://support.newrelic.com) or check out our community forum, [the Explorers Hub](https://discuss.newrelic.com).`,
-  },
-  [QUICKSTART_SUPPORT_LEVELS.VERIFIED]: {
-    title: 'Verified by New Relic',
-    content: `Need help? Find the author's support resources under **What's included**. Or check out our community forum, the [Explorers Hub](https://discuss.newrelic.com/).
-    `,
-  },
-  [QUICKSTART_SUPPORT_LEVELS.COMMUNITY]: {
-    title: 'Built by the community',
-    content: `Need help? Visit our community forum, [the Explorers Hub](https://discuss.newrelic.com) to find an answer or post a question.`,
-  },
-};
+export const SUPPORT_LINK = 'https://support.newrelic.com';
+export const COMMUNITY_LINK = 'https://discuss.newrelic.com';
 
 export const QUICKSTART_ALERT_TYPES = {
   BASELINE: 'BASELINE',

diff --git a/src/templates/QuickstartDetails.js b/src/templates/QuickstartDetails.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import PageLayout from '../components/PageLayout';
 import Tabs from '../components/Tabs';
 import EmptyTab from '../components/quickstarts/EmptyTab';
+import SupportSection from '../components/quickstarts/SupportSection';
 import QuickstartAlerts from '../components/quickstarts/QuickstartAlerts';
 import QuickstartDashboards from '../components/quickstarts/QuickstartDashboards';
 import {
@@ -23,7 +24,6 @@ import Breadcrumbs from '../components/Breadcrumbs';
 import { quickstart } from '../types';
 import {
   QUICKSTARTS_REPO,
-  QUICKSTART_SUPPORT_CONTENT,
   SIGNUP_LINK,
   LOGIN_LINK,
   SHIELD_LEVELS,
@@ -301,18 +301,7 @@ const QuickstartDetails = ({ data, location }) => {
             </PageTools.Section>
             <PageTools.Section>
               <PageTools.Title>Support</PageTools.Title>
-              <h5
-                css={css`
-                  text-transform: uppercase;
-                `}
-              >
-                {QUICKSTART_SUPPORT_CONTENT[`${quickstart.level}`].title}
-              </h5>
-              <p>
-                <Markdown>
-                  {QUICKSTART_SUPPORT_CONTENT[`${quickstart.level}`].content}
-                </Markdown>
-              </p>
+              <SupportSection supportLevel={quickstart.level} />
             </PageTools.Section>
           </Layout.PageTools>
         </PageLayout>