Refactors email signup form to use gatsby-plugin-mailchimp

www/gatsby-config.js

@@ -168,5 +168,11 @@ module.exports = {
       },
     },
     `gatsby-plugin-netlify`,
+    {
+      resolve: `gatsby-plugin-mailchimp`,
+      options: {
+          endpoint: `https://gatsbyjs.us17.list-manage.com/subscribe/post-json?u=1dc33f19eb115f7ebe4afe5ee&id=f366064ba7`,
+      },
+    },
   ],
 }

www/package.json

@@ -5,7 +5,6 @@
   "author": "Kyle Mathews <[email protected]>",
   "dependencies": {
     "bluebird": "^3.5.1",
-    "email-validator": "1.1.1",
     "gatsby": "^1.9.246",
     "gatsby-image": "^1.0.43",
     "gatsby-link": "^1.6.40",
@@ -15,6 +14,7 @@
     "gatsby-plugin-glamor": "^1.6.13",
     "gatsby-plugin-google-analytics": "^1.0.28",
     "gatsby-plugin-lodash": "^1.0.11",
+    "gatsby-plugin-mailchimp": "^1.1.1",
     "gatsby-plugin-manifest": "^1.0.19",
     "gatsby-plugin-netlify": "^1.0.19",
     "gatsby-plugin-nprogress": "^1.0.14",
@@ -41,7 +41,6 @@
     "graphql-request": "^1.5.1",
     "gray-percentage": "^2.0.0",
     "hex2rgba": "^0.0.1",
-    "jsonp": "^0.2.1",
     "limax": "^1.5.0",
     "lodash": "^4.17.5",
     "mitt": "^1.1.3",
@@ -53,8 +52,7 @@
     "typeface-space-mono": "^0.0.54",
     "typeface-spectral": "^0.0.54",
     "typography-breakpoint-constants": "^0.15.10",
-    "typography-plugin-code": "^0.16.11",
-    "validator": "^9.4.1"
+    "typography-plugin-code": "^0.16.11"
   },
   "keywords": [
     "gatsby"

www/src/components/email-capture-form.js

@@ -1,10 +1,9 @@
 import React from "react"
 import { rhythm, options } from "../utils/typography"
 import presets, { colors } from "../utils/presets"
-import jsonp from "jsonp"
-import { validate } from "email-validator"
 import { css } from "glamor"
 import hex2rgba from "hex2rgba"
+import addToMailchimp from 'gatsby-plugin-mailchimp'
 
 let stripeAnimation = css.keyframes({
   "0%": { backgroundPosition: `0 0` },
@@ -28,12 +27,6 @@ const formInputDefaultStyles = {
   },
 }
 
-// Mailchimp endpoint
-// From: https://us17.admin.mailchimp.com/lists/integration/embeddedcode?id=XXXXXX
-// Where `XXXXXX` is the MC list ID
-// Note: we change `/post` to `/post-json`
-const MAILCHIMP_URL = `https://gatsbyjs.us17.list-manage.com/subscribe/post-json?u=1dc33f19eb115f7ebe4afe5ee&id=f366064ba7`
-
 class EmailCaptureForm extends React.Component {
   constructor() {
     super()
@@ -47,64 +40,46 @@ class EmailCaptureForm extends React.Component {
     this.setState({ email: e.target.value })
   }
 
-  // Using jsonp, post to MC server & handle its response
-  _postEmailToMailchimp = url => {
-    // jsonp lib takes an `endpoint`, {options}, & callback
-    jsonp(url, { param: `c` }, (err, data) => {
-      // network failures, timeouts, etc
-      if (err) {
-        this.setState({
-          status: `error`,
-          msg: err,
-        })
-
-        // Mailchimp errors & failures
-      } else if (data.result !== `success`) {
+  // Post to MC server & handle its response
+  _postEmailToMailchimp = (email, attributes) => {
+    addToMailchimp(email, attributes)
+    .then(result => {
+      // Mailchimp always returns a 200 response
+      // So we check the result for MC errors & failures
+      if (result.result !== `success`) {
         this.setState({
           status: `error`,
-          msg: data.msg,
+          msg: result.msg,
         })
-
-        // Posted email successfully to Mailchimp
       } else {
+        // Email address succesfully subcribed to Mailchimp
         this.setState({
           status: `success`,
-          msg: data.msg,
+          msg: result.msg,
         })
       }
     })
+    .catch(err => {
+      // Network failures, timeouts, etc
+      this.setState({
+        status: `error`,
+        msg: err,
+      })
+    })
   }
 
-  // On form submit, validate email
-  // then jsonp to Mailchimp, and update state
   _handleFormSubmit = e => {
     e.preventDefault()
     e.stopPropagation()
 
-    // If email is not valid, break early
-    if (!validate(this.state.email)) {
-      this.setState({
-        status: `error`,
-        msg: `"${this.state.email}" is not a valid email address`,
-      })
-      return
-    }
-
-    // Construct the url for our jsonp request
-    // Query params must be in CAPS
-    // Capture pathname for better email targeting
-    const url = `${MAILCHIMP_URL}
-      &EMAIL=${encodeURIComponent(this.state.email)}
-      &PATHNAME=${window.location.pathname}
-    `
-
-    this.setState(
-      {
-        msg: null,
+    this.setState({
         status: `sending`,
+        msg: null,
       },
-      // jsonp request as setState callback
-      this._postEmailToMailchimp(url)
+      // setState callback (subscribe email to MC)
+      this._postEmailToMailchimp(this.state.email, {
+        pathname: document.location.pathname,
+      })
     )
   }