Add DueDate Field To Form

app/actions/form.jsx

@@ -54,6 +54,14 @@ export const updateNote = data => {
   };
 };
 
+export const changeDueDate = data => {
+  return {
+    type: ACTION_TYPES.CHANGE_DUE_DATE,
+    data
+  };
+};
+
+
 export const updateCurrency = data => {
   return {
     type: ACTION_TYPES.UPDATE_CURRENCY,

app/components/form/Currency.jsx

@@ -38,7 +38,7 @@ class Currency extends Component {
     const {currency} = this.props.currentReceipt;
 
     return (
-      <div className="currencyWrapper">
+      <div className="currencyWrapper formSection">
         <label className="itemLabel">Currency</label>
         <select
           value={currency}

app/components/form/Discount.jsx

@@ -31,11 +31,11 @@ class Discount extends Component {
   };
 
   render = () => {
-    const {discount} = this.props.currentReceipt;
+    const {discount} = this.props.currentInvoice;
     const amount = discount.amount ? discount.amount : 0;
     const type = discount.type ? discount.type : 'percentage';
     return (
-      <div className="discountWrapper">
+      <div className="discountWrapper formSection">
         <label className="itemLabel ">Discount</label>
 
         <div className="discountContent">
@@ -77,5 +77,5 @@ class Discount extends Component {
 }
 
 export default connect(state => ({
-  currentReceipt: state.FormReducer,
+  currentInvoice: state.FormReducer,
 }))(Discount);

app/components/form/DueDate.jsx

@@ -0,0 +1,74 @@
+// Libraries
+import React, {Component} from 'react';
+
+// Redux
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import * as ActionCreators from '../../actions/form.jsx';
+
+// React Dates
+import {SingleDatePicker} from 'react-dates';
+import moment from 'moment';
+
+const clearDateBtn = () =>
+<div>
+  <a href="#">Clear</a>
+</div>;
+
+// Component
+class DueDate extends Component {
+  componentWillMount = () => {
+    this.setState({focused: false});
+  };
+
+  onFocusChange = () => {
+    this.setState({focused: !this.state.focused});
+  };
+
+  onDateChange = selectedDate => {
+    let dueDate;
+    if (selectedDate === null) {
+      dueDate = null;
+    } else {
+      dueDate = moment(selectedDate).toObject();
+    }
+    const {dispatch} = this.props;
+    const changeDueDate = bindActionCreators(
+      ActionCreators.changeDueDate,
+      dispatch,
+    );
+    changeDueDate(dueDate);
+  };
+
+  render = () => {
+    const {dueDate} = this.props.currentInvoice;
+    const date = dueDate ? moment(dueDate) : null;
+    return (
+      <div className="dueDateWrapper formSection">
+        <label className="itemLabel">Due Date</label>
+        <div className="dueDateContent">
+          <SingleDatePicker
+            id="invoice-duedate"
+            placeholder="Select A Date"
+            firstDayOfWeek={1}
+            displayFormat="DD/MM/YYYY"
+            hideKeyboardShortcutsPanel={true}
+            date={date}
+            focused={this.state.focused}
+            onFocusChange={() => this.onFocusChange()}
+            onDateChange={date => this.onDateChange(date)}
+          />
+          <a href="#"
+            className={ date === null ? "clearDateBtn" : "clearDateBtn active" }
+            onClick={() => this.onDateChange(null)}>
+            <i className="ion-close-circled"></i>
+          </a>
+        </div>
+      </div>
+    );
+  };
+}
+
+export default connect(state => ({
+  currentInvoice: state.FormReducer,
+}))(DueDate);

app/components/form/ItemRow.jsx

@@ -76,9 +76,6 @@ class ItemsRow extends Component {
             placeholder="Quantity"
           />
         </div>
-        <div className="itemSubtotal">
-          <span>{this.state.subtotal}</span>
-        </div>
         <div className="itemActions">
           { this.props.actions &&
             <a

app/components/form/ItemsList.jsx

@@ -55,7 +55,7 @@ class ItemsList extends Component {
       );
     });
     return (
-      <div className="itemsListWrapper">
+      <div className="itemsListWrapper formSection">
         <div className="itemsListHeader">
           <div className="itemLabelDescription">
             <label className="itemLabel">Description *</label>
@@ -66,9 +66,6 @@ class ItemsList extends Component {
           <div className="itemLabelQuantity">
             <label className="itemLabel ">Quantity *</label>
           </div>
-          <div className="itemLabelSubtotal">
-            <label className="itemLabel ">Subtotal</label>
-          </div>
         </div>
         <div className="itemsListDiv">
           <ReactCSSTransitionGroup

app/components/form/Note.jsx

@@ -17,7 +17,7 @@ class Note extends Component {
   render = () => {
     const {note} = this.props.currentReceipt;
     return (
-      <div className="noteWrapper">
+      <div className="noteWrapper formSection">
         <label className="itemLabel ">Note</label>
         <textarea
           className="noteContent"

app/components/form/Recipient.jsx

@@ -125,7 +125,7 @@ class Recipient extends Component {
     const {recipients} = this.props;
     const {newRecipient} = this.state;
     return (
-      <div className="recipientWrapper">
+      <div className="recipientWrapper formSection">
         <label className="itemLabel">Recipient</label>
         {this.outputComponent()}
         {recipients.data.length > 0 &&

app/constants/actions.jsx

@@ -12,6 +12,8 @@ export const UPDATE_DISCOUNT_TYPE = 'UPDATE_DISCOUNT_TYPE';
 export const UPDATE_NOTE = 'UPDATE_NOTE';
 // CURRENCY
 export const UPDATE_CURRENCY = 'UPDATE_CURRENCY';
+// DUE DATE
+export const CHANGE_DUE_DATE = 'CHANGE_DUE_DATE';
 // INVOICE
 export const GET_INVOICES = 'GET_INVOICES';
 export const SAVE_INVOICE = 'SAVE_INVOICE';

app/containers/Form.jsx

@@ -21,6 +21,7 @@ import Recipient from '../components/form/Recipient.jsx';
 import ItemsList from '../components/form/ItemsList.jsx';
 import Currency from '../components/form/Currency.jsx';
 import Discount from '../components/form/Discount.jsx';
+import DueDate from '../components/form/DueDate.jsx';
 import Note from '../components/form/Note.jsx';
 
 // Component
@@ -198,6 +199,7 @@ class Form extends Component {
         <div className="pageContent">
           <Recipient />
           <Currency />
+          <DueDate/>
           <ItemsList />
           <Discount />
           <Note />

app/index.html

@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="../static/css/form.css"></link>
     <link rel="stylesheet" href="../static/css/invoices.css"></link>
     <link rel="stylesheet" href="../static/css/items.css"></link>
+    <link rel="stylesheet" href="../static/css/date-picker.css"></link>
   </head>
   <body>
     <div id="root"></div>

app/reducers/FormReducer.jsx

@@ -16,13 +16,13 @@ const initialState = {
     amount: 0,
     type: 'percentage',
   },
+  dueDate: null,
   currency: appConfig.get('appSettings').currency,
   note: '',
 };
 
 const FormReducer = (state = initialState, action) => {
   switch (action.type) {
-
     // Update recipient
     case ACTION_TYPES.UPDATE_RECIPIENT: {
       return Object.assign({}, state, {
@@ -81,6 +81,13 @@ const FormReducer = (state = initialState, action) => {
       });
     }
 
+    // Update Due Date
+    case ACTION_TYPES.CHANGE_DUE_DATE: {
+      return Object.assign({}, state, {
+        dueDate: action.data,
+      });
+    }
+
     // Update Note
     case ACTION_TYPES.UPDATE_NOTE: {
       return Object.assign({}, state, {
@@ -101,6 +108,7 @@ const FormReducer = (state = initialState, action) => {
           amount: 0,
           type: 'percentage',
         },
+        dueDate: null,
         currency: appConfig.get('appSettings').currency,
         note: '',
       };

package.json

@@ -24,11 +24,15 @@
     "date-fns": "^1.28.5",
     "electron-settings": "^3.1.1",
     "jimp": "^0.2.28",
+    "jquery": "^3.2.1",
     "lodash": "^4.17.4",
+    "moment": "^2.18.1",
     "pouchdb-browser": "^6.3.4",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-addons-css-transition-group": "^15.6.0",
+    "react-addons-shallow-compare": "^15.6.0",
+    "react-dates": "^12.4.0",
     "react-dnd": "^2.4.0",
     "react-dnd-html5-backend": "^2.4.1",
     "react-dom": "^15.6.1",