Format updates and can now request more checkouts

Added a button that allows the user to request more checkouts and adds
them directly into the table.  Each fetch will get 50 entires.

Author: TheF1rstPancake

actions/checkouts.js

@@ -24,7 +24,7 @@ export function invalidateCheckout(email, account_id = null, checkout_id=null) {
     }
 }
 
-function requestCheckout(email, account_id = null, checkout_id = null) {
+function requestCheckout(email, account_id = null, checkout_id = null, start = null, stop = null) {
     return {
         type: REQUEST,
         email:email,
@@ -80,11 +80,11 @@ function requestRefund(email, checkout_id, amount=null, refund_reason) {
     }
 }
 
-function fetchCheckout(email, account_id = null, checkout_id = null) {
+function fetchCheckout(email, account_id = null, checkout_id = null, start = null) {
     return dispatch => {
         dispatch(requestCheckout(email, account_id, checkout_id))
 
-        return $.post("/checkout", {"email":email, "checkout_id":checkout_id, "account_id":account_id})
+        return $.post("/checkout", {"email":email, "checkout_id":checkout_id, "account_id":account_id, "start":start})
             .fail(function(data){
                 console.log("ERROR: ", data);
                 var error_data = JSON.parse(data.responseText);
@@ -97,7 +97,7 @@ function fetchCheckout(email, account_id = null, checkout_id = null) {
 }
 
 function shouldFetchCheckout(state, account_id) {
-    if (state.wepay_account && state.wepay_account.searchedAccount.account_id != null) {
+    if (state.wepay_account && state.wepay_account.searchedAccount.account_id != null && !state.wepay_checkout.checkout.isFetching) {
         return true;
     }
     else if(state.wepay_user.isFetching){
@@ -106,10 +106,10 @@ function shouldFetchCheckout(state, account_id) {
     return false;
 }
 
-export function fetchCheckoutIfNeeded(email, account_id=null, checkout_id=null) {
+export function fetchCheckoutIfNeeded(email, account_id=null, checkout_id=null, start = null) {
     return (dispatch, getState) => {
         if (shouldFetchCheckout(getState())) {
-            return dispatch(fetchCheckout(email, account_id, checkout_id))
+            return dispatch(fetchCheckout(email, account_id, checkout_id, start))
         }
     }
 }

components/Checkouts.js

@@ -1,9 +1,9 @@
 import React, { PropTypes } from 'react'
-import {Grid, Label, FormGroup, FormControl, Row, Col, ControlLabel, Table, Button, Modal} from "react-bootstrap"
+import {Grid, Form, Label, FormGroup, FormControl, Row, Col, ControlLabel, Table, Button, Modal} from "react-bootstrap"
 import { connect } from 'react-redux'
 import {BootstrapTable} from "react-bootstrap-table"
 
-import {fetchRefundIfNeeded, clearRefund} from "../actions/checkouts"
+import {fetchRefundIfNeeded, clearRefund, fetchCheckoutIfNeeded} from "../actions/checkouts"
 
 import Base from "./Base"
 
@@ -19,7 +19,6 @@ var Checkouts = React.createClass({
         }
     },
     openModal: function(event) {
-        console.log("OPENING MODAL", event.target.id);
         this.setState({showModal:true, refund:{selectedCheckoutId: event.target.id}});
     },
     closeModal: function() {
@@ -46,7 +45,6 @@ var Checkouts = React.createClass({
         if (this.props.successful_refund) {
             successful_refund = (<h3><Label bsStyle="success">Refund completed!</Label></h3>);
         }
-        console.log(successful_refund);
         return (
             <div>
             <Modal show = {this.state.showModal} onHide = {this.closeModal}>
@@ -55,48 +53,101 @@ var Checkouts = React.createClass({
                 </Modal.Header>
                 <Modal.Body>
                 <p><strong>Max Refundable Amount:</strong> ${maxRefundableAmount}</p>
-                <form onSubmit={this.refundCheckout}>
+                <Form horizontal onSubmit={this.refundCheckout}>
                     <FormGroup>
-                        <ControlLabel>Refund Amount</ControlLabel>
-                        <FormControl 
-                            type="number" 
-                            id="refundAmount"
-                            max={maxRefundableAmount}
-                            required
-                            />
+                        <Col lg={6} ms={12}>
+                            <ControlLabel>Refund Amount</ControlLabel>
+                            <FormControl 
+                                type="number" 
+                                id="refundAmount"
+                                step="0.01"
+                                max={maxRefundableAmount}
+                                ref = "refundAmount"
+                                onChange = {this.handleAmountChange}
+                                required
+                                />
+                        </Col>
+                        <Col lg={6} ms={12}>
+                            <ControlLabel>Refund Percentage</ControlLabel>
+                            <FormControl
+                                type="number"
+                                id="refundPercentage"
+                                step="0.01"
+                                max="100"
+                                onChange={this.handlePercentChange}
+                            />    
+                        </Col>
                     </FormGroup>
                     <FormGroup>
-                        <ControlLabel>Refund Reason</ControlLabel>    
-                        <FormControl
-                            type="text"
-                            id="refundReason"
-                            required/>
+                        <Col lg={12}>
+                            <ControlLabel>Refund Reason</ControlLabel>    
+                            <FormControl
+                                type="text"
+                                id="refundReason"
+                                required/>
+                        </Col>
                     </FormGroup>
-                    {successful_refund}
-                    <Button type="submit" bsStyle="success" value="Submit Refund" disabled={this.props.submitted_refund}>Submit Refund</Button>
-                </form>
+                    <FormGroup>
+                        <Col lg={12}>
+                        {successful_refund}
+                        </Col>
+                    </FormGroup>
+                    <FormGroup>
+                        <Col lg={12}>
+                        <Button type="submit" bsStyle="success" value="Submit Refund" disabled={this.props.submitted_refund}>Submit Refund</Button>
+                        </Col>
+                    </FormGroup>
+                </Form>
                 </Modal.Body>
             </Modal>
             </div>
             );
     },
     handleAmountChange: function(event) {
-        var current = this.state.refund;
-        current.refundAmount = event.target.value; 
-        this.setState({refund: current})
+        var currentPercent = $("#refundPercentage");
+        var refundAmount = event.target.value; 
+        var maxRefundableAmount = $("#refundAmount").prop("max");
+        currentPercent.val(((refundAmount*100)/maxRefundableAmount).toFixed(2));
+
+    },
+    handlePercentChange: function(event) {
+        var currentAmount = $("#refundAmount");
+        var currentPercent = event.target.value;
+        var maxRefundableAmount = $("#refundAmount").prop("max");
+
+        // change the refund amount based on the percent value that the user has entered
+        // this is designed to make the refund easier.  If their policy is to refund half, this takes away the guess work
+        currentAmount.val((maxRefundableAmount * (currentPercent/100.0)).toFixed(2));
+
     },
     handleReasonChange: function(event) {
         var current = this.state.refund;
         current.refundReason = event.target.value; 
         this.setState({refund: current})
     },
+    fetchMoreCheckouts: function(event) {
+        console.log("Fetching more checkouts for: ", this.props.email, this.props.account_id);
+        var start = this.props.checkoutInfo.length;
+        this.props.dispatch(fetchCheckoutIfNeeded(this.props.email, this.props.account_id, null, start));
+    },
     refundCheckout: function(e) {
         e.preventDefault();
         console.log("Performing refund for: ", this.state.refund.selectedCheckoutId);
+
         var checkout_id = this.state.refund.selectedCheckoutId;
         var refundAmount = $("#refundAmount").val();
         var refundReason = $("#refundReason").val();
+        var maxRefundableAmount = $("#refundAmount").prop("max");
+
+        console.log(refundAmount, maxRefundableAmount);
+
+        if (refundAmount - maxRefundableAmount == 0) {
+            console.log("Full refund!");
+            refundAmount = null;
+        }
         var current = this.state.refund;
+        current['refundAmount'] = refundAmount;
+        current['refundReason'] = refundReason;
         this.setState({refund:current})
 
         this.props.dispatch(fetchRefundIfNeeded(this.props.email, checkout_id, refundAmount, refundReason));
@@ -114,7 +165,7 @@ var Checkouts = React.createClass({
         var refundString = (<p><strong>Refunded</strong>: ${cell}<br></br>{row.refund_refund_reason}</p>);
         var refundButton = (<Button bsStyle="primary" bsSize="small" id={row.checkout_id} onClick={this.openModal}>Refund</Button>)
         if (cell > 0) {
-            if (cell == row.amount) {
+            if (cell >= row.amount) {
                 return (<div>{refundString}</div>)
             }
             else {
@@ -183,7 +234,12 @@ var Checkouts = React.createClass({
                             dataField = "amount"
                             >
                             Amount
-                        </TableHeaderColumn>    
+                        </TableHeaderColumn>   
+                        <TableHeaderColumn
+                            dataField="gross"
+                            >
+                            Gross Amount
+                        </TableHeaderColumn> 
                         <TableHeaderColumn 
                             dataField = "payer_email"
                             >
@@ -202,6 +258,15 @@ var Checkouts = React.createClass({
                         </TableHeaderColumn> 
                     </BootstrapTable>
                     </Row>
+                    <Row>
+                        <div className="pull-right">
+                            <Button 
+                                id="fetchMoreCheckouts"
+                                onClick = {this.fetchMoreCheckouts}
+                                bsStyle="primary"
+                            >Get More Checkouts</Button>
+                        </div>
+                    </Row>
                     {this.buildModal()}
                 </div>
             );
@@ -213,6 +278,7 @@ const mapStateToProps = (state) => {
     return {
         checkoutInfo:state.wepay_checkout.checkout.checkoutInfo,
         email: state.wepay_user.searchedUser,
+        account_id: state.wepay_account.searchedAccount.account_id,
         error: state.errors.info,
         submitted_refund: state.wepay_checkout.checkout.submitted_refund,
         successful_refund: state.wepay_checkout.checkout.successful_refund,

components/Withdrawals.js

@@ -26,6 +26,9 @@ var Withdrawals= React.createClass({
         }
         return array;
     },
+    formatBank: function(cell, row) {
+        return row.bank_data_bank_name + " XXXXXX" + cell;
+    },
     render: function() {
         var withdrawals = this.props.withdrawalInfo;
         console.log("WITHDRAWALS: ", withdrawals);
@@ -64,8 +67,9 @@ var Withdrawals= React.createClass({
                         </TableHeaderColumn>
                         <TableHeaderColumn 
                             dataField="bank_data_account_last_four" 
+                            dataFormat={this.formatBank}
                             >
-                            Account Last Four
+                            Bank
                         </TableHeaderColumn>
 
                     </BootstrapTable>

reducers/checkouts.js

@@ -33,9 +33,16 @@ function updateCheckout(state, action) {
             break;
         }
     }
+    state.isFeteching = false;
     return state
 }
 
+function appendCheckouts(state, action){
+    if (state.checkoutInfo.length > 0) {
+
+    }
+}
+
 
 
 function checkout_base(state = {
@@ -62,7 +69,7 @@ function checkout_base(state = {
             return Object.assign({}, state, {
                 isFetching: false,
                 didInvalidate: false,
-                checkoutInfo: action.checkout,
+                checkoutInfo: (state.checkoutInfo ? state.checkoutInfo.concat(action.checkout): action.checkout),
                 lastUpdated: action.receivedAt
             })
         case REFUND:

server.js

@@ -24,8 +24,9 @@ app.use('/static', express.static('static'));
 function sendResponse(package, res) {
     res.setHeader('Content-Type', 'application/json');
     if ("error_code" in package) {
-        console.log("Sending error!");
-        res.status(500).send(JSON.stringify({"error_code":500, "error_description":"wepay call died.  check server logs for more details.", "error_message":package.error_description}));
+        var error_package = {"error_code":500, "error_description":"wepay call died.  check server logs for more details.", "error_message":package.error_description}
+        console.log("Sending error!\t", error_package);
+        res.status(500).send(JSON.stringify(error_package));
     }
     else {
         res.send(JSON.stringify(package));
@@ -148,7 +149,11 @@ app.post("/checkout", function(req, res) {
         getDataWithPackage(req, res, "/checkout", package);
     }
     else {
-        getDataWithAccountId(req, res, "/checkout/find");
+        var package = {"account_id": req.body.account_id};
+        if (req.body.start && req.body.start != '') {
+            package.start = req.body.start;
+        }
+        getDataWithPackage(req, res, "/checkout/find", package);
     }
 })