Always show Contact Form

Regardless of having existing contacts or not

app/components/form/Currency.jsx

@@ -12,11 +12,6 @@ import currencies from '../../../libs/currencies.json';
 
 // Component
 class Currency extends Component {
-  // Proptypes
-  static propTypes = {
-    defaultCurrency: PropTypes.string.isRequired,
-  };
-
   // Update Discount Amount
   updateCurrency = event => {
     const {dispatch} = this.props;
@@ -40,14 +35,13 @@ class Currency extends Component {
       );
     });
 
-    const {defaultCurrency} = this.props;
     const {currency} = this.props.currentReceipt;
 
     return (
       <div className="currencyWrapper">
         <label className="itemLabel">Currency</label>
         <select
-          value={currency ? currency : defaultCurrency}
+          value={currency}
           onChange={e => this.updateCurrency(e)}>
           {currenciesOptions}
         </select>

app/components/form/Recipient.jsx

@@ -1,12 +1,12 @@
 // Libraries
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
-import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
 
 // Redux
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import * as FormActionCreators from '../../actions/form.jsx';
+import * as ContactsActionCreators from '../../actions/contacts.jsx';
 
 // Custom Components
 import RecipientForm from './RecipientForm.jsx';
@@ -16,42 +16,22 @@ import RecipientsList from './RecipientsList.jsx';
 class Recipient extends Component {
   // Extract data from redux set as state before mount
   componentWillMount = () => {
-    const {recipient} = this.props.currentReceipt;
-    switch (recipient.type) {
-      case 'new': {
-        this.setState({
-          type: 'new',
-          new: recipient.new,
-          select: recipient.select,
-        });
-        break;
-      }
-      case 'select': {
-        this.setState({
-          type: 'select',
-          new: recipient.new,
-          select: recipient.select,
-        });
-        break;
-      }
-
-      // If there is no existing data
-      default: {
-        if (this.props.recipients.length > 0) {
-          this.setState({
-            type: 'select',
-            new: {},
-            select: {},
-          });
-        } else {
-          this.setState({
-            type: 'new',
-            new: {},
-            select: {},
-          });
-        }
-      }
+    // Retrieve all contacts
+    if (!this.props.recipients.loaded) {
+      const {dispatch} = this.props;
+      const getAllContacts = bindActionCreators(
+        ContactsActionCreators.getAllContacts,
+        dispatch
+      );
+      getAllContacts();
     }
+    // Set state
+    const {recipient} = this.props.currentReceipt;
+    this.setState({
+      type: recipient.type ? recipient.type : 'new',
+      new: recipient.type ? recipient.new : {},
+      select: recipient.type ? recipient.select : {},
+    });
   };
 
   // Toggle Recipient Form
@@ -83,7 +63,7 @@ class Recipient extends Component {
     // If No contact existed, show the contact form
     const {recipients} = this.props;
     const { type } = this.props.currentReceipt.recipient;
-    if (recipients.length === 0) {
+    if (recipients.data.length === 0) {
       return (
         <RecipientForm
           currentRecipientData={this.state.new}
@@ -105,7 +85,7 @@ class Recipient extends Component {
     } else {
       return (
         <RecipientsList
-          recipients={recipients}
+          recipients={recipients.data}
           currentSelectedRecipient={this.state.select}
           updateRecipientState={this.updateRecipientState}
           clearState={type === null ? true : false}
@@ -122,7 +102,7 @@ class Recipient extends Component {
       <div className="recipientWrapper">
         <label className="itemLabel">Recipient</label>
         {this.outputComponent()}
-        {recipients.length > 0 &&
+        {recipients.data.length > 0 &&
           <div>
             <div className="radio">
               <label>
@@ -152,10 +132,7 @@ class Recipient extends Component {
   };
 }
 
-Recipient.propTypes = {
-  recipients: PropTypes.array.isRequired,
-};
-
 export default connect(state => ({
   currentReceipt: state.FormReducer,
+  recipients: state.ContactsReducer,
 }))(Recipient);

app/containers/Form.jsx

@@ -21,20 +21,10 @@ import Note from '../components/form/Note.jsx';
 
 // Component
 class Form extends Component {
-  componentWillMount = () => {
-    if (!this.props.recipients.loaded) {
-      const {dispatch} = this.props;
-      const getAllContacts = bindActionCreators(
-        ContactsActionCreators.getAllContacts,
-        dispatch,
-      );
-      getAllContacts();
-    }
-  };
 
   // Save Data
-  saveData = () => {
-    const { currentReceipt } = this.props;
+  saveData() {
+    const {currentReceipt} = this.props;
     // Validate Form
     if (!this.validateForm()) return;
     // Save To DB if it's a new contact
@@ -48,14 +38,14 @@ class Form extends Component {
     this.clearForm('muted');
     // Play a Sound
     sounds.play('ADD');
-  };
+  }
 
-  getReceiptData = () => {
+  getReceiptData() {
     let receiptData;
-    const { currentReceipt } = this.props;
+    const {currentReceipt} = this.props;
     if (currentReceipt.recipient.type === 'new') {
       receiptData = Object.assign({}, currentReceipt, {
-        recipient: currentReceipt.recipient.new
+        recipient: currentReceipt.recipient.new,
       });
     } else {
       const selectedRecipient = currentReceipt.recipient.select;
@@ -64,65 +54,65 @@ class Form extends Component {
         company: selectedRecipient.company,
         email: selectedRecipient.email,
         phone: selectedRecipient.phone,
-      }
+      };
       receiptData = Object.assign({}, currentReceipt, {
-        recipient: selectedRecipientData
+        recipient: selectedRecipientData,
       });
     }
     return receiptData;
   }
 
   // Save Receipt To DB
-  saveReceiptToDB = data => {
+  saveReceiptToDB(data) {
     // Dispatch Action
     const {dispatch} = this.props;
     const saveReceipt = bindActionCreators(
       ReceiptsActionCreators.saveReceipt,
-      dispatch,
+      dispatch
     );
     // Save The Receipt
     saveReceipt(data);
   }
 
   // Save Recipient To DB
-  saveRecipienAsNewContact = data => {
+  saveRecipienAsNewContact(data) {
     // Dispatch Action
     const {dispatch} = this.props;
     const saveContact = bindActionCreators(
       ContactsActionCreators.saveContact,
-      dispatch,
+      dispatch
     );
     // Save New Contact
     saveContact(data);
   }
 
   // Clear The Form
-  clearForm = vol => {
+  clearForm(vol) {
     // Dispatch Clear Form Action
     const {dispatch} = this.props;
     const clearForm = bindActionCreators(
       FormActionCreators.clearForm,
-      dispatch,
+      dispatch
     );
     clearForm();
     // Play A Sound
     if (!vol) sounds.play('RELOAD');
-  };
+  }
 
   // Validate Form
-  validateForm = () => {
+  validateForm() {
     let validated = true;
     // Validate Each Row Content
-    const { rows } = this.props.currentReceipt;
-    for ( let i = 0; i < rows.length; i++ ) {
+    const {rows} = this.props.currentReceipt;
+    for (let i = 0; i < rows.length; i++) {
       let row = rows[i];
       // Does it contain description?
       if (!row.description) {
         openDialog({
           type: 'warning',
           title: 'Required Field',
           message: 'Description can not be blank',
-        })
+        });
         validated = false;
         break;
       }
@@ -132,7 +122,7 @@ class Form extends Component {
           type: 'warning',
           title: 'Required Field',
           message: 'Price must be greater than 0',
-        })
+        });
         validated = false;
         break;
       }
@@ -142,7 +132,7 @@ class Form extends Component {
           type: 'warning',
           title: 'Required Field',
           message: 'Quantity must be greater than 0',
-        })
+        });
         validated = false;
         break;
       }
@@ -151,17 +141,17 @@ class Form extends Component {
   }
 
   // Render The form
-  render = () => {
+  render() {
     return (
       <div className="pageWrapper">
         <div className="pageHeader">
           <h4>New Receipt</h4>
         </div>
         <div className="pageContent">
-          <Recipient recipients={this.props.recipients.data}/>
-          <Currency defaultCurrency={this.props.settings.current.appSettings.currency}/>
-          <ItemsList/>
-          <Discount/>
+          <Recipient/>
+          <Currency />
+          <ItemsList />
+          <Discount />
           <Note />
         </div>
         <div className="pageFooter">
@@ -174,13 +164,11 @@ class Form extends Component {
         </div>
       </div>
     );
-  };
-
+  }
 }
 
 export default connect(state => ({
-  currentReceipt: state.FormReducer,
   receipts: state.ReceiptsReducer,
   recipients: state.ContactsReducer,
-  settings: state.SettingsReducer,
+  currentReceipt: state.FormReducer,
 }))(Form);

app/containers/Receipts.jsx

@@ -15,7 +15,7 @@ import Receipt from '../components/receipts/Receipt.jsx';
 import EmptyMessage from '../components/shared/EmptyMessage.jsx';
 
 // Component
-class List extends Component {
+class Receipts extends Component {
   state = { openPrevWinHint: false };
 
   // Will Mount
@@ -113,4 +113,4 @@ class List extends Component {
 
 export default connect(state => ({
   receipts: state.ReceiptsReducer,
-}))(List);
+}))(Receipts);

app/reducers/FormReducer.jsx

@@ -1,5 +1,6 @@
 // Node Libs
 import uuidv4 from 'uuid/v4';
+const appConfig = require('electron').remote.require('electron-settings');
 
 // Actions
 import * as ACTION_TYPES from '../constants/actions.jsx';
@@ -15,7 +16,7 @@ const initialState = {
     amount: 0,
     type: 'percentage',
   },
-  currency: 'USD',
+  currency: appConfig.get('appSettings').currency,
   note: '',
 };
 
@@ -100,7 +101,7 @@ const FormReducer = (state = initialState, action) => {
           amount: 0,
           type: 'percentage',
         },
-        currency: 'USD',
+        currency: appConfig.get('appSettings').currency,
         note: '',
       };
     }

static/css/general.css

@@ -333,9 +333,10 @@ select#themeSwitcher {
 
 .recipientForm {
   padding: 20px;
-  background: #f2f3f4;
+  background: #f9fafa;
   border-radius: 4px;
   margin-bottom: 20px;
+  border: 1px solid #f2f3f4;
 }
 
 .recipientsList {