Support multiple languages

app/components/form/Currency.jsx

@@ -66,13 +66,16 @@ export class Currency extends Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <Section>
         <Header>
-          <label className="itemLabel">Currency</label>
+          <label className="itemLabel">
+            {t('form:fields:currency')}
+          </label>
           {!this.isSettingsSaved() && (
             <a href="#" onClick={this.saveAsDefault}>
-              <i className="ion-checkmark" /> Save as default?
+              <i className="ion-checkmark" /> {t('common:saveAsDefault')}
             </a>
           )}
         </Header>
@@ -90,6 +93,7 @@ export class Currency extends Component {
 Currency.propTypes = {
   currency: PropTypes.object.isRequired,
   savedSettings: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
   updateFieldData: PropTypes.func.isRequired,
   updateSavedSettings: PropTypes.func.isRequired,
 };

app/components/form/Discount.jsx

@@ -80,18 +80,21 @@ export class Discount extends Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <Section>
         <DiscountWrapper>
-          <label className="itemLabel">Discount</label>
+          <label className="itemLabel">
+            {t('form:fields:discount.name')}
+          </label>
           <DiscountContent>
             <DiscountAmount>
               <input
                 name="amount"
                 type="number"
                 value={this.state.amount}
                 onChange={this.handleInputChange}
-                placeholder="Amount"
+                placeholder={t('common:amount')}
               />
             </DiscountAmount>
             <DiscountType>
@@ -103,7 +106,8 @@ export class Discount extends Component {
                     onChange={this.handleInputChange}
                     checked={this.state.type === 'percentage'}
                     value="percentage"
-                  />Percentage
+                  />
+                  {t('form:fields:discount:percentage')}
                 </label>
               </div>
               <div className="radio">
@@ -114,7 +118,8 @@ export class Discount extends Component {
                     onChange={this.handleInputChange}
                     checked={this.state.type === 'flat'}
                     value="flat"
-                  />Flat Rate
+                  />
+                  {t('form:fields:discount:flat')}
                 </label>
               </div>
             </DiscountType>
@@ -127,6 +132,7 @@ export class Discount extends Component {
 
 Discount.propTypes = {
   discount: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
   updateFieldData: PropTypes.func.isRequired,
 };
 

app/components/form/DueDate.jsx

@@ -46,17 +46,17 @@ export class DueDate extends Component {
   }
 
   render() {
-    const { dueDate } = this.props;
+    const { t, dueDate } = this.props;
     const selectedDate = dueDate.selectedDate
       ? moment(dueDate.selectedDate)
       : null;
     return (
       <Section>
-        <label className="itemLabel">Due Date</label>
+        <label className="itemLabel">{t('form:fields:dueDate:name')}</label>
         <DueDateContent>
           <SingleDatePicker
             id="invoice-duedate"
-            placeholder="Select A Date"
+            placeholder={t('form:fields:dueDate:placeHolder')}
             firstDayOfWeek={1}
             withFullScreenPortal
             displayFormat="DD/MM/YYYY"
@@ -83,6 +83,7 @@ export class DueDate extends Component {
 
 DueDate.propTypes = {
   dueDate: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
   updateFieldData: PropTypes.func.isRequired,
 };
 

app/components/form/ItemRow.jsx

@@ -125,7 +125,7 @@ export class ItemRow extends Component {
   }
 
   render() {
-    const { actions, hasHandler } = this.props;
+    const { t, actions, hasHandler } = this.props;
     return (
       <ItemDiv>
         {hasHandler && (
@@ -140,7 +140,7 @@ export class ItemRow extends Component {
             value={this.state.description}
             onChange={this.handleTextInputChange}
             onKeyDown={this.handleKeyDown}
-            placeholder="Description"
+            placeholder={t('form:fields:items:description')}
           />
         </div>
 
@@ -151,8 +151,8 @@ export class ItemRow extends Component {
             step="0.01"
             value={this.state.price}
             onChange={this.handleNumberInputChange}
-            placeholder="Price"
             onKeyDown={this.handleKeyDown}
+            placeholder={t('form:fields:items:price')}
           />
         </div>
 
@@ -163,8 +163,8 @@ export class ItemRow extends Component {
             step="0.01"
             value={this.state.quantity}
             onChange={this.handleNumberInputChange}
-            placeholder="Quantity"
             onKeyDown={this.handleKeyDown}
+            placeholder={t('form:fields:items:quantity')}
           />
         </div>
 
@@ -185,6 +185,7 @@ export class ItemRow extends Component {
 ItemRow.propTypes = {
   actions: PropTypes.bool.isRequired,
   addItem: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
   hasHandler: PropTypes.bool.isRequired,
   item: PropTypes.object.isRequired,
   removeRow: PropTypes.func.isRequired,

app/components/form/ItemsList.jsx

@@ -1,6 +1,7 @@
 // Libs
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
 
 // Redux
 import { compose } from 'recompose';
@@ -70,11 +71,12 @@ export class ItemsList extends PureComponent {
     // Bound Actions
     const { addItem, removeItem, updateItem } = this.props.boundActionCreators;
     // Item Rows
-    const { rows } = this.props;
+    const { t, rows } = this.props;
     const rowsComponent = rows.map((item, index) => (
       <ItemRow
         key={item.id}
         item={item}
+        t={t}
         hasHandler={rows.length > 1}
         actions={index !== 0}
         updateRow={updateItem}
@@ -88,7 +90,7 @@ export class ItemsList extends PureComponent {
       <Section>
         <ItemsListWrapper>
           <ItemsListHeader>
-            <label className="itemLabel">Product/Service *</label>
+            <label className="itemLabel">{t('form:fields:items:name')} *</label>
           </ItemsListHeader>
           <ItemsListDiv>
             <TransitionList componentHeight={50}>
@@ -97,7 +99,7 @@ export class ItemsList extends PureComponent {
           </ItemsListDiv>
           <div className="itemsListActions">
             <ItemsListActionsBtn primary onClick={addItem}>
-              Add An Item
+              {t('form:fields:items:add')}
             </ItemsListActionsBtn>
           </div>
         </ItemsListWrapper>
@@ -123,5 +125,6 @@ const mapDispatchToProps = dispatch => ({
 // Export
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
+  translate('form'),
   _withDragNDrop
 )(ItemsList);

app/components/form/Note.jsx

@@ -50,15 +50,16 @@ export class Note extends Component {
   }
 
   render() {
+    const { t } = this.props;
     return (
       <Section>
-        <label className="itemLabel">Note</label>
+        <label className="itemLabel">{t('form:fields:note')}</label>
         <NoteContent
           cols="50"
           rows="4"
           onChange={this.handleInputChange}
-          placeholder="Note"
           value={this.state.content}
+          placeholder={t('form:fields:note')}
         />
       </Section>
     );
@@ -67,6 +68,7 @@ export class Note extends Component {
 
 Note.propTypes = {
   note: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
   updateFieldData: PropTypes.func.isRequired,
 };
 

app/components/form/Recipient.jsx

@@ -1,6 +1,8 @@
 // Libraries
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { compose } from 'recompose';
+import { translate } from 'react-i18next';
 
 // Redux & Selectors
 import { getContacts } from '../../reducers/ContactsReducer';
@@ -85,10 +87,11 @@ export class Recipient extends Component {
 
   // Render Form or Select Input
   renderComponent() {
-    const { contacts } = this.props;
+    const { t, contacts } = this.props;
     if (contacts.length === 0) {
       return (
         <RecipientForm
+          t={t}
           formData={this.state.new}
           updateRecipientForm={this.updateRecipientForm}
         />
@@ -98,6 +101,7 @@ export class Recipient extends Component {
     if (this.state.newRecipient) {
       return (
         <RecipientForm
+          t={t}
           formData={this.state.new}
           updateRecipientForm={this.updateRecipientForm}
         />
@@ -114,10 +118,10 @@ export class Recipient extends Component {
 
   // Render
   render() {
-    const { contacts } = this.props;
+    const { t, contacts } = this.props;
     return (
       <Section>
-        <label className="itemLabel">Client *</label>
+        <label className="itemLabel">{t('form:fields:recipient:name')} *</label>
         {this.renderComponent()}
         {contacts.length > 0 ? (
           <div>
@@ -129,7 +133,7 @@ export class Recipient extends Component {
                   checked={this.state.newRecipient === true}
                   value="new"
                 />
-                Add New
+                {t('form:fields:recipient:add')}
               </label>
             </div>
             <div className="radio">
@@ -140,7 +144,7 @@ export class Recipient extends Component {
                   checked={this.state.newRecipient === false}
                   value="select"
                 />
-                Select
+                {t('form:fields:recipient:select')}
               </label>
             </div>
           </div>
@@ -167,4 +171,7 @@ const mapStateToProps = state => ({
   recipient: getRecipient(state),
 });
 
-export default connect(mapStateToProps)(Recipient);
+export default compose(
+  connect(mapStateToProps),
+  translate('form'),
+)(Recipient);

app/components/form/RecipientForm.jsx

@@ -25,13 +25,13 @@ const Field = styled.div`
   margin: 0 15px 20px 15px;
 `;
 
-export function RecipientForm({ formData, updateRecipientForm }) {
+export function RecipientForm({ t, formData, updateRecipientForm }) {
   const { fullname, company, email, phone } = formData;
   return (
     <Form>
       <Row>
         <Field>
-          <label className="itemLabel">Full Name *</label>
+          <label className="itemLabel">{t('common:fields:fullname')} *</label>
           <input
             name="fullname"
             type="text"
@@ -40,7 +40,7 @@ export function RecipientForm({ formData, updateRecipientForm }) {
           />
         </Field>
         <Field>
-          <label className="itemLabel">Company</label>
+          <label className="itemLabel">{t('common:fields:company')}</label>
           <input
             name="company"
             type="text"
@@ -51,7 +51,7 @@ export function RecipientForm({ formData, updateRecipientForm }) {
       </Row>
       <Row>
         <Field>
-          <label className="itemLabel">Email *</label>
+          <label className="itemLabel">{t('common:fields:email')} *</label>
           <input
             name="email"
             type="text"
@@ -60,7 +60,7 @@ export function RecipientForm({ formData, updateRecipientForm }) {
           />
         </Field>
         <Field>
-          <label className="itemLabel">Phone Number</label>
+          <label className="itemLabel">{t('common:fields:phone')}</label>
           <input
             name="phone"
             type="text"
@@ -76,6 +76,7 @@ export function RecipientForm({ formData, updateRecipientForm }) {
 // PropTypes Validation
 RecipientForm.propTypes = {
   formData: PropTypes.object,
+  t: PropTypes.func.isRequired,
   updateRecipientForm: PropTypes.func.isRequired,
 };