Support 2-Decimal Formatting & customizable decimal separator

app.js

@@ -206,6 +206,9 @@ function setInitialValues() {
         tax: false,
         note: false,
       },
+      decimalFractions: 2,
+      currencyPlacement: 'before',
+      decimalSeparator: 'dot',
     },
   };
 

app/actions/__tests__/settings.spec.js

@@ -30,3 +30,11 @@ it('saveSettings should create SAVE_SETTINGS action', () => {
     payload: settingsData,
   });
 });
+
+it('notifyInvalidDecimalFractions should create UI_NOTIFICATION_NEW action', () => {
+  const settingsData = {};
+  expect(actions.notifyInvalidDecimalFractions(settingsData)).toEqual({
+    type: ACTION_TYPES.UI_NOTIFICATION_NEW,
+    payload: {message: 'Invalid decimal fractions specified! Please correct settings.', type: 'warning'},
+  });
+});

app/actions/settings.jsx

@@ -17,3 +17,9 @@ export const saveSettings = createAction(
   ACTION_TYPES.SETTINGS_SAVE,
   data => data
 );
+
+// Notify user about invalid decimal fractions
+export const notifyInvalidDecimalFractions = createAction(
+  ACTION_TYPES.UI_NOTIFICATION_NEW,
+  (type, message) => ({type: 'warning', message: 'Invalid decimal fractions specified! Please correct settings.'})
+);

app/components/invoices/Invoice.jsx

@@ -208,7 +208,7 @@ class Invoice extends PureComponent {
   }
 
   render() {
-    const { invoice, setInvoiceStatus, dateFormat } = this.props;
+    const { invoice, setInvoiceStatus, dateFormat, currencyPlacement } = this.props;
     const { recipient, status } = invoice;
     const statusActions = [
       {
@@ -224,6 +224,7 @@ class Invoice extends PureComponent {
         action: () => setInvoiceStatus(invoice._id, 'cancelled'),
       },
     ];
+    const currencyBefore = currencyPlacement === 'before';
     return (
       <div className="col-lg-6">
         <Wrapper>
@@ -254,7 +255,7 @@ class Invoice extends PureComponent {
               <Field>
                 <label>Total Value</label>
                 <p>
-                  {invoice.currency.code} {formatNumber(invoice.grandTotal)}
+                  {currencyBefore ? invoice.currency.code : ''} {formatNumber(invoice.grandTotal)} {currencyBefore ? '' : invoice.currency.code}
                 </p>
               </Field>
             </Row>

app/components/invoices/__tests__/Invoice.spec.js

@@ -36,6 +36,7 @@ const editInvoice = jest.fn();
 const deleteInvoice = jest.fn();
 const setInvoiceStatus = jest.fn();
 const dateFormat = 'MM/DD/YY';
+const currencyPlacement = 'before';
 
 // Tests
 describe('Renders correctly to the DOM', () => {
@@ -48,6 +49,7 @@ describe('Renders correctly to the DOM', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
   });
@@ -60,6 +62,7 @@ describe('Renders correctly to the DOM', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
     expect(mountWrapper.prop('invoice')).toEqual(invoice);
@@ -97,6 +100,7 @@ describe('Renders correctly to the DOM', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
     expect(
@@ -118,6 +122,7 @@ describe('Renders correctly to the DOM', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
     expect(
@@ -137,6 +142,7 @@ describe('Renders correctly to the DOM', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
     expect(
@@ -166,6 +172,7 @@ describe('Renders correctly to the DOM', () => {
           deleteInvoice={deleteInvoice}
           setInvoiceStatus={setInvoiceStatus}
           dateFormat={dateFormat}
+          currencyPlacement={currencyPlacement}
         />
       )
       .toJSON();
@@ -185,6 +192,7 @@ describe('handle clicks correctly', () => {
         deleteInvoice={deleteInvoice}
         setInvoiceStatus={setInvoiceStatus}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
       />
     );
     viewBtn = wrapper

app/components/invoices/__tests__/__snapshots__/Invoice.spec.js.snap

@@ -71,7 +71,9 @@ exports[`Renders correctly to the DOM matches snapshot 1`] = `
           <p>
             USD
 
-            3,843
+            3,843.00
+
+
           </p>
         </div>
       </div>

app/components/settings/Invoice.jsx

@@ -66,14 +66,34 @@ class Invoice extends Component {
   }
 
   handleInputChange(event) {
+    const { setSavable } = this.props;
     const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const name = target.name;
+
+    const canSave = this.canSave(name, value);
+    setSavable(canSave);
+    if (!canSave) {
+      // Notifi
+      console.log('Cant save');
+    }
+
     this.setState({ [name]: value }, () => {
       this.props.updateSettings('invoice', this.state);
     });
   }
 
+  canSave(ctrlName, value) {
+    let valid = true;
+    if (ctrlName === 'decimalFractions' && Number(value) < 0){
+      valid = false;
+      const { invalidFractionMsg } = this.props;
+      invalidFractionMsg();
+    }
+
+    return valid;
+  }
+
   handleTaxChange(event) {
     const target = event.target;
     const name = target.name;
@@ -143,6 +163,9 @@ class Invoice extends Component {
       tax,
       required_fields,
       dateFormat,
+      decimalFractions,
+      currencyPlacement,
+      decimalSeparator,
     } = this.state;
     return (
       <div>
@@ -334,6 +357,44 @@ class Invoice extends Component {
               </div>
             </Field>
           </Row>
+          <Row>
+            <Field>
+              <label className="itemLabel">Decimal Fractions</label>
+              <input
+                className="form-control"
+                name="decimalFractions"
+                type="number"
+                value={decimalFractions}
+                onChange={this.handleInputChange}
+              />
+            </Field>
+            <Field>
+              <label className="itemLabel">Currency Sign placement</label>
+              <select
+                name="currencyPlacement"
+                value={currencyPlacement}
+                onChange={this.handleInputChange}
+              >
+                <option value="before">Before amount</option>
+                <option value="after">After amount</option>
+              </select>
+            </Field>
+          </Row>
+          <Row>
+            <Field>
+              <label className="itemLabel">Decimal Separator</label>
+              <select
+                name="decimalSeparator"
+                value={decimalSeparator}
+                onChange={this.handleInputChange}
+              >
+                <option value="dot">Dot (.)</option>
+                <option value="comma">Comma (,)</option>
+              </select>
+            </Field>
+            {/* To prevent stretching the first field. Use for next paramter in future and remove comment afterwards */}
+            <Field />
+          </Row>
         </Section>
       </div>
     );

app/containers/Invoices.jsx

@@ -11,7 +11,7 @@ import * as Actions from '../actions/invoices';
 
 // Selectors
 import { getInvoices } from '../reducers/InvoicesReducer';
-import { getDateFormat } from '../reducers/SettingsReducer';
+import { getDateFormat, getCurrencyPlacement } from '../reducers/SettingsReducer';
 
 // Components
 import Invoice from '../components/invoices/Invoice';
@@ -80,7 +80,7 @@ class Invoices extends PureComponent {
 
   // Render
   render() {
-    const { invoices, dateFormat } = this.props;
+    const { invoices, dateFormat, currencyPlacement } = this.props;
     const invoicesComponent = invoices.map((invoice, index) => (
       <Invoice
         key={invoice._id}
@@ -89,6 +89,7 @@ class Invoices extends PureComponent {
         setInvoiceStatus={this.setInvoiceStatus}
         index={index}
         dateFormat={dateFormat}
+        currencyPlacement={currencyPlacement}
         invoice={invoice}
       />
     ));
@@ -119,6 +120,7 @@ Invoices.propTypes = {
 const mapStateToProps = state => ({
   invoices: getInvoices(state),
   dateFormat: getDateFormat(state),
+  currencyPlacement: getCurrencyPlacement(state),
 });
 
 export default compose(connect(mapStateToProps), _withFadeInAnimation)(

app/containers/Settings.jsx

@@ -34,8 +34,9 @@ import _withFadeInAnimation from '../components/shared/hoc/_withFadeInAnimation'
 class Settings extends Component {
   constructor(props) {
     super(props);
-    this.state = { visibleTab: 1 };
+    this.state = { visibleTab: 1, canSave: true };
     this.saveSettingsState = this.saveSettingsState.bind(this);
+    this.setSavable = this.setSavable.bind(this);
   }
 
   // Check if settings have been saved
@@ -55,15 +56,20 @@ class Settings extends Component {
     this.setState({ visibleTab: tabNum });
   }
 
+  // controls if save button appears
+  setSavable(settingsValid) {
+    this.setState({canSave: settingsValid});
+  }
+
   // Render Main Content
   renderSettingsContent() {
     const { profile, general, invoice } = this.props.currentSettings;
-    const { updateSettings } = this.props.boundActionCreators;
+    const { updateSettings, notifyInvalidDecimalFractions } = this.props.boundActionCreators;
     return (
       <PageWrapper>
         <PageHeader>
           <PageHeaderTitle>Settings</PageHeaderTitle>
-          {!this.settingsSaved() && (
+          {!this.settingsSaved() && this.state.canSave && (
             <PageHeaderActions>
               <Button primary onClick={this.saveSettingsState}>
                 Save
@@ -97,13 +103,13 @@ class Settings extends Component {
           </Tabs>
           <TabContent>
             {this.state.visibleTab === 1 && (
-              <Profile profile={profile} updateSettings={updateSettings} />
+              <Profile profile={profile} updateSettings={updateSettings} setSavable={this.setSavable} />
             )}
             {this.state.visibleTab === 2 && (
-              <Invoice invoice={invoice} updateSettings={updateSettings} />
+              <Invoice invoice={invoice} updateSettings={updateSettings} setSavable={this.setSavable} invalidFractionMsg={notifyInvalidDecimalFractions} />
             )}
             {this.state.visibleTab === 3 && (
-              <General general={general} updateSettings={updateSettings} />
+              <General general={general} updateSettings={updateSettings} setSavable={this.setSavable} />
             )}
           </TabContent>
         </PageContent>

app/helpers/__tests__/form.spec.js

@@ -65,6 +65,9 @@ describe('getInvoiceData', () => {
           tax: false,
           note: false,
         },
+        decimalFractions: 2,
+        currencyPlacement: 'before',
+        decimalSeparator: 'dot',
       },
       savedSettings: {
         tax: {},
@@ -76,6 +79,9 @@ describe('getInvoiceData', () => {
           tax: false,
           note: false,
         },
+        decimalFractions: 2,
+        currencyPlacement: 'before',
+        decimalSeparator: 'dot',
       },
     };
   });
@@ -277,6 +283,9 @@ describe('validateFormData', () => {
           tax: true,
           note: true,
         },
+        decimalFractions: 2,
+        currencyPlacement: 'before',
+        decimalSeparator: 'dot',
       },
       savedSettings: {
         tax: {
@@ -292,6 +301,9 @@ describe('validateFormData', () => {
           tax: true,
           note: true,
         },
+        decimalFractions: 2,
+        currencyPlacement: 'before',
+        decimalSeparator: 'dot',
       },
     };
   });