Set up initial email functionality

Got set up with SendGrid to provide SMTP service for sending actual
emails. Right now it's just sending emails to KeystoneJS admins when
there's a new enquiry.

The emails need styled, and they're set up in an over-complicated
manner. They need to be simplified and given NGC branding. We'll
eventually re-use this for sending emails to users, etc.

Nodemailer's integration with SendGrid is a bit sketchy right now: we're
relying on a dumb fork of the no-longer-officially supported library.

See this issue:
sendgrid/nodemailer-sendgrid-transport#29

The actual SendGrid account is managed through Azure.

.gitignore

@@ -31,3 +31,4 @@ node_modules
 .DS_Store
 
 public/styles/*.css
+nodemailer.config.js

keystone.js

@@ -41,7 +41,7 @@ keystone.set('locals', {
 	editable: keystone.content.editable,
 
 	// Pug options
-	pretty: false,
+	pretty: false
 	/*
 	 * Keep around for reference
 	 * Filters might be useful, but they don't work on dynamic content

models/Enquiry.js

@@ -1,5 +1,9 @@
 var keystone = require('keystone');
+var Email = require('keystone-email')
 var Types = keystone.Field.Types;
+var nodemailerConfig = require('../nodemailer.config.js');
+var path = require('path');
+var util = require('util');
 
 /**
  * Enquiry Model
@@ -37,21 +41,52 @@ Enquiry.schema.post('save', function () {
 
 Enquiry.schema.methods.sendNotificationEmail = function (callback) {
 	if (typeof callback !== 'function') {
-		callback = function () {};
+		callback = function (err, response) {
+			/* Keep for debugging */
+			/*
+			console.log(util.inspect(err, {
+				showHidden: false,
+				depth: null,
+				colors: true
+			}));
+			console.log(util.inspect(response, {
+				depth: null,
+				colors: true
+			}));
+			*/
+		};
 	}
 	var enquiry = this;
 	keystone.list('User').model.find().where('isAdmin', true).exec(function (err, admins) {
 		if (err) return callback(err);
-		new keystone.Email({
-			templateName: 'enquiry-notification',
-		}).send({
+		Email.send('templates/emails/enquiry-notification.pug', {
+			transport: 'nodemailer'
+		}, {
+			// Email locals
+			// TODO: figure out the right way to get these
+			_: require('lodash'),
+			basedir: path.join(__dirname, '../', '/templates/helpers/emails'),
+			logo_src: '/images/logo-email.gif',
+			logo_width: 194,
+			logo_height: 76,
+			theme: {
+				email_bg: '#f9f9f9',
+				link_color: '#2697de',
+				buttons: {
+					color: '#fff',
+					background_color: '#2697de',
+					border_color: '#1a7cb7',
+				},
+			},
+			enquiry: enquiry
+		}, {
 			to: admins,
 			from: {
 				name: 'National Go Center',
 				email: '[email protected]',
 			},
 			subject: 'New Enquiry for National Go Center',
-			enquiry: enquiry,
+			nodemailerConfig: nodemailerConfig
 		}, callback);
 	});
 };

nodemailer.config.example.js

@@ -0,0 +1,12 @@
+/*
+ Rename to nodemailer.config.js and add the api_key, which you can get from Nate Eagle
+ */
+
+var smtpConfig = {
+	transport: 'SendGrid',
+	auth: {
+		api_key: ''
+	},
+};
+
+module.exports = smtpConfig;

package.json

@@ -8,10 +8,13 @@
     "dotenv": "^2.0.0",
     "fast-feed": "^1.5.5",
     "keystone": "^4.0.0-beta.4",
+    "keystone-email": "https://github.com/keystonejs/keystone-email.git",
     "lodash": "^4.13.1",
     "node-sass": "^3.8.0",
     "node-sass-middleware": "^0.9.7",
     "node-supervisor": "^1.0.2",
+    "nodemailer": "^2.7.0",
+    "nodemailer-sendgrid-transport": "https://github.com/starchup/nodemailer-sendgrid-transport",
     "pug": "^2.0.0-beta6",
     "restart": "0.0.4",
     "wgo": "^3.0.0-alpha.1"

templates/emails/enquiry-notification.pug

@@ -1,8 +1,7 @@
 extends /layouts/default
 
 block body-contents
-	h1 Hi *|first_name|*,
-	p.text-larger An enquiry was just submitted to #{brand}:
+	p.text-larger New enquiry from the National Go Center site:
 	if enquiry.name.full || enquiry.email
 		p.text-larger From 
 			if enquiry.name.full
@@ -21,4 +20,4 @@ block body-contents
 		.text-larger !{enquiry.message.html}
 	p.text-muted Sent #{enquiry._.createdAt.format()}
 	p  
-	+button({ url: '/keystone/enquiries/' + enquiry.id, label: 'Open Keystone' })
+		a(href='http://nationalgocenter.org/keystone/enquiries/' + enquiry.id) Open Keystone

templates/helpers/emails/layouts/default.pug

@@ -0,0 +1,41 @@
+include ../mixins/button
+
+doctype strict
+head
+	meta(http-equiv="Content-Type", content="text/html; charset=utf-8")
+	meta(name="viewport" content="width=device-width")
+	include styles/default
+
+body: table.body: tr: td(class="center", align="center", valign="top"): center
+
+	//- HEADER
+	//-table.row.row-header: tr: td(align="center").center: center
+		table.container: tr: td.wrapper.last
+			block header
+				if logo_src || logo
+					table.twelve.columns: tr
+						td(align="center").center: center
+							img(src=logo_src || logo, width=logo_width, height=logo_height).header__logo
+						td.expander
+				else
+					span= brand
+
+	//- BODY
+	table.row.row-body: tr: td(align="center").center: center
+		table.container: tr: td
+			block body
+				table.row: tr: td.wrapper.last
+					table.twelve.columns: tr
+						td.text-pad
+							block body-contents
+						td.expander
+
+	//- FOOTER
+	table.row.row-footer: tr: td(align="center").center: center
+		table.container: tr: td
+			block footer
+				table.row: tr: td.wrapper.last
+					table.twelve.columns: tr
+						td.text-pad
+							block footer-contents
+						td.expander

templates/helpers/emails/layouts/styles/default.pug

@@ -0,0 +1,111 @@
+//- Variables
+//- ------------------------------
+- if (!theme.email_bg) theme.email_bg                     = '#fafafa';
+- if (!theme.body_bg) theme.body_bg                       = '#fff';
+- if (!theme.body_border_color) theme.body_border_color   = '#ccc';
+- if (!theme.link_color) theme.link_color                 = '#08c';
+- if (!theme.link_hover_color) theme.link_hover_color     = '#08c';
+- if (!theme.text_color) theme.text_color                 = '#333';
+- if (!theme.text_muted) theme.text_muted                 = '#999';
+
+
+
+style(type="text/css").
+
+	/* resets */
+	* {
+		box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		-moz-box-sizing: border-box;
+	}
+
+
+
+	/* main */
+	body {
+		background-color: #{theme.email_bg};
+	}
+	body, table.body, h1, h2, h3, h4, h5, h6, p {
+		color: #{theme.text_color};
+	}
+	a {
+		color: #{theme.link_color};
+	}
+	a:hover,
+	a:focus { 
+		color: #{theme.link_hover_color};
+	}
+	a:active { 
+		color: #{theme.link_color};
+	}
+	a:visited { 
+		color: #{theme.link_color};
+	}
+	.text-larger, .text-larger p {font-size: 16px; line-height:22px;}
+
+
+	/* helpers */
+	.text-muted { color: #{theme.text_muted}; }
+	.text-left { text-align: left; }
+	.text-center { text-align: center; }
+	.text-right { text-align: right; }
+
+
+
+	/* header */
+	.row-header {
+		text-align: center;
+	}
+	.header__logo {
+		float: none;
+	}
+
+
+
+	/* body */
+	.row-body .container {
+		background-color: #{theme.body_bg};
+		border-width: 3px 1px 1px;
+		border-style: solid;
+		border-color: #{theme.link_color} #{theme.body_border_color} #{theme.body_border_color};
+	}
+
+
+
+
+	/* footer */
+	.row-footer {}
+
+
+
+	/*
+		COMPONENTS
+		------------------------------
+	*/
+
+
+	/* info table */
+	@media only screen and (min-width: 600px) {
+		.info-table td:first-child {
+			width: 100px;
+		}
+	}
+
+
+
+
+	/*
+		MEDIA QUERIES
+		------------------------------
+	*/
+
+	@media only screen and (max-width: 600px) {
+
+		/* ink seems to have missed this */
+		table,
+		tr,
+		td,
+		tbody {
+			display: block;
+		}
+	}