Update HubSpot hook and embedded component (#38)

* Move script out of layout for terms pages and update embedded hubspot component

* Prettier

* Remove scripts from Layout and update contact pages

src/components/HubSpot.tsx

@@ -9,15 +9,18 @@ interface EmbeddedHubSpotProps {
     [index: string]: string
 }
 
-const EmbeddedHubSpot: FunctionComponent<EmbeddedHubSpotProps> = ({ portalId, formId, targetId, region }) => (
+export const EmbeddedHubSpot: FunctionComponent<EmbeddedHubSpotProps> = ({ portalId, formId, targetId, region }) => (
     <Script id={targetId}>{`
-        window.hbspt.forms.create({
-            portalId: '${portalId}',
-            formId: '${formId}',
-            target: '${targetId}',
-            region: '${region ?? ''}',
+        const script = document.createElement('script')
+        script.src = '//js.hsforms.net/forms/v2.js'
+        document.head.append(script)
+        script.addEventListener('load', () => {
+            window.hbspt.forms.create({
+                portalId: '${portalId}',
+                formId: '${formId}',
+                target: '${targetId}',
+                region: '${region ?? ''}',
+            })
         })
     `}</Script>
 )
-
-export default EmbeddedHubSpot

src/components/Layout/index.tsx

@@ -6,11 +6,6 @@ import React, { FunctionComponent, ReactNode, ReactFragment } from 'react'
 import Footer from './Footer'
 import Header from './Header'
 
-interface LayoutScript {
-    src: string
-    strategy?: 'afterInteractive' | 'lazyOnload' | 'beforeInteractive' | undefined
-}
-
 interface LayoutProps {
     meta?: {
         title?: string
@@ -29,8 +24,6 @@ interface LayoutProps {
     className?: string
     hideFooter?: boolean
     hideGetStartedButton?: boolean
-
-    scripts?: LayoutScript[]
 }
 
 export const Layout: FunctionComponent<LayoutProps> = props => {
@@ -88,9 +81,6 @@ export const Layout: FunctionComponent<LayoutProps> = props => {
             <section className="d-flex flex-column fill-height">{props.children}</section>
 
             {!props.hideFooter && <Footer minimal={props.minimal} />}
-            {props.scripts?.map(script => (
-                <Script key={script.src} src={script.src} strategy={script.strategy} />
-            ))}
         </div>
     )
 }

src/components/index.ts

@@ -6,6 +6,7 @@ export { Jumbotron } from './Jumbotron'
 export { RequestDemoForm } from './RequestDemoForm'
 export { TrySourcegraph } from './TrySourcegraph'
 export { Install } from './Install'
+export { EmbeddedHubSpot } from './HubSpot'
 
 // Actions
 export {

src/hooks/hubSpot.ts

@@ -68,34 +68,58 @@ function createHubSpotForm({ portalId, formId, targetId, onFormSubmit, onFormRea
         .reduce((key, string) => Object.assign(key, { [string.split('=')[0].trim()]: string.split('=')[1] }), {})
     const anonymousId = getAllCookies.sourcegraphAnonymousUid
     const firstSourceURL = getAllCookies.sourcegraphSourceUrl
-    ;(window as Window).hbspt?.forms.create({
-        portalId,
-        formId,
-        target: `#${targetId}`,
-        onFormSubmit,
-        onFormReady: (form: HubSpotForm) => {
-            if (form) {
-                // We want to populate hidden fields in the form with values stored in cookies when the form loads.
-                const anonymousIdInput = form[0].querySelector('input[name="anonymous_user_id"]') as HTMLInputElement
-                if (anonymousIdInput && anonymousIdInput.value === '') {
-                    // Populate the hidden anonymous_user_id form field with the value from the sourcegraphAnonymousUid cookie.
-                    anonymousIdInput.value = anonymousId || ''
-                }
+    const script = document.querySelector('script[src="//js.hsforms.net/forms/v2.js"')
+    script?.addEventListener('load', () => {
+        ;(window as Window).hbspt?.forms.create({
+            portalId,
+            formId,
+            target: `#${targetId}`,
+            onFormSubmit,
+            onFormReady: (form: HubSpotForm) => {
+                if (form) {
+                    // We want to populate hidden fields in the form with values stored in cookies when the form loads.
+                    const anonymousIdInput = form[0].querySelector(
+                        'input[name="anonymous_user_id"]'
+                    ) as HTMLInputElement
+                    if (anonymousIdInput && anonymousIdInput.value === '') {
+                        // Populate the hidden anonymous_user_id form field with the value from the sourcegraphAnonymousUid cookie.
+                        anonymousIdInput.value = anonymousId || ''
+                    }
 
-                const firstSourceURLInput = form[0].querySelector('input[name="first_source_url"]') as HTMLInputElement
-                const emailInput = form[0].querySelector('input[name="email"]') as HTMLInputElement
-                if (firstSourceURLInput && firstSourceURLInput.value === '' && emailInput && emailInput.value === '') {
-                    // Populate the hidden first_source_url form field with the value from the sourcegraphSourceUrl cookie.
-                    firstSourceURLInput.value = firstSourceURL || ''
+                    const firstSourceURLInput = form[0].querySelector(
+                        'input[name="first_source_url"]'
+                    ) as HTMLInputElement
+                    const emailInput = form[0].querySelector('input[name="email"]') as HTMLInputElement
+                    if (
+                        firstSourceURLInput &&
+                        firstSourceURLInput.value === '' &&
+                        emailInput &&
+                        emailInput.value === ''
+                    ) {
+                        // Populate the hidden first_source_url form field with the value from the sourcegraphSourceUrl cookie.
+                        firstSourceURLInput.value = firstSourceURL || ''
+                    }
                 }
-            }
-            if (onFormReady) {
-                onFormReady(form[0])
-            }
-        },
+                if (onFormReady) {
+                    onFormReady(form[0])
+                }
+            },
+        })
     })
 }
 
+const loadHubSpotScript = (): void => {
+    const script = document.createElement('script')
+    script.src = '//js.hsforms.net/forms/v2.js'
+    document.head.append(script)
+}
+
+const loadChiliPiperScript = (): void => {
+    const script = document.createElement('script')
+    script.src = '//js.chilipiper.com/marketing.js'
+    document.head.append(script)
+}
+
 export const useHubSpot = (
     initialPortalId: string,
     initialFormId: string,
@@ -108,6 +132,7 @@ export const useHubSpot = (
     const [chiliPiper, setChiliPiper] = useState<boolean>(initialChiliPiper)
 
     useEffect(() => {
+        loadHubSpotScript()
         createHubSpotForm({
             portalId,
             formId,
@@ -116,6 +141,7 @@ export const useHubSpot = (
 
         if (chiliPiper) {
             // Chili Piper script
+            loadChiliPiperScript()
             const cpTenantDomain = 'sourcegraph'
             const cpRouterName = 'contact-sales'
             window.addEventListener('message', event => {

src/pages/404/404.module.scss

@@ -15,7 +15,7 @@
 .icon {
     height: 8rem;
     width: 8rem;
-    
+
     svg {
         height: 8rem;
         width: 8rem;

src/pages/404/index.tsx

@@ -13,7 +13,7 @@ const Custom404: React.FunctionComponent = () => (
                     <SignDirectionIcon />
                 </div>
             </div>
-            
+
             <h1>404: Not Found</h1>
             <p>Sorry, the requested URL was not found.</p>
         </div>

src/pages/contact/product-specialist.tsx

@@ -17,10 +17,6 @@ const Contact: FunctionComponent = () => {
                 title,
                 description,
             }}
-            scripts={[
-                { src: 'https://js.chilipiper.com/marketing.js' },
-                { src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' },
-            ]}
         >
             <div className="form-page bg-white text-dark">
                 <div className="container-xl pt-5 px-5">

src/pages/contact/request-batch-changes-demo.tsx

@@ -17,10 +17,6 @@ const Contact: FunctionComponent = () => {
                 title,
                 description,
             }}
-            scripts={[
-                { src: 'https://js.chilipiper.com/marketing.js' },
-                { src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' },
-            ]}
         >
             <div className="form-page bg-white text-dark">
                 <div className="container-xl pt-5 px-5">

src/pages/contact/request-code-change-management-demo.tsx

@@ -17,7 +17,6 @@ const Contact: FunctionComponent = () => {
                 title,
                 description,
             }}
-            scripts={[{ src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' }]}
         >
             <div className="bg-white text-dark">
                 <div className="container-lg py-6 px-5">

src/pages/contact/request-demo.tsx

@@ -17,7 +17,6 @@ const Contact: FunctionComponent = () => {
                 title,
                 description,
             }}
-            scripts={[{ src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' }]}
         >
             <div className="form-page bg-white text-dark">
                 <div className="container-xl pt-5 px-5">

src/pages/contact/request-info.tsx

@@ -15,10 +15,6 @@ const Contact: FunctionComponent = () => {
             meta={{
                 description,
             }}
-            scripts={[
-                { src: 'https://js.chilipiper.com/marketing.js' },
-                { src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' },
-            ]}
         >
             <div className="form-page bg-white text-dark">
                 <div className="container-xl pt-5 px-5">

src/pages/contact/request-trial.tsx

@@ -13,7 +13,6 @@ const Contact: FunctionComponent = () => {
             meta={{
                 description: 'Get your team started with a free trial of Sourcegraph.',
             }}
-            scripts={[{ src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' }]}
         >
             <div className="form-page bg-white text-dark">
                 <div className="container-xl pt-5 px-5">

src/pages/terms/[...slug].tsx

@@ -2,15 +2,12 @@ import path from 'path'
 
 import { GetStaticProps, GetStaticPaths, NextPage } from 'next'
 import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
-import dynamic from 'next/dynamic'
 
-import { Layout } from '@components'
+import { Layout, EmbeddedHubSpot } from '@components'
 import { getMarkdownPages, loadMarkdownFile, serializeMdxSource } from '@lib'
 
 export type Components = import('mdx/types').MDXComponents
 
-const EmbeddedHubSpot = dynamic(() => import('../../components/HubSpot'), { ssr: false })
-
 export interface PageProps {
     page?: Page
     content?: MDXRemoteSerializeResult
@@ -39,7 +36,7 @@ const CONTENT_PARENT_DIRECTORY = './content/terms'
 const components = { EmbeddedHubSpot }
 
 const TermPage: NextPage<PageProps> = ({ page, content }) => (
-    <Layout scripts={[{ src: '//js.hsforms.net/forms/v2.js', strategy: 'beforeInteractive' }]}>
+    <Layout>
         <section className="content-page__title">{page && <h1>{page.frontMatter.title}</h1>}</section>
         <section className="content-page__body">
             {content && <MDXRemote {...content} components={components as Components} />}

src/pages/use-cases/index.tsx

@@ -37,9 +37,7 @@ const UseCases: React.FunctionComponent = () => (
                     </div>
 
                     <div className="col-lg-5 mt-lg-6 pt-4 mb-6">
-                        <h2 className={`${styles.seeHow} font-weight-normal`}>
-                            See how customers use Sourcegraph to
-                        </h2>
+                        <h2 className={`${styles.seeHow} font-weight-normal`}>See how customers use Sourcegraph to</h2>
 
                         <div className="list-group">
                             {features.map((feature: string) => (
@@ -75,9 +73,7 @@ const UseCases: React.FunctionComponent = () => (
                             <li>Reduce time to recovery with a single search</li>
                             <li>
                                 Automate fixing, merging, and deploying changes with{' '}
-                                <Link href="/batch-changes/">
-                                    Batch Changes
-                                </Link>
+                                <Link href="/batch-changes/">Batch Changes</Link>
                             </li>
                             <li>Alert for known vulnerabilities and risky code changes with code monitoring</li>
                         </ul>
@@ -97,7 +93,10 @@ const UseCases: React.FunctionComponent = () => (
                             </p>
                             <footer className="blockquote-footer">David Haynes, Security Engineer at Cloudflare</footer>
                             <div className="d-flex justify-content-center my-4">
-                                <Link href="/case-studies/cloudflare-accelerates-debugging-and-improves-security" passHref={true}>
+                                <Link
+                                    href="/case-studies/cloudflare-accelerates-debugging-and-improves-security"
+                                    passHref={true}
+                                >
                                     <a href="#none" className="btn">
                                         <img
                                             src="/external-logos/cloudflare-color-logo.svg"

src/pages/use-cases/useCases.module.scss

@@ -2,7 +2,7 @@
     background: url('/customers-page-bg.svg') no-repeat;
     background-size: cover;
 }
- 
+
 .seeHow {
     font-size: 1.25rem;
 }