ref(sandbox): Demo Header Update & fix email localstorage

static/app/components/demo/demoHeader.tsx

@@ -9,21 +9,18 @@ import PreferencesStore from 'app/stores/preferencesStore';
 import {useLegacyStore} from 'app/stores/useLegacyStore';
 import space from 'app/styles/space';
 import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
-import {emailQueryParameter, extraQueryParameter} from 'app/utils/demoMode';
+import {
+  extraQueryParameter,
+  extraQueryParameterWithEmail,
+  urlAttachQueryParams,
+} from 'app/utils/demoMode';
 import getCookie from 'app/utils/getCookie';
 
 export default function DemoHeader() {
   // if the user came from a SaaS org, we should send them back to upgrade when they leave the sandbox
   const saasOrgSlug = getCookie('saas_org_slug');
 
-  const queryParameter = emailQueryParameter();
-  const getStartedExtraParameter = extraQueryParameter(true);
-  const extraParameter = extraQueryParameter(false);
-
-  const getStartedText = saasOrgSlug ? t('Upgrade Now') : t('Sign Up for Free');
-  const getStartedUrl = saasOrgSlug
-    ? `https://sentry.io/settings/${saasOrgSlug}/billing/checkout/`
-    : `https://sentry.io/signup/${queryParameter}${getStartedExtraParameter}`;
+  const extraSearchParams = extraQueryParameter();
 
   const collapsed = !!useLegacyStore(PreferencesStore).collapsed;
 
@@ -35,7 +32,8 @@ export default function DemoHeader() {
           onClick={() =>
             trackAdvancedAnalyticsEvent('growth.demo_click_docs', {organization: null})
           }
-          href={`https://docs.sentry.io/${extraParameter}`}
+          href={urlAttachQueryParams('https://docs.sentry.io/', extraSearchParams)}
+          openInNewTab
         >
           {t('Documentation')}
         </StyledExternalLink>
@@ -46,20 +44,34 @@ export default function DemoHeader() {
               organization: null,
             })
           }
-          href={`https://sentry.io/_/demo/${extraParameter}`}
+          href={urlAttachQueryParams('https://sentry.io/_/demo/', extraSearchParams)}
+          target="_blank"
+          rel="noreferrer noopener"
         >
           {t('Request a Demo')}
         </BaseButton>
         <GetStarted
-          onClick={() =>
+          onClick={() => {
+            const url = saasOrgSlug
+              ? `https://sentry.io/settings/${saasOrgSlug}/billing/checkout/`
+              : urlAttachQueryParams(
+                  'https://sentry.io/signup/',
+                  extraQueryParameterWithEmail()
+                );
+
+            // Using window.open instead of href={} because we need to read `email`
+            // from localStorage when the user clicks the button.
+            window.open(url, '_blank');
+
             trackAdvancedAnalyticsEvent('growth.demo_click_get_started', {
               is_upgrade: !!saasOrgSlug,
               organization: null,
-            })
-          }
-          href={getStartedUrl}
+            });
+          }}
+          target="_blank"
+          rel="noreferrer noopener"
         >
-          {getStartedText}
+          {saasOrgSlug ? t('Upgrade Now') : t('Sign Up for Free')}
         </GetStarted>
       </ButtonBar>
     </Wrapper>

static/app/components/modals/demoSignUp.tsx

@@ -8,14 +8,15 @@ import HighlightModalContainer from 'app/components/highlightModalContainer';
 import {t} from 'app/locale';
 import space from 'app/styles/space';
 import trackAdvancedAnalyticsEvent from 'app/utils/analytics/trackAdvancedAnalyticsEvent';
-import {emailQueryParameter, extraQueryParameter} from 'app/utils/demoMode';
+import {extraQueryParameterWithEmail, urlAttachQueryParams} from 'app/utils/demoMode';
 
 type Props = ModalRenderProps;
 
 const DemoSignUpModal = ({closeModal}: Props) => {
-  const queryParameter = emailQueryParameter();
-  const getStartedExtraParameter = extraQueryParameter(true);
-  const signupUrl = `https://sentry.io/signup/${queryParameter}${getStartedExtraParameter}`;
+  const signupUrl = urlAttachQueryParams(
+    'https://sentry.io/signup/',
+    extraQueryParameterWithEmail()
+  );
 
   return (
     <HighlightModalContainer>

static/app/utils/demoMode.tsx

@@ -1,24 +1,25 @@
 import getCookie from 'app/utils/getCookie';
 
-// return email query parameter
-export function emailQueryParameter(): string {
-  const email = localStorage.getItem('email');
-  const queryParameter = email ? `?email=${email}` : '';
-  return queryParameter;
+export function extraQueryParameter(): URLSearchParams {
+  // cookies that have = sign are quotes so extra quotes need to be removed
+  const extraQueryString = getCookie('extra_query_string')?.replaceAll('"', '') || '';
+  const extraQuery = new URLSearchParams(extraQueryString);
+  return extraQuery;
 }
 
-// return extra query depending, depending on if used in getStartedUrl
-export function extraQueryParameter(getStarted: boolean): string {
+export function extraQueryParameterWithEmail(): URLSearchParams {
+  const params = extraQueryParameter();
   const email = localStorage.getItem('email');
-  const extraQueryString = getCookie('extra_query_string');
-  // cookies that have = sign are quotes so extra quotes need to be removed
-  const extraQuery = extraQueryString ? extraQueryString.replaceAll('"', '') : '';
+  if (email) {
+    params.append('email', email);
+  }
+  return params;
+}
 
-  if (getStarted) {
-    const emailSeparator = email ? '&' : '?';
-    const getStartedSeparator = extraQueryString ? emailSeparator : '';
-    return getStartedSeparator + extraQuery;
+export function urlAttachQueryParams(url: string, params: URLSearchParams): string {
+  const queryString = params.toString();
+  if (queryString) {
+    return url + '?' + queryString;
   }
-  const extraSeparator = extraQueryString ? `?` : '';
-  return extraSeparator + extraQuery;
+  return url;
 }