diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 9792b7968d16b..be3b29593a048 100644 --- a/www/gatsby-config.js +++ b/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`, + }, + }, ], } \ No newline at end of file diff --git a/www/package.json b/www/package.json index 9c41cfd51fd61..595b23e1d79a9 100644 --- a/www/package.json +++ b/www/package.json @@ -5,7 +5,6 @@ "author": "Kyle Mathews ", "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" diff --git a/www/src/components/email-capture-form.js b/www/src/components/email-capture-form.js index c0962b1d8343b..fdc0d2e1d13f0 100644 --- a/www/src/components/email-capture-form.js +++ b/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, + }) ) }