Translated Invoices & Invoice components

Also updated Form container
erudman21 · Jan 27, 2018 · ae7f30d · ae7f30d
1 parent 6fd7abf
commit ae7f30d
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 28 deletions.
diff --git a/app/components/invoices/Invoice.jsx b/app/components/invoices/Invoice.jsx
@@ -3,8 +3,6 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { truncate } from 'lodash';
 import styled from 'styled-components';
-
-const format = require('date-fns/format');
 const moment = require('moment');
 const ipc = require('electron').ipcRenderer;
 
@@ -120,6 +118,7 @@ const Field = styled.div`
   align-items: flex-start;
   justify-content: center;
   margin-bottom: 15px;
+  text-transform: capitalize;
   h2 {
     font-size: 21px;
     color: #283641;
@@ -166,15 +165,15 @@ class Invoice extends PureComponent {
   }
 
   displayStatus() {
-    const { invoice } = this.props;
+    const { t, invoice } = this.props;
     const { status } = invoice;
     const { recipient } = invoice;
     switch (status) {
       case 'cancelled': {
         return (
           <span>
             <i className="ion-backspace" />
-            Cancelled
+            {t('invoices:status:cancelled')}
           </span>
         );
       }
@@ -183,7 +182,7 @@ class Invoice extends PureComponent {
         return (
           <span>
             <i className="ion-checkmark" />
-            Paid
+            {t('invoices:status:paid')}
           </span>
         );
       }
@@ -192,35 +191,36 @@ class Invoice extends PureComponent {
         return (
           <span>
             <i className="ion-arrow-return-left" />
-            Refunded
+            {t('invoices:status:refunded')}
           </span>
         );
       }
       default: {
         return (
           <span>
             <i className="ion-loop" />
-            Pending
+            {t('invoices:status:pending')}
           </span>
         );
       }
     }
   }
 
   render() {
-    const { invoice, setInvoiceStatus, dateFormat } = this.props;
+    const { dateFormat, invoice, language, setInvoiceStatus, t } = this.props;
+    moment.locale(language);
     const { recipient, status } = invoice;
     const statusActions = [
       {
-        label: 'Pending',
+        label: t('invoices:status:pending'),
         action: () => setInvoiceStatus(invoice._id, 'pending'),
       },
       {
-        label: 'Refunded',
+        label: t('invoices:status:refunded'),
         action: () => setInvoiceStatus(invoice._id, 'refunded'),
       },
       {
-        label: 'Cancelled',
+        label: t('invoices:status:cancelled'),
         action: () => setInvoiceStatus(invoice._id, 'cancelled'),
       },
     ];
@@ -237,13 +237,13 @@ class Invoice extends PureComponent {
           <Body>
             <Row>
               <Field>
-                <label>Client</label>
+                <label>{t('invoices:fields:client')}</label>
                 <h2>{recipient.fullname}</h2>
               </Field>
             </Row>
             <Row>
               <Field>
-                <label>Invoice Id</label>
+                <label>{t('invoices:fields:invoiceID')}</label>
                 <p>
                   {truncate(invoice._id, {
                     length: 8,
@@ -252,19 +252,21 @@ class Invoice extends PureComponent {
                 </p>
               </Field>
               <Field>
-                <label>Total Value</label>
+                <label>{t('invoices:fields:total')}</label>
                 <p>
                   {invoice.currency.code} {formatNumber(invoice.grandTotal)}
                 </p>
               </Field>
             </Row>
             <Row>
               <Field>
-                <label>Created On</label>
-                <p>{format(invoice.created_at, dateFormat)}</p>
+                <label>{t('invoices:fields:createdDate')}</label>
+                <p>
+                  {moment(invoice.created_at).format(dateFormat)}
+                </p>
               </Field>
               <Field>
-                <label>Due Date</label>
+                <label>{t('invoices:fields:dueDate')}</label>
                 <p>
                   {invoice.dueDate
                     ? moment(invoice.dueDate).format(dateFormat)
@@ -276,13 +278,13 @@ class Invoice extends PureComponent {
           <Footer>
             <SplitButton
               mainButton={{
-                label: 'Mark As Paid',
+                label: t('invoices:btns:markAsPaid'),
                 action: () => setInvoiceStatus(invoice._id, 'paid'),
               }}
               options={statusActions}
             />
-            <Button onClick={this.editInvoice}>Edit</Button>
-            <Button onClick={this.viewInvoice}>View</Button>
+            <Button onClick={this.editInvoice}>{t('invoices:btns:edit')}</Button>
+            <Button onClick={this.viewInvoice}>{t('invoices:btns:view')}</Button>
           </Footer>
         </Wrapper>
       </div>
@@ -291,11 +293,13 @@ class Invoice extends PureComponent {
 }
 
 Invoice.propTypes = {
-  editInvoice: PropTypes.func.isRequired,
+  dateFormat: PropTypes.string.isRequired,
   deleteInvoice: PropTypes.func.isRequired,
+  editInvoice: PropTypes.func.isRequired,
   invoice: PropTypes.object.isRequired,
+  language: PropTypes.string.isRequired,
   setInvoiceStatus: PropTypes.func.isRequired,
-  dateFormat: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
 };
 
 export default Invoice;
diff --git a/app/containers/Form.jsx b/app/containers/Form.jsx
@@ -59,7 +59,12 @@ class Form extends PureComponent {
     return (
       <PageWrapper>
         <PageHeader>
-          <PageHeaderTitle>{t('form:header:name')}</PageHeaderTitle>
+          <PageHeaderTitle>
+            { editMode.active
+              ? t('form:header:edit')
+              : t('form:header:new')
+            }
+          </PageHeaderTitle>
           <PageHeaderActions>
             <Button danger onClick={clearForm}>
               {t('form:header:btns:clear')}

diff --git a/app/containers/Invoices.jsx b/app/containers/Invoices.jsx
@@ -5,6 +5,7 @@ import { compose } from 'recompose';
 import { connect } from 'react-redux';
 const openDialog = require('../renderers/dialog.js');
 const ipc = require('electron').ipcRenderer;
+import { translate } from 'react-i18next';
 
 // Actions
 import * as Actions from '../actions/invoices';
@@ -80,9 +81,11 @@ class Invoices extends PureComponent {
 
   // Render
   render() {
-    const { invoices, dateFormat } = this.props;
+    const { t, i18n, invoices, dateFormat } = this.props;
     const invoicesComponent = invoices.map((invoice, index) => (
       <Invoice
+        t={t}
+        language={i18n.language}
         key={invoice._id}
         deleteInvoice={this.deleteInvoice}
         editInvoice={this.editInvoice}
@@ -95,7 +98,7 @@ class Invoices extends PureComponent {
     return (
       <PageWrapper>
         <PageHeader>
-          <PageHeaderTitle>All Invoices</PageHeaderTitle>
+          <PageHeaderTitle>{t('invoices:header:name')}</PageHeaderTitle>
         </PageHeader>
         <PageContent bare>
           {invoices.length === 0 ? (
@@ -121,6 +124,8 @@ const mapStateToProps = state => ({
   dateFormat: getDateFormat(state),
 });
 
-export default compose(connect(mapStateToProps), _withFadeInAnimation)(
-  Invoices
-);
+export default compose(
+  connect(mapStateToProps),
+  translate(['common', 'form', 'invoices']),
+  _withFadeInAnimation
+)(Invoices);