From 1a810858a78cb7b22de9b9e1a79137bac5da6429 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 22:36:20 +0700
Subject: [PATCH 01/17] Happy Lunar New Year!

Also, removed namespaces from translate HOCs
---
 app/components/form/ItemsList.jsx | 2 +-
 app/components/form/Recipient.jsx | 2 +-
 app/containers/Contacts.jsx       | 2 +-
 app/containers/Form.jsx           | 2 +-
 app/containers/Invoices.jsx       | 2 +-
 app/containers/Settings.jsx       | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/components/form/ItemsList.jsx b/app/components/form/ItemsList.jsx
index 277d03ca..d0d923d0 100644
--- a/app/components/form/ItemsList.jsx
+++ b/app/components/form/ItemsList.jsx
@@ -125,6 +125,6 @@ const mapDispatchToProps = dispatch => ({
 // Export
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  translate('form'),
+  translate(),
   _withDragNDrop
 )(ItemsList);
diff --git a/app/components/form/Recipient.jsx b/app/components/form/Recipient.jsx
index 28e85f6e..30e652fc 100644
--- a/app/components/form/Recipient.jsx
+++ b/app/components/form/Recipient.jsx
@@ -173,5 +173,5 @@ const mapStateToProps = state => ({
 
 export default compose(
   connect(mapStateToProps),
-  translate('form'),
+  translate(),
 )(Recipient);
diff --git a/app/containers/Contacts.jsx b/app/containers/Contacts.jsx
index 17738a70..6c93f699 100644
--- a/app/containers/Contacts.jsx
+++ b/app/containers/Contacts.jsx
@@ -124,6 +124,6 @@ const mapStateToProps = state => ({
 
 export default compose(
   connect(mapStateToProps),
-  translate(['common', 'form']),
+  translate(),
   _withFadeInAnimation
 )(Contacts);
diff --git a/app/containers/Form.jsx b/app/containers/Form.jsx
index efc37fd8..ad4e8c0c 100644
--- a/app/containers/Form.jsx
+++ b/app/containers/Form.jsx
@@ -184,6 +184,6 @@ const mapDispatchToProps = dispatch => ({
 // Export
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  translate(['common', 'form']),
+  translate(),
   _withFadeInAnimation
 )(Form);
diff --git a/app/containers/Invoices.jsx b/app/containers/Invoices.jsx
index a4b34578..b942b78f 100644
--- a/app/containers/Invoices.jsx
+++ b/app/containers/Invoices.jsx
@@ -130,6 +130,6 @@ const mapStateToProps = state => ({
 
 export default compose(
   connect(mapStateToProps),
-  translate(['common', 'form', 'invoices']),
+  translate(),
   _withFadeInAnimation
 )(Invoices);
diff --git a/app/containers/Settings.jsx b/app/containers/Settings.jsx
index 337e6595..8448acb3 100644
--- a/app/containers/Settings.jsx
+++ b/app/containers/Settings.jsx
@@ -147,6 +147,6 @@ const mapStateToProps = state => ({
 
 export default compose(
   connect(mapStateToProps, mapDispatchToProps),
-  translate(['common', 'form', 'settings']),
+  translate(),
   _withFadeInAnimation
 )(Settings);

From e8413d4251057b86e98eda79cb8dee010623de73 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 22:49:04 +0700
Subject: [PATCH 02/17] Refactored previewWindow components

- Merged Invoice component into mainContent component
- Move all event handlers from mainContent to Viewer
- Viewer now connect to translate HOC and pass props down to sideBar and mainContent
---
 preview/Viewer.jsx                  | 100 +++++++++++++++++++++++++---
 preview/components/main/Invoice.jsx |  52 ---------------
 preview/containers/MainContent.jsx  |  89 ++++++++++---------------
 preview/containers/SideBar.jsx      |  82 +++++++++++++----------
 4 files changed, 171 insertions(+), 152 deletions(-)
 delete mode 100644 preview/components/main/Invoice.jsx

diff --git a/preview/Viewer.jsx b/preview/Viewer.jsx
index 314b9041..284bc20e 100644
--- a/preview/Viewer.jsx
+++ b/preview/Viewer.jsx
@@ -1,5 +1,11 @@
 // Libs
-import React from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+import { Notify } from '../helpers/notify';
+import { connect } from 'react-redux';
+import { compose } from 'recompose';
+const ipc = require('electron').ipcRenderer;
 
 // Style
 import styled from 'styled-components';
@@ -12,14 +18,90 @@ const Wrapper = styled.div`
 import SideBar from './containers/SideBar';
 import MainContent from './containers/MainContent';
 
+// Actions
+import * as ActionsCreator from './actions';
+
+// Selectors
+import { getConfigs, getInvoice, getProfile, getUILang } from './reducers';
+
 // Components
-function Viewer() {
-  return (
-    <Wrapper>
-      <SideBar />
-      <MainContent />
-    </Wrapper>
-  );
+class Viewer extends Component {
+  constructor(props) {
+    super(props);
+    this.updateConfigs = this.updateConfigs.bind(this);
+  }
+
+  componentDidMount() {
+    const { dispatch } = this.props;
+    ipc.on('update-preview', (event, invoiceData) => {
+      dispatch(ActionsCreator.updateInvoice(invoiceData));
+    });
+    ipc.on('change-preview-window-language', (event, newLang) => {
+      dispatch(ActionsCreator.changeUILanguage(newLang));
+    });
+    ipc.on('pfd-exported', (event, options) => {
+      const noti = Notify(options);
+      // Handle click on notification
+      noti.onclick = () => {
+        ipc.send('reveal-file', options.location);
+      };
+    });
+  }
+
+  componentWillUnmount() {
+    ipc.removeAllListeners([
+      'pfd-exported',
+      'update-preview',
+      'update-preview-window',
+    ]);
+  }
+
+  updateConfigs(config) {
+    const { dispatch } = this.props;
+    dispatch(
+      ActionsCreator.updateConfigs({ name: config.name, value: config.value })
+    );
+  }
+
+  render() {
+    const {  t, invoice, configs, profile, UILang } = this.props;
+    return (
+      <Wrapper>
+        <SideBar
+          configs={configs}
+          invoice={invoice}
+          updateConfigs={this.updateConfigs}
+          UILang={UILang}
+          t={t}
+        />
+        <MainContent
+          invoice={invoice}
+          configs={configs}
+          profile={profile}
+          UILang={UILang}
+          t={t}
+        />
+      </Wrapper>
+    );
+  }
 }
 
-export default Viewer;
+Viewer.propTypes = {
+  configs: PropTypes.object.isRequired,
+  profile: PropTypes.object.isRequired,
+  dispatch: PropTypes.func.isRequired,
+  invoice: PropTypes.object.isRequired,
+  t: PropTypes.func.isRequired,
+};
+
+const mapStateToProps = state => ({
+  configs: getConfigs(state),
+  invoice: getInvoice(state),
+  profile: getProfile(state),
+  UILang: getUILang(state),
+});
+
+export default compose(
+  connect(mapStateToProps),
+  translate()
+)(Viewer);
diff --git a/preview/components/main/Invoice.jsx b/preview/components/main/Invoice.jsx
deleted file mode 100644
index 00b55053..00000000
--- a/preview/components/main/Invoice.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-// Libraries
-import React, { PureComponent } from 'react';
-import PropTypes from 'prop-types';
-
-// Style
-import styled from 'styled-components';
-
-const Page = styled.div`
-  position: relative;
-  width: 21cm;
-  height: 29.7cm;
-  min-height: 29.7cm;
-  min-width: 21cm;
-  margin-left: auto;
-  margin-right: auto;
-  background: #FFFFFF;
-  box-shadow: 0 0 10px rgba(0,0,0,.1);
-  display: flex;
-  border-radius: 4px;
-}
-`;
-
-// Templates
-import Minimal from '../../templates/minimal';
-import Business from '../../templates/business';
-
-// Component
-class Invoice extends PureComponent {
-  renderTemplate() {
-    switch (this.props.configs.template) {
-      case 'business': {
-        return <Business {...this.props} />;
-      }
-      default: {
-        return <Minimal {...this.props} />;
-      }
-    }
-  }
-
-  render() {
-    return <Page>{this.renderTemplate()}</Page>;
-  }
-}
-
-Invoice.propTypes = {
-  configs: PropTypes.object.isRequired,
-  invoice: PropTypes.object.isRequired,
-  profile: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-};
-
-export default Invoice;
diff --git a/preview/containers/MainContent.jsx b/preview/containers/MainContent.jsx
index 49653502..44a6b600 100644
--- a/preview/containers/MainContent.jsx
+++ b/preview/containers/MainContent.jsx
@@ -1,20 +1,10 @@
 // Libs
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'recompose';
-import { translate } from 'react-i18next';
-const ipc = require('electron').ipcRenderer;
-import { Notify } from '../../helpers/notify';
-
-// Actions
-import * as ActionsCreator from '../actions';
-
-// Selectors
-import { getConfigs, getInvoice, getProfile } from '../reducers';
 
 // Styles
 import styled from 'styled-components';
+
 const Wrapper = styled.div`
   display: flex;
   width: 100%;
@@ -35,47 +25,45 @@ const Message = styled.p`
   margin: 0;
 `;
 
-// Components
-import Invoice from '../components/main/Invoice';
+const Page = styled.div`
+  position: relative;
+  width: 21cm;
+  height: 29.7cm;
+  min-height: 29.7cm;
+  min-width: 21cm;
+  margin-left: auto;
+  margin-right: auto;
+  background: #FFFFFF;
+  box-shadow: 0 0 10px rgba(0,0,0,.1);
+  display: flex;
+  border-radius: 4px;
+`;
 
-class MainContent extends PureComponent {
-  componentDidMount() {
-    const { dispatch } = this.props;
-    ipc.on('update-preview', (event, invoiceData) => {
-      dispatch(ActionsCreator.updateInvoice(invoiceData));
-    });
-    ipc.on('update-preview-window', (event, newConfigs) => {
-      dispatch(ActionsCreator.reloadConfigs(newConfigs));
-    });
-    ipc.on('pfd-exported', (event, options) => {
-      const noti = Notify(options);
-      // Handle click on notification
-      noti.onclick = () => {
-        ipc.send('reveal-file', options.location);
-      };
-    });
-  }
+// Components
+import Minimal from '../templates/minimal';
+import Business from '../templates/business';
 
-  componentWillUnmount() {
-    ipc.removeAllListeners([
-      'pfd-exported',
-      'update-preview',
-      'update-preview-window',
-    ]);
+class MainContent extends Component {
+  renderTemplate() {
+    switch (this.props.configs.template) {
+      case 'business': {
+        return <Business {...this.props} />;
+      }
+      default: {
+        return <Minimal {...this.props} />;
+      }
+    }
   }
 
   render() {
-    const { t, invoice, configs, profile } = this.props;
+    const { t, invoice  } = this.props;
     return (
       <Wrapper>
         {invoice._id ? (
           <div className="print-area">
-            <Invoice
-              t={t}
-              configs={configs}
-              invoice={invoice}
-              profile={profile}
-            />
+            <Page>
+              {this.renderTemplate()}
+            </Page>
           </div>
         ) : (
           <Message>{t('preview:common:chooseInvoiceToPreview')}</Message>
@@ -87,19 +75,10 @@ class MainContent extends PureComponent {
 
 MainContent.propTypes = {
   configs: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
   invoice: PropTypes.object.isRequired,
   profile: PropTypes.object.isRequired,
+  UILang: PropTypes.string.isRequired,
   t: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  configs: getConfigs(state),
-  invoice: getInvoice(state),
-  profile: getProfile(state),
-});
-
-export default compose(
-  connect(mapStateToProps),
-  translate(['common', 'preview'])
-)(MainContent);
+export default MainContent;
diff --git a/preview/containers/SideBar.jsx b/preview/containers/SideBar.jsx
index e5820c0f..de7ca7b5 100644
--- a/preview/containers/SideBar.jsx
+++ b/preview/containers/SideBar.jsx
@@ -1,17 +1,10 @@
 // Libs
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'recompose';
-import { translate } from 'react-i18next';
 const ipc = require('electron').ipcRenderer;
+import i18n from '../../i18n/i18n';
 
-// Actions
-import * as ActionsCreator from '../actions';
-
-// Selector
-import { getConfigs, getInvoice } from '../reducers';
-
+// Style
 import styled from 'styled-components';
 const Wrapper = styled.div`
   flex: 1;
@@ -30,55 +23,76 @@ const Wrapper = styled.div`
 `;
 
 // Components
-import Template from '../components/sidebar/Template';
+import AccentColor from '../components/sidebar/AccentColor';
+import Actions from '../components/sidebar/Actions';
 import Alignment from '../components/sidebar/Alignment';
+import DateFormat from '../components/sidebar/DateFormat';
 import FontSize from '../components/sidebar/FontSize';
+import Language from '../components/sidebar/Language';
+import Template from '../components/sidebar/Template';
 import Toggler from '../components/sidebar/Toggler';
-import AccentColor from '../components/sidebar/AccentColor';
-import Actions from '../components/sidebar/Actions';
 
-class SideBar extends PureComponent {
+class SideBar extends Component {
   constructor(props) {
     super(props);
     this.savePDF = this.savePDF.bind(this);
+    this.saveConfigs = this.saveConfigs.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleAccentColorChange = this.handleAccentColorChange.bind(this);
-    this.updateConfigs = this.updateConfigs.bind(this);
   }
 
   handleInputChange(event) {
     const target = event.target;
     const value = target.type === 'checkbox' ? target.checked : target.value;
     const name = target.name;
-    this.updateConfigs({ name, value });
+    this.props.updateConfigs({ name, value });
   }
 
   handleAccentColorChange(color) {
-    this.updateConfigs({ name: 'accentColor', value: color });
-  }
-
-  updateConfigs(config) {
-    const { dispatch } = this.props;
-    dispatch(
-      ActionsCreator.updateConfigs({ name: config.name, value: config.value })
-    );
+    this.props.updateConfigs({ name: 'accentColor', value: color });
   }
 
   savePDF() {
     const invoiceID = this.props.invoice._id;
     ipc.send('save-pdf', invoiceID);
+    // Always save template configs to invocie when export to PDF
+    this.saveConfigs();
+  }
+
+  saveConfigs() {
+    const { configs, invoice } = this.props;
+    const { _id: invoiceID } = invoice;
+    ipc.send('save-configs-to-invoice', invoiceID, configs);
   }
 
   render() {
     const { t, configs } = this.props;
-    const { template, alignItems, fontSize, accentColor } = configs;
+    const {
+      dateFormat,
+      template,
+      language,
+      alignItems,
+      fontSize,
+      accentColor
+    } = configs;
     return (
       <Wrapper>
+        <Language
+          t={t}
+          language={language}
+          handleInputChange={this.handleInputChange}
+        />
         <Template
           t={t}
           template={template}
           handleInputChange={this.handleInputChange}
         />
+        <DateFormat
+          t={t}
+          language={language}
+          dateFormat={dateFormat}
+          handleInputChange={this.handleInputChange}
+        />
         <Alignment
           t={t}
           alignItems={alignItems}
@@ -99,7 +113,11 @@ class SideBar extends PureComponent {
           accentColor={accentColor}
           handleAccentColorChange={this.handleAccentColorChange}
         />
-        <Actions t={t} savePDF={this.savePDF} />
+        <Actions
+          t={t}
+          savePDF={this.savePDF}
+          saveConfigs={this.saveConfigs}
+        />
       </Wrapper>
     );
   }
@@ -107,17 +125,9 @@ class SideBar extends PureComponent {
 
 SideBar.propTypes = {
   configs: PropTypes.object.isRequired,
-  dispatch: PropTypes.func.isRequired,
+  updateConfigs: PropTypes.func.isRequired,
   invoice: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired,
 };
 
-const mapStateToProps = state => ({
-  invoice: getInvoice(state),
-  configs: getConfigs(state),
-});
-
-export default compose(
-  connect(mapStateToProps),
-  translate(['common', 'preview'])
-)(SideBar);
+export default SideBar;

From f4d230fcfe16926ef3bcf3592b9b1f192e630447 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:06:54 +0700
Subject: [PATCH 03/17] Only notify previewWindow when the UI language changes

Also added action and update reducer to handle this change
---
 app/middlewares/SettingsMW.jsx | 15 ++++++++++-----
 main/preview-window.js         | 13 +++++++++++++
 preview/actions/index.jsx      |  5 +++++
 preview/constants/actions.jsx  |  3 +++
 preview/reducers/index.jsx     | 27 ++++++++++++++++++++++-----
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/app/middlewares/SettingsMW.jsx b/app/middlewares/SettingsMW.jsx
index 85bdd441..caa9f427 100644
--- a/app/middlewares/SettingsMW.jsx
+++ b/app/middlewares/SettingsMW.jsx
@@ -32,16 +32,21 @@ const SettingsMW = ({ dispatch }) => next => action => {
       // Validation
       if (!validateTax(true, action.payload.invoice.tax)) break;
       if (!validateCurrency(true, action.payload.invoice.currency)) break;
-      // Sate Settings
+      // Change UI language
+      const currentLang = appConfig.get('general.language');
+      const newLang = action.payload.general.language;
+      if (currentLang !== newLang) {
+        // Change the language
+        i18n.changeLanguage(newLang);
+        // Notify previewWindow to update
+        ipc.send('change-preview-window-language', newLang);
+      }
+      // Save Settings
       appConfig.set('profile', action.payload.profile);
       appConfig.set('invoice', action.payload.invoice);
       appConfig.set('general', action.payload.general);
-      // Change language
-      i18n.changeLanguage(appConfig.get('general.language'));
       // Reload Sounds Cache
       sounds.preload();
-      // Notify previewWindow to update
-      ipc.send('update-preview-window', action.payload);
       // Continue
       next(action);
       // Create Notification
diff --git a/main/preview-window.js b/main/preview-window.js
index 71710623..4a09a8ac 100644
--- a/main/preview-window.js
+++ b/main/preview-window.js
@@ -3,6 +3,8 @@ const { BrowserWindow, ipcMain } = require('electron');
 const appConfig = require('electron-settings');
 const previewWindowID = appConfig.get('previewWindowID');
 const previewWindow = BrowserWindow.fromId(previewWindowID);
+const mainWindowID = appConfig.get('mainWindowID');
+const mainWindow = BrowserWindow.fromId(mainWindowID);
 
 ipcMain.on('preview-invoice', (event, invoiceData) => {
   // Show & Focus
@@ -12,6 +14,17 @@ ipcMain.on('preview-invoice', (event, invoiceData) => {
   previewWindow.webContents.send('update-preview', invoiceData);
 });
 
+// Update Preview window Config
 ipcMain.on('update-preview-window', (event, newConfigs) => {
   previewWindow.webContents.send('update-preview-window', newConfigs);
 });
+
+// Change UI language for Preview Window
+ipcMain.on('change-preview-window-language', (event, newLang) => {
+  previewWindow.webContents.send('change-preview-window-language', newLang);
+});
+
+// Save configs to invoice
+ipcMain.on('save-configs-to-invoice', (event, invoiceID, configs) => {
+  mainWindow.webContents.send('save-configs-to-invoice', invoiceID, configs);
+});
diff --git a/preview/actions/index.jsx b/preview/actions/index.jsx
index 5627e04e..dad10065 100644
--- a/preview/actions/index.jsx
+++ b/preview/actions/index.jsx
@@ -11,6 +11,11 @@ export const updateConfigs = createAction(
   configs => configs
 );
 
+export const changeUILanguage = createAction(
+  ACTION_TYPES.UI_CHANGE_LANGUAGE,
+  language => language
+);
+
 export const reloadConfigs = createAction(
   ACTION_TYPES.SETTINGS_RELOAD_CONFIGS,
   newConfigs => newConfigs
diff --git a/preview/constants/actions.jsx b/preview/constants/actions.jsx
index 8d7389b5..d33fe6f6 100644
--- a/preview/constants/actions.jsx
+++ b/preview/constants/actions.jsx
@@ -1,6 +1,9 @@
 // Invoice
 export const INVOICE_UPDATE = 'INVOICE_UPDATE';
 
+// UI
+export const UI_CHANGE_LANGUAGE = 'UI_CHANGE_LANGUAGE';
+
 // Settings
 export const SETTINGS_RELOAD_CONFIGS  = 'SETTINGS_RELOAD_CONFIGS';
 export const SETTINGS_UPDATE_CONFIGS = 'SETTINGS_UPDATE_CONFIGS';
diff --git a/preview/reducers/index.jsx b/preview/reducers/index.jsx
index b4972c4d..a571b1c9 100644
--- a/preview/reducers/index.jsx
+++ b/preview/reducers/index.jsx
@@ -1,25 +1,31 @@
-import * as ACTION_TYPES from '../constants/actions.jsx';
+// Libs
+import * as ACTION_TYPES from '../constants/actions';
 import { createSelector } from 'reselect';
 import { handleActions } from 'redux-actions';
 const appConfig = require('electron').remote.require('electron-settings');
 const invoiceSettings = appConfig.get('invoice');
-const profile = appConfig.get('profile');
+const profileSettings = appConfig.get('profile');
+const generalSettings = appConfig.get('general');
 
 const initialState = {
+  ui: { language: generalSettings.language },
   invoice: {},
-  profile,
+  profile: profileSettings,
   configs: {
     accentColor: {
       useCustom: false,
       color: '#2CCCE4',
     },
+    // Set default from settings
+    dateFormat: invoiceSettings.dateFormat,
+    language: generalSettings.language,
+    template: invoiceSettings.template,
+    // Other settings
     alignItems: 'middle',
     fontSize: '200',
     showLogo: true,
     showRecipient: true,
     useSymbol: true,
-    template: invoiceSettings.template,
-    dateFormat: invoiceSettings.dateFormat,
   },
 };
 
@@ -28,6 +34,13 @@ const RootReducer = handleActions(
     [ACTION_TYPES.INVOICE_UPDATE]: (state, action) =>
       Object.assign({}, state, {
         invoice: action.payload,
+        configs: action.payload.configs ? action.payload.configs : state.configs
+      }),
+    [ACTION_TYPES.UI_CHANGE_LANGUAGE]: (state, action) =>
+      Object.assign({}, state, {
+        ui: Object.assign({}, state.ui, {
+          language: action.payload
+        })
       }),
     [ACTION_TYPES.SETTINGS_UPDATE_CONFIGS]: (state, action) =>
       Object.assign({}, state, {
@@ -40,6 +53,7 @@ const RootReducer = handleActions(
       return Object.assign({}, state, {
         profile,
         configs: Object.assign({}, state.configs, {
+          language: general.language,
           template: invoice.template,
           dateFormat: invoice.dateFormat,
         }),
@@ -56,3 +70,6 @@ const getState = state => state;
 export const getConfigs = createSelector(getState, state => state.configs);
 export const getInvoice = createSelector(getState, state => state.invoice);
 export const getProfile = createSelector(getState, state => state.profile);
+export const getUILang  = createSelector(getState, state => state.ui.language);
+export const getInvoiceLang  = createSelector(getState, state => state.invoice.language);
+

From 42faca737c129323516052135135a283a4c84b62 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:10:33 +0700
Subject: [PATCH 04/17] Pass UILang props down to each sideBar sub components

Also added Language and Date Format config
---
 preview/Viewer.jsx                         |  1 +
 preview/components/sidebar/AccentColor.jsx | 11 +++--
 preview/components/sidebar/Actions.jsx     | 13 +++--
 preview/components/sidebar/Alignment.jsx   | 13 +++--
 preview/components/sidebar/DateFormat.jsx  | 55 ++++++++++++++++++++++
 preview/components/sidebar/FontSize.jsx    |  7 ++-
 preview/components/sidebar/Language.jsx    | 30 ++++++++++++
 preview/components/sidebar/Template.jsx    |  7 ++-
 preview/components/sidebar/Toggler.jsx     | 13 +++--
 preview/containers/SideBar.jsx             | 11 ++++-
 10 files changed, 139 insertions(+), 22 deletions(-)
 create mode 100644 preview/components/sidebar/DateFormat.jsx
 create mode 100644 preview/components/sidebar/Language.jsx

diff --git a/preview/Viewer.jsx b/preview/Viewer.jsx
index 284bc20e..afacdd96 100644
--- a/preview/Viewer.jsx
+++ b/preview/Viewer.jsx
@@ -68,6 +68,7 @@ class Viewer extends Component {
     return (
       <Wrapper>
         <SideBar
+          UILang={UILang}
           configs={configs}
           invoice={invoice}
           updateConfigs={this.updateConfigs}
diff --git a/preview/components/sidebar/AccentColor.jsx b/preview/components/sidebar/AccentColor.jsx
index 995bc48a..0c667c63 100644
--- a/preview/components/sidebar/AccentColor.jsx
+++ b/preview/components/sidebar/AccentColor.jsx
@@ -1,5 +1,5 @@
 // Libs
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { BlockPicker } from 'react-color';
 import { Section, Label } from '../shared';
@@ -48,7 +48,7 @@ const Cover = styled.div`
   left: 0px;
 `;
 
-class AccentColor extends PureComponent {
+class AccentColor extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -97,10 +97,10 @@ class AccentColor extends PureComponent {
       '#dce775',
       '#ff8a65',
     ];
-    const { t } = this.props;
+    const { t, UILang } = this.props;
     return (
       <Section>
-        <Label>{ t('preview:sidebar:accentColor:name') }</Label>
+        <Label>{t('preview:sidebar:accentColor:name', { lng: UILang })}</Label>
         <label>
           <input
             type="checkbox"
@@ -108,7 +108,7 @@ class AccentColor extends PureComponent {
             onChange={this.handleInputChange}
           />
           {'\u00A0'}
-          { t('preview:sidebar:accentColor:useCustom') }
+          {t('preview:sidebar:accentColor:useCustom', { lng: UILang })}
         </label>
         <ColorPicker>
           <Swatch onClick={this.handleClick}>
@@ -135,6 +135,7 @@ AccentColor.propTypes = {
   accentColor: PropTypes.object.isRequired,
   handleAccentColorChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default AccentColor;
diff --git a/preview/components/sidebar/Actions.jsx b/preview/components/sidebar/Actions.jsx
index 8ac24162..ecfe9b03 100644
--- a/preview/components/sidebar/Actions.jsx
+++ b/preview/components/sidebar/Actions.jsx
@@ -5,20 +5,27 @@ import PropTypes from 'prop-types';
 import { Section, Label } from '../shared';
 import Button from '../../../app/components/shared/Button';
 
-function Actions({ t, savePDF }) {
+function Actions({ saveConfigs, savePDF, t, UILang }) {
   return (
     <Section>
-      <Label>{t('preview:sidebar:actions:name')}</Label>
+      <Label>
+        {t('preview:sidebar:actions:name', { lng: UILang })}
+      </Label>
       <Button block primary onClick={savePDF}>
-        {t('preview:sidebar:actions:savePDF')}
+        {t('preview:sidebar:actions:savePDF', { lng: UILang })}
+      </Button>
+      <Button block secondary onClick={saveConfigs}>
+        {t('preview:sidebar:actions:saveConfigs', { lng: UILang })}
       </Button>
     </Section>
   );
 }
 
 Actions.propTypes = {
+  saveConfigs: PropTypes.func.isRequired,
   savePDF: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default Actions;
diff --git a/preview/components/sidebar/Alignment.jsx b/preview/components/sidebar/Alignment.jsx
index 77e5ee7a..ee7c5b90 100644
--- a/preview/components/sidebar/Alignment.jsx
+++ b/preview/components/sidebar/Alignment.jsx
@@ -3,14 +3,18 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Section, Label } from '../shared';
 
-function Alignment({ t, alignItems, handleInputChange }) {
+function Alignment({ t, alignItems, handleInputChange, UILang }) {
   return (
     <Section>
-      <Label>{t('preview:sidebar:alignment:name')}</Label>
+      <Label>{t('preview:sidebar:alignment:name', { lng: UILang })}</Label>
       <select name="alignItems" value={alignItems} onChange={handleInputChange}>
         <option value="top">{t('preview:sidebar:alignment:top')}</option>
-        <option value="middle">{t('preview:sidebar:alignment:middle')}</option>
-        <option value="bottom">{t('preview:sidebar:alignment:bottom')}</option>
+        <option value="middle">
+          {t('preview:sidebar:alignment:middle', { lng: UILang })}
+        </option>
+        <option value="bottom">
+          {t('preview:sidebar:alignment:bottom', { lng: UILang })}
+        </option>
       </select>
     </Section>
   );
@@ -20,6 +24,7 @@ Alignment.propTypes = {
   alignItems: PropTypes.string.isRequired,
   handleInputChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default Alignment;
diff --git a/preview/components/sidebar/DateFormat.jsx b/preview/components/sidebar/DateFormat.jsx
new file mode 100644
index 00000000..a718569d
--- /dev/null
+++ b/preview/components/sidebar/DateFormat.jsx
@@ -0,0 +1,55 @@
+// Libs
+import React from 'react';
+import PropTypes from 'prop-types';
+const moment = require('moment');
+
+// Styling
+import { Section, Label } from '../shared';
+
+function DateFormat({ t, dateFormat, handleInputChange, language, UILang }) {
+  return (
+    <Section>
+      <Label>
+        {t('settings:fields:dateFormat', { lng: UILang })}
+      </Label>
+      <select name="dateFormat" value={dateFormat} onChange={handleInputChange}>
+        <option value="dddd, MMMM Do, YYYY">
+          {moment(Date.now()).lang(language).format('dddd, MMMM Do, YYYY')} (dddd, MMMM Do,
+          YYYY)
+        </option>
+        <option value="MMMM Do, YYYY">
+          {moment(Date.now()).lang(language).format('MMMM Do, YYYY')} (MMMM Do, YYYY)
+        </option>
+        <option value="MM/DD/YYYY">
+          {moment(Date.now()).lang(language).format('MM/DD/YYYY')} (MM/DD/YYYY)
+        </option>
+        <option value="MM/DD/YY">
+          {moment(Date.now()).lang(language).format('MM/DD/YY')} (MM/DD/YY)
+        </option>
+        <option value="dddd, DD MMMM YYYY">
+          {moment(Date.now()).lang(language).format('dddd, DD MMMM YYYY')} (dddd, DD MMMM
+          YYYY)
+        </option>
+        <option value="DD/MMMM/YYYY">
+          {moment(Date.now()).lang(language).format('DD/MMMM/YYYY')} (DD/MMMM/YYYY)
+        </option>
+        <option value="DD/MM/YYYY">
+          {moment(Date.now()).lang(language).format('DD/MM/YYYY')} (DD/MM/YYYY)
+        </option>
+        <option value="DD/MM/YY">
+          {moment(Date.now()).lang(language).format('DD/MM/YY')} (DD/MM/YY)
+        </option>
+      </select>
+    </Section>
+  );
+}
+
+DateFormat.propTypes = {
+  dateFormat: PropTypes.string.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  language: PropTypes.string.isRequired,
+  t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
+};
+
+export default DateFormat;
diff --git a/preview/components/sidebar/FontSize.jsx b/preview/components/sidebar/FontSize.jsx
index 0b689f5e..d151e05c 100644
--- a/preview/components/sidebar/FontSize.jsx
+++ b/preview/components/sidebar/FontSize.jsx
@@ -3,10 +3,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Section, Label, Range } from '../shared';
 
-function FontSize({ t, fontSize, handleInputChange }) {
+function FontSize({ t, fontSize, handleInputChange, UILang }) {
   return (
     <Section>
-      <Label>{t('preview:sidebar:fontSize')}</Label>
+      <Label>
+        {t('preview:sidebar:fontSize', { lng: UILang })}
+      </Label>
       <Range
         name="fontSize"
         type="range"
@@ -24,6 +26,7 @@ FontSize.propTypes = {
   fontSize: PropTypes.string.isRequired,
   handleInputChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default FontSize;
diff --git a/preview/components/sidebar/Language.jsx b/preview/components/sidebar/Language.jsx
new file mode 100644
index 00000000..843100f6
--- /dev/null
+++ b/preview/components/sidebar/Language.jsx
@@ -0,0 +1,30 @@
+// Libs
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Section, Label } from '../shared';
+
+function Language({ t, language, handleInputChange, UILang }) {
+  return (
+    <Section>
+      <Label>
+        {t('settings:fields:language:name', { lng: UILang })}
+      </Label>
+      <select name="language" value={language} onChange={handleInputChange}>
+        <option value="en">{t('settings:fields:language:en', { lng: UILang })}</option>
+        <option value="de">{t('settings:fields:language:de', { lng: UILang })}</option>
+        <option value="fr">{t('settings:fields:language:fr', { lng: UILang })}</option>
+        <option value="vi">{t('settings:fields:language:vi', { lng: UILang })}</option>
+        <option value="zh-CN">{t('settings:fields:language:zh-CN', { lng: UILang })}</option>
+      </select>
+    </Section>
+  );
+}
+
+Language.propTypes = {
+  language: PropTypes.string.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
+};
+
+export default Language;
diff --git a/preview/components/sidebar/Template.jsx b/preview/components/sidebar/Template.jsx
index 3a4bf2df..f5091755 100644
--- a/preview/components/sidebar/Template.jsx
+++ b/preview/components/sidebar/Template.jsx
@@ -5,10 +5,12 @@ import PropTypes from 'prop-types';
 // Styling
 import { Section, Label } from '../shared';
 
-function Template({ t, template, handleInputChange }) {
+function Template({ t, template, handleInputChange, UILang }) {
   return (
     <Section>
-      <Label>{t('preview:sidebar:template')}</Label>
+      <Label>
+        {t('preview:sidebar:template', { lng: UILang })}
+      </Label>
       <select name="template" value={template} onChange={handleInputChange}>
         <option value="minimal">Minimal</option>
         <option value="business">Business</option>
@@ -21,6 +23,7 @@ Template.propTypes = {
   handleInputChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   template: PropTypes.string.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default Template;
diff --git a/preview/components/sidebar/Toggler.jsx b/preview/components/sidebar/Toggler.jsx
index 649888bf..0091c7d8 100644
--- a/preview/components/sidebar/Toggler.jsx
+++ b/preview/components/sidebar/Toggler.jsx
@@ -3,11 +3,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Section, Label } from '../shared';
 
-function Toggler({ t, configs, handleInputChange }) {
+function Toggler({ t, configs, handleInputChange, UILang }) {
   const { showLogo, useSymbol, showRecipient } = configs;
   return (
     <Section>
-      <Label>{ t('preview:sidebar:toggle:name') }</Label>
+      <Label>
+        { t('preview:sidebar:toggle:name', { lng: UILang }) }
+      </Label>
       <label>
         <input
           name="showLogo"
@@ -16,7 +18,7 @@ function Toggler({ t, configs, handleInputChange }) {
           onChange={handleInputChange}
         />
         {'\u00A0'}
-        { t('preview:sidebar:toggle:logo') }
+        { t('preview:sidebar:toggle:logo', { lng: UILang }) }
       </label>
       <label>
         <input
@@ -26,7 +28,7 @@ function Toggler({ t, configs, handleInputChange }) {
           onChange={handleInputChange}
         />
         {'\u00A0'}
-        { t('preview:sidebar:toggle:symbol') }
+        { t('preview:sidebar:toggle:symbol', { lng: UILang }) }
       </label>
       <label>
         <input
@@ -36,7 +38,7 @@ function Toggler({ t, configs, handleInputChange }) {
           onChange={handleInputChange}
         />
         {'\u00A0'}
-        { t('preview:sidebar:toggle:recipient') }
+        { t('preview:sidebar:toggle:recipient', { lng: UILang }) }
       </label>
     </Section>
   );
@@ -46,6 +48,7 @@ Toggler.propTypes = {
   configs: PropTypes.object.isRequired,
   handleInputChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
 };
 
 export default Toggler;
diff --git a/preview/containers/SideBar.jsx b/preview/containers/SideBar.jsx
index de7ca7b5..5b7d6298 100644
--- a/preview/containers/SideBar.jsx
+++ b/preview/containers/SideBar.jsx
@@ -66,7 +66,7 @@ class SideBar extends Component {
   }
 
   render() {
-    const { t, configs } = this.props;
+    const { t, configs, UILang } = this.props;
     const {
       dateFormat,
       template,
@@ -79,42 +79,50 @@ class SideBar extends Component {
       <Wrapper>
         <Language
           t={t}
+          UILang={UILang}
           language={language}
           handleInputChange={this.handleInputChange}
         />
         <Template
           t={t}
+          UILang={UILang}
           template={template}
           handleInputChange={this.handleInputChange}
         />
         <DateFormat
           t={t}
+          UILang={UILang}
           language={language}
           dateFormat={dateFormat}
           handleInputChange={this.handleInputChange}
         />
         <Alignment
           t={t}
+          UILang={UILang}
           alignItems={alignItems}
           handleInputChange={this.handleInputChange}
         />
         <FontSize
           t={t}
+          UILang={UILang}
           fontSize={fontSize}
           handleInputChange={this.handleInputChange}
         />
         <Toggler
           t={t}
+          UILang={UILang}
           configs={configs}
           handleInputChange={this.handleInputChange}
         />
         <AccentColor
           t={t}
+          UILang={UILang}
           accentColor={accentColor}
           handleAccentColorChange={this.handleAccentColorChange}
         />
         <Actions
           t={t}
+          UILang={UILang}
           savePDF={this.savePDF}
           saveConfigs={this.saveConfigs}
         />
@@ -126,6 +134,7 @@ class SideBar extends Component {
 SideBar.propTypes = {
   configs: PropTypes.object.isRequired,
   updateConfigs: PropTypes.func.isRequired,
+  UILang: PropTypes.string.isRequired,
   invoice: PropTypes.object.isRequired,
   t: PropTypes.func.isRequired,
 };

From 26ba0c27f541d0c109f7197e6bac3489d270a78e Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:13:16 +0700
Subject: [PATCH 05/17] Handle save configs to invoice record

- Added ipc event handler
- Added action verb
- Added action
- Updated reducer
---
 app/App.jsx                      | 6 ++++++
 app/actions/invoices.jsx         | 5 +++++
 app/constants/actions.jsx        | 1 +
 app/reducers/InvoicesReducer.jsx | 1 +
 4 files changed, 13 insertions(+)

diff --git a/app/App.jsx b/app/App.jsx
index 33a5c12b..829c3e5e 100644
--- a/app/App.jsx
+++ b/app/App.jsx
@@ -63,6 +63,10 @@ class App extends PureComponent {
     ipc.on('menu-form-toggle-settings', () => {
       dispatch(FormActions.toggleFormSettings());
     });
+    // Save configs to invoice
+    ipc.on('save-configs-to-invoice', (event, invoiceID, configs) => {
+      dispatch(InvoicesActions.saveInvoiceConfigs(invoiceID, configs));
+    });
   }
 
   componentWillUnmount() {
@@ -77,6 +81,8 @@ class App extends PureComponent {
       'menu-form-toggle-vat',
       'menu-form-toggle-note',
       'menu-form-toggle-settings',
+      // Save template configs to invoice
+      'save-configs-to-invoice'
     ]);
   }
 
diff --git a/app/actions/invoices.jsx b/app/actions/invoices.jsx
index 0868f9bc..794fe1a3 100644
--- a/app/actions/invoices.jsx
+++ b/app/actions/invoices.jsx
@@ -10,6 +10,11 @@ export const saveInvoice = createAction(
   invoiceData => invoiceData
 );
 
+export const saveInvoiceConfigs = createAction(
+  ACTION_TYPES.INVOICE_CONFIGS_SAVE,
+  (invoiceID, configs) => ({ invoiceID, configs })
+);
+
 // Edit an Invoice
 export const editInvoice = createAction(
   ACTION_TYPES.INVOICE_EDIT,
diff --git a/app/constants/actions.jsx b/app/constants/actions.jsx
index f2dfeeb7..0074525a 100644
--- a/app/constants/actions.jsx
+++ b/app/constants/actions.jsx
@@ -27,6 +27,7 @@ export const INVOICE_DELETE = 'INVOICE_DELETE';
 export const INVOICE_GET_ALL = 'INVOICE_GET_ALL';
 export const INVOICE_NEW_FROM_CONTACT = 'INVOICE_NEW_FROM_CONTACT';
 export const INVOICE_SET_STATUS = 'INVOICE_SET_STATUS';
+export const INVOICE_CONFIGS_SAVE = 'INVOICE_CONFIGS_SAVE';
 
 // CONTACTS
 // ===========================================================
diff --git a/app/reducers/InvoicesReducer.jsx b/app/reducers/InvoicesReducer.jsx
index d0435fbe..5c4bc940 100644
--- a/app/reducers/InvoicesReducer.jsx
+++ b/app/reducers/InvoicesReducer.jsx
@@ -7,6 +7,7 @@ const InvoicesReducer = handleActions(
     [combineActions(
       Actions.getInvoices,
       Actions.saveInvoice,
+      Actions.saveInvoiceConfigs,
       Actions.updateInvoice,
       Actions.deleteInvoice,
       Actions.setInvoiceStatus

From b4181a68587c236e14f25cb4771e2a72828874c8 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:14:13 +0700
Subject: [PATCH 06/17] Updated pouchDB helper and InvoiceMW

Allow selecting a single doc from DB and update it
---
 app/helpers/pouchDB.js         | 13 ++++++++++++-
 app/middlewares/InvoicesMW.jsx | 26 ++++++++++++++++++++++++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/app/helpers/pouchDB.js b/app/helpers/pouchDB.js
index 5a2e2c97..e282f913 100644
--- a/app/helpers/pouchDB.js
+++ b/app/helpers/pouchDB.js
@@ -126,6 +126,17 @@ const getAllDocs = dbName =>
       .catch(err => reject(err));
   });
 
+// Get a Single Document
+const getSingleDoc = (dbName, docID) =>
+  new Promise((resolve, reject) => {
+    setDB(dbName)
+      .then(db => db.get(docID))
+      .then(result => {
+        resolve(result);
+      })
+      .catch(err => reject(err));
+  });
+
 // Save a Document
 const saveDoc = (dbName, doc) =>
   new Promise((resolve, reject) => {
@@ -169,4 +180,4 @@ const updateDoc = (dbName, docId, updatedDoc) =>
       .catch(err => reject(err));
   });
 
-export { getAllDocs, deleteDoc, saveDoc, updateDoc };
+export { getAllDocs, getSingleDoc, deleteDoc, saveDoc, updateDoc };
diff --git a/app/middlewares/InvoicesMW.jsx b/app/middlewares/InvoicesMW.jsx
index fe3d5bbc..51474991 100644
--- a/app/middlewares/InvoicesMW.jsx
+++ b/app/middlewares/InvoicesMW.jsx
@@ -12,7 +12,7 @@ import * as FormActions from '../actions/form';
 
 // Helpers
 import { getInvoiceValue } from '../helpers/invoice';
-import { getAllDocs, saveDoc, deleteDoc, updateDoc } from '../helpers/pouchDB';
+import { getAllDocs, getSingleDoc, saveDoc, deleteDoc, updateDoc } from '../helpers/pouchDB';
 
 const InvoicesMW = ({ dispatch, getState }) => next => action => {
   switch (action.type) {
@@ -79,6 +79,29 @@ const InvoicesMW = ({ dispatch, getState }) => next => action => {
         });
     }
 
+    case ACTION_TYPES.INVOICE_CONFIGS_SAVE: {
+      const { invoiceID, configs } = action.payload;
+      return getSingleDoc('invoices', invoiceID)
+        .then(doc => {
+          dispatch({
+            type: ACTION_TYPES.INVOICE_UPDATE,
+            payload: {
+              invoiceID,
+              data: Object.assign({}, doc, {configs})
+            },
+          })
+        })
+        .catch(err => {
+          next({
+            type: ACTION_TYPES.UI_NOTIFICATION_NEW,
+            payload: {
+              type: 'warning',
+              message: err.message,
+            },
+          });
+        });
+    }
+
     case ACTION_TYPES.INVOICE_EDIT: {
       // Continue
       return getAllDocs('contacts')
@@ -106,7 +129,6 @@ const InvoicesMW = ({ dispatch, getState }) => next => action => {
 
     case ACTION_TYPES.INVOICE_UPDATE: {
       const { invoiceID, data } = action.payload;
-      console.log()
       return updateDoc('invoices', invoiceID, data)
         .then(docs => {
           next({

From 9737456832e116685ab09b701b446840d26ddd04 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:15:17 +0700
Subject: [PATCH 07/17] Make sure templates use customized language instead of
 app language

---
 .../templates/business/components/Footer.jsx  |  3 ++-
 .../templates/business/components/Header.jsx  | 13 ++++++-----
 .../templates/business/components/Main.jsx    | 23 +++++++++++--------
 .../templates/minimal/components/Footer.jsx   |  3 ++-
 .../templates/minimal/components/Header.jsx   | 11 +++++----
 preview/templates/minimal/components/Main.jsx | 16 +++++++------
 6 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/preview/templates/business/components/Footer.jsx b/preview/templates/business/components/Footer.jsx
index 214ef88e..aac4db88 100644
--- a/preview/templates/business/components/Footer.jsx
+++ b/preview/templates/business/components/Footer.jsx
@@ -18,9 +18,10 @@ const InvoiceFooter = styled.div`
 
 // Component
 function Footer({ t, invoice, configs }) {
+  const currentLanguage = configs.language;
   return invoice.note ? (
     <InvoiceFooter accentColor={configs.accentColor}>
-      <h4>{ t('preview:common:notice') }</h4>
+      <h4>{ t('preview:common:notice', {lng: currentLanguage}) }</h4>
       <p>{invoice.note}</p>
     </InvoiceFooter>
   ) : null;
diff --git a/preview/templates/business/components/Header.jsx b/preview/templates/business/components/Header.jsx
index 39f4fe14..119b1e03 100644
--- a/preview/templates/business/components/Header.jsx
+++ b/preview/templates/business/components/Header.jsx
@@ -58,6 +58,7 @@ const Heading = styled.h1`
 // Component
 function Header({ t, invoice, profile, configs }) {
   const { recipient } = invoice;
+  const currentLanguage = configs.language;
   return (
     <InvoiceHeader>
       <LeftColumn>
@@ -70,7 +71,7 @@ function Header({ t, invoice, profile, configs }) {
         </Company>
         {configs.showRecipient && (
           <Recipient>
-            <h4>{ t('preview:common:billedTo') }</h4>
+            <h4>{ t('preview:common:billedTo', {lng: currentLanguage}) }</h4>
             <p>{recipient.company}</p>
             <p>{recipient.fullname}</p>
             <p>{recipient.email}</p>
@@ -79,7 +80,7 @@ function Header({ t, invoice, profile, configs }) {
         )}
       </LeftColumn>
       <RightColumn>
-        <Heading accentColor={configs.accentColor}>{ t('preview:common:invoice') }</Heading>
+        <Heading accentColor={configs.accentColor}>{ t('preview:common:invoice', {lng: currentLanguage}) }</Heading>
         <h4>
           #
           { invoice.invoiceID
@@ -90,14 +91,14 @@ function Header({ t, invoice, profile, configs }) {
           }
         </h4>
         <p>
-          { t('preview:common:created') }
+          { t('preview:common:created', {lng: currentLanguage}) }
           {' '}
-          {moment(invoice.created_at).format(configs.dateFormat)}
+          {moment(invoice.created_at).lang(currentLanguage).format(configs.dateFormat)}
         </p>
         <p>
-          { t('preview:common:due') }
+          { t('preview:common:due', {lng: currentLanguage}) }
           {' '}
-          {moment(invoice.dueDate).format(configs.dateFormat)}
+          {moment(invoice.dueDate).lang(currentLanguage).format(configs.dateFormat)}
         </p>
       </RightColumn>
     </InvoiceHeader>
diff --git a/preview/templates/business/components/Main.jsx b/preview/templates/business/components/Main.jsx
index 16c970e7..5ebe9e34 100644
--- a/preview/templates/business/components/Main.jsx
+++ b/preview/templates/business/components/Main.jsx
@@ -113,6 +113,9 @@ function setAlignItems(configs) {
 
 // Component
 function Main({ invoice, configs, t }) {
+  // Set language
+  const currentLanguage = configs.language;
+  // Others
   const { tax, discount } = invoice;
   const { code, placement, fraction, separator } = invoice.currency;
   // Set placement
@@ -143,11 +146,11 @@ function Main({ invoice, configs, t }) {
       <Table accentColor={configs.accentColor}>
         <thead>
           <tr>
-            <th className="w5">{t('preview:common:order')}</th>
-            <th>{t('preview:common:itemDescription')}</th>
-            <th className="w15">{t('preview:common:price')}</th>
-            <th className="w10">{t('preview:common:qty')}</th>
-            <th className="w15">{t('preview:common:subtotal')}</th>
+            <th className="w5">{t('preview:common:order', {lng: currentLanguage})}</th>
+            <th>{t('preview:common:itemDescription', {lng: currentLanguage})}</th>
+            <th className="w15">{t('preview:common:price', {lng: currentLanguage})}</th>
+            <th className="w10">{t('preview:common:qty', {lng: currentLanguage})}</th>
+            <th className="w15">{t('preview:common:subtotal', {lng: currentLanguage})}</th>
           </tr>
         </thead>
         <tbody>{itemComponents}</tbody>
@@ -155,7 +158,7 @@ function Main({ invoice, configs, t }) {
           <tr className="invoice__subtotal">
             <td colSpan="2" />
             <td className="label" colSpan="2">
-              {t('preview:common:subtotal')}
+              {t('preview:common:subtotal', {lng: currentLanguage})}
             </td>
             <td>
               {currencyBefore ? currency : null}
@@ -170,7 +173,7 @@ function Main({ invoice, configs, t }) {
             <InvoiceDiscount>
               <td colSpan="2" />
               <td className="label" colSpan="2">
-                {t('form:fields:discount:name')}{' '}
+                {t('form:fields:discount:name', {lng: currentLanguage})}{' '}
                 {discount.type === 'percentage' && (
                   <span> {discount.amount}%</span>
                 )}
@@ -191,14 +194,14 @@ function Main({ invoice, configs, t }) {
             <InvoiceTax>
               <td colSpan="2" />
               <td className="label" colSpan={tax.method === 'reverse' ? 1 : 2}>
-                {t('form:fields:tax:name')} {tax.amount}%
+                {t('form:fields:tax:name', {lng: currentLanguage})} {tax.amount}%
               </td>
               {tax.method === 'reverse' ? (
                 <td
                   className="label"
                   colSpan={tax.method === 'reverse' ? 2 : 1}
                 >
-                  {t('form:fields:tax:reverse')}
+                  {t('form:fields:tax:reverse', {lng: currentLanguage})}
                 </td>
               ) : (
                 <td>
@@ -212,7 +215,7 @@ function Main({ invoice, configs, t }) {
 
           <InvoiceTotal accentColor={configs.accentColor}>
             <td colSpan="2" />
-            <td className="label">{t('preview:common:total')}</td>
+            <td className="label">{t('preview:common:total', {lng: currentLanguage})}</td>
             <td colSpan="2">
               {currencyBefore ? currency : null}
               {' '}
diff --git a/preview/templates/minimal/components/Footer.jsx b/preview/templates/minimal/components/Footer.jsx
index 43cef54e..6777c35b 100644
--- a/preview/templates/minimal/components/Footer.jsx
+++ b/preview/templates/minimal/components/Footer.jsx
@@ -25,6 +25,7 @@ const Column = styled.div`
 
 // Component
 function Footer({ t, invoice, profile, configs }) {
+  const currentLanguage = configs.language;
   const { recipient } = invoice;
   return (
     <Wrapper>
@@ -37,7 +38,7 @@ function Footer({ t, invoice, profile, configs }) {
       </Column>
       {configs.showRecipient && (
         <Column right>
-          <h4 className="label">{t('preview:common:billedTo')}</h4>
+          <h4 className="label">{t('preview:common:billedTo', {lng: currentLanguage})}</h4>
           <p>{recipient.company}</p>
           <p>{recipient.fullname}</p>
           <p>{recipient.email}</p>
diff --git a/preview/templates/minimal/components/Header.jsx b/preview/templates/minimal/components/Header.jsx
index 336606ec..16b50cdc 100644
--- a/preview/templates/minimal/components/Header.jsx
+++ b/preview/templates/minimal/components/Header.jsx
@@ -31,11 +31,12 @@ const Heading = styled.h1`
 
 // Component
 function Header({ t, invoice, profile, configs }) {
+  const currentLanguage = configs.language;
   return (
     <Wrapper>
       <div>
         <Heading accentColor={configs.accentColor}>
-          {t('preview:common:invoice')}
+          {t('preview:common:invoice', {lng: currentLanguage})}
         </Heading>
         <h4 className="label">
           # {' '}
@@ -47,15 +48,15 @@ function Header({ t, invoice, profile, configs }) {
           }
         </h4>
         <p>
-          {t('preview:common:created')}:
+          {t('preview:common:created', {lng: currentLanguage})}:
           {' '}
-          {moment(invoice.created_at).format(configs.dateFormat)}
+          {moment(invoice.created_at).lang(currentLanguage).format(configs.dateFormat)}
         </p>
         {invoice.dueDate && (
           <p>
-            {t('preview:common:due')}:
+            {t('preview:common:due', {lng: currentLanguage})}:
             {' '}
-            {moment(invoice.dueDate).format(configs.dateFormat)}
+            {moment(invoice.dueDate).lang(currentLanguage).format(configs.dateFormat)}
           </p>
         )}
       </div>
diff --git a/preview/templates/minimal/components/Main.jsx b/preview/templates/minimal/components/Main.jsx
index 29aef129..a3f9e436 100644
--- a/preview/templates/minimal/components/Main.jsx
+++ b/preview/templates/minimal/components/Main.jsx
@@ -114,6 +114,8 @@ function setAlignItems(configs) {
 
 // Component
 function Main({ invoice, configs, t }) {
+  // Get currentLanguage
+  const currentLanguage = configs.language;
   // Destructuring values
   const { tax, discount } = invoice;
   const { code, placement, fraction, separator } = invoice.currency;
@@ -141,8 +143,8 @@ function Main({ invoice, configs, t }) {
     <Table alignItems={setAlignItems(configs)}>
       <thead>
         <ItemsHeader>
-          <th>{t('preview:common:itemDescription')}</th>
-          <th>{t('preview:common:price')}</th>
+          <th>{t('preview:common:itemDescription', {lng: currentLanguage})}</th>
+          <th>{t('preview:common:price', {lng: currentLanguage})}</th>
         </ItemsHeader>
       </thead>
 
@@ -150,7 +152,7 @@ function Main({ invoice, configs, t }) {
 
       <InvoiceSummary>
         <Subtotal>
-          <td>{t('preview:common:subtotal')}</td>
+          <td>{t('preview:common:subtotal', {lng: currentLanguage})}</td>
           <td>
             {currencyBefore ? currency : null}
             {' '}
@@ -163,10 +165,10 @@ function Main({ invoice, configs, t }) {
         {tax && (
           <Tax>
             <td>
-              {t('form:fields:tax:name')} {tax.amount}%
+              {t('form:fields:tax:name', {lng: currentLanguage})} {tax.amount}%
             </td>
             {tax.method === 'reverse' ? (
-              <td>{t('form:fields:tax:reverse')}</td>
+              <td>{t('form:fields:tax:reverse', {lng: currentLanguage})}</td>
             ) : (
               <td>
                 {currencyBefore ? currency : null}{' '}
@@ -184,7 +186,7 @@ function Main({ invoice, configs, t }) {
         {discount && (
           <Discount>
             <td>
-              {t('form:fields:discount:name')}{' '}
+              {t('form:fields:discount:name', {lng: currentLanguage})}{' '}
               {discount.type === 'percentage' && (
                 <span> {discount.amount}%</span>
               )}
@@ -202,7 +204,7 @@ function Main({ invoice, configs, t }) {
         )}
 
         <Total>
-          <td>{t('preview:common:total')}</td>
+          <td>{t('preview:common:total', {lng: currentLanguage})}</td>
           <td>
             {currencyBefore ? currency : null}
             {' '}

From 687dccf839ece12c5b558c90db17153e50b85610 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Fri, 16 Feb 2018 23:16:18 +0700
Subject: [PATCH 08/17] Updated Translation

---
 i18n/en/preview.json  | 3 ++-
 i18n/en/settings.json | 4 ++--
 i18n/fr/preview.json  | 2 +-
 i18n/fr/settings.json | 4 ++--
 i18n/vi/preview.json  | 2 +-
 i18n/vi/settings.json | 4 ++--
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/i18n/en/preview.json b/i18n/en/preview.json
index 6d42d7a7..40a4ad75 100644
--- a/i18n/en/preview.json
+++ b/i18n/en/preview.json
@@ -20,7 +20,8 @@
     },
     "actions": {
       "name": "Actions",
-      "savePDF": "Export PDF"
+      "savePDF": "Export PDF",
+      "saveConfigs": "Save Configs"
     }
   },
   "common": {
diff --git a/i18n/en/settings.json b/i18n/en/settings.json
index 8285e922..3493dfb6 100644
--- a/i18n/en/settings.json
+++ b/i18n/en/settings.json
@@ -54,8 +54,8 @@
       "tl": "Tagalog, Philippines",
       "tr": "Turkish",
       "vi": "Vietnamese",
-      "zhCN": "Chinese (Simplified)",
-      "zhTW": "Chinese (Traditional)"
+      "zh-CN": "Chinese (Simplified)",
+      "zh-TW": "Chinese (Traditional)"
     },
     "other": "Other"
   }
diff --git a/i18n/fr/preview.json b/i18n/fr/preview.json
index 64dc4999..163f47b5 100644
--- a/i18n/fr/preview.json
+++ b/i18n/fr/preview.json
@@ -8,7 +8,7 @@
       "bottom": "Bas"
     },
     "fontSize": "Taille du texte",
-    "toggler": {
+    "toggle": {
       "name": "Activer",
       "logo": "Logo",
       "symbol": "Symbole",
diff --git a/i18n/fr/settings.json b/i18n/fr/settings.json
index 3c2237cf..954b9988 100644
--- a/i18n/fr/settings.json
+++ b/i18n/fr/settings.json
@@ -54,8 +54,8 @@
       "tl": "Tagalog, Philippines",
       "tr": "Turc",
       "vi": "Vietnamien",
-      "zhCN": "Chinois (Simplifié)",
-      "zhTW": "Chinois (Traditionnel)"
+      "zh-CN": "Chinois (Simplifié)",
+      "zh-TW": "Chinois (Traditionnel)"
     },
     "other": "Autre"
   }
diff --git a/i18n/vi/preview.json b/i18n/vi/preview.json
index 8e47684b..f1714b9d 100644
--- a/i18n/vi/preview.json
+++ b/i18n/vi/preview.json
@@ -8,7 +8,7 @@
       "bottom": "Dưới cùng"
     },
     "fontSize": "Cỡ chữ",
-    "toggler": {
+    "toggle": {
       "name": "Ẩn Hiện",
       "logo": "Logo",
       "symbol": "Biểu tượng",
diff --git a/i18n/vi/settings.json b/i18n/vi/settings.json
index 5d3e11b8..c8039ca6 100644
--- a/i18n/vi/settings.json
+++ b/i18n/vi/settings.json
@@ -54,8 +54,8 @@
       "tl": "Tiếng Philippines",
       "tr": "Tiếng Thổ Nhĩ Kỳ",
       "vi": "Tiếng Việt",
-      "zhCN": "Tiếng Trung (Giản Thể)",
-      "zhTW": "Tiếng Trung (Phồn Thể)"
+      "zh-CN": "Tiếng Trung (Giản Thể)",
+      "zh-TW": "Tiếng Trung (Phồn Thể)"
     },
     "other": "Khác"
   }

From 04c29d2c876145557671196774db6aa69d983d5c Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 01:33:10 +0700
Subject: [PATCH 09/17] Make sure accent color reflects changes correctly

---
 preview/components/sidebar/AccentColor.jsx | 11 +++++++++++
 preview/containers/SideBar.jsx             |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/preview/components/sidebar/AccentColor.jsx b/preview/components/sidebar/AccentColor.jsx
index 0c667c63..b5e446d4 100644
--- a/preview/components/sidebar/AccentColor.jsx
+++ b/preview/components/sidebar/AccentColor.jsx
@@ -63,6 +63,16 @@ class AccentColor extends Component {
     this.handleInputChange = this.handleInputChange.bind(this);
   }
 
+  componentWillReceiveProps(nextProps) {
+    const currentInvoiceID = this.props.invoiceID;
+    const nextInvoiceID = nextProps.invoiceID;
+    if (nextInvoiceID === currentInvoiceID) return;
+    this.setState({
+      useCustom: nextProps.accentColor.useCustom,
+      color: nextProps.accentColor.color,
+    });
+  }
+
   handleClick() {
     this.setState({ showPicker: !this.state.showPicker });
   }
@@ -136,6 +146,7 @@ AccentColor.propTypes = {
   handleAccentColorChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   UILang: PropTypes.string.isRequired,
+  invoiceID: PropTypes.string.isRequired,
 };
 
 export default AccentColor;
diff --git a/preview/containers/SideBar.jsx b/preview/containers/SideBar.jsx
index 5b7d6298..40f11097 100644
--- a/preview/containers/SideBar.jsx
+++ b/preview/containers/SideBar.jsx
@@ -66,7 +66,7 @@ class SideBar extends Component {
   }
 
   render() {
-    const { t, configs, UILang } = this.props;
+    const { t, configs, invoice, UILang } = this.props;
     const {
       dateFormat,
       template,
@@ -119,6 +119,7 @@ class SideBar extends Component {
           UILang={UILang}
           accentColor={accentColor}
           handleAccentColorChange={this.handleAccentColorChange}
+          invoiceID={invoice._id}
         />
         <Actions
           t={t}

From 0b76b100e112f92d5921421062c4c2459d557434 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 01:33:46 +0700
Subject: [PATCH 10/17] Add translation to InvoiceID field

---
 app/components/form/InvoiceID.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/form/InvoiceID.jsx b/app/components/form/InvoiceID.jsx
index 03d7ca73..0129314e 100644
--- a/app/components/form/InvoiceID.jsx
+++ b/app/components/form/InvoiceID.jsx
@@ -45,7 +45,7 @@ export class InvoiceID extends PureComponent {
     const { t } = this.props;
     return (
       <Section>
-        <label className="itemLabel">Invoice ID</label>
+        <label className="itemLabel">{t('invoices:fields:invoiceID')}</label>
         <input
           name="invoiceID"
           type="text"

From 9847282e0c21221d138d40a8424cea3366fc3dcb Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 12:19:12 +0700
Subject: [PATCH 11/17] Fixed action buttons spacing

---
 preview/components/sidebar/Actions.jsx | 26 ++++++++++++++++++++------
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/preview/components/sidebar/Actions.jsx b/preview/components/sidebar/Actions.jsx
index ecfe9b03..469cfe04 100644
--- a/preview/components/sidebar/Actions.jsx
+++ b/preview/components/sidebar/Actions.jsx
@@ -4,6 +4,18 @@ import PropTypes from 'prop-types';
 
 import { Section, Label } from '../shared';
 import Button from '../../../app/components/shared/Button';
+import styled from 'styled-components';
+
+const ButtonsGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+  > * {
+    margin-bottom: 10px;
+    &:last-child {
+    margin-bottom: 0;
+    }
+ }
+`;
 
 function Actions({ saveConfigs, savePDF, t, UILang }) {
   return (
@@ -11,12 +23,14 @@ function Actions({ saveConfigs, savePDF, t, UILang }) {
       <Label>
         {t('preview:sidebar:actions:name', { lng: UILang })}
       </Label>
-      <Button block primary onClick={savePDF}>
-        {t('preview:sidebar:actions:savePDF', { lng: UILang })}
-      </Button>
-      <Button block secondary onClick={saveConfigs}>
-        {t('preview:sidebar:actions:saveConfigs', { lng: UILang })}
-      </Button>
+      <ButtonsGroup>
+        <Button block primary onClick={savePDF}>
+          {t('preview:sidebar:actions:savePDF', { lng: UILang })}
+        </Button>
+        <Button block secondary onClick={saveConfigs}>
+          {t('preview:sidebar:actions:saveConfigs', { lng: UILang })}
+        </Button>
+      </ButtonsGroup>
     </Section>
   );
 }

From 401ec7f32a86b32bea5cc1ec4cd7b1a518b0fb24 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 12:38:15 +0700
Subject: [PATCH 12/17] Use custom dateFormat when possible

---
 app/components/invoices/Invoice.jsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/invoices/Invoice.jsx b/app/components/invoices/Invoice.jsx
index 5da836bc..88cd7bc4 100644
--- a/app/components/invoices/Invoice.jsx
+++ b/app/components/invoices/Invoice.jsx
@@ -205,8 +205,9 @@ class Invoice extends PureComponent {
   }
 
   render() {
-    const { dateFormat, invoice, setInvoiceStatus, t } = this.props;
-    const { recipient, status } = invoice;
+    const { invoice, setInvoiceStatus, t } = this.props;
+    const { recipient, status, configs } = invoice;
+    const dateFormat = invoice.configs ? invoice.configs.dateFormat : this.props.dateFormat;
     const statusActions = [
       {
         label: t('invoices:status:pending'),

From 85b66cee4b24a2f427c43de1fa31babec884013f Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 12:38:30 +0700
Subject: [PATCH 13/17] Added ErrorBoundary to previewWindow

---
 preview/index.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/preview/index.jsx b/preview/index.jsx
index f926fc66..755e624b 100644
--- a/preview/index.jsx
+++ b/preview/index.jsx
@@ -8,6 +8,7 @@ import { AppContainer } from 'react-hot-loader';
 import { createStore, applyMiddleware, compose } from 'redux';
 import { Provider } from 'react-redux';
 import i18n from '../i18n/i18n';
+import ErrorBoundary from '../app/components/shared/ErrorBoundary';
 
 // Root Reducer
 import combineReducers from './reducers';
@@ -28,7 +29,9 @@ const store = createStore(
 ReactDOM.render(
   <Provider store={store}>
     <AppContainer>
-      <Viewer />
+      <ErrorBoundary>
+        <Viewer />
+      </ErrorBoundary>
     </AppContainer>
   </Provider>,
   document.getElementById('root')

From 9b07cc2e5bfc29d9abe485822df8cfcc902ab84f Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 12:38:44 +0700
Subject: [PATCH 14/17] Capitalize dateFormat in Business template

---
 preview/templates/business/components/Header.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/preview/templates/business/components/Header.jsx b/preview/templates/business/components/Header.jsx
index 119b1e03..9d0bf52a 100644
--- a/preview/templates/business/components/Header.jsx
+++ b/preview/templates/business/components/Header.jsx
@@ -39,6 +39,9 @@ const RightColumn = styled.div`
     margin: 0;
     font-weight: 300;
   }
+  p {
+    text-transform: capitalize;
+  }
 `;
 
 const Heading = styled.h1`
@@ -91,12 +94,12 @@ function Header({ t, invoice, profile, configs }) {
           }
         </h4>
         <p>
-          { t('preview:common:created', {lng: currentLanguage}) }
+          { t('preview:common:created', {lng: currentLanguage}) }:
           {' '}
           {moment(invoice.created_at).lang(currentLanguage).format(configs.dateFormat)}
         </p>
         <p>
-          { t('preview:common:due', {lng: currentLanguage}) }
+          { t('preview:common:due', {lng: currentLanguage}) }:
           {' '}
           {moment(invoice.dueDate).lang(currentLanguage).format(configs.dateFormat)}
         </p>

From 348f02542b389ada4c0f63339f1872c96231a787 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 12:39:17 +0700
Subject: [PATCH 15/17] Set defaultProp for invoiceID in previewWindow

---
 preview/components/sidebar/AccentColor.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/preview/components/sidebar/AccentColor.jsx b/preview/components/sidebar/AccentColor.jsx
index b5e446d4..7f4591c0 100644
--- a/preview/components/sidebar/AccentColor.jsx
+++ b/preview/components/sidebar/AccentColor.jsx
@@ -146,7 +146,11 @@ AccentColor.propTypes = {
   handleAccentColorChange: PropTypes.func.isRequired,
   t: PropTypes.func.isRequired,
   UILang: PropTypes.string.isRequired,
-  invoiceID: PropTypes.string.isRequired,
+  invoiceID: PropTypes.string,
 };
 
+AccentColor.defaultProps = {
+  invoiceID: 'random-string',
+}
+
 export default AccentColor;

From 1e7c7602c15c5b65a0e1eb141025ae1929c97f67 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 15:17:28 +0700
Subject: [PATCH 16/17] Updated test snapshot & removed duplicate prop

---
 .../form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap      | 4 +---
 preview/Viewer.jsx                                            | 1 -
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap
index a749e96e..860d35b0 100644
--- a/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap
+++ b/app/components/form/__tests__/__snapshots__/InvoiceID.spec.jsx.snap
@@ -6,9 +6,7 @@ exports[`InvoiceID component matches snapshot 1`] = `
 >
   <label
     className="itemLabel"
-  >
-    Invoice ID
-  </label>
+  />
   <input
     name="invoiceID"
     onChange={[Function]}
diff --git a/preview/Viewer.jsx b/preview/Viewer.jsx
index afacdd96..ab3e1233 100644
--- a/preview/Viewer.jsx
+++ b/preview/Viewer.jsx
@@ -72,7 +72,6 @@ class Viewer extends Component {
           configs={configs}
           invoice={invoice}
           updateConfigs={this.updateConfigs}
-          UILang={UILang}
           t={t}
         />
         <MainContent

From e5d9ca3190066830196304242aca9f69ebb16a84 Mon Sep 17 00:00:00 2001
From: "Hung Q. Le" <lequochung@me.com>
Date: Sat, 17 Feb 2018 15:35:17 +0700
Subject: [PATCH 17/17] Updated Translation

+ Refactored i18n instance
+ Removed German & French, added Korean and Chinese(Simplified)
+ Update Vietnamese translation
---
 app/components/settings/General.jsx     |  4 +-
 i18n/en/settings.json                   |  1 +
 i18n/fr/common.json                     | 16 -----
 i18n/fr/contacts.json                   |  9 ---
 i18n/fr/dialog.json                     | 87 ------------------------
 i18n/fr/form.json                       | 46 -------------
 i18n/fr/invoices.json                   | 23 -------
 i18n/fr/messages.json                   | 16 -----
 i18n/fr/preview.json                    | 40 -----------
 i18n/fr/settings.json                   | 62 -----------------
 i18n/fr/tour.json                       | 29 --------
 i18n/i18n.js                            | 23 +++----
 i18n/ko/common.json                     | 16 +++++
 i18n/ko/contacts.json                   |  9 +++
 i18n/ko/dialog.json                     | 89 +++++++++++++++++++++++++
 i18n/ko/form.json                       | 46 +++++++++++++
 i18n/{fr => ko}/index.js                |  0
 i18n/ko/invoices.json                   | 23 +++++++
 i18n/ko/messages.json                   | 16 +++++
 i18n/ko/preview.json                    | 41 ++++++++++++
 i18n/ko/settings.json                   | 63 +++++++++++++++++
 i18n/ko/tour.json                       | 29 ++++++++
 i18n/vi/dialog.json                     |  6 +-
 i18n/vi/preview.json                    |  5 +-
 i18n/vi/settings.json                   | 18 ++---
 i18n/zh-CN/common.json                  | 16 +++++
 i18n/zh-CN/contacts.json                |  9 +++
 i18n/zh-CN/dialog.json                  | 89 +++++++++++++++++++++++++
 i18n/zh-CN/form.json                    | 46 +++++++++++++
 i18n/zh-CN/index.js                     | 21 ++++++
 i18n/zh-CN/invoices.json                | 23 +++++++
 i18n/zh-CN/messages.json                | 16 +++++
 i18n/zh-CN/preview.json                 | 41 ++++++++++++
 i18n/zh-CN/settings.json                | 63 +++++++++++++++++
 i18n/zh-CN/tour.json                    | 29 ++++++++
 preview/components/sidebar/Language.jsx |  3 +-
 36 files changed, 714 insertions(+), 359 deletions(-)
 delete mode 100644 i18n/fr/common.json
 delete mode 100644 i18n/fr/contacts.json
 delete mode 100644 i18n/fr/dialog.json
 delete mode 100644 i18n/fr/form.json
 delete mode 100644 i18n/fr/invoices.json
 delete mode 100644 i18n/fr/messages.json
 delete mode 100644 i18n/fr/preview.json
 delete mode 100644 i18n/fr/settings.json
 delete mode 100644 i18n/fr/tour.json
 create mode 100644 i18n/ko/common.json
 create mode 100644 i18n/ko/contacts.json
 create mode 100644 i18n/ko/dialog.json
 create mode 100644 i18n/ko/form.json
 rename i18n/{fr => ko}/index.js (100%)
 create mode 100644 i18n/ko/invoices.json
 create mode 100644 i18n/ko/messages.json
 create mode 100644 i18n/ko/preview.json
 create mode 100644 i18n/ko/settings.json
 create mode 100644 i18n/ko/tour.json
 create mode 100644 i18n/zh-CN/common.json
 create mode 100644 i18n/zh-CN/contacts.json
 create mode 100644 i18n/zh-CN/dialog.json
 create mode 100644 i18n/zh-CN/form.json
 create mode 100644 i18n/zh-CN/index.js
 create mode 100644 i18n/zh-CN/invoices.json
 create mode 100644 i18n/zh-CN/messages.json
 create mode 100644 i18n/zh-CN/preview.json
 create mode 100644 i18n/zh-CN/settings.json
 create mode 100644 i18n/zh-CN/tour.json

diff --git a/app/components/settings/General.jsx b/app/components/settings/General.jsx
index 6b598843..a6da1204 100644
--- a/app/components/settings/General.jsx
+++ b/app/components/settings/General.jsx
@@ -97,9 +97,9 @@ class General extends Component {
                 onChange={this.handleInputChange}
               >
                 <option value="en">{t('settings:fields:language:en')}</option>
-                <option value="de">{t('settings:fields:language:de')}</option>
-                <option value="fr">{t('settings:fields:language:fr')}</option>
+                <option value="ko">{t('settings:fields:language:ko')}</option>
                 <option value="vi">{t('settings:fields:language:vi')}</option>
+                <option value="zh-CN">{t('settings:fields:language:zh-CN')}</option>
               </select>
             </div>
           </div>
diff --git a/i18n/en/settings.json b/i18n/en/settings.json
index 3493dfb6..69cdd50f 100644
--- a/i18n/en/settings.json
+++ b/i18n/en/settings.json
@@ -45,6 +45,7 @@
       "id": "Indonesian",
       "it": "Italian",
       "ja": "Japanese",
+      "ko": "Korean",
       "lt": "Lithuanian",
       "nl": "Dutch",
       "ptBR": "Portuguese, Brazilian",
diff --git a/i18n/fr/common.json b/i18n/fr/common.json
deleted file mode 100644
index 50edceb7..00000000
--- a/i18n/fr/common.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "fields": {
-    "fullname": "Nom et prénom",
-    "company": "Société",
-    "address": "Adresse",
-    "email": "Email",
-    "phone": "N° de téléphone",
-    "website": "Site Internet"
-  },
-  "save": "Sauvegarder",
-  "amount": "Montant",
-  "default": "Valeurs par défaut",
-  "saveAsDefault": "Enregistrer comme valeurs par défaut ?",
-  "yes": "Oui",
-  "noThanks": "Non, merci"
-}
\ No newline at end of file
diff --git a/i18n/fr/contacts.json b/i18n/fr/contacts.json
deleted file mode 100644
index 866b7b43..00000000
--- a/i18n/fr/contacts.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "header": "Tous les contacts",
-  "fields": {
-    "contact": "Contact",
-    "email": "Email",
-    "phone": "Téléphone",
-    "actions": "Actions"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/dialog.json b/i18n/fr/dialog.json
deleted file mode 100644
index 4fa545c2..00000000
--- a/i18n/fr/dialog.json
+++ /dev/null
@@ -1,87 +0,0 @@
-{
-  "appUpdate": {
-    "available": {
-      "title": "Nouvelle mise à jour disponible",
-      "message": "Souhaitez-vous commencer le téléchargement de la mise à jour en arrière-plan ?"
-    },
-    "noUpdate": {
-      "title": "Aucune mise à jour disponible",
-      "message": "Vous utilisez la dernière version de l'application"
-    },
-    "error": {
-      "title": "Une erreur s'est produite"
-    },
-    "downloaded": {
-      "title": "Mise à jour téléchargée",
-      "message": "Souhaitez-vous quitter et mettre l'application à jour maintenant ?",
-      "quitNow": "Quitter maintenant",
-      "later": "Plus tard"
-    }
-  },
-  "noAccess": {
-    "title": "Aucune autorisation d’accès",
-    "message": "Veuillez choisir un autre répertoire"
-  },
-  "errorBoundary": "Une erreur s'est produite",
-  "deleteInvoice": {
-    "title": "Supprimer cette facture ?",
-    "message": "La facture sera supprimée définitivement"
-  },
-  "deleteContact": {
-    "title": "Supprimer ce contact ?",
-    "message": "Ce contact sera supprimé définitivement"
-  },
-  "fileTypeErr": {
-    "title": "Veuillez choisir un autre fichier"
-  },
-  "validation": {
-    "recipient": {
-      "empty": {
-        "title": "Contact invalide",
-        "message": "Contact ne peut pas être vide"
-      },
-      "requiredFields": {
-        "title": "Champs requis",
-        "message": "Merci de remplir tous les champs requis"
-      },
-      "email": {
-        "title": "Email invalide",
-        "message": "Veuillez choisir un autre email"
-      }
-    },
-    "rows": {
-      "emptyDescription": {
-        "title": "Description invalide",
-        "message": "La description ne peut pas être vide"
-      },
-      "priceZero": {
-        "title": "Prix invalide",
-        "message": "Le prix doit être supérieur à zéro"
-      },
-      "qtyZero": {
-        "title": "Quantité invalide",
-        "message": "La quantité doit être supérieure à zéro"
-      }
-    },
-    "dueDate": {
-      "title": "Échéance invalide",
-      "message": "Veuillez sélectionner une date"
-    },
-    "currency": {
-      "title": "Devise invalide",
-      "message": "Veuillez choisir une devise"
-    },
-    "discount": {
-      "title": "Remise invalide",
-      "message": "Le montant de la remise doit être supérieur à zéro"
-    },
-    "tax": {
-      "title": "Taxe invalide",
-      "message": "Le montant de la TVA doit être supérieur à zéro"
-    },
-    "note": {
-      "title": "Remarque non valide",
-      "message": "Le contenu des remarques ne peut pas être vide"
-    }
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/form.json b/i18n/fr/form.json
deleted file mode 100644
index d56314a3..00000000
--- a/i18n/fr/form.json
+++ /dev/null
@@ -1,46 +0,0 @@
-{
-  "header": {
-    "new": "Créer une nouvelle facture",
-    "edit": "Modifier la facture",
-    "btns": {
-      "clear": "Supprimer",
-      "update": "Mettre à jour",
-      "saveAndPreview": "Enregistrer et prévisualiser"
-    }
-  },
-  "settings": {
-    "name": "Paramètres du formulaire",
-    "hint": "Activer un champ pour le rendre disponible."
-  },
-  "fields": {
-    "items": {
-      "name": "Produit / Service",
-      "description": "Description",
-      "price": "Prix",
-      "quantity": "Quantité",
-      "add": "Ajouter un nouvel élément"
-    },
-    "recipient": {
-      "name": "Destinataire",
-      "select": "Sélectionner",
-      "add": "Créer un nouveau"
-    },
-    "discount": {
-      "name": "Remise ",
-      "percentage": "Pourcentage",
-      "flat": "Taux Fixe"
-    },
-    "dueDate": {
-      "name": "Échéance",
-      "placeHolder": "Choisir une date"
-    },
-    "tax": {
-      "name": "Taxe",
-      "id": "Numéro de TVA",
-      "method": "Méthode",
-      "reverse": "Autoliquidation"
-    },
-    "note": "Remarque",
-    "currency": "Devise"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/invoices.json b/i18n/fr/invoices.json
deleted file mode 100644
index 14df954e..00000000
--- a/i18n/fr/invoices.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "header": {
-    "name": "Toutes les factures"
-  },
-  "fields": {
-    "client": "Client",
-    "invoiceID": "Numero de la facture",
-    "createdDate": "Créée le",
-    "dueDate": "Échéance",
-    "total": "Valeur Totale"
-  },
-  "status": {
-    "pending": "En attente",
-    "paid": "Payée",
-    "refunded": "Remboursée",
-    "cancelled": "Annulée"
-  },
-  "btns": {
-    "view": "Visualiser",
-    "edit": "Modifier",
-    "markAsPaid": "Marquer comme payée"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/messages.json b/i18n/fr/messages.json
deleted file mode 100644
index 00b3efe3..00000000
--- a/i18n/fr/messages.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "noContact": "Vous n'avez pas encore de contact",
-  "noInvoice": "Vous n'avez pas créé de facture pour le moment",
-  "invoice": {
-    "saved": "Facture enregistrée avec succès",
-    "updated": "Facture mise à jour avec succès",
-    "deleted": "Facture supprimée avec succès"
-  },
-  "contact": {
-    "saved": "Contact enregistré avec succès",
-    "deleted": "Contact supprimé avec succès"
-  },
-  "settings": {
-    "saved": "Tous les paramètres ont été enregistrés avec succès"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/preview.json b/i18n/fr/preview.json
deleted file mode 100644
index 163f47b5..00000000
--- a/i18n/fr/preview.json
+++ /dev/null
@@ -1,40 +0,0 @@
-{
-  "sidebar": {
-    "template": "Modèle",
-    "alignment": {
-      "name": "Alignement",
-      "top": "Haut",
-      "middle": "Milieu",
-      "bottom": "Bas"
-    },
-    "fontSize": "Taille du texte",
-    "toggle": {
-      "name": "Activer",
-      "logo": "Logo",
-      "symbol": "Symbole",
-      "recipient": "Destinataire"
-    },
-    "accentColor": {
-      "name": "Couleur secondaire",
-      "useCustom": "Couleur personnalisée"
-    },
-    "actions": {
-      "name": "Actions",
-      "savePDF": "Exporter en PDF"
-    }
-  },
-  "common": {
-    "billedTo": "Facturé à",
-    "chooseInvoiceToPreview": "Veuillez choisir une facture à visualiser",
-    "created": "Créé",
-    "due": "Échéance",
-    "invoice": "Facture",
-    "itemDescription": "Description de l'élement",
-    "notice": "Notice",
-    "order": "No",
-    "price": "Prix",
-    "qty": "Quantité",
-    "subtotal": "Sous-total",
-    "total": "Total"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/settings.json b/i18n/fr/settings.json
deleted file mode 100644
index 954b9988..00000000
--- a/i18n/fr/settings.json
+++ /dev/null
@@ -1,62 +0,0 @@
-{
-  "header": "Paramètres",
-  "tabs": {
-    "profile": "Profil",
-    "invoice": "Facture",
-    "general": "Général"
-  },
-  "fields": {
-    "logo": {
-      "name": "Logo",
-      "hint": "Accepte PNG, JPG & SVG (Recommandé)"
-    },
-    "taxSettings": "Paramètres des Taxes",
-    "template": "Modèle",
-    "dateFormat": "Format de la Date",
-    "pdfExportDir": "Dossier d'export PDF",
-    "requiredFields": "Champs Requis",
-    "sound": "Son",
-    "mute": "Rendre muet",
-    "autoCheckUpdate": {
-      "name": "Verification automatique des mises à jours",
-      "daily": "Tous les jours (recommandé)",
-      "weekly": "Toutes les semaines"
-    },
-    "currency": {
-      "placement": "Emplacement du signe",
-      "afterAmount": "Après le montant",
-      "beforeAmount": "Avant le montant",
-      "fraction": "deux décimales",
-      "separator": "Séparateur",
-      "commaDot": "Virgule & Point",
-      "dotComma": "Point & Virgule",
-      "spaceDot": "Space & Virgule"
-    },
-    "openPDFReader": "Ouvrir le fichier PDF après l'export",
-    "language": {
-      "name": "Langue",
-      "cs": "Tchèque",
-      "da": "Danois",
-      "de": "Allemand",
-      "el": "Grec",
-      "en": "Anglais",
-      "esES": "Espagnol",
-      "fr": "Français",
-      "id": "Indonésien",
-      "it": "Italien",
-      "ja": "Japonais",
-      "lt": "Lituanien",
-      "nl": "Néerlandais",
-      "ptBR": "Portugais (Brésil)",
-      "ptPT": "Portugais",
-      "ru": "Russe",
-      "th": "Thaï",
-      "tl": "Tagalog, Philippines",
-      "tr": "Turc",
-      "vi": "Vietnamien",
-      "zh-CN": "Chinois (Simplifié)",
-      "zh-TW": "Chinois (Traditionnel)"
-    },
-    "other": "Autre"
-  }
-}
\ No newline at end of file
diff --git a/i18n/fr/tour.json b/i18n/fr/tour.json
deleted file mode 100644
index 62bbb9ef..00000000
--- a/i18n/fr/tour.json
+++ /dev/null
@@ -1,29 +0,0 @@
-{
-  "actions": {
-    "skip": "Passer",
-    "next": "Suivant",
-    "start": "Commencer la facturation"
-  },
-  "slides": {
-    "welcome": {
-      "heading": "👋 Salut !",
-      "description": "Merci de me donner une chance. Laissez-moi vous montrer comment créer de sublimes factures en seulement 3 étapes simples"
-    },
-    "create": {
-      "heading": "Étape 1. Créer",
-      "description": "Manta a une interface de formulaire flexible. Il garde les choses simples par défaut, mais vous pouvez toujours activer/désactiver des champs supplémentaires à chaque fois que cela vous semble nécessaire."
-    },
-    "preview": {
-      "heading": "Étape 2. Personnaliser",
-      "description": "Manta est livré avec des modèles professionnels qui peuvent être personnalisés afin de correspondre au style de votre marque."
-    },
-    "save": {
-      "heading": "Étape 3. Sauvegarder",
-      "description": "Une fois satisfait de l'apparence de la facture, vous pouvez l'enregistrer en PDF pour plus tard. Imprimez-la ou envoyez-la par email dès maintenant pour impressionner vos clients avec Manta!"
-    },
-    "success": {
-      "heading": "Terminé !!! ✋️",
-      "description": "Et voilà les 3 étapes simples pour créer de superbes factures avec Manta.\nN'oubliez pas de mettre à jour le profil de la société ainsi que son logo avant d'éditer de vraie factures."
-    }
-  }
-}
\ No newline at end of file
diff --git a/i18n/i18n.js b/i18n/i18n.js
index 5d5cf961..bcc53055 100644
--- a/i18n/i18n.js
+++ b/i18n/i18n.js
@@ -7,39 +7,34 @@ const isDev = require('electron-is-dev');
 const moment = require('moment');
 
 // Language Files
-import fr from './fr/index.js';
-import en from './en/index.js';
-import vi from './vi/index.js';
+import en from './en';
+import ko from './ko';
+import vi from './vi';
+import zhCN from './zh-CN';
 
 i18n.use(reactI18nextModule).init({
   lng: defaultLanguage,
   fallbackLng: 'en',
   debug: isDev,
-  // ns: ['form', 'common', 'invoices'],
   defaultNS: 'form',
   resources: {
     en,
-    fr,
+    ko,
     vi,
+    "zh-CN": zhCN
   },
   interpolation: {
     function(value, format, lng) {
-      if (format === 'uppercase') return value.toUpperCase();
       if (value instanceof Date) return moment(value).format(format);
       return value;
     },
   },
   react: {
     wait: false,
-    bindI18n: 'languageChanged loaded',
-    bindStore: 'added removed',
-    nsMode: 'default',
+    bindI18n: false,
+    bindStore: false,
+    nsMode: false,
   },
 });
 
-// Keep the language on moment in sync with i18next
-i18n.on('languageChanged', lang => {
-  moment.locale(lang);
-});
-
 export default i18n;
diff --git a/i18n/ko/common.json b/i18n/ko/common.json
new file mode 100644
index 00000000..d01abad0
--- /dev/null
+++ b/i18n/ko/common.json
@@ -0,0 +1,16 @@
+{
+  "fields": {
+    "fullname": "이름",
+    "company": "회사",
+    "address": "주소",
+    "email": "이메일",
+    "phone": "전화번호",
+    "website": "웹사이트"
+  },
+  "save": "저장",
+  "amount": "양",
+  "default": "기본",
+  "saveAsDefault": "기본 값으로 저장할까요?",
+  "yes": "네",
+  "noThanks": "아뇨, 괜찮아요"
+}
\ No newline at end of file
diff --git a/i18n/ko/contacts.json b/i18n/ko/contacts.json
new file mode 100644
index 00000000..797d10dd
--- /dev/null
+++ b/i18n/ko/contacts.json
@@ -0,0 +1,9 @@
+{
+  "header": "모든 연락처",
+  "fields": {
+    "contact": "연락처",
+    "email": "이메일",
+    "phone": "휴대전화",
+    "actions": "작업"
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/dialog.json b/i18n/ko/dialog.json
new file mode 100644
index 00000000..fb8e699b
--- /dev/null
+++ b/i18n/ko/dialog.json
@@ -0,0 +1,89 @@
+{
+  "appUpdate": {
+    "available": {
+      "title": "새 업데이트가 있습니다",
+      "message": "백그라운드에서 업데이트를 다운로드할까요?"
+    },
+    "noUpdate": {
+      "title": "새 업데이트가 없습니다",
+      "message": "최신 버전을 사용하고 있습니다"
+    },
+    "error": {
+      "title": "오류가 발생했습니다"
+    },
+    "downloaded": {
+      "title": "업데이트 다운로드 완료",
+      "message": "프로그램을 종료하고 업그레이드할까요?",
+      "quitNow": "지금 종료",
+      "later": "나중에"
+    }
+  },
+  "noAccess": {
+    "title": "접근 권한이 없습니다",
+    "message": "다른 경로를 선택해주세요"
+  },
+  "errorBoundary": "오류가 발생했습니다",
+  "deleteInvoice": {
+    "title": "이 송장을 삭제할까요?",
+    "message": "송장이 영구적으로 제거됩니다"
+  },
+  "deleteContact": {
+    "title": "이 연락처를 삭제할까요?",
+    "message": "연락처가 영구적으로 제거됩니다"
+  },
+  "fileTypeErr": {
+    "title": "다른 파일을 선택해주세요"
+  },
+  "validation": {
+    "recipient": {
+      "empty": {
+        "title": "연락처 잘못됨",
+        "message": "연락처는 필수 입력 항목입니다"
+      },
+      "requiredFields": {
+        "title": "필수 입력 항목",
+        "message": "필수 입력 항목을 모두 채워주세요"
+      },
+      "email": {
+        "title": "이메일 잘못됨",
+        "message": "다른 이메일을 선택해주세요."
+      }
+    },
+    "rows": {
+      "emptyDescription": {
+        "title": "품명 잘못됨",
+        "message": "품명은 필수 입력 항목입니다"
+      },
+      "priceZero": {
+        "title": "가격 잘못됨",
+        "message": "가격 값은 0보다 커야합니다"
+      },
+      "qtyZero": {
+        "title": "수량 잘못됨",
+        "message": "수량 값은 0보다 커야합니다"
+      }
+    },
+    "dueDate": {
+      "title": "기한 날짜 잘못됨",
+      "message": "유효한 날짜를 선택해주세요"
+    },
+    "currency": {
+      "fraction": {
+        "title": "소수 잘못됨",
+        "message": "소수 값은 0과 같거나 더 커야합니다"
+      }
+    },
+    "discount": {
+      "title": "할인 값 잘못됨",
+      "message": "할인 값은 0보다 커야합니다"
+    },
+    "tax": {
+      "title": "세금 값 잘못됨",
+      "message": "세금 값은 0보다 커야합니다"
+    },
+    "note": {
+      "title": "기타 사항 잘못됨",
+      "message": "기타 사항은 필수 입력 항목입니다"
+    }
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/form.json b/i18n/ko/form.json
new file mode 100644
index 00000000..189c6a75
--- /dev/null
+++ b/i18n/ko/form.json
@@ -0,0 +1,46 @@
+{
+  "header": {
+    "new": "송장 만들기",
+    "edit": "송장 수정하기",
+    "btns": {
+      "clear": "초기화",
+      "update": "업데이트",
+      "saveAndPreview": "저장하고 미리 보기"
+    }
+  },
+  "settings": {
+    "name": "양식 설정",
+    "hint": "칸이 더 필요하신가요? 원하시는 칸을 켜고 끄세요."
+  },
+  "fields": {
+    "items": {
+      "name": "품목 / 서비스",
+      "description": "품명",
+      "price": "가격",
+      "quantity": "수량",
+      "add": "새 품목 추가"
+    },
+    "recipient": {
+      "name": "받는 사람",
+      "select": "연락처 중에서 선택",
+      "add": "새로 작성"
+    },
+    "discount": {
+      "name": "할인",
+      "percentage": "퍼센트 비율",
+      "flat": "고정 할인 요금"
+    },
+    "dueDate": {
+      "name": "기한 날짜",
+      "placeHolder": "날짜를 선택하세요"
+    },
+    "tax": {
+      "name": "세금",
+      "id": "납세자 번호",
+      "method": "지불 방식",
+      "reverse": "매입자 납부"
+    },
+    "note": "기타 사항",
+    "currency": "통화"
+  }
+}
\ No newline at end of file
diff --git a/i18n/fr/index.js b/i18n/ko/index.js
similarity index 100%
rename from i18n/fr/index.js
rename to i18n/ko/index.js
diff --git a/i18n/ko/invoices.json b/i18n/ko/invoices.json
new file mode 100644
index 00000000..a1a2bbdc
--- /dev/null
+++ b/i18n/ko/invoices.json
@@ -0,0 +1,23 @@
+{
+  "header": {
+    "name": "모든 송장"
+  },
+  "fields": {
+    "client": "거래처",
+    "invoiceID": "송장 번호",
+    "createdDate": "생성일",
+    "dueDate": "기한 날짜",
+    "total": "총 가격"
+  },
+  "status": {
+    "pending": "결제 대기 중",
+    "paid": "결제 완료",
+    "refunded": "환급",
+    "cancelled": "취소"
+  },
+  "btns": {
+    "view": "보기",
+    "edit": "수정하기",
+    "markAsPaid": "결제 완료로 표시"
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/messages.json b/i18n/ko/messages.json
new file mode 100644
index 00000000..83419055
--- /dev/null
+++ b/i18n/ko/messages.json
@@ -0,0 +1,16 @@
+{
+  "noContact": "아무런 연락처가 없습니다",
+  "noInvoice": "아무런 송장이 없습니다",
+  "invoice": {
+    "saved": "송장이 성공적으로 저장되었습니다",
+    "updated": "송장이 성공적으로 업데이트되었습니다",
+    "deleted": "송장이 성공적으로 삭제되었습니다"
+  },
+  "contact": {
+    "saved": "연락처가 성공적으로 저장되었습니다",
+    "deleted": "연락처가 성공적으로 삭제되었습니다"
+  },
+  "settings": {
+    "saved": "모든 설정이 성공적으로 저장되었습니다"
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/preview.json b/i18n/ko/preview.json
new file mode 100644
index 00000000..11e6cfb2
--- /dev/null
+++ b/i18n/ko/preview.json
@@ -0,0 +1,41 @@
+{
+  "sidebar": {
+    "template": "템플릿",
+    "alignment": {
+      "name": "정렬",
+      "top": "위",
+      "middle": "중간",
+      "bottom": "아래"
+    },
+    "fontSize": "글자 크기",
+    "toggle": {
+      "name": "표시 설정",
+      "logo": "로고",
+      "symbol": "화폐 기호",
+      "recipient": "받는 사람"
+    },
+    "accentColor": {
+      "name": "강조 색상",
+      "useCustom": "직접 설정"
+    },
+    "actions": {
+      "name": "작업",
+      "savePDF": "PDF로 내보내기",
+      "saveConfigs": "구성 저장"
+    }
+  },
+  "common": {
+    "billedTo": "청구지",
+    "chooseInvoiceToPreview": "미리 보기 할 송장을 선택하세요",
+    "created": "작성일",
+    "due": "기한",
+    "invoice": "송장",
+    "itemDescription": "품목 설명",
+    "notice": "기타 사항",
+    "order": "주문 번호",
+    "price": "가격",
+    "qty": "수량",
+    "subtotal": "상품 가격",
+    "total": "합계"
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/settings.json b/i18n/ko/settings.json
new file mode 100644
index 00000000..e7e42d7a
--- /dev/null
+++ b/i18n/ko/settings.json
@@ -0,0 +1,63 @@
+{
+  "header": "설정",
+  "tabs": {
+    "profile": "프로필",
+    "invoice": "송장",
+    "general": "일반"
+  },
+  "fields": {
+    "logo": {
+      "name": "로고",
+      "hint": "PNG, JPG, SVG (권장) 형식"
+    },
+    "taxSettings": "세금 설정",
+    "template": "템플릿",
+    "dateFormat": "날짜 표시 형식",
+    "pdfExportDir": "PDF 내보내기 경로",
+    "requiredFields": "필수 입력 항목",
+    "sound": "효과음",
+    "mute": "음소거",
+    "autoCheckUpdate": {
+      "name": "자동 업데이트 확인",
+      "daily": "매일 (권장)",
+      "weekly": "매주"
+    },
+    "currency": {
+      "placement": "기호 배치",
+      "afterAmount": "합계 후",
+      "beforeAmount": "합계 전",
+      "fraction": "소수",
+      "separator": "단위 구분 기호",
+      "commaDot": "쉼표, 점",
+      "dotComma": "점, 쉼표",
+      "spaceDot": "공백, 점"
+    },
+    "openPDFReader": "PDF로 내보내고 열기",
+    "language": {
+      "name": "언어",
+      "cs": "čeština (체코어)",
+      "da": "dansk (덴마크어)",
+      "de": "Deutsch (독일어)",
+      "el": "ελληνικά (그리스어)",
+      "en": "English (영어)",
+      "esES": "español (스페인어)",
+      "fr": "français (프랑스어)",
+      "id": "Bahasa Indonesia (인도네시아어)",
+      "it": "italiano (이탈리아어)",
+      "ja": "日本語 (일본어)",
+      "ko": "한국어",
+      "lt": "lietuvių kalba (리투아니아어)",
+      "nl": "Nederlands (네덜란드어)",
+      "ptBR": "português (포르투갈어, 브라질)",
+      "ptPT": "português (포르투갈어)",
+      "ru": "Русский язык (러시아어)",
+      "th": "ภาษาไทย (태국어)",
+      "tl": "Tagalog (타갈로그어, 필리핀)",
+      "tr": "Türkçe (터기어)",
+      "vi": "tiếng việt (베트남어)",
+      "zh-CN": "중국어 (간체)",
+      "zh-TW": "중국어 (번체)"
+    },
+    "other": "기타"
+  }
+}
\ No newline at end of file
diff --git a/i18n/ko/tour.json b/i18n/ko/tour.json
new file mode 100644
index 00000000..b5a9bf2b
--- /dev/null
+++ b/i18n/ko/tour.json
@@ -0,0 +1,29 @@
+{
+  "actions": {
+    "skip": "건너뛰기",
+    "next": "다음",
+    "start": "당장 시작하겠소!"
+  },
+  "slides": {
+    "welcome": {
+      "heading": "👋 반가워요!",
+      "description": "Manta를 이용해주셔서 감사합니다! 겨우 3가지의 과정만으로 훌륭한 송장을 만드는 방법을 보여 드리죠."
+    },
+    "create": {
+      "heading": "하나. 만들기",
+      "description": "Manta는 유연한 인터페이스를 가지고 있죠. 단순히 필요한 칸을 찾아서 원하시는 대로 켜고 끌 수도 있습니다."
+    },
+    "preview": {
+      "heading": "둘. 구성하기",
+      "description": "Manta에서 제공하는 멋진 템플릿을 이용해서 자신의 스타일에 맞춰 구성해보세요."
+    },
+    "save": {
+      "heading": "셋. 저장하기",
+      "description": "송장이 마음에 드신가요? 나중에 사용할 수 있도록 PDF 파일로 저장하실 수도 있답니다. 뽑아서, 메일로 보내면 끝. Manta로 고객에게 깊은 인상을 심어보세요!"
+    },
+    "success": {
+      "heading": "끝!!! ✋️",
+      "description": "단지 세 과정 밖에 없다니, 너무 간단하지 않은가요? 송장을 만들기 전에 꼭 회사 프로필과 로고를 업데이트하는 것, 잊지 마세요!"
+    }
+  }
+}
\ No newline at end of file
diff --git a/i18n/vi/dialog.json b/i18n/vi/dialog.json
index 1387097f..b3e369bc 100644
--- a/i18n/vi/dialog.json
+++ b/i18n/vi/dialog.json
@@ -68,8 +68,10 @@
       "message": "Hãy chọn một ngày"
     },
     "currency": {
-      "title": "Đơn vị tiền không hợp lệ",
-      "message": "Vui lòng chọn một loại tiền tệ"
+      "fraction": {
+        "title": "Phân số không hợp lệ",
+        "message": "Phân số thập phân phải bằng hoặc lớn hơn 0"
+      }
     },
     "discount": {
       "title": "Khuyến mãi không hợp lệ",
diff --git a/i18n/vi/preview.json b/i18n/vi/preview.json
index f1714b9d..b1943f00 100644
--- a/i18n/vi/preview.json
+++ b/i18n/vi/preview.json
@@ -9,7 +9,7 @@
     },
     "fontSize": "Cỡ chữ",
     "toggle": {
-      "name": "Ẩn Hiện",
+      "name": "Bật\/tắt",
       "logo": "Logo",
       "symbol": "Biểu tượng",
       "recipient": "Người nhận"
@@ -20,7 +20,8 @@
     },
     "actions": {
       "name": "Tác vụ",
-      "savePDF": "Xuất ra PDF"
+      "savePDF": "Xuất ra PDF",
+      "saveConfigs": "Lưu Tuỳ Chỉnh"
     }
   },
   "common": {
diff --git a/i18n/vi/settings.json b/i18n/vi/settings.json
index c8039ca6..a4be78c3 100644
--- a/i18n/vi/settings.json
+++ b/i18n/vi/settings.json
@@ -27,10 +27,10 @@
       "afterAmount": "Sau số tiền",
       "beforeAmount": "Trước số tiền",
       "fraction": "Phân số thập phân",
-      "separator": "Dấu phân cách",
-      "commaDot": "Phẩy & Chấm",
-      "dotComma": "Chấm & Phẩy",
-      "spaceDot": "Dấu cách & Chấm"
+      "separator": "Dấu ngăn cách",
+      "commaDot": "Dấu phẩy & chấm",
+      "dotComma": "Dấu chấm & phẩy",
+      "spaceDot": "Dấu cách và chấm"
     },
     "openPDFReader": "Mở file PDF sau khi xuất",
     "language": {
@@ -38,23 +38,23 @@
       "cs": "Tiếng Séc",
       "da": "Tiếng Đan Mạch",
       "de": "Tiếng Đức",
-      "el": "Tiếng Hi Lạp",
+      "el": "Tiếng Hy Lạp",
       "en": "Tiếng Anh",
-      "esES": "Tiếng Tây Ban Nha",
+      "esES": "Spanish",
       "fr": "Tiếng Pháp",
       "id": "Tiếng Indonesia",
       "it": "Tiếng Ý",
       "ja": "Tiếng Nhật",
       "lt": "Tiếng Lithuania",
       "nl": "Tiếng Hà Lan",
-      "ptBR": "Tiếng Bồ Đào Nha (Brazil)",
+      "ptBR": "Tiếng Bồ Đào Nha, Brazil",
       "ptPT": "Tiếng Bồ Đào Nha",
       "ru": "Tiếng Nga",
       "th": "Tiếng Thái",
-      "tl": "Tiếng Philippines",
+      "tl": "Tiếng Tagalog, Philippines",
       "tr": "Tiếng Thổ Nhĩ Kỳ",
       "vi": "Tiếng Việt",
-      "zh-CN": "Tiếng Trung (Giản Thể)",
+      "zh-CN": "Tiếng Trung (Giản thể)",
       "zh-TW": "Tiếng Trung (Phồn Thể)"
     },
     "other": "Khác"
diff --git a/i18n/zh-CN/common.json b/i18n/zh-CN/common.json
new file mode 100644
index 00000000..d40c07e2
--- /dev/null
+++ b/i18n/zh-CN/common.json
@@ -0,0 +1,16 @@
+{
+  "fields": {
+    "fullname": "完整姓名",
+    "company": "公司",
+    "address": "地址",
+    "email": "电子邮件",
+    "phone": "电话号码",
+    "website": "网站"
+  },
+  "save": "保存",
+  "amount": "金额",
+  "default": "默认",
+  "saveAsDefault": "保存为默认？",
+  "yes": "是",
+  "noThanks": "不，谢谢"
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/contacts.json b/i18n/zh-CN/contacts.json
new file mode 100644
index 00000000..93284d08
--- /dev/null
+++ b/i18n/zh-CN/contacts.json
@@ -0,0 +1,9 @@
+{
+  "header": "所有联系人",
+  "fields": {
+    "contact": "联系人",
+    "email": "电子邮件",
+    "phone": "电话",
+    "actions": "操作"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/dialog.json b/i18n/zh-CN/dialog.json
new file mode 100644
index 00000000..3c141ee2
--- /dev/null
+++ b/i18n/zh-CN/dialog.json
@@ -0,0 +1,89 @@
+{
+  "appUpdate": {
+    "available": {
+      "title": "有可用的更新",
+      "message": "是否要在后台下载更新？"
+    },
+    "noUpdate": {
+      "title": "没有可用的更新",
+      "message": "你已经在使用最新版本"
+    },
+    "error": {
+      "title": "发生错误"
+    },
+    "downloaded": {
+      "title": "已经成功下载更新",
+      "message": "是否要立即退出程序并升级？",
+      "quitNow": "立即退出",
+      "later": "稍后"
+    }
+  },
+  "noAccess": {
+    "title": "没有访问权限",
+    "message": "请选择另外一个目录"
+  },
+  "errorBoundary": "发生错误",
+  "deleteInvoice": {
+    "title": "要删除这个发票吗？",
+    "message": "该发票将从数据库中永久删除"
+  },
+  "deleteContact": {
+    "title": "要删除此联系人吗？",
+    "message": "该联系人将从数据库中永久删除"
+  },
+  "fileTypeErr": {
+    "title": "请选择另一个文件"
+  },
+  "validation": {
+    "recipient": {
+      "empty": {
+        "title": "无效的联系人",
+        "message": "联系人不能为空"
+      },
+      "requiredFields": {
+        "title": "必填项",
+        "message": "请填写所有必填项"
+      },
+      "email": {
+        "title": "无效的电子邮件",
+        "message": "请选择另外一个电子邮件"
+      }
+    },
+    "rows": {
+      "emptyDescription": {
+        "title": "无效简介",
+        "message": "简介不能为空"
+      },
+      "priceZero": {
+        "title": "无效的价格",
+        "message": "价格必须大于零"
+      },
+      "qtyZero": {
+        "title": "无效的数量",
+        "message": "数量必须大于零"
+      }
+    },
+    "dueDate": {
+      "title": "无效的截止日期",
+      "message": "请选择一个日期"
+    },
+    "currency": {
+      "fraction": {
+        "title": "无效的分数",
+        "message": "小数必须大于等于零"
+      }
+    },
+    "discount": {
+      "title": "无效的折扣",
+      "message": "打折比例必须大于零"
+    },
+    "tax": {
+      "title": "无效的税费",
+      "message": "税率必须大于零"
+    },
+    "note": {
+      "title": "无效的备注",
+      "message": "备注内容不能为空"
+    }
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/form.json b/i18n/zh-CN/form.json
new file mode 100644
index 00000000..04e2d273
--- /dev/null
+++ b/i18n/zh-CN/form.json
@@ -0,0 +1,46 @@
+{
+  "header": {
+    "new": "创建新发票",
+    "edit": "编辑发票",
+    "btns": {
+      "clear": "清空",
+      "update": "更新",
+      "saveAndPreview": "保存并预览"
+    }
+  },
+  "settings": {
+    "name": "表单设置",
+    "hint": "打开需要在表格中设置为必填的项目"
+  },
+  "fields": {
+    "items": {
+      "name": "产品/服务",
+      "description": "简介",
+      "price": "价格",
+      "quantity": "数量",
+      "add": "增加一项"
+    },
+    "recipient": {
+      "name": "接收者",
+      "select": "选择",
+      "add": "新建"
+    },
+    "discount": {
+      "name": "折扣",
+      "percentage": "百分比",
+      "flat": "固定金额"
+    },
+    "dueDate": {
+      "name": "截止日期",
+      "placeHolder": "选择一个日期"
+    },
+    "tax": {
+      "name": "税费",
+      "id": "税号",
+      "method": "计算方法",
+      "reverse": "反向征收"
+    },
+    "note": "备注",
+    "currency": "币种"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/index.js b/i18n/zh-CN/index.js
new file mode 100644
index 00000000..880d6014
--- /dev/null
+++ b/i18n/zh-CN/index.js
@@ -0,0 +1,21 @@
+import common from './common.json';
+import contacts from './contacts.json';
+import dialog from './dialog.json';
+import form from './form.json';
+import invoices from './invoices.json';
+import messages from './messages.json';
+import preview from './preview.json';
+import settings from './settings.json';
+import tour from './tour.json';
+
+export default {
+  common,
+  contacts,
+  dialog,
+  form,
+  invoices,
+  messages,
+  preview,
+  settings,
+  tour
+}
diff --git a/i18n/zh-CN/invoices.json b/i18n/zh-CN/invoices.json
new file mode 100644
index 00000000..1af782aa
--- /dev/null
+++ b/i18n/zh-CN/invoices.json
@@ -0,0 +1,23 @@
+{
+  "header": {
+    "name": "所有发票"
+  },
+  "fields": {
+    "client": "客户",
+    "invoiceID": "发票编号",
+    "createdDate": "创建日期",
+    "dueDate": "截止日期",
+    "total": "总价"
+  },
+  "status": {
+    "pending": "待定",
+    "paid": "已付款",
+    "refunded": "已退款",
+    "cancelled": "已取消"
+  },
+  "btns": {
+    "view": "查看",
+    "edit": "编辑",
+    "markAsPaid": "标记为「已付款」"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/messages.json b/i18n/zh-CN/messages.json
new file mode 100644
index 00000000..9280c76b
--- /dev/null
+++ b/i18n/zh-CN/messages.json
@@ -0,0 +1,16 @@
+{
+  "noContact": "你还没有任何联系人",
+  "noInvoice": "你还没有创建过任何发票",
+  "invoice": {
+    "saved": "已成功保存发票",
+    "updated": "已成功更新发票",
+    "deleted": "已成功删除发票"
+  },
+  "contact": {
+    "saved": "已成功保存联系人",
+    "deleted": "已成功删除联系人"
+  },
+  "settings": {
+    "saved": "已成功保存所有的设置"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/preview.json b/i18n/zh-CN/preview.json
new file mode 100644
index 00000000..8128e0cc
--- /dev/null
+++ b/i18n/zh-CN/preview.json
@@ -0,0 +1,41 @@
+{
+  "sidebar": {
+    "template": "模板",
+    "alignment": {
+      "name": "对齐方式",
+      "top": "顶部",
+      "middle": "中部",
+      "bottom": "底部"
+    },
+    "fontSize": "字体大小",
+    "toggle": {
+      "name": "显示选项",
+      "logo": "Logo",
+      "symbol": "货币符号",
+      "recipient": "接收者"
+    },
+    "accentColor": {
+      "name": "配色",
+      "useCustom": "使用自定义颜色"
+    },
+    "actions": {
+      "name": "操作",
+      "savePDF": "导出 PDF 文件",
+      "saveConfigs": "保存设置"
+    }
+  },
+  "common": {
+    "billedTo": "发送至",
+    "chooseInvoiceToPreview": "请选择要预览的发票",
+    "created": "创建日期",
+    "due": "截止日期",
+    "invoice": "发票",
+    "itemDescription": "简介",
+    "notice": "备注",
+    "order": "编号",
+    "price": "单价",
+    "qty": "数量",
+    "subtotal": "小计",
+    "total": "总计"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/settings.json b/i18n/zh-CN/settings.json
new file mode 100644
index 00000000..5e91c08b
--- /dev/null
+++ b/i18n/zh-CN/settings.json
@@ -0,0 +1,63 @@
+{
+  "header": "设置",
+  "tabs": {
+    "profile": "个人资料",
+    "invoice": "发票",
+    "general": "常规设置"
+  },
+  "fields": {
+    "logo": {
+      "name": "Logo",
+      "hint": "接受 PNG、JPG 和 SVG (推荐)"
+    },
+    "taxSettings": "税率设置",
+    "template": "模板",
+    "dateFormat": "日期格式",
+    "pdfExportDir": "PDF 导出目录",
+    "requiredFields": "必填项",
+    "sound": "提示音",
+    "mute": "静音",
+    "autoCheckUpdate": {
+      "name": "自动检查更新",
+      "daily": "每天（推荐）",
+      "weekly": "每周"
+    },
+    "currency": {
+      "placement": "货币符号位置",
+      "afterAmount": "在金额之前",
+      "beforeAmount": "在金额之后",
+      "fraction": "小数",
+      "separator": "分隔符",
+      "commaDot": "逗号和句号",
+      "dotComma": "句号和逗号",
+      "spaceDot": "空格和句号"
+    },
+    "openPDFReader": "导出之后打开 PDF",
+    "language": {
+      "name": "语言",
+      "cs": "捷克文",
+      "da": "丹麦文",
+      "de": "德语",
+      "el": "希腊文",
+      "en": "英语",
+      "esES": "西班牙文",
+      "fr": "法语",
+      "id": "印度尼西亚文",
+      "it": "意大利文",
+      "ja": "日文",
+      "ko": "朝鲜语",
+      "lt": "立陶宛文",
+      "nl": "荷兰文",
+      "ptBR": "葡萄牙文（巴西）",
+      "ptPT": "葡萄牙文",
+      "ru": "俄文",
+      "th": "泰文",
+      "tl": "他加禄文（菲律宾）",
+      "tr": "土耳其文",
+      "vi": "越南语",
+      "zh-CN": "中文（简体）",
+      "zh-TW": "中文（繁体）"
+    },
+    "other": "其他"
+  }
+}
\ No newline at end of file
diff --git a/i18n/zh-CN/tour.json b/i18n/zh-CN/tour.json
new file mode 100644
index 00000000..a1f8ec2a
--- /dev/null
+++ b/i18n/zh-CN/tour.json
@@ -0,0 +1,29 @@
+{
+  "actions": {
+    "skip": "跳过",
+    "next": "下一步",
+    "start": "开始开票"
+  },
+  "slides": {
+    "welcome": {
+      "heading": "👋  你好！",
+      "description": "感谢你尝试 Manta，请允许我展示一下如何用简单的 3 步来创建精美的发票"
+    },
+    "create": {
+      "heading": "第一步：创建",
+      "description": "Manta 拥有灵活的表单界面，默认状态下使用非常简单，但在你需要的地方都可以开启额外选项。"
+    },
+    "preview": {
+      "heading": "第二步：自定义",
+      "description": "Manta 自带了一些外观非常专业的模板，同时你也可以进一步自定义以契合自己的品牌风格。"
+    },
+    "save": {
+      "heading": "第三步：保存",
+      "description": "一旦发票的外观设置妥当，你可以把他保存成 PDF 以备日后使用，也可以打印出来或者邮件出去，用 Manta 来给你的客户留下一个好印象吧！"
+    },
+    "success": {
+      "heading": "完成！✋️",
+      "description": "都好了~ 利用 Manta，简单 3 步就能创建精美的发票，正式使用前请记得更新公司 logo 和简介。"
+    }
+  }
+}
\ No newline at end of file
diff --git a/preview/components/sidebar/Language.jsx b/preview/components/sidebar/Language.jsx
index 843100f6..7d690cb9 100644
--- a/preview/components/sidebar/Language.jsx
+++ b/preview/components/sidebar/Language.jsx
@@ -11,8 +11,7 @@ function Language({ t, language, handleInputChange, UILang }) {
       </Label>
       <select name="language" value={language} onChange={handleInputChange}>
         <option value="en">{t('settings:fields:language:en', { lng: UILang })}</option>
-        <option value="de">{t('settings:fields:language:de', { lng: UILang })}</option>
-        <option value="fr">{t('settings:fields:language:fr', { lng: UILang })}</option>
+        <option value="ko">{t('settings:fields:language:ko', { lng: UILang })}</option>
         <option value="vi">{t('settings:fields:language:vi', { lng: UILang })}</option>
         <option value="zh-CN">{t('settings:fields:language:zh-CN', { lng: UILang })}</option>
       </select>