WIP on contact form. Need help.

Mandrill should be called server side.

package.json

@@ -92,6 +92,7 @@
     "koa-router": "^5.4.0",
     "lodash": "^4.3.0",
     "lodash.flatmap": "^4.2.0",
+    "mandrill-api": "^1.0.45",
     "marked": "^0.3.6",
     "react": "^15.2.0",
     "react-addons-css-transition-group": "^15.3.2",

server/app.js

@@ -28,8 +28,12 @@ export default class App extends KoaApp {
   }
 
   start() {
+    if (process.env.MAILCHIMP_API_KEY === undefined) {
+      throw new Error(`Can't load MAILCHIMP_API_KEY from environment.`);
+    }
     const port = process.env.LISTEN_PORT ? Number(process.env.LISTEN_PORT) : 4045;
 
+
     this.listen(port);
     console.info(`Listening on port ${port}`);
   }

src/pages/custom/custom.jsx

@@ -2,14 +2,53 @@
 
 import React, { Component } from 'react';
 import type { HTMLElement } from 'types';
+import { autobind } from 'core-decorators';
 
 import styles from './custom.css';
 import { Form, FormField } from 'ui/forms';
 import { TextInput } from 'ui/inputs';
 import Button from 'ui/buttons';
+import mandrill from 'mandrill-api/mandrill';
 
+type State = {
+  mandrill_client: any
+}
 
 class Custom extends Component { 
+  state: Props;
+
+  //const mandrill_client = 
+  componentWillMount() {
+    console.log("Our Key:" + process.env.MAILCHIMP_API_KEY);
+    this.setState({
+      mandrill_client: new mandrill.Mandrill(process.env.MAILCHIMP_API_KEY)
+    });
+  }
+
+  @autobind
+  sendCustomEmail() {
+    let message = {
+      "html": "<h2>TopDrawer Custom Sock Request</h2><p>The details are below.</p>",
+      "text": "Top Drawer Custom Sock Request.  The details are below.",
+      "from_email": "[email protected]",
+      "to": "[email protected]"
+    }
+
+    let async = false;
+    let ip_pool = "Main Pool";
+    let send_at = "example send_at";
+
+    console.log("WE ARE SENDING!");
+    this.state.mandrill_client.messages.send({
+      "message": message, 
+      "async": async
+    }, function(result) {
+      console.log(result);
+    }, function(e) {
+      console.log('A mandrill error occured:' + e.name + ' - ' + e.message);
+    })
+  }
+
   get topBanner(): HTMLElement {
     return (
       <div styleName="custom-banner">
@@ -70,7 +109,7 @@ class Custom extends Component {
               />
             </FormField>
             <div styleName="submit-container">
-              <Button styleName="custom-contact-submit" type="submit">SUBMIT</Button>
+              <Button styleName="custom-contact-submit" type="submit" onClick={this.sendCustomEmail}>SUBMIT</Button>
             </div>
           </Form>
         </div>