Added ability to search by payer.

Not fully functional. Currently broken due to an error with trying to
have it work with refunds.

Author: TheF1rstPancake

actions/checkouts.js

@@ -104,7 +104,7 @@ function fetchCheckout(email, account_id = null, checkout_id = null, start = nul
 }
 
 function shouldFetchCheckout(state, account_id) {
-    if (state.wepay_account && state.wepay_account.searchedAccount.account_id != null && !state.wepay_checkout.checkout.isFetching) {
+    if (state.wepay_account && state.wepay_account.searchedAccount.account_id != null && !state.wepay_checkout.checkout.isFetching && !state.wepay_payer.payerInfo) {
         return true;
     }
     else if(state.wepay_user.isFetching){

actions/user.js

@@ -5,10 +5,12 @@ export const RECEIVE_USER = 'RECEIVE_USERS'
 export const SEARCH_USER = 'SEARCH_USERS'
 export const INVALIDATE_USER = 'INVALIDATE_USER'
 
-export function searchUser(email) {
+export function searchUser(email = null, account_id =null) {
     return {
         type: SEARCH_USER,
-        email:email
+        info: {"email":email,
+            "account_id": account_id
+        }
     }
 }
 
@@ -35,10 +37,10 @@ function receiveUser(email, json) {
     }
 }
 
-function fetchUser(email, callback) {
+function fetchUser(email, account_id, callback) {
     return dispatch => {
         dispatch(requestUser(email))
-        return $.post("/user", {"email":email})
+        return $.post("/user", {"email":email, "account_id":account_id})
             .fail(function(data){
                 console.log("ERROR: ", data);
                 var error_data = data.responseJSON;
@@ -56,7 +58,7 @@ function fetchUser(email, callback) {
 }
 
 function shouldFetchUser(state, email) {
-    if (state.wepay_user && state.wepay_user.searchedUser != "") {
+    if (state.wepay_user && state.wepay_user.searchedUser) {
         console.log("Should fetch user");
         return true;
     }
@@ -66,10 +68,10 @@ function shouldFetchUser(state, email) {
     return false;
 }
 
-export function fetchUserIfNeeded(email, callback) {
+export function fetchUserIfNeeded(email=null, account_id = null, callback = null) {
     return (dispatch, getState) => {
         if (shouldFetchUser(getState(), email)) {
-            return dispatch(fetchUser(email, callback))
+            return dispatch(fetchUser(email, account_id, callback))
         }
     }
 }

components/Accounts.js

@@ -112,7 +112,7 @@ const mapStateToProps = (state) => {
     return {
         accountInfo:state.wepay_account.account.accountInfo,
         searchedAccount: state.wepay_account.searchedAccount,
-        email: state.wepay_user.searchedUser,
+        email: state.wepay_user.searchedUser.email,
         error: state.errors.global ? state.errors.global.info : {}
     }
 }

components/App.js

@@ -10,12 +10,13 @@ const App = () => (
   <Grid fluid={true}>
     <Row>
         <Col lg={6} sm={12}>
-            <SearchBar />
+            <SearchBar resource={"user"} />
             <UserInfo />
             <AccountBlock />
             <Withdrawals />
         </Col>
         <Col lg={6} sm={12}>
+            <SearchBar resource={"payer"} />
             <Checkouts />
         </Col>
     </Row>  

components/Checkouts.js

@@ -17,6 +17,8 @@ import { connect } from 'react-redux'
 import {BootstrapTable} from "react-bootstrap-table"
 
 import {fetchRefundIfNeeded, clearRefund, fetchCheckoutIfNeeded, searchCheckout} from "../actions/checkouts"
+import {searchUser, fetchUserIfNeeded} from "../actions/user"
+import {fetchAccountIfNeeded} from "../actions/accounts"
 
 import Base from "./Base"
 
@@ -28,9 +30,28 @@ var Checkouts = React.createClass({
                 selectedCheckoutId: null,
                 refundAmount: 0,
                 refundReason: "",
+            },
+            selectRowProp: {
+                mode: "radio",
+                clickToSelect: true,
+                bgColor: "rgb(249, 255, 172)",
+                onSelect: this.handlePayerCheckoutSelect
             }
         }
     },
+    handlePayerCheckoutSelect: function(event) {
+        // set the account 
+        event.preventDefault();
+        var account_id = event.target.id;
+        var this2 = this;
+
+        // fetch the user info and after the user info is fetched, get the account error
+        this.props.dispatch(fetchUserIfNeeded(null, account_id,
+                function(){
+                    this2.props.dispatch(fetchAccountIfNeeded(account_id))
+                }
+        ));
+    },
     openModal: function(event) {
         this.setState({showModal:true, refund:{selectedCheckoutId: event.target.id}});
         this.props.dispatch(searchCheckout(this.props.email, null, this.state.refund.selectedCheckoutId));
@@ -41,9 +62,11 @@ var Checkouts = React.createClass({
     },
     buildModal: function() {
         var checkout = null;
-        for (var i = 0; i < this.props.checkoutInfo.length; i++) {
-            if(this.props.checkoutInfo[i].checkout_id == this.state.refund.selectedCheckoutId) {
-                checkout = this.props.checkoutInfo[i];
+        var checkout_list = this.props.payerInfo? this.props.payerInfo : this.props.checkoutInfo
+
+        for (var i = 0; i < checkout_list.length; i++) {
+            if(checkout_list[i].checkout_id == this.state.refund.selectedCheckoutId) {
+                checkout = checkout_list[i];
                 break;
             }
         }
@@ -169,8 +192,8 @@ var Checkouts = React.createClass({
 
         this.props.dispatch(fetchRefundIfNeeded(this.props.email, checkout_id, refundAmount, refundReason));
     },
-    formatCheckoutID: function(cell,row) {
-         return "<a href='#' id=" + cell + ">" + cell + "</a>";
+    formatAccountID: function(cell,row) {
+         return (<a href='#' id={cell} onClick={this.handlePayerCheckoutSelect}>{cell}</a>);
     },
     formatRefund: function(cell, row) {
         // cell is the refund_amount_refunded value.  If this is less than the amount of the original checkout then we want to include a refund button
@@ -203,10 +226,59 @@ var Checkouts = React.createClass({
         return array;
     },
     render: function() {
-        if (this.props.checkoutInfo == null || $.isEmptyObject(this.props.error) == false) {
-            return (<div></div>);
+        if(this.props.payerInfo != null) {
+            var refund_column;
+
+            
+                refund_column = (<TableHeaderColumn
+                    dataField = "refund_amount_refunded"
+                    dataFormat = {(this.props.account_id) ? this.formatRefund : function(cell){return cell}}
+                    >
+                    Refund
+                </TableHeaderColumn>); 
+
+            return (<div>
+                <Row>
+                    <h4>Payer Checkouts</h4>
+                    <BootstrapTable
+                        data={this.props.payerInfo}
+                        striped={true}
+                        hover={true}
+                        pagination={true}
+                        search={true}
+                        >
+                        <TableHeaderColumn 
+                            dataField="checkout_id" 
+                            isKey={true}  
+                            dataFormat={this.formatCheckoutID}
+                            >
+                            Checkout ID
+                        </TableHeaderColumn>    
+                        <TableHeaderColumn 
+                            dataField = "create_time"
+                            dataFormat={Base.formatDate}
+                            dataSort={true}
+                            >
+                            Date
+                        </TableHeaderColumn>    
+                        <TableHeaderColumn 
+                            dataField = "amount"
+                            >
+                            Amount
+                        </TableHeaderColumn>
+                        <TableHeaderColumn 
+                            dataField="account_id"
+                            dataFormat = {this.formatAccountID}
+                            >
+                            Account ID
+                        </TableHeaderColumn>
+                        {refund_column ? refund_column : null}
+                    </BootstrapTable>
+                    {this.buildModal()}
+                    </Row>
+            </div>);
         }
-        else {
+        else if(this.props.checkoutInfo != null){
             var checkouts = this.serialize(this.props.checkoutInfo);
             return (
                 <div>
@@ -279,24 +351,26 @@ var Checkouts = React.createClass({
                 </div>
             );
         }
+        
+        return (<div></div>);
     }
 });
 
 const mapStateToProps = (state) => {
     return {
-        checkoutInfo:state.wepay_checkout.checkout.checkoutInfo,
-        email: state.wepay_user.searchedUser,
-        account_id: state.wepay_account.searchedAccount.account_id,
-        submitted_refund: state.wepay_checkout.checkout.submitted_refund,
-        successful_refund: state.wepay_checkout.checkout.successful_refund,
-        error: state.errors.global ? state.errors.global.info : {},
-        refund_error: state.errors.refund ? state.errors.refund.info: {}
+        checkoutInfo:       state.wepay_checkout.checkout.checkoutInfo,
+        email:              state.wepay_user.searchedUser.email,
+        account_id:         state.wepay_account.searchedAccount.account_id,
+        submitted_refund:   state.wepay_checkout.checkout.submitted_refund,
+        successful_refund:  state.wepay_checkout.checkout.successful_refund,
+        error:              state.errors.global ? state.errors.global.info : {},
+        refund_error:       state.errors.refund ? state.errors.refund.info: {},
+        payerInfo:          state.wepay_payer.payer.payerInfo
 
     }
 }
 
 Checkouts = connect(mapStateToProps)(Checkouts);
 
 
-
 export default Checkouts

containers/SearchBar.js

@@ -10,23 +10,30 @@ import { connect } from 'react-redux'
 import React from 'react'
 import {FormGroup, FormControl} from "react-bootstrap"
 import UserInfo from "../components/User"
-import {addUser} from "../actions/user"
-import {addAccounts, clearAccounts} from "../actions/accounts"
-import {addError} from "../actions/errors"
+
 import {searchUser, fetchUserIfNeeded} from "../actions/user"
-import {fetchAccountIfNeeded} from "../actions/accounts"
+import {searchPayer, fetchPayerIfNeeded} from "../actions/payer"
+import {fetchAccountIfNeeded, clearAccounts} from "../actions/accounts"
+
 import {clearCheckouts} from "../actions/checkouts"
 import {clearWithdrawals} from "../actions/withdrawals"
 
-var SearchBar = React.createClass({
+import {addPayer} from '../actions/payer'
+
+import {addError} from "../actions/errors"
 
+
+var SearchBar = React.createClass({
+    propTypes: {
+        resource: React.PropTypes.string.isRequired    // what we are searching for.  Depending on what it is, it will do a different searchFunction
+    },
     // sets initial state
     // states in react are just nested associative objects
     getInitialState: function(){
         return { 
-            searchString: '',   // the search string we update on submit
-            value:"",            // the value of the input text box
-            error:{"error_message":""}
+            searchString: '',               // the search string we update on submit
+            value:"",                       // the value of the input text box
+            error:{"error_message":""},
         };
     },
 
@@ -42,6 +49,7 @@ var SearchBar = React.createClass({
         // prevent form default behavior to prevent page reload on submit
         // after this is complete, the form will re-render and only contain results that match or string
         event.preventDefault();
+
         var this2 = this;
         this.setState({searchString: this.state.value});
 
@@ -53,7 +61,7 @@ var SearchBar = React.createClass({
         this.props.dispatch(clearWithdrawals());
 
         // fetch the user info and after the user info is fetched, get the account error
-        this.props.dispatch(fetchUserIfNeeded(this.state.value, 
+        this.props.dispatch(fetchUserIfNeeded(this.state.value, null,
                 function(){
                     this2.props.dispatch(fetchAccountIfNeeded(this2.state.value))
                 }
@@ -63,36 +71,71 @@ var SearchBar = React.createClass({
         // if the user search was successful then go get the account data
         //this.props.dispatch(fetchAccountIfNeeded(this.state.value));
     },
+    searchPayer: function(event) {
+        event.preventDefault();
+
+         var this2 = this;
+        this.setState({searchString: this.state.value});
+
+        // change the state because now we've searched a user
+        this.props.dispatch(searchPayer(this.state.value));
+
+        /*this.props.dispatch(clearAccounts());
+        this.props.dispatch(clearCheckouts());
+        this.props.dispatch(clearWithdrawals());*/
+
+        // fetch the user info and after the user info is fetched, get the account error
+        this.props.dispatch(fetchPayerIfNeeded(this.state.value));
+    },
     render: function(dispatch) {
         var searchString = this.state.searchString.trim().toLowerCase();
         //render the user search functionality
         var error_message ="";
         if(this.props.error) {
             error_message = this.props.error.error_message;
         }
-        return (
-            <div>
-                <h4>Search User by Email </h4>
-                <form onSubmit={this.searchUser}
-                >
-                <FormGroup controlId="userSearchForm">
-                    <FormControl 
-                        type="text" 
-                        value={this.state.value} 
-                        placeholder="Search!" 
-                        onChange={this.handleChange} />
-                </FormGroup>
-                <p>{error_message}</p>
-                </form>
-            </div>
-        )
+        if (this.props.resource == "user") {
+            return (
+                <div>
+                    <h4>Search User by Email </h4>
+                    <form onSubmit={this.searchUser}
+                    >
+                    <FormGroup controlId="userSearchForm">
+                        <FormControl 
+                            type="text" 
+                            value={this.state.value} 
+                            placeholder="Search!" 
+                            onChange={this.handleChange} />
+                    </FormGroup>
+                    <p>{error_message}</p>
+                    </form>
+                </div>
+            )
+        }
+        else if (this.props.resource == "payer") {
+            return (
+                <div>
+                    <h4>Search Payer by Email </h4>
+                    <form onSubmit={this.searchPayer}
+                    >
+                    <FormGroup controlId="payerSearchForm">
+                        <FormControl 
+                            type="text" 
+                            value={this.state.value} 
+                            placeholder="Search!" 
+                            onChange={this.handleChange} />
+                    </FormGroup>
+                    <p>{error_message}</p>
+                    </form>
+                </div>
+            )
+        }   
     }
 });
 
 const mapStateToProps = (state) => {
     return {
-        error: state.errors.global ? state.errors.global.info : {}
-
+        error:      state.errors.global ? state.errors.global.info : {}
     }
 }