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; }