api.js

var request = require('superagent');
var AppConstants = require('../constants/AppConstants');
var ServerActionCreators = require('../actions/ServerActionCreators');

var ActionTypes = AppConstants.ActionTypes;

module.exports = {
    customer: {
      create: function(data){

        data.action = ActionTypes.RECIEVE_CREATED_CUSTOMER;

        console.log('API Signup: ' + JSON.stringify(data));

        request
          .post('/api/customers')
          .send(data)
          .set('Accept', 'application/json')
          .type('application/json')
          .end(function(res){
            var results = res.body.data;

            // TODO(royce): Debug only.
            // console.log(res);
            window.res = res;

            if(res.status != 201){
              ServerActionCreators.recieve_error(results);
              return;
            }

            // console.log('calling recieve_created_customer');
            ServerActionCreators.recieve_created_customer(results);
          });
      }
    },

    account: {
      create: function(data){
        data.action = ActionTypes.RECIEVE_CREATED_ACCOUNT
      }
    }
};

/*

data.action = AppConstants.CUSTOMER_SIGNUP;
          request
              .post('/customers/')
              .send(data)
              .set('Accept', 'application/json')
              .end(function(e, r){
                  AppDispatcher.handleViewAction({
                      actionType: r.body.action,
                      data: r.body.data
                  });
              });
        }   

*/

CustomerActionCreators.js

var AppConstants = require('../constants/AppConstants.js');
var AppDispatcher = require('../dispatchers/AppDispatcher.js');
var api = require('../utils/api');

var ActionTypes = AppConstants.ActionTypes;

module.exports = {
  create_customer: function(data){
    api.customer.create(data);
  }
};

CustomerStore.js

var AppDispatcher = require('../dispatchers/AppDispatcher');
var AppConstants = require('../constants/AppConstants');
var merge = require('react/lib/merge');
var EventEmitter = require('events').EventEmitter;
var _ = require('underscore');

// var ActionTypes = AppConstants.ActionTypes;
var CHANGE_EVENT = 'change';

var ActionTypes = AppConstants.ActionTypes;

var _customer = {};

var _error = [];

var CustomerStore = merge(EventEmitter.prototype, {

  init: function(customer){
    // Set _customer here.
    console.log('set customer here');
  },

  get_errors: function(){
    return _error;
  },

  has_errors: function(){
    return !_.isEmpty(_error);
  },

  emitChange: function() {
    this.emit(CHANGE_EVENT);
  },

  /**
   * @param {function} callback
   */
  addChangeListener: function(callback) {
    this.on(CHANGE_EVENT, callback);
  },

  /**
  * @param {function} callback
  */
  removeChangeListener: function(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  },

  
});

CustomerStore.dispatchToken = AppDispatcher.register(function(payload){
  var action = payload.action;
  console.log('CustomerStore: ' + JSON.stringify(action));

  switch(action.type){
    case ActionTypes.CUSTOMER_SIGNUP:
      CustomerStore.emitChange();
      break;
    case ActionTypes.ACCOUNT_CONNECT:
      CustomerStore.emitChange();
      break;

    case ActionTypes.CUSTOMER_UPDATE:
      CustomerStore.emitChange();
      break;

    case ActionTypes.RECIEVE_CREATED_CUSTOMER:
      CustomerStore.init(action.data);
      CustomerStore.emitChange();
      break;

    case ActionTypes.RECIEVE_ERROR:
      _error = action.data.error;
      CustomerStore.emitChange();
      break;
      
    default:
      // do nothing
  }

});

module.exports = CustomerStore;

ServerActionCreator.js

var AppConstants = require('../constants/AppConstants.js');
var AppDispatcher = require('../dispatchers/AppDispatcher.js');


var ActionTypes = AppConstants.ActionTypes;

module.exports = {
  recieve_created_customer: function(data){
    console.log('recieve_created_customer: ' + JSON.stringify(data));
    AppDispatcher.handleServerAction({
        type: ActionTypes.RECIEVE_CREATED_CUSTOMER,
        data: data
    });
  },

  recieve_error: function(data){
    console.log('recieve_error: ' + JSON.stringify(data));

    AppDispatcher.handleServerAction({
        type: ActionTypes.RECIEVE_ERROR,
        data: data
    })
  }
};

Signup.react.js

/** @jsx React.DOM */
var React = require('react');
var CustomerActionCreators = require('../../actions/CustomerActionCreators');
var validator = require('validator');
var Router = require('react-router');
var CustomerStore = require('../../stores/CustomerStore');

var Signup = React.createClass({

  mixins: [ Router.Navigation ],

  getInitialState: function(){
    return {
      errors: ''
    };
  },

  componentWillMount: function() {
    CustomerStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    CustomerStore.removeChangeListener(this._onChange);
  },

  _onChange: function(){

    if(CustomerStore.has_errors()){
      errors = CustomerStore.get_errors();
      this.setState({errors: errors});
    } else {
      this.transitionTo('/connect');
    }

  },

  handleSubmit: function(e){
      e.preventDefault();
      // AppActions.signup({});
      
      var number = this.refs.number.getDOMNode().value.trim(); 
      var cvv = this.refs.cvv.getDOMNode().value.trim(); 
      var exp_date = this.refs.expiration.getDOMNode().value.trim();     
      var exp_month = exp_date.split('/')[0];
      var exp_year = exp_date.split('/')[1];
      var name = this.refs.name.getDOMNode().value.trim();
      var first_name = name.split(" ")[0];
      var last_name = name.split(" ")[1];
      var email = this.refs.email.getDOMNode().value.trim();
      var password = this.refs.password.getDOMNode().value.trim();

      var token = 'atoken';

      data = {user:{} };

      data.user.first_name = first_name;
      data.user.last_name = last_name;
      data.user.email = email;
      data.user.username = email;
      data.user.password = password;
      data.token = token;
      data.plan = 'starter';

      CustomerActionCreators.create_customer(data);
   
  },

  render: function(){
      return (
          <div>
          <header className="account-header">
            <div className="wrap">
              <h1>Let's Get You Rolling</h1>
              <p>We're confident you'll love the product. Every customer gets our 60-day money back guarantee, but we know you won't need it.</p>
            </div>
          </header>

          <section className="account-content">
            <div className="wrap">
            <h4>{this.state.errors}</h4>
              <form onSubmit={this.handleSubmit}>

                <div className="account-input">
                  <div className="text-input sky-label">
                    <label for="account-name">Name</label>
                    <input type="text" ref="name" id="account-name" defaultValue="Royce Haynes" />
                  </div>
                  <div className="text-input sky-label">
                    <label for="account-email">Email</label>
                    <input type="text" ref="email" id="account-email" defaultValue="[email protected]" />
                  </div>
                  <div className="text-input sky-label">
                    <label for="account-password">Password</label>
                    <input type="password" ref="password" id="account-password" defaultValue="12345678" />
                  </div>
                </div>

                <div className="signup-payment">
                  <div className="text-input sky-label">
                    <label for="credit-number">Credit Card #</label>
                    <input type="text" ref="number" id="credit-number" defaultValue="4242424242424242" />
                  </div>
                  <div className="text-input split sky-label">
                    <label for="credit-cvv">CVV</label>
                    <input type="text" ref="cvv" id="credit-cvv" defaultValue="500" />
                  </div>
                  <div className="text-input split sky-label">
                    <label for="credit-expiration">Expiration (MM/YY)</label>
                    <input type="text" ref="expiration" id="credit-expiration" defaultValue="05/15" />
                  </div>
                </div>

                <div className="account-submit">
                  <input className="btn" type="submit" value="Start connecting your services"/>
                </div>
              </form>
            </div>
          </section>
         </div>
      );
  }
});

module.exports = Signup;