diff --git a/static/app/components/demo/demoHeader.tsx b/static/app/components/demo/demoHeader.tsx
index 0bdd12d8a0b6c4..206ebff96873c5 100644
--- a/static/app/components/demo/demoHeader.tsx
+++ b/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')}
@@ -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')}
+ 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')}
diff --git a/static/app/components/modals/demoSignUp.tsx b/static/app/components/modals/demoSignUp.tsx
index 4e49b5335197ff..8147131c0280f0 100644
--- a/static/app/components/modals/demoSignUp.tsx
+++ b/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 (
diff --git a/static/app/utils/demoMode.tsx b/static/app/utils/demoMode.tsx
index ba050e0850351b..fa5ede71605e34 100644
--- a/static/app/utils/demoMode.tsx
+++ b/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;
}