Merge pull request #48 from pluralsh/klink/newsletter-signup

feat: Use Hubspot API for Newsletter signups

README.md

@@ -1,27 +1,16 @@
-Documentation site for [Plural](https://www.plural.sh/), the open-source, unified, application deployment platform that makes it easy to run open-source software on Kubernetes. Our marketplace has dozens of top tier applications ready to deploy.
+[![Netlify Status](https://api.netlify.com/api/v1/badges/58af7361-4aec-4e82-a963-7b192690851a/deploy-status)](https://app.netlify.com/sites/pluraldocs/deploys)
+
+Marketing site for [Plural](https://www.plural.sh/), the open-source, unified, application deployment platform that makes it easy to run open-source software on Kubernetes. Our marketplace has dozens of top tier applications ready to deploy.
 
 Built with [Next.js](https://nextjs.org/) and [Markdoc](https://markdoc.dev/).
 
 ## Contributing
 
-### Running the docs locally
+### Running the site locally
 
-To run the docs locally, you'll need to have yarn and node as prerequisites. Then run the following commands:
+To run the site locally, you'll need to have yarn and node as prerequisites. Then run the following commands:
 
 ```shell
 yarn # build the environment
-yarn dev # run docs locally
+yarn dev # run site locally
 ```
-
-### Adding a new document
-
-All content can be located under the [pages](/pages) directory. The directory structure directly informs the website URL structure, so consider that when placing your new document.
-
-All of our documents are in standard Markdown (.md) file format. If you are including an image, add it to [public/assets] using the same directory structure as pages.
-
-Finally, make sure to add your new document to the NavData.tsx file located [here](/src/NavData.tsx).
-
-### Updating structure
-
-If you are making any changes to the documentation structure or organization, you'll likely need to set up page redirects. These can be added in [next.config.js](next.config.js). Make sure to 
-look for internal usages throughout all the documents on the site to make sure that there are no broken links.

app/api/newsletter/route.ts

@@ -0,0 +1,128 @@
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { Client } from '@hubspot/api-client'
+import queryString from 'query-string'
+
+import { isValidEmail } from '@src/utils/text'
+
+const hubspotClient = new Client({
+  accessToken: process.env.HUBSPOT_API_SECRET,
+})
+
+async function isCaptchaValid(captchaVal) {
+  const postBody = queryString.stringify({
+    secret: process.env.SITE_RECAPTCHA_SECRET,
+    response: captchaVal,
+  })
+  const headers = new Headers({
+    'Content-Type': 'application/x-www-form-urlencoded',
+  })
+
+  try {
+    const res = await fetch('https://www.google.com/recaptcha/api/siteverify', {
+      method: 'POST',
+      headers,
+      body: postBody,
+    })
+    const response = await res.json()
+
+    return response.success
+  } catch (e) {
+    return false
+  }
+}
+
+async function setEmail(email) {
+  const response = await hubspotClient.apiRequest({
+    method: 'POST',
+    path: '/crm/v3/objects/contacts',
+    body: { properties: { email } },
+  })
+
+  if (!response.ok) {
+    try {
+      const body = (await response.json()) as {
+        category?: string
+        message?: string
+      }
+
+      if (body?.category === 'CONFLICT') {
+        const contactId = body.message?.match(/Existing ID:\s*(?<id>\d+)/)
+          ?.groups?.id
+
+        if (!contactId) {
+          return false
+        }
+        const patchRes = await hubspotClient.apiRequest({
+          method: 'PATCH',
+          path: `/crm/v3/objects/contacts/${contactId}`,
+          body: { properties: { email } },
+        })
+
+        if (patchRes.ok) {
+          return true
+        }
+
+        return false
+      }
+    } catch (e) {
+      return false
+    }
+  }
+
+  return true
+}
+
+const ErrorResponse = (error: {
+  type: 'form' | 'captcha' | 'hubspot'
+  message: string
+}) =>
+  NextResponse.json(
+    {
+      error,
+    },
+    { status: 500 }
+  )
+
+export async function POST(req: NextRequest) {
+  let formData: FormData
+
+  try {
+    formData = await req.formData()
+  } catch (e) {
+    return ErrorResponse({ type: 'form', message: `${e}` })
+  }
+  const email = formData.get('email')
+
+  if (!email || typeof email !== 'string') {
+    return ErrorResponse({
+      type: 'form',
+      message: 'Missing email address',
+    })
+  }
+  if (!isValidEmail(email)) {
+    return ErrorResponse({
+      type: 'form',
+      message: 'Invalid email address',
+    })
+  }
+
+  const validCaptcha = await isCaptchaValid(
+    formData.get('g-recaptcha-response')
+  )
+
+  if (!validCaptcha) {
+    return ErrorResponse({ type: 'captcha', message: 'Invalid captcha' })
+  }
+
+  const success = setEmail(email)
+
+  if (!success) {
+    return ErrorResponse({
+      type: 'hubspot',
+      message: 'Could not create contact',
+    })
+  }
+
+  return NextResponse.json({ success })
+}

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -34,6 +34,7 @@
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
+    "@hubspot/api-client": "9.1.0",
     "@loomhq/loom-embed": "1.5.0",
     "@markdoc/markdoc": "0.3.0",
     "@markdoc/next.js": "0.2.2",
@@ -56,15 +57,16 @@
     "js-yaml": "4.1.0",
     "lodash-es": "4.17.21",
     "memoize-one": "6.0.0",
-    "moment-timezone": "^0.5.43",
+    "moment-timezone": "0.5.43",
     "next": "13.4.12",
     "next-compose-plugins": "2.2.1",
     "next-transpile-modules": "10.0.0",
-    "octokit": "^3.1.0",
+    "octokit": "3.1.0",
     "posthog-js": "1.75.2",
+    "query-string": "8.1.0",
     "raw-loader": "4.0.2",
     "react": "18.2.0",
-    "react-add-to-calendar": "^0.1.5",
+    "react-add-to-calendar": "0.1.5",
     "react-aria": "3.25.0",
     "react-dom": "18.2.0",
     "react-embed": "3.7.0",

src/components/ExternalScripts.tsx

@@ -50,7 +50,7 @@ function HubSpot() {
   return (
     <Script
       type="text/plain" // text/plain prevents loading until Cookiebot determines prefs
-      data-cookieconsent="statistics"
+      data-cookieconsent="marketing"
       strategy="afterInteractive"
       id="hs-script-loader"
       async
@@ -64,7 +64,7 @@ function Clearbit() {
   return (
     <Script
       type="text/plain" // text/plain prevents loading until Cookiebot determines prefs
-      data-cookieconsent="statistics"
+      data-cookieconsent="marketing"
       async
       src="https://tag.clearbitscripts.com/v1/pk_f7a55ef5149a4b9142a485385b8b0c96/tags.js"
       referrerPolicy="strict-origin-when-cross-origin"

src/components/GithubStars.tsx

@@ -3,6 +3,8 @@ import { GitHubLogoIcon } from '@pluralsh/design-system'
 import styled from 'styled-components'
 import useSWR from 'swr'
 
+import { abbrNum } from '@src/utils/abbrNum'
+
 import { ButtonFillTwo } from './PageHeaderButtons'
 
 type GithubRepoData = {
@@ -124,7 +126,7 @@ export default function GithubStars({ account = 'pluralsh', repo = 'plural' }) {
           rel="noreferrer noopener"
           href={`https://github.com/${account}/${repo}/stargazers`}
         >
-          {data?.stargazers_count}
+          {abbrNum(data?.stargazers_count, 1)}
         </a>
       )}
     </GithubLink>

src/components/NewsletterSignupForm.tsx

@@ -52,6 +52,12 @@ export function NewsletterSignupForm() {
       message: `There was a problem subscribing to the newsletter: ${error}`,
     })
   }
+
+  function resetRecaptcha() {
+    recaptchaRef?.current?.reset()
+    setRecaptchaVal('')
+  }
+
   const submitEmail = useCallback<FormEventHandler<HTMLFormElement>>(
     (event) => {
       event.preventDefault()
@@ -79,35 +85,31 @@ export function NewsletterSignupForm() {
       }
       const body = new URLSearchParams(formData as any).toString()
 
-      recaptchaRef?.current?.reset()
-      setRecaptchaVal('')
-
-      if (process.env.NODE_ENV === 'development') {
-        setResponse({
-          type: 'error',
-          message: 'Must be server-deployed to submit form.',
-        })
-
-        return
-      }
-      fetch('/forms/newsletter.html', {
+      fetch('/api/newsletter', {
         method: 'POST',
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
         body,
       })
-        .then((e) => {
-          if (e.ok) {
+        .then((res) => {
+          if (res.ok) {
             setResponse({
               type: 'success',
               message: 'Thank you for subscribing to the newsletter',
             })
             setEmail('')
           } else {
-            setError(e.statusText)
+            res.json().then((resObj) => {
+              if (resObj?.error?.type === 'captcha') {
+                setRecaptchaVal('')
+              }
+              setError(resObj?.error?.message || 'Unknown issue')
+            })
           }
+          resetRecaptcha()
         })
         .catch((error) => {
           setError(error)
+          resetRecaptcha()
         })
     },
     [recaptchaVal]