HubSpot Master Forms (#5483)

* capture user landing source

* master form IDs

* convert hook to component

* gated layout api changes

* consolidate forms

* prettier

* rename component

* deprecate HubSpotEmbed for the new HubSpotForm

* migrate talk to a developer page from info.sg

* consolidate contact pages into one layout

* prettier

* cleanup and fix broken links on old pages

* merge conflict fixes for new API changes

* prettier

* populate hidden form fields

* simplify import/export

* convert ChiliPiper hook to prop

* cleanup and documentation

* merge conflict follow up fixes

* deprecate form legal

* Update HubSpot syntax on Vulnerabilities gated page (#5507)

* add guide and pdf

* update guide copy

* add Title to PDF

* Update src/pages/guides/how-google-fixes-vulnerabilities.tsx

Co-authored-by: Brett Hayes <[email protected]>

Co-authored-by: Brett Hayes <[email protected]>

* docs

* lowercase

* async load scripts

* deprecate request-demo and redirect to demo

* master form for hackathons and sub-processors

* master form name change

* optimizations and UTM param fix for #5488

* prettier

* deprecate talk to a dev

* inline message with generic response

* updates for meta and form submission messages

- meta added to terms sub pages
- custom form submission messages to HubSpotForms
- GatedResourceLayout updated to allow for a custom form submission message
- HubSpotForm form submission messages fall back with a generic message if none is provided
- window.open removed from guides pages for more preferred UX best practice
- added tailwind whitespace utility class placeholder and restricted title prop to be a string only, for our GatedResourceLayout

* title

* title style for SEO improvement

* prettier/merge conflict fix

* bug fix to prevent dupe ChiliPiper scheduler

* rm code change contact page and redirect to /demo

* pathname for form submission source and bug fix

* prettier

* use landing source as fallback if no sgSourceUrl

* use href for more accuracy and insight

* prettier

Co-authored-by: Tim Zielonko <[email protected]>

content/terms/archives/privacy/2021-01-15.md

@@ -1,6 +1,6 @@
 ---
 layout: markdown
-title: Sourcegraph Privacy Policy (Archived)
+title: Privacy Policy (Archived)
 ---
 
 Last modified: January 15, 2021

content/terms/archives/subprocessors/2021-12-03.md

@@ -1,6 +1,6 @@
 ---
 layout: markdown
-title: Sourcegraph Subprocessors (Archived)
+title: Subprocessors (Archived)
 description: This page lists the subsprocessors that Sourcegraph may use
 ---
 
@@ -34,5 +34,4 @@ Sourcegraph engages Sub-processors to perform the functions described in the tab
 
 Complete this form to be notified of changes to our sub-processors.
 
-<EmbeddedHubSpot portalId='2762526' formId='08e6c442-0e7c-4892-a262-76dae55ab497' targetId='#sign-up-form' />
-<div id="sign-up-form"></div>
+<HubSpotForm masterFormName="contactMulti" inlineMessage="Thank you for your interest in Sourcegraph. You will be notified of any changes to our sub-processors." />

content/terms/index.md

@@ -1,6 +1,6 @@
 ---
 layout: markdown
-title: Sourcegraph Terms of Service
+title: Terms of Service
 ---
 
 Thank you for using Sourcegraph! Select the appropriate Terms of Service below.

content/terms/privacy.md

@@ -1,6 +1,6 @@
 ---
 layout: markdown
-title: Sourcegraph Privacy Policy
+title: Privacy Policy
 ---
 
 Last modified: March 28, 2022

content/terms/security.md

@@ -99,5 +99,4 @@ Sourcegraph is an OSS product licensed under Apache 2.0. We also make great use
 
 ## Security Updates
 
-<EmbeddedHubSpot portalId='2762526' formId='0ff99031-7caf-433a-8aef-8c9345948288' targetId='#security-updates-form' />
-<div id="security-updates-form"></div>
+<HubSpotForm formId='0ff99031-7caf-433a-8aef-8c9345948288' inlineMessage="Thank you for your interest in Sourcegraph. You will be notified of any changes to our security updates." />

content/terms/subprocessors.md

@@ -1,6 +1,6 @@
 ---
 layout: markdown
-title: Sourcegraph Subprocessors
+title: Subprocessors
 description: This page lists the subsprocessors that Sourcegraph may use
 ---
 
@@ -37,5 +37,4 @@ Sourcegraph engages Sub-processors to perform the functions described in the tab
 
 Complete this form to be notified of changes to our sub-processors.
 
-<EmbeddedHubSpot portalId='2762526' formId='08e6c442-0e7c-4892-a262-76dae55ab497' targetId='#sign-up-form' />
-<div id="sign-up-form"></div>
+<HubSpotForm masterFormName="contactMulti" inlineMessage="Thank you for your interest in Sourcegraph. You will be notified of any changes to our sub-processors." />

netlify.toml

@@ -127,6 +127,18 @@
   from = "/contact/sales"
   to = "/demo"
 
+[[redirects]]
+  from = "/contact/product-specialist"
+  to = "/demo"
+
+[[redirects]]
+  from = "/contact/request-demo"
+  to = "/demo"
+
+[[redirects]]
+  from = "/contact/request-code-change-management-demo"
+  to = "/demo"
+
 [[redirects]]
   from = "/customers"
   to = "/use-cases"
@@ -139,10 +151,6 @@
   from = "/cloud-beta"
   to = "/"
 
-[[redirects]]
-  from = "/contact/product-specialist"
-  to = "/demo"
-
 [[redirects]]
   from = "/use-cases/vulnerabilities"
   to = "/use-cases/code-security"

src/components/Blog/PostLayout.tsx

@@ -3,13 +3,13 @@ import { FunctionComponent } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import Link from 'next/link'
 
-import { Alert, Blockquote, EmbeddedHubSpot, Figure, TableWrapper, Video, YouTube, TrySourcegraph } from '@components'
+import { Alert, Blockquote, HubSpotForm, Figure, TableWrapper, Video, YouTube, TrySourcegraph } from '@components'
 import { buttonStyle, buttonLocation } from '@data'
 import { PostComponentProps } from '@interfaces/posts'
 import { formatDate } from '@util'
 
 type PostComponents = import('mdx/types').MDXComponents
-const components = { Alert, Blockquote, EmbeddedHubSpot, Figure, TableWrapper, Video, YouTube }
+const components = { Alert, Blockquote, HubSpotForm, Figure, TableWrapper, Video, YouTube }
 
 /**
  * This component is used to render all types of posts:

src/components/GatedResourceLayout.tsx

@@ -3,9 +3,9 @@ import { FunctionComponent, ReactNode } from 'react'
 import classNames from 'classnames'
 import { useRouter } from 'next/router'
 
-import { ContentSection } from '@components'
+import { ContentSection, HubSpotForm } from '@components'
 import { breakpoints } from '@data'
-import { useWindowWidth, useHubSpot, HubSpotForm } from '@hooks'
+import { useWindowWidth } from '@hooks'
 
 interface Customer {
     name: string
@@ -19,22 +19,19 @@ interface Speaker {
     bio: string
 }
 
-interface Form {
-    formId: string
-    onFormSubmitted?: () => void
-}
-
 interface Props {
-    customer?: Customer
-    title: ReactNode | string
+    title: string
     subtitle?: string
+    customer?: Customer
     description?: ReactNode
     formLabel?: string
-    form: Form
+    onFormSubmitted?: () => void
+    inlineMessage?: string
     learnMoreCTA?: ReactNode
     videoSrc?: string
     speakers?: Speaker[]
     children?: ReactNode
+    resource?: string
 }
 
 export const GatedResourceLayout: FunctionComponent<Props> = ({
@@ -43,11 +40,13 @@ export const GatedResourceLayout: FunctionComponent<Props> = ({
     customer,
     description,
     formLabel,
-    form,
+    onFormSubmitted,
+    inlineMessage,
     learnMoreCTA,
     videoSrc,
     speakers,
     children,
+    resource,
 }) => {
     const router = useRouter()
     const { pathname, query } = router
@@ -59,21 +58,6 @@ export const GatedResourceLayout: FunctionComponent<Props> = ({
     const isGuidePg = pathname.split('/').slice(1)[0] === 'guides'
     const hasWatchNowQuery = Object.keys(query).includes('watch-now')
 
-    const hubSpotConfig: HubSpotForm | null = {
-        portalId: '2762526',
-        formId: form.formId,
-        targetId: 'form',
-        formInstanceId: form?.formId,
-    }
-    if (hasWatchNowQuery) {
-        // Exit HS Hook when HS-Form not needed
-        hubSpotConfig.formId = ''
-    }
-    if (form.onFormSubmitted) {
-        hubSpotConfig.onFormSubmitted = form.onFormSubmitted
-    }
-    useHubSpot(hubSpotConfig)
-
     const heroImage = (): string => {
         if (isWebinarPg) {
             // Webinars
@@ -127,7 +111,7 @@ export const GatedResourceLayout: FunctionComponent<Props> = ({
                     )}
 
                     <div className={classNames('col-12', customer && 'col-lg-8')}>
-                        <h1 className="display-2 font-weight-bold mb-4 mb-md-2">{title}</h1>
+                        <h1 className="display-2 font-weight-bold mb-4 mb-md-2 whitespace-pre-line">{title}</h1>
                         {subtitle && <h3 className="font-weight-normal max-w-800">{subtitle}</h3>}
                     </div>
                 </div>
@@ -158,7 +142,17 @@ export const GatedResourceLayout: FunctionComponent<Props> = ({
                         <div className="col-md-6 col-12 pb-md-0 pb-6">
                             <h2 className="font-weight-bold">{formLabel}</h2>
                             <div className="border-saturn border border-3 shadow-sm py-4 px-4 mt-3 px-0">
-                                <div id="form" />
+                                {!hasWatchNowQuery && (
+                                    <HubSpotForm
+                                        masterFormName="gatedMulti"
+                                        onFormSubmitted={onFormSubmitted}
+                                        inlineMessage={
+                                            inlineMessage ||
+                                            (resource &&
+                                                `Enjoy your copy of <a href="${resource}" target="_blank" rel="noopener noreferrer">${title}</a>`)
+                                        }
+                                    />
+                                )}
                             </div>
                         </div>
                     </ContentSection>