WIP on contact form. Need help.

package.json

@@ -86,13 +86,15 @@
     "jsonwebtoken": "^5.7.0",
     "koa": "^1.1.2",
     "koa-better-static": "^1.0.5",
+    "koa-bodyparser": "^2.2.0",
     "koa-favicon": "^1.2.0",
     "koa-onerror": "^1.3.1",
     "koa-proxy": "github:foxcomm/koa-proxy",
     "koa-router": "^5.4.0",
     "lodash": "^4.3.0",
     "lodash.flatmap": "^4.2.0",
     "moment": "^2.15.2",
+    "mandrill-api": "^1.0.45",
     "marked": "^0.3.6",
     "react": "^15.2.0",
     "react-addons-css-transition-group": "^15.3.2",

server/app.js

@@ -11,6 +11,8 @@ import verifyJwt from './verify-jwt';
 import onerror from 'koa-onerror';
 import moment from 'moment';
 import chalk from 'chalk';
+import bodyParser from 'koa-bodyparser';
+import mandrillRouter from './routes/mandrill';
 
 function timestamp() {
   return moment().format('D MMM H:mm:ss');
@@ -22,12 +24,18 @@ export default class App extends KoaApp {
     super(...args);
     onerror(this);
 
+    if (process.env.MAILCHIMP_API_KEY === void 0) {
+      throw new Error(`Can't load MAILCHIMP_API_KEY from environment.`);
+    }
+
     this.use(serve('public'))
       .use(favicon('public/images/home/top-drawer-favicon.png'))
       .use(makeApiProxy())
       .use(makeElasticProxy())
+      .use(bodyParser())
       .use(zipcodes.routes())
       .use(zipcodes.allowedMethods())
+      .use(mandrillRouter(process.env.MAILCHIMP_API_KEY))
       .use(verifyJwt)
       .use(loadI18n)
       .use(renderReact);

server/routes/mandrill.js

@@ -0,0 +1,41 @@
+import makeRouter from 'koa-router';
+import { Mandrill } from 'mandrill-api/mandrill';
+
+function *sendMessage(mandrillClient, params) {
+  return new Promise((resolve, reject) => {
+    mandrillClient.messages.send(params, result => {
+      resolve(result);
+      console.log("RESOLVED : " + result);
+    }, error => {
+      const err = new Error(error.message || error);
+      reject(err);
+      console.log("REJECTED :" + error.message);
+    });
+  });
+}
+
+export default function mandrillRouter(apiKey) {
+  const mandrillClient = new Mandrill(apiKey);
+
+  const router = makeRouter()
+    .post('/api/node/mandrill', function*() {
+      const { message } = this.request.body;
+
+      let async = false;
+      let ip_pool = "Main Pool";
+      let send_at = "example send_at";
+
+      console.log("WE ARE SENDING!");
+      yield sendMessage(mandrillClient, {
+        'message': message,
+        'async': async
+      });
+
+      this.body = {};
+    });
+
+  return router.routes();
+}
+
+
+

src/pages/custom/custom.css

@@ -80,7 +80,6 @@
 
   & .text-field {
     width: 100%;
-    display: none;
     padding-bottom: 10px;
 
     & input[type=text] {

src/pages/custom/custom.jsx

@@ -2,14 +2,41 @@
 
 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 { api } from 'lib/api';
 
+type State = {
+  name: string,
+  email: string,
+  message: string,
+}
 
 class Custom extends Component { 
+  state: State = {
+    name: '',
+    email: '',
+    message: '',
+  };
+
+  @autobind
+  sendCustomEmail() {
+    const message = {
+      'html': this.state.message,
+      'from_email': this.state.email,
+      'to': [{
+        email: '[email protected]',
+        name: 'Adil Wali'
+      }]
+    };
+
+    api.post('/node/mandrill', { message });
+  }
+
   get topBanner(): HTMLElement {
     return (
       <div styleName="custom-banner">
@@ -39,6 +66,14 @@ class Custom extends Component {
     );
   }
 
+  @autobind
+  handleFormChange(event) {
+    const { target } = event;
+    this.setState({
+      [target.name]: target.value,
+    });
+  }
+
   get reachOut(): HTMLElement {
     return (
       <div styleName="reach-out">
@@ -53,24 +88,24 @@ class Custom extends Component {
           </p>
         </div>
         <div styleName="custom-contact-form-container">
-          <Form styleName="custom-contact-form">
-            <FormField styleName="text-field">
-              <TextInput required
+          <Form styleName="custom-contact-form" onSubmit={this.sendCustomEmail} onChange={this.handleFormChange}>
+            <FormField styleName="text-field" required>
+              <TextInput
                 name="name" placeholder="FIRST & LAST NAME" 
               />
             </FormField>
-            <FormField styleName="text-field">
-              <TextInput required
+            <FormField styleName="text-field" required>
+              <TextInput
                 name="email" placeholder="EMAIL ADDRESS" 
               />
             </FormField>        
-            <FormField styleName="text-field">
-              <textarea required
+            <FormField styleName="text-field" required>
+              <textarea
                 name="message" placeholder="TELL US ABOUT YOUR CUSTOM SOCK NEEDS!" 
               />
             </FormField>
             <div styleName="submit-container">
-              <a styleName="custom-contact-submit" href="mailto:[email protected]">REACH OUT</a>
+              <Button styleName="custom-contact-submit" type="submit">REACH OUT</Button>              
             </div>
           </Form>
         </div>